storefront-layouts 1.0.3 → 1.0.4

package/dist/components/ui/button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils/index.js";
+import { cn } from "../../lib/utils";
 const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {

package/dist/components/ui/card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../../lib/utils/index.js";
+import { cn } from "../../lib/utils";
 function Card({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card", className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className), ...props }));
 }

package/dist/components/ui/category-tree.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
 import Link from 'next/link';
-import { buildCategoryTree } from '../../lib/utils/category-tree.js';
+import { buildCategoryTree } from '../../lib/utils/category-tree';
 import { ChevronDown, ChevronRight, Check } from 'lucide-react';
-import { cn, formatDisplayLabel } from '../../lib/utils/index.js';
+import { cn, formatDisplayLabel } from '../../lib/utils';
 function CategoryItem({ category, level, selectedCategoryIds, onCategoryToggle, mode, onCategorySelect, expandedCategories, onToggleExpand, storeSlug, linkBasePath, }) {
     const hasChildren = category.children && category.children.length > 0;
     const isExpanded = expandedCategories.has(category.id);

package/dist/components/ui/checkout-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkout-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkout-button.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,QAAqB,EACrB,OAAmB,EACnB,IAAW,GACZ,EAAE,mBAAmB,2CAsXrB"}
+{"version":3,"file":"checkout-button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/checkout-button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,SAAS,EACT,QAAqB,EACrB,OAAmB,EACnB,IAAW,GACZ,EAAE,mBAAmB,2CAqCrB"}

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

@@ -1,258 +1,18 @@
 '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 { Button } from '../../components/ui/button';
+import { useStore } from '../../lib/store-context';
+import { useToast } from '../../components/ui/toast';
 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';
+import { CHECKOUT_UNAVAILABLE_MESSAGE } from '../../lib/checkout-availability';
 export function CheckoutButton({ storeConfig, className, children = 'Checkout', variant = 'default', size = 'lg', }) {
-    const { cart, cartTotal, removeOrderItemsFromCart } = useStore();
+    const { cart } = 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) {
+    const checkoutDisabled = storeConfig.checkoutEnabled === false;
+    const isDisabled = cart.length === 0 || checkoutDisabled;
+    const handleCheckout = () => {
+        if (checkoutDisabled) {
             addToast(CHECKOUT_UNAVAILABLE_MESSAGE, 'error');
             return;
         }
@@ -260,39 +20,7 @@ export function CheckoutButton({ storeConfig, className, children = 'Checkout',
             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);
-                }
-            });
-        }
+        router.push(`/${storeConfig.slug}/checkout`);
     };
-    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 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleCheckout, disabled: isDisabled, variant: variant, size: size, className: className, title: checkoutDisabled ? CHECKOUT_UNAVAILABLE_MESSAGE : undefined, children: checkoutDisabled ? 'Checkout unavailable' : children }), checkoutDisabled && (_jsx("p", { className: "mt-2 text-sm text-muted-foreground text-center", children: CHECKOUT_UNAVAILABLE_MESSAGE }))] }));
 }

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

@@ -1,10 +1,10 @@
 '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 { Modal } from './modal';
+import { Button } from './button';
 import { User, Mail, Phone, ShoppingBag, ShieldCheck, ArrowRight } from 'lucide-react';
-import { cn } from '../../lib/utils/index.js';
+import { cn } from '../../lib/utils';
 export function GuestCheckoutModal({ isOpen, onClose, onSubmit, initialData, }) {
     const [formData, setFormData] = React.useState({
         firstName: initialData?.firstName || '',

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

@@ -1,7 +1,7 @@
 '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';
+import { cn } from '../../lib/utils';
+import { Skeleton } from './skeleton';
 export function ImageSkeleton({ className, aspectRatio = 'square' }) {
     const aspectRatioClasses = {
         square: 'aspect-square',

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

@@ -4,7 +4,9 @@ interface ImageWithFallbackProps extends React.ImgHTMLAttributes<HTMLImageElemen
     skeletonAspectRatio?: 'square' | '3/4' | '4/3' | '4/5' | '16/9' | 'auto';
     showSkeletonOnError?: boolean;
     lazy?: boolean;
+    /** Mark LCP / above-the-fold images so the browser prioritizes them. */
+    priority?: boolean;
 }
-export declare function ImageWithFallback({ src, alt, className, fallbackSrc, fallbackText, skeletonAspectRatio, showSkeletonOnError, lazy, ...props }: ImageWithFallbackProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImageWithFallback({ src, alt, className, fallbackSrc, fallbackText, skeletonAspectRatio, showSkeletonOnError, lazy, priority, ...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

@@ -1 +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"}
+{"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;IACf,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAKD,wBAAgB,iBAAiB,CAAC,EAChC,GAAG,EACH,GAAG,EACH,SAAS,EACT,WAAW,EACX,YAAY,EACZ,mBAA8B,EAC9B,mBAA0B,EAC1B,IAAY,EACZ,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,sBAAsB,2CA+GxB"}

package/dist/components/ui/image-with-fallback.js

@@ -1,165 +1,81 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
-import { cn } from '../../lib/utils/index.js';
-import { ImageSkeleton } from './image-skeleton.js';
-function extractSrcUrl(input) {
-    if (!input)
-        return undefined;
-    if (typeof input === 'string') {
-        const trimmed = input.trim();
-        return trimmed.length > 0 ? trimmed : undefined;
-    }
-    if (typeof input === 'object' && input !== null) {
-        const obj = input;
-        for (const key of ['url', 'src', 'image', 'imageUrl']) {
-            const value = obj[key];
-            if (typeof value === 'string' && value.trim())
-                return value.trim();
-        }
-    }
-    if (Array.isArray(input) && input.length > 0) {
-        return extractSrcUrl(input[0]);
-    }
-    return undefined;
-}
-/** Keeps `[data-payaza-*]` on the clickable wrapper so skeletons/overlays still resolve image targets */
-function partitionDataAttrs(props) {
-    const dataAttrs = {};
-    const imgProps = {};
-    for (const [key, val] of Object.entries(props)) {
-        if (key.startsWith('data-') && val != null && val !== '') {
-            dataAttrs[key] = typeof val === 'string' ? val : String(val);
-        }
-        else if (val !== undefined) {
-            imgProps[key] = val;
-        }
-    }
-    return { dataAttrs, imgProps };
-}
-export function ImageWithFallback({ src, alt, className, fallbackSrc, fallbackText, skeletonAspectRatio = 'square', showSkeletonOnError = true, lazy = false, ...props }) {
-    const { dataAttrs, imgProps } = partitionDataAttrs(props);
-    const initialSrc = extractSrcUrl(src) || extractSrcUrl(fallbackSrc);
-    const [isLoading, setIsLoading] = useState(!!initialSrc && !lazy);
+import { cn } from '../../lib/utils';
+import { ImageSkeleton } from './image-skeleton';
+const MAX_RETRIES = 2;
+const RETRY_DELAY_MS = 400;
+export function ImageWithFallback({ src, alt, className, fallbackSrc, fallbackText, skeletonAspectRatio = 'square', showSkeletonOnError = true, lazy = false, priority = false, ...props }) {
+    const initialSrc = typeof src === 'string' && src.trim() ? src : undefined;
     const [error, setError] = useState(false);
-    const [currentSrc, setCurrentSrc] = useState(lazy ? undefined : initialSrc);
-    const [isInView, setIsInView] = useState(!lazy);
+    const [currentSrc, setCurrentSrc] = useState(initialSrc);
+    const [reloadKey, setReloadKey] = useState(0);
     const prevSrcRef = useRef(src);
     const prevFallbackRef = useRef(fallbackSrc);
     const hasTriedFallback = useRef(false);
-    const imageRef = useRef(null);
-    const containerRef = useRef(null);
+    const retriesRef = useRef(0);
+    const retryTimerRef = useRef(null);
     const mountedRef = useRef(false);
     useEffect(() => {
         mountedRef.current = true;
         return () => {
             mountedRef.current = false;
+            if (retryTimerRef.current)
+                clearTimeout(retryTimerRef.current);
         };
     }, []);
     useEffect(() => {
-        if (!lazy || !containerRef.current || isInView)
+        const currentSrcValue = typeof src === 'string' && src.trim() ? src : undefined;
+        const hasChanged = currentSrcValue !== prevSrcRef.current || fallbackSrc !== prevFallbackRef.current;
+        if (!hasChanged)
             return;
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    setIsInView(true);
-                    const srcUrl = extractSrcUrl(src) || extractSrcUrl(fallbackSrc);
-                    if (srcUrl) {
-                        setCurrentSrc(srcUrl);
-                        setIsLoading(true);
-                    }
-                    observer.disconnect();
-                }
-            });
-        }, { rootMargin: '100px', threshold: 0.01 });
-        observer.observe(containerRef.current);
-        return () => observer.disconnect();
-    }, [lazy, isInView, src, fallbackSrc]);
-    useEffect(() => {
-        const currentSrcValue = extractSrcUrl(src);
-        const extractedFallback = extractSrcUrl(fallbackSrc);
-        const hasChanged = currentSrcValue !== extractSrcUrl(prevSrcRef.current) ||
-            extractedFallback !== extractSrcUrl(prevFallbackRef.current);
-        if (hasChanged) {
-            const newSrc = currentSrcValue || extractedFallback;
-            setIsLoading(!!newSrc && !lazy);
-            setCurrentSrc(lazy && !isInView ? undefined : newSrc);
-            setError(false);
-            hasTriedFallback.current = false;
-            prevSrcRef.current = src;
-            prevFallbackRef.current = fallbackSrc;
-            if (imageRef.current) {
-                imageRef.current.src = '';
-            }
-        }
-    }, [src, fallbackSrc, lazy, isInView]);
-    const checkAndUpdateImageState = (img, forceCheck = false) => {
-        if (!mountedRef.current || !img)
-            return false;
-        if (img.complete && img.naturalHeight !== 0) {
-            if (forceCheck || isLoading) {
-                setIsLoading(false);
-                setError(false);
-                return true;
-            }
-        }
-        return false;
-    };
-    useEffect(() => {
-        if (!mountedRef.current || !currentSrc || !isLoading)
-            return;
-        const syncLoadedState = () => {
-            if (imageRef.current) {
-                checkAndUpdateImageState(imageRef.current, true);
-            }
-        };
-        syncLoadedState();
-        const rafId = requestAnimationFrame(syncLoadedState);
-        const timeoutId = window.setTimeout(syncLoadedState, 100);
-        return () => {
-            cancelAnimationFrame(rafId);
-            window.clearTimeout(timeoutId);
-        };
-    }, [currentSrc, isLoading]);
-    const handleLoad = () => {
-        if (mountedRef.current) {
-            setIsLoading(false);
-            setError(false);
-        }
-    };
+        if (retryTimerRef.current)
+            clearTimeout(retryTimerRef.current);
+        const newSrc = currentSrcValue || (fallbackSrc && fallbackSrc.trim() ? fallbackSrc : undefined);
+        setCurrentSrc(newSrc);
+        setError(false);
+        setReloadKey(0);
+        hasTriedFallback.current = false;
+        retriesRef.current = 0;
+        prevSrcRef.current = currentSrcValue;
+        prevFallbackRef.current = fallbackSrc;
+    }, [src, fallbackSrc]);
     const handleError = () => {
-        const extractedFallback = extractSrcUrl(fallbackSrc);
-        if (extractedFallback && !hasTriedFallback.current && currentSrc !== extractedFallback) {
+        if (!mountedRef.current)
+            return;
+        if (fallbackSrc && fallbackSrc.trim() && !hasTriedFallback.current && currentSrc !== fallbackSrc) {
             hasTriedFallback.current = true;
-            setCurrentSrc(extractedFallback);
+            retriesRef.current = 0;
+            setCurrentSrc(fallbackSrc);
             setError(false);
-            setIsLoading(true);
             return;
         }
+        if (retriesRef.current < MAX_RETRIES && currentSrc) {
+            retriesRef.current += 1;
+            if (retryTimerRef.current)
+                clearTimeout(retryTimerRef.current);
+            retryTimerRef.current = setTimeout(() => {
+                if (!mountedRef.current)
+                    return;
+                setReloadKey((k) => k + 1);
+                setError(false);
+            }, RETRY_DELAY_MS * retriesRef.current);
+            return;
+        }
+        console.warn('[ImageWithFallback] Image failed to load:', {
+            currentSrc,
+            originalSrc: src,
+            fallbackSrc,
+            alt,
+        });
         setError(true);
-        setIsLoading(false);
     };
-    if (!currentSrc || (lazy && !isInView)) {
-        return (_jsx("div", { ref: containerRef, className: cn('relative w-full h-full min-h-[100px]', className), ...dataAttrs, children: _jsx(ImageSkeleton, { className: "absolute inset-0 h-full w-full", aspectRatio: skeletonAspectRatio }) }));
-    }
-    if (isLoading && currentSrc) {
-        return (_jsxs("div", { ref: containerRef, className: cn('relative w-full h-full', className), ...dataAttrs, children: [_jsx("img", { ref: (node) => {
-                        imageRef.current = node;
-                        if (node) {
-                            checkAndUpdateImageState(node, true);
-                        }
-                    }, src: currentSrc, alt: alt || 'Product image', className: "absolute inset-0 h-full w-full opacity-0", onLoad: handleLoad, onError: handleError, loading: "eager", decoding: "async", ...imgProps }), _jsx(ImageSkeleton, { className: "absolute inset-0 h-full w-full", aspectRatio: skeletonAspectRatio })] }));
+    if (!currentSrc) {
+        return _jsx(ImageSkeleton, { className: className, aspectRatio: skeletonAspectRatio });
     }
-    if (error) {
-        if (showSkeletonOnError && !fallbackText) {
-            return (_jsx("div", { ref: containerRef, className: cn('relative w-full h-full min-h-[100px]', className), ...dataAttrs, children: _jsx(ImageSkeleton, { className: "absolute inset-0 h-full w-full", aspectRatio: skeletonAspectRatio }) }));
-        }
-        return (_jsxs("div", { ref: containerRef, className: cn('flex flex-col items-center justify-center bg-gray-100 text-gray-400 border border-gray-200', className), style: { minHeight: '100px' }, ...dataAttrs, children: [_jsx("svg", { className: "w-1/4 h-1/4 max-w-[48px] max-h-[48px] opacity-20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", 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" }) }), fallbackText && (_jsx("span", { className: "text-[10px] uppercase tracking-widest font-bold mt-2 opacity-40", children: fallbackText }))] }));
+    const showErrorPlaceholder = error && (!showSkeletonOnError || !!fallbackText);
+    if (error && showSkeletonOnError && !fallbackText) {
+        return _jsx(ImageSkeleton, { className: className, aspectRatio: skeletonAspectRatio });
     }
-    return (_jsx("div", { ref: containerRef, className: "relative w-full h-full", ...dataAttrs, children: _jsx("img", { ref: (node) => {
-                imageRef.current = node;
-                if (node) {
-                    checkAndUpdateImageState(node, true);
-                }
-            }, src: currentSrc, alt: alt || 'Product image', className: cn('h-full w-full object-cover', className), onLoad: handleLoad, onError: handleError, loading: lazy ? 'lazy' : 'eager', decoding: "async", ...imgProps }) }));
+    return (_jsxs("div", { className: cn('relative', className), children: [!error && (_jsx("img", { src: currentSrc, alt: alt || 'Product image', className: cn('absolute inset-0 h-full w-full', className), onError: handleError, loading: lazy && !priority ? 'lazy' : 'eager', decoding: priority ? 'sync' : 'async', fetchPriority: priority ? 'high' : lazy ? 'low' : 'auto', ...props }, `${currentSrc}-${reloadKey}`)), showErrorPlaceholder && (_jsxs("div", { className: cn('flex flex-col items-center justify-center bg-gray-100 text-gray-400 border border-gray-200', className), style: { minHeight: '100px' }, children: [_jsx("svg", { className: "w-1/4 h-1/4 max-w-[48px] max-h-[48px] opacity-20", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", 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 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), fallbackText && (_jsx("span", { className: "text-[10px] uppercase tracking-widest font-bold mt-2 opacity-40", children: fallbackText }))] }))] }));
 }

package/dist/components/ui/input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../../lib/utils/index.js";
+import { cn } from "../../lib/utils";
 const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     return (_jsx("input", { type: type, className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
 });

package/dist/components/ui/limited-time-offer-badge.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils/index.js';
-import { formatLimitedOfferEndsAt, isActiveLimitedTimeOffer, } from '../../lib/limited-time-offer.js';
+import { cn } from '../../lib/utils';
+import { formatLimitedOfferEndsAt, isActiveLimitedTimeOffer, } from '../../lib/limited-time-offer';
 export function LimitedTimeOfferBadge({ product, className, compact = false, }) {
     if (!isActiveLimitedTimeOffer(product))
         return null;