storefront-layouts 1.0.13 → 1.0.15

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

@@ -4,7 +4,7 @@ import { Button } from '../../../components/ui/button.js';
 import { ArrowLeft, CheckCircle, Lock, ChevronDown, Trash2 } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, 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';
@@ -24,11 +24,50 @@ import { shippingService } from '../../../lib/services/shipping.service.js';
 import { feesService } from '../../../lib/services/fees.service.js';
 import { getCartLineImage } from '../../../lib/product-variation-utils.js';
 import { useAnalytics } from '../../../hooks/use-analytics.js';
-function selectedDisplayCurrency() {
-    if (typeof document === 'undefined')
-        return undefined;
-    const value = document.cookie.match(/(?:^|; )shopaza_currency=([^;]+)/)?.[1]?.toUpperCase();
-    return value && /^[A-Z]{3}$/.test(value) ? value : undefined;
+import { resolveCartChargeCurrency } from '../../../lib/cart-charge-currency.js';
+import { getCheckoutPhoneValidationError, sanitizeCheckoutPhoneInput, } from '../../../lib/checkout-phone-validation.js';
+const CHECKOUT_PERSON_NAME_MIN_LENGTH = 2;
+const CHECKOUT_PERSON_NAME_MAX_LENGTH = 30;
+function getCheckoutPersonNameValidationError(value, field) {
+    const trimmed = value.trim();
+    const label = field === 'first' ? 'First name' : 'Last name';
+    if (!trimmed)
+        return `${label} is required`;
+    if (trimmed.length < CHECKOUT_PERSON_NAME_MIN_LENGTH) {
+        return `${label} must be at least ${CHECKOUT_PERSON_NAME_MIN_LENGTH} characters`;
+    }
+    if (trimmed.length > CHECKOUT_PERSON_NAME_MAX_LENGTH) {
+        return `${label} must be at most ${CHECKOUT_PERSON_NAME_MAX_LENGTH} characters`;
+    }
+    return undefined;
+}
+function getCheckoutEmailValidationError(email) {
+    const trimmed = email.trim();
+    if (!trimmed)
+        return 'Email is required';
+    const atIndex = trimmed.indexOf('@');
+    if (atIndex < 1) {
+        return 'Enter an email with @ and a domain (e.g. name@example.com)';
+    }
+    const domain = trimmed.slice(atIndex + 1);
+    if (!domain.includes('.')) {
+        return 'Enter an email with a domain (e.g. name@example.com)';
+    }
+    const [host, ...rest] = domain.split('.');
+    const tld = rest.join('.');
+    if (!host?.trim() || !tld?.trim() || tld.length < 2) {
+        return 'Enter a valid email domain (e.g. name@example.com)';
+    }
+    return undefined;
+}
+function scrollToFirstCheckoutFieldError() {
+    const firstErrorField = document.querySelector('.border-red-400, .border-red-500');
+    if (firstErrorField) {
+        firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+    else {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
 }
 function ContactInformationIcon({ className }) {
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 90 90", className: className, "aria-hidden": true, children: [_jsx("path", { fill: "#000", d: "M 81.353 50.79 L 63.143 36.799 l 18.302 -15.87 c 0.834 -0.723 0.924 -1.986 0.2 -2.82 c -0.723 -0.834 -1.985 -0.925 -2.82 -0.201 L 58.682 35.374 c -0.005 0.004 -0.009 0.008 -0.014 0.012 l -4.921 4.267 L 28.669 17.907 c -0.834 -0.724 -2.096 -0.633 -2.82 0.201 c -0.723 0.834 -0.634 2.097 0.201 2.82 l 18.44 15.99 l -12.442 9.912 c -0.864 0.688 -1.006 1.946 -0.318 2.81 c 0.395 0.496 0.977 0.754 1.565 0.754 c 0.436 0 0.876 -0.143 1.244 -0.435 l 13.024 -10.375 l 4.874 4.226 c 0.376 0.326 0.843 0.489 1.31 0.489 c 0.467 0 0.934 -0.163 1.31 -0.489 l 5.002 -4.337 l 18.858 14.488 c 0.363 0.279 0.792 0.414 1.217 0.414 c 0.599 0 1.193 -0.268 1.586 -0.781 C 82.393 52.718 82.229 51.463 81.353 50.79 z" }), _jsx("path", { fill: "#000", d: "M 84.004 10.598 H 23.49 c -3.306 0 -5.996 2.69 -5.996 5.996 v 1.616 c -1.125 -0.827 -2.636 -1.044 -3.982 -0.453 c -0.87 0.383 -2.006 0.88 -3.19 1.394 l -0.032 0.014 c -2.526 1.095 -4.385 1.88 -5.378 2.269 c -0.741 0.29 -1.362 0.72 -1.845 1.278 c -8.173 9.429 1.178 26.658 14.071 39.551 c 9.539 9.539 21.449 17.14 30.82 17.139 c 3.296 -0.001 6.278 -0.941 8.731 -3.066 c 0.557 -0.483 0.987 -1.104 1.278 -1.846 c 0.395 -1.009 1.171 -2.847 2.304 -5.456 c 0.507 -1.168 0.996 -2.286 1.373 -3.144 c 0.621 -1.413 0.355 -3.01 -0.578 -4.148 h 22.939 c 3.307 0 5.996 -2.69 5.996 -5.996 v -39.15 C 90 13.288 87.31 10.598 84.004 10.598 z M 56.603 67.439 c -1.152 2.656 -1.947 4.538 -2.36 5.592 c -0.05 0.127 -0.113 0.23 -0.173 0.282 c -7.118 6.171 -22.543 -2.315 -34.105 -13.877 C 8.402 47.872 -0.078 32.445 6.088 25.331 c 0.053 -0.061 0.156 -0.124 0.283 -0.174 c 1.063 -0.416 2.944 -1.21 5.592 -2.359 v 0 c 1.173 -0.509 2.296 -1 3.168 -1.373 l 7.266 12.256 l -4.505 8.393 c -0.843 1.57 -0.562 3.471 0.698 4.732 l 14.007 14.007 c 1.262 1.26 3.164 1.541 4.731 0.696 l 8.404 -4.505 l 12.245 7.267 l 0.006 0.01 C 57.603 65.144 57.11 66.268 56.603 67.439 z M 86.001 55.744 c 0 1.101 -0.896 1.997 -1.997 1.997 H 54.809 l -7.038 -4.177 c -1.201 -0.712 -2.711 -0.744 -3.942 -0.083 l -8.406 4.503 l -14.008 -14.02 l 4.505 -8.392 c 0.66 -1.231 0.628 -2.741 -0.084 -3.943 l -4.343 -7.319 v -7.716 c 0 -1.101 0.896 -1.997 1.997 -1.997 h 60.514 c 1.101 0 1.997 0.896 1.997 1.997 V 55.744 z" })] }));
@@ -108,6 +147,13 @@ function estimatedDeliveryText(method) {
     }
     return null;
 }
+function shouldShowOrderSummaryShippingLine(options) {
+    if (!options.shippingEnabled)
+        return false;
+    if (options.isCalculating)
+        return true;
+    return options.selectedMethod != null;
+}
 function readCachedCartForCheckout(slug) {
     if (typeof window === 'undefined')
         return [];
@@ -168,6 +214,7 @@ export function CheckoutPage({ storeConfig }) {
         : cart.length > 0
             ? cartTotal
             : cartForCheckout.reduce((total, item) => total + normalizePrice(item.price) * item.quantity, 0);
+    const { currency, mixed: hasMixedCartCurrencies } = useMemo(() => resolveCartChargeCurrency(checkoutItems, storeConfig.settings?.currency), [checkoutItems, storeConfig.settings?.currency]);
     const handleRemoveCheckoutItem = async (itemId) => {
         if (effectiveBuyNowItem && effectiveBuyNowItem.id === itemId) {
             clearBuyNowItem();
@@ -194,6 +241,33 @@ export function CheckoutPage({ storeConfig }) {
     const [freeShippingEnabled, setFreeShippingEnabled] = useState(false);
     const [feePreview, setFeePreview] = useState(null);
     const [isCalculatingFees, setIsCalculatingFees] = useState(false);
+    const [formData, setFormData] = useState({
+        email: '',
+        firstName: '',
+        lastName: '',
+        address: '',
+        city: '',
+        country: 'Nigeria',
+        postalCode: '',
+        phone: '',
+    });
+    const [errors, setErrors] = useState({});
+    const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
+    const [isCityDropdownOpen, setIsCityDropdownOpen] = useState(false);
+    const [citySearchQuery, setCitySearchQuery] = useState('');
+    const citySearchInputRef = useRef(null);
+    const cityOptions = useMemo(() => getCitiesByCountry(formData.country), [formData.country]);
+    const filteredCities = useMemo(() => {
+        const q = citySearchQuery.trim().toLowerCase();
+        if (!q)
+            return cityOptions;
+        return cityOptions.filter((city) => city.toLowerCase().includes(q));
+    }, [cityOptions, citySearchQuery]);
+    useEffect(() => {
+        if (isCityDropdownOpen) {
+            citySearchInputRef.current?.focus();
+        }
+    }, [isCityDropdownOpen]);
     const { checkout: initiateCheckout, isLoading: isPayazaLoading } = usePayazaCheckout({
         onSuccess: async (response) => {
             try {
@@ -514,19 +588,6 @@ export function CheckoutPage({ storeConfig }) {
             setIsCalculatingShipping(false);
         }
     };
-    // Determine currency from checkout items or store config (avoid switching to USD at checkout)
-    const getCurrency = () => {
-        const selected = selectedDisplayCurrency();
-        if (selected)
-            return selected;
-        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
@@ -547,6 +608,15 @@ export function CheckoutPage({ storeConfig }) {
     const fallbackTotal = Math.max(safeSubtotal, calculatedTotal);
     const total = feePreview?.totalPayable ?? fallbackTotal;
     const customerFeeLines = (feePreview?.customerLines ?? []).filter((line) => line.key !== 'shipping');
+    const shippingEnabledForCheckout = storeConfig.settings?.shippingEnabled !== false;
+    const showOrderSummaryShippingLine = shouldShowOrderSummaryShippingLine({
+        shippingEnabled: shippingEnabledForCheckout,
+        isCalculating: isCalculatingShipping,
+        selectedMethod: selectedShippingMethod,
+    });
+    const showShippingMethodSection = shippingEnabledForCheckout &&
+        Boolean(formData.city && formData.country) &&
+        (isCalculatingShipping || Boolean(shippingError) || shippingMethods.length > 0);
     useEffect(() => {
         if (!storeConfig.id || safeSubtotal <= 0 || !currency) {
             setFeePreview(null);
@@ -595,20 +665,6 @@ export function CheckoutPage({ storeConfig }) {
             effectiveBuyNowItem: !!effectiveBuyNowItem,
         });
     }
-    // Mock Form Data
-    const [formData, setFormData] = useState({
-        email: '',
-        firstName: '',
-        lastName: '',
-        address: '',
-        city: '',
-        country: 'Nigeria',
-        postalCode: '',
-        phone: ''
-    });
-    const [errors, setErrors] = useState({});
-    const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
-    const [isCityDropdownOpen, setIsCityDropdownOpen] = useState(false);
     // Debounced shipping calculation when address changes
     useEffect(() => {
         if (!formData.city || !formData.country || checkoutItems.length === 0) {
@@ -622,20 +678,22 @@ export function CheckoutPage({ storeConfig }) {
     }, [formData.city, formData.country, formData.postalCode, checkoutItems.length, subtotal, currency]);
     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';
+        const emailError = getCheckoutEmailValidationError(formData.email);
+        if (emailError)
+            newErrors.email = emailError;
+        const firstNameError = getCheckoutPersonNameValidationError(formData.firstName, 'first');
+        if (firstNameError)
+            newErrors.firstName = firstNameError;
+        const lastNameError = getCheckoutPersonNameValidationError(formData.lastName, 'last');
+        if (lastNameError)
+            newErrors.lastName = lastNameError;
         if (!formData.address)
             newErrors.address = 'Address is required';
         if (!formData.city)
             newErrors.city = 'City is required';
-        if (!formData.phone)
-            newErrors.phone = 'Phone is required';
+        const phoneError = getCheckoutPhoneValidationError(formData.phone, getCountryByName(formData.country)?.code);
+        if (phoneError)
+            newErrors.phone = phoneError;
         setErrors(newErrors);
         return Object.keys(newErrors).length === 0;
     };
@@ -680,27 +738,17 @@ export function CheckoutPage({ storeConfig }) {
         if (checkoutItems.length === 0) {
             return { isValid: false, error: 'No items to checkout' };
         }
-        // Validate form data
-        if (!formData.email) {
-            return { isValid: false, error: 'Email is required' };
+        if (hasMixedCartCurrencies) {
+            return {
+                isValid: false,
+                error: 'Your cart contains items in different currencies. Remove items until only one currency remains.',
+            };
         }
-        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 (hasMixedCartCurrencies) {
+            return {
+                isValid: false,
+                error: 'Your cart contains items in different currencies. Remove items until only one currency remains.',
+            };
         }
         // Validate currency availability
         const hasCurrency = storeConfig.settings?.currency || checkoutItems.some(item => item.product.currency);
@@ -710,10 +758,13 @@ export function CheckoutPage({ storeConfig }) {
         return { isValid: true };
     };
     const handlePayazaCheckout = async () => {
-        // Pre-flight validation
+        if (!validateForm()) {
+            scrollToFirstCheckoutFieldError();
+            return;
+        }
         const validation = validateCheckoutPreFlight();
         if (!validation.isValid) {
-            addToast(validation.error || 'Please complete all required fields', 'error');
+            addToast(validation.error || 'Please complete checkout requirements', 'error');
             return;
         }
         setLoading(true);
@@ -962,14 +1013,7 @@ export function CheckoutPage({ storeConfig }) {
     const handleDetailsSubmit = async (e) => {
         e.preventDefault();
         if (!validateForm()) {
-            addToast('Please fix the errors in the form.', 'error');
-            const firstErrorField = document.querySelector('.border-red-400, .border-red-500');
-            if (firstErrorField) {
-                firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-            else {
-                window.scrollTo({ top: 0, behavior: 'smooth' });
-            }
+            scrollToFirstCheckoutFieldError();
             return;
         }
         await handlePayazaCheckout();
@@ -986,24 +1030,102 @@ export function CheckoutPage({ storeConfig }) {
     if (!checkoutItems || checkoutItems.length === 0) {
         return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-10 px-4 sm:px-6 lg:px-8 font-sans", "data-checkout-ready": true, children: _jsx("div", { className: "container mx-auto max-w-6xl", children: _jsx("div", { className: "bg-white rounded-sm shadow-sm border border-gray-200/90 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-sm 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-sm px-8 py-6 h-auto font-semibold 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-8 sm:py-10 px-4 sm:px-6 lg:px-8 font-sans", "data-checkout-ready": true, children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsx("div", { className: "mb-8", children: _jsxs(Link, { href: `/${storeConfig.slug}/cart`, className: "group inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-900 transition-colors font-medium", children: [_jsx(ArrowLeft, { className: "w-4 h-4 transition-transform group-hover:-translate-x-0.5" }), "Back to Cart"] }) }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-6 lg:gap-8 lg:items-start", children: [_jsx("div", { className: "order-1 flex-1 min-w-0 lg:order-1", children: _jsxs("form", { id: "checkout-details-form", onSubmit: handleDetailsSubmit, className: "space-y-5 sm:space-y-6 animate-fade-in", children: [_jsxs("section", { className: sectionClass, children: [_jsxs("div", { className: sectionHeaderClass, children: [_jsx(ContactInformationIcon, { className: "h-6 w-6 shrink-0" }), _jsx("h2", { className: "text-lg font-semibold text-gray-900 tracking-tight", children: "Contact Information" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Email Address" }), _jsx("input", { type: "email", className: fieldClass(!!errors.email), 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", children: errors.email })] })] }), _jsxs("section", { className: sectionClass, children: [_jsxs("div", { className: sectionHeaderClass, children: [_jsx(ShippingAddressIcon, { className: "h-6 w-6 shrink-0" }), _jsx("h2", { className: "text-lg font-semibold text-gray-900 tracking-tight", 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: cn('grid grid-cols-1 md:grid-cols-2 gap-4', isAuthenticated && 'pt-1'), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "First Name" }), _jsx("input", { type: "text", className: fieldClass(!!errors.firstName), value: formData.firstName, onChange: e => setFormData({ ...formData, firstName: e.target.value }) }), errors.firstName && _jsx("p", { className: "text-red-500 text-xs", children: errors.firstName })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Last Name" }), _jsx("input", { type: "text", className: fieldClass(!!errors.lastName), value: formData.lastName, onChange: e => setFormData({ ...formData, lastName: e.target.value }) }), errors.lastName && _jsx("p", { className: "text-red-500 text-xs", children: errors.lastName })] }), _jsxs("div", { className: "space-y-1.5 md:col-span-2", children: [_jsx("label", { className: labelClass, children: "Address" }), _jsx("input", { type: "text", className: fieldClass(!!errors.address), placeholder: "123 Main St", value: formData.address, onChange: e => setFormData({ ...formData, address: e.target.value }) }), errors.address && _jsx("p", { className: "text-red-500 text-xs", children: errors.address })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Country" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsCountryDropdownOpen(!isCountryDropdownOpen), className: cn(fieldClass(!!errors.country), 'text-left flex items-center justify-between'), children: [_jsx("span", { className: "flex items-center gap-2", children: (() => {
+    return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-8 sm:py-10 px-4 sm:px-6 lg:px-8 font-sans", "data-checkout-ready": true, children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsx("div", { className: "mb-8", children: _jsxs(Link, { href: `/${storeConfig.slug}/cart`, className: "group inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-900 transition-colors font-medium", children: [_jsx(ArrowLeft, { className: "w-4 h-4 transition-transform group-hover:-translate-x-0.5" }), "Back to Cart"] }) }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-6 lg:gap-8 lg:items-start", children: [_jsx("div", { className: "order-1 flex-1 min-w-0 lg:order-1", children: _jsxs("form", { id: "checkout-details-form", onSubmit: handleDetailsSubmit, className: "space-y-5 sm:space-y-6 animate-fade-in", children: [_jsxs("section", { className: sectionClass, children: [_jsxs("div", { className: sectionHeaderClass, children: [_jsx(ContactInformationIcon, { className: "h-6 w-6 shrink-0" }), _jsx("h2", { className: "text-lg font-semibold text-gray-900 tracking-tight", children: "Contact Information" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Email Address" }), _jsx("input", { type: "email", autoComplete: "email", inputMode: "email", className: fieldClass(!!errors.email), placeholder: "john@example.com", value: formData.email, onChange: (e) => {
+                                                            const email = e.target.value;
+                                                            setFormData({ ...formData, email });
+                                                            if (errors.email) {
+                                                                setErrors((prev) => {
+                                                                    const next = { ...prev };
+                                                                    delete next.email;
+                                                                    return next;
+                                                                });
+                                                            }
+                                                        }, onBlur: () => {
+                                                            const emailError = getCheckoutEmailValidationError(formData.email);
+                                                            if (emailError) {
+                                                                setErrors((prev) => ({ ...prev, email: emailError }));
+                                                            }
+                                                        }, "aria-invalid": !!errors.email, "aria-describedby": errors.email ? 'checkout-email-error' : undefined }), errors.email && (_jsx("p", { id: "checkout-email-error", className: "text-red-500 text-xs", role: "alert", children: errors.email }))] })] }), _jsxs("section", { className: sectionClass, children: [_jsxs("div", { className: sectionHeaderClass, children: [_jsx(ShippingAddressIcon, { className: "h-6 w-6 shrink-0" }), _jsx("h2", { className: "text-lg font-semibold text-gray-900 tracking-tight", 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: cn('grid grid-cols-1 md:grid-cols-2 gap-4', isAuthenticated && 'pt-1'), children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "First Name" }), _jsx("input", { type: "text", autoComplete: "given-name", minLength: CHECKOUT_PERSON_NAME_MIN_LENGTH, maxLength: CHECKOUT_PERSON_NAME_MAX_LENGTH, className: fieldClass(!!errors.firstName), value: formData.firstName, onChange: (e) => {
+                                                                    setFormData({ ...formData, firstName: e.target.value });
+                                                                    if (errors.firstName) {
+                                                                        setErrors((prev) => {
+                                                                            const next = { ...prev };
+                                                                            delete next.firstName;
+                                                                            return next;
+                                                                        });
+                                                                    }
+                                                                }, onBlur: () => {
+                                                                    const err = getCheckoutPersonNameValidationError(formData.firstName, 'first');
+                                                                    if (err)
+                                                                        setErrors((prev) => ({ ...prev, firstName: err }));
+                                                                }, "aria-invalid": !!errors.firstName, "aria-describedby": errors.firstName ? 'checkout-first-name-error' : undefined }), errors.firstName && (_jsx("p", { id: "checkout-first-name-error", className: "text-red-500 text-xs", role: "alert", children: errors.firstName }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Last Name" }), _jsx("input", { type: "text", autoComplete: "family-name", minLength: CHECKOUT_PERSON_NAME_MIN_LENGTH, maxLength: CHECKOUT_PERSON_NAME_MAX_LENGTH, className: fieldClass(!!errors.lastName), value: formData.lastName, onChange: (e) => {
+                                                                    setFormData({ ...formData, lastName: e.target.value });
+                                                                    if (errors.lastName) {
+                                                                        setErrors((prev) => {
+                                                                            const next = { ...prev };
+                                                                            delete next.lastName;
+                                                                            return next;
+                                                                        });
+                                                                    }
+                                                                }, onBlur: () => {
+                                                                    const err = getCheckoutPersonNameValidationError(formData.lastName, 'last');
+                                                                    if (err)
+                                                                        setErrors((prev) => ({ ...prev, lastName: err }));
+                                                                }, "aria-invalid": !!errors.lastName, "aria-describedby": errors.lastName ? 'checkout-last-name-error' : undefined }), errors.lastName && (_jsx("p", { id: "checkout-last-name-error", className: "text-red-500 text-xs", role: "alert", children: errors.lastName }))] }), _jsxs("div", { className: "space-y-1.5 md:col-span-2", children: [_jsx("label", { className: labelClass, children: "Address" }), _jsx("input", { type: "text", className: fieldClass(!!errors.address), placeholder: "123 Main St", value: formData.address, onChange: e => setFormData({ ...formData, address: e.target.value }) }), errors.address && _jsx("p", { className: "text-red-500 text-xs", children: errors.address })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Country" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => setIsCountryDropdownOpen(!isCountryDropdownOpen), className: cn(fieldClass(!!errors.country), 'text-left flex items-center justify-between'), 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) }), _jsx("div", { className: "absolute z-20 w-full mt-1.5 bg-white border border-gray-200 rounded-sm shadow-lg max-h-64 overflow-y-auto", children: countries.map((country) => (_jsxs("button", { type: "button", onClick: () => {
                                                                                         setFormData({ ...formData, country: country.name, city: '' }); // Clear city when country changes
                                                                                         setIsCountryDropdownOpen(false);
                                                                                         setIsCityDropdownOpen(false);
+                                                                                        setCitySearchQuery('');
+                                                                                        if (formData.phone.trim()) {
+                                                                                            const phoneErr = getCheckoutPhoneValidationError(formData.phone, country.code);
+                                                                                            setErrors((prev) => {
+                                                                                                const next = { ...prev };
+                                                                                                if (phoneErr)
+                                                                                                    next.phone = phoneErr;
+                                                                                                else
+                                                                                                    delete next.phone;
+                                                                                                return next;
+                                                                                            });
+                                                                                        }
                                                                                     }, className: cn("w-full px-4 py-3 text-left flex items-center gap-3 hover:bg-gray-50 transition-colors", formData.country === country.name && "bg-gray-50 font-medium"), children: [_jsx("span", { className: "text-lg", children: country.flag }), _jsx("span", { children: country.name })] }, country.code))) })] }))] }), errors.country && _jsx("p", { className: "text-red-500 text-xs", children: errors.country })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "City" }), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => {
                                                                             if (formData.country) {
+                                                                                if (!isCityDropdownOpen)
+                                                                                    setCitySearchQuery('');
                                                                                 setIsCityDropdownOpen(!isCityDropdownOpen);
                                                                             }
                                                                             else {
                                                                                 addToast('Please select a country first', 'error');
                                                                             }
-                                                                        }, disabled: !formData.country, className: cn(fieldClass(!!errors.city), 'text-left flex items-center justify-between', !formData.country && 'bg-gray-50 text-gray-400 cursor-not-allowed'), children: [_jsx("span", { className: formData.city ? "text-gray-900" : "text-gray-400", children: formData.city || 'Select city' }), _jsx(ChevronDown, { className: cn("w-5 h-5 text-gray-400 transition-transform", isCityDropdownOpen && "transform rotate-180") })] }), isCityDropdownOpen && formData.country && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setIsCityDropdownOpen(false) }), _jsx("div", { className: "absolute z-20 w-full mt-1.5 bg-white border border-gray-200 rounded-sm shadow-lg max-h-64 overflow-y-auto", children: getCitiesByCountry(formData.country).length > 0 ? (getCitiesByCountry(formData.country).map((city) => (_jsx("button", { type: "button", onClick: () => {
-                                                                                        setFormData({ ...formData, city });
-                                                                                        setIsCityDropdownOpen(false);
-                                                                                    }, className: cn("w-full px-4 py-3 text-left hover:bg-gray-50 transition-colors", formData.city === city && "bg-gray-50 font-medium"), children: city }, city)))) : (_jsx("div", { className: "px-4 py-3 text-gray-500 text-sm", children: "No cities available for this country" })) })] }))] }), errors.city && _jsx("p", { className: "text-red-500 text-xs", children: errors.city })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Postal/Zip Code" }), _jsx("input", { type: "text", className: fieldClass(!!errors.postalCode), placeholder: "Optional", value: formData.postalCode, onChange: e => setFormData({ ...formData, postalCode: e.target.value }) }), errors.postalCode && _jsx("p", { className: "text-red-500 text-xs", children: errors.postalCode })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Phone" }), _jsx("input", { type: "tel", className: fieldClass(!!errors.phone), value: formData.phone, onChange: e => setFormData({ ...formData, phone: e.target.value }) }), errors.phone && _jsx("p", { className: "text-red-500 text-xs", children: errors.phone })] })] }), isAuthenticated && !selectedAddressId && (_jsxs("div", { className: "mt-5 pt-5 border-t border-gray-100 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-4 h-4 rounded border-gray-300 text-black focus:ring-gray-900 cursor-pointer" }), _jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors", children: "Save this address for future use" })] }), saveNewAddress && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Address Label (optional)" }), _jsx("input", { type: "text", value: addressLabel, onChange: (e) => setAddressLabel(e.target.value), placeholder: "e.g., Home, Work, Office", className: fieldClass() })] }))] }))] }), storeConfig.settings?.shippingEnabled !== false && (formData.city && formData.country) && (_jsxs("section", { className: sectionClass, children: [_jsxs("div", { className: sectionHeaderClass, children: [_jsx(ShippingMethodIcon, { className: "h-6 w-6 shrink-0" }), _jsx("h2", { className: "text-lg font-semibold text-gray-900 tracking-tight", children: "Shipping Method" })] }), (() => {
+                                                                        }, disabled: !formData.country, className: cn(fieldClass(!!errors.city), 'text-left flex items-center justify-between', !formData.country && 'bg-gray-50 text-gray-400 cursor-not-allowed'), children: [_jsx("span", { className: formData.city ? "text-gray-900" : "text-gray-400", children: formData.city || 'Select city' }), _jsx(ChevronDown, { className: cn("w-5 h-5 text-gray-400 transition-transform", isCityDropdownOpen && "transform rotate-180") })] }), isCityDropdownOpen && formData.country && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => {
+                                                                                    setIsCityDropdownOpen(false);
+                                                                                    setCitySearchQuery('');
+                                                                                } }), _jsxs("div", { className: "absolute z-20 w-full mt-1.5 bg-white border border-gray-200 rounded-sm shadow-lg overflow-hidden", children: [_jsx("div", { className: "p-2 border-b border-gray-100 bg-white", children: _jsx("input", { ref: citySearchInputRef, type: "search", value: citySearchQuery, onChange: (e) => setCitySearchQuery(e.target.value), placeholder: "Search city...", className: cn(fieldClass(false), 'h-10 text-sm'), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                                                                                                if (e.key === 'Escape') {
+                                                                                                    setIsCityDropdownOpen(false);
+                                                                                                    setCitySearchQuery('');
+                                                                                                }
+                                                                                            } }) }), _jsx("div", { className: "max-h-56 overflow-y-auto", children: cityOptions.length > 0 ? (filteredCities.length > 0 ? (filteredCities.map((city) => (_jsx("button", { type: "button", onClick: () => {
+                                                                                                setFormData({ ...formData, city });
+                                                                                                setIsCityDropdownOpen(false);
+                                                                                                setCitySearchQuery('');
+                                                                                            }, className: cn("w-full px-4 py-3 text-left hover:bg-gray-50 transition-colors", formData.city === city && "bg-gray-50 font-medium"), children: city }, city)))) : (_jsx("div", { className: "px-4 py-3 text-gray-500 text-sm", children: "No cities match your search" }))) : (_jsx("div", { className: "px-4 py-3 text-gray-500 text-sm", children: "No cities available for this country" })) })] })] }))] }), errors.city && _jsx("p", { className: "text-red-500 text-xs", children: errors.city })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Postal/Zip Code" }), _jsx("input", { type: "text", className: fieldClass(!!errors.postalCode), placeholder: "Optional", value: formData.postalCode, onChange: e => setFormData({ ...formData, postalCode: e.target.value }) }), errors.postalCode && _jsx("p", { className: "text-red-500 text-xs", children: errors.postalCode })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Phone" }), _jsx("input", { type: "tel", autoComplete: "tel", inputMode: "tel", className: fieldClass(!!errors.phone), value: formData.phone, onChange: (e) => {
+                                                                    const phone = sanitizeCheckoutPhoneInput(e.target.value);
+                                                                    setFormData({ ...formData, phone });
+                                                                    if (errors.phone) {
+                                                                        setErrors((prev) => {
+                                                                            const next = { ...prev };
+                                                                            delete next.phone;
+                                                                            return next;
+                                                                        });
+                                                                    }
+                                                                }, onBlur: () => {
+                                                                    const err = getCheckoutPhoneValidationError(formData.phone, getCountryByName(formData.country)?.code);
+                                                                    if (err)
+                                                                        setErrors((prev) => ({ ...prev, phone: err }));
+                                                                }, "aria-invalid": !!errors.phone, "aria-describedby": errors.phone ? 'checkout-phone-error' : undefined }), errors.phone && (_jsx("p", { id: "checkout-phone-error", className: "text-red-500 text-xs", role: "alert", children: errors.phone }))] })] }), isAuthenticated && !selectedAddressId && (_jsxs("div", { className: "mt-5 pt-5 border-t border-gray-100 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-4 h-4 rounded border-gray-300 text-black focus:ring-gray-900 cursor-pointer" }), _jsx("span", { className: "text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors", children: "Save this address for future use" })] }), saveNewAddress && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: labelClass, children: "Address Label (optional)" }), _jsx("input", { type: "text", value: addressLabel, onChange: (e) => setAddressLabel(e.target.value), placeholder: "e.g., Home, Work, Office", className: fieldClass() })] }))] }))] }), showShippingMethodSection && (_jsxs("section", { className: sectionClass, children: [_jsxs("div", { className: sectionHeaderClass, children: [_jsx(ShippingMethodIcon, { className: "h-6 w-6 shrink-0" }), _jsx("h2", { className: "text-lg font-semibold text-gray-900 tracking-tight", children: "Shipping Method" })] }), (() => {
                                                 const remainingForFreeShipping = freeShippingEnabled &&
                                                     freeShippingThreshold !== undefined &&
                                                     !freeShippingEligible
@@ -1024,10 +1146,10 @@ export function CheckoutPage({ storeConfig }) {
                                                                         ? 'FREE'
                                                                         : Number.isFinite(method.cost) && method.cost >= 0
                                                                             ? formatCurrency(method.cost, currency)
-                                                                            : 'Not available' }) })] }, method.code));
+                                                                            : null }) })] }, method.code));
                                                 }) })) : (_jsx("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-sm text-center", children: _jsx("p", { className: "text-sm text-gray-600", children: "No shipping methods available. Please check your address." }) }))] }))] }) }), _jsx("div", { className: "order-2 w-full flex-shrink-0 lg:order-2 lg:w-[380px] lg:sticky lg:top-6 lg:self-start", children: _jsxs("div", { className: "bg-white p-6 sm:p-8 rounded-sm border border-gray-200/90 shadow-sm", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 tracking-tight mb-5 pb-4 border-b border-gray-100", children: "Order Summary" }), _jsx("div", { className: "space-y-4 mb-6 max-h-[360px] overflow-y-auto scrollbar-hide", children: checkoutItems.map((item) => (_jsxs("div", { className: "flex gap-3.5 group", children: [_jsxs("div", { className: "w-16 h-16 sm:w-[72px] sm:h-[72px] bg-gray-100 rounded-sm 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-gray-900 text-white text-[10px] font-semibold px-1.5 py-0.5 rounded-sm z-10", children: ["x", item.quantity] })] }), _jsxs("div", { className: "flex-1 min-w-0 py-0.5", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("p", { className: "font-medium text-gray-900 text-sm line-clamp-2 leading-snug", children: item.product.name }), _jsx("button", { type: "button", onClick: () => void handleRemoveCheckoutItem(item.id), className: "shrink-0 rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-900", "aria-label": `Remove ${item.product.name} from cart`, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), item.variantName && _jsx("p", { className: "text-xs text-gray-500 mt-0.5", children: item.variantName }), _jsx("p", { className: "text-gray-600 text-sm font-medium mt-1", children: normalizePrice(item.price) <= 0
                                                                 ? 'Free'
-                                                                : formatCurrency(normalizePrice(item.price), item.currency || currency) })] })] }, item.id))) }), _jsxs("div", { className: "space-y-3 pt-5 border-t border-gray-100", 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-semibold", children: isFreeOrder ? 'Free' : formatCurrency(subtotal, currency) })] }), _jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsxs("span", { children: ["Shipping", selectedShippingMethod
+                                                                : formatCurrency(normalizePrice(item.price), currency) })] })] }, item.id))) }), _jsxs("div", { className: "space-y-3 pt-5 border-t border-gray-100", 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-semibold", children: isFreeOrder ? 'Free' : formatCurrency(subtotal, currency) })] }), showOrderSummaryShippingLine ? (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsxs("span", { children: ["Shipping", selectedShippingMethod
                                                                 ? ` (${shippingMethodSummaryLabel(selectedShippingMethod.name)})`
-                                                                : ''] }), _jsx("span", { className: "text-gray-900 font-semibold", children: isCalculatingShipping ? (_jsx("span", { className: "text-gray-400", children: "Calculating..." })) : !selectedShippingMethod ? (_jsx("span", { className: "text-gray-400", children: "Not available" })) : shipping === 0 && freeShippingEligible ? (_jsx("span", { className: "text-emerald-600", children: "Free" })) : shipping === 0 ? ('Free') : Number.isFinite(shipping) && shipping > 0 ? (formatCurrency(shipping, currency)) : (_jsx("span", { className: "text-gray-400", children: "Not available" })) })] }), customerFeeLines.map((line) => (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: line.label }), _jsx("span", { className: "text-gray-900 font-semibold", children: formatCurrency(line.amount, currency) })] }, line.key))), !feePreview && vatAmount > 0 && (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: vatLabel }), _jsx("span", { className: "text-gray-900 font-semibold", children: formatCurrency(vatAmount, currency) })] })), _jsxs("div", { className: "flex justify-between items-end pt-4 mt-1 border-t border-gray-100", children: [_jsx("span", { className: "text-sm font-semibold text-gray-900", children: "Total to pay" }), _jsx("span", { className: "text-2xl font-bold text-gray-900 tracking-tight", children: isCalculatingFees ? 'Calculating…' : isFreeOrder ? 'Free' : formatCurrency(total, currency) })] })] }), _jsx("div", { className: "mt-6 pt-5 border-t border-gray-100", children: _jsx(Button, { type: "submit", form: "checkout-details-form", size: "lg", className: "w-full h-12 text-base font-semibold rounded-sm shadow-none transition-all hover:opacity-95 active:scale-[0.99]", style: { backgroundColor: isFreeOrder ? '#059669' : primaryColor }, disabled: loading || isPayazaLoading, children: loading || isPayazaLoading ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" }), _jsx("span", { children: isFreeOrder ? 'Completing order...' : 'Processing Securely...' })] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [isFreeOrder ? _jsx(CheckCircle, { className: "w-5 h-5" }) : _jsx(Lock, { className: "w-5 h-5" }), _jsx("span", { children: isFreeOrder ? 'Complete Free Order' : 'Pay Now' })] })) }) })] }) })] })] }) }));
+                                                                : ''] }), _jsx("span", { className: "text-gray-900 font-semibold", children: isCalculatingShipping ? (_jsx("span", { className: "text-gray-400", children: "Calculating..." })) : shipping === 0 && freeShippingEligible ? (_jsx("span", { className: "text-emerald-600", children: "Free" })) : shipping === 0 ? ('Free') : (formatCurrency(shipping, currency)) })] })) : null, customerFeeLines.map((line) => (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: line.label }), _jsx("span", { className: "text-gray-900 font-semibold", children: formatCurrency(line.amount, currency) })] }, line.key))), !feePreview && vatAmount > 0 && (_jsxs("div", { className: "flex justify-between text-gray-500 font-medium text-sm", children: [_jsx("span", { children: vatLabel }), _jsx("span", { className: "text-gray-900 font-semibold", children: formatCurrency(vatAmount, currency) })] })), _jsxs("div", { className: "flex justify-between items-end pt-4 mt-1 border-t border-gray-100", children: [_jsx("span", { className: "text-sm font-semibold text-gray-900", children: "Total to pay" }), _jsx("span", { className: "text-2xl font-bold text-gray-900 tracking-tight", children: isCalculatingFees ? 'Calculating…' : isFreeOrder ? 'Free' : formatCurrency(total, currency) })] })] }), hasMixedCartCurrencies ? (_jsx("p", { className: "mt-4 text-sm text-red-600 font-medium", role: "alert", children: "Your cart mixes currencies. Remove items until everything uses the same currency to checkout." })) : null, _jsx("div", { className: "mt-6 pt-5 border-t border-gray-100", children: _jsx(Button, { type: "submit", form: "checkout-details-form", size: "lg", className: "w-full h-12 text-base font-semibold rounded-sm shadow-none transition-all hover:opacity-95 active:scale-[0.99]", style: { backgroundColor: isFreeOrder ? '#059669' : primaryColor }, disabled: loading || isPayazaLoading || hasMixedCartCurrencies, children: loading || isPayazaLoading ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" }), _jsx("span", { children: isFreeOrder ? 'Completing order...' : 'Processing Securely...' })] })) : (_jsxs("div", { className: "flex items-center gap-2", children: [isFreeOrder ? _jsx(CheckCircle, { className: "w-5 h-5" }) : _jsx(Lock, { className: "w-5 h-5" }), _jsx("span", { children: isFreeOrder ? 'Complete Free Order' : 'Pay Now' })] })) }) })] }) })] })] }) }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatStoreDisplayName } from '../../../lib/utils/index.js';
 import { RefreshCw, Store } from 'lucide-react';
 export function MaintenancePage({ storeConfig }) {
-    const primaryColor = storeConfig.branding?.primaryColor || '#1b0029';
+    const primaryColor = storeConfig.branding.primaryColor || '#1b0029';
     const storeDisplayName = formatStoreDisplayName(storeConfig.name);
     return (_jsxs("div", { className: "relative flex min-h-[100dvh] min-h-screen items-center justify-center overflow-hidden bg-[#f7f5f0] px-4 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))] pt-[max(1.5rem,env(safe-area-inset-top))] selection:bg-[#f7f5f0] selection:text-[#1b0029] sm:px-6 sm:py-10", style: { backgroundColor: '#f7f5f0' }, children: [_jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [_jsx("div", { className: "absolute right-[-20%] top-[-15%] h-[280px] w-[280px] rounded-full bg-[#f7f5f0] opacity-90 blur-[80px] sm:h-[480px] sm:w-[480px] sm:blur-[100px]" }), _jsx("div", { className: "absolute bottom-0 left-[-10%] h-[240px] w-[320px] bg-gradient-to-t from-[#d16253]/12 to-transparent sm:h-[480px] sm:w-[640px]" }), _jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(68,0,102,0.05),transparent_40%),radial-gradient(circle_at_80%_70%,rgba(209,98,83,0.08),transparent_45%)]" })] }), _jsxs("div", { className: "relative z-10 w-full max-w-md text-center sm:max-w-2xl lg:max-w-3xl", children: [_jsxs("div", { className: "mb-5 flex flex-col items-center gap-3 sm:mb-7 sm:gap-4", children: [_jsx("span", { className: "inline-flex items-center rounded-full border border-[#1b0029]/10 bg-white px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-[#1b0029] shadow-sm sm:text-xs sm:tracking-wide", children: "Coming Soon" }), _jsxs("div", { className: "relative flex h-20 w-20 items-center justify-center sm:h-24 sm:w-24 md:h-28 md:w-28", children: [_jsx("div", { className: "absolute inset-0 rounded-full opacity-20 blur-lg animate-pulse-slow sm:blur-xl", style: { backgroundColor: primaryColor } }), _jsx("div", { className: "relative flex h-full w-full rotate-2 transform items-center justify-center rounded-2xl border border-[#1b0029]/10 bg-white p-3 shadow-xl transition-transform duration-500 hover:rotate-0 sm:rounded-[28px] sm:p-3.5 md:rounded-[32px]", children: storeConfig.branding?.logo ? (_jsx("img", { src: storeConfig.branding.logo, alt: storeDisplayName, className: "max-h-full max-w-full object-contain" })) : (_jsx(Store, { className: "h-9 w-9 text-[#1b0029] sm:h-11 sm:w-11 md:h-12 md:w-12" })) })] })] }), _jsxs("div", { className: "animate-fade-in-up space-y-3 sm:space-y-4", children: [_jsxs("h1", { className: "text-[1.65rem] font-semibold leading-tight tracking-tight text-[#1b0029] sm:text-3xl md:text-4xl lg:text-5xl", children: ["Something good is", ' ', _jsx("span", { className: "font-normal italic text-[#d16253]", children: "on the way" }), "."] }), _jsxs("p", { className: "mx-auto max-w-lg text-sm font-medium leading-snug text-[#1b0029] sm:text-base md:text-lg", children: [storeDisplayName, " isn't open for shopping right now."] })] }), _jsx("div", { className: "mt-5 flex animate-fade-in-up justify-center sm:mt-7", style: { animationDelay: '0.1s' }, children: _jsxs("button", { type: "button", onClick: () => window.location.reload(), className: "group inline-flex h-9 items-center justify-center rounded-full bg-[#1b0029] px-4 text-xs font-semibold text-white shadow-md transition-all hover:bg-[#220033] hover:shadow-lg sm:h-10 sm:px-5 sm:text-sm", children: [_jsx(RefreshCw, { className: "mr-1.5 h-3.5 w-3.5 transition-transform group-hover:rotate-180 sm:h-4 sm:w-4" }), "Try Again"] }) })] })] }));
 }

package/dist/layouts/shared/wrappers/ClothingLayout.js

@@ -22,13 +22,13 @@ export function ClothingLayout({ children, storeConfig }) {
     const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
     const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
     const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
-    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding?.primaryColor);
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
     const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
     const cssVariables = {
-        '--store-primary': storeConfig.branding?.primaryColor,
-        '--store-secondary': storeConfig.branding?.secondaryColor || storeConfig.branding?.primaryColor,
-        '--store-accent': storeConfig.branding?.accentColor || storeConfig.branding?.primaryColor,
-        '--layout-clothing-primary': storeConfig.branding?.primaryColor,
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
+        '--layout-clothing-primary': storeConfig.branding.primaryColor,
         '--theme-bg-primary': bgPrimary,
         '--theme-bg-secondary': bgSecondary,
         '--theme-bg-dark': bgDark,

package/dist/layouts/shared/wrappers/ClothingMinimalLayout.js

@@ -24,14 +24,14 @@ export function ClothingMinimalLayout({ children, storeConfig }) {
     const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
     const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
     const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
-    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding?.primaryColor);
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
     const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
     // Build CSS variables for theme colors
     const cssVariables = {
         // Branding colors (existing)
-        '--store-primary': storeConfig.branding?.primaryColor,
-        '--store-secondary': storeConfig.branding?.secondaryColor || storeConfig.branding?.primaryColor,
-        '--store-accent': storeConfig.branding?.accentColor || storeConfig.branding?.primaryColor,
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
         // Theme colors
         '--theme-bg-primary': bgPrimary,
         '--theme-bg-secondary': bgSecondary,

package/dist/layouts/shared/wrappers/ElectronicsLayout.js

@@ -16,14 +16,14 @@ export function ElectronicsLayout({ children, storeConfig }) {
     const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
     const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
     const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
-    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding?.primaryColor);
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
     const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
     // Build CSS variables for theme colors
     const cssVariables = {
         // Branding colors (existing)
-        '--store-primary': storeConfig.branding?.primaryColor,
-        '--store-secondary': storeConfig.branding?.secondaryColor || storeConfig.branding?.primaryColor,
-        '--store-accent': storeConfig.branding?.accentColor || storeConfig.branding?.primaryColor,
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
         // Theme colors
         '--theme-bg-primary': bgPrimary,
         '--theme-bg-secondary': bgSecondary,

package/dist/layouts/shared/wrappers/FoodModernLayout.js

@@ -24,14 +24,14 @@ export function FoodModernLayout({ children, storeConfig }) {
     const textInverse = '#000000';
     const borderPrimary = 'rgba(255, 255, 255, 0.1)';
     const borderSecondary = 'rgba(255, 255, 255, 0.05)';
-    const accentHover = storeConfig.branding?.primaryColor || '#EA580C'; // orange-600
+    const accentHover = storeConfig.branding.primaryColor || '#EA580C'; // orange-600
     const accentFocus = '#C2410C'; // orange-700
     // Build CSS variables for theme colors
     const cssVariables = {
         // Branding colors (existing)
-        '--store-primary': storeConfig.branding?.primaryColor,
-        '--store-secondary': storeConfig.branding?.secondaryColor || storeConfig.branding?.primaryColor,
-        '--store-accent': storeConfig.branding?.accentColor || storeConfig.branding?.primaryColor,
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
         // Theme colors
         '--theme-bg-primary': bgPrimary,
         '--theme-bg-secondary': bgSecondary,

package/dist/layouts/shared/wrappers/MotivationalLayout.js

@@ -27,14 +27,14 @@ export function MotivationalLayout({ children, storeConfig }) {
     const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
     const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
     const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
-    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding?.primaryColor);
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
     const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
     // Build CSS variables for theme colors
     const cssVariables = {
         // Branding colors (existing)
-        '--store-primary': storeConfig.branding?.primaryColor,
-        '--store-secondary': storeConfig.branding?.secondaryColor || storeConfig.branding?.primaryColor,
-        '--store-accent': storeConfig.branding?.accentColor || storeConfig.branding?.primaryColor,
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
         // Theme colors
         '--theme-bg-primary': bgPrimary,
         '--theme-bg-secondary': bgSecondary,

package/dist/layouts/shared/wrappers/StandardLayout.js

@@ -21,14 +21,14 @@ export function StandardLayout({ children, storeConfig }) {
     const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
     const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
     const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
-    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding?.primaryColor);
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
     const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
     // Build CSS variables for theme colors
     const cssVariables = {
         // Branding colors (existing)
-        '--store-primary': storeConfig.branding?.primaryColor,
-        '--store-secondary': storeConfig.branding?.secondaryColor || storeConfig.branding?.primaryColor,
-        '--store-accent': storeConfig.branding?.accentColor || storeConfig.branding?.primaryColor,
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
         // Theme colors
         '--theme-bg-primary': bgPrimary,
         '--theme-bg-secondary': bgSecondary,