storefront-layouts 1.0.1 → 1.0.4

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

@@ -3,23 +3,27 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Link from 'next/link';
 import Image from 'next/image';
 import { useSearchParams, useRouter } from 'next/navigation';
-import { Store, User as UserIcon, Package, Settings, LogOut, Heart, Bell, Edit2, Check, Trash2, Lock, Calendar, Clock, Loader2, X, Camera, Truck } from 'lucide-react';
-import { Button } from '../../../components/ui/button.js';
-import { AvatarImage } from '../../../components/ui/avatar-image.js';
+import { Store, User as UserIcon, Package, Settings, LogOut, Heart, Bell, Edit2, Check, Trash2, Lock, Calendar, Clock, Loader2, X, Camera, Truck, BookOpen, Play, ArrowRight, CheckCircle2 } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
+import { motion } from 'framer-motion';
+import { AvatarImage } from '../../../components/ui/avatar-image';
 import { useState, useEffect } from 'react';
-import { useAuth } from '../../../lib/auth-context.js';
-import { getStoreHomeUrl } from '../../../lib/layout-route-utils.js';
-import { cn, formatCurrency } from '../../../lib/utils/index.js';
+import { useAuth } from '../../../lib/auth-context';
+import { cn, formatCurrency } from '../../../lib/utils';
 // Note: orderService and wishlistService removed - these pages are shared and not editable in the editor
 // Using StoreContext for wishlist functionality instead
-import { bookingService } from '../../../lib/services/booking.service.js';
-import { customerService } from '../../../lib/services/customer.service.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { useLoading } from '../../../lib/loading-context.js';
-import { formatDateSafe, getCurrentYear } from '../../../utils/date.js';
+import { bookingService } from '../../../lib/services/booking.service';
+import { customerService } from '../../../lib/services/customer.service';
+import { useStore } from '../../../lib/store-context';
+import { productService } from '../../../lib/services/product.service';
+import { transformProductToStoreProduct } from '../../../lib/store-config-utils';
+import { useToast } from '../../../components/ui/toast';
+import { useLoading } from '../../../lib/loading-context';
+import { MentorshipProgress } from '../../../components/learning/MentorshipProgress';
+import { CertificateCard } from '../../../components/learning/CertificateTemplates';
+import { formatDateSafe, getCurrentYear } from '../../../utils/date';
 export function AccountPage({ storeConfig }) {
-    const { user, isAuthenticated, isLoading, logout, updateUserState, openLogin } = useAuth();
+    const { user, isAuthenticated, isLoading, logout, updateUserState } = useAuth();
     const { wishlist, toggleWishlist } = useStore();
     const searchParams = useSearchParams();
     const router = useRouter();
@@ -38,13 +42,13 @@ export function AccountPage({ storeConfig }) {
             setActiveTab(tabParam);
         }
     }, [tabParam, activeTab]);
-    // Open in-store login sheet when not authenticated
+    // Redirect if not logged in
     useEffect(() => {
         if (!isLoading && !isAuthenticated) {
             const returnUrl = storeConfig ? `/${storeConfig.slug}/account` : '/account';
-            openLogin({ callbackUrl: returnUrl });
+            router.push(`/auth/login?callbackUrl=${encodeURIComponent(returnUrl)}`);
         }
-    }, [isLoading, isAuthenticated, openLogin, storeConfig]);
+    }, [isLoading, isAuthenticated, router, storeConfig]);
     const [isChangingPassword, setIsChangingPassword] = useState(false);
     const [isSavingProfile, setIsSavingProfile] = useState(false);
     const [avatarPreview, setAvatarPreview] = useState(null);
@@ -130,14 +134,20 @@ export function AccountPage({ storeConfig }) {
                     }
                     // Use wishlist from StoreContext (localStorage-based)
                     // Note: wishlistService removed - using StoreContext instead
-                    if (wishlist && storeConfig?.products) {
-                        const items = wishlist
-                            .map(productId => {
-                            const product = storeConfig.products?.find(p => p.id === productId);
-                            return product ? { id: productId, productId, product } : null;
-                        })
-                            .filter((item) => item !== null);
-                        setWishlistItems(items);
+                    if (wishlist && storeConfig) {
+                        const items = await Promise.all(wishlist.map(async (productId) => {
+                            const cachedProduct = storeConfig.products?.find((product) => product.id === productId);
+                            try {
+                                const product = cachedProduct ||
+                                    transformProductToStoreProduct(await productService.getProductById(productId));
+                                return { id: productId, productId, product };
+                            }
+                            catch {
+                                return null;
+                            }
+                        }));
+                        const resolvedItems = items.filter((item) => item !== null);
+                        setWishlistItems(resolvedItems);
                     }
                     else {
                         setWishlistItems([]);
@@ -393,13 +403,14 @@ export function AccountPage({ storeConfig }) {
         return (_jsx("div", { className: "min-h-screen flex items-center justify-center bg-gray-50", children: _jsx(Loader2, { className: "w-8 h-8 animate-spin text-gray-400" }) }));
     }
     if (!isAuthenticated) {
-        return null; // Login sheet opened via useEffect
+        return null; // Will redirect via useEffect
     }
     return (_jsxs("div", { className: "min-h-screen bg-gray-50", children: [!storeConfig && (_jsx("header", { className: "bg-white border-b border-gray-200 sticky top-0 z-50", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex items-center justify-between h-16", children: [_jsxs(Link, { href: "/", className: "flex items-center gap-2 group", children: [_jsx("div", { className: "w-8 h-8 bg-black rounded-lg flex items-center justify-center text-white", children: _jsx(Store, { className: "w-5 h-5" }) }), _jsx("span", { className: "text-xl font-bold tracking-tight text-gray-900", children: "Storefront" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("span", { className: "text-sm font-medium text-gray-700 hidden sm:block", children: [user?.firstName, " ", user?.lastName] }), _jsx("div", { className: "w-9 h-9 rounded-full bg-gray-200 overflow-hidden ring-2 ring-gray-100", children: _jsx(AvatarImage, { src: user?.avatar, alt: "Profile", size: 36, className: "rounded-full" }) })] })] }) }) })), _jsx("div", { className: cn("container mx-auto px-4 sm:px-6 lg:px-8 py-8", storeConfig ? "pt-24" : ""), children: _jsxs("div", { className: "flex flex-col lg:flex-row gap-8", children: [_jsx("div", { className: "w-full lg:w-72 flex-shrink-0", children: _jsxs("div", { className: "bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sticky top-24", children: [_jsxs("div", { className: "mb-6 px-4 pt-4 text-center", children: [_jsx("div", { className: "w-20 h-20 mx-auto rounded-full bg-gray-100 mb-3 overflow-hidden", children: _jsx(AvatarImage, { src: user?.avatar, alt: "Profile", size: 80, className: "rounded-full" }) }), _jsxs("h3", { className: "font-bold text-gray-900", children: [user?.firstName, " ", user?.lastName] }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Member since ", user?.createdAt
                                                         ? new Date(user.createdAt).getFullYear()
                                                         : getCurrentYear()] })] }), _jsxs("nav", { className: "space-y-1", children: [[
                                                 { id: 'profile', label: 'My Profile', icon: UserIcon },
                                                 { id: 'orders', label: 'Orders', icon: Package },
+                                                ...(storeConfig?.layout === 'motivational-speaker' ? [{ id: 'learning', label: 'My Learning', icon: BookOpen }] : []),
                                                 { id: 'bookings', label: 'My Bookings', icon: Calendar },
                                                 { id: 'wishlist', label: 'Wishlist', icon: Heart },
                                                 // { id: 'payment', label: 'Payment Methods', icon: CreditCard }, // Hidden for now
@@ -407,7 +418,7 @@ export function AccountPage({ storeConfig }) {
                                                 { id: 'settings', label: 'Settings', icon: Settings },
                                             ].map((item) => (_jsxs("button", { onClick: () => setActiveTab(item.id), className: `w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium transition-colors ${activeTab === item.id
                                                     ? 'bg-black text-white shadow-md shadow-black/10'
-                                                    : 'text-gray-600 hover:bg-gray-50'}`, style: activeTab === item.id && storeConfig ? { backgroundColor: primaryColor } : {}, children: [_jsx(item.icon, { className: "w-4.5 h-4.5" }), item.label] }, item.id))), _jsx("div", { className: "pt-4 mt-4 border-t border-gray-100", children: _jsxs("button", { onClick: () => logout(storeConfig?.slug ? getStoreHomeUrl(storeConfig.slug) : '/'), className: "w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-red-600 hover:bg-red-50 transition-colors", children: [_jsx(LogOut, { className: "w-4.5 h-4.5" }), "Sign Out"] }) })] })] }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "bg-white rounded-2xl shadow-sm border border-gray-100 min-h-[600px] p-6 sm:p-8", children: [activeTab === 'profile' && (_jsxs("div", { className: "space-y-8 animate-fade-in", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "My Profile" }), !isEditingProfile && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsEditingProfile(true), className: "gap-2", children: [_jsx(Edit2, { className: "w-4 h-4" }), " Edit Profile"] }))] }), _jsxs("form", { onSubmit: handleProfileSave, className: "space-y-8", children: [_jsxs("div", { className: "flex items-center gap-6 pb-6 border-b border-gray-100", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-24 h-24 rounded-full bg-gray-100 overflow-hidden border-2 border-gray-200", children: avatarPreview ? (_jsx(AvatarImage, { src: avatarPreview, alt: "Profile", size: 96, className: "rounded-full" })) : (_jsx(AvatarImage, { src: user?.avatar, alt: "Profile", size: 96, className: "rounded-full" })) }), isEditingProfile && (_jsx("div", { className: "absolute bottom-0 right-0", children: _jsxs("label", { className: "cursor-pointer", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-black flex items-center justify-center text-white hover:bg-gray-800 transition-colors shadow-lg", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: _jsx(Camera, { className: "w-4 h-4" }) }), _jsx("input", { type: "file", accept: "image/jpeg,image/jpg,image/png,image/gif,image/webp", onChange: handleAvatarChange, className: "hidden" })] }) }))] }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "font-bold text-gray-900 mb-1", children: "Profile Photo" }), _jsx("p", { className: "text-sm text-gray-500 mb-3", children: "Upload a new profile picture. JPG, PNG, GIF, or WebP. Max size 5MB." }), isEditingProfile && avatarFile && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleRemoveAvatar, className: "gap-2 text-red-600 hover:text-red-700 hover:bg-red-50", children: [_jsx(X, { className: "w-4 h-4" }), " Remove Photo"] }))] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-bold text-gray-900 mb-4", children: "Personal Information" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-sm font-semibold text-gray-700", children: ["First Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: profileData.firstName || '', onChange: (e) => setProfileData({ ...profileData, firstName: e.target.value }), disabled: !isEditingProfile, readOnly: !isEditingProfile, required: true, className: cn("w-full px-4 py-2.5 rounded-lg border border-gray-200 focus:outline-none transition-all", isEditingProfile
+                                                    : 'text-gray-600 hover:bg-gray-50'}`, style: activeTab === item.id && storeConfig ? { backgroundColor: primaryColor } : {}, children: [_jsx(item.icon, { className: "w-4.5 h-4.5" }), item.label] }, item.id))), _jsx("div", { className: "pt-4 mt-4 border-t border-gray-100", children: _jsxs("button", { onClick: logout, className: "w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-red-600 hover:bg-red-50 transition-colors", children: [_jsx(LogOut, { className: "w-4.5 h-4.5" }), "Sign Out"] }) })] })] }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsxs("div", { className: "bg-white rounded-2xl shadow-sm border border-gray-100 min-h-[600px] p-6 sm:p-8", children: [activeTab === 'profile' && (_jsxs("div", { className: "space-y-8 animate-fade-in", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "My Profile" }), !isEditingProfile && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsEditingProfile(true), className: "gap-2", children: [_jsx(Edit2, { className: "w-4 h-4" }), " Edit Profile"] }))] }), _jsxs("form", { onSubmit: handleProfileSave, className: "space-y-8", children: [_jsxs("div", { className: "flex items-center gap-6 pb-6 border-b border-gray-100", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-24 h-24 rounded-full bg-gray-100 overflow-hidden border-2 border-gray-200", children: avatarPreview ? (_jsx(AvatarImage, { src: avatarPreview, alt: "Profile", size: 96, className: "rounded-full" })) : (_jsx(AvatarImage, { src: user?.avatar, alt: "Profile", size: 96, className: "rounded-full" })) }), isEditingProfile && (_jsx("div", { className: "absolute bottom-0 right-0", children: _jsxs("label", { className: "cursor-pointer", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-black flex items-center justify-center text-white hover:bg-gray-800 transition-colors shadow-lg", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: _jsx(Camera, { className: "w-4 h-4" }) }), _jsx("input", { type: "file", accept: "image/jpeg,image/jpg,image/png,image/gif,image/webp", onChange: handleAvatarChange, className: "hidden" })] }) }))] }), _jsxs("div", { className: "flex-1", children: [_jsx("h3", { className: "font-bold text-gray-900 mb-1", children: "Profile Photo" }), _jsx("p", { className: "text-sm text-gray-500 mb-3", children: "Upload a new profile picture. JPG, PNG, GIF, or WebP. Max size 5MB." }), isEditingProfile && avatarFile && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleRemoveAvatar, className: "gap-2 text-red-600 hover:text-red-700 hover:bg-red-50", children: [_jsx(X, { className: "w-4 h-4" }), " Remove Photo"] }))] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-bold text-gray-900 mb-4", children: "Personal Information" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-sm font-semibold text-gray-700", children: ["First Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: profileData.firstName || '', onChange: (e) => setProfileData({ ...profileData, firstName: e.target.value }), disabled: !isEditingProfile, readOnly: !isEditingProfile, required: true, className: cn("w-full px-4 py-2.5 rounded-lg border border-gray-200 focus:outline-none transition-all", isEditingProfile
                                                                                     ? "bg-white text-gray-900 cursor-text focus:border-black focus:ring-0"
                                                                                     : "bg-gray-50 text-gray-500 cursor-not-allowed") })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-sm font-semibold text-gray-700", children: ["Last Name ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx("input", { type: "text", value: profileData.lastName || '', onChange: (e) => setProfileData({ ...profileData, lastName: e.target.value }), disabled: !isEditingProfile, readOnly: !isEditingProfile, required: true, className: cn("w-full px-4 py-2.5 rounded-lg border border-gray-200 focus:outline-none transition-all", isEditingProfile
                                                                                     ? "bg-white text-gray-900 cursor-text focus:border-black focus:ring-0"
@@ -545,5 +556,68 @@ export function AccountPage({ storeConfig }) {
                                                                         addToast(errorMessage, 'error');
                                                                     }
                                                                 }, children: _jsx(Heart, { className: "w-5 h-5 fill-current" }) }), _jsx("div", { className: "aspect-square bg-gray-100 rounded-xl mb-4 overflow-hidden relative", children: product?.image ? (_jsx(Image, { src: product.image, alt: product.name || 'Product', fill: true, className: "object-cover group-hover:scale-105 transition-transform duration-500", unoptimized: true })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200", children: _jsx(Heart, { className: "w-12 h-12 text-gray-300" }) })) }), storeSlug && (_jsx(Link, { href: `/${storeSlug}`, className: "block text-xs font-bold text-gray-400 uppercase tracking-wider mb-1 hover:text-black", children: product?.storeName || storeConfig?.name || 'Store' })), _jsx("h3", { className: "font-bold text-gray-900 mb-2 truncate", children: product?.name || 'Product' }), _jsxs("div", { className: "flex items-center justify-between mt-4", children: [_jsx("span", { className: "text-lg font-bold", children: product?.price ? formatCurrency(product.price, product.currency || storeConfig?.settings?.currency || 'USD') : formatCurrency(0, storeConfig?.settings?.currency || 'USD') }), storeSlug && productSlug && (_jsx(Link, { href: `/${storeSlug}/product/${productSlug}`, children: _jsx(Button, { size: "sm", className: "rounded-full bg-black text-white px-4", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: "View Item" }) }))] })] }, item.id));
-                                                }) })) : (_jsxs("div", { className: "text-center py-12", children: [_jsx("div", { className: "w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4", children: _jsx(Heart, { className: "w-8 h-8 text-gray-300" }) }), _jsx("h3", { className: "text-lg font-medium text-gray-900", children: "Your wishlist is empty" }), _jsx("p", { className: "text-gray-500 mt-2", children: "Start saving items you love!" })] }))] })), activeTab === 'notifications' && (_jsxs("div", { className: "space-y-6 animate-fade-in", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Notification Preferences" }), _jsxs("div", { className: "space-y-4 divide-y divide-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900", children: "Order Updates" }), _jsx("p", { className: "text-sm text-gray-500", children: "Receive updates about your order status" })] }), _jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-black transition-colors", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: _jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6" }) })] }), _jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900", children: "Promotions" }), _jsx("p", { className: "text-sm text-gray-500", children: "Receive emails about new sales and deals" })] }), _jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors", children: _jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1" }) })] }), _jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900", children: "New Arrivals" }), _jsx("p", { className: "text-sm text-gray-500", children: "Get notified when new products arrive" })] }), _jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-black transition-colors", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: _jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6" }) })] })] })] })), activeTab === 'settings' && (_jsxs("div", { className: "space-y-8 animate-fade-in", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Account Settings" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("div", { className: "flex justify-between items-center mb-4", children: _jsx("h3", { className: "text-lg font-bold text-gray-900", children: "Security" }) }), !isChangingPassword ? (_jsxs(Button, { variant: "outline", className: "w-full justify-between group h-12 rounded-xl", onClick: () => setIsChangingPassword(true), children: [_jsx("span", { children: "Change Password" }), _jsx(Lock, { className: "w-4 h-4 text-gray-400 group-hover:text-black" })] })) : (_jsxs("form", { onSubmit: handlePasswordChange, className: "p-6 border border-gray-200 rounded-xl space-y-4 bg-gray-50/50", children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2", children: "Change Password" }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-semibold text-gray-700", children: "Current Password" }), _jsx("input", { type: "password", value: passwordData.current, onChange: (e) => setPasswordData({ ...passwordData, current: e.target.value }), className: "w-full px-4 py-2.5 rounded-lg border border-gray-200 bg-white focus:border-black focus:ring-0 focus:outline-none transition-all", required: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-semibold text-gray-700", children: "New Password" }), _jsx("input", { type: "password", value: passwordData.new, onChange: (e) => setPasswordData({ ...passwordData, new: e.target.value }), className: "w-full px-4 py-2.5 rounded-lg border border-gray-200 bg-white focus:border-black focus:ring-0 focus:outline-none transition-all", required: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-semibold text-gray-700", children: "Confirm New Password" }), _jsx("input", { type: "password", value: passwordData.confirm, onChange: (e) => setPasswordData({ ...passwordData, confirm: e.target.value }), className: "w-full px-4 py-2.5 rounded-lg border border-gray-200 bg-white focus:border-black focus:ring-0 focus:outline-none transition-all", required: true })] }), _jsxs("div", { className: "flex justify-end gap-3 pt-2", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => setIsChangingPassword(false), children: "Cancel" }), _jsx(Button, { type: "submit", className: "bg-black text-white", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: "Update Password" })] })] }))] }), _jsxs("div", { className: "pt-8 border-t border-gray-100", children: [_jsx("h3", { className: "text-lg font-bold text-red-600 mb-2", children: "Danger Zone" }), _jsx("p", { className: "text-gray-500 text-sm mb-4", children: "Once you delete your account, there is no going back. Please be certain." }), _jsxs(Button, { variant: "outline", className: "border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 w-full justify-between h-12 rounded-xl", children: [_jsx("span", { children: "Delete Account" }), _jsx(Trash2, { className: "w-4 h-4" })] })] })] })] }))] }) })] }) })] }));
+                                                }) })) : (_jsxs("div", { className: "text-center py-12", children: [_jsx("div", { className: "w-16 h-16 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4", children: _jsx(Heart, { className: "w-8 h-8 text-gray-300" }) }), _jsx("h3", { className: "text-lg font-medium text-gray-900", children: "Your wishlist is empty" }), _jsx("p", { className: "text-gray-500 mt-2", children: "Start saving items you love!" })] }))] })), activeTab === 'notifications' && (_jsxs("div", { className: "space-y-6 animate-fade-in", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Notification Preferences" }), _jsxs("div", { className: "space-y-4 divide-y divide-gray-100", children: [_jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900", children: "Order Updates" }), _jsx("p", { className: "text-sm text-gray-500", children: "Receive updates about your order status" })] }), _jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-black transition-colors", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: _jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6" }) })] }), _jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900", children: "Promotions" }), _jsx("p", { className: "text-sm text-gray-500", children: "Receive emails about new sales and deals" })] }), _jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 transition-colors", children: _jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1" }) })] }), _jsxs("div", { className: "flex items-center justify-between py-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-gray-900", children: "New Arrivals" }), _jsx("p", { className: "text-sm text-gray-500", children: "Get notified when new products arrive" })] }), _jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-black transition-colors", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: _jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6" }) })] })] })] })), activeTab === 'learning' && storeConfig?.layout === 'motivational-speaker' && (_jsxs("div", { className: "space-y-8 animate-fade-in", children: [_jsx("div", { className: "flex justify-between items-center", children: _jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-black text-slate-900 tracking-tight", children: "Learning Hub" }), _jsx("p", { className: "text-slate-500 font-medium", children: "Your personal growth and certification center" })] }) }), _jsx("div", { className: "flex border-b border-slate-100 overflow-x-auto no-scrollbar gap-8", children: [
+                                                    { id: 'courses', label: 'My Courses' },
+                                                    { id: 'mentorship', label: 'Mentorship' },
+                                                    { id: 'certificates', label: 'Credentials' }
+                                                ].map((sub) => (_jsxs("button", { onClick: () => router.push(`?tab=learning&sub=${sub.id}`), className: cn("pb-4 text-xs font-black uppercase tracking-[0.2em] whitespace-nowrap border-b-2 transition-all relative", (searchParams.get('sub') || 'courses') === sub.id
+                                                        ? "text-slate-900"
+                                                        : "border-transparent text-slate-400 hover:text-slate-600"), children: [sub.label, (searchParams.get('sub') || 'courses') === sub.id && (_jsx(motion.div, { layoutId: "activeLearningTab", className: "absolute bottom-[-2px] left-0 right-0 h-0.5 bg-slate-900 rounded-full", style: storeConfig ? { backgroundColor: primaryColor } : {} }))] }, sub.id))) }), (searchParams.get('sub') === 'courses' || !searchParams.get('sub')) && (_jsxs("div", { className: "space-y-10", children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", children: [
+                                                            { label: 'Enrolled', value: '12', icon: BookOpen, color: 'text-blue-600', bg: 'bg-blue-50' },
+                                                            { label: 'Completed', value: '8', icon: CheckCircle2, color: 'text-green-600', bg: 'bg-green-50' },
+                                                            { label: 'Learning Time', value: '24h', icon: Clock, color: 'text-purple-600', bg: 'bg-purple-50' }
+                                                        ].map((stat, i) => (_jsxs("div", { className: "bg-white border border-slate-100 rounded-2xl p-5 flex items-center gap-4 shadow-sm", children: [_jsx("div", { className: cn("w-12 h-12 rounded-xl flex items-center justify-center shrink-0", stat.bg), children: _jsx(stat.icon, { className: cn("w-6 h-6", stat.color) }) }), _jsxs("div", { children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-widest text-slate-400", children: stat.label }), _jsx("h3", { className: "text-xl font-black text-slate-900", children: stat.value })] })] }, i))) }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-black uppercase tracking-[0.2em] text-slate-400", children: "In Progress" }), _jsx("span", { className: "bg-slate-100 text-slate-900 rounded-full px-3 py-0.5 text-[10px] font-bold border border-slate-200", children: "2 Active" })] }), _jsx("div", { className: "space-y-4", children: [
+                                                                    {
+                                                                        id: 'art-of-focus',
+                                                                        title: 'The Art of Focus',
+                                                                        progress: 65,
+                                                                        type: 'Masterclass',
+                                                                        thumbnail: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=300&fit=crop',
+                                                                        lastAccessed: '2 days ago'
+                                                                    },
+                                                                    {
+                                                                        id: 'leadership-101',
+                                                                        title: 'Executive Leadership 101',
+                                                                        progress: 30,
+                                                                        type: 'Specialization',
+                                                                        thumbnail: 'https://images.unsplash.com/photo-1478737270239-2f02b77ac6d5?w=400&h=300&fit=crop',
+                                                                        lastAccessed: '1 week ago'
+                                                                    },
+                                                                ].map((course) => {
+                                                                    const courseLink = storeConfig ? `/${storeConfig.slug}/services/${course.id}` : '#';
+                                                                    return (_jsx(Link, { href: courseLink, className: "group block bg-white border border-slate-100 rounded-3xl p-5 hover:border-slate-300 hover:shadow-xl transition-all", children: _jsxs("div", { className: "flex flex-col sm:flex-row gap-6", children: [_jsxs("div", { className: "relative w-full sm:w-48 h-32 rounded-2xl overflow-hidden bg-slate-100 shrink-0 shadow-sm", children: [_jsx(Image, { src: course.thumbnail, alt: course.title, fill: true, className: "object-cover group-hover:scale-110 transition-transform duration-700", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100", children: _jsx("div", { className: "w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-xl", children: _jsx(Play, { className: "w-5 h-5 text-slate-900 fill-current" }) }) })] }), _jsxs("div", { className: "flex-1 flex flex-col justify-between py-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-[10px] font-black uppercase tracking-[0.2em] text-blue-600", children: course.type }), _jsx("h4", { className: "text-xl font-black text-slate-900 leading-tight group-hover:text-primary transition-colors", children: course.title })] }), _jsxs("div", { className: "mt-4 space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between text-xs", children: [_jsx("span", { className: "text-slate-400 font-bold uppercase tracking-widest text-[10px]", children: "Progress" }), _jsxs("span", { className: "font-black text-slate-900", children: [course.progress, "%"] })] }), _jsx("div", { className: "w-full h-1.5 bg-slate-50 rounded-full overflow-hidden", children: _jsx(motion.div, { initial: { width: 0 }, animate: { width: `${course.progress}%` }, className: "h-full bg-slate-900 rounded-full", style: storeConfig ? { backgroundColor: primaryColor } : {} }) }), _jsxs("div", { className: "flex items-center justify-between pt-2", children: [_jsxs("span", { className: "text-[10px] font-bold text-slate-400 uppercase tracking-widest", children: ["Last seen ", course.lastAccessed] }), _jsxs("span", { className: "flex items-center gap-1.5 text-xs font-black text-slate-900 group-hover:translate-x-1 transition-transform", children: ["Continue ", _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] })] })] })] })] }) }, course.id));
+                                                                }) })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("h3", { className: "text-sm font-black uppercase tracking-[0.2em] text-slate-400", children: "Recently Completed" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                                                                    { title: 'Strategic Planning Guide', type: 'Framework', completedDate: '3 days ago' },
+                                                                    { title: 'Mindset Mastery Basics', type: 'Foundation', completedDate: '2 weeks ago' },
+                                                                ].map((course, i) => (_jsxs("div", { className: "bg-slate-50/50 border border-slate-100 rounded-2xl p-5 group hover:bg-white hover:shadow-md transition-all flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-xl bg-green-100 flex items-center justify-center shrink-0", children: _jsx(Check, { className: "w-5 h-5 text-green-600" }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-slate-900 text-sm leading-snug", children: course.title }), _jsxs("p", { className: "text-[10px] font-black text-slate-400 uppercase tracking-widest mt-0.5", children: [course.type, " \u2022 ", course.completedDate] })] })] }), _jsx(Button, { variant: "ghost", size: "sm", className: "h-8 rounded-lg text-[10px] font-black uppercase tracking-widest hover:bg-slate-100", children: "Review" })] }, i))) })] })] })), searchParams.get('sub') === 'mentorship' && (_jsx("div", { className: "space-y-6", children: _jsx(MentorshipProgress, { programs: [
+                                                        {
+                                                            id: 'ment-1',
+                                                            name: '1-on-1 Executive Coaching',
+                                                            mentorName: 'Dr. Sarah Mitchell',
+                                                            mentorAvatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&h=150&fit=crop',
+                                                            startDate: '2025-10-01',
+                                                            expiryDate: '2025-12-31',
+                                                            sessionsTotal: 12,
+                                                            sessionsCompleted: 8,
+                                                            status: 'active',
+                                                            nextSessionDate: 'Oct 24, 2025 @ 10:00 AM'
+                                                        }
+                                                    ] }) })), searchParams.get('sub') === 'certificates' && (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-sm font-black uppercase tracking-[0.2em] text-slate-400", children: "Verified Credentials" }), _jsx("p", { className: "text-[10px] font-bold text-slate-400 uppercase tracking-widest", children: "Digital PDF Documents" })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+                                                            {
+                                                                id: 'CERT-8821',
+                                                                courseName: 'The Art of Focus',
+                                                                date: 'Dec 15, 2025',
+                                                                instructor: 'Dr. Sarah Mitchell',
+                                                                design: 'modern',
+                                                                color: primaryColor
+                                                            },
+                                                            {
+                                                                id: 'CERT-7732',
+                                                                courseName: 'Strategic Planning Guide',
+                                                                date: 'Nov 20, 2025',
+                                                                instructor: 'Marcus Aurelius',
+                                                                design: 'minimal',
+                                                                color: '#64748b'
+                                                            }
+                                                        ].map((cert) => (_jsx(CertificateCard, { certificate: cert, onDownload: (id) => window.open(`/${storeConfig?.slug}/account/certificates/${id}`, '_blank') }, cert.id))) })] })), _jsx("div", { className: "pt-12 border-t border-slate-100", children: _jsx(Link, { href: storeConfig ? `/${storeConfig.slug}/services` : '#', children: _jsxs(Button, { className: "w-full h-16 rounded-3xl font-black uppercase tracking-[0.2em] shadow-2xl shadow-slate-200 hover:shadow-primary/20 hover:-translate-y-1 transition-all text-sm", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: ["Explore Learning Catalogue", _jsx(ArrowRight, { className: "ml-3 w-5 h-5" })] }) }) })] })), activeTab === 'settings' && (_jsxs("div", { className: "space-y-8 animate-fade-in", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900", children: "Account Settings" }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("div", { className: "flex justify-between items-center mb-4", children: _jsx("h3", { className: "text-lg font-bold text-gray-900", children: "Security" }) }), !isChangingPassword ? (_jsxs(Button, { variant: "outline", className: "w-full justify-between group h-12 rounded-xl", onClick: () => setIsChangingPassword(true), children: [_jsx("span", { children: "Change Password" }), _jsx(Lock, { className: "w-4 h-4 text-gray-400 group-hover:text-black" })] })) : (_jsxs("form", { onSubmit: handlePasswordChange, className: "p-6 border border-gray-200 rounded-xl space-y-4 bg-gray-50/50", children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2", children: "Change Password" }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-semibold text-gray-700", children: "Current Password" }), _jsx("input", { type: "password", value: passwordData.current, onChange: (e) => setPasswordData({ ...passwordData, current: e.target.value }), className: "w-full px-4 py-2.5 rounded-lg border border-gray-200 bg-white focus:border-black focus:ring-0 focus:outline-none transition-all", required: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-semibold text-gray-700", children: "New Password" }), _jsx("input", { type: "password", value: passwordData.new, onChange: (e) => setPasswordData({ ...passwordData, new: e.target.value }), className: "w-full px-4 py-2.5 rounded-lg border border-gray-200 bg-white focus:border-black focus:ring-0 focus:outline-none transition-all", required: true })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-semibold text-gray-700", children: "Confirm New Password" }), _jsx("input", { type: "password", value: passwordData.confirm, onChange: (e) => setPasswordData({ ...passwordData, confirm: e.target.value }), className: "w-full px-4 py-2.5 rounded-lg border border-gray-200 bg-white focus:border-black focus:ring-0 focus:outline-none transition-all", required: true })] }), _jsxs("div", { className: "flex justify-end gap-3 pt-2", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => setIsChangingPassword(false), children: "Cancel" }), _jsx(Button, { type: "submit", className: "bg-black text-white", style: storeConfig ? { backgroundColor: primaryColor } : {}, children: "Update Password" })] })] }))] }), _jsxs("div", { className: "pt-8 border-t border-gray-100", children: [_jsx("h3", { className: "text-lg font-bold text-red-600 mb-2", children: "Danger Zone" }), _jsx("p", { className: "text-gray-500 text-sm mb-4", children: "Once you delete your account, there is no going back. Please be certain." }), _jsxs(Button, { variant: "outline", className: "border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 w-full justify-between h-12 rounded-xl", children: [_jsx("span", { children: "Delete Account" }), _jsx(Trash2, { className: "w-4 h-4" })] })] })] })] }))] }) })] }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CartPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/pages/CartPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAiBhD,UAAU,aAAa;IACrB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EAAE,WAAW,EAAE,EAAE,aAAa,2CAsVtD"}
+{"version":3,"file":"CartPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/pages/CartPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAUhD,UAAU,aAAa;IACrB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,QAAQ,CAAC,EAAE,WAAW,EAAE,EAAE,aAAa,2CAiRtD"}

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

@@ -1,49 +1,22 @@
 '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 { Button } from '../../../components/ui/button';
+import { Minus, Plus, Trash2, ArrowRight, ShoppingBag, ArrowLeft, Lock } 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 { getCartLineImage } from '../../../lib/product-variation-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';
-import { trackStorefrontEvent } from '../../../lib/mixpanel.js';
+import { useStore } from '../../../lib/store-context';
+import { formatCurrency } from '../../../lib/utils';
+import { calculateVAT, calculateServiceCharge, getVATLabel, getServiceChargeLabel } from '../../../lib/utils/fee-calculations';
 export function CartPage({ storeConfig }) {
     const primaryColor = storeConfig.branding.primaryColor;
-    const { cart, updateCartQuantity, removeFromCart, cartTotal, isCartHydrated, isCartRefreshing, refreshCart } = useStore();
-    const { addToast } = useToast();
+    const { cart, updateCartQuantity, removeFromCart, cartTotal, isCartLoading } = useStore();
     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]);
-    // Track cart page view
-    useEffect(() => {
-        if (!storeConfig?.id)
-            return;
-        trackStorefrontEvent('Cart_viewed', {
-            storeId: storeConfig.id,
-            storeSlug: storeConfig.slug,
-            itemCount: cart.length,
-            cartTotal,
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [storeConfig?.id]);
     // Helper function to determine cart currency consistently
     const getCartCurrency = () => {
         if (cart.length === 0) {
@@ -70,66 +43,42 @@ export function CartPage({ storeConfig }) {
         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;
+    const subtotal = cartTotal;
+    // Calculate VAT and service charge using store configuration
+    const vatAmount = calculateVAT(subtotal, storeConfig.settings?.vat, storeConfig.settings?.taxRate);
+    const serviceChargeAmount = calculateServiceCharge(subtotal, storeConfig.settings?.serviceCharge, 'online');
+    const vatLabel = getVATLabel(storeConfig.settings?.vat, storeConfig.settings?.taxRate);
+    const serviceChargeLabel = getServiceChargeLabel(storeConfig.settings?.serviceCharge);
+    // Calculate total (shipping will be calculated at checkout)
+    const total = subtotal + vatAmount + serviceChargeAmount;
     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: 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("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"] })] })] }) })] })] }) }));
+    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", { className: "flex items-center gap-3", children: [_jsx(Link, { href: `/${storeConfig.slug}`, className: "p-2 -ml-2 hover:bg-white rounded-full transition-colors text-gray-500 hover:text-black", children: _jsx(ArrowLeft, { className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-gray-900 tracking-tight", children: "Shopping Cart" }), _jsxs("p", { className: "text-gray-500 text-sm mt-1", 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" })] })] }), _jsxs("div", { className: "flex flex-col lg:flex-row gap-8 lg:gap-12", children: [_jsx("div", { className: "flex-1 space-y-6", children: cart.map((item) => (_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", 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-1 flex flex-col justify-between", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex justify-between items-start gap-4", children: [_jsx("h3", { className: "font-bold text-gray-900 text-lg leading-tight", children: item.product.name }), _jsx("p", { className: "font-black text-lg text-gray-900", children: formatCurrency(item.price * item.quantity, cartCurrency) })] }), _jsx("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 })) })] }), _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" })) : (_jsxs("div", { className: "flex items-center gap-1 bg-gray-50 rounded-full p-1 border border-gray-200", children: [_jsx("button", { onClick: async () => {
+                                                                    setUpdatingItemId(item.id);
+                                                                    try {
+                                                                        await updateCartQuantity(item.id, item.quantity - 1);
+                                                                    }
+                                                                    finally {
+                                                                        setUpdatingItemId(null);
+                                                                    }
+                                                                }, className: "w-8 h-8 flex items-center justify-center rounded-full bg-white shadow-sm hover:bg-gray-50 transition-colors disabled:opacity-50 text-gray-600", disabled: item.quantity <= 1 || updatingItemId === item.id || isCartLoading, children: updatingItemId === item.id ? (_jsx("div", { className: "w-3.5 h-3.5 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" })) : (_jsx(Minus, { className: "w-3.5 h-3.5" })) }), _jsx("span", { className: "text-sm font-bold w-8 text-center text-gray-900", children: updatingItemId === item.id ? (_jsx("div", { className: "w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin mx-auto" })) : (item.quantity) }), _jsx("button", { onClick: async () => {
+                                                                    setUpdatingItemId(item.id);
+                                                                    try {
+                                                                        await updateCartQuantity(item.id, item.quantity + 1);
+                                                                    }
+                                                                    finally {
+                                                                        setUpdatingItemId(null);
+                                                                    }
+                                                                }, className: "w-8 h-8 flex items-center justify-center rounded-full bg-white shadow-sm hover:bg-gray-50 transition-colors disabled:opacity-50 text-gray-900", disabled: updatingItemId === item.id || isCartLoading, children: updatingItemId === item.id ? (_jsx("div", { className: "w-3.5 h-3.5 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" })) : (_jsx(Plus, { className: "w-3.5 h-3.5" })) })] })), _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: removingItemId === item.id || isCartLoading, 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: "space-y-4 mb-8", children: [_jsxs("div", { className: "flex justify-between text-gray-600 font-medium", children: [_jsx("span", { children: "Subtotal" }), _jsx("span", { className: "text-gray-900", children: formatCurrency(subtotal, cartCurrency) })] }), vatAmount > 0 && (_jsxs("div", { className: "flex justify-between text-gray-600 font-medium", children: [_jsx("span", { children: vatLabel }), _jsx("span", { className: "text-gray-900", children: formatCurrency(vatAmount, cartCurrency) })] })), serviceChargeAmount > 0 && (_jsxs("div", { className: "flex justify-between text-gray-600 font-medium", children: [_jsx("span", { children: serviceChargeLabel }), _jsx("span", { className: "text-gray-900", children: formatCurrency(serviceChargeAmount, cartCurrency) })] })), _jsxs("div", { className: "pt-6 border-t-2 border-gray-100 flex justify-between items-end mt-4", children: [_jsx("span", { className: "text-lg font-bold text-gray-900", children: "Total" }), _jsx("span", { className: "text-4xl font-black text-gray-900 tracking-tight", children: formatCurrency(total, cartCurrency) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx(Link, { href: `/${storeConfig.slug}/checkout`, 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", style: { backgroundColor: primaryColor, color: 'white' }, children: ["Checkout ", _jsx(ArrowRight, { className: "ml-2 w-5 h-5" })] }) }), _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.map

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