storefront-layouts-staging 1.0.0-staging.0

package/dist/components/ui/checkout-button.js

@@ -0,0 +1,298 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/ui/button.js';
+import { usePayazaCheckout } from '../../hooks/use-payaza-checkout.js';
+import { generateCheckoutConfig } from '../../lib/payaza-checkout.js';
+import { useStore } from '../../lib/store-context.js';
+import { useToast } from '../../components/ui/toast.js';
+import { useState, useRef } from 'react';
+import { GuestCheckoutModal } from './guest-checkout-modal.js';
+import { getGuestUserInfo, saveGuestUserInfo, hasCompleteGuestInfo } from '../../lib/guest-user.js';
+import { useRouter } from 'next/navigation';
+import { checkoutService } from '../../lib/services/checkout.service.js';
+import { normalizePrice } from '../../lib/utils/index.js';
+import { paymentService, isPaymentConfirmed } from '../../lib/services/payment.service.js';
+import { useAuth } from '../../lib/auth-context.js';
+import { setOrderSuccessJustCompleted } from '../../lib/order-success-cart.js';
+import { getOrCreateIdempotencyKey } from '../../lib/utils/idempotency-key.js';
+import { CHECKOUT_UNAVAILABLE_MESSAGE } from '../../lib/checkout-availability.js';
+export function CheckoutButton({ storeConfig, className, children = 'Checkout', variant = 'default', size = 'lg', }) {
+    const { cart, cartTotal, removeOrderItemsFromCart } = useStore();
+    const { addToast } = useToast();
+    const { user, isAuthenticated } = useAuth();
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [showGuestModal, setShowGuestModal] = useState(false);
+    const [pendingCheckout, setPendingCheckout] = useState(null);
+    const router = useRouter();
+    const lastCustomerEmailRef = useRef('');
+    const checkoutIdempotencyKeyRef = useRef(null);
+    const redirectToOrderSuccess = (orderId, transactionRef, orderNumber, customerEmail) => {
+        setOrderSuccessJustCompleted(orderId);
+        const search = new URLSearchParams({ orderId, ref: transactionRef });
+        if (orderNumber)
+            search.set('orderNumber', orderNumber);
+        if (customerEmail)
+            search.set('email', customerEmail);
+        router.push(`/${storeConfig.slug}/order/success?${search.toString()}`);
+    };
+    const { checkout: initiateCheckout, isLoading } = usePayazaCheckout({
+        onSuccess: async (response) => {
+            try {
+                setIsProcessing(true);
+                const transactionRef = response.transactionRef || response.callbackData?.data?.transaction_reference;
+                const customerEmail = lastCustomerEmailRef.current || getGuestUserInfo()?.email || '';
+                if (!transactionRef) {
+                    addToast('Payment successful but no transaction reference. Please contact support.', 'info');
+                    setIsProcessing(false);
+                    return;
+                }
+                addToast('Verifying payment...', 'info');
+                try {
+                    const immediateVerification = await paymentService.verifyPayment(transactionRef, storeConfig.id);
+                    if (immediateVerification.verified && isPaymentConfirmed(immediateVerification.paymentStatus)) {
+                        try {
+                            if (removeOrderItemsFromCart) {
+                                await removeOrderItemsFromCart(cart.map((item) => ({
+                                    productId: item.productId,
+                                    variantId: item.variantId,
+                                    quantity: item.quantity,
+                                })));
+                            }
+                        }
+                        catch (cartError) {
+                            console.error('[CheckoutButton] Failed to clear cart after order:', cartError);
+                        }
+                        redirectToOrderSuccess(immediateVerification.orderId || transactionRef, transactionRef, immediateVerification.orderNumber, customerEmail);
+                        return;
+                    }
+                }
+                catch {
+                    // Continue with confirmation flow
+                }
+                if (response.callbackData) {
+                    const MAX_RETRIES = 3;
+                    const RETRY_DELAY = 1000;
+                    let confirmation;
+                    for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+                        try {
+                            confirmation = await paymentService.confirmPaymentFromCallback(response.callbackData);
+                            break;
+                        }
+                        catch (error) {
+                            console.error(`[CheckoutButton] Payment confirmation attempt ${attempt} failed:`, error);
+                            if (attempt < MAX_RETRIES) {
+                                await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY * attempt));
+                            }
+                        }
+                    }
+                    if (!confirmation) {
+                        const polledVerification = await paymentService.pollPaymentStatus(transactionRef, storeConfig.id, { maxAttempts: 3, intervalMs: 1000 });
+                        if (polledVerification?.verified && isPaymentConfirmed(polledVerification.paymentStatus)) {
+                            redirectToOrderSuccess(polledVerification.orderId || transactionRef, transactionRef, polledVerification.orderNumber, customerEmail);
+                            return;
+                        }
+                        addToast('Payment successful. Verifying transaction...', 'info');
+                        router.push(`/${storeConfig.slug}/payment/callback?reference=${transactionRef}&storeId=${storeConfig.id}`);
+                        return;
+                    }
+                    try {
+                        if (removeOrderItemsFromCart) {
+                            await removeOrderItemsFromCart(cart.map((item) => ({
+                                productId: item.productId,
+                                variantId: item.variantId,
+                                quantity: item.quantity,
+                            })));
+                        }
+                    }
+                    catch (cartError) {
+                        console.error('[CheckoutButton] Failed to clear cart after order:', cartError);
+                    }
+                    redirectToOrderSuccess(confirmation.orderId, transactionRef, confirmation.orderNumber, customerEmail);
+                    return;
+                }
+                router.push(`/${storeConfig.slug}/payment/callback?reference=${transactionRef}&storeId=${storeConfig.id}`);
+            }
+            catch (error) {
+                console.error('[CheckoutButton] Error processing payment callback:', error);
+                const transactionRef = response.transactionRef || response.callbackData?.data?.transaction_reference;
+                if (transactionRef) {
+                    addToast('Payment successful. Verifying transaction...', 'info');
+                    router.push(`/${storeConfig.slug}/payment/callback?reference=${transactionRef}&storeId=${storeConfig.id}`);
+                }
+                else {
+                    addToast('Payment successful but verification failed. Please contact support.', 'error');
+                    setIsProcessing(false);
+                }
+            }
+        },
+        onError: (error) => {
+            addToast(`Checkout error: ${error}`, 'error');
+            setIsProcessing(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');
+            setIsProcessing(false);
+        },
+    });
+    const payazaPublicKey = storeConfig.payment?.payazaPublicKey || process.env.NEXT_PUBLIC_PAYAZA_PUBLIC_KEY || '';
+    const proceedWithCheckout = async (userInfo) => {
+        if (storeConfig.checkoutEnabled === false) {
+            addToast(CHECKOUT_UNAVAILABLE_MESSAGE, 'error');
+            return;
+        }
+        if (cart.length === 0) {
+            addToast('Your cart is empty', 'error');
+            return;
+        }
+        setIsProcessing(true);
+        // DEMO MODE BYPASS
+        if (storeConfig.slug.startsWith('demo/')) {
+            setTimeout(() => {
+                router.push(`/${storeConfig.slug}/payment/callback?status=success&reference=DEMO-${Date.now()}`);
+            }, 1500);
+            return;
+        }
+        try {
+            // Use authenticated user info if available, otherwise use guest info
+            const customerEmail = isAuthenticated && user ? user.email : (userInfo?.email || '');
+            const customerFirstName = isAuthenticated && user ? user.firstName : (userInfo?.firstName || '');
+            const customerLastName = isAuthenticated && user ? user.lastName : (userInfo?.lastName || '');
+            const customerPhone = isAuthenticated && user ? (user.phone || '') : (userInfo?.phone || '');
+            lastCustomerEmailRef.current = customerEmail;
+            // Step 1: Create order via API before payment
+            const checkoutResponse = await checkoutService.processCheckout({
+                storeId: storeConfig.id,
+                items: cart.map(item => ({
+                    productId: item.productId,
+                    quantity: Number(item.quantity) || 1,
+                    price: normalizePrice(item.price),
+                    variationId: item.variantId && item.variantId.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i)
+                        ? item.variantId
+                        : undefined,
+                    variantId: item.variantId ?? undefined,
+                })),
+                customerInfo: {
+                    email: customerEmail,
+                    firstName: customerFirstName,
+                    lastName: customerLastName,
+                    phone: customerPhone,
+                },
+                shippingAddress: {
+                    firstName: customerFirstName,
+                    lastName: customerLastName,
+                    address1: isAuthenticated && user?.address ? user.address : 'Address to be provided',
+                    city: isAuthenticated && user?.city ? user.city : 'City',
+                    state: isAuthenticated && user?.state ? user.state : 'State',
+                    zipCode: isAuthenticated && user?.zipCode ? user.zipCode : '00000',
+                    country: isAuthenticated && user?.country ? user.country : 'Country',
+                    phone: customerPhone,
+                },
+                paymentMethod: 'payaza',
+                customerId: isAuthenticated && user ? user.id : undefined, // Pass customerId for authenticated users
+            }, {
+                idempotencyKey: getOrCreateIdempotencyKey(checkoutIdempotencyKeyRef),
+            });
+            // Backend currency-resolved key first, then store config / env fallback (same as CheckoutPage).
+            const resolvedPayazaKey = checkoutResponse.payazaPublicKey || payazaPublicKey;
+            if (!resolvedPayazaKey) {
+                addToast('Payment gateway not configured for this currency. Please contact support.', 'error');
+                setIsProcessing(false);
+                return;
+            }
+            // Step 2: Convert cart items to checkout format for Payaza (preserve currency so Payaza uses same currency as displayed)
+            const storeCurrency = storeConfig.settings?.currency;
+            const checkoutItems = cart.map(item => ({
+                product: {
+                    name: item.product.name,
+                    price: item.price,
+                    currency: item.product.currency || item.currency || storeCurrency,
+                },
+                quantity: item.quantity,
+                price: item.price,
+            }));
+            // Prefer cart/store currency over API response so checkout does not switch to USD
+            const displayCurrency = (cart[0]?.currency ?? cart[0]?.product?.currency) || storeCurrency || checkoutResponse.currency;
+            // Step 3: Generate Payaza checkout config with order details
+            const checkoutConfig = generateCheckoutConfig(checkoutItems, customerEmail, resolvedPayazaKey, {
+                firstName: customerFirstName,
+                lastName: customerLastName,
+                phone: customerPhone,
+                callbackUrl: `${typeof window !== 'undefined' ? window.location.origin : ''}/${storeConfig.slug}/payment/callback?storeId=${storeConfig.id}`,
+                currency: displayCurrency,
+                storeId: storeConfig.id,
+                orderId: checkoutResponse.orderId,
+                orderNumber: checkoutResponse.orderNumber,
+                merchantReference: checkoutResponse.merchantReference || checkoutResponse.orderNumber,
+                totalAmount: checkoutResponse.totalAmount,
+                connectionMode: checkoutResponse.payazaConnectionMode,
+                shippingAddress: {
+                    firstName: customerFirstName,
+                    lastName: customerLastName,
+                    address: isAuthenticated && user?.address ? user.address : 'Address to be provided',
+                    city: isAuthenticated && user?.city ? user.city : 'City',
+                    state: isAuthenticated && user?.state ? user.state : 'State',
+                    country: isAuthenticated && user?.country ? user.country : 'Country',
+                    zipCode: isAuthenticated && user?.zipCode ? user.zipCode : '00000',
+                },
+            });
+            // Step 4: Use transaction reference from order
+            checkoutConfig.reference = checkoutResponse.transactionReference;
+            await initiateCheckout(checkoutConfig);
+        }
+        catch (error) {
+            const err = error;
+            const isCollectionsDisabled = err?.response?.status === 403 &&
+                (err?.response?.data?.code === 'COLLECTIONS_DISABLED' ||
+                    err?.response?.data?.message?.toLowerCase().includes('not accepting payments'));
+            addToast(isCollectionsDisabled ? CHECKOUT_UNAVAILABLE_MESSAGE : 'Failed to initiate checkout. Please try again.', 'error');
+            console.error('Checkout error:', error);
+            setIsProcessing(false);
+        }
+    };
+    const handleCheckout = async () => {
+        if (storeConfig.checkoutEnabled === false) {
+            addToast(CHECKOUT_UNAVAILABLE_MESSAGE, 'error');
+            return;
+        }
+        if (cart.length === 0) {
+            addToast('Your cart is empty', 'error');
+            return;
+        }
+        // If user is authenticated, proceed directly with their info
+        if (isAuthenticated && user) {
+            await proceedWithCheckout();
+            return;
+        }
+        // For guest users, check if we have complete guest user info
+        const guestInfo = getGuestUserInfo();
+        if (hasCompleteGuestInfo() && guestInfo) {
+            // Proceed directly with guest info
+            await proceedWithCheckout(guestInfo);
+        }
+        else {
+            // Show modal to collect guest info
+            setShowGuestModal(true);
+            setPendingCheckout(() => () => {
+                const info = getGuestUserInfo();
+                if (info) {
+                    proceedWithCheckout(info);
+                }
+            });
+        }
+    };
+    const handleGuestInfoSubmit = (userInfo) => {
+        // Save guest info to localStorage
+        saveGuestUserInfo(userInfo);
+        setShowGuestModal(false);
+        // Proceed with checkout
+        proceedWithCheckout(userInfo);
+    };
+    const checkoutDisabled = storeConfig.checkoutEnabled === false;
+    const isDisabled = isLoading || isProcessing || cart.length === 0 || checkoutDisabled;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleCheckout, disabled: isDisabled, variant: variant, size: size, className: className, title: checkoutDisabled ? CHECKOUT_UNAVAILABLE_MESSAGE : undefined, children: isLoading || isProcessing ? 'Processing...' : checkoutDisabled ? 'Checkout unavailable' : children }), checkoutDisabled && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground text-center", children: CHECKOUT_UNAVAILABLE_MESSAGE })), _jsx(GuestCheckoutModal, { isOpen: showGuestModal, onClose: () => {
+                    setShowGuestModal(false);
+                    setPendingCheckout(null);
+                }, onSubmit: handleGuestInfoSubmit, initialData: getGuestUserInfo() || undefined })] }));
+}

package/dist/components/ui/dynamic-icon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LucideProps } from 'lucide-react';
+export declare const ICON_MAP: Record<string, React.FC<LucideProps>>;
+export declare const COMMON_ICON_NAMES: string[];
+interface DynamicIconProps extends LucideProps {
+    name: string;
+    fallback?: React.FC<LucideProps>;
+}
+export declare const DynamicIcon: React.FC<DynamicIconProps>;
+export {};
+//# sourceMappingURL=dynamic-icon.d.ts.map

package/dist/components/ui/dynamic-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-icon.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dynamic-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAkBL,WAAW,EAiDZ,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAkE1D,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAA0D,CAAC;AAEzF,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAYlD,CAAC"}

package/dist/components/ui/dynamic-icon.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Truck, RefreshCw, ShieldCheck, Heart, ShoppingCart, Star, Clock, MapPin, Mail, Phone, Tag, Package, CreditCard, Globe, Zap, Gift, HelpCircle, ArrowRight, Search, Menu, Plus, Minus, Trash2, ChevronLeft, ChevronRight, ChevronDown, ChevronUp, Check, RotateCcw, SlidersHorizontal, ArrowUpRight, Users, Award, Leaf, LayoutGrid, Utensils, ChefHat, Smartphone, Laptop, Headphones, Watch, Camera, Cpu, Battery, Wifi, Play, FileText, Lock, Quote, Youtube, Instagram, Twitter, Facebook, BookOpen, Sparkles, Flame, Wine, Coffee, CheckCircle, ThumbsUp, User, Ruler, Share2, Info, Calendar } from 'lucide-react';
+export const ICON_MAP = {
+    Truck,
+    RefreshCw,
+    ShieldCheck,
+    Shield: ShieldCheck,
+    Heart,
+    ShoppingCart,
+    Star,
+    Clock,
+    MapPin,
+    Mail,
+    Phone,
+    Tag,
+    Package,
+    CreditCard,
+    Globe,
+    Zap,
+    Gift,
+    ArrowRight,
+    Search,
+    Menu,
+    Plus,
+    Minus,
+    Trash2,
+    ChevronLeft,
+    ChevronRight,
+    ChevronDown,
+    ChevronUp,
+    Check,
+    RotateCcw,
+    SlidersHorizontal,
+    ArrowUpRight,
+    Users,
+    Award,
+    Leaf,
+    LayoutGrid,
+    Utensils,
+    ChefHat,
+    Smartphone,
+    Laptop,
+    Headphones,
+    Watch,
+    Camera,
+    Cpu,
+    Battery,
+    Wifi,
+    Play,
+    FileText,
+    Lock,
+    Quote,
+    Youtube,
+    Instagram,
+    Twitter,
+    Facebook,
+    BookOpen,
+    Sparkles,
+    Flame,
+    Wine,
+    Coffee,
+    CheckCircle,
+    ThumbsUp,
+    User,
+    Ruler,
+    Share2,
+    Info,
+    Calendar
+};
+export const COMMON_ICON_NAMES = Object.keys(ICON_MAP).filter(name => name !== 'Shield'); // Exclude aliases
+export const DynamicIcon = ({ name, fallback: Fallback = HelpCircle, ...props }) => {
+    const IconComponent = ICON_MAP[name];
+    if (!IconComponent) {
+        return _jsx(Fallback, { ...props });
+    }
+    return _jsx(IconComponent, { ...props });
+};

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

@@ -0,0 +1,19 @@
+interface GuestCheckoutModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (data: {
+        firstName: string;
+        lastName: string;
+        phone: string;
+        email: string;
+    }) => void;
+    initialData?: {
+        firstName?: string;
+        lastName?: string;
+        phone?: string;
+        email?: string;
+    };
+}
+export declare function GuestCheckoutModal({ isOpen, onClose, onSubmit, initialData, }: GuestCheckoutModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=guest-checkout-modal.d.ts.map

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

@@ -0,0 +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,2CAoRzB"}

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

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Modal } from './modal.js';
+import { Button } from './button.js';
+import { User, Mail, Phone, ShoppingBag, ShieldCheck, ArrowRight } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+export function GuestCheckoutModal({ isOpen, onClose, onSubmit, initialData, }) {
+    const [formData, setFormData] = React.useState({
+        firstName: initialData?.firstName || '',
+        lastName: initialData?.lastName || '',
+        phone: initialData?.phone || '',
+        email: initialData?.email || '',
+    });
+    const [errors, setErrors] = React.useState({});
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    React.useEffect(() => {
+        if (isOpen && initialData) {
+            setFormData({
+                firstName: initialData.firstName || '',
+                lastName: initialData.lastName || '',
+                phone: initialData.phone || '',
+                email: initialData.email || '',
+            });
+        }
+    }, [isOpen, initialData]);
+    const validate = () => {
+        const newErrors = {};
+        if (!formData.firstName.trim()) {
+            newErrors.firstName = 'First name is required';
+        }
+        if (!formData.lastName.trim()) {
+            newErrors.lastName = 'Last name is required';
+        }
+        if (!formData.phone.trim()) {
+            newErrors.phone = 'Phone number is required';
+        }
+        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';
+        }
+        else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())) {
+            newErrors.email = 'Please enter a valid email address';
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!validate()) {
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            await onSubmit({
+                firstName: formData.firstName.trim(),
+                lastName: formData.lastName.trim(),
+                phone: formData.phone.trim(),
+                email: formData.email.trim(),
+            });
+            onClose();
+        }
+        catch (error) {
+            console.error('Error submitting guest info:', error);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        // Clear error when user starts typing
+        if (errors[field]) {
+            setErrors(prev => {
+                const newErrors = { ...prev };
+                delete newErrors[field];
+                return newErrors;
+            });
+        }
+    };
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, className: "max-w-4xl p-0 overflow-hidden bg-white rounded-2xl shadow-2xl", children: _jsxs("div", { className: "flex flex-col md:flex-row min-h-[500px]", children: [_jsxs("div", { className: "hidden md:flex flex-col justify-between w-2/5 bg-gray-900 text-white p-8 relative overflow-hidden", children: [_jsx("div", { className: "absolute top-0 right-0 w-64 h-64 bg-gray-800 rounded-full blur-3xl opacity-20 -mr-32 -mt-32" }), _jsx("div", { className: "absolute bottom-0 left-0 w-64 h-64 bg-gray-800 rounded-full blur-3xl opacity-20 -ml-32 -mb-32" }), _jsxs("div", { className: "relative z-10", children: [_jsx("div", { className: "w-12 h-12 rounded-xl bg-white/10 backdrop-blur-sm flex items-center justify-center mb-6", children: _jsx(ShoppingBag, { className: "h-6 w-6 text-white" }) }), _jsx("h3", { className: "text-3xl font-bold mb-4 leading-tight", children: "Complete Your Order" }), _jsx("p", { className: "text-gray-300 text-sm leading-relaxed", children: "You're just a few steps away from your purchase. Enter your details to proceed with the secure checkout." })] }), _jsxs("div", { className: "relative z-10 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3 text-sm text-gray-300", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-white/10 flex items-center justify-center", children: _jsx(ShieldCheck, { className: "h-4 w-4" }) }), _jsx("span", { children: "Secure Payment Processing" })] }), _jsxs("div", { className: "flex items-center gap-3 text-sm text-gray-300", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-white/10 flex items-center justify-center", children: _jsx(User, { className: "h-4 w-4" }) }), _jsx("span", { children: "Guest Checkout Enabled" })] })] })] }), _jsxs("div", { className: "flex-1 p-6 md:p-8 bg-white", children: [_jsxs("div", { className: "md:hidden mb-6 text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-gray-900 mb-3", children: _jsx(ShoppingBag, { className: "h-6 w-6 text-white" }) }), _jsx("h3", { className: "text-xl font-bold text-gray-900", children: "Complete Order" })] }), _jsxs("form", { onSubmit: handleSubmit, className: "h-full flex flex-col", children: [_jsxs("div", { className: "flex-1 space-y-5", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "firstName", className: "block text-xs font-semibold uppercase tracking-wider text-gray-500", children: "First Name" }), _jsx("input", { id: "firstName", type: "text", value: formData.firstName, onChange: (e) => handleChange('firstName', e.target.value), className: cn("w-full px-4 py-3 bg-gray-50 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:bg-white transition-all text-sm", errors.firstName
+                                                                ? "border-red-300 focus:ring-red-200"
+                                                                : "border-gray-200 hover:border-gray-300"), placeholder: "John", disabled: isSubmitting }), errors.firstName && (_jsx("p", { className: "text-xs text-red-600", children: errors.firstName }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "lastName", className: "block text-xs font-semibold uppercase tracking-wider text-gray-500", children: "Last Name" }), _jsx("input", { id: "lastName", type: "text", value: formData.lastName, onChange: (e) => handleChange('lastName', e.target.value), className: cn("w-full px-4 py-3 bg-gray-50 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:bg-white transition-all text-sm", errors.lastName
+                                                                ? "border-red-300 focus:ring-red-200"
+                                                                : "border-gray-200 hover:border-gray-300"), placeholder: "Doe", disabled: isSubmitting }), errors.lastName && (_jsx("p", { className: "text-xs text-red-600", children: errors.lastName }))] })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "phone", className: "block text-xs font-semibold uppercase tracking-wider text-gray-500", children: "Phone Number" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: _jsx(Phone, { className: "h-4 w-4 text-gray-400" }) }), _jsx("input", { id: "phone", type: "tel", value: formData.phone, onChange: (e) => handleChange('phone', e.target.value), className: cn("w-full pl-10 pr-4 py-3 bg-gray-50 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:bg-white transition-all text-sm", errors.phone
+                                                                ? "border-red-300 focus:ring-red-200"
+                                                                : "border-gray-200 hover:border-gray-300"), placeholder: "+234 812 345 6789", disabled: isSubmitting })] }), errors.phone && (_jsx("p", { className: "text-xs text-red-600", children: errors.phone }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "email", className: "block text-xs font-semibold uppercase tracking-wider text-gray-500", children: "Email Address" }), _jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: _jsx(Mail, { className: "h-4 w-4 text-gray-400" }) }), _jsx("input", { id: "email", type: "email", value: formData.email, onChange: (e) => handleChange('email', e.target.value), className: cn("w-full pl-10 pr-4 py-3 bg-gray-50 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900 focus:bg-white transition-all text-sm", errors.email
+                                                                ? "border-red-300 focus:ring-red-200"
+                                                                : "border-gray-200 hover:border-gray-300"), placeholder: "john.doe@example.com", disabled: isSubmitting })] }), errors.email && (_jsx("p", { className: "text-xs text-red-600", children: errors.email }))] })] }), _jsxs("div", { className: "mt-8 pt-6 border-t border-gray-100 flex items-center justify-end gap-3", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: onClose, disabled: isSubmitting, className: "text-gray-500 hover:text-gray-900", children: "Cancel" }), _jsx(Button, { type: "submit", disabled: isSubmitting, className: "bg-gray-900 hover:bg-gray-800 text-white px-8 h-12 rounded-lg shadow-lg hover:shadow-xl transition-all flex items-center gap-2 group", children: isSubmitting ? ('Processing...') : (_jsxs(_Fragment, { children: ["Continue to Payment", _jsx(ArrowRight, { className: "h-4 w-4 group-hover:translate-x-1 transition-transform" })] })) })] })] })] })] }) }));
+}

package/dist/components/ui/image-skeleton.d.ts

@@ -0,0 +1,7 @@
+interface ImageSkeletonProps {
+    className?: string;
+    aspectRatio?: 'square' | '3/4' | '4/3' | '4/5' | '16/9' | 'auto';
+}
+export declare function ImageSkeleton({ className, aspectRatio }: ImageSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=image-skeleton.d.ts.map

package/dist/components/ui/image-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/ui/image-skeleton.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CAClE;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,WAAsB,EAAE,EAAE,kBAAkB,2CA+BtF"}

package/dist/components/ui/image-skeleton.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils/index.js';
+import { Skeleton } from './skeleton.js';
+export function ImageSkeleton({ className, aspectRatio = 'square' }) {
+    const aspectRatioClasses = {
+        square: 'aspect-square',
+        '3/4': 'aspect-[3/4]',
+        '4/3': 'aspect-[4/3]',
+        '4/5': 'aspect-[4/5]',
+        '16/9': 'aspect-video',
+        auto: '',
+    };
+    return (_jsxs("div", { className: cn('relative overflow-hidden bg-gray-100', aspectRatioClasses[aspectRatio], className), children: [_jsx(Skeleton, { className: "absolute inset-0 w-full h-full" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center z-10", children: _jsx("svg", { className: "w-12 h-12 text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) })] }));
+}

package/dist/components/ui/image-with-fallback.d.ts

@@ -0,0 +1,10 @@
+interface ImageWithFallbackProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    fallbackSrc?: string;
+    fallbackText?: string;
+    skeletonAspectRatio?: 'square' | '3/4' | '4/3' | '4/5' | '16/9' | 'auto';
+    showSkeletonOnError?: boolean;
+    lazy?: boolean;
+}
+export declare function ImageWithFallback({ src, alt, className, fallbackSrc, fallbackText, skeletonAspectRatio, showSkeletonOnError, lazy, ...props }: ImageWithFallbackProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=image-with-fallback.d.ts.map

package/dist/components/ui/image-with-fallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-with-fallback.d.ts","sourceRoot":"","sources":["../../../src/components/ui/image-with-fallback.tsx"],"names":[],"mappings":"AAMA,UAAU,sBAAuB,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAChF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IACzE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAqCD,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,EACX,YAAY,EACZ,mBAA8B,EAC9B,mBAA0B,EAC1B,IAAY,EACZ,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAsNxB"}