storefront-layouts-staging 1.0.0-staging.0

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

@@ -0,0 +1,121 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button.js';
+import { Trash2, ArrowRight, ShoppingBag, ArrowLeft, Lock, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { useStore } from '../../../lib/store-context.js';
+import { formatCurrency, normalizePrice, getUserFriendlyErrorMessage } from '../../../lib/utils/index.js';
+import { getCartLineStockInfo } from '../../../lib/inventory-utils.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { CartLineQuantityControl } from '../components/CartLineQuantityControl.js';
+import { useCheckoutFees } from '../../../hooks/use-checkout-fees.js';
+import { CheckoutFeeLines } from '../../../components/checkout/CheckoutFeeLines.js';
+import { CHECKOUT_UNAVAILABLE_MESSAGE } from '../../../lib/checkout-availability.js';
+export function CartPage({ storeConfig }) {
+    const primaryColor = storeConfig.branding.primaryColor;
+    const { cart, updateCartQuantity, removeFromCart, cartTotal, isCartHydrated, isCartRefreshing, refreshCart } = useStore();
+    const { addToast } = useToast();
+    const [updatingItemId, setUpdatingItemId] = useState(null);
+    const [removingItemId, setRemovingItemId] = useState(null);
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    useEffect(() => {
+        if (isClient && !isCartHydrated) {
+            void refreshCart?.().catch((error) => {
+                addToast(getUserFriendlyErrorMessage(error, 'Unable to load your cart. Please try again.'), 'error');
+            });
+        }
+    }, [isClient, isCartHydrated, refreshCart, addToast]);
+    // Helper function to determine cart currency consistently
+    const getCartCurrency = () => {
+        if (cart.length === 0) {
+            return storeConfig.settings?.currency || 'USD';
+        }
+        // Get currencies from cart items
+        const currencies = cart
+            .map(item => item.product?.currency)
+            .filter(Boolean);
+        if (currencies.length === 0) {
+            return storeConfig.settings?.currency || 'USD';
+        }
+        // If all items have the same currency, use it
+        const uniqueCurrencies = [...new Set(currencies)];
+        if (uniqueCurrencies.length === 1) {
+            return uniqueCurrencies[0];
+        }
+        // If mixed currencies, use the most common one
+        const currencyCounts = {};
+        currencies.forEach(currency => {
+            currencyCounts[currency] = (currencyCounts[currency] || 0) + 1;
+        });
+        const mostCommonCurrency = Object.entries(currencyCounts).reduce((a, b) => currencyCounts[a[0]] > currencyCounts[b[0]] ? a : b)[0];
+        return mostCommonCurrency;
+    };
+    const cartCurrency = getCartCurrency();
+    const checkoutDisabled = storeConfig.checkoutEnabled === false;
+    const handleQuantityUpdate = async (itemId, nextQuantity) => {
+        setUpdatingItemId(itemId);
+        try {
+            await updateCartQuantity(itemId, nextQuantity);
+        }
+        catch (error) {
+            addToast(error?.message || 'Unable to update quantity', 'error');
+        }
+        finally {
+            setUpdatingItemId(null);
+        }
+    };
+    const stockIssues = cart
+        .map((item) => getCartLineStockInfo(item.product, item.quantity).stockError)
+        .filter((message) => Boolean(message));
+    const hasStockIssues = stockIssues.length > 0;
+    const computedSubtotal = cart.reduce((sum, item) => sum + normalizePrice(item.price) * item.quantity, 0);
+    const subtotal = Number.isFinite(cartTotal) && cartTotal > 0 ? cartTotal : computedSubtotal;
+    const { feeBreakdown, loading: feesLoading, totalPayable, displayLines } = useCheckoutFees({
+        storeId: storeConfig.id,
+        subtotal,
+        currency: cartCurrency,
+        shippingCost: 0,
+        onError: (message) => addToast(message, 'error'),
+    });
+    const total = feeBreakdown?.totalPayable ?? totalPayable;
+    if (!isClient)
+        return null; // Avoid hydration mismatch
+    if (!isCartHydrated) {
+        return (_jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4", children: [_jsx(Loader2, { className: "w-10 h-10 text-gray-300 animate-spin mb-4" }), _jsx("p", { className: "text-gray-500 font-medium", children: "Loading your cart..." })] }));
+    }
+    if (cart.length === 0) {
+        return (_jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4", children: [_jsx("div", { className: "w-24 h-24 bg-white rounded-full shadow-lg flex items-center justify-center mb-6 animate-fade-in-up", children: _jsx(ShoppingBag, { className: "w-10 h-10 text-gray-300" }) }), _jsx("h1", { className: "text-3xl font-bold text-gray-900 mb-3 animate-fade-in-up", style: { animationDelay: '100ms' }, children: "Your cart is empty" }), _jsx("p", { className: "text-gray-500 mb-8 max-w-md text-center animate-fade-in-up", style: { animationDelay: '200ms' }, children: "Looks like you haven't added anything to your cart yet. Browse our products to find something you love." }), _jsx(Link, { href: `/${storeConfig.slug}`, className: "animate-fade-in-up", style: { animationDelay: '300ms' }, children: _jsx(Button, { size: "lg", className: "rounded-full px-8 h-12 text-base font-bold shadow-lg transition-transform hover:scale-105", style: { backgroundColor: primaryColor }, children: "Start Shopping" }) })] }));
+    }
+    return (_jsx("div", { className: "min-h-screen bg-gray-50/50 py-12 px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "mb-10 flex flex-col md:flex-row md:items-center justify-between gap-4", children: [_jsxs("div", { children: [_jsxs(Link, { href: `/${storeConfig.slug}`, className: "group mb-4 inline-flex items-center gap-2 text-gray-500 transition-colors hover:text-black font-medium", children: [_jsx("div", { className: "rounded-full border border-gray-200 bg-white p-2 transition-colors group-hover:border-black", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), "Continue Shopping"] }), _jsx("h1", { className: "text-3xl font-black text-gray-900 tracking-tight", children: "Shopping Cart" }), _jsxs("p", { className: "mt-1 text-sm text-gray-500", children: [cart.length, " items in your cart"] })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm font-medium bg-white px-4 py-2 rounded-full shadow-sm border border-gray-100", children: [_jsx("span", { className: "text-black", children: "Cart" }), _jsx("span", { className: "text-gray-300 mx-1", children: "/" }), _jsx("span", { className: "text-gray-400", children: "Checkout" }), _jsx("span", { className: "text-gray-300 mx-1", children: "/" }), _jsx("span", { className: "text-gray-400", children: "Payment" })] })] }), _jsx("p", { className: "mb-6 text-sm text-gray-500 rounded-2xl border border-gray-100 bg-gray-50 px-4 py-3", children: "Items in your cart are not reserved until you proceed to checkout and payment. Availability is confirmed at checkout." }), _jsxs("div", { className: "relative flex flex-col lg:flex-row gap-8 lg:gap-12", children: [isCartRefreshing && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-3xl bg-white/60 backdrop-blur-[1px]", children: _jsx(Loader2, { className: "w-8 h-8 text-gray-400 animate-spin" }) })), _jsx("div", { className: "flex-1 space-y-6", children: cart.map((item) => {
+                                const isItemBusy = updatingItemId === item.id || removingItemId === item.id;
+                                const lineStock = getCartLineStockInfo(item.product, item.quantity);
+                                return (_jsxs("div", { className: `bg-white rounded-3xl p-4 sm:p-6 border border-gray-100 shadow-sm flex flex-row gap-4 sm:gap-6 group transition-all hover:shadow-md hover:border-gray-200 ${isItemBusy ? 'opacity-70' : ''}`, "aria-busy": isItemBusy, children: [_jsx("div", { className: "w-24 h-24 sm:w-32 sm:h-32 aspect-square bg-gray-100 rounded-2xl overflow-hidden flex-shrink-0 relative", children: _jsx(Image, { src: item.product.images[0], alt: item.product.name, fill: true, className: "object-cover group-hover:scale-105 transition-transform duration-500", unoptimized: true }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-start justify-between gap-3 sm:gap-4", children: [_jsx("h3", { className: "min-w-0 flex-1 text-base font-bold leading-snug text-gray-900 sm:text-lg", children: item.product.name }), _jsx("p", { className: "shrink-0 text-right text-base font-black tabular-nums text-gray-900 sm:text-lg", children: formatCurrency(normalizePrice(item.price) * item.quantity, cartCurrency) })] }), _jsxs("div", { className: "flex flex-wrap gap-2 mt-2", children: [item.variantName && (_jsx("span", { className: "text-xs font-bold px-2 py-1 bg-gray-50 border border-gray-100 rounded-md text-gray-600", children: item.variantName })), lineStock.displayLabel && (_jsx("span", { className: `text-xs font-semibold px-2 py-1 rounded-md border ${lineStock.stockError
+                                                                        ? 'bg-red-50 border-red-100 text-red-700'
+                                                                        : lineStock.remainingToAdd === 0
+                                                                            ? 'bg-gray-50 border-gray-100 text-gray-600'
+                                                                            : 'bg-amber-50 border-amber-100 text-amber-800'}`, children: lineStock.displayLabel }))] })] }), _jsxs("div", { className: "flex justify-between items-end mt-6", children: [item.product.categoryId === 'subscriptions' || item.product.contentType ? (_jsx("div", { className: "text-xs font-bold text-gray-400 uppercase tracking-widest bg-gray-50 px-3 py-1.5 rounded-full border border-gray-100", children: "Digital Content" })) : (_jsx(CartLineQuantityControl, { quantity: item.quantity, product: item.product, disabled: removingItemId === item.id, isUpdating: updatingItemId === item.id, onError: (message) => addToast(message, 'error'), onUpdate: (nextQuantity) => handleQuantityUpdate(item.id, nextQuantity) })), _jsx("button", { onClick: async () => {
+                                                                setRemovingItemId(item.id);
+                                                                try {
+                                                                    await removeFromCart(item.id);
+                                                                }
+                                                                finally {
+                                                                    setRemovingItemId(null);
+                                                                }
+                                                            }, className: "text-gray-400 hover:text-red-500 transition-colors p-2 hover:bg-red-50 rounded-full disabled:opacity-50", "aria-label": "Remove item", disabled: isItemBusy, children: removingItemId === item.id ? (_jsx("div", { className: "w-5 h-5 border-2 border-red-400 border-t-transparent rounded-full animate-spin" })) : (_jsx(Trash2, { className: "w-5 h-5" })) })] })] })] }, item.id));
+                            }) }), _jsx("div", { className: "w-full lg:w-96 flex-shrink-0", children: _jsxs("div", { className: "bg-white rounded-3xl border border-gray-100 shadow-lg shadow-gray-200/50 p-8 sticky top-24", children: [_jsx("h2", { className: "text-2xl font-black text-gray-900 mb-8", children: "Summary" }), _jsxs("div", { className: "mb-8 space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-4 font-medium text-gray-600", children: [_jsx("span", { className: "shrink-0", children: "Subtotal" }), _jsx("span", { className: "shrink-0 text-right font-semibold tabular-nums text-gray-900", children: formatCurrency(subtotal, cartCurrency) })] }), feesLoading && (_jsxs("div", { className: "flex items-center justify-between gap-4 font-medium text-gray-600", children: [_jsx("span", { className: "shrink-0", children: "Fees" }), _jsx("span", { className: "shrink-0 text-right text-gray-400", children: "Calculating..." })] })), !feesLoading && (_jsx(CheckoutFeeLines, { lines: displayLines, currency: cartCurrency })), _jsxs("div", { className: "mt-4 flex items-end justify-between gap-4 border-t-2 border-gray-100 pt-6", children: [_jsx("span", { className: "shrink-0 text-lg font-bold text-gray-900", children: "Total" }), _jsx("span", { className: "shrink-0 text-right text-2xl font-black tracking-tight tabular-nums text-gray-900 sm:text-3xl", children: formatCurrency(total, cartCurrency) })] })] }), _jsxs("div", { className: "space-y-4", children: [hasStockIssues && (_jsx("p", { className: "text-sm text-red-600 font-medium", children: stockIssues[0] })), _jsx(Link, { href: hasStockIssues || checkoutDisabled ? '#' : `/${storeConfig.slug}/checkout`, onClick: (e) => {
+                                                    if (checkoutDisabled) {
+                                                        e.preventDefault();
+                                                        addToast(CHECKOUT_UNAVAILABLE_MESSAGE, 'error');
+                                                        return;
+                                                    }
+                                                    if (hasStockIssues) {
+                                                        e.preventDefault();
+                                                        addToast(stockIssues[0] || 'Some items in your cart are no longer available', 'error');
+                                                    }
+                                                }, children: _jsxs(Button, { className: "w-full h-14 rounded-2xl text-lg font-bold shadow-xl transition-all hover:scale-[1.02] active:scale-[0.98] hover:shadow-2xl disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100", style: { backgroundColor: primaryColor, color: 'white' }, disabled: hasStockIssues || checkoutDisabled, children: [checkoutDisabled ? 'Checkout unavailable' : 'Checkout', " ", _jsx(ArrowRight, { className: "ml-2 w-5 h-5" })] }) }), checkoutDisabled && (_jsx("p", { className: "text-sm text-center text-gray-500", children: CHECKOUT_UNAVAILABLE_MESSAGE })), _jsxs("div", { className: "flex items-center justify-center gap-2 text-xs font-medium text-gray-400", children: [_jsx(Lock, { className: "w-3 h-3" }), "Secure Encrypted Checkout"] })] })] }) })] })] }) }));
+}

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

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface CheckoutPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function CheckoutPage({ storeConfig }: CheckoutPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckoutPage.d.ts.map

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

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