Refactor payment method handling and simplify provider options in PaymentMethodModal

apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/ReadonlyBookingView.tsx

@@ -28,17 +28,18 @@ export function ReadonlyBookingView({ booking }: { booking: Freight.IBooking })
   const status = booking.status as string;
   const [payModalOpen, setPayModalOpen] = useState(false);
 
-  // Two-step flow: POST /payments/initiate to create the intent, then send the
-  // browser to the public /payments/checkout page which redirects to the
-  // selected provider to complete payment.
+  // POST /payments/initiate creates the intent and returns the provider's
+  // redirect URL (clientAction.url). Send the browser straight there; fall back
+  // to the public /payments/checkout page if no redirect URL came back.
   const payMutation = useMutation({
     mutationFn: (method: PaymentMethod) =>
       api.payments.initiate.call({ bookingId: booking.id, method }),
-    onSuccess: (_data, method) => {
-      window.location.href = paymentsService.checkoutUrl({
-        bookingId: booking.id,
-        method,
-      });
+    onSuccess: (data, method) => {
+      const redirectUrl =
+        data?.clientAction?.type === "REDIRECT" && data.clientAction.url
+          ? data.clientAction.url
+          : paymentsService.checkoutUrl({ bookingId: booking.id, method });
+      window.location.href = redirectUrl;
     },
   });
 

apps/edr-freight-web/portal/src/pages/bookings/BookingDetailPage/components/PaymentMethodModal.tsx

@@ -1,12 +1,5 @@
 import { Box, Button, Group, Modal, Stack, Text } from "@mantine/core";
-import {
-  Banknote,
-  Building2,
-  CreditCard,
-  Smartphone,
-  Wallet,
-  type LucideIcon,
-} from "lucide-react";
+import { Smartphone, type LucideIcon } from "lucide-react";
 import { useState } from "react";
 
 import type { PaymentMethod } from "@/services/payments.service";
@@ -18,6 +11,7 @@ interface ProviderOption {
   icon: LucideIcon;
 }
 
+// Only Telebirr and Waafi are enabled for now.
 const PROVIDERS: ProviderOption[] = [
   {
     method: "TELEBIRR",
@@ -25,42 +19,12 @@ const PROVIDERS: ProviderOption[] = [
     description: "Ethiopian mobile money",
     icon: Smartphone,
   },
-  {
-    method: "CBE_BIRR",
-    label: "CBE Birr",
-    description: "Commercial Bank of Ethiopia",
-    icon: Building2,
-  },
-  {
-    method: "EBIRR",
-    label: "E-Birr",
-    description: "Electronic payment gateway",
-    icon: Wallet,
-  },
   {
     method: "WAAFI",
-    label: "WAAFI",
+    label: "Waafi",
     description: "Djibouti mobile money",
     icon: Smartphone,
   },
-  {
-    method: "CARD",
-    label: "Card",
-    description: "Visa / Mastercard",
-    icon: CreditCard,
-  },
-  {
-    method: "DMONEY",
-    label: "D-Money",
-    description: "Djibouti D-money",
-    icon: Banknote,
-  },
-  {
-    method: "CAC_BANK",
-    label: "CAC Bank",
-    description: "CAC Int Bank (OTP)",
-    icon: Building2,
-  },
 ];
 
 function ProviderRow({
@@ -141,7 +105,7 @@ export function PaymentMethodModal({
   processing?: boolean;
   error?: string | null;
 }) {
-  const [method, setMethod] = useState<PaymentMethod | null>(null);
+  const [method, setMethod] = useState<PaymentMethod>(PROVIDERS[0].method);
 
   return (
     <Modal
@@ -184,9 +148,9 @@ export function PaymentMethodModal({
           mt={6}
           radius={10}
           color="edr-green"
-          disabled={!method || processing}
+          disabled={processing}
           loading={processing}
-          onClick={() => method && onConfirm(method)}
+          onClick={() => onConfirm(method)}
           styles={{
             root: { height: 46 },
             label: { fontSize: 14, fontWeight: 800 },