@instockng/storefront-ui 1.0.10 → 1.0.12

package/src/components/Checkout.tsx

@@ -0,0 +1,954 @@
+'use client';
+
+/**
+ * Checkout Component
+ *
+ * A multi-step floating modal checkout with smooth sliding transitions.
+ * Steps: 1) Customer Info, 2) Delivery Address, 3) Payment
+ */
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import * as Yup from 'yup';
+import { useGetDeliveryZones } from '@oms/api-client';
+import type { Order } from '@oms/api-client';
+import { useCart } from '../contexts/CartContext';
+import { Modal } from './ui/modal';
+import { FormInput } from './ui/form-input';
+import { FormSelect } from './ui/form-select';
+import { Button } from './ui/button';
+import {
+  Loader2,
+  Mail,
+  Phone,
+  Zap,
+  Banknote,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  CheckCircle,
+  Package,
+} from 'lucide-react';
+import { formatCurrency, cn } from '../lib/utils';
+import PaystackSVG from "../paystack.svg"
+import { usePaystackPayment } from '../hooks/usePaystackPayment';
+
+// Utility to clean phone number by removing all non-digit characters
+const cleanPhoneNumber = (phone: string): string => {
+  return phone.replace(/\D/g, '');
+};
+
+// Yup validation schemas for each step
+const customerSchema = Yup.object({
+  firstName: Yup.string()
+    .required('First name is required')
+    .min(2, 'First name must be at least 2 characters')
+    .max(50, 'First name must be less than 50 characters'),
+  lastName: Yup.string()
+    .required('Last name is required')
+    .min(2, 'Last name must be at least 2 characters')
+    .max(50, 'Last name must be less than 50 characters'),
+  email: Yup.string()
+    .required('Email is required')
+    .email('Please enter a valid email address'),
+  phone: Yup.string()
+    .required('Phone number is required')
+    .test('nigerian-phone', 'Please enter a valid Nigerian phone number (e.g. 0812 564 8668)', (value) => {
+      if (!value) return false;
+      const numbers = cleanPhoneNumber(value);
+
+      // Valid Nigerian mobile patterns
+      const validPatterns = [
+        /^0[789]\d{9}$/, // 0xxxxxxxxx (11 digits total)
+      ];
+
+      return validPatterns.some(pattern => pattern.test(numbers));
+    }),
+});
+
+const deliverySchema = Yup.object({
+  address: Yup.string()
+    .required('Street address is required')
+    .min(10, 'Please provide a complete address'),
+  city: Yup.string()
+    .required('City is required')
+    .min(3, 'City name must be at least 3 characters'),
+  state: Yup.string()
+    .required('State is required')
+    .test('not-empty', 'State is required', (value) => {
+      return !!value && value.trim() !== '';
+    }),
+  deliveryZoneId: Yup.string()
+    .required('Delivery zone is required')
+    .test('not-empty', 'Delivery zone is required', (value) => {
+      return !!value && value.trim() !== '';
+    }),
+});
+
+const paymentSchema = Yup.object({
+  paymentMethod: Yup.string()
+    .oneOf(['cod', 'online'], 'Please select a payment method')
+    .required('Payment method is required'),
+});
+
+export type PaymentMethod = 'cod' | 'online';
+
+export interface CheckoutFormData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  address: string;
+  city: string;
+  state?: string;
+  deliveryZoneId: string;
+  paymentMethod: PaymentMethod;
+  notes?: string;
+}
+
+export interface CheckoutProps {
+  /** Controls modal visibility */
+  isOpen: boolean;
+  /** Callback when modal should close */
+  onClose: () => void;
+  /** Initial form data */
+  initialData?: Partial<CheckoutFormData>;
+  /** Callback on successful checkout */
+  onSuccess?: (orderId: string) => void;
+  /** Callback on error */
+  onError?: (error: Error) => void;
+  /** Submit button text */
+  submitButtonText?: string;
+  /** States available for selection */
+  states?: Array<{ value: string; label: string }>;
+  /** Refund policy content */
+  refundPolicy?: {
+    title?: string;
+    policies?: string[];
+  };
+}
+
+type Step = 'customer' | 'delivery' | 'payment';
+
+export function Checkout({
+  isOpen,
+  onClose,
+  initialData,
+  onSuccess,
+  onError,
+  submitButtonText = 'Place Order',
+  refundPolicy,
+}: CheckoutProps) {
+
+  const paystackPublicKey = "pk_live_dfb74efb5f74d2acbc253d5ca396ab9015ef0fa7";
+
+  const [currentStep, setCurrentStep] = useState<Step>('customer');
+  const [selectedStateId, setSelectedStateId] = useState<string | undefined>(undefined);
+  const [selectedDeliveryZoneId, setSelectedDeliveryZoneId] = useState<string | undefined>(undefined);
+  const [completedOrder, setCompletedOrder] = useState<Order | null>(null);
+
+  // Get cart from CartProvider context (required)
+  const { refetch: refetchCart, isLoading: isLoadingCart, cart, updateCartMutation, checkoutMutation } = useCart();
+
+  // Paystack payment integration
+  const paystack = usePaystackPayment({
+    publicKey: paystackPublicKey || '',
+    onSuccess: async (response) => {
+
+      try {
+        const order = await checkout.mutateAsync({
+          firstName: formData.firstName,
+          lastName: formData.lastName,
+          email: formData.email,
+          phone: formData.phone,
+          address: formData.address,
+          city: formData.city,
+          deliveryZoneId: selectedDeliveryZoneId || formData.deliveryZoneId,
+          paymentMethod: formData.paymentMethod,
+          paystackReference: response.reference,
+        });
+
+        // Check if response is an error
+        if ('error' in order) {
+          const errorObj = order.error as { message?: string };
+          onError?.(new Error(errorObj?.message || 'Checkout failed'));
+          return;
+        }
+
+        // Store the completed order to show success view
+        setCompletedOrder(order as Order);
+        onSuccess?.(order.id);
+      } catch (error) {
+        onError?.(error as Error);
+      }
+    },
+    onClose: () => {
+      // User closed the payment popup without completing
+      console.log('Payment popup closed by user');
+    },
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      refetchCart();
+    }
+  }, [isOpen, refetchCart]);
+
+  const { data: states } = useGetDeliveryZones(cart?.brand?.id || '', {
+    enabled: !!cart?.brand?.id,
+  });
+
+  const selectedState = useMemo(() => {
+    return states?.find((state) => state.id === selectedStateId);
+  }, [states, selectedStateId]);
+
+  // Use checkout mutation from cart context
+  const checkout = checkoutMutation;
+
+  // Reset state when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setCompletedOrder(null);
+      setCurrentStep('customer');
+      checkout.reset();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const [formData, setFormData] = useState<CheckoutFormData>({
+    firstName: initialData?.firstName || '',
+    lastName: initialData?.lastName || '',
+    email: initialData?.email || '',
+    phone: initialData?.phone || '',
+    address: initialData?.address || '',
+    city: initialData?.city || '',
+    deliveryZoneId: initialData?.deliveryZoneId || '',
+    paymentMethod: initialData?.paymentMethod || 'online',
+    notes: initialData?.notes || '',
+  });
+
+  // Reset to first step when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setCurrentStep('customer');
+    }
+  }, [isOpen]);
+
+  // Sync form data with cart data only once when modal opens
+  // Use a ref to track if we've already synced to avoid overwriting user input
+  const [hasLoadedCartData, setHasLoadedCartData] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && cart && !initialData && !hasLoadedCartData) {
+      setFormData((prev) => ({
+        ...prev,
+        firstName: cart.customerFirstName || prev.firstName,
+        lastName: cart.customerLastName || prev.lastName,
+        email: cart.customerEmail || prev.email,
+        phone: cart.customerPhone || prev.phone,
+        deliveryZoneId: cart.deliveryZone?.id || prev.deliveryZoneId,
+      }));
+      setHasLoadedCartData(true);
+    }
+
+    // Reset the flag when modal closes
+    if (!isOpen) {
+      setHasLoadedCartData(false);
+    }
+  }, [isOpen, cart, initialData, hasLoadedCartData]);
+
+  // Reset payment method when delivery zone changes
+  useEffect(() => {
+    if (selectedDeliveryZoneId) {
+      // Find the selected zone to check available payment methods
+      const zone = selectedState?.zones.find(z => z.id === selectedDeliveryZoneId);
+
+      if (zone) {
+        // Reset payment method to allow user to choose based on new zone
+        setFormData((prev) => ({
+          ...prev,
+          paymentMethod: zone.allowOnline ? 'online' : 'cod',
+        }));
+      }
+    }
+  }, [selectedDeliveryZoneId, selectedState]);
+
+  const [formErrors, setFormErrors] = useState<Partial<Record<keyof CheckoutFormData, string>>>({});
+  const [isRefundAccordionOpen, setIsRefundAccordionOpen] = useState(false);
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    // Clear error when user starts typing
+    if (formErrors[name as keyof CheckoutFormData]) {
+      setFormErrors((prev) => ({ ...prev, [name]: undefined }));
+    }
+  };
+
+  // Auto-save customer fields on blur
+  const handleCustomerFieldBlur = useCallback(
+    (field: 'firstName' | 'lastName' | 'email' | 'phone') => {
+      const value = formData[field];
+      if (!value) return; // Don't save empty values
+
+      // Use proper type from updateCartMutation
+      type UpdateCartParams = Parameters<typeof updateCartMutation.mutate>[0];
+      const updateData: Partial<UpdateCartParams> = {};
+
+      if (field === 'firstName') updateData.customerFirstName = value;
+      else if (field === 'lastName') updateData.customerLastName = value;
+      else if (field === 'email') updateData.customerEmail = value;
+      else if (field === 'phone') updateData.customerPhone = value;
+
+      updateCartMutation.mutate(updateData);
+    },
+    [formData, updateCartMutation]
+  );
+
+  const validateStep = (step: Step): boolean => {
+    const errors: Partial<Record<keyof CheckoutFormData, string>> = {};
+
+    try {
+      if (step === 'customer') {
+        customerSchema.validateSync(formData, { abortEarly: false });
+      } else if (step === 'delivery') {
+        const deliveryData = {
+          address: formData.address,
+          city: formData.city,
+          state: selectedStateId || formData.state || '',
+          deliveryZoneId: selectedDeliveryZoneId || formData.deliveryZoneId || '',
+        };
+        deliverySchema.validateSync(deliveryData, { abortEarly: false });
+      } else if (step === 'payment') {
+        paymentSchema.validateSync(formData, { abortEarly: false });
+      }
+    } catch (err) {
+      if (err instanceof Yup.ValidationError) {
+        err.inner.forEach((error) => {
+          if (error.path) {
+            errors[error.path as keyof CheckoutFormData] = error.message;
+          }
+        });
+      }
+    }
+
+    setFormErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
+
+  const goToNextStep = () => {
+    if (!validateStep(currentStep)) return;
+
+    if (currentStep === 'customer') {
+      setCurrentStep('delivery');
+    } else if (currentStep === 'delivery') {
+      setCurrentStep('payment');
+    }
+  };
+
+  const goToPreviousStep = () => {
+    if (currentStep === 'payment') {
+      setCurrentStep('delivery');
+    } else if (currentStep === 'delivery') {
+      setCurrentStep('customer');
+    }
+  };
+
+  const handleCheckout = async () => {
+    // Validate all steps before checkout
+    if (!validateStep('customer')) {
+      setCurrentStep('customer');
+      return;
+    }
+    if (!validateStep('delivery')) {
+      setCurrentStep('delivery');
+      return;
+    }
+    if (!validateStep('payment')) {
+      return;
+    }
+
+    // If online payment selected, initiate Paystack payment first
+    if (formData.paymentMethod === 'online') {
+      if (!paystackPublicKey) {
+        onError?.(new Error('Paystack is not configured. Please contact support.'));
+        return;
+      }
+
+      if (!paystack.isLoaded) {
+        onError?.(new Error('Payment system is loading. Please try again.'));
+        return;
+      }
+
+      const amountInKobo = Math.round(cart!.pricing.total * 100); // Convert to kobo
+
+      // Initiate Paystack payment popup
+      // The onSuccess callback in the hook will handle the checkout completion
+      paystack.initializePayment({
+        email: formData.email || cart?.customerEmail || 'customer@example.com',
+        amount: amountInKobo,
+        currency: 'NGN',
+        metadata: {
+          cartId: cart?.id,
+          custom_fields: [
+            {
+              display_name: 'Customer Name',
+              variable_name: 'customer_name',
+              value: `${formData.firstName} ${formData.lastName}`,
+            },
+            {
+              display_name: 'Phone Number',
+              variable_name: 'phone_number',
+              value: formData.phone,
+            },
+          ],
+        },
+      });
+
+      return; // Exit here - payment flow continues in Paystack callback
+    }
+
+    // For COD payment, proceed directly with checkout
+    try {
+      const order = await checkout.mutateAsync({
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+        email: formData.email,
+        phone: formData.phone,
+        address: formData.address,
+        city: formData.city,
+        deliveryZoneId: selectedDeliveryZoneId || formData.deliveryZoneId,
+        paymentMethod: formData.paymentMethod,
+      });
+
+      // Check if response is an error
+      if ('error' in order) {
+        const errorObj = order.error as { message?: string };
+        onError?.(new Error(errorObj?.message || 'Checkout failed'));
+        return;
+      }
+
+      // Store the completed order to show success view
+      setCompletedOrder(order as Order);
+      onSuccess?.(order.id);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+
+  const stepTitles: Record<Step, string> = {
+    customer: 'Customer Information',
+    delivery: 'Delivery Address',
+    payment: 'Payment Method',
+  };
+
+  const currentStepTitle = useMemo(() => stepTitles[currentStep], [currentStep]);
+
+  const showTotal = currentStep === 'payment' || currentStep === 'delivery';
+
+  const footerContent = (
+    <div className="space-y-3">
+      {/* Total Display */}
+      {showTotal && cart?.pricing?.total && (
+        <div className='text-sm text-black relative'>
+          {isLoadingCart && <div className='absolute flex items-center justify-center inset-0 bg-white opacity-50'>
+            <Loader2 className="animate-spin text-accent-500" />
+          </div>}
+          <div className="flex items-center justify-between font-medium">
+            <span>Subtotal</span>
+            <span>
+              {formatCurrency(cart?.pricing?.subtotal ?? 0)}
+            </span>
+          </div>
+          {cart.pricing.discount && <div className="flex items-center justify-between font-medium">
+            <span>Discount</span>
+            <span className="text-green-600">
+              -{formatCurrency(cart?.pricing?.discount?.amount ?? 0)}
+            </span>
+          </div>}
+          <div className="flex items-center justify-between font-medium">
+            <span>Delivery Fee</span>
+            <span>
+              {formatCurrency(cart?.pricing?.deliveryCharge ?? 0)}
+            </span>
+          </div>
+          <hr className="border-gray-200 my-2" />
+          <div className="flex items-center justify-between font-medium">
+            <span>Total</span>
+            <span>
+              {formatCurrency(cart?.pricing?.total ?? 0)}
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Navigation Buttons */}
+      <div className="flex gap-3">
+        {currentStep !== 'customer' && (
+          <Button
+            type="button"
+            variant="outline"
+            onClick={goToPreviousStep}
+            className="flex-1 border-gray-400"
+            size="lg"
+          >
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            Back
+          </Button>
+        )}
+
+        {currentStep !== 'payment' ? (
+          <Button
+            type="button"
+            onClick={goToNextStep}
+            className="flex-1 bg-accent-500 text-white hover:bg-accent-600"
+            size="lg"
+          >
+            Next
+            <ChevronRight className="ml-2 h-4 w-4" />
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            onClick={handleCheckout}
+            disabled={checkout.isPending}
+            className="flex-1 bg-accent-500 text-white hover:bg-accent-600"
+            size="lg"
+          >
+            {checkout.isPending ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Processing...
+              </>
+            ) : (
+              submitButtonText
+            )}
+          </Button>
+        )}
+      </div>
+
+      {/* Error Message */}
+      {checkout.isError && (
+        <div className="rounded-lg bg-red-50 p-3 text-sm text-red-600">
+          Failed to place order. Please check your information and try again.
+        </div>
+      )}
+    </div>
+  );
+
+  const isPaymentMethodDisabled = (paymentMethod: PaymentMethod) => !cart?.availablePaymentMethods.includes(paymentMethod);
+
+  // Show success view if checkout completed
+  if (completedOrder) {
+    return (
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        title="Order Placed Successfully!"
+        footer={
+          <Button
+            onClick={onClose}
+            className="w-full bg-accent-500 text-white hover:bg-accent-600"
+            size="lg"
+          >
+            Close
+          </Button>
+        }
+        size="lg"
+        contentClassName="p-6"
+      >
+        <div className="text-center space-y-6">
+          {/* Success Icon */}
+          <div className="flex justify-center">
+            <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center">
+              <CheckCircle className="h-12 w-12 text-green-600" />
+            </div>
+          </div>
+
+          {/* Success Message */}
+          <div className="space-y-2">
+            <h3 className="text-2xl font-bold text-gray-900">Thank You!</h3>
+            <p className="text-gray-600">
+              Your order has been placed successfully.
+            </p>
+          </div>
+
+          {/* Order Details */}
+          <div className="bg-gray-50 rounded-lg p-6 space-y-4">
+            <div className="flex items-center justify-center space-x-2 text-gray-700">
+              <Package className="h-5 w-5" />
+              <span className="font-medium">Order #{completedOrder.orderNumber}</span>
+            </div>
+
+            <div className="border-t border-gray-200 pt-4 space-y-3">
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Customer</span>
+                <span className="font-medium text-gray-900">
+                  {completedOrder.firstName} {completedOrder.lastName}
+                </span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Phone</span>
+                <span className="font-medium text-gray-900">{completedOrder.phone}</span>
+              </div>
+              {completedOrder.email && (
+                <div className="flex justify-between text-sm">
+                  <span className="text-gray-600">Email</span>
+                  <span className="font-medium text-gray-900">{completedOrder.email}</span>
+                </div>
+              )}
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Payment Method</span>
+                <span className="font-medium text-gray-900">
+                  {completedOrder.paymentMethod === 'cod' ? 'Cash on Delivery' : 'Online Payment'}
+                </span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Total</span>
+                <span className="font-bold text-gray-900">
+                  {formatCurrency(completedOrder.totalPrice)}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {/* Delivery Notice */}
+          <div className="bg-blue-50 rounded-lg p-4">
+            <p className="text-sm text-blue-900">
+              <span className="font-semibold">We'll be in touch shortly!</span>
+              <br />
+              Our team will contact you soon to arrange delivery and confirm your order details.
+            </p>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={currentStepTitle}
+      footer={footerContent}
+      size="lg"
+      contentClassName="p-0"
+    >
+      {isLoadingCart ? (
+        <div className="flex items-center justify-center min-h-[300px]">
+          <Loader2 className="h-8 w-8 animate-spin text-gray-600" />
+        </div>
+      ) : (
+        <div className="w-full overflow-hidden">
+          {/* Sliding Steps Container */}
+          <div className="relative w-full">
+            <div
+              className={cn(
+                'flex transition-transform duration-300 ease-in-out w-full',
+                currentStep === 'customer' && 'translate-x-0',
+                currentStep === 'delivery' && '-translate-x-full',
+                currentStep === 'payment' && '-translate-x-[200%]'
+              )}
+            >
+              {/* Step 1: Customer Information */}
+              <div className="w-full min-w-full flex-shrink-0 p-4">
+                <div className="space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormInput
+                      label="First Name"
+                      type="text"
+                      name="firstName"
+                      value={formData.firstName}
+                      onChange={handleInputChange}
+                      onBlur={() => handleCustomerFieldBlur('firstName')}
+                      error={formErrors.firstName}
+                      autoCorrect="off"
+                      required
+                    />
+                    <FormInput
+                      label="Last Name"
+                      type="text"
+                      name="lastName"
+                      value={formData.lastName}
+                      onChange={handleInputChange}
+                      onBlur={() => handleCustomerFieldBlur('lastName')}
+                      error={formErrors.lastName}
+                      autoCorrect="off"
+                      required
+                    />
+                    <FormInput
+                      label="Email"
+                      type="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      onBlur={() => handleCustomerFieldBlur('email')}
+                      error={formErrors.email}
+                      icon={<Mail size={16} />}
+                      autoCorrect="off"
+                      required
+                    />
+                    <FormInput
+                      label="Phone Number"
+                      type="tel"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleInputChange}
+                      onBlur={() => handleCustomerFieldBlur('phone')}
+                      placeholder="e.g. 08012345678"
+                      maxLength={18}
+                      error={formErrors.phone}
+                      icon={<Phone size={16} />}
+                      autoCorrect="off"
+                      required
+                      className="font-semibold"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Step 2: Delivery Address */}
+              <div className="w-full min-w-full flex-shrink-0 p-4">
+                <div className="space-y-4">
+                  <FormInput
+                    label="Street Address"
+                    type="text"
+                    name="address"
+                    value={formData.address}
+                    onChange={handleInputChange}
+                    error={formErrors.address}
+                    autoCorrect="off"
+                    required
+                  />
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <FormInput
+                      label="Area"
+                      type="text"
+                      name="city"
+                      value={formData.city}
+                      onChange={handleInputChange}
+                      error={formErrors.city}
+                      autoCorrect="off"
+                      required
+                    />
+                    <FormSelect
+                      label="State"
+                      name="state"
+                      value={selectedStateId || ""}
+                      onChange={(e) => {
+                        setSelectedDeliveryZoneId('');
+                        const value = e.target.value;
+                        setSelectedStateId(value || undefined);
+                        // Clear error when user selects
+                        if (formErrors.state) {
+                          setFormErrors((prev) => ({ ...prev, state: undefined }));
+                        }
+                      }}
+                      error={formErrors.state}
+                      required
+                    >
+                      <option disabled value="">Select State</option>
+                      {states?.map((state) => (
+                        <option key={state.id} value={state.id}>
+                          {state.name}
+                        </option>
+                      ))}
+                    </FormSelect>
+
+                    <FormSelect
+                      label="Delivery Zone"
+                      value={selectedDeliveryZoneId || ""}
+                      onChange={(e) => {
+                        const zoneId = e.target.value;
+                        setSelectedDeliveryZoneId(zoneId || undefined);
+                        // Clear error when user selects
+                        if (formErrors.deliveryZoneId) {
+                          setFormErrors((prev) => ({ ...prev, deliveryZoneId: undefined }));
+                        }
+                        // Auto-update cart with delivery zone
+                        if (zoneId) {
+                          updateCartMutation.mutate({ deliveryZoneId: zoneId });
+                        }
+                      }}
+                      disabled={!selectedState}
+                      error={formErrors.deliveryZoneId}
+                      required
+                    >
+                      <option disabled value="">{selectedState ? 'Select Delivery Zone' : 'Select State First'}</option>
+                      {selectedState?.zones.map((zone) => (
+                        <option key={zone.id} value={zone.id}>
+                          {zone.name} ({formatCurrency(zone.deliveryCost)})
+                        </option>
+                      ))}
+                    </FormSelect>
+                  </div>
+                </div>
+              </div>
+
+              {/* Step 3: Payment Method */}
+              <div className="w-full min-w-full flex-shrink-0 p-4">
+                <div className="space-y-6">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    {/* Online Payment */}
+                    <div className="relative">
+                      <label
+                        className={cn(
+                          'flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200',
+                          formData.paymentMethod === 'online'
+                            ? 'border-accent-500 bg-accent-50'
+                            : 'border-gray-200 hover:border-gray-300',
+                          isPaymentMethodDisabled('online') && 'opacity-50 cursor-not-allowed'
+                        )}
+                      >
+                        <input
+                          type="radio"
+                          name="paymentMethod"
+                          value="online"
+                          disabled={isPaymentMethodDisabled('online')}
+                          checked={formData.paymentMethod === 'online'}
+                          onChange={handleInputChange}
+                          className="sr-only"
+                        />
+                        <div className="flex flex-col items-center text-center space-y-3">
+                          <div
+                            className={cn(
+                              'p-3 rounded-full',
+                              formData.paymentMethod === 'online'
+                                ? 'bg-accent-100 text-accent-600'
+                                : 'bg-gray-100 text-gray-600'
+                            )}
+                          >
+                            <Zap size={24} />
+                          </div>
+                          <div>
+                            <div className="font-semibold text-gray-900">Pay Online</div>
+                            <div className="text-sm text-gray-500 mt-1">
+                              Bank transfer
+                            </div>
+                            <img
+                              src={PaystackSVG}
+                              alt="Paystack"
+                              className="h-4 w-auto mt-2 mx-auto"
+                            />
+                          </div>
+                        </div>
+                        {formData.paymentMethod === 'online' && (
+                          <div className="absolute top-2 right-2">
+                            <div className="w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center">
+                              <div className="w-2 h-2 bg-white rounded-full"></div>
+                            </div>
+                          </div>
+                        )}
+                      </label>
+                    </div>
+
+                    {/* Cash on Delivery */}
+                    <label
+                      className={cn(
+                        'flex items-center justify-center relative p-4 border-2 rounded-xl cursor-pointer transition-all duration-200',
+                        formData.paymentMethod === 'cod'
+                          ? 'border-accent-500 bg-accent-50'
+                          : 'border-gray-200 hover:border-gray-300',
+                        isPaymentMethodDisabled('cod') && 'opacity-50 cursor-not-allowed'
+                      )}
+                    >
+                      <input
+                        type="radio"
+                        name="paymentMethod"
+                        value="cod"
+                        disabled={isPaymentMethodDisabled('cod')}
+                        checked={formData.paymentMethod === 'cod'}
+                        onChange={handleInputChange}
+                        className="sr-only"
+                      />
+                      <div className="flex flex-col items-center text-center space-y-3">
+                        <div
+                          className={cn(
+                            'p-3 rounded-full',
+                            formData.paymentMethod === 'cod'
+                              ? 'bg-accent-100 text-accent-600'
+                              : 'bg-gray-100 text-gray-600'
+                          )}
+                        >
+                          <Banknote size={24} />
+                        </div>
+                        <div>
+                          <div className="font-semibold text-gray-900">Pay on Delivery</div>
+                          <div className="text-sm text-gray-500 mt-1">
+                            Cash when item arrives
+                          </div>
+                        </div>
+                      </div>
+                      {formData.paymentMethod === 'cod' && (
+                        <div className="absolute top-2 right-2">
+                          <div className="w-5 h-5 bg-accent-600 rounded-full flex items-center justify-center">
+                            <div className="w-2 h-2 bg-white rounded-full"></div>
+                          </div>
+                        </div>
+                      )}
+                    </label>
+                  </div>
+
+                  {formErrors.paymentMethod && (
+                    <p className="text-red-600 text-sm">{formErrors.paymentMethod}</p>
+                  )}
+
+                  {/* Refund Policy Accordion */}
+                  {refundPolicy && (
+                    <div className="border border-gray-200 rounded-lg">
+                      <button
+                        type="button"
+                        onClick={() => setIsRefundAccordionOpen(!isRefundAccordionOpen)}
+                        className="overflow-hidden w-full flex items-center overflow-hidden rounded-lg rounded-b-none justify-between p-4 text-left hover:bg-gray-50 transition-colors"
+                      >
+                        <span className="text-sm font-medium text-gray-700">
+                          {refundPolicy.title || '🤔 Curious about Refunds?'}
+                        </span>
+                        <ChevronDown
+                          size={16}
+                          className={cn(
+                            'transform transition-transform duration-200 text-gray-500',
+                            isRefundAccordionOpen && 'rotate-180'
+                          )}
+                        />
+                      </button>
+                      <div
+                        className={cn(
+                          'overflow-hidden transition-all duration-300 ease-in-out',
+                          isRefundAccordionOpen
+                            ? 'max-h-96 opacity-100'
+                            : 'max-h-0 opacity-0'
+                        )}
+                      >
+                        <div className="px-4 pb-4 border-t border-gray-100">
+                          <div className="text-sm text-gray-600 space-y-3 pt-4">
+                            {refundPolicy.policies && (
+                              <div>
+                                <h4 className="font-bold text-gray-800 mb-2">
+                                  Our Refund Policy
+                                </h4>
+                                <ul className="space-y-1 ml-4">
+                                  {refundPolicy.policies.map((policy, idx) => (
+                                    <li key={idx} className="flex items-start">
+                                      <span className="text-green-600 mr-2">✓</span>
+                                      <span>{policy}</span>
+                                    </li>
+                                  ))}
+                                </ul>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}