payaza-storefront-layouts 1.1.21 → 1.1.23

package/dist/components/checkout/ShippingOptionsPanel.d.ts

@@ -0,0 +1,54 @@
+import type { ShippingQuoteAddress } from '../../lib/shipping-address.util';
+export interface DeliveryRate {
+    providerKey: string;
+    providerDisplayName: string;
+    methodCode: string | null;
+    methodName: string;
+    etaTo: number | null;
+    etaFrom: number | null;
+    price: number;
+    currency: string;
+    quoteToken: string | null;
+    serviceCode?: string;
+    courierId?: string;
+    notes: string | null;
+    isFastest?: boolean;
+    isCheapest?: boolean;
+    isRecommended?: boolean;
+    serviceType?: 'pickup' | 'dropoff';
+    supportsCOD?: boolean;
+    trackingLevel?: number;
+}
+/** @deprecated use DeliveryRate */
+export type ShipBubbleRate = DeliveryRate;
+export interface SelectedShipping {
+    providerKey: string;
+    serviceCode: string;
+    courierId: string;
+    requestToken: string;
+    quoteId: string;
+    price: number;
+    currency: string;
+    courierName: string;
+}
+interface ShippingOptionsPanelProps {
+    storeId: string;
+    address: ShippingQuoteAddress;
+    packages: Array<{
+        weight: number;
+        value?: number;
+        name?: string;
+        quantity?: number;
+    }>;
+    onSelect: (selection: SelectedShipping | null) => void;
+    selected: SelectedShipping | null;
+    customerInfo?: {
+        firstName?: string;
+        lastName?: string;
+        phone?: string;
+        email?: string;
+    };
+}
+export declare function ShippingOptionsPanel({ storeId, address, packages, onSelect, selected, customerInfo, }: ShippingOptionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ShippingOptionsPanel.d.ts.map

package/dist/components/checkout/ShippingOptionsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShippingOptionsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/checkout/ShippingOptionsPanel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,mCAAmC;AACnC,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACtF,QAAQ,EAAE,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAkBD,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,YAAY,GACb,EAAE,yBAAyB,2CAuK3B"}

package/dist/components/checkout/ShippingOptionsPanel.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import { api } from '../../lib/api.js';
+import { Skeleton } from '../../components/ui/skeleton.js';
+import { buildDeliveryQuotePayload } from '../../lib/shipping-address.util.js';
+function toSelectedShipping(rate) {
+    const serviceCode = rate.serviceCode || rate.methodCode || 'standard';
+    const courierId = rate.courierId || '';
+    const quoteToken = rate.quoteToken || '';
+    return {
+        providerKey: rate.providerKey,
+        serviceCode,
+        courierId,
+        requestToken: quoteToken,
+        quoteId: rate.providerKey === 'shipbubble' ? `${quoteToken}|${courierId}` : quoteToken,
+        price: rate.price,
+        currency: rate.currency,
+        courierName: rate.methodName,
+    };
+}
+export function ShippingOptionsPanel({ storeId, address, packages, onSelect, selected, customerInfo, }) {
+    const [rates, setRates] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [addressIncomplete, setAddressIncomplete] = useState(false);
+    const fetchRates = useCallback(async () => {
+        if (!address.city || !address.state || !address.country) {
+            setAddressIncomplete(true);
+            setRates([]);
+            return;
+        }
+        const street = (address.street || address.address1 || '').trim();
+        if (!street) {
+            setAddressIncomplete(true);
+            setRates([]);
+            return;
+        }
+        setAddressIncomplete(false);
+        setLoading(true);
+        setError(null);
+        try {
+            const payload = buildDeliveryQuotePayload({
+                storeId,
+                address,
+                packages,
+                customerInfo,
+            });
+            const response = await api.post('/delivery/quote', payload);
+            const quotes = response.data?.data?.quotes || response.data?.data || [];
+            setRates(quotes);
+            if (quotes.length > 0 && !selected) {
+                const recommended = quotes.find((q) => q.isRecommended || q.isFastest) || quotes[0];
+                onSelect(toSelectedShipping(recommended));
+            }
+        }
+        catch (err) {
+            const message = err?.response?.data?.message ||
+                err?.message ||
+                'Could not load shipping options. You can continue and shipping will be calculated at fulfilment.';
+            setError(message);
+            setRates([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        storeId,
+        address.city,
+        address.state,
+        address.country,
+        address.street,
+        address.address1,
+        address.zipCode,
+        packages,
+        customerInfo,
+        selected,
+        onSelect,
+    ]);
+    useEffect(() => {
+        fetchRates();
+    }, [fetchRates]);
+    const handleSelect = (rate) => {
+        onSelect(toSelectedShipping(rate));
+    };
+    if (addressIncomplete) {
+        return (_jsx("p", { className: "text-xs text-gray-500 bg-gray-50 border border-gray-200 rounded px-3 py-2", children: "Complete your address (street, city, state, country) to see shipping rates." }));
+    }
+    if (loading) {
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-gray-700", children: "Shipping options" }), _jsx(Skeleton, { className: "h-16 w-full" }), _jsx(Skeleton, { className: "h-16 w-full" })] }));
+    }
+    if (error) {
+        return (_jsx("p", { className: "text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded px-3 py-2", children: error }));
+    }
+    if (rates.length === 0) {
+        return (_jsx("p", { className: "text-xs text-gray-500 bg-gray-50 border border-gray-200 rounded px-3 py-2", children: "No courier rates available for this address. Try a different address or continue \u2014 shipping may be arranged after checkout." }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm font-medium text-gray-700", children: "Shipping options" }), _jsx("div", { className: "space-y-2", children: rates.map((rate, idx) => {
+                    const serviceCode = rate.serviceCode || rate.methodCode || 'standard';
+                    const courierId = rate.courierId || '';
+                    const isSelected = selected?.providerKey === rate.providerKey &&
+                        selected?.serviceCode === serviceCode &&
+                        selected?.courierId === courierId;
+                    const etaDays = rate.etaTo;
+                    return (_jsxs("button", { type: "button", onClick: () => handleSelect(rate), className: [
+                            'w-full flex items-start gap-3 p-3 rounded-lg border text-left transition-colors',
+                            isSelected
+                                ? 'border-blue-500 bg-blue-50'
+                                : 'border-gray-200 hover:border-gray-300 bg-white',
+                        ].join(' '), children: [_jsx("span", { className: [
+                                    'mt-0.5 flex-shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center',
+                                    isSelected ? 'border-blue-500' : 'border-gray-300',
+                                ].join(' '), children: isSelected && _jsx("span", { className: "w-2 h-2 rounded-full bg-blue-500" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx("span", { className: "text-sm font-medium text-gray-900", children: rate.methodName }), rate.isFastest && (_jsx("span", { className: "text-[10px] font-semibold bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded-full uppercase tracking-wide", children: "Fastest" })), rate.isCheapest && (_jsx("span", { className: "text-[10px] font-semibold bg-green-100 text-green-700 px-1.5 py-0.5 rounded-full uppercase tracking-wide", children: "Cheapest" }))] }), _jsxs("div", { className: "flex items-center gap-2 mt-0.5 text-xs text-gray-500 flex-wrap", children: [etaDays && _jsxs("span", { children: ["Arrives in ~", etaDays, " day", etaDays !== 1 ? 's' : ''] }), rate.providerKey === 'shipbubble' && rate.serviceType === 'dropoff' && _jsx("span", { children: "\u00B7 Drop-off at courier station" }), rate.trackingLevel != null && _jsxs("span", { children: ["\u00B7 Tracking ", rate.trackingLevel, "/10"] })] })] }), _jsx("div", { className: "flex-shrink-0 text-right", children: _jsxs("p", { className: "text-sm font-semibold text-gray-900", children: [rate.currency, " ", rate.price.toLocaleString()] }) })] }, `${rate.providerKey}-${serviceCode}-${courierId}-${idx}`));
+                }) })] }));
+}

package/dist/components/ui/guest-checkout-modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guest-checkout-modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/guest-checkout-modal.tsx"],"names":[],"mappings":"AAQA,UAAU,uBAAuB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;IACX,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,WAAW,GACZ,EAAE,uBAAuB,2CAiRzB"}
+{"version":3,"file":"guest-checkout-modal.d.ts","sourceRoot":"","sources":["../../../src/components/ui/guest-checkout-modal.tsx"],"names":[],"mappings":"AAQA,UAAU,uBAAuB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE;QACf,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,KAAK,IAAI,CAAC;IACX,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,WAAW,GACZ,EAAE,uBAAuB,2CAoRzB"}

package/dist/components/ui/guest-checkout-modal.js

@@ -35,8 +35,11 @@ export function GuestCheckoutModal({ isOpen, onClose, onSubmit, initialData, })
         if (!formData.phone.trim()) {
             newErrors.phone = 'Phone number is required';
         }
-        else if (!/^[0-9+\-\s()]+$/.test(formData.phone.trim())) {
-            newErrors.phone = 'Please enter a valid phone number';
+        else {
+            const digits = formData.phone.trim().replace(/\D/g, '');
+            if (digits.length < 7 || digits.length > 15) {
+                newErrors.phone = 'Please enter a valid phone number';
+            }
         }
         if (!formData.email.trim()) {
             newErrors.email = 'Email is required';

package/dist/hooks/use-payaza-checkout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-payaza-checkout.d.ts","sourceRoot":"","sources":["../../src/hooks/use-payaza-checkout.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAE7G,UAAU,wBAAwB;IAChC,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAc,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,wBAAwB;uBAiBzE,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;;;EAsHhG"}
+{"version":3,"file":"use-payaza-checkout.d.ts","sourceRoot":"","sources":["../../src/hooks/use-payaza-checkout.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,oBAAoB,EAAE,sBAAsB,EAA6B,MAAM,uBAAuB,CAAC;AAExI,UAAU,wBAAwB;IAChC,kGAAkG;IAClG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAc,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,wBAAwB;uBAiBzE,IAAI,CAAC,oBAAoB,EAAE,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;;;EAqGhG"}

package/dist/hooks/use-payaza-checkout.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState, useRef, useEffect } from 'react';
-import { initiatePayazaCheckout } from '../lib/payaza-checkout.js';
+import { initiatePayazaCheckout, teardownPayazaCheckoutDom } from '../lib/payaza-checkout.js';
 export function usePayazaCheckout({ publicKey = '', onSuccess, onError, onClose }) {
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -29,29 +29,7 @@ export function usePayazaCheckout({ publicKey = '', onSuccess, onError, onClose
         };
         const PAYAZA_TIMEOUT_MS = 45000;
         const removePayazaOverlay = () => {
-            if (typeof document === 'undefined' || !document.body || !document.querySelector)
-                return;
-            const iframe = document.querySelector('iframe[src*="payaza.africa"]');
-            let node = iframe;
-            while (node?.parentElement && node.parentElement !== document.body) {
-                node = node.parentElement;
-            }
-            if (node?.parentElement === document.body) {
-                node.remove();
-            }
-            else if (iframe?.parentElement) {
-                iframe.parentElement.remove();
-            }
-            document.querySelectorAll('style').forEach((styleEl) => {
-                if (styleEl.textContent?.includes('payaza-loading-spinner')) {
-                    styleEl.remove();
-                }
-            });
-            document.querySelectorAll('div').forEach((div) => {
-                if (div.innerHTML.includes('payaza-loading-spinner')) {
-                    div.remove();
-                }
-            });
+            teardownPayazaCheckoutDom();
         };
         const setLoadingTimeout = () => {
             timeoutRef.current = setTimeout(() => {
@@ -87,12 +65,14 @@ export function usePayazaCheckout({ publicKey = '', onSuccess, onError, onClose
                     clearLoadingWithTimeout();
                     setIsLoading(false);
                     setError(errorMessage);
+                    removePayazaOverlay();
                     onError?.(errorMessage);
                 },
                 onClose: () => {
                     callbackFired = true;
                     clearLoadingWithTimeout();
                     setIsLoading(false);
+                    removePayazaOverlay();
                     onClose?.();
                 },
             });
@@ -121,6 +101,7 @@ export function usePayazaCheckout({ publicKey = '', onSuccess, onError, onClose
             const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred';
             setIsLoading(false);
             setError(errorMessage);
+            removePayazaOverlay();
             onError?.(errorMessage);
         }
     };

package/dist/layouts/shared/pages/CheckoutPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/pages/CheckoutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA8BhD,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAUD,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,EAAE,iBAAiB,2CAwsD9D"}
+{"version":3,"file":"CheckoutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/pages/CheckoutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA+BhD,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAUD,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,EAAE,iBAAiB,2CA2xD9D"}

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

@@ -4,7 +4,7 @@ import { Button } from '../../../components/ui/button.js';
 import { ArrowLeft, ShieldCheck, CheckCircle, MapPin, Lock, ChevronRight, Tag, Truck, ChevronDown } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { cn } from '../../../lib/utils/index.js';
 import { usePayazaCheckout } from '../../../hooks/use-payaza-checkout.js';
 import { generateCheckoutConfig } from '../../../lib/payaza-checkout.js';
@@ -20,10 +20,11 @@ import { AddressSelector } from '../../../components/ui/address-selector.js';
 import { countries, getCountryByName, getCitiesByCountry } from '../../../lib/countries.js';
 import { calculateVAT, getVATLabel } from '../../../lib/utils/fee-calculations.js';
 import { shippingService } from '../../../lib/services/shipping.service.js';
-import { enrichShippingQuoteAddress, buildShippingCalculatePayload, isNigeria, deriveNigerianStateFromCity, NIGERIAN_STATES } from '../../../lib/shipping-address.util.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';
 import { useAnalytics } from '../../../hooks/use-analytics.js';
-import { formatPhoneInput, validatePhone, getPhonePlaceholder, toCountryCode } from '../../../lib/utils/phone-format.js';
+import { formatPhoneInput, validatePhone, getPhonePlaceholder, normalizePhoneForPayaza } from '../../../lib/utils/phone-format.js';
 const PROMO_CODE_ENABLED = false;
 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: "*" })] }));
@@ -104,6 +105,9 @@ export function CheckoutPage({ storeConfig }) {
     const [shippingError, setShippingError] = useState(null);
     const [freeShippingEligible, setFreeShippingEligible] = useState(false);
     const [freeShippingThreshold, setFreeShippingThreshold] = useState(undefined);
+    const [isCourierMode, setIsCourierMode] = useState(false);
+    const [checkingDeliveryStatus, setCheckingDeliveryStatus] = useState(false);
+    const [selectedCourier, setSelectedCourier] = useState(null);
     // Payaza Configuration
     // Fallback key only — the authoritative key is resolved per-currency by the
     // backend from the database-managed registry and returned by /checkout/process
@@ -235,8 +239,6 @@ export function CheckoutPage({ storeConfig }) {
             setLoading(false);
         },
         onClose: () => {
-            // onClose is only called when payment was not successful (user canceled)
-            // This is now handled correctly by payaza-checkout.ts tracking payment success state
             addToast('Payment canceled', 'info');
             setLoading(false);
         },
@@ -380,9 +382,19 @@ export function CheckoutPage({ storeConfig }) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isAuthenticated, user, selectedAddressId, savedAddresses.length, loadingAddresses]);
-    // Calculate shipping when address is filled
+    // Calculate legacy shipping when address is filled (flat-rate / zone methods)
     const calculateShipping = async () => {
-        if (!formData.city || !formData.country || checkoutItems.length === 0) {
+        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;
@@ -392,16 +404,7 @@ export function CheckoutPage({ storeConfig }) {
         try {
             const result = await shippingService.calculateShipping(buildShippingCalculatePayload({
                 storeId: storeConfig.id,
-                address: 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,
-                }),
+                address: quoteAddress,
                 customerInfo: {
                     firstName: formData.firstName,
                     lastName: formData.lastName,
@@ -510,20 +513,78 @@ export function CheckoutPage({ storeConfig }) {
     const [countrySearch, setCountrySearch] = useState('');
     const [citySearch, setCitySearch] = useState('');
     const deliveryEnabled = storeConfig.features?.delivery !== false;
-    // Debounced shipping calculation when address changes (skip when delivery is globally disabled)
+    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 || !formData.city || !formData.country || checkoutItems.length === 0) {
+        if (!deliveryEnabled || checkoutItems.length === 0) {
+            setIsCourierMode(false);
+            setShippingMethods([]);
+            setSelectedShippingMethod(null);
+            setSelectedCourier(null);
             return;
         }
-        const timer = setTimeout(() => {
-            calculateShipping();
-        }, 500); // Debounce 500ms
+        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, formData.address, formData.city, formData.state, formData.country, formData.postalCode, formData.email, formData.phone, formData.firstName, formData.lastName, checkoutItems.length, subtotal, currency]);
+    }, [deliveryEnabled, 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 = {};
-        const phoneCountryCode = toCountryCode(getCountryByName(formData.country)?.code);
         if (!formData.email)
             newErrors.email = 'Email is required';
         else if (!/\S+@\S+\.\S+/.test(formData.email))
@@ -543,7 +604,7 @@ export function CheckoutPage({ storeConfig }) {
         }
         if (!formData.phone)
             newErrors.phone = 'Phone is required';
-        else if (!validatePhone(formData.phone, phoneCountryCode)) {
+        else if (!validatePhone(formData.phone)) {
             newErrors.phone = 'Please enter a valid phone number';
         }
         setErrors(newErrors);
@@ -557,10 +618,9 @@ export function CheckoutPage({ storeConfig }) {
         setIsPromoApplied(true);
         addToast('Promo code applied successfully!', 'success');
     };
-    const phoneCountryCode = toCountryCode(getCountryByName(formData.country)?.code);
-    const phonePlaceholder = getPhonePlaceholder(phoneCountryCode);
+    const phonePlaceholder = getPhonePlaceholder();
     const handlePhoneChange = (value) => {
-        setFormData({ ...formData, phone: formatPhoneInput(value, phoneCountryCode) });
+        setFormData({ ...formData, phone: formatPhoneInput(value) });
     };
     // Handle address selection
     const handleAddressSelect = (addressId) => {
@@ -630,6 +690,12 @@ export function CheckoutPage({ storeConfig }) {
         if (!formData.phone) {
             return { isValid: false, error: 'Phone is required' };
         }
+        if (!validatePhone(formData.phone)) {
+            return { isValid: false, error: 'Please enter a valid phone number' };
+        }
+        if (isNigeria(formData.country) && !formData.state) {
+            return { isValid: false, error: 'State is required for Nigeria' };
+        }
         // Validate currency availability
         const hasCurrency = storeConfig.settings?.currency || checkoutItems.some(item => item.product.currency);
         if (!hasCurrency) {
@@ -766,7 +832,7 @@ export function CheckoutPage({ storeConfig }) {
                 checkoutConfig = generateCheckoutConfig(payazaItems, formData.email, effectivePayazaPublicKey, {
                     firstName: formData.firstName,
                     lastName: formData.lastName,
-                    phone: formData.phone,
+                    phone: normalizePhoneForPayaza(formData.phone),
                     callbackUrl: `${typeof window !== 'undefined' ? window.location.origin : ''}/${storeConfig.slug}/payment/callback?storeId=${storeConfig.id}`,
                     currency: checkoutResponse.currency || storeConfig.settings?.currency,
                     storeId: storeConfig.id,
@@ -920,9 +986,6 @@ export function CheckoutPage({ storeConfig }) {
                                                                                                         country: country.name,
                                                                                                         city: '',
                                                                                                         state: '',
-                                                                                                        phone: prev.phone
-                                                                                                            ? formatPhoneInput(prev.phone, toCountryCode(country.code))
-                                                                                                            : prev.phone,
                                                                                                     }));
                                                                                                     setIsCountryDropdownOpen(false);
                                                                                                     setCountrySearch('');
@@ -951,9 +1014,19 @@ export function CheckoutPage({ storeConfig }) {
                                                                                                     }, className: cn("w-full px-5 py-3 text-left hover:bg-gray-50 transition-colors", formData.city === city && "bg-gray-50 font-medium"), children: city }, city))), getCitiesByCountry(formData.country).filter(c => c.toLowerCase().includes(citySearch.toLowerCase())).length === 0 && (_jsx("div", { className: "px-5 py-3 text-gray-400 text-sm", children: "No cities found" }))] })] })) : (_jsx("div", { className: "px-5 py-3 text-gray-500 text-sm", children: "No cities available. Please type your city in the field above." })) })] }))] }), errors.city && _jsx("p", { className: "text-red-500 text-xs ml-1", children: errors.city })] }), 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: () => {
                                                                                         setFormData({ ...formData, state });
                                                                                         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("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 && storeConfig.settings?.shippingEnabled !== false && (formData.city && formData.country) && (_jsxs("section", { className: "bg-white p-8 rounded-3xl shadow-sm border border-gray-100", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx("div", { className: "p-2 bg-purple-50 text-purple-600 rounded-xl", children: _jsx(Truck, { className: "w-5 h-5" }) }), _jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Shipping Method" })] }), freeShippingThreshold !== undefined && !freeShippingEligible && (_jsxs("div", { className: "mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsxs("p", { className: "text-xs font-medium text-blue-900 mb-1", children: ["Spend ", formatCurrency(freeShippingThreshold - subtotal, currency), " more for free shipping!"] }), _jsx("div", { className: "w-full bg-blue-200 rounded-full h-2", children: _jsx("div", { className: "bg-blue-600 h-2 rounded-full transition-all", style: {
+                                                                                    }, 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("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 && storeConfig.settings?.shippingEnabled !== false && 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)}%`,
-                                                            } }) })] })), isCalculatingShipping ? (_jsx("div", { className: "flex items-center justify-center p-8", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-600", children: [_jsx("div", { className: "animate-spin rounded-full h-5 w-5 border-b-2 border-gray-900" }), _jsx("span", { className: "text-sm font-medium", children: "Calculating shipping options..." })] }) })) : shippingError ? (_jsx("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: _jsx("p", { className: "text-sm text-red-600", children: shippingError }) })) : shippingMethods.length > 0 ? (_jsx("div", { className: "space-y-3", children: shippingMethods.map((method) => (_jsxs("label", { className: cn("flex items-center justify-between p-4 border-2 rounded-xl cursor-pointer transition-all", selectedShippingMethod?.code === method.code
+                                                            } }) })] })), 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`

package/dist/lib/payaza-checkout.d.ts

@@ -88,6 +88,12 @@ export declare function getCurrencyFromItems(items: Array<{
         currency?: string;
     };
 }>, fallbackCurrency?: string): string;
+/**
+ * Remove all Payaza SDK DOM nodes (loader overlay + invisible iframe).
+ * The SDK appends a fullscreen fixed iframe at max z-index; if checkout never
+ * loads, only the spinner is removed and the invisible iframe blocks all clicks.
+ */
+export declare function teardownPayazaCheckoutDom(): void;
 /**
  * Initialize Payaza checkout using SDK
  * Uses setup() function from payaza-web-sdk npm package as per official documentation

package/dist/lib/payaza-checkout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"payaza-checkout.d.ts","sourceRoot":"","sources":["../../src/lib/payaza-checkout.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yIAAyI;IACzI,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;CAC1B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC;AAyBD,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAexF;AAED;;;;;GAKG;AACH,wBAAgB,wCAAwC,CACtD,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACnC,QAAQ,GAAE,MAAc,GACvB,MAAM,CAYR;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,KAAK,CAAC;IAAE,OAAO,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,CAAC,EACjD,gBAAgB,CAAC,EAAE,MAAM,GACxB,MAAM,CAuCR;AAED;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GACjC,QAAQ,oBAAoB,KAC3B,OAAO,CAAC,sBAAsB,CA0YhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,OAAO,KAAK,CAAC;IAAE,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,EAC9G,eAAe,MAAM,EACrB,WAAW,MAAM,EACjB,UAAU;IACR,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kKAAkK;IAClK,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,KACA,oBAuGF,CAAC"}
+{"version":3,"file":"payaza-checkout.d.ts","sourceRoot":"","sources":["../../src/lib/payaza-checkout.ts"],"names":[],"mappings":"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"}

package/dist/lib/payaza-checkout.js

@@ -6,6 +6,7 @@
  * Method: setup(config).showPopup()
  */
 import PayazaCheckout from 'payaza-web-sdk';
+import { normalizePhoneForPayaza } from '../lib/utils/phone-format.js';
 export function validateAndNormalizeCurrency(currency) {
     if (!currency || typeof currency !== 'string') {
         throw new Error('Currency is required and must be a string');
@@ -78,6 +79,31 @@ export function getCurrencyFromItems(items, fallbackCurrency) {
     const mostCommonCurrency = Object.entries(currencyCounts).reduce((a, b) => currencyCounts[a[0]] > currencyCounts[b[0]] ? a : b)[0];
     return mostCommonCurrency;
 }
+/**
+ * Remove all Payaza SDK DOM nodes (loader overlay + invisible iframe).
+ * The SDK appends a fullscreen fixed iframe at max z-index; if checkout never
+ * loads, only the spinner is removed and the invisible iframe blocks all clicks.
+ */
+export function teardownPayazaCheckoutDom() {
+    if (typeof document === 'undefined' || !document.body)
+        return;
+    document.querySelectorAll('style').forEach((styleEl) => {
+        if (styleEl.textContent?.includes('payaza-loading-spinner')) {
+            styleEl.remove();
+        }
+    });
+    document.querySelectorAll('div').forEach((div) => {
+        if (div.innerHTML.includes('payaza-loading-spinner')) {
+            div.remove();
+        }
+    });
+    document.querySelectorAll('iframe[src*="payaza.africa"], iframe[src*="shopaza.africa"]').forEach((iframe) => {
+        iframe.remove();
+    });
+    if (document.body.style.overflow === 'hidden') {
+        document.body.style.overflow = '';
+    }
+}
 /**
  * Initialize Payaza checkout using SDK
  * Uses setup() function from payaza-web-sdk npm package as per official documentation
@@ -98,6 +124,19 @@ export const initiatePayazaCheckout = async (config) => {
         }
         console.log('[Payaza] Initiating checkout with npm package...');
         console.log('[Payaza] SDK verified ready, proceeding with checkout setup');
+        if (!Number.isFinite(config.amount) || config.amount <= 0) {
+            throw new Error('Invalid payment amount. Please refresh and try again.');
+        }
+        if (!config.email?.trim()) {
+            throw new Error('Email is required for payment.');
+        }
+        if (!config.firstName?.trim()) {
+            throw new Error('First name is required for payment.');
+        }
+        if (!config.lastName?.trim()) {
+            throw new Error('Last name is required for payment.');
+        }
+        const normalizedPhone = config.phone ? normalizePhoneForPayaza(config.phone) : '';
         // Generate transaction reference
         const reference = config.reference || `PL${Math.floor((Math.random() * 10000000) + 1)}`;
         console.log('[Payaza] Transaction reference:', reference);
@@ -141,8 +180,8 @@ export const initiatePayazaCheckout = async (config) => {
         if (config.lastName) {
             additionalDetails.customerLastName = config.lastName;
         }
-        if (config.phone) {
-            additionalDetails.customerPhone = config.phone;
+        if (normalizedPhone) {
+            additionalDetails.customerPhone = normalizedPhone;
         }
         // Shipping address information
         if (config.shippingAddress) {
@@ -176,7 +215,7 @@ export const initiatePayazaCheckout = async (config) => {
             email_address: config.email,
             first_name: config.firstName || '', // Required field
             last_name: config.lastName || '', // Required field
-            phone_number: config.phone || '',
+            phone_number: normalizedPhone,
             transaction_reference: reference,
             // Required by interface, but we'll override with setCallback/setOnClose
             onClose: () => { },
@@ -198,18 +237,7 @@ export const initiatePayazaCheckout = async (config) => {
         let loaderTimeoutId = null;
         let checkoutLoadedFired = false;
         const removePayazaLoaderDom = () => {
-            if (typeof document === 'undefined' || !document.body)
-                return;
-            document.querySelectorAll('style').forEach((styleEl) => {
-                if (styleEl.textContent?.includes('payaza-loading-spinner')) {
-                    styleEl.remove();
-                }
-            });
-            document.querySelectorAll('div').forEach((div) => {
-                if (div.innerHTML.includes('payaza-loading-spinner')) {
-                    div.remove();
-                }
-            });
+            teardownPayazaCheckoutDom();
         };
         const clearLoaderTimeout = () => {
             if (loaderTimeoutId) {
@@ -297,12 +325,13 @@ export const initiatePayazaCheckout = async (config) => {
                     message: errorMessage,
                     data: errorData,
                 });
-                // Call the error handler and clear close-check interval
                 clearCloseCheckInterval();
+                clearLoaderTimeout();
+                removePayazaLoaderDom();
                 if (config.onError) {
                     config.onError(errorMessage);
                 }
-                return; // Exit early on error
+                return;
             }
             // Handle success responses
             if (isSuccessResponse && callbackResponse.data) {
@@ -371,6 +400,8 @@ export const initiatePayazaCheckout = async (config) => {
                     data: callbackResponse.data,
                 });
                 clearCloseCheckInterval();
+                clearLoaderTimeout();
+                removePayazaLoaderDom();
                 if (config.onError) {
                     config.onError('Received unexpected response from payment gateway. Please try again.');
                 }
@@ -407,14 +438,29 @@ export const initiatePayazaCheckout = async (config) => {
                 }, PAYAZA_CLOSE_CHECK_MS);
                 closeCheckIntervalId = checkLoadedAndClose;
                 loaderTimeoutId = setTimeout(() => {
-                    if (closeHandled)
+                    if (closeHandled || checkoutLoadedFired)
                         return;
-                    if (!hasPayazaLoaderInDom())
+                    const loaderStillVisible = hasPayazaLoaderInDom();
+                    const iframePresent = Boolean(typeof document !== 'undefined' &&
+                        document.querySelector('iframe[src*="payaza.africa"], iframe[src*="shopaza.africa"]'));
+                    if (!loaderStillVisible && !iframePresent)
                         return;
-                    console.error('[Payaza] Loader timeout: checkout overlay did not clear');
-                    removePayazaLoaderDom();
+                    console.error('[Payaza] Loader timeout: checkout overlay did not clear', {
+                        keyPrefix: config.publicKey?.substring(0, 8),
+                        amount: config.amount,
+                        currency: validatedCurrency,
+                        connectionMode,
+                        email: config.email,
+                        reference,
+                        loaderStillVisible,
+                        iframePresent,
+                    });
+                    teardownPayazaCheckoutDom();
+                    closeHandled = true;
                     clearCloseCheckInterval();
                     clearLoaderTimeout();
+                    checkoutLoadedFired = true;
+                    config.onCheckoutLoaded?.();
                     if (config.onError) {
                         config.onError('Payment window failed to load. This may be caused by browser security settings or a blocked connection to Payaza. Please try again.');
                     }

package/dist/lib/utils/phone-format.d.ts

@@ -1,6 +1,6 @@
-import type { CountryCode } from 'libphonenumber-js';
-export declare function toCountryCode(isoCode: string | undefined): CountryCode;
-export declare function formatPhoneInput(value: string, countryCode: CountryCode): string;
-export declare function validatePhone(value: string, countryCode: CountryCode): boolean;
-export declare function getPhonePlaceholder(countryCode: CountryCode): string;
+export declare function validatePhone(value: string): boolean;
+export declare function formatPhoneInput(value: string): string;
+export declare function getPhonePlaceholder(): string;
+/** Strip spaces/dashes/parens before sending to Payaza SDK. Keeps + and digits. */
+export declare function normalizePhoneForPayaza(value: string): string;
 //# sourceMappingURL=phone-format.d.ts.map

package/dist/lib/utils/phone-format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone-format.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/phone-format.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAGtE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,GAAG,MAAM,CAGhF;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,GAAG,OAAO,CAQ9E;AAED,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,MAAM,CAOpE"}
+{"version":3,"file":"phone-format.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/phone-format.ts"],"names":[],"mappings":"AAAA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAKpD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED,wBAAgB,mBAAmB,IAAI,MAAM,CAE5C;AAED,mFAAmF;AACnF,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE7D"}

package/dist/lib/utils/phone-format.js

@@ -1,31 +1,17 @@
-import { AsYouType, isValidPhoneNumber, getExampleNumber } from 'libphonenumber-js';
-import examples from 'libphonenumber-js/mobile/examples';
-export function toCountryCode(isoCode) {
-    if (!isoCode || isoCode.length !== 2)
-        return 'NG';
-    return isoCode.toUpperCase();
-}
-export function formatPhoneInput(value, countryCode) {
-    const formatter = new AsYouType(countryCode);
-    return formatter.input(value);
-}
-export function validatePhone(value, countryCode) {
+export function validatePhone(value) {
     const trimmed = value.trim();
     if (!trimmed)
         return false;
-    try {
-        return isValidPhoneNumber(trimmed, countryCode);
-    }
-    catch {
-        return false;
-    }
+    const digits = trimmed.replace(/\D/g, '');
+    return digits.length >= 7 && digits.length <= 15;
+}
+export function formatPhoneInput(value) {
+    return value;
+}
+export function getPhonePlaceholder() {
+    return 'e.g. +234 801 234 5678';
 }
-export function getPhonePlaceholder(countryCode) {
-    try {
-        const example = getExampleNumber(countryCode, examples);
-        return example?.formatInternational() ?? '+234 801 234 5678';
-    }
-    catch {
-        return '+234 801 234 5678';
-    }
+/** Strip spaces/dashes/parens before sending to Payaza SDK. Keeps + and digits. */
+export function normalizePhoneForPayaza(value) {
+    return value.trim().replace(/[\s\-\(\)]/g, '');
 }

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -344,6 +344,9 @@
   .\!visible {
     visibility: visible !important;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -428,10 +431,10 @@
     top: calc(var(--spacing) * 1.5);
   }
   .top-1\/2 {
-    top: calc(1/2 * 100%);
+    top: calc(1 / 2 * 100%);
   }
   .top-1\/4 {
-    top: calc(1/4 * 100%);
+    top: calc(1 / 4 * 100%);
   }
   .top-2 {
     top: calc(var(--spacing) * 2);
@@ -518,7 +521,7 @@
     right: calc(var(--spacing) * 1);
   }
   .right-1\/4 {
-    right: calc(1/4 * 100%);
+    right: calc(1 / 4 * 100%);
   }
   .right-2 {
     right: calc(var(--spacing) * 2);
@@ -578,7 +581,7 @@
     bottom: calc(var(--spacing) * 1.5);
   }
   .bottom-1\/4 {
-    bottom: calc(1/4 * 100%);
+    bottom: calc(1 / 4 * 100%);
   }
   .bottom-2 {
     bottom: calc(var(--spacing) * 2);
@@ -626,10 +629,10 @@
     left: calc(var(--spacing) * 1);
   }
   .left-1\/2 {
-    left: calc(1/2 * 100%);
+    left: calc(1 / 2 * 100%);
   }
   .left-1\/4 {
-    left: calc(1/4 * 100%);
+    left: calc(1 / 4 * 100%);
   }
   .left-2 {
     left: calc(var(--spacing) * 2);
@@ -1085,7 +1088,7 @@
     height: calc(var(--spacing) * 1.5);
   }
   .h-1\/4 {
-    height: calc(1/4 * 100%);
+    height: calc(1 / 4 * 100%);
   }
   .h-2 {
     height: calc(var(--spacing) * 2);
@@ -1100,7 +1103,7 @@
     height: calc(var(--spacing) * 3.5);
   }
   .h-3\/4 {
-    height: calc(3/4 * 100%);
+    height: calc(3 / 4 * 100%);
   }
   .h-4 {
     height: calc(var(--spacing) * 4);
@@ -1349,13 +1352,13 @@
     width: calc(var(--spacing) * 1.5);
   }
   .w-1\/2 {
-    width: calc(1/2 * 100%);
+    width: calc(1 / 2 * 100%);
   }
   .w-1\/3 {
-    width: calc(1/3 * 100%);
+    width: calc(1 / 3 * 100%);
   }
   .w-1\/4 {
-    width: calc(1/4 * 100%);
+    width: calc(1 / 4 * 100%);
   }
   .w-2 {
     width: calc(var(--spacing) * 2);
@@ -1364,10 +1367,10 @@
     width: calc(var(--spacing) * 2.5);
   }
   .w-2\/3 {
-    width: calc(2/3 * 100%);
+    width: calc(2 / 3 * 100%);
   }
   .w-2\/5 {
-    width: calc(2/5 * 100%);
+    width: calc(2 / 5 * 100%);
   }
   .w-3 {
     width: calc(var(--spacing) * 3);
@@ -1376,7 +1379,7 @@
     width: calc(var(--spacing) * 3.5);
   }
   .w-3\/4 {
-    width: calc(3/4 * 100%);
+    width: calc(3 / 4 * 100%);
   }
   .w-4 {
     width: calc(var(--spacing) * 4);
@@ -1385,13 +1388,13 @@
     width: calc(var(--spacing) * 4.5);
   }
   .w-4\/6 {
-    width: calc(4/6 * 100%);
+    width: calc(4 / 6 * 100%);
   }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
   .w-5\/6 {
-    width: calc(5/6 * 100%);
+    width: calc(5 / 6 * 100%);
   }
   .w-6 {
     width: calc(var(--spacing) * 6);
@@ -1652,7 +1655,7 @@
     transform-origin: 0;
   }
   .-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-x-2 {
@@ -1672,7 +1675,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .translate-x-1\/2 {
-    --tw-translate-x: calc(1/2 * 100%);
+    --tw-translate-x: calc(1 / 2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .translate-x-2 {
@@ -1708,7 +1711,7 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .-translate-y-4 {
@@ -1875,6 +1878,24 @@
   .scroll-pt-1 {
     scroll-padding-top: calc(var(--spacing) * 1);
   }
+  .scrollbar-thin {
+    scrollbar-width: thin;
+  }
+  .scrollbar-thumb-gray-200 {
+    --tw-scrollbar-thumb: var(--color-gray-200);
+    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+  }
+  .scrollbar-thumb-white\/10 {
+    --tw-scrollbar-thumb: color-mix(in srgb, #fff 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-scrollbar-thumb: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+  }
+  .scrollbar-track-transparent {
+    --tw-scrollbar-track: transparent;
+    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
+  }
   .list-decimal {
     list-style-type: decimal;
   }
@@ -2458,6 +2479,9 @@
   .border-amber-100 {
     border-color: var(--color-amber-100);
   }
+  .border-amber-200 {
+    border-color: var(--color-amber-200);
+  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -4469,6 +4493,9 @@
       color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);
     }
   }
+  .text-amber-600 {
+    color: var(--color-amber-600);
+  }
   .text-black {
     color: var(--color-black);
   }
@@ -8822,12 +8849,12 @@
   }
   .lg\:w-2\/5 {
     @media (width >= 64rem) {
-      width: calc(2/5 * 100%);
+      width: calc(2 / 5 * 100%);
     }
   }
   .lg\:w-3\/5 {
     @media (width >= 64rem) {
-      width: calc(3/5 * 100%);
+      width: calc(3 / 5 * 100%);
     }
   }
   .lg\:w-72 {
@@ -9682,6 +9709,16 @@
   inherits: false;
   initial-value: proximity;
 }
+@property --tw-scrollbar-thumb {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-scrollbar-track {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -10001,6 +10038,8 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-scroll-snap-strictness: proximity;
+      --tw-scrollbar-thumb: #0000;
+      --tw-scrollbar-track: #0000;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payaza-storefront-layouts",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "type": "module",
   "description": "Shared layout components for Storefront applications",
   "main": "dist/index.js",
@@ -123,7 +123,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "isomorphic-dompurify": "^2.28.0",
-    "libphonenumber-js": "^1.12.9",
     "lucide-react": "^0.554.0",
     "nprogress": "^0.2.0",
     "payaza-web-sdk": "^1.0.4",