storefront-layouts 1.0.0

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

@@ -0,0 +1,1450 @@
+'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 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 { 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: "*" })] }));
+}
+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 { 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')
+            return null;
+        try {
+            const stored = sessionStorage.getItem('buyNowItem');
+            if (stored) {
+                return JSON.parse(stored);
+            }
+        }
+        catch (error) {
+            console.error('Failed to read buyNowItem from sessionStorage:', error);
+        }
+        return null;
+    });
+    // State to track buy-now restoration from sessionStorage
+    const hasRestoredRef = useRef(false);
+    // Restore buyNowItem from sessionStorage to context if needed (only once on mount)
+    useEffect(() => {
+        if (hasRestoredRef.current) {
+            return;
+        }
+        hasRestoredRef.current = true;
+        if (!buyNowItem && sessionBuyNowItem) {
+            setBuyNowItem(sessionBuyNowItem);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Ensure cart is loaded before rendering checkout (API-backed stores)
+    useEffect(() => {
+        if (!isCartHydrated) {
+            void refreshCart?.();
+        }
+    }, [isCartHydrated, refreshCart]);
+    // 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);
+    };
+    // Address management state
+    const [savedAddresses, setSavedAddresses] = useState([]);
+    const [selectedAddressId, setSelectedAddressId] = useState(null);
+    const [saveNewAddress, setSaveNewAddress] = useState(false);
+    const [addressLabel, setAddressLabel] = useState('');
+    const [loadingAddresses, setLoadingAddresses] = useState(false);
+    // Shipping calculation state
+    const [shippingMethods, setShippingMethods] = useState([]);
+    const [selectedShippingMethod, setSelectedShippingMethod] = useState(null);
+    const [isCalculatingShipping, setIsCalculatingShipping] = useState(false);
+    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 { checkout: initiateCheckout, isLoading: isPayazaLoading } = usePayazaCheckout({
+        publicKey: payazaPublicKey,
+        onSuccess: async (response) => {
+            try {
+                setLoading(true);
+                const { transactionRef, payazaRef, merchantRef } = resolvePostPaymentRefs(response);
+                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,
+                });
+                addToast('Verifying payment...', 'info');
+                // Step 1: Immediate check if payment already completed
+                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);
+                        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
+                if (response.callbackData) {
+                    console.log('[Checkout] Processing Payaza callback confirmation immediately');
+                    const enrichedCallback = enrichPayazaCallbackData(response.callbackData);
+                    const MAX_RETRIES = 3;
+                    const RETRY_DELAY = 1000;
+                    let confirmation;
+                    for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+                        try {
+                            confirmation = await paymentService.confirmPaymentFromCallback(enrichedCallback);
+                            break;
+                        }
+                        catch (error) {
+                            console.error(`[Checkout] Payment confirmation attempt ${attempt} failed:`, error);
+                            recordConfirmationError(error);
+                            if (inventoryConfirmationError)
+                                break;
+                            if (attempt < MAX_RETRIES) {
+                                await new Promise(resolve => setTimeout(resolve, RETRY_DELAY * attempt));
+                            }
+                        }
+                    }
+                    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;
+                        }
+                    }
+                    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;
+                        }
+                    }
+                }
+                // 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);
+                        return;
+                    }
+                }
+                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;
+                }
+                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;
+                }
+                if (transactionRef) {
+                    addToast('Payment successful. Verifying transaction...', 'info');
+                    redirectToPaymentCallback(transactionRef);
+                }
+                else {
+                    addToast('Payment successful but verification failed. Please contact support with your transaction details.', 'error');
+                    setLoading(false);
+                }
+            }
+        },
+        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();
+            }
+            addToast(`Checkout error: ${error}`, 'error');
+            setLoading(false);
+        },
+        onClose: async () => {
+            await handlePaymentCancelCleanup();
+            addToast('Payment canceled', 'info');
+            setLoading(false);
+        },
+    });
+    // Track checkout_start event when checkout page loads with items
+    useEffect(() => {
+        if (!isCartHydrated || !storeConfig?.id || (checkoutItems.length === 0 && !effectiveBuyNowItem)) {
+            return;
+        }
+        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]);
+    // 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;
+                        }
+                    }
+                    catch (error) {
+                        console.error('Failed to restore buyNowItem:', error);
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+            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)
+    useEffect(() => {
+        return () => {
+            if (effectiveBuyNowItem && !completingOrderRef.current) {
+                clearBuyNowItem();
+            }
+        };
+    }, [effectiveBuyNowItem, clearBuyNowItem]);
+    // Load saved addresses for authenticated users (runs on mount and when auth state changes)
+    useEffect(() => {
+        const loadAddresses = async () => {
+            if (isAuthenticated) {
+                setLoadingAddresses(true);
+                try {
+                    const addresses = await customerService.getAddresses();
+                    setSavedAddresses(addresses);
+                    // Priority 1: Auto-select default address if available
+                    const defaultAddress = addresses.find(a => a.isDefault);
+                    if (defaultAddress) {
+                        handleAddressSelect(defaultAddress.id);
+                        return; // Don't pre-fill from profile if we have a saved address
+                    }
+                    // Priority 2: If no saved addresses, pre-fill from profile data
+                    if (addresses.length === 0 && user) {
+                        setFormData(prev => ({
+                            email: user.email || prev.email,
+                            firstName: user.firstName || prev.firstName,
+                            lastName: user.lastName || prev.lastName,
+                            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,
+                        }));
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to load addresses:', error);
+                    // Don't show error toast - addresses are optional
+                    // Guest users can still checkout without saved addresses
+                    // If address loading fails but user is authenticated, still try to pre-fill from profile
+                    if (user) {
+                        setFormData(prev => ({
+                            email: user.email || prev.email,
+                            firstName: user.firstName || prev.firstName,
+                            lastName: user.lastName || prev.lastName,
+                            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,
+                        }));
+                    }
+                }
+                finally {
+                    setLoadingAddresses(false);
+                }
+            }
+        };
+        loadAddresses();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAuthenticated]);
+    // Pre-fill form data for authenticated users when no saved address is selected
+    // This runs after addresses are loaded to ensure proper priority
+    useEffect(() => {
+        if (isAuthenticated && user && !selectedAddressId && savedAddresses.length === 0 && !loadingAddresses) {
+            setFormData(prev => ({
+                email: user.email || prev.email,
+                firstName: user.firstName || prev.firstName,
+                lastName: user.lastName || prev.lastName,
+                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)
+    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) {
+            setShippingMethods([]);
+            setSelectedShippingMethod(null);
+            return;
+        }
+        setIsCalculatingShipping(true);
+        setShippingError(null);
+        try {
+            const result = await shippingService.calculateShipping(buildShippingCalculatePayload({
+                storeId: storeConfig.id,
+                address: quoteAddress,
+                customerInfo: {
+                    firstName: formData.firstName,
+                    lastName: formData.lastName,
+                    phone: formData.phone,
+                    email: formData.email,
+                },
+                items: checkoutItems.map((item) => ({
+                    productId: item.productId,
+                    quantity: item.quantity,
+                })),
+                subtotal,
+                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);
+            setFreeShippingEligible(result.freeShippingEligible || false);
+            setFreeShippingThreshold(result.freeShippingThreshold);
+            // Auto-select first method or selected method, but only if it has valid cost
+            if (validMethods.length > 0) {
+                // Find the selected method in valid methods, or use first valid method
+                const methodToSelect = result.selectedMethod &&
+                    validMethods.find(m => m.code === result.selectedMethod?.code)
+                    ? validMethods.find(m => m.code === result.selectedMethod?.code)
+                    : validMethods[0];
+                if (methodToSelect) {
+                    setSelectedShippingMethod(methodToSelect);
+                }
+                else {
+                    setSelectedShippingMethod(null);
+                }
+            }
+            else {
+                setSelectedShippingMethod(null);
+            }
+        }
+        catch (error) {
+            console.error('Shipping calculation error:', error);
+            setShippingError(error.message || 'Failed to calculate shipping. Please try again.');
+            setShippingMethods([]);
+            setSelectedShippingMethod(null);
+        }
+        finally {
+            setIsCalculatingShipping(false);
+        }
+    };
+    // Determine currency from checkout items or store config (avoid switching to USD at checkout)
+    const getCurrency = () => {
+        if (checkoutItems.length > 0) {
+            const itemCurrency = checkoutItems[0]?.currency ?? checkoutItems[0]?.product?.currency;
+            if (itemCurrency)
+                return itemCurrency;
+        }
+        return storeConfig.settings?.currency || 'USD';
+    };
+    const currency = getCurrency();
+    // Calculations
+    const subtotal = checkoutTotal;
+    // Only use shipping cost if it's a valid number and from a properly selected method
+    const shipping = (selectedShippingMethod &&
+        Number.isFinite(selectedShippingMethod.cost) &&
+        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;
+    const safeSubtotal = Number.isFinite(subtotal) && subtotal >= 0 ? subtotal : 0;
+    const total = feeBreakdown?.totalPayable ?? Math.max(safeSubtotal, totalPayable);
+    // Debug logging in development
+    if (process.env.NODE_ENV === 'development' && safeSubtotal > 0 && total === 0) {
+        console.warn('[CheckoutPage] Total calculation issue detected:', {
+            subtotal: safeSubtotal,
+            shipping,
+            total,
+            feeBreakdown,
+            checkoutTotal,
+            checkoutItemsCount: checkoutItems.length,
+            effectiveBuyNowItem: !!effectiveBuyNowItem,
+        });
+    }
+    // Mock Form Data
+    const [formData, setFormData] = useState({
+        email: '',
+        firstName: '',
+        lastName: '',
+        address: '',
+        city: '',
+        state: '',
+        country: 'Nigeria',
+        postalCode: '',
+        phone: ''
+    });
+    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
+    useEffect(() => {
+        if (!deliveryEnabled || !automatedShippingEnabled || checkoutItems.length === 0) {
+            setIsCourierMode(false);
+            setShippingMethods([]);
+            setSelectedShippingMethod(null);
+            setSelectedCourier(null);
+            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);
+        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]);
+    const validateForm = () => {
+        const newErrors = {};
+        if (!formData.email)
+            newErrors.email = 'Email is required';
+        else if (!/\S+@\S+\.\S+/.test(formData.email))
+            newErrors.email = 'Invalid email address';
+        if (!formData.firstName)
+            newErrors.firstName = 'First name is required';
+        if (!formData.lastName)
+            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;
+    };
+    const [promoCode, setPromoCode] = useState('');
+    const [isPromoApplied, setIsPromoApplied] = useState(false);
+    const handleApplyPromo = () => {
+        if (!promoCode)
+            return;
+        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 ||
+                    '',
+            }));
+            setSelectedAddressId(null);
+            setSaveNewAddress(false);
+            setAddressLabel('');
+            return;
+        }
+        const address = savedAddresses.find(a => a.id === addressId);
+        if (address) {
+            setFormData(prev => ({
+                ...prev,
+                firstName: address.firstName,
+                lastName: address.lastName,
+                address: address.address1,
+                city: address.city,
+                state: address.state || '',
+                country: address.country,
+                postalCode: address.zipCode,
+                phone: address.phone || prev.phone,
+            }));
+            setSelectedAddressId(addressId);
+            setSaveNewAddress(false);
+            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' };
+        }
+        if (!/\S+@\S+\.\S+/.test(formData.email)) {
+            return { isValid: false, error: 'Invalid email address' };
+        }
+        if (!formData.firstName) {
+            return { isValid: false, error: 'First name is required' };
+        }
+        if (!formData.lastName) {
+            return { isValid: false, error: 'Last name is required' };
+        }
+        if (!formData.address) {
+            return { isValid: false, error: 'Address is required' };
+        }
+        if (!formData.city) {
+            return { isValid: false, error: 'City is required' };
+        }
+        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(() => {
+                router.push(`/${storeConfig.slug}/payment/callback?status=success&reference=DEMO-${Date.now()}`);
+            }, 1500);
+            return;
+        }
+        await saveCheckoutAddressIfNeeded();
+        let checkoutResponse;
+        let checkoutConfig;
+        try {
+            // Step 1: Create order via API before payment
+            console.log('[Checkout] Step 1: Creating order via API', {
+                storeId: storeConfig.id,
+                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),
+                    });
+                }
+                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);
+                }
+            }
+            catch (apiError) {
+                console.error('[Checkout] Step 1: API call failed', {
+                    error: apiError,
+                    message: apiError?.message,
+                    status: apiError?.status,
+                    data: apiError?.data,
+                    requestData: {
+                        storeId: storeConfig.id,
+                        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');
+                }
+                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');
+                }
+                else if (apiError?.status === 409) {
+                    addToast(getUserFriendlyErrorMessage(apiError, 'One or more items are no longer available in the requested quantity.'), 'error');
+                    refreshCart?.();
+                }
+                else {
+                    addToast(getUserFriendlyErrorMessage(apiError, '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');
+                setLoading(false);
+                return;
+            }
+            // Step 2: Convert checkout items to Payaza format
+            console.log('[Checkout] Step 2: Converting checkout items to Payaza format');
+            try {
+                const payazaItems = checkoutItems.map(item => ({
+                    product: {
+                        name: item.product.name,
+                        price: item.price,
+                        currency: item.product.currency,
+                    },
+                    quantity: item.quantity,
+                    price: item.price,
+                }));
+                console.log('[Checkout] Step 2: Items converted', { itemCount: payazaItems.length });
+                // Step 3: Generate Payaza checkout config with order details
+                console.log('[Checkout] Step 3: Generating Payaza checkout config', {
+                    currency: checkoutResponse.currency || storeConfig.settings?.currency,
+                    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)}` : ''}`,
+                    currency: checkoutResponse.currency || storeConfig.settings?.currency,
+                    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,
+                        country: formData.country,
+                        zipCode: formData.postalCode,
+                    },
+                });
+                console.log('[Checkout] Step 3: Checkout config generated', {
+                    amount: checkoutConfig.amount,
+                    currency: checkoutConfig.currency,
+                    reference: checkoutConfig.reference,
+                });
+            }
+            catch (configError) {
+                console.error('[Checkout] Step 2-3: Config generation failed', {
+                    error: configError,
+                    message: configError?.message,
+                    stack: configError?.stack,
+                });
+                addToast(configError?.message || 'Invalid checkout configuration. Please contact support.', 'error');
+                setLoading(false);
+                return;
+            }
+            // Step 4: Use transaction reference from order
+            checkoutConfig.reference = checkoutResponse.transactionReference;
+            console.log('[Checkout] Step 4: Transaction reference set', {
+                reference: checkoutConfig.reference,
+            });
+            // Step 5: 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) {
+                    clearBuyNowItem();
+                }
+            }
+            catch (sdkError) {
+                console.error('[Checkout] Step 5: Payaza SDK initiation failed', {
+                    error: sdkError,
+                    message: sdkError?.message,
+                    config: {
+                        amount: checkoutConfig.amount,
+                        currency: checkoutConfig.currency,
+                        publicKey: checkoutConfig.publicKey?.substring(0, 20) + '...',
+                    },
+                });
+                if (sdkError?.message?.includes('SDK not loaded') || sdkError?.message?.includes('PayazaCheckout')) {
+                    addToast('Payment system is loading. Please wait a moment and try again.', 'error');
+                }
+                else if (sdkError?.message?.includes('Currency')) {
+                    addToast('Invalid currency code. Please contact support.', 'error');
+                }
+                else {
+                    addToast('Payment popup failed to open. Please try again.', 'error');
+                }
+                setLoading(false);
+                return;
+            }
+        }
+        catch (error) {
+            console.error('[Checkout] Unexpected error in checkout flow', {
+                error,
+                message: error?.message,
+                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');
+            setLoading(false);
+        }
+    };
+    const handleDetailsSubmit = (e) => {
+        e.preventDefault();
+        if (validateForm()) {
+            setStep('payment');
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        else {
+            addToast('Please fix the errors in the form.', 'error');
+            // Scroll to the first error or top of form
+            const firstErrorField = document.querySelector('.border-red-500');
+            if (firstErrorField) {
+                firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+            else {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            }
+        }
+    };
+    // Show skeleton while cart hydrates (buy-now flow skips cart hydration)
+    if (!isCartHydrated && !effectiveBuyNowItem) {
+        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", 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: (() => {
+                                                                                    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) {
+                                                                                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: {
+                                                                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
+                                                        ? "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`
+                                                                                : `Estimated delivery: ${method.estimatedDays} business days` }))] })] }), _jsx("div", { className: "text-right", children: _jsx("p", { className: "font-bold text-gray-900", children: freeShippingEligible && method.cost === 0
+                                                                    ? '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"] }))] }))] })] })] }) }));
+}