Revert payment page

apps/edr-passenger-web/portal/src/app/booking/payment/page.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useBookingStore } from "@/lib/booking-store";
 import { usePaymentStore } from "@/lib/payment-store";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { apiClient } from "@/lib/api-client";
 import { useState, useEffect } from "react";
 import {
@@ -12,24 +12,46 @@ import {
   Wallet,
   Loader2,
   CheckCircle,
-  ExternalLink,
 } from "lucide-react";
 
-const METHOD_ICONS: Record<string, any> = {
+// Mock payment methods with Ethiopian providers
-  TELEBIRR: Smartphone,
+const paymentMethods = [
-  CBE_BIRR: Smartphone,
+  {
-  EBIRR: Smartphone,
+    id: "TELEBIRR",
-  CARD: CreditCard,
+    name: "Telebirr",
-  WALLET: Wallet,
+    icon: Smartphone,
-};
+    description: "Pay with Telebirr mobile money",
-
+    color: "bg-orange-50 border-orange-200 hover:border-orange-400",
-const METHOD_COLORS: Record<string, string> = {
+  },
-  TELEBIRR: "bg-orange-50 dark:bg-orange-900/20",
+  {
-  CBE_BIRR: "bg-blue-50 dark:bg-blue-900/20",
+    id: "CBE_BIRR",
-  EBIRR: "bg-green-50 dark:bg-green-900/20",
+    name: "CBE Birr",
-  CARD: "bg-purple-50 dark:bg-purple-900/20",
+    icon: Smartphone,
-  WALLET: "bg-indigo-50 dark:bg-indigo-900/20",
+    description: "Pay with CBE Birr",
-};
+    color: "bg-blue-50 border-blue-200 hover:border-blue-400",
+  },
+  {
+    id: "EBIRR",
+    name: "eBirr",
+    icon: Smartphone,
+    description: "Pay with eBirr",
+    color: "bg-green-50 border-green-200 hover:border-green-400",
+  },
+  {
+    id: "CARD",
+    name: "Card Payment",
+    icon: CreditCard,
+    description: "Pay with credit/debit card",
+    color: "bg-purple-50 border-purple-200 hover:border-purple-400",
+  },
+  {
+    id: "WALLET",
+    name: "Wallet",
+    icon: Wallet,
+    description: "Pay from your wallet balance",
+    color: "bg-indigo-50 border-indigo-200 hover:border-indigo-400",
+  },
+];
 
 export default function PaymentPage() {
   const router = useRouter();
@@ -39,100 +61,76 @@ export default function PaymentPage() {
   const [selectedMethod, setSelectedMethod] = useState<string | null>(null);
   const [isProcessing, setIsProcessing] = useState(false);
 
+  // Calculate total amount
   const baseFare = passengers.reduce(
     (sum) => sum + (selectedSchedule?.baseFareAdult || 0),
     0,
   );
   const totalAmount = baseFare;
 
-  // Fetch real payment methods
-  const { data: methodsData, isLoading: methodsLoading } = useQuery({
-    queryKey: ["payment-methods"],
-    queryFn: () => apiClient.get("/payments/methods") as Promise<any>,
-  });
-
-  const paymentMethods: any[] = Array.isArray(methodsData)
-    ? methodsData
-    : (methodsData as any)?.methods || (methodsData as any)?.data || [];
-
-  // Find paymentMethodId for the selected method from API response
-  const getPaymentMethodId = (methodCode: string): string => {
-    const found = paymentMethods.find(
-      (m: any) =>
-        m.code === methodCode ||
-        m.type === methodCode ||
-        m.name?.toUpperCase().replace(/\s/g, "_") === methodCode ||
-        m.id === methodCode,
-    );
-    return found?.id || found?.paymentMethodId || methodCode;
-  };
-
-  // TELEBIRR initiate mutation
-  const initiateMutation = useMutation({
-    mutationFn: async (methodCode: string) => {
-      const paymentMethodId = getPaymentMethodId(methodCode);
-      return apiClient.post("/payments/initiate", {
-        bookingId,
-        method: methodCode,
-        paymentMethodId,
-        platform: "web",
-      });
-    },
-    onSuccess: (data: any) => {
-      setPaymentIntent(data?.paymentIntentId || data?.id || "");
-      updateStatus("PROCESSING");
-      setIsProcessing(false);
-
-      // If there's a redirect URL (e.g. Telebirr checkout page), open it
-      if (data?.checkoutUrl || data?.redirectUrl || data?.paymentUrl) {
-        window.open(
-          data.checkoutUrl || data.redirectUrl || data.paymentUrl,
-          "_blank",
-        );
-      } else {
-        router.push("/booking/confirmation");
-      }
-    },
-    onError: (error: any) => {
-      console.error("Payment initiation failed:", error);
-      updateStatus("FAILED");
-      const msg =
-        error?.response?.data?.message ||
-        error?.message ||
-        "Payment failed. Please try again.";
-      alert(msg);
-      setIsProcessing(false);
-    },
-  });
-
-  // Generic payment intent mutation (for non-Telebirr methods)
   const paymentMutation = useMutation({
     mutationFn: async (data: any) => {
+      // Try to call the real API, fallback to mock if it fails
       try {
         return await apiClient.post("/payments/intent", data);
-      } catch {
+      } catch (error) {
+        console.log("Payment API not available, using mock payment");
+        // Mock payment response
         return {
           paymentIntentId: `mock-payment-${Date.now()}`,
           status: "PENDING",
+          amountMinor: data.amountMinor,
+          currency: data.currency,
+          method: data.method,
         };
       }
     },
     onSuccess: async (data: any) => {
       setPaymentIntent(data.paymentIntentId);
       updateStatus("PROCESSING");
+
+      // Simulate payment processing
       await new Promise((resolve) => setTimeout(resolve, 2000));
-      updateStatus("SUCCEEDED");
+
-      router.push("/booking/confirmation");
+      // Generate tickets after successful payment
+      try {
+        await generateTickets();
+        updateStatus("SUCCEEDED");
+        router.push("/booking/confirmation");
+      } catch (error) {
+        console.error("Ticket generation failed:", error);
+        // Still proceed to confirmation even if ticket generation fails
+        updateStatus("SUCCEEDED");
+        router.push("/booking/confirmation");
+      }
     },
     onError: (error: any) => {
+      console.error("Payment failed:", error);
       updateStatus("FAILED");
-      alert(
+      const errorMessage =
-        error?.response?.data?.message || "Payment failed. Please try again.",
+        error?.response?.data?.message ||
-      );
+        error?.message ||
+        "Payment failed. Please try again.";
+      alert(errorMessage);
       setIsProcessing(false);
     },
   });
 
+  const generateTickets = async () => {
+    // Try to generate tickets via API, fallback to mock
+    try {
+      await apiClient.post("/tickets/generate", {
+        bookingId,
+        pnr,
+      });
+    } catch (error) {
+      console.log(
+        "Ticket API not available, tickets will be generated on confirmation page",
+      );
+      // Mock ticket generation - tickets will be displayed on confirmation page
+    }
+  };
+
   const handlePayment = async () => {
     if (!selectedMethod || !bookingId) {
       alert("Please select a payment method");
@@ -141,23 +139,27 @@ export default function PaymentPage() {
 
     setIsProcessing(true);
 
-    if (selectedMethod === "TELEBIRR") {
+    paymentMutation.mutate({
-      debugger;
+      bookingId,
-      initiateMutation.mutate(selectedMethod);
+      method: selectedMethod,
-    } else {
+      currency: selectedCurrency,
-      paymentMutation.mutate({
+      amountMinor: totalAmount,
-        bookingId,
+    });
-        method: selectedMethod,
-        currency: selectedCurrency,
-        amountMinor: totalAmount,
-      });
-    }
   };
 
+  // Redirect if no booking data (but not during navigation)
   useEffect(() => {
+    // Add a small delay to allow state to be set from previous page
     const timer = setTimeout(() => {
-      if (!bookingId || !pnr) router.push("/booking/search");
+      if (!bookingId || !pnr) {
+        console.log(
+          "Payment page: Missing booking data, redirecting to search",
+        );
+        console.log("bookingId:", bookingId, "pnr:", pnr);
+        router.push("/booking/search");
+      }
     }, 500);
+
     return () => clearTimeout(timer);
   }, [bookingId, pnr, router]);
 
@@ -172,9 +174,6 @@ export default function PaymentPage() {
     );
   }
 
-  const isBusy =
-    isProcessing || initiateMutation.isPending || paymentMutation.isPending;
-
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 py-12">
       <div className="container mx-auto px-4">
@@ -187,22 +186,37 @@ export default function PaymentPage() {
             <span className="font-bold text-primary">{pnr}</span>
           </p>
 
-          {/* Processing overlay */}
+          {/* Payment Processing Overlay */}
-          {isBusy && (
+          {isProcessing && (
-            <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-              <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 max-w-sm w-full text-center shadow-2xl">
+              <div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md text-center">
-                <Loader2 className="w-14 h-14 text-primary animate-spin mx-auto mb-4" />
+                {paymentMutation.isSuccess ? (
-                <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">
+                  <>
-                  Processing payment
+                    <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
-                </h3>
+                    <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">
-                <p className="text-gray-500 dark:text-gray-400 text-sm">
+                      Payment successful!
-                  Please wait…
+                    </h3>
-                </p>
+                    <p className="text-gray-600 dark:text-gray-400 mb-4">
+                      Generating your tickets...
+                    </p>
+                    <Loader2 className="w-8 h-8 text-primary animate-spin mx-auto" />
+                  </>
+                ) : (
+                  <>
+                    <Loader2 className="w-16 h-16 text-primary animate-spin mx-auto mb-4" />
+                    <h3 className="text-xl font-bold mb-2 text-gray-900 dark:text-gray-100">
+                      Processing payment
+                    </h3>
+                    <p className="text-gray-600 dark:text-gray-400">
+                      Please wait while we process your payment...
+                    </p>
+                  </>
+                )}
               </div>
             </div>
           )}
 
-          {/* Order summary */}
+          {/* Order Summary */}
           <div className="card mb-6">
             <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
               Order summary
@@ -244,7 +258,7 @@ export default function PaymentPage() {
                   <span className="text-gray-900 dark:text-gray-100">
                     Total amount
                   </span>
-                  <span className="text-primary">
+                  <span className="text-primary dark:text-gray-100">
                     ETB {(totalAmount / 100).toFixed(2)}
                   </span>
                 </div>
@@ -252,120 +266,101 @@ export default function PaymentPage() {
             </div>
           </div>
 
-          {/* Payment methods */}
+          {/* Payment Methods */}
           <div className="card mb-6">
             <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
               Select payment method
             </h2>
-
+            <div className="space-y-3">
-            {methodsLoading ? (
+              {paymentMethods.map((method) => {
-              <div className="flex items-center justify-center py-8 gap-3 text-gray-500">
+                const Icon = method.icon;
-                <Loader2 className="w-5 h-5 animate-spin" />
+                const isSelected = selectedMethod === method.id;
-                <span className="text-sm">Loading payment methods…</span>
+                return (
-              </div>
+                  <button
-            ) : paymentMethods.length === 0 ? (
+                    key={method.id}
-              <p className="text-sm text-gray-400 text-center py-6">
+                    onClick={() => setSelectedMethod(method.id)}
-                No payment methods available.
+                    disabled={isProcessing}
-              </p>
+                    className={`w-full p-4 rounded-lg border-2 transition-all text-left ${
-            ) : (
+                      isSelected
-              <div className="space-y-3">
+                        ? "border-primary bg-primary/10 dark:bg-primary/20 shadow-md"
-                {paymentMethods.map((method: any) => {
+                        : "border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-primary dark:hover:border-primary"
-                  const code: string =
+                    } ${isProcessing ? "opacity-50 cursor-not-allowed" : ""}`}
-                    method.code || method.type || method.id || "";
+                  >
-                  const name: string =
+                    <div className="flex items-center gap-3">
-                    method.name || method.displayName || code;
+                      <div
-                  const description: string =
+                        className={`w-12 h-12 rounded-lg flex items-center justify-center ${
-                    method.description || `Pay with ${name}`;
+                          isSelected
-                  const isSelected = selectedMethod === code;
+                            ? "bg-primary"
-                  const Icon = METHOD_ICONS[code] || Smartphone;
+                            : "bg-gray-100 dark:bg-gray-700"
-                  const bgColor =
+                        }`}
-                    METHOD_COLORS[code] || "bg-gray-50 dark:bg-gray-800/50";
+                      >
-
+                        <Icon
-                  return (
+                          className={`w-6 h-6 ${isSelected ? "text-white" : "text-primary"}`}
-                    <button
+                        />
-                      key={code}
-                      onClick={() => setSelectedMethod(code)}
-                      disabled={isBusy}
-                      className={`w-full p-4 rounded-xl border-2 transition-all text-left ${
-                        isSelected
-                          ? "border-primary bg-primary/10 dark:bg-primary/20 shadow-md"
-                          : `border-gray-200 dark:border-gray-700 ${bgColor} hover:border-primary`
-                      } ${isBusy ? "opacity-50 cursor-not-allowed" : ""}`}
-                    >
-                      <div className="flex items-center gap-3">
-                        <div
-                          className={`w-11 h-11 rounded-xl flex items-center justify-center flex-shrink-0 ${
-                            isSelected
-                              ? "bg-primary"
-                              : "bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600"
-                          }`}
-                        >
-                          <Icon
-                            className={`w-5 h-5 ${isSelected ? "text-white" : "text-primary"}`}
-                          />
-                        </div>
-                        <div className="flex-1 min-w-0">
-                          <p className="font-semibold text-gray-900 dark:text-gray-100">
-                            {name}
-                          </p>
-                          <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
-                            {description}
-                          </p>
-                        </div>
-                        {code === "TELEBIRR" && (
-                          <span className="flex items-center gap-1 text-xs text-orange-600 dark:text-orange-400 font-medium flex-shrink-0">
-                            <ExternalLink className="w-3.5 h-3.5" />
-                            Redirect
-                          </span>
-                        )}
-                        {isSelected && (
-                          <div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
-                            <CheckCircle className="w-5 h-5 text-white" />
-                          </div>
-                        )}
                       </div>
-                    </button>
+                      <div className="flex-1">
-                  );
+                        <p className="font-semibold text-gray-900 dark:text-gray-100">
-                })}
+                          {method.name}
-              </div>
+                        </p>
-            )}
+                        <p className="text-sm text-gray-600 dark:text-gray-400">
+                          {method.description}
+                        </p>
+                      </div>
+                      {isSelected && (
+                        <div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center">
+                          <CheckCircle className="w-5 h-5 text-white" />
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
           </div>
 
-          {/* Actions */}
+          {/* Action Buttons */}
           <div className="flex flex-col gap-3">
             <button
               onClick={handlePayment}
-              disabled={!selectedMethod || isBusy || methodsLoading}
+              disabled={!selectedMethod || isProcessing}
-              className="btn-primary w-full py-4 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+              className={`btn-primary w-full py-4 text-lg font-semibold ${
+                !selectedMethod || isProcessing
+                  ? "opacity-50 cursor-not-allowed"
+                  : ""
+              }`}
             >
-              {isBusy ? (
+              {isProcessing ? (
                 <span className="flex items-center justify-center gap-2">
                   <Loader2 className="w-5 h-5 animate-spin" />
-                  Processing…
+                  Processing...
                 </span>
               ) : (
                 `Pay ETB ${(totalAmount / 100).toFixed(2)}`
               )}
             </button>
+
             <button
               onClick={() => router.back()}
-              disabled={isBusy}
+              disabled={isProcessing}
               className="btn-secondary w-full py-2"
             >
               Back to review
             </button>
           </div>
 
-          {(initiateMutation.isError || paymentMutation.isError) && (
+          {/* Error Message */}
-            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4 mt-4">
+          {paymentMutation.isError && (
-              <p className="text-red-700 dark:text-red-300 text-sm font-medium">
+            <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mt-4">
-                ⚠️ Payment failed. Please try again or contact support.
+              <p className="text-red-800 dark:text-red-200 text-sm font-medium">
+                ⚠️ Payment failed. Please try again or contact support if the
+                problem persists.
               </p>
             </div>
           )}
 
-          <div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl">
+          {/* Security Notice */}
-            <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+          <div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+            <p className="text-xs text-gray-600 dark:text-gray-400 text-center">
               🔒 Your payment is secure and encrypted. We do not store your
               payment information.
             </p>