storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/shared/pages/CheckoutPage.js

@@ -1,99 +1,36 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { ArrowLeft, ShieldCheck, CheckCircle, MapPin, Lock, ChevronRight, Tag, Truck, ChevronDown, Loader2, AlertCircle } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
+import { ArrowLeft, ShieldCheck, CheckCircle, MapPin, Lock, ChevronRight, Tag, Truck, ChevronDown } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import { cn } from '../../../lib/utils/index.js';
-import { usePayazaCheckout } from '../../../hooks/use-payaza-checkout.js';
-import { generateCheckoutConfig } from '../../../lib/payaza-checkout.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { useStore } from '../../../lib/store-context.js';
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '../../../lib/utils';
+import { usePayazaCheckout } from '../../../hooks/use-payaza-checkout';
+import { generateCheckoutConfig } from '../../../lib/payaza-checkout';
+import { requireCheckoutPayazaPublicKey } from '../../../lib/payaza-public-key';
+import { useToast } from '../../../components/ui/toast';
+import { useStore } from '../../../lib/store-context';
 import { useRouter } from 'next/navigation';
-import { normalizePrice, formatCurrency, getUserFriendlyErrorMessage } from '../../../lib/utils/index.js';
-import { checkoutService } from '../../../lib/services/checkout.service.js';
-import { orderService } from '../../../lib/services/order.service.js';
-import { paymentService, isPaymentConfirmed } from '../../../lib/services/payment.service.js';
-import { ApiError } from '../../../lib/api.js';
-import { useAuth } from '../../../lib/auth-context.js';
-import { customerService } from '../../../lib/services/customer.service.js';
-import { AddressSelector } from '../../../components/ui/address-selector.js';
-import { countries, getCountryByName, getCitiesByCountry, getNigerianCitiesByState } from '../../../lib/countries.js';
-import { useCheckoutFees } from '../../../hooks/use-checkout-fees.js';
-import { useMultiStoreCheckoutFees } from '../../../hooks/use-multi-store-checkout-fees.js';
-import { CheckoutFeeLines } from '../../../components/checkout/CheckoutFeeLines.js';
-import { shippingService } from '../../../lib/services/shipping.service.js';
-import { CHECKOUT_UNAVAILABLE_MESSAGE } from '../../../lib/checkout-availability.js';
-import { getCartLineImage } from '../../../lib/product-variation-utils.js';
-import { enrichShippingQuoteAddress, buildShippingCalculatePayload, canRequestShippingQuote, isNigeria, deriveNigerianStateFromCity, NIGERIAN_STATES } from '../../../lib/shipping-address.util.js';
-import { ShippingOptionsPanel } from '../../../components/checkout/ShippingOptionsPanel.js';
-import { CheckoutSkeleton } from '../../../components/ui/skeletons/checkout-skeleton.js';
-const CHECKOUT_ITEM_UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-function normalizeCheckoutPayloadItem(item) {
-    const product = item.product;
-    return {
-        productId: item.productId,
-        storeId: product?.storeId,
-        quantity: Number(item.quantity) || 1,
-        price: normalizePrice(item.price),
-        variationId: item.variantId && CHECKOUT_ITEM_UUID_REGEX.test(item.variantId)
-            ? item.variantId
-            : undefined,
-        variantId: item.variantId ?? undefined,
-    };
-}
-import { useAnalytics } from '../../../hooks/use-analytics.js';
-import { getOrCreateIdempotencyKey, resetIdempotencyKey } from '../../../lib/utils/idempotency-key.js';
-import { formatPhoneInput, validatePhone, getPhonePlaceholder, normalizePhoneForPayaza } from '../../../lib/utils/phone-format.js';
-import { saveGuestUserInfo } from '../../../lib/guest-user.js';
-import { InventoryHoldCountdown } from '../../../components/cart/InventoryHoldCountdown.js';
-import { formatCheckoutStockError, getCartLineStockInfo, isInventoryHoldExpired } from '../../../lib/inventory-utils.js';
-import { MerchantHandledDeliveryNotice } from '../../../components/shipping/MerchantHandledDeliveryNotice.js';
-import { isAutomatedShippingEnabled } from '../../../lib/shipping-settings.util.js';
-import { setOrderSuccessJustCompleted, isOrderSuccessPending } from '../../../lib/order-success-cart.js';
-import { trackStorefrontEvent } from '../../../lib/mixpanel.js';
-const PROMO_CODE_ENABLED = false;
-function isPaymentInventoryError(error) {
-    if (!error || typeof error !== 'object')
-        return false;
-    const candidate = error;
-    if (candidate.status === 409)
-        return true;
-    const message = (candidate.message || '').toLowerCase();
-    return (message.includes('insufficient stock') ||
-        message.includes('insufficient inventory') ||
-        message.includes('out of stock'));
-}
-function buildOrderSuccessUrl(storeSlug, params) {
-    const search = new URLSearchParams({
-        orderId: params.orderId,
-        ref: params.ref,
-    });
-    if (params.orderNumber)
-        search.set('orderNumber', params.orderNumber);
-    if (params.email)
-        search.set('email', params.email);
-    if (params.fulfillmentPending)
-        search.set('fulfillmentPending', 'true');
-    return `/${storeSlug}/order/success?${search.toString()}`;
-}
-function RequiredLabel({ children }) {
-    return (_jsxs("label", { className: "text-sm font-bold text-gray-700 ml-1", children: [children, " ", _jsx("span", { className: "text-red-500", children: "*" })] }));
-}
+import { normalizePrice, formatCurrency } from '../../../lib/utils';
+import { checkoutService } from '../../../lib/services/checkout.service';
+import { paymentService } from '../../../lib/services/payment.service';
+import { useAuth } from '../../../lib/auth-context';
+import { customerService } from '../../../lib/services/customer.service';
+import { AddressSelector } from '../../../components/ui/address-selector';
+import { countries, getCountryByName, getCitiesByCountry } from '../../../lib/countries';
+import { calculateVAT, getVATLabel } from '../../../lib/utils/fee-calculations';
+import { shippingService } from '../../../lib/services/shipping.service';
+import { feesService } from '../../../lib/services/fees.service';
+import { CheckoutSkeleton } from '../../../components/ui/skeletons/checkout-skeleton';
+import { useAnalytics } from '../../../hooks/use-analytics';
 export function CheckoutPage({ storeConfig }) {
     const primaryColor = storeConfig.branding.primaryColor;
-    const checkoutDisabled = storeConfig.checkoutEnabled === false;
-    const { cart, cartTotal, buyNowItem, clearBuyNowItem, setBuyNowItem, inventoryHoldUntil, setInventoryHoldUntil, handleInventoryHoldExpired, isCartRefreshing, refreshCart, finalizeCartAfterOrder, removeOrderItemsFromCart, isCartHydrated } = useStore();
+    const { cart, cartTotal, buyNowItem, clearBuyNowItem, setBuyNowItem } = useStore();
     const { addToast } = useToast();
     const router = useRouter();
     const { user, isAuthenticated } = useAuth();
     const { trackEvent } = useAnalytics();
-    const [isHoldExpired, setIsHoldExpired] = useState(false);
-    useEffect(() => {
-        setIsHoldExpired(isInventoryHoldExpired(inventoryHoldUntil));
-    }, [inventoryHoldUntil]);
-    const isHoldBlocking = !!inventoryHoldUntil && (isHoldExpired || isInventoryHoldExpired(inventoryHoldUntil));
     // Read from sessionStorage synchronously on mount if buyNowItem is not in context
     const [sessionBuyNowItem] = useState(() => {
         if (typeof window === 'undefined')
@@ -109,215 +46,47 @@ export function CheckoutPage({ storeConfig }) {
         }
         return null;
     });
-    // State to track buy-now restoration from sessionStorage
+    // State to track initialization
+    const [isInitializing, setIsInitializing] = useState(true);
     const hasRestoredRef = useRef(false);
     // Restore buyNowItem from sessionStorage to context if needed (only once on mount)
     useEffect(() => {
+        // Only run restoration once
         if (hasRestoredRef.current) {
             return;
         }
         hasRestoredRef.current = true;
-        if (!buyNowItem && sessionBuyNowItem) {
+        // If item is already in context, we're done
+        if (buyNowItem || sessionBuyNowItem) {
+            setIsInitializing(false);
+            return;
+        }
+        // If we have sessionBuyNowItem but not in context, restore it
+        if (sessionBuyNowItem) {
             setBuyNowItem(sessionBuyNowItem);
         }
+        // Add a small delay to ensure state propagation
+        const timer = setTimeout(() => {
+            setIsInitializing(false);
+        }, 150);
+        return () => clearTimeout(timer);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Ensure cart is loaded before rendering checkout (API-backed stores)
+    }, []); // Only run once on mount
+    // Stop initializing if buyNowItem becomes available after mount
     useEffect(() => {
-        if (!isCartHydrated) {
-            void refreshCart?.();
+        if (buyNowItem && isInitializing) {
+            setIsInitializing(false);
         }
-    }, [isCartHydrated, refreshCart]);
+    }, [buyNowItem, isInitializing]);
     // Use buyNowItem from context or sessionStorage, otherwise use cart
     const effectiveBuyNowItem = buyNowItem || sessionBuyNowItem;
     const checkoutItems = effectiveBuyNowItem ? [effectiveBuyNowItem] : cart;
-    const isMarketplaceCheckout = storeConfig.layout === 'marketplace' || storeConfig.slug === 'marketplace';
-    // Group checkout items by their real storeId regardless of context (marketplace or not) — a
-    // cart can end up spanning more than one store, and fee calculation needs to be done per store
-    // group either way. For marketplace checkouts specifically, the backend also creates one Order
-    // (and settles one Payment) per store even though the customer pays once — group the summary
-    // the same way so the customer sees this before submitting, mirroring Amazon's "split into N
-    // shipments" pattern.
-    const storeBreakdown = useMemo(() => {
-        const groups = new Map();
-        for (const item of checkoutItems) {
-            const product = item.product;
-            const storeId = product?.storeId || storeConfig.id;
-            const storeName = product?.storeName || `Store ${storeId.slice(0, 8)}`;
-            const existing = groups.get(storeId) || { storeId, storeName, subtotal: 0, itemCount: 0 };
-            existing.subtotal += normalizePrice(item.price) * item.quantity;
-            existing.itemCount += item.quantity;
-            groups.set(storeId, existing);
-        }
-        return Array.from(groups.values());
-    }, [checkoutItems, storeConfig.id]);
-    // Fees must be split per store whenever the cart spans more than one — this isn't limited to
-    // the "marketplace" virtual storefront, it's whatever the item data says.
-    const isMultiStoreCheckout = storeBreakdown.length > 1;
-    const checkoutStockIssues = useMemo(() => {
-        return checkoutItems
-            .map((item) => {
-            const stockInfo = getCartLineStockInfo(item.product, item.quantity);
-            const message = stockInfo.stockError || formatCheckoutStockError(item.product, item.quantity);
-            if (!message)
-                return null;
-            return { id: item.id, name: item.product.name, message };
-        })
-            .filter((issue) => issue != null);
-    }, [checkoutItems]);
-    const hasCheckoutStockIssues = checkoutStockIssues.length > 0;
     const checkoutTotal = effectiveBuyNowItem
         ? effectiveBuyNowItem.price * effectiveBuyNowItem.quantity
         : cartTotal;
-    const checkoutEntireCart = !effectiveBuyNowItem;
-    const completingOrderRef = useRef(false);
-    const [isCompletingOrder, setIsCompletingOrder] = useState(false);
-    const isPostPaymentNavigationPending = () => completingOrderRef.current || isCompletingOrder || isOrderSuccessPending();
-    const beginPostPaymentNavigation = (orderId) => {
-        completingOrderRef.current = true;
-        setIsCompletingOrder(true);
-        setOrderSuccessJustCompleted(orderId);
-    };
-    const redirectToPaymentCallback = (transactionRef) => {
-        beginPostPaymentNavigation(transactionRef);
-        router.replace(buildPaymentCallbackUrl(transactionRef));
-    };
-    const redirectToPaymentError = (reason, transactionRef, detailMessage) => {
-        const params = new URLSearchParams({ reason });
-        if (transactionRef)
-            params.set('ref', transactionRef);
-        if (detailMessage)
-            params.set('message', detailMessage);
-        setLoading(false);
-        router.replace(`/${storeConfig.slug}/payment/error?${params.toString()}`);
-    };
-    const completeOrderAndRedirect = async (orderId, transactionRef, orderNumber, customerEmail, fulfillmentPending) => {
-        beginPostPaymentNavigation(orderId);
-        if (fulfillmentPending) {
-            addToast('Payment received. Your order is under review — we will contact you if any items are unavailable.', 'info');
-        }
-        router.replace(buildOrderSuccessUrl(storeConfig.slug, {
-            orderId,
-            ref: transactionRef,
-            orderNumber: orderNumber || undefined,
-            email: customerEmail || undefined,
-            fulfillmentPending,
-        }));
-        const purchasedItems = checkoutItems.map((item) => ({
-            productId: item.productId,
-            variantId: item.variantId,
-            quantity: item.quantity,
-        }));
-        try {
-            if (finalizeCartAfterOrder) {
-                await finalizeCartAfterOrder(purchasedItems, { checkoutEntireCart });
-            }
-            else if (removeOrderItemsFromCart) {
-                await removeOrderItemsFromCart(purchasedItems);
-            }
-        }
-        catch (error) {
-            console.error('[Checkout] Failed to clear cart after order:', error);
-        }
-        if (effectiveBuyNowItem) {
-            clearBuyNowItem();
-        }
-    };
     const [step, setStep] = useState('details');
     const [loading, setLoading] = useState(false);
-    const lastMerchantReferenceRef = useRef(null);
-    const lastTransactionReferenceRef = useRef(null);
-    const lastCheckoutOrderIdRef = useRef(null);
-    const checkoutIdempotencyKeyRef = useRef(null);
-    const checkoutCartFingerprintRef = useRef('');
-    const checkoutItemsFingerprint = useMemo(() => {
-        return JSON.stringify(checkoutItems.map((item) => ({
-            productId: item.productId,
-            variantId: item.variantId,
-            quantity: item.quantity,
-            price: item.price,
-        })));
-    }, [checkoutItems]);
-    useEffect(() => {
-        if (checkoutCartFingerprintRef.current && checkoutCartFingerprintRef.current !== checkoutItemsFingerprint) {
-            resetIdempotencyKey(checkoutIdempotencyKeyRef);
-        }
-        checkoutCartFingerprintRef.current = checkoutItemsFingerprint;
-    }, [checkoutItemsFingerprint]);
-    const handlePaymentCancelCleanup = useCallback(async () => {
-        const orderId = lastCheckoutOrderIdRef.current;
-        if (orderId) {
-            try {
-                await orderService.abandonPaymentAttempt(orderId);
-            }
-            catch (error) {
-                console.error('[Checkout] Failed to abandon payment attempt:', error);
-            }
-            lastCheckoutOrderIdRef.current = null;
-        }
-        resetIdempotencyKey(checkoutIdempotencyKeyRef);
-        lastMerchantReferenceRef.current = null;
-        lastTransactionReferenceRef.current = null;
-        setInventoryHoldUntil?.(null);
-        try {
-            await refreshCart?.();
-        }
-        catch (error) {
-            console.error('[Checkout] Failed to refresh cart after payment cancel:', error);
-        }
-    }, [refreshCart, setInventoryHoldUntil]);
-    const buildPaymentCallbackUrl = (transactionRef) => {
-        const params = new URLSearchParams({
-            reference: transactionRef,
-            storeId: storeConfig.id,
-        });
-        const merchantRef = lastMerchantReferenceRef.current;
-        if (merchantRef) {
-            params.set('merchantReference', merchantRef);
-            params.set('orderNumber', merchantRef);
-        }
-        return `/${storeConfig.slug}/payment/callback?${params.toString()}`;
-    };
-    const enrichPayazaCallbackData = (callbackData) => {
-        const merchantRef = lastMerchantReferenceRef.current || undefined;
-        const internalTrx = lastTransactionReferenceRef.current || undefined;
-        return {
-            ...callbackData,
-            type: 'success',
-            status: callbackData.status || 201,
-            data: {
-                ...callbackData.data,
-                merchant_reference: callbackData.data?.merchant_reference || merchantRef,
-                additional_details: {
-                    ...(callbackData.data?.additional_details || {}),
-                    storeId: storeConfig.id,
-                    merchantReference: merchantRef,
-                    orderNumber: merchantRef,
-                    internalTransactionReference: internalTrx,
-                },
-            },
-        };
-    };
-    const resolvePostPaymentRefs = (response) => {
-        const merchantRef = lastMerchantReferenceRef.current || undefined;
-        const internalTrx = lastTransactionReferenceRef.current || undefined;
-        const payazaRef = response.callbackData?.data?.payaza_reference ||
-            (response.callbackData?.data?.transaction_reference?.startsWith('P-C-')
-                ? response.callbackData.data.transaction_reference
-                : undefined);
-        const callbackTrx = response.callbackData?.data?.transaction_reference;
-        const transactionRef = (callbackTrx?.startsWith('TRX-') ? callbackTrx : undefined) ||
-            (response.transactionRef?.startsWith('TRX-') ? response.transactionRef : undefined) ||
-            internalTrx ||
-            response.transactionRef ||
-            callbackTrx ||
-            payazaRef ||
-            '';
-        return { transactionRef, payazaRef, merchantRef };
-    };
-    const tryConfirmFromReference = async (transactionRef, merchantRef) => {
-        return paymentService.confirmPaymentFromReference(transactionRef, storeConfig.id, merchantRef);
-    };
+    const [isLoaded, setIsLoaded] = useState(() => typeof window !== 'undefined');
     // Address management state
     const [savedAddresses, setSavedAddresses] = useState([]);
     const [selectedAddressId, setSelectedAddressId] = useState(null);
@@ -331,148 +100,121 @@ export function CheckoutPage({ storeConfig }) {
     const [shippingError, setShippingError] = useState(null);
     const [freeShippingEligible, setFreeShippingEligible] = useState(false);
     const [freeShippingThreshold, setFreeShippingThreshold] = useState(undefined);
-    const [isCourierMode, setIsCourierMode] = useState(false);
-    const [checkingDeliveryStatus, setCheckingDeliveryStatus] = useState(false);
-    const [selectedCourier, setSelectedCourier] = useState(null);
-    // Payaza Configuration
-    // Fallback key only — the authoritative key is resolved per-currency by the
-    // backend from the database-managed registry and returned by /checkout/process
-    // as `payazaPublicKey`. Priority: backend-resolved key → storeConfig → env.
-    const payazaPublicKey = storeConfig.payment?.payazaPublicKey || process.env.NEXT_PUBLIC_PAYAZA_PUBLIC_KEY || '';
+    const [feePreview, setFeePreview] = useState(null);
+    const [isCalculatingFees, setIsCalculatingFees] = useState(false);
     const { checkout: initiateCheckout, isLoading: isPayazaLoading } = usePayazaCheckout({
-        publicKey: payazaPublicKey,
         onSuccess: async (response) => {
             try {
                 setLoading(true);
-                const { transactionRef, payazaRef, merchantRef } = resolvePostPaymentRefs(response);
+                const transactionRef = response.transactionRef || response.callbackData?.data?.transaction_reference;
                 if (!transactionRef) {
                     addToast('Payment successful but no transaction reference. Please contact support.', 'info');
                     setLoading(false);
                     return;
                 }
-                console.log('[Checkout] SDK callback received, verifying payment...', {
-                    transactionRef,
-                    payazaRef,
-                    merchantRef,
-                });
+                console.log('[Checkout] SDK callback received, verifying payment...');
                 addToast('Verifying payment...', 'info');
-                // Step 1: Immediate check if payment already completed
+                // Step 1: Immediate check if webhook already processed payment (no delay)
                 let immediateVerification;
                 try {
-                    immediateVerification = await paymentService.verifyPayment(transactionRef, storeConfig.id, merchantRef);
-                    if (immediateVerification.verified && isPaymentConfirmed(immediateVerification.paymentStatus)) {
-                        console.log('[Checkout] Payment already completed, proceeding to success page');
-                        await completeOrderAndRedirect(immediateVerification.orderId || transactionRef, transactionRef, immediateVerification.orderNumber || undefined, formData.email || undefined);
+                    immediateVerification = await paymentService.verifyPayment(transactionRef, storeConfig.id);
+                    if (immediateVerification.verified && immediateVerification.paymentStatus === 'completed') {
+                        console.log('[Checkout] Payment already completed by webhook, proceeding to success page');
+                        const orderId = immediateVerification.orderId || transactionRef;
+                        const orderNumber = immediateVerification.orderNumber || '';
+                        router.push(`/${storeConfig.slug}/order/success?orderId=${orderId}&ref=${transactionRef}${orderNumber ? `&orderNumber=${orderNumber}` : ''}`);
                         return;
                     }
                 }
                 catch (error) {
                     console.log('[Checkout] Immediate verification failed, proceeding with confirmation');
                 }
-                const confirmAndRedirect = async (confirmation) => {
-                    await completeOrderAndRedirect(confirmation.orderId, transactionRef, confirmation.orderNumber || undefined, formData.email || undefined, confirmation.fulfillmentBlocked);
-                };
-                let inventoryConfirmationError = null;
-                const recordConfirmationError = (error) => {
-                    if (isPaymentInventoryError(error)) {
-                        inventoryConfirmationError = error;
-                    }
-                };
-                // Step 2: Confirm from enriched Payaza callback payload
+                // Step 2: If webhook hasn't processed yet, immediately confirm from callback data
+                // We have the callback data from Payaza, so we can confirm immediately instead of waiting
                 if (response.callbackData) {
                     console.log('[Checkout] Processing Payaza callback confirmation immediately');
-                    const enrichedCallback = enrichPayazaCallbackData(response.callbackData);
+                    // Retry logic for payment confirmation
                     const MAX_RETRIES = 3;
-                    const RETRY_DELAY = 1000;
+                    const RETRY_DELAY = 1000; // 1 second
                     let confirmation;
+                    let lastError;
                     for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
                         try {
-                            confirmation = await paymentService.confirmPaymentFromCallback(enrichedCallback);
+                            // Confirm payment with backend and trigger order processing
+                            confirmation = await paymentService.confirmPaymentFromCallback(response.callbackData);
+                            if (confirmation.alreadyProcessed) {
+                                console.log('[Checkout] Payment already processed, redirecting to success page');
+                            }
+                            else {
+                                console.log('[Checkout] Payment confirmed, order processing initiated');
+                            }
+                            // Success - break out of retry loop
                             break;
                         }
                         catch (error) {
+                            lastError = error;
                             console.error(`[Checkout] Payment confirmation attempt ${attempt} failed:`, error);
-                            recordConfirmationError(error);
-                            if (inventoryConfirmationError)
-                                break;
+                            // If this is not the last attempt, wait before retrying
                             if (attempt < MAX_RETRIES) {
-                                await new Promise(resolve => setTimeout(resolve, RETRY_DELAY * attempt));
+                                console.log(`[Checkout] Retrying payment confirmation in ${RETRY_DELAY}ms...`);
+                                await new Promise(resolve => setTimeout(resolve, RETRY_DELAY * attempt)); // Exponential backoff
                             }
                         }
                     }
-                    if (inventoryConfirmationError) {
-                        redirectToPaymentError('insufficient_stock', transactionRef, inventoryConfirmationError instanceof ApiError
-                            ? inventoryConfirmationError.message
-                            : undefined);
-                        return;
-                    }
-                    if (confirmation) {
-                        await confirmAndRedirect(confirmation);
-                        return;
-                    }
-                }
-                // Step 3: Confirm by transaction / merchant reference (covers transfer + P-C refs)
-                console.log('[Checkout] Trying confirm-from-reference fallback');
-                const refsToTry = [transactionRef, payazaRef, lastTransactionReferenceRef.current].filter((ref, index, arr) => Boolean(ref) && arr.indexOf(ref) === index);
-                for (const ref of refsToTry) {
-                    try {
-                        const confirmation = await tryConfirmFromReference(ref, merchantRef);
-                        if (isPaymentConfirmed(confirmation.paymentStatus)) {
-                            await confirmAndRedirect(confirmation);
-                            return;
+                    // If all retries failed, do a short poll to catch webhook processing (max 3 seconds)
+                    if (!confirmation) {
+                        console.log('[Checkout] Confirmation failed, doing short poll for webhook processing...');
+                        try {
+                            const polledVerification = await paymentService.pollPaymentStatus(transactionRef, storeConfig.id, {
+                                maxAttempts: 3, // Poll for max 3 seconds (3 * 1s)
+                                intervalMs: 1000, // Poll every 1 second
+                                onProgress: (attempt, maxAttempts) => {
+                                    console.log(`[Checkout] Polling for webhook (${attempt}/${maxAttempts})...`);
+                                }
+                            });
+                            if (polledVerification && polledVerification.verified && polledVerification.paymentStatus === 'completed') {
+                                console.log('[Checkout] Payment completed by webhook, proceeding to success page');
+                                const orderId = polledVerification.orderId || transactionRef;
+                                const orderNumber = polledVerification.orderNumber || '';
+                                router.push(`/${storeConfig.slug}/order/success?orderId=${orderId}&ref=${transactionRef}${orderNumber ? `&orderNumber=${orderNumber}` : ''}`);
+                                return;
+                            }
                         }
-                    }
-                    catch (error) {
-                        console.error(`[Checkout] confirm-from-reference failed for ${ref}:`, error);
-                        recordConfirmationError(error);
-                        if (inventoryConfirmationError) {
-                            redirectToPaymentError('insufficient_stock', transactionRef, inventoryConfirmationError instanceof ApiError
-                                ? inventoryConfirmationError.message
-                                : undefined);
-                            return;
+                        catch (pollError) {
+                            console.error('[Checkout] Polling also failed:', pollError);
                         }
-                    }
-                }
-                // Step 4: Poll for webhook / async processing
-                console.log('[Checkout] Polling payment status after SDK success...');
-                try {
-                    const polledVerification = await paymentService.pollPaymentStatus(transactionRef, storeConfig.id, {
-                        maxAttempts: 10,
-                        intervalMs: 1500,
-                        merchantReference: merchantRef,
-                        onProgress: (attempt, maxAttempts) => {
-                            console.log(`[Checkout] Polling payment status (${attempt}/${maxAttempts})...`);
-                        },
-                    });
-                    if (polledVerification?.verified && isPaymentConfirmed(polledVerification.paymentStatus)) {
-                        await completeOrderAndRedirect(polledVerification.orderId || transactionRef, transactionRef, polledVerification.orderNumber || undefined, formData.email || undefined);
+                        // Final fallback: Redirect to callback page for manual verification
+                        console.log('[Checkout] Redirecting to callback page for verification');
+                        addToast('Payment successful. Verifying transaction...', 'info');
+                        router.push(`/${storeConfig.slug}/payment/callback?reference=${transactionRef}&storeId=${storeConfig.id}`);
                         return;
                     }
+                    // Success - redirect to success page
+                    const orderId = confirmation.orderId;
+                    const orderNumber = confirmation.orderNumber || '';
+                    // Redirect to success page
+                    router.push(`/${storeConfig.slug}/order/success?orderId=${orderId}&ref=${transactionRef}${orderNumber ? `&orderNumber=${orderNumber}` : ''}`);
                 }
-                catch (pollError) {
-                    console.error('[Checkout] Polling failed:', pollError);
-                }
-                // Step 5: Final fallback — callback page with merchant reference in URL
-                if (inventoryConfirmationError) {
-                    redirectToPaymentError('insufficient_stock', transactionRef, inventoryConfirmationError instanceof ApiError
-                        ? inventoryConfirmationError.message
-                        : undefined);
-                    return;
+                else {
+                    // Fallback: Use transaction reference to verify payment
+                    console.log('[Checkout] No callback data, verifying payment with transaction reference:', response.transactionRef);
+                    if (response.transactionRef) {
+                        // Redirect to callback page for verification and confirmation
+                        router.push(`/${storeConfig.slug}/payment/callback?reference=${response.transactionRef}&storeId=${storeConfig.id}`);
+                    }
+                    else {
+                        addToast('Payment successful but unable to process. Please contact support.', 'info');
+                        setLoading(false);
+                    }
                 }
-                console.log('[Checkout] Redirecting to callback page for verification');
-                addToast('Payment successful. Verifying transaction...', 'info');
-                redirectToPaymentCallback(transactionRef);
             }
             catch (error) {
                 console.error('[Checkout] Error processing payment callback:', error);
-                const { transactionRef } = resolvePostPaymentRefs(response);
-                if (isPaymentInventoryError(error) && transactionRef) {
-                    redirectToPaymentError('insufficient_stock', transactionRef, error instanceof ApiError ? error.message : undefined);
-                    return;
-                }
+                // Fallback: Try to redirect to callback page for verification
+                const transactionRef = response.transactionRef || response.callbackData?.data?.transaction_reference;
                 if (transactionRef) {
                     addToast('Payment successful. Verifying transaction...', 'info');
-                    redirectToPaymentCallback(transactionRef);
+                    router.push(`/${storeConfig.slug}/payment/callback?reference=${transactionRef}&storeId=${storeConfig.id}`);
                 }
                 else {
                     addToast('Payment successful but verification failed. Please contact support with your transaction details.', 'error');
@@ -480,92 +222,78 @@ export function CheckoutPage({ storeConfig }) {
                 }
             }
         },
-        onError: async (error) => {
-            const message = String(error || '');
-            const shouldResetCheckoutState = /reference already/i.test(message) ||
-                /reservation expired/i.test(message) ||
-                /already being processed/i.test(message);
-            if (shouldResetCheckoutState) {
-                await handlePaymentCancelCleanup();
-            }
+        onError: (error) => {
             addToast(`Checkout error: ${error}`, 'error');
             setLoading(false);
         },
-        onClose: async () => {
-            await handlePaymentCancelCleanup();
+        onClose: () => {
+            // onClose is only called when payment was not successful (user canceled)
+            // This is now handled correctly by payaza-checkout.ts tracking payment success state
             addToast('Payment canceled', 'info');
             setLoading(false);
         },
     });
+    useEffect(() => {
+        setIsLoaded(true);
+    }, []);
     // Track checkout_start event when checkout page loads with items
     useEffect(() => {
-        if (!isCartHydrated || !storeConfig?.id || (checkoutItems.length === 0 && !effectiveBuyNowItem)) {
-            return;
+        if (isLoaded && !isInitializing && storeConfig?.id && (checkoutItems.length > 0 || effectiveBuyNowItem)) {
+            const totalValue = checkoutTotal;
+            const itemCount = checkoutItems.length;
+            trackEvent({
+                eventType: 'checkout_start',
+                metadata: {
+                    totalValue,
+                    itemCount,
+                    items: checkoutItems.map(item => ({
+                        productId: item.productId,
+                        quantity: item.quantity,
+                        price: item.price,
+                    })),
+                },
+            }).catch(err => console.warn('Failed to track checkout_start:', err));
         }
-        const totalValue = checkoutTotal;
-        const itemCount = checkoutItems.length;
-        trackEvent({
-            eventType: 'checkout_start',
-            metadata: {
-                totalValue,
-                itemCount,
-                items: checkoutItems.map(item => ({
-                    productId: item.productId,
-                    quantity: item.quantity,
-                    price: item.price,
-                })),
-            },
-        }).catch(err => console.warn('Failed to track checkout_start:', err));
-        trackStorefrontEvent('Checkout_started', {
-            storeId: storeConfig.id,
-            storeSlug: storeConfig.slug,
-            totalValue,
-            itemCount,
-            items: checkoutItems.map(item => ({
-                productId: item.productId,
-                quantity: item.quantity,
-                price: item.price,
-            })),
-        });
-    }, [isCartHydrated, storeConfig?.id, checkoutItems, effectiveBuyNowItem, checkoutTotal, trackEvent]);
+    }, [isLoaded, isInitializing, storeConfig?.id, checkoutItems, effectiveBuyNowItem, checkoutTotal, trackEvent]);
     // Redirect to home if checkout items are empty (with delay to allow state propagation)
     useEffect(() => {
-        if (!isCartHydrated) {
-            return;
-        }
-        const redirectTimer = setTimeout(() => {
-            if (isPostPaymentNavigationPending()) {
-                return;
-            }
-            const hasBuyNowInStorage = typeof window !== 'undefined' && sessionStorage.getItem('buyNowItem');
-            if (hasBuyNowInStorage) {
-                if (!effectiveBuyNowItem) {
-                    try {
-                        const stored = sessionStorage.getItem('buyNowItem');
-                        if (stored) {
-                            const parsedItem = JSON.parse(stored);
-                            setBuyNowItem(parsedItem);
-                            return;
+        if (!isInitializing && isLoaded) {
+            // Add a delay to ensure buyNowItem state has propagated
+            const redirectTimer = setTimeout(() => {
+                // Check again if we have buyNowItem in sessionStorage (even if not in context yet)
+                const hasBuyNowInStorage = typeof window !== 'undefined' && sessionStorage.getItem('buyNowItem');
+                // Don't redirect if we have buyNowItem in sessionStorage or if checkoutItems exist
+                if (hasBuyNowInStorage) {
+                    // If we have it in storage but not in state, try to restore it one more time
+                    if (!effectiveBuyNowItem) {
+                        try {
+                            const stored = sessionStorage.getItem('buyNowItem');
+                            if (stored) {
+                                const parsedItem = JSON.parse(stored);
+                                setBuyNowItem(parsedItem);
+                                return; // Don't redirect, we're restoring the item
+                            }
+                        }
+                        catch (error) {
+                            console.error('Failed to restore buyNowItem:', error);
                         }
                     }
-                    catch (error) {
-                        console.error('Failed to restore buyNowItem:', error);
+                    else {
+                        return; // We have the item, don't redirect
                     }
                 }
-                else {
-                    return;
+                // Only redirect if we truly have no items and no buyNowItem in storage
+                if (!checkoutItems || checkoutItems.length === 0) {
+                    router.push(`/${storeConfig.slug}`);
                 }
-            }
-            if (!checkoutItems || checkoutItems.length === 0) {
-                router.push(`/${storeConfig.slug}`);
-            }
-        }, 400);
-        return () => clearTimeout(redirectTimer);
-    }, [checkoutItems, isCartHydrated, router, storeConfig.slug, effectiveBuyNowItem, setBuyNowItem]);
-    // Clear buyNowItem when component unmounts or user navigates away (not during order completion)
+            }, 400);
+            return () => clearTimeout(redirectTimer);
+        }
+    }, [checkoutItems, isLoaded, isInitializing, router, storeConfig.slug, effectiveBuyNowItem, setBuyNowItem]);
+    // Clear buyNowItem when component unmounts or user navigates away
     useEffect(() => {
         return () => {
-            if (effectiveBuyNowItem && !completingOrderRef.current) {
+            if (effectiveBuyNowItem) {
                 clearBuyNowItem();
             }
         };
@@ -593,7 +321,6 @@ export function CheckoutPage({ storeConfig }) {
                             phone: user.phone || prev.phone,
                             address: user.address || prev.address,
                             city: user.city || prev.city,
-                            state: deriveNigerianStateFromCity(user.city || prev.city) || prev.state || '',
                             country: user.country || prev.country || 'Nigeria',
                             postalCode: user.zipCode || prev.postalCode,
                         }));
@@ -612,7 +339,6 @@ export function CheckoutPage({ storeConfig }) {
                             phone: user.phone || prev.phone,
                             address: user.address || prev.address,
                             city: user.city || prev.city,
-                            state: deriveNigerianStateFromCity(user.city || prev.city) || prev.state || '',
                             country: user.country || prev.country || 'Nigeria',
                             postalCode: user.zipCode || prev.postalCode,
                         }));
@@ -637,26 +363,15 @@ export function CheckoutPage({ storeConfig }) {
                 phone: user.phone || prev.phone,
                 address: user.address || prev.address,
                 city: user.city || prev.city,
-                state: deriveNigerianStateFromCity(user.city || prev.city) || prev.state || '',
                 country: user.country || prev.country || 'Nigeria',
                 postalCode: user.zipCode || prev.postalCode,
             }));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isAuthenticated, user, selectedAddressId, savedAddresses.length, loadingAddresses]);
-    // Calculate legacy shipping when address is filled (flat-rate / zone methods)
+    // Calculate shipping when address is filled
     const calculateShipping = async () => {
-        const quoteAddress = enrichShippingQuoteAddress({
-            street: formData.address,
-            address1: formData.address,
-            city: formData.city,
-            state: formData.state || formData.city,
-            zipCode: formData.postalCode,
-            country: formData.country,
-            phone: formData.phone,
-            email: formData.email,
-        });
-        if (!canRequestShippingQuote(quoteAddress) || checkoutItems.length === 0) {
+        if (!formData.city || !formData.country || checkoutItems.length === 0) {
             setShippingMethods([]);
             setSelectedShippingMethod(null);
             return;
@@ -664,22 +379,20 @@ export function CheckoutPage({ storeConfig }) {
         setIsCalculatingShipping(true);
         setShippingError(null);
         try {
-            const result = await shippingService.calculateShipping(buildShippingCalculatePayload({
+            const result = await shippingService.calculateShipping({
                 storeId: storeConfig.id,
-                address: quoteAddress,
-                customerInfo: {
-                    firstName: formData.firstName,
-                    lastName: formData.lastName,
-                    phone: formData.phone,
-                    email: formData.email,
+                address: {
+                    country: formData.country,
+                    city: formData.city,
+                    zipCode: formData.postalCode,
                 },
-                items: checkoutItems.map((item) => ({
+                items: checkoutItems.map(item => ({
                     productId: item.productId,
                     quantity: item.quantity,
                 })),
-                subtotal,
-                currency,
-            }));
+                subtotal: subtotal,
+                currency: currency,
+            });
             // Filter out any methods with invalid costs before storing
             const validMethods = (result.methods || []).filter(method => Number.isFinite(method.cost) && method.cost >= 0);
             setShippingMethods(validMethods);
@@ -731,36 +444,61 @@ export function CheckoutPage({ storeConfig }) {
         selectedShippingMethod.cost >= 0)
         ? selectedShippingMethod.cost
         : 0;
-    // Any cart spanning more than one real store (the marketplace virtual store or otherwise) needs
-    // fees split per store rather than a single /fees/calculate call against storeConfig.id — that
-    // id may not even be a real store row (e.g. the marketplace "virtual store"). The multi-store
-    // hook fetches every store's breakdown in one batched request and sums them (mirrors how the
-    // backend computes fees per-store during process-marketplace).
-    const multiStoreSubtotals = useMemo(() => storeBreakdown.map((s) => ({ storeId: s.storeId, subtotal: s.subtotal })), [storeBreakdown]);
-    const singleStoreFees = useCheckoutFees({
-        storeId: isMultiStoreCheckout ? undefined : storeConfig.id,
-        subtotal,
-        currency,
-        shippingCost: shipping,
-        onError: (message) => addToast(message, 'error'),
-    });
-    const multiStoreFees = useMultiStoreCheckoutFees({
-        stores: isMultiStoreCheckout ? multiStoreSubtotals : [],
-        currency,
-        onError: (message) => addToast(message, 'error'),
-    });
-    const { feeBreakdown, loading: feesLoading, totalPayable, displayLines } = isMultiStoreCheckout
-        ? multiStoreFees
-        : singleStoreFees;
+    // Local VAT is only a temporary fallback while the server-authoritative preview loads.
+    const vatAmount = calculateVAT(subtotal, storeConfig.settings?.vat, storeConfig.settings?.taxRate);
+    const vatLabel = getVATLabel(storeConfig.settings?.vat, storeConfig.settings?.taxRate);
+    // Fallback total while the server-authoritative preview loads.
     const safeSubtotal = Number.isFinite(subtotal) && subtotal >= 0 ? subtotal : 0;
-    const total = feeBreakdown?.totalPayable ?? Math.max(safeSubtotal, totalPayable);
+    const safeShipping = Number.isFinite(shipping) && shipping >= 0 ? shipping : 0;
+    const safeVatAmount = Number.isFinite(vatAmount) && vatAmount >= 0 ? vatAmount : 0;
+    const isFreeOrder = safeSubtotal <= 0 && checkoutItems.length > 0;
+    const calculatedTotal = safeSubtotal + safeShipping + safeVatAmount;
+    const fallbackTotal = Math.max(safeSubtotal, calculatedTotal);
+    const total = feePreview?.totalPayable ?? fallbackTotal;
+    const customerFeeLines = (feePreview?.customerLines ?? []).filter((line) => line.key !== 'shipping');
+    useEffect(() => {
+        if (!storeConfig.id || safeSubtotal <= 0 || !currency) {
+            setFeePreview(null);
+            return;
+        }
+        let cancelled = false;
+        const timer = window.setTimeout(async () => {
+            setIsCalculatingFees(true);
+            try {
+                const response = await feesService.calculateFees({
+                    storeId: storeConfig.id,
+                    subtotal: safeSubtotal,
+                    shippingCost: safeShipping,
+                    currency,
+                    orderType: 'product',
+                });
+                if (!cancelled)
+                    setFeePreview(response.feeBreakdown);
+            }
+            catch (error) {
+                // Checkout creation recalculates fees authoritatively; preserve a usable fallback preview.
+                console.warn('[Checkout] Fee preview unavailable:', error);
+                if (!cancelled)
+                    setFeePreview(null);
+            }
+            finally {
+                if (!cancelled)
+                    setIsCalculatingFees(false);
+            }
+        }, 250);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+        };
+    }, [currency, safeShipping, safeSubtotal, storeConfig.id]);
     // Debug logging in development
     if (process.env.NODE_ENV === 'development' && safeSubtotal > 0 && total === 0) {
         console.warn('[CheckoutPage] Total calculation issue detected:', {
             subtotal: safeSubtotal,
-            shipping,
+            shipping: safeShipping,
+            vatAmount: safeVatAmount,
+            calculatedTotal,
             total,
-            feeBreakdown,
             checkoutTotal,
             checkoutItemsCount: checkoutItems.length,
             effectiveBuyNowItem: !!effectiveBuyNowItem,
@@ -773,7 +511,6 @@ export function CheckoutPage({ storeConfig }) {
         lastName: '',
         address: '',
         city: '',
-        state: '',
         country: 'Nigeria',
         postalCode: '',
         phone: ''
@@ -781,81 +518,17 @@ export function CheckoutPage({ storeConfig }) {
     const [errors, setErrors] = useState({});
     const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
     const [isCityDropdownOpen, setIsCityDropdownOpen] = useState(false);
-    const [isStateDropdownOpen, setIsStateDropdownOpen] = useState(false);
-    const [countrySearch, setCountrySearch] = useState('');
-    const [citySearch, setCitySearch] = useState('');
-    const deliveryEnabled = storeConfig.features?.delivery !== false;
-    const automatedShippingEnabled = isAutomatedShippingEnabled(storeConfig);
-    const buildQuoteAddress = () => enrichShippingQuoteAddress({
-        street: formData.address,
-        address1: formData.address,
-        city: formData.city,
-        state: formData.state || formData.city,
-        zipCode: formData.postalCode,
-        country: formData.country,
-        phone: formData.phone,
-        email: formData.email,
-    });
-    const handleCourierSelect = useCallback((selection) => {
-        setSelectedCourier(selection);
-        if (!selection) {
-            setSelectedShippingMethod(null);
-            return;
-        }
-        setSelectedShippingMethod({
-            code: selection.serviceCode,
-            name: selection.courierName,
-            cost: selection.price,
-            estimatedDays: 0,
-            providerKey: selection.providerKey,
-            deliveryMethodId: selection.serviceCode,
-            deliveryQuoteId: selection.quoteId,
-        });
-    }, []);
-    // Hybrid shipping: courier quotes when providers enabled, else legacy calculate
+    // Debounced shipping calculation when address changes
     useEffect(() => {
-        if (!deliveryEnabled || !automatedShippingEnabled || checkoutItems.length === 0) {
-            setIsCourierMode(false);
-            setShippingMethods([]);
-            setSelectedShippingMethod(null);
-            setSelectedCourier(null);
+        if (!formData.city || !formData.country || checkoutItems.length === 0) {
             return;
         }
-        const quoteAddress = buildQuoteAddress();
-        if (!canRequestShippingQuote(quoteAddress)) {
-            setIsCourierMode(false);
-            setShippingMethods([]);
-            setSelectedShippingMethod(null);
-            setSelectedCourier(null);
-            return;
-        }
-        const timer = setTimeout(async () => {
-            setCheckingDeliveryStatus(true);
-            setShippingError(null);
-            try {
-                const status = await shippingService.getDeliveryStatus(storeConfig.id);
-                const anyProvider = status.enabled && Object.values(status.providers || {}).some(Boolean);
-                setIsCourierMode(anyProvider);
-                if (anyProvider) {
-                    setShippingMethods([]);
-                    setSelectedShippingMethod(null);
-                    setSelectedCourier(null);
-                }
-                else {
-                    await calculateShipping();
-                }
-            }
-            catch {
-                setIsCourierMode(false);
-                await calculateShipping();
-            }
-            finally {
-                setCheckingDeliveryStatus(false);
-            }
-        }, 500);
+        const timer = setTimeout(() => {
+            calculateShipping();
+        }, 500); // Debounce 500ms
         return () => clearTimeout(timer);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [deliveryEnabled, automatedShippingEnabled, formData.address, formData.city, formData.state, formData.country, formData.postalCode, formData.email, formData.phone, formData.firstName, formData.lastName, checkoutItems.length, subtotal, currency, storeConfig.id]);
+    }, [formData.city, formData.country, formData.postalCode, checkoutItems.length, subtotal, currency]);
     const validateForm = () => {
         const newErrors = {};
         if (!formData.email)
@@ -868,18 +541,10 @@ export function CheckoutPage({ storeConfig }) {
             newErrors.lastName = 'Last name is required';
         if (!formData.address)
             newErrors.address = 'Address is required';
-        if (!formData.country)
-            newErrors.country = 'Country is required';
         if (!formData.city)
             newErrors.city = 'City is required';
-        if (isNigeria(formData.country) && !formData.state) {
-            newErrors.state = 'State is required for Nigeria';
-        }
         if (!formData.phone)
             newErrors.phone = 'Phone is required';
-        else if (!validatePhone(formData.phone)) {
-            newErrors.phone = 'Please enter a valid phone number';
-        }
         setErrors(newErrors);
         return Object.keys(newErrors).length === 0;
     };
@@ -891,44 +556,19 @@ export function CheckoutPage({ storeConfig }) {
         setIsPromoApplied(true);
         addToast('Promo code applied successfully!', 'success');
     };
-    const phonePlaceholder = getPhonePlaceholder();
-    const handlePhoneChange = (value) => {
-        setFormData({ ...formData, phone: formatPhoneInput(value) });
-    };
     // Handle address selection
     const handleAddressSelect = (addressId) => {
         if (addressId === null) {
-            const profileAddress = user?.address && typeof user.address === 'object'
-                ? user.address.address1 ||
-                    user.address.street ||
-                    ''
-                : typeof user?.address === 'string'
-                    ? user.address
-                    : '';
             // "Add new address" selected - pre-fill with profile data if available, otherwise clear
             setFormData(prev => ({
                 email: user?.email || prev.email,
                 firstName: user?.firstName || prev.firstName,
                 lastName: user?.lastName || prev.lastName,
                 phone: user?.phone || prev.phone,
-                address: profileAddress,
-                city: (user?.address && typeof user.address === 'object'
-                    ? user.address.city
-                    : undefined) ||
-                    user?.city ||
-                    '',
-                state: '',
-                country: (user?.address && typeof user.address === 'object'
-                    ? user.address.country
-                    : undefined) ||
-                    user?.country ||
-                    prev.country ||
-                    'Nigeria',
-                postalCode: (user?.address && typeof user.address === 'object'
-                    ? user.address.zipCode
-                    : undefined) ||
-                    user?.zipCode ||
-                    '',
+                address: user?.address || '',
+                city: user?.city || '',
+                country: user?.country || prev.country || 'Nigeria',
+                postalCode: user?.zipCode || '',
             }));
             setSelectedAddressId(null);
             setSaveNewAddress(false);
@@ -943,7 +583,6 @@ export function CheckoutPage({ storeConfig }) {
                 lastName: address.lastName,
                 address: address.address1,
                 city: address.city,
-                state: address.state || '',
                 country: address.country,
                 postalCode: address.zipCode,
                 phone: address.phone || prev.phone,
@@ -953,44 +592,11 @@ export function CheckoutPage({ storeConfig }) {
             setAddressLabel('');
         }
     };
-    const saveCheckoutAddressIfNeeded = async () => {
-        if (!isAuthenticated || !saveNewAddress || selectedAddressId) {
-            return true;
-        }
-        try {
-            const newAddress = await customerService.addAddress({
-                firstName: formData.firstName.trim(),
-                lastName: formData.lastName.trim(),
-                address1: formData.address.trim(),
-                address2: '',
-                city: formData.city.trim(),
-                state: formData.state?.trim() || undefined,
-                zipCode: formData.postalCode?.trim() || undefined,
-                country: formData.country.trim(),
-                phone: formData.phone?.trim() || undefined,
-                isDefault: savedAddresses.length === 0,
-                label: addressLabel.trim() || undefined,
-            }, { suppressToast: true });
-            const addresses = await customerService.getAddresses();
-            setSavedAddresses(addresses);
-            handleAddressSelect(newAddress.id);
-            addToast('Address saved successfully!', 'success');
-            return true;
-        }
-        catch (addressError) {
-            console.error('[Checkout] Failed to save address:', addressError);
-            addToast(addressError?.message || 'Unable to save address right now. You can save it later from your account.', 'error');
-            return false;
-        }
-    };
     const validateCheckoutPreFlight = () => {
         // Validate checkout items
         if (checkoutItems.length === 0) {
             return { isValid: false, error: 'No items to checkout' };
         }
-        // Note: no local Payaza key check here — the backend resolves the key for
-        // the order currency from the database registry and returns it from
-        // /checkout/process. Missing keys are reported after order creation.
         // Validate form data
         if (!formData.email) {
             return { isValid: false, error: 'Email is required' };
@@ -1013,58 +619,21 @@ export function CheckoutPage({ storeConfig }) {
         if (!formData.phone) {
             return { isValid: false, error: 'Phone is required' };
         }
-        if (!validatePhone(formData.phone)) {
-            return { isValid: false, error: 'Please enter a valid phone number' };
-        }
-        if (isNigeria(formData.country) && !formData.state) {
-            return { isValid: false, error: 'State is required for Nigeria' };
-        }
         // Validate currency availability
         const hasCurrency = storeConfig.settings?.currency || checkoutItems.some(item => item.product.currency);
         if (!hasCurrency) {
             console.warn('[Checkout] No currency found, will use USD fallback');
         }
-        for (const item of checkoutItems) {
-            const stockError = formatCheckoutStockError(item.product, item.quantity);
-            if (stockError) {
-                return {
-                    isValid: false,
-                    error: stockError,
-                };
-            }
-        }
         return { isValid: true };
     };
     const handlePayazaCheckout = async () => {
-        if (checkoutDisabled) {
-            addToast(CHECKOUT_UNAVAILABLE_MESSAGE, 'error');
-            return;
-        }
         // Pre-flight validation
         const validation = validateCheckoutPreFlight();
         if (!validation.isValid) {
             addToast(validation.error || 'Please complete all required fields', 'error');
             return;
         }
-        if (hasCheckoutStockIssues) {
-            addToast(checkoutStockIssues[0]?.message || 'One or more items are no longer available.', 'error');
-            refreshCart?.();
-            return;
-        }
         setLoading(true);
-        try {
-            await refreshCart?.();
-        }
-        catch (refreshError) {
-            console.warn('[Checkout] Cart refresh before payment failed:', refreshError);
-        }
-        trackStorefrontEvent('Payment_method_selected', {
-            storeId: storeConfig.id,
-            storeSlug: storeConfig.slug,
-            paymentMethod: 'payaza',
-            totalValue: checkoutTotal,
-            itemCount: checkoutItems.length,
-        });
         // DEMO MODE BYPASS
         if (storeConfig.slug.startsWith('demo/')) {
             setTimeout(() => {
@@ -1072,7 +641,6 @@ export function CheckoutPage({ storeConfig }) {
             }, 1500);
             return;
         }
-        await saveCheckoutAddressIfNeeded();
         let checkoutResponse;
         let checkoutConfig;
         try {
@@ -1082,101 +650,49 @@ export function CheckoutPage({ storeConfig }) {
                 itemCount: checkoutItems.length,
                 customerEmail: formData.email,
             });
-            if (!isAuthenticated && formData.email && formData.firstName && formData.lastName && formData.phone) {
-                saveGuestUserInfo({
-                    email: formData.email,
-                    firstName: formData.firstName,
-                    lastName: formData.lastName,
-                    phone: formData.phone,
-                });
-            }
             try {
-                const normalizedItems = checkoutItems.map((item) => normalizeCheckoutPayloadItem(item));
-                if (isMarketplaceCheckout) {
-                    const marketplaceItems = normalizedItems.filter((item) => item.storeId);
-                    if (marketplaceItems.length !== normalizedItems.length) {
-                        throw new Error('Some cart items are missing store information. Please refresh your cart and try again.');
-                    }
-                    // Belt-and-suspenders: the backend now hard-rejects mixed-currency marketplace
-                    // checkouts, and in the normal flow this branch is unreachable since the cart is
-                    // already pre-filtered to one currency before this page mounts. Guard here anyway for
-                    // any other consumer of this shared component that doesn't pre-filter, and to fail
-                    // fast client-side instead of round-tripping to the server first.
-                    const checkoutCurrencies = new Set(checkoutItems
-                        .map((item) => item.currency ?? item.product?.currency)
-                        .filter((value) => Boolean(value)));
-                    if (checkoutCurrencies.size > 1) {
-                        throw new Error(`Your cart has items in different currencies (${Array.from(checkoutCurrencies).join(', ')}). Please check out one currency group at a time.`);
-                    }
-                    checkoutResponse = await checkoutService.processMarketplaceCheckout({
-                        items: marketplaceItems,
-                        sessionId: typeof window !== 'undefined' ? sessionStorage.getItem('sessionId') || undefined : undefined,
-                        customerInfo: {
-                            email: formData.email,
-                            firstName: formData.firstName,
-                            lastName: formData.lastName,
-                            phone: formData.phone,
-                        },
-                        shippingAddress: {
-                            firstName: formData.firstName,
-                            lastName: formData.lastName,
-                            address1: formData.address,
-                            city: formData.city,
-                            state: formData.state || formData.city || formData.country,
-                            zipCode: formData.postalCode,
-                            country: formData.country,
-                            phone: formData.phone,
-                        },
-                        paymentMethod: 'payaza',
-                        customerId: isAuthenticated && user ? user.id : undefined,
-                    }, {
-                        idempotencyKey: getOrCreateIdempotencyKey(checkoutIdempotencyKeyRef),
-                    });
-                }
-                else {
-                    checkoutResponse = await checkoutService.processCheckout({
-                        storeId: storeConfig.id,
-                        sessionId: typeof window !== 'undefined' ? sessionStorage.getItem('sessionId') || undefined : undefined,
-                        items: checkoutItems.map((item) => normalizeCheckoutPayloadItem(item)),
-                        customerInfo: {
-                            email: formData.email,
-                            firstName: formData.firstName,
-                            lastName: formData.lastName,
-                            phone: formData.phone,
-                        },
-                        shippingAddress: {
-                            firstName: formData.firstName,
-                            lastName: formData.lastName,
-                            address1: formData.address,
-                            city: formData.city,
-                            state: formData.state || formData.city || formData.country,
-                            zipCode: formData.postalCode,
-                            country: formData.country,
-                            phone: formData.phone,
-                        },
-                        shippingMethod: deliveryEnabled ? selectedShippingMethod?.code : undefined,
-                        shippingCost: deliveryEnabled ? shipping : 0,
-                        paymentMethod: 'payaza',
-                        deliveryProviderKey: selectedShippingMethod?.providerKey,
-                        deliveryMethodId: selectedShippingMethod?.deliveryMethodId,
-                        deliveryQuoteId: selectedShippingMethod?.deliveryQuoteId,
-                        customerId: isAuthenticated && user ? user.id : undefined, // Pass customerId for authenticated users
-                    }, {
-                        idempotencyKey: getOrCreateIdempotencyKey(checkoutIdempotencyKeyRef),
-                    });
-                }
+                checkoutResponse = await checkoutService.processCheckout({
+                    storeId: storeConfig.id,
+                    items: checkoutItems.map(item => ({
+                        productId: item.productId,
+                        quantity: item.quantity,
+                        price: item.price,
+                        variantId: item.variantId,
+                    })),
+                    customerInfo: {
+                        email: formData.email,
+                        firstName: formData.firstName,
+                        lastName: formData.lastName,
+                        phone: formData.phone,
+                    },
+                    shippingAddress: {
+                        firstName: formData.firstName,
+                        lastName: formData.lastName,
+                        address1: formData.address,
+                        city: formData.city,
+                        state: formData.city || formData.country, // Use city as state fallback (form doesn't collect state field)
+                        zipCode: formData.postalCode,
+                        country: formData.country,
+                        phone: formData.phone,
+                    },
+                    shippingMethod: selectedShippingMethod?.code,
+                    shippingCost: shipping, // Use validated shipping value
+                    paymentMethod: 'payaza',
+                    customerId: isAuthenticated && user ? user.id : undefined, // Pass customerId for authenticated users
+                });
                 console.log('[Checkout] Step 1: Order created successfully', {
                     orderId: checkoutResponse.orderId,
                     orderNumber: checkoutResponse.orderNumber,
                     currency: checkoutResponse.currency,
                     transactionReference: checkoutResponse.transactionReference,
                 });
-                lastMerchantReferenceRef.current =
-                    checkoutResponse.merchantReference || checkoutResponse.orderNumber || null;
-                lastTransactionReferenceRef.current = checkoutResponse.transactionReference || null;
-                lastCheckoutOrderIdRef.current = checkoutResponse.orderId || null;
-                if (checkoutResponse.inventoryHoldUntil) {
-                    setInventoryHoldUntil?.(checkoutResponse.inventoryHoldUntil);
+                const isFreeOrderResponse = checkoutResponse.paymentNotRequired === true ||
+                    (checkoutResponse.totalAmount != null && Number(checkoutResponse.totalAmount) <= 0);
+                if (isFreeOrderResponse) {
+                    addToast('Your free order is complete!', 'success');
+                    router.push(`/${storeConfig.slug}/order/success?orderId=${checkoutResponse.orderId}&ref=${encodeURIComponent(checkoutResponse.transactionReference || 'FREE')}${checkoutResponse.orderNumber ? `&orderNumber=${encodeURIComponent(checkoutResponse.orderNumber)}` : ''}`);
+                    setLoading(false);
+                    return;
                 }
             }
             catch (apiError) {
@@ -1190,43 +706,28 @@ export function CheckoutPage({ storeConfig }) {
                         itemCount: checkoutItems.length,
                     },
                 });
-                const isNetworkError = !apiError?.status ||
-                    apiError?.status === 0 ||
-                    apiError?.code === 'ECONNABORTED' ||
-                    apiError?.message === 'Network Error' ||
-                    apiError?.message?.includes('timeout');
-                if (isNetworkError) {
-                    addToast(getUserFriendlyErrorMessage(apiError, 'Unable to reach the server. Please check your connection and try again.'), 'error');
+                if (apiError?.status === 0 || apiError?.code === 'ECONNABORTED' || apiError?.message?.includes('timeout')) {
+                    addToast('Unable to connect to server. Please check your internet connection.', 'error');
                 }
                 else if (apiError?.status === 500) {
-                    addToast(getUserFriendlyErrorMessage(apiError, 'A server error occurred. Please try again in a moment.'), 'error');
-                }
-                else if (apiError?.status === 400 || apiError?.status === 422) {
-                    addToast(getUserFriendlyErrorMessage(apiError, 'Invalid checkout data. Please review your shipping information.'), 'error');
+                    addToast('Server error occurred. Please try again later.', 'error');
                 }
-                else if (apiError?.status === 409) {
-                    addToast(getUserFriendlyErrorMessage(apiError, 'One or more items are no longer available in the requested quantity.'), 'error');
-                    refreshCart?.();
+                else if (apiError?.status === 400) {
+                    addToast(apiError?.message || 'Invalid checkout data. Please review your information.', 'error');
                 }
                 else {
-                    addToast(getUserFriendlyErrorMessage(apiError, 'Failed to create order. Please try again.'), 'error');
+                    addToast(apiError?.message || 'Failed to create order. Please try again.', 'error');
                 }
                 setLoading(false);
                 return;
             }
-            // Resolve the Payaza public key. Priority order:
-            //   1. Key resolved by the backend for the order currency from the
-            //      database-managed registry (backoffice → Payment Control)
-            //   2. storeConfig.payment.payazaPublicKey
-            //   3. NEXT_PUBLIC_PAYAZA_PUBLIC_KEY build-time env var
-            const effectivePayazaPublicKey = checkoutResponse.payazaPublicKey || payazaPublicKey;
-            if (!effectivePayazaPublicKey) {
-                console.error('[Checkout] No Payaza public key available', {
-                    fromBackend: !!checkoutResponse.payazaPublicKey,
-                    fromStoreConfig: !!storeConfig.payment?.payazaPublicKey,
-                    fromEnv: !!process.env.NEXT_PUBLIC_PAYAZA_PUBLIC_KEY,
-                });
-                addToast('Payment gateway not configured. Please contact support.', 'error');
+            let effectivePayazaPublicKey;
+            try {
+                effectivePayazaPublicKey = requireCheckoutPayazaPublicKey(checkoutResponse);
+            }
+            catch (error) {
+                console.error('[Checkout] No Payaza public key from backend', error);
+                addToast(error instanceof Error ? error.message : 'Payment gateway not configured. Please contact support.', 'error');
                 setLoading(false);
                 return;
             }
@@ -1249,28 +750,24 @@ export function CheckoutPage({ storeConfig }) {
                     orderId: checkoutResponse.orderId,
                     orderNumber: checkoutResponse.orderNumber,
                 });
-                const orderMerchantRef = checkoutResponse.merchantReference || checkoutResponse.orderNumber || '';
                 checkoutConfig = generateCheckoutConfig(payazaItems, formData.email, effectivePayazaPublicKey, {
                     firstName: formData.firstName,
                     lastName: formData.lastName,
-                    phone: normalizePhoneForPayaza(formData.phone),
-                    callbackUrl: `${typeof window !== 'undefined' ? window.location.origin : ''}/${storeConfig.slug}/payment/callback?storeId=${storeConfig.id}${orderMerchantRef ? `&merchantReference=${encodeURIComponent(orderMerchantRef)}&orderNumber=${encodeURIComponent(orderMerchantRef)}` : ''}`,
+                    phone: formData.phone,
+                    callbackUrl: `${typeof window !== 'undefined' ? window.location.origin : ''}/${storeConfig.slug}/payment/callback?storeId=${storeConfig.id}`,
                     currency: checkoutResponse.currency || storeConfig.settings?.currency,
+                    totalAmount: checkoutResponse.totalAmount,
+                    merchantReference: checkoutResponse.merchantReference,
                     storeId: storeConfig.id,
                     orderId: checkoutResponse.orderId,
                     orderNumber: checkoutResponse.orderNumber,
-                    merchantReference: checkoutResponse.merchantReference || checkoutResponse.orderNumber,
-                    totalAmount: checkoutResponse.totalAmount ??
-                        checkoutResponse.feeBreakdown?.totalPayable ??
-                        checkoutResponse.feeBreakdown?.total ??
-                        total,
                     connectionMode: checkoutResponse.payazaConnectionMode,
                     shippingAddress: {
                         firstName: formData.firstName,
                         lastName: formData.lastName,
                         address: formData.address,
                         city: formData.city,
-                        state: formData.state || formData.city || formData.country,
+                        state: formData.city || formData.country, // Use city as state fallback (form doesn't collect state field)
                         country: formData.country,
                         zipCode: formData.postalCode,
                     },
@@ -1296,13 +793,45 @@ export function CheckoutPage({ storeConfig }) {
             console.log('[Checkout] Step 4: Transaction reference set', {
                 reference: checkoutConfig.reference,
             });
-            // Step 5: Initiate Payaza checkout
+            // Step 5: Save address if requested (for authenticated users)
+            if (isAuthenticated && saveNewAddress && !selectedAddressId) {
+                try {
+                    // Ensure required fields are never empty (backend validation requires non-empty values)
+                    const zipCode = formData.postalCode || formData.city || '00000';
+                    const state = formData.city || formData.country || 'N/A';
+                    const newAddress = await customerService.addAddress({
+                        firstName: formData.firstName,
+                        lastName: formData.lastName,
+                        address1: formData.address,
+                        address2: '',
+                        city: formData.city,
+                        state: state,
+                        zipCode: zipCode,
+                        country: formData.country,
+                        phone: formData.phone,
+                        isDefault: savedAddresses.length === 0, // Set as default if it's the first address
+                        label: addressLabel || undefined,
+                    });
+                    console.log('[Checkout] Address saved successfully');
+                    // Refresh addresses list
+                    const addresses = await customerService.getAddresses();
+                    setSavedAddresses(addresses);
+                    // Select the newly saved address (this will also sync the form with the saved address)
+                    handleAddressSelect(newAddress.id);
+                    addToast('Address saved successfully!', 'success');
+                }
+                catch (addressError) {
+                    console.error('[Checkout] Failed to save address:', addressError);
+                    addToast('Failed to save address. You can save it later from your account.', 'error');
+                    // Don't block checkout if address save fails - just log the error
+                    // User can save address later from their account
+                }
+            }
+            // Step 6: Initiate Payaza checkout
             console.log('[Checkout] Step 6: Initiating Payaza checkout');
             try {
                 await initiateCheckout(checkoutConfig);
                 console.log('[Checkout] Step 6: Payaza checkout initiated successfully');
-                // Order is created; release page-level loading — Payaza SDK overlay handles payment UI.
-                setLoading(false);
                 // Clear buyNowItem after successful checkout initiation
                 // The item has been processed and order created
                 if (effectiveBuyNowItem) {
@@ -1339,11 +868,7 @@ export function CheckoutPage({ storeConfig }) {
                 stack: error?.stack,
                 name: error?.name,
             });
-            const isCollectionsDisabled = (error instanceof ApiError && error.status === 403) ||
-                error?.response?.status === 403 ||
-                error?.code === 'COLLECTIONS_DISABLED' ||
-                String(error?.message || '').toLowerCase().includes('not accepting payments');
-            addToast(isCollectionsDisabled ? CHECKOUT_UNAVAILABLE_MESSAGE : 'Failed to initiate checkout. Please try again.', 'error');
+            addToast('Failed to initiate checkout. Please try again.', 'error');
             setLoading(false);
         }
     };
@@ -1365,74 +890,34 @@ export function CheckoutPage({ storeConfig }) {
             }
         }
     };
-    // Show skeleton while cart hydrates (buy-now flow skips cart hydration)
-    if (!isCartHydrated && !effectiveBuyNowItem) {
+    // Show skeleton while initializing or if not loaded
+    if (isInitializing || !isLoaded) {
         return _jsx(CheckoutSkeleton, {});
     }
-    if (isPostPaymentNavigationPending()) {
-        return (_jsxs("div", { className: "min-h-screen bg-gray-50/50 flex flex-col items-center justify-center p-4 font-sans", children: [_jsx(Loader2, { className: "mb-4 h-10 w-10 animate-spin text-gray-400" }), _jsx("p", { className: "font-medium text-gray-600", children: "Completing your order..." })] }));
-    }
     // Show empty cart message if checkout items are empty (redirect will happen after delay)
     if (!checkoutItems || checkoutItems.length === 0) {
-        return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-12 px-4 sm:px-6 lg:px-8 font-sans", children: _jsx("div", { className: "container mx-auto max-w-6xl", children: _jsx("div", { className: "bg-white rounded-3xl shadow-sm border border-gray-100 p-12 text-center", children: _jsxs("div", { className: "max-w-md mx-auto space-y-6", children: [_jsx("div", { className: "w-20 h-20 mx-auto rounded-full bg-gray-100 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }) }), _jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Your cart is empty" }), _jsx("p", { className: "text-gray-600", children: "Add some items to your cart before proceeding to checkout." }), _jsx("div", { className: "pt-4", children: _jsx(Link, { href: `/${storeConfig.slug}`, children: _jsxs(Button, { size: "lg", className: "bg-black hover:bg-gray-800 text-white rounded-full px-8 py-6 h-auto font-semibold shadow-lg shadow-black/10 hover:shadow-xl transition-all hover:scale-105 flex items-center gap-2 mx-auto", children: [_jsx(ArrowLeft, { className: "w-5 h-5" }), "Continue Shopping"] }) }) })] }) }) }) }));
+        return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-12 px-4 sm:px-6 lg:px-8 font-sans", "data-checkout-ready": true, children: _jsx("div", { className: "container mx-auto max-w-6xl", children: _jsx("div", { className: "bg-white rounded-3xl shadow-sm border border-gray-100 p-12 text-center", children: _jsxs("div", { className: "max-w-md mx-auto space-y-6", children: [_jsx("div", { className: "w-20 h-20 mx-auto rounded-full bg-gray-100 flex items-center justify-center", children: _jsx("svg", { className: "w-10 h-10 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }) }), _jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Your cart is empty" }), _jsx("p", { className: "text-gray-600", children: "Add some items to your cart before proceeding to checkout." }), _jsx("div", { className: "pt-4", children: _jsx(Link, { href: `/${storeConfig.slug}`, children: _jsxs(Button, { size: "lg", className: "bg-black hover:bg-gray-800 text-white rounded-full px-8 py-6 h-auto font-semibold shadow-lg shadow-black/10 hover:shadow-xl transition-all hover:scale-105 flex items-center gap-2 mx-auto", children: [_jsx(ArrowLeft, { className: "w-5 h-5" }), "Continue Shopping"] }) }) })] }) }) }) }));
     }
-    return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-12 px-4 sm:px-6 lg:px-8 font-sans", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "mb-10 flex items-center justify-between", children: [_jsxs(Link, { href: `/${storeConfig.slug}/cart`, className: "group flex items-center gap-2 text-gray-500 hover:text-black transition-colors font-medium", children: [_jsx("div", { className: "p-2 rounded-full bg-white border border-gray-200 group-hover:border-black transition-colors", children: _jsx(ArrowLeft, { className: "w-4 h-4" }) }), "Back to Cart"] }), _jsx("div", { className: "flex items-center gap-2 text-sm font-bold", children: deliveryEnabled ? (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("px-3 py-1.5 rounded-full transition-colors", step === 'details' ? "bg-black text-white" : "bg-green-100 text-green-700"), children: step === 'details' ? '1' : _jsx(CheckCircle, { className: "w-4 h-4" }) }), _jsx("span", { className: cn(step === 'details' ? "text-black" : "text-gray-500"), children: "Shipping" }), _jsx("div", { className: "w-8 h-0.5 bg-gray-200" }), _jsx("span", { className: cn("px-3 py-1.5 rounded-full transition-colors", step === 'payment' ? "bg-black text-white" : "bg-gray-200 text-gray-500"), children: "2" }), _jsx("span", { className: cn(step === 'payment' ? "text-black" : "text-gray-400"), children: "Payment" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("px-3 py-1.5 rounded-full transition-colors", step === 'details' ? "bg-black text-white" : "bg-green-100 text-green-700"), children: step === 'details' ? '1' : _jsx(CheckCircle, { className: "w-4 h-4" }) }), _jsx("span", { className: cn(step === 'details' ? "text-black" : "text-gray-500"), children: "Details" }), _jsx("div", { className: "w-8 h-0.5 bg-gray-200" }), _jsx("span", { className: cn("px-3 py-1.5 rounded-full transition-colors", step === 'payment' ? "bg-black text-white" : "bg-gray-200 text-gray-500"), children: "2" }), _jsx("span", { className: cn(step === 'payment' ? "text-black" : "text-gray-400"), children: "Payment" })] })) })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-10", children: [_jsx("div", { className: "flex-1", children: step === 'details' ? (_jsxs("form", { onSubmit: handleDetailsSubmit, className: "space-y-8 animate-fade-in", children: [_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-blue-50 text-blue-600 rounded-xl", children: _jsx(ShieldCheck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Contact Information" })] }), _jsx("div", { className: "space-y-4", children: isAuthenticated && user ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "p-4 bg-gray-50 rounded-xl border border-gray-200", children: [_jsx("p", { className: "text-xs font-bold text-gray-500 uppercase tracking-wider mb-2", children: "Logged in as" }), _jsxs("p", { className: "font-bold text-gray-900", children: [user.firstName, " ", user.lastName] }), _jsx("p", { className: "text-sm text-gray-600", children: user.email })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "Email Address" }), _jsx("input", { type: "email", className: cn("w-full px-5 py-3.5 bg-white border-2 rounded-xl focus:outline-none focus:ring-0 transition-all font-medium", errors.email ? "border-red-500 focus:border-red-500" : "border-gray-100 focus:border-black"), placeholder: "john@example.com", value: formData.email, onChange: e => setFormData({ ...formData, email: e.target.value }) }), _jsx("p", { className: "text-xs text-gray-500 ml-1", children: "You can use a different email for this order" }), errors.email && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.email })] })] })) : (_jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "Email Address" }), _jsx("input", { type: "email", className: cn("w-full px-5 py-3.5 bg-white border-2 rounded-xl focus:outline-none focus:ring-0 transition-all font-medium", errors.email ? "border-red-500 focus:border-red-500" : "border-gray-100 focus:border-black"), placeholder: "john@example.com", value: formData.email, onChange: e => setFormData({ ...formData, email: e.target.value }) }), errors.email && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.email })] })) })] }), _jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-orange-50 text-orange-600 rounded-xl", children: _jsx(MapPin, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: storeConfig.settings?.shippingEnabled === false ? 'Billing Address' : 'Shipping Address' })] }), isAuthenticated && (_jsx(AddressSelector, { addresses: savedAddresses, selectedAddressId: selectedAddressId, onSelect: handleAddressSelect, isLoading: loadingAddresses, isAuthenticated: isAuthenticated })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "First Name" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.firstName ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), value: formData.firstName, onChange: e => setFormData({ ...formData, firstName: e.target.value }) }), errors.firstName && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.firstName })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "Last Name" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.lastName ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), value: formData.lastName, onChange: e => setFormData({ ...formData, lastName: e.target.value }) }), errors.lastName && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.lastName })] }), _jsxs("div", { className: "space-y-1.5 md:col-span-2", children: [_jsx(RequiredLabel, { children: "Address" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.address ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), placeholder: "e.g. 12 Adeola Odeku Street, Victoria Island", value: formData.address, onChange: e => setFormData({ ...formData, address: e.target.value }) }), errors.address
-                                                                ? _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.address })
-                                                                : _jsx("p", { className: "text-[11px] text-gray-500 mt-1 ml-1", children: "Enter your house/flat number and street name for accurate delivery rates." })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "Country" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsCountryDropdownOpen(!isCountryDropdownOpen), className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-left flex items-center justify-between text-base", errors.country ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), children: [_jsx("span", { className: "flex items-center gap-2", children: (() => {
+    return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-12 px-4 sm:px-6 lg:px-8 font-sans", "data-checkout-ready": true, children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "mb-10 flex items-center justify-between", children: [_jsxs(Link, { href: `/${storeConfig.slug}/cart`, className: "group flex items-center gap-2 text-gray-500 hover:text-black transition-colors font-medium", children: [_jsx("div", { className: "p-2 rounded-full bg-white border border-gray-200 group-hover:border-black transition-colors", children: _jsx(ArrowLeft, { className: "w-4 h-4" }) }), "Back to Cart"] }), _jsxs("div", { className: "flex items-center gap-2 text-sm font-bold", children: [_jsx("span", { className: cn("px-3 py-1.5 rounded-full transition-colors", step === 'details' ? "bg-black text-white" : "bg-green-100 text-green-700"), children: step === 'details' ? '1' : _jsx(CheckCircle, { className: "w-4 h-4" }) }), _jsx("span", { className: cn(step === 'details' ? "text-black" : "text-gray-500"), children: "Shipping" }), _jsx("div", { className: "w-8 h-0.5 bg-gray-200" }), _jsx("span", { className: cn("px-3 py-1.5 rounded-full transition-colors", step === 'payment' ? "bg-black text-white" : "bg-gray-200 text-gray-500"), children: "2" }), _jsx("span", { className: cn(step === 'payment' ? "text-black" : "text-gray-400"), children: "Payment" })] })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-10", children: [_jsx("div", { className: "flex-1", children: step === 'details' ? (_jsxs("form", { onSubmit: handleDetailsSubmit, className: "space-y-8 animate-fade-in", children: [_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-blue-50 text-blue-600 rounded-xl", children: _jsx(ShieldCheck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Contact Information" })] }), _jsx("div", { className: "space-y-4", children: isAuthenticated && user ? (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "p-4 bg-gray-50 rounded-xl border border-gray-200", children: [_jsx("p", { className: "text-xs font-bold text-gray-500 uppercase tracking-wider mb-2", children: "Logged in as" }), _jsxs("p", { className: "font-bold text-gray-900", children: [user.firstName, " ", user.lastName] }), _jsx("p", { className: "text-sm text-gray-600", children: user.email })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Email Address" }), _jsx("input", { type: "email", className: cn("w-full px-5 py-3.5 bg-white border-2 rounded-xl focus:outline-none focus:ring-0 transition-all font-medium", errors.email ? "border-red-500 focus:border-red-500" : "border-gray-100 focus:border-black"), placeholder: "john@example.com", value: formData.email, onChange: e => setFormData({ ...formData, email: e.target.value }) }), _jsx("p", { className: "text-xs text-gray-500 ml-1", children: "You can use a different email for this order" }), errors.email && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.email })] })] })) : (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Email Address" }), _jsx("input", { type: "email", className: cn("w-full px-5 py-3.5 bg-white border-2 rounded-xl focus:outline-none focus:ring-0 transition-all font-medium", errors.email ? "border-red-500 focus:border-red-500" : "border-gray-100 focus:border-black"), placeholder: "john@example.com", value: formData.email, onChange: e => setFormData({ ...formData, email: e.target.value }) }), errors.email && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.email })] })) })] }), _jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-orange-50 text-orange-600 rounded-xl", children: _jsx(MapPin, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: storeConfig.settings?.shippingEnabled === false ? 'Billing Address' : 'Shipping Address' })] }), isAuthenticated && (_jsx(AddressSelector, { addresses: savedAddresses, selectedAddressId: selectedAddressId, onSelect: handleAddressSelect, isLoading: loadingAddresses, isAuthenticated: isAuthenticated })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-5", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "First Name" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.firstName ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), value: formData.firstName, onChange: e => setFormData({ ...formData, firstName: e.target.value }) }), errors.firstName && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.firstName })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Last Name" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.lastName ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), value: formData.lastName, onChange: e => setFormData({ ...formData, lastName: e.target.value }) }), errors.lastName && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.lastName })] }), _jsxs("div", { className: "space-y-1.5 md:col-span-2", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Address" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.address ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), placeholder: "123 Main St", value: formData.address, onChange: e => setFormData({ ...formData, address: e.target.value }) }), errors.address && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.address })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Country" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsCountryDropdownOpen(!isCountryDropdownOpen), className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-left flex items-center justify-between text-base", errors.country ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), children: [_jsx("span", { className: "flex items-center gap-2", children: (() => {
                                                                                     const selectedCountry = getCountryByName(formData.country);
                                                                                     return selectedCountry ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-lg", children: selectedCountry.flag }), _jsx("span", { children: selectedCountry.name })] })) : (_jsx("span", { className: "text-gray-400", children: "Select country" }));
-                                                                                })() }), _jsx(ChevronDown, { className: cn("w-5 h-5 text-gray-400 transition-transform", isCountryDropdownOpen && "transform rotate-180") })] }), isCountryDropdownOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => { setIsCountryDropdownOpen(false); setCountrySearch(''); } }), _jsxs("div", { className: "absolute z-30 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl overflow-hidden", children: [_jsx("div", { className: "p-2 border-b border-gray-100", children: _jsx("input", { autoFocus: true, type: "text", placeholder: "Search country...", value: countrySearch, onChange: (e) => setCountrySearch(e.target.value), className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:border-black", onClick: (e) => e.stopPropagation() }) }), _jsxs("div", { className: "max-h-52 overflow-y-auto", children: [countries.filter(c => c.name.toLowerCase().includes(countrySearch.toLowerCase())).map((country) => (_jsxs("button", { type: "button", onClick: () => {
-                                                                                                    setFormData(prev => ({
-                                                                                                        ...prev,
-                                                                                                        country: country.name,
-                                                                                                        city: '',
-                                                                                                        state: '',
-                                                                                                    }));
-                                                                                                    setIsCountryDropdownOpen(false);
-                                                                                                    setCountrySearch('');
-                                                                                                    setIsCityDropdownOpen(false);
-                                                                                                    setIsStateDropdownOpen(false);
-                                                                                                }, className: cn("w-full px-5 py-3 text-left flex items-center gap-3 hover:bg-gray-50 transition-colors", formData.country === country.name && "bg-gray-50 font-medium"), children: [_jsx("span", { className: "text-lg", children: country.flag }), _jsx("span", { children: country.name })] }, country.code))), countries.filter(c => c.name.toLowerCase().includes(countrySearch.toLowerCase())).length === 0 && (_jsx("div", { className: "px-5 py-3 text-gray-400 text-sm", children: "No countries found" }))] })] })] }))] }), errors.country && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.country })] }), isNigeria(formData.country) && (_jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "State" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsStateDropdownOpen(!isStateDropdownOpen), className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-left flex items-center justify-between text-base", errors.state ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), children: [_jsx("span", { className: formData.state ? "text-gray-900" : "text-gray-400", children: formData.state || 'Select state' }), _jsx(ChevronDown, { className: cn("w-5 h-5 text-gray-400 transition-transform", isStateDropdownOpen && "transform rotate-180") })] }), isStateDropdownOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsStateDropdownOpen(false) }), _jsx("div", { className: "absolute z-30 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-52 overflow-y-auto", children: NIGERIAN_STATES.map((state) => (_jsx("button", { type: "button", onClick: () => {
-                                                                                        // Clear city when state changes so stale city isn't submitted
-                                                                                        setFormData({ ...formData, state, city: '' });
-                                                                                        setIsStateDropdownOpen(false);
-                                                                                    }, className: cn("w-full px-5 py-3 text-left hover:bg-gray-50 transition-colors", formData.state === state && "bg-gray-50 font-medium"), children: state }, state))) })] }))] }), errors.state && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.state })] })), _jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "City" }), _jsxs("div", { className: "relative", children: [_jsx("input", { type: "text", placeholder: isNigeria(formData.country) && !formData.state ? 'Select a state first' : 'e.g. Lagos, Lekki, Ikeja', disabled: isNigeria(formData.country) && !formData.state, value: formData.city, onChange: (e) => {
-                                                                            setFormData({ ...formData, city: e.target.value });
-                                                                            setCitySearch(e.target.value);
-                                                                            setIsCityDropdownOpen(true);
-                                                                        }, onFocus: () => {
-                                                                            if (!formData.country) {
+                                                                                })() }), _jsx(ChevronDown, { className: cn("w-5 h-5 text-gray-400 transition-transform", isCountryDropdownOpen && "transform rotate-180") })] }), isCountryDropdownOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsCountryDropdownOpen(false) }), _jsx("div", { className: "absolute z-20 w-full mt-1 bg-white border-2 border-gray-100 rounded-xl shadow-xl max-h-64 overflow-y-auto", children: countries.map((country) => (_jsxs("button", { type: "button", onClick: () => {
+                                                                                        setFormData({ ...formData, country: country.name, city: '' }); // Clear city when country changes
+                                                                                        setIsCountryDropdownOpen(false);
+                                                                                        setIsCityDropdownOpen(false);
+                                                                                    }, className: cn("w-full px-5 py-3 text-left flex items-center gap-3 hover:bg-gray-50 transition-colors", formData.country === country.name && "bg-gray-50 font-medium"), children: [_jsx("span", { className: "text-lg", children: country.flag }), _jsx("span", { children: country.name })] }, country.code))) })] }))] }), errors.country && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.country })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "City" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => {
+                                                                            if (formData.country) {
+                                                                                setIsCityDropdownOpen(!isCityDropdownOpen);
+                                                                            }
+                                                                            else {
                                                                                 addToast('Please select a country first', 'error');
-                                                                                return;
                                                                             }
-                                                                            setIsCityDropdownOpen(true);
-                                                                        }, onBlur: () => setTimeout(() => setIsCityDropdownOpen(false), 150), className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.city ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black", isNigeria(formData.country) && !formData.state && "bg-gray-50 text-gray-400 cursor-not-allowed") }), isCityDropdownOpen && formData.country && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsCityDropdownOpen(false) }), (() => {
-                                                                                const nigeriaState = isNigeria(formData.country) ? formData.state : null;
-                                                                                const suggestions = nigeriaState
-                                                                                    ? getNigerianCitiesByState(nigeriaState).filter(c => c.toLowerCase().includes((formData.city || '').toLowerCase()))
-                                                                                    : getCitiesByCountry(formData.country).filter(c => c.toLowerCase().includes((formData.city || '').toLowerCase()));
-                                                                                if (suggestions.length === 0)
-                                                                                    return null;
-                                                                                return (_jsx("div", { className: "absolute z-30 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-52 overflow-y-auto", children: suggestions.map((city) => (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => {
-                                                                                            setFormData({ ...formData, city });
-                                                                                            setIsCityDropdownOpen(false);
-                                                                                            setCitySearch('');
-                                                                                        }, className: cn("w-full px-5 py-3 text-left hover:bg-gray-50 transition-colors text-base", formData.city === city && "bg-gray-50 font-medium"), children: city }, city))) }));
-                                                                            })()] }))] }), errors.city
-                                                                ? _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.city })
-                                                                : _jsx("p", { className: "text-[11px] text-gray-500 mt-1 ml-1", children: "Type your city or town name \u2014 you can enter any location not shown in suggestions." })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Postal/Zip Code" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.postalCode ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), placeholder: "Optional", value: formData.postalCode, onChange: e => setFormData({ ...formData, postalCode: e.target.value }) }), errors.postalCode && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.postalCode })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(RequiredLabel, { children: "Phone" }), _jsx("input", { type: "tel", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.phone ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), placeholder: phonePlaceholder, value: formData.phone, onChange: e => handlePhoneChange(e.target.value) }), errors.phone && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.phone })] })] }), isAuthenticated && !selectedAddressId && (_jsxs("div", { className: "mt-6 space-y-3", children: [_jsxs("label", { className: "flex items-center gap-3 cursor-pointer group", children: [_jsx("input", { type: "checkbox", checked: saveNewAddress, onChange: (e) => setSaveNewAddress(e.target.checked), className: "w-5 h-5 rounded border-2 border-gray-300 text-black focus:ring-2 focus:ring-black cursor-pointer" }), _jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-black transition-colors", children: "Save this address for future use" })] }), saveNewAddress && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Address Label (optional)" }), _jsx("input", { type: "text", value: addressLabel, onChange: (e) => setAddressLabel(e.target.value), placeholder: "e.g., Home, Work, Office", className: "w-full px-5 py-3.5 bg-white border-2 border-gray-100 rounded-xl focus:outline-none focus:ring-0 focus:border-black transition-all font-medium" })] }))] }))] }), deliveryEnabled && !automatedShippingEnabled && (_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsx("div", { className: "p-2 bg-amber-50 text-amber-700 rounded-xl", children: _jsx(Truck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Delivery" })] }), _jsx(MerchantHandledDeliveryNotice, { storeName: storeConfig.name })] })), deliveryEnabled && automatedShippingEnabled && canRequestShippingQuote(buildQuoteAddress()) && (_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-purple-50 text-purple-600 rounded-xl", children: _jsx(Truck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Shipping Method" })] }), !isCourierMode && freeShippingThreshold !== undefined && !freeShippingEligible && (_jsxs("div", { className: "mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsxs("p", { className: "text-xs font-medium text-blue-900 mb-1", children: ["Spend ", formatCurrency(freeShippingThreshold - subtotal, currency), " more for free shipping!"] }), _jsx("div", { className: "w-full bg-blue-200 rounded-full h-2", children: _jsx("div", { className: "bg-blue-600 h-2 rounded-full transition-all", style: {
+                                                                        }, disabled: !formData.country, className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-left flex items-center justify-between text-base", errors.city ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black", !formData.country && "bg-gray-50 text-gray-400 cursor-not-allowed"), children: [_jsx("span", { className: formData.city ? "text-gray-900" : "text-gray-400", children: formData.city || 'Select city' }), _jsx(ChevronDown, { className: cn("w-5 h-5 text-gray-400 transition-transform", isCityDropdownOpen && "transform rotate-180") })] }), isCityDropdownOpen && formData.country && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsCityDropdownOpen(false) }), _jsx("div", { className: "absolute z-20 w-full mt-1 bg-white border-2 border-gray-100 rounded-xl shadow-xl max-h-64 overflow-y-auto", children: getCitiesByCountry(formData.country).length > 0 ? (getCitiesByCountry(formData.country).map((city) => (_jsx("button", { type: "button", onClick: () => {
+                                                                                        setFormData({ ...formData, city });
+                                                                                        setIsCityDropdownOpen(false);
+                                                                                    }, className: cn("w-full px-5 py-3 text-left hover:bg-gray-50 transition-colors", formData.city === city && "bg-gray-50 font-medium"), children: city }, city)))) : (_jsx("div", { className: "px-5 py-3 text-gray-500 text-sm", children: "No cities available for this country" })) })] }))] }), errors.city && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.city })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Postal/Zip Code" }), _jsx("input", { type: "text", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.postalCode ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), placeholder: "Optional", value: formData.postalCode, onChange: e => setFormData({ ...formData, postalCode: e.target.value }) }), errors.postalCode && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.postalCode })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Phone" }), _jsx("input", { type: "tel", className: cn("w-full px-4 py-3 rounded-lg border focus:ring-2 focus:ring-black focus:outline-none transition-all text-base", errors.phone ? "border-red-300 focus:border-red-500 bg-red-50" : "border-gray-200 focus:border-black"), value: formData.phone, onChange: e => setFormData({ ...formData, phone: e.target.value }) }), errors.phone && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.phone })] })] }), isAuthenticated && !selectedAddressId && (_jsxs("div", { className: "mt-6 space-y-3", children: [_jsxs("label", { className: "flex items-center gap-3 cursor-pointer group", children: [_jsx("input", { type: "checkbox", checked: saveNewAddress, onChange: (e) => setSaveNewAddress(e.target.checked), className: "w-5 h-5 rounded border-2 border-gray-300 text-black focus:ring-2 focus:ring-black cursor-pointer" }), _jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-black transition-colors", children: "Save this address for future use" })] }), saveNewAddress && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-sm font-bold text-gray-700 ml-1", children: "Address Label (optional)" }), _jsx("input", { type: "text", value: addressLabel, onChange: (e) => setAddressLabel(e.target.value), placeholder: "e.g., Home, Work, Office", className: "w-full px-5 py-3.5 bg-white border-2 border-gray-100 rounded-xl focus:outline-none focus:ring-0 focus:border-black transition-all font-medium" })] }))] }))] }), storeConfig.settings?.shippingEnabled !== false && (formData.city && formData.country) && (_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-purple-50 text-purple-600 rounded-xl", children: _jsx(Truck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Shipping Method" })] }), freeShippingThreshold !== undefined && !freeShippingEligible && (_jsxs("div", { className: "mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsxs("p", { className: "text-xs font-medium text-blue-900 mb-1", children: ["Spend ", formatCurrency(freeShippingThreshold - subtotal, currency), " more for free shipping!"] }), _jsx("div", { className: "w-full bg-blue-200 rounded-full h-2", children: _jsx("div", { className: "bg-blue-600 h-2 rounded-full transition-all", style: {
                                                                 width: `${Math.min(100, (subtotal / freeShippingThreshold) * 100)}%`,
-                                                            } }) })] })), checkingDeliveryStatus || (!isCourierMode && isCalculatingShipping) ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-600", children: [_jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-gray-900" }), _jsx("span", { className: "text-sm font-medium", children: "Calculating shipping options..." })] }) })) : isCourierMode ? (_jsx(ShippingOptionsPanel, { storeId: storeConfig.id, address: buildQuoteAddress(), packages: checkoutItems.map((item) => ({
-                                                    weight: item.product?.weight || 0.5,
-                                                    value: item.price,
-                                                    name: item.product?.name,
-                                                    quantity: item.quantity,
-                                                })), customerInfo: {
-                                                    firstName: formData.firstName,
-                                                    lastName: formData.lastName,
-                                                    phone: formData.phone,
-                                                    email: formData.email,
-                                                }, onSelect: handleCourierSelect, selected: selectedCourier })) : shippingError ? (_jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: _jsx("p", { className: "text-sm text-red-600", children: shippingError }) })) : shippingMethods.length > 0 ? (_jsx("div", { className: "space-y-3", children: shippingMethods.map((method) => (_jsxs("label", { className: cn("flex items-center justify-between p-4 border-2 rounded-xl cursor-pointer transition-all", selectedShippingMethod?.code === method.code
+                                                            } }) })] })), isCalculatingShipping ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-600", children: [_jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-gray-900" }), _jsx("span", { className: "text-sm font-medium", children: "Calculating shipping options..." })] }) })) : shippingError ? (_jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: _jsx("p", { className: "text-sm text-red-600", children: shippingError }) })) : shippingMethods.length > 0 ? (_jsx("div", { className: "space-y-3", children: shippingMethods.map((method) => (_jsxs("label", { className: cn("flex items-center justify-between p-4 border-2 rounded-xl cursor-pointer transition-all", selectedShippingMethod?.code === method.code
                                                         ? "border-black bg-gray-50"
                                                         : "border-gray-200 hover:border-gray-300 bg-white"), children: [_jsxs("div", { className: "flex items-center gap-4 flex-1", children: [_jsx("input", { type: "radio", name: "shippingMethod", value: method.code, checked: selectedShippingMethod?.code === method.code, onChange: () => setSelectedShippingMethod(method), className: "w-5 h-5 text-black focus:ring-2 focus:ring-black cursor-pointer" }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "font-bold text-gray-900", children: method.name }), freeShippingEligible && method.cost === 0 && (_jsx("span", { className: "text-xs font-normal text-green-700 bg-green-100 px-2 py-0.5 rounded-full", children: "FREE" }))] }), method.description && (_jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: method.description })), method.estimatedDays && (_jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: method.estimatedDaysMin && method.estimatedDaysMax
                                                                                 ? `Estimated delivery: ${method.estimatedDaysMin}-${method.estimatedDaysMax} business days`
@@ -1440,11 +925,7 @@ export function CheckoutPage({ storeConfig }) {
                                                                     ? 'FREE'
                                                                     : Number.isFinite(method.cost) && method.cost >= 0
                                                                         ? formatCurrency(method.cost, currency)
-                                                                        : 'Not available' }) })] }, method.code))) })) : (_jsx("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg text-center", children: _jsx("p", { className: "text-sm text-gray-600", children: "No shipping methods available. Please check your address." }) }))] })), _jsxs(Button, { type: "submit", size: "lg", className: "w-full h-14 text-lg font-bold rounded-2xl shadow-xl hover:shadow-2xl hover:-translate-y-0.5 transition-all text-white [&_svg]:text-white", style: { backgroundColor: primaryColor, color: '#fff' }, children: ["Continue to Payment ", _jsx(ChevronRight, { className: "ml-2 w-5 h-5" })] })] })) : (_jsxs("div", { className: "space-y-8 animate-fade-in", children: [deliveryEnabled && (_jsxs("section", { className: "bg-white p-6 rounded-3xl shadow-sm border border-gray-100 flex justify-between items-center group hover:border-gray-300 transition-colors cursor-pointer", onClick: () => setStep('details'), children: [_jsxs("div", { className: "flex gap-4 items-center", children: [_jsx("div", { className: "w-10 h-10 bg-green-50 rounded-full flex items-center justify-center border border-green-100", children: _jsx(CheckCircle, { className: "w-5 h-5 text-green-600" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500 font-bold uppercase tracking-wider mb-1", children: "Shipping To" }), _jsxs("p", { className: "font-bold text-gray-900", children: [formData.firstName, " ", formData.lastName] }), _jsxs("p", { className: "text-sm text-gray-500", children: [formData.address, ", ", formData.city] })] })] }), _jsx("span", { className: "text-sm font-bold text-blue-600 px-4 py-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors", children: "Edit" })] })), _jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-blue-50 text-blue-600 rounded-xl", children: _jsx(ShieldCheck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Payment Security" })] }), _jsx("div", { className: "bg-blue-50/50 p-6 rounded-2xl border border-blue-100 mb-6", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Lock, { className: "w-5 h-5 text-blue-600 mt-1" }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-blue-900 mb-1", children: "Encrypted Transaction" }), _jsx("p", { className: "text-sm text-blue-700/80 leading-relaxed", children: "Your payment is processed securely by Payaza. We do not store your card details." })] })] }) }), _jsxs("div", { className: "flex items-center justify-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-widest", children: [_jsx(Lock, { className: "w-3 h-3" }), "256-bit SSL Secure Payment"] })] }), isHoldBlocking && (_jsxs("div", { className: "rounded-2xl border border-red-200 bg-red-50 p-4 flex gap-3", children: [_jsx(AlertCircle, { className: "w-5 h-5 text-red-700 flex-shrink-0 mt-0.5" }), _jsxs("div", { children: [_jsx("p", { className: "font-bold text-red-900 text-sm", children: "Checkout reservation expired" }), _jsx("p", { className: "mt-1 text-sm text-red-800", children: "Your stock hold has expired. Go back to cart and start checkout again to reserve items." })] })] })), hasCheckoutStockIssues && (_jsxs("div", { className: "rounded-2xl border border-amber-200 bg-amber-50 p-4 flex gap-3", children: [_jsx(AlertCircle, { className: "w-5 h-5 text-amber-700 flex-shrink-0 mt-0.5" }), _jsxs("div", { children: [_jsx("p", { className: "font-bold text-amber-900 text-sm", children: "Stock availability changed" }), _jsx("ul", { className: "mt-2 space-y-1 text-sm text-amber-800", children: checkoutStockIssues.map((issue) => (_jsx("li", { children: issue.message }, issue.id))) }), _jsx("p", { className: "mt-2 text-xs text-amber-700", children: "Update your cart before paying. Payment is only available when all items are in stock." })] })] })), _jsx(Button, { onClick: handlePayazaCheckout, size: "lg", className: "w-full h-16 text-lg font-bold rounded-2xl shadow-xl hover:shadow-2xl hover:-translate-y-0.5 transition-all text-white [&_svg]:text-white", style: { backgroundColor: primaryColor, color: '#fff' }, disabled: loading || isPayazaLoading || hasCheckoutStockIssues || isHoldBlocking || checkoutDisabled, children: loading || isPayazaLoading ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" }), _jsx("span", { children: "Processing Securely..." })] })) : checkoutDisabled ? (_jsx("span", { children: "Checkout unavailable" })) : (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Lock, { className: "w-5 h-5" }), _jsx("span", { children: "Pay Now" })] })) }), checkoutDisabled && (_jsx("p", { className: "mt-3 text-sm text-center text-gray-500", children: CHECKOUT_UNAVAILABLE_MESSAGE }))] })) }), _jsxs("div", { className: "w-full lg:w-[400px] flex-shrink-0", children: [_jsxs("div", { className: "bg-white p-8 rounded-3xl shadow-lg border border-gray-100 sticky top-8", children: [_jsx("h2", { className: "text-xl font-black text-gray-900 mb-6", children: "Order Summary" }), _jsx("div", { className: "mb-6", children: _jsx(InventoryHoldCountdown, { holdUntil: inventoryHoldUntil, onExpired: () => {
-                                                    setIsHoldExpired(true);
-                                                    handleInventoryHoldExpired?.();
-                                                } }) }), _jsx("div", { className: "space-y-6 mb-8 max-h-[400px] overflow-y-auto scrollbar-hide", children: checkoutItems.map((item) => {
-                                                const stockInfo = getCartLineStockInfo(item.product, item.quantity);
-                                                return (_jsxs("div", { className: "flex gap-4 group", children: [_jsxs("div", { className: "w-20 h-20 bg-gray-100 rounded-xl overflow-hidden flex-shrink-0 relative border border-gray-200", children: [_jsx(Image, { src: getCartLineImage(item) || item.product.images[0], alt: item.product.name, fill: true, className: "object-cover group-hover:scale-105 transition-transform duration-500", unoptimized: true }), _jsxs("span", { className: "absolute top-0 right-0 bg-black text-white text-[10px] font-bold px-2 py-1 rounded-bl-lg z-10", children: ["x", item.quantity] })] }), _jsxs("div", { className: "flex-1 py-1", children: [_jsx("p", { className: "font-bold text-gray-900 text-sm line-clamp-2 leading-relaxed", children: item.product.name }), item.variantName && _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: item.variantName }), stockInfo.displayLabel && (_jsx("p", { className: cn('text-xs font-semibold mt-1', stockInfo.stockError ? 'text-red-600' : 'text-amber-700'), children: stockInfo.displayLabel })), _jsx("p", { className: "text-gray-500 text-sm font-medium mt-1", children: formatCurrency(normalizePrice(item.price), item.product?.currency || currency) })] })] }, item.id));
-                                            }) }), isMarketplaceCheckout && storeBreakdown.length > 1 && (_jsxs("div", { className: "mb-6 rounded-2xl bg-gray-50 border border-gray-100 p-4", children: [_jsxs("p", { className: "text-xs font-bold text-gray-700 mb-3", children: ["Your order will be split into ", storeBreakdown.length, " separate orders \u2014 one per store"] }), _jsx("div", { className: "space-y-2", children: storeBreakdown.map((store) => (_jsxs("div", { className: "flex justify-between text-xs text-gray-600", children: [_jsxs("span", { className: "font-medium truncate pr-2", children: [store.storeName, " (", store.itemCount, " item", store.itemCount === 1 ? '' : 's', ")"] }), _jsx("span", { className: "font-bold text-gray-900 flex-shrink-0", children: formatCurrency(store.subtotal, currency) })] }, store.storeId))) })] })), _jsxs("div", { className: "space-y-4 pt-6 border-t-2 border-gray-50", children: [_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: "Subtotal" }), _jsx("span", { className: "text-gray-900 font-bold", children: formatCurrency(subtotal, currency) })] }), deliveryEnabled && (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsxs("span", { children: ["Shipping", selectedShippingMethod ? ` (${selectedShippingMethod.name})` : ''] }), _jsx("span", { className: "text-gray-900 font-bold", children: !automatedShippingEnabled ? (_jsx("span", { className: "text-amber-700", children: "Handled by merchant" })) : isCalculatingShipping ? (_jsx("span", { className: "text-gray-400", children: "Calculating..." })) : !selectedShippingMethod ? (_jsx("span", { className: "text-gray-400", children: "Not available" })) : shipping === 0 && freeShippingEligible ? (_jsx("span", { className: "text-green-600", children: "Free" })) : shipping === 0 ? ('Free') : Number.isFinite(shipping) && shipping > 0 ? (formatCurrency(shipping, currency)) : (_jsx("span", { className: "text-gray-400", children: "Not available" })) })] })), feesLoading && (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: "Fees" }), _jsx("span", { className: "text-gray-900 font-bold", children: "Calculating..." })] })), !feesLoading && (_jsx(CheckoutFeeLines, { lines: displayLines, currency: currency, excludeKeys: ['shipping'], className: "flex justify-between text-gray-500 font-medium text-sm", labelClassName: "", amountClassName: "text-gray-900 font-bold" })), _jsxs("div", { className: "flex justify-between items-end pt-4 mt-2 border-t border-gray-100", children: [_jsx("span", { className: "text-base font-bold text-gray-900", children: "Total to pay" }), _jsx("span", { className: "text-3xl font-black text-gray-900 tracking-tight", children: formatCurrency(total, currency) })] })] }), _jsxs("div", { className: "mt-8 pt-6 border-t border-gray-100 grid grid-cols-3 gap-2 opacity-50 grayscale", children: [_jsx("div", { className: "h-8 bg-gray-100 rounded border border-gray-200" }), _jsx("div", { className: "h-8 bg-gray-100 rounded border border-gray-200" }), _jsx("div", { className: "h-8 bg-gray-100 rounded border border-gray-200" })] })] }), PROMO_CODE_ENABLED && (_jsxs("div", { className: "bg-white p-6 rounded-3xl shadow-lg border border-gray-100 mt-6 sticky top-[500px]", children: [_jsxs("h3", { className: "font-bold text-gray-900 mb-4 flex items-center gap-2", children: [_jsx(Tag, { className: "w-4 h-4" }), " Have a promo code?"] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", value: promoCode, onChange: (e) => setPromoCode(e.target.value), placeholder: "Enter code", className: "flex-1 px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:border-black transition-all uppercase placeholder:normal-case font-medium" }), _jsx(Button, { onClick: handleApplyPromo, disabled: !promoCode || isPromoApplied, className: "bg-black text-white rounded-xl", style: isPromoApplied ? { backgroundColor: '#22c55e' } : {}, children: isPromoApplied ? 'Applied' : 'Apply' })] }), isPromoApplied && (_jsxs("p", { className: "text-green-600 text-xs font-bold mt-2 flex items-center gap-1", children: [_jsx(CheckCircle, { className: "w-3 h-3" }), " Discount applied to total"] }))] }))] })] })] }) }));
+                                                                        : 'Not available' }) })] }, method.code))) })) : (_jsx("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg text-center", children: _jsx("p", { className: "text-sm text-gray-600", children: "No shipping methods available. Please check your address." }) }))] })), _jsxs(Button, { type: "submit", size: "lg", className: "w-full h-14 text-lg font-bold rounded-2xl shadow-xl hover:shadow-2xl hover:-translate-y-0.5 transition-all", style: { backgroundColor: primaryColor }, children: ["Continue to Payment ", _jsx(ChevronRight, { className: "ml-2 w-5 h-5" })] })] })) : (_jsxs("div", { className: "space-y-8 animate-fade-in", children: [_jsxs("section", { className: "bg-white p-6 rounded-3xl shadow-sm border border-gray-100 flex justify-between items-center group hover:border-gray-300 transition-colors cursor-pointer", onClick: () => setStep('details'), children: [_jsxs("div", { className: "flex gap-4 items-center", children: [_jsx("div", { className: "w-10 h-10 bg-green-50 rounded-full flex items-center justify-center border border-green-100", children: _jsx(CheckCircle, { className: "w-5 h-5 text-green-600" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-xs text-gray-500 font-bold uppercase tracking-wider mb-1", children: "Shipping To" }), _jsxs("p", { className: "font-bold text-gray-900", children: [formData.firstName, " ", formData.lastName] }), _jsxs("p", { className: "text-sm text-gray-500", children: [formData.address, ", ", formData.city] })] })] }), _jsx("span", { className: "text-sm font-bold text-blue-600 px-4 py-2 bg-blue-50 rounded-lg group-hover:bg-blue-100 transition-colors", children: "Edit" })] }), isFreeOrder ? (_jsxs("section", { className: "bg-green-50 p-8 rounded-3xl shadow-sm border border-green-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsx("div", { className: "p-2 bg-white text-green-600 rounded-xl", children: _jsx(CheckCircle, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Free Order" })] }), _jsx("p", { className: "text-sm text-green-800 leading-relaxed", children: "No payment is required. Complete your details and confirm to get access to your digital product." })] })) : (_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-blue-50 text-blue-600 rounded-xl", children: _jsx(ShieldCheck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Payment Security" })] }), _jsx("div", { className: "bg-blue-50/50 p-6 rounded-2xl border border-blue-100 mb-6", children: _jsxs("div", { className: "flex items-start gap-4", children: [_jsx(Lock, { className: "w-5 h-5 text-blue-600 mt-1" }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-blue-900 mb-1", children: "Encrypted Transaction" }), _jsx("p", { className: "text-sm text-blue-700/80 leading-relaxed", children: "Your payment is processed securely by Payaza. We do not store your card details." })] })] }) }), _jsxs("div", { className: "flex items-center justify-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-widest", children: [_jsx(Lock, { className: "w-3 h-3" }), "256-bit SSL Secure Payment"] })] })), _jsx(Button, { onClick: handlePayazaCheckout, size: "lg", className: "w-full h-16 text-lg font-bold rounded-2xl shadow-xl hover:shadow-2xl hover:-translate-y-0.5 transition-all", style: { backgroundColor: isFreeOrder ? '#059669' : primaryColor }, disabled: loading || isPayazaLoading, children: loading || isPayazaLoading ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" }), _jsx("span", { children: isFreeOrder ? 'Completing order...' : 'Processing Securely...' })] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [isFreeOrder ? _jsx(CheckCircle, { className: "w-5 h-5" }) : _jsx(Lock, { className: "w-5 h-5" }), _jsx("span", { children: isFreeOrder ? 'Complete Free Order' : 'Pay Now' })] })) })] })) }), _jsxs("div", { className: "w-full lg:w-[400px] flex-shrink-0", children: [_jsxs("div", { className: "bg-white p-8 rounded-3xl shadow-lg border border-gray-100 sticky top-8", children: [_jsx("h2", { className: "text-xl font-black text-gray-900 mb-6", children: "Order Summary" }), _jsx("div", { className: "space-y-6 mb-8 max-h-[400px] overflow-y-auto scrollbar-hide", children: checkoutItems.map((item) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsxs("div", { className: "w-20 h-20 bg-gray-100 rounded-xl overflow-hidden flex-shrink-0 relative border border-gray-200", children: [_jsx(Image, { src: item.product.images[0], alt: item.product.name, fill: true, className: "object-cover group-hover:scale-105 transition-transform duration-500", unoptimized: true }), _jsxs("span", { className: "absolute top-0 right-0 bg-black text-white text-[10px] font-bold px-2 py-1 rounded-bl-lg z-10", children: ["x", item.quantity] })] }), _jsxs("div", { className: "flex-1 py-1", children: [_jsx("p", { className: "font-bold text-gray-900 text-sm line-clamp-2 leading-relaxed", children: item.product.name }), item.variantName && _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: item.variantName }), _jsx("p", { className: "text-gray-500 text-sm font-medium mt-1", children: normalizePrice(item.price) <= 0
+                                                                    ? 'Free'
+                                                                    : formatCurrency(normalizePrice(item.price), item.product?.currency || currency) })] })] }, item.id))) }), _jsxs("div", { className: "space-y-4 pt-6 border-t-2 border-gray-50", children: [_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: "Subtotal" }), _jsx("span", { className: "text-gray-900 font-bold", children: isFreeOrder ? 'Free' : formatCurrency(subtotal, currency) })] }), _jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsxs("span", { children: ["Shipping", selectedShippingMethod ? ` (${selectedShippingMethod.name})` : ''] }), _jsx("span", { className: "text-gray-900 font-bold", children: isCalculatingShipping ? (_jsx("span", { className: "text-gray-400", children: "Calculating..." })) : !selectedShippingMethod ? (_jsx("span", { className: "text-gray-400", children: "Not available" })) : shipping === 0 && freeShippingEligible ? (_jsx("span", { className: "text-green-600", children: "Free" })) : shipping === 0 ? ('Free') : Number.isFinite(shipping) && shipping > 0 ? (formatCurrency(shipping, currency)) : (_jsx("span", { className: "text-gray-400", children: "Not available" })) })] }), customerFeeLines.map((line) => (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: line.label }), _jsx("span", { className: "text-gray-900 font-bold", children: formatCurrency(line.amount, currency) })] }, line.key))), !feePreview && vatAmount > 0 && (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: vatLabel }), _jsx("span", { className: "text-gray-900 font-bold", children: formatCurrency(vatAmount, currency) })] })), _jsxs("div", { className: "flex justify-between items-end pt-4 mt-2 border-t border-gray-100", children: [_jsx("span", { className: "text-base font-bold text-gray-900", children: "Total to pay" }), _jsx("span", { className: "text-3xl font-black text-gray-900 tracking-tight", children: isCalculatingFees ? 'Calculating…' : isFreeOrder ? 'Free' : formatCurrency(total, currency) })] })] }), _jsxs("div", { className: "mt-8 pt-6 border-t border-gray-100 grid grid-cols-3 gap-2 opacity-50 grayscale", children: [_jsx("div", { className: "h-8 bg-gray-100 rounded border border-gray-200" }), _jsx("div", { className: "h-8 bg-gray-100 rounded border border-gray-200" }), _jsx("div", { className: "h-8 bg-gray-100 rounded border border-gray-200" })] })] }), _jsxs("div", { className: "bg-white p-6 rounded-3xl shadow-lg border border-gray-100 mt-6 sticky top-[500px]", children: [_jsxs("h3", { className: "font-bold text-gray-900 mb-4 flex items-center gap-2", children: [_jsx(Tag, { className: "w-4 h-4" }), " Have a promo code?"] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", value: promoCode, onChange: (e) => setPromoCode(e.target.value), placeholder: "Enter code", className: "flex-1 px-4 py-2 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:border-black transition-all uppercase placeholder:normal-case font-medium" }), _jsx(Button, { onClick: handleApplyPromo, disabled: !promoCode || isPromoApplied, className: "bg-black text-white rounded-xl", style: isPromoApplied ? { backgroundColor: '#22c55e' } : {}, children: isPromoApplied ? 'Applied' : 'Apply' })] }), isPromoApplied && (_jsxs("p", { className: "text-green-600 text-xs font-bold mt-2 flex items-center gap-1", children: [_jsx(CheckCircle, { className: "w-3 h-3" }), " Discount applied to total"] }))] })] })] })] }) }));
 }