storefront-layouts-staging 1.0.0-staging.0

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

@@ -0,0 +1,144 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button.js';
+import { ArrowRight, Heart, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useStore } from '../../../lib/store-context.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { ProductGridSkeleton } from '../../../components/ui/skeletons/index.js';
+import { formatCurrency } from '../../../lib/utils/index.js';
+import { richFieldPlainTextForDisplay } from '../../../lib/rich-html.js';
+import { extractImageUrls } from '../../../lib/store-config-utils.js';
+import { getProductPagePath } from '../../../lib/utils/product-share.js';
+import { useAuth } from '../../../lib/auth-context.js';
+import { shouldUseAPI } from '../../../lib/utils/demo-detection.js';
+import { useLoading } from '../../../lib/loading-context.js';
+function resolveProductImages(item) {
+    if (Array.isArray(item.images) && item.images.length > 0) {
+        const firstItem = item.images[0];
+        if (typeof firstItem === 'string') {
+            return item.images.filter((img) => typeof img === 'string' && img.trim().length > 0);
+        }
+    }
+    return extractImageUrls(item.images ?? item.image);
+}
+export function WishlistPage({ storeConfig }) {
+    const primaryColor = storeConfig.branding.primaryColor;
+    const { wishlist, toggleWishlist, isWishlistLoading } = useStore();
+    const [isClient, setIsClient] = useState(false);
+    const [wishlistItems, setWishlistItems] = useState([]);
+    const [isLoadingItems, setIsLoadingItems] = useState(true);
+    const { addToast } = useToast();
+    const { isAuthenticated } = useAuth();
+    const { startBackendLoading, stopBackendLoading } = useLoading();
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    // Fetch wishlist items with product data - single source of truth
+    useEffect(() => {
+        if (!isClient)
+            return;
+        const loadWishlistItems = async () => {
+            setIsLoadingItems(true);
+            const storeSlug = storeConfig.slug;
+            const useAPI = shouldUseAPI(storeSlug);
+            if (useAPI && isAuthenticated) {
+                startBackendLoading();
+            }
+            try {
+                // Note: wishlistService removed - using StoreContext wishlist (localStorage-based)
+                // Use products from storeConfig filtered by wishlist product IDs
+                if (storeConfig.products) {
+                    // For guests or demo stores, filter from storeConfig.products
+                    const allProducts = storeConfig.products || [];
+                    const allMenuItems = storeConfig.menuItems || [];
+                    // Transform menu items to StoreProduct format
+                    const transformedMenuItems = allMenuItems.map(item => ({
+                        id: item.id,
+                        name: item.name,
+                        slug: item.id, // Use id as slug for menu items
+                        description: item.description,
+                        price: item.price,
+                        images: item.image ? [item.image] : [],
+                        categoryId: item.categoryId,
+                        inStock: item.inStock,
+                        currency: storeConfig.settings?.currency || 'USD',
+                        variants: [],
+                        specifications: {},
+                        rating: 0,
+                        reviewCount: 0
+                    }));
+                    const allItems = [...allProducts, ...transformedMenuItems];
+                    const filteredItems = allItems.filter(item => wishlist.includes(item.id));
+                    // Deduplicate items by product ID
+                    const uniqueItems = filteredItems.filter((item, index, self) => index === self.findIndex((t) => t.id === item.id));
+                    setWishlistItems(uniqueItems);
+                }
+            }
+            catch (error) {
+                console.error('Failed to load wishlist items:', error);
+                // Fallback to filtering from storeConfig.products
+                const allProducts = storeConfig.products || [];
+                const allMenuItems = storeConfig.menuItems || [];
+                // Transform menu items to StoreProduct format
+                const transformedMenuItems = allMenuItems.map(item => ({
+                    id: item.id,
+                    name: item.name,
+                    slug: item.id, // Use id as slug for menu items
+                    description: item.description,
+                    price: item.price,
+                    images: item.image ? [item.image] : [],
+                    categoryId: item.categoryId,
+                    inStock: item.inStock,
+                    currency: storeConfig.settings?.currency || 'USD',
+                    variants: [],
+                    specifications: {},
+                    rating: 0,
+                    reviewCount: 0
+                }));
+                const allItems = [...allProducts, ...transformedMenuItems];
+                const filteredItems = allItems.filter(item => wishlist.includes(item.id));
+                // Deduplicate items by product ID
+                const uniqueItems = filteredItems.filter((item, index, self) => index === self.findIndex((t) => t.id === item.id));
+                setWishlistItems(uniqueItems);
+            }
+            finally {
+                setIsLoadingItems(false);
+                if (useAPI && isAuthenticated) {
+                    stopBackendLoading();
+                }
+            }
+        };
+        // Debounce to prevent multiple rapid calls
+        const timeoutId = setTimeout(loadWishlistItems, 100);
+        return () => clearTimeout(timeoutId);
+    }, [isClient, isAuthenticated, wishlist.length, storeConfig.slug]);
+    if (!isClient) {
+        return _jsx(ProductGridSkeleton, { count: 8, columns: 4 });
+    }
+    // Show loading skeleton while wishlist is loading
+    if ((isWishlistLoading || isLoadingItems) && wishlistItems.length === 0) {
+        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: [_jsx("div", { className: "mb-10", children: _jsx("h1", { className: "text-3xl font-black text-gray-900 tracking-tight", children: "My Wishlist" }) }), _jsx(ProductGridSkeleton, { count: 8, columns: 4 })] }) }));
+    }
+    if (wishlistItems.length === 0 && !isLoadingItems) {
+        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(Heart, { 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 wishlist is empty" }), _jsx("p", { className: "text-gray-500 mb-8 max-w-md text-center animate-fade-in-up", style: { animationDelay: '200ms' }, children: "Save items you love to your wishlist and revisit them later." }), _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" }) })] }));
+    }
+    const { startPageLoading } = useLoading();
+    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: [_jsx("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: "My Wishlist" }), _jsxs("p", { className: "text-gray-500 text-sm mt-1", children: [wishlistItems.length, " items saved"] })] })] }) }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", children: wishlistItems.map((item) => {
+                        const productImages = resolveProductImages(item);
+                        const imageUrl = productImages[0];
+                        const productPath = getProductPagePath(storeConfig.slug, item.slug || item.id);
+                        return (_jsxs("div", { className: "bg-white rounded-3xl border border-gray-100 shadow-sm overflow-hidden group transition-all hover:shadow-md hover:border-gray-200 flex flex-col", children: [_jsxs("div", { className: "relative aspect-[4/5] overflow-hidden bg-gray-100", children: [_jsx(Link, { href: productPath, onClick: () => startPageLoading(productPath), className: "block w-full h-full", children: _jsx(ImageWithFallback, { src: imageUrl, alt: item.name, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500", skeletonAspectRatio: "4/5" }) }), _jsx("button", { type: "button", onClick: async () => {
+                                                try {
+                                                    await toggleWishlist(item.id);
+                                                    addToast('Removed from wishlist', 'success');
+                                                }
+                                                catch (error) {
+                                                    console.error('Failed to remove from wishlist:', error);
+                                                    addToast('Failed to remove from wishlist', 'error');
+                                                }
+                                            }, className: "absolute top-3 right-3 p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:bg-white text-red-500 transition-colors z-10", title: "Remove from wishlist", children: _jsx(Heart, { className: "w-5 h-5 fill-current" }) })] }), _jsxs("div", { className: "p-5 flex-1 flex flex-col", children: [_jsx("h3", { className: "font-bold text-gray-900 text-lg leading-tight mb-1 line-clamp-1", children: item.name }), _jsx("p", { className: "text-gray-500 text-sm line-clamp-2 mb-4 flex-1", children: richFieldPlainTextForDisplay(item.description) }), _jsxs("div", { className: "flex items-center justify-between gap-3 mt-auto pt-4 border-t border-gray-50", children: [_jsx("span", { className: "font-black text-lg text-gray-900", children: formatCurrency(item.price, item.currency || 'USD') }), _jsx(Link, { href: productPath, onClick: () => startPageLoading(productPath), children: _jsxs(Button, { size: "sm", className: "rounded-full px-4 font-bold transition-transform hover:scale-105", style: { backgroundColor: primaryColor }, children: ["View Product", _jsx(ArrowRight, { className: "w-4 h-4 ml-2" })] }) })] })] })] }, item.id));
+                    }) })] }) }));
+}

package/dist/layouts/shared/wrappers/BookingAgendaLayout.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StoreConfig } from '../../../lib/store-types';
+interface BookingContextType {
+    openBooking: (serviceId?: string) => void;
+    closeBooking: () => void;
+}
+export declare function useBooking(): BookingContextType;
+interface BookingAgendaLayoutProps {
+    children: React.ReactNode;
+    storeConfig: StoreConfig;
+}
+export declare function BookingAgendaLayout({ children, storeConfig }: BookingAgendaLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=BookingAgendaLayout.d.ts.map

package/dist/layouts/shared/wrappers/BookingAgendaLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingAgendaLayout.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/wrappers/BookingAgendaLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAiBvD,UAAU,kBAAkB;IAC1B,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAID,wBAAgB,UAAU,uBAMzB;AAED,UAAU,wBAAwB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,wBAAwB,2CA4TtF"}

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

@@ -0,0 +1,152 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect } from 'react';
+import { BookingAgendaSidebar } from '../components/headers/BookingAgendaSidebar.js';
+import { PageAnimateWrapper } from '../../../components/ui/page-animate-wrapper.js';
+import { PageContentLoader } from '../../../components/ui/page-content-loader.js';
+import { useLoading } from '../../../lib/loading-context.js';
+import { getThemeColor, getLayoutText } from '../../../lib/utils/asset-helpers.js';
+import { AlertModalProvider } from '../../../components/ui/alert-modal.js';
+import { Modal } from '../../../components/ui/modal.js';
+import { Button } from '../../../components/ui/button.js';
+import { usePayazaCheckout } from '../../../hooks/use-payaza-checkout.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { useAuth } from '../../../lib/auth-context.js';
+import { filterActiveServices, formatCurrency } from '../../../lib/utils/index.js';
+import { CheckCircle, Sparkles, Lock } from 'lucide-react';
+import { formatDateSafe } from '../../../utils/date.js';
+const BookingContext = createContext(undefined);
+export function useBooking() {
+    const context = useContext(BookingContext);
+    if (!context) {
+        throw new Error('useBooking must be used within a BookingAgendaLayout');
+    }
+    return context;
+}
+export function BookingAgendaLayout({ children, storeConfig }) {
+    const { isBackendLoading } = useLoading();
+    const { addToast } = useToast();
+    const { user, isAuthenticated } = useAuth();
+    // Booking Logic State
+    const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
+    const [selectedService, setSelectedService] = useState(null);
+    const [bookingStep, setBookingStep] = useState(1);
+    const [selectedDate, setSelectedDate] = useState(0);
+    const [selectedTime, setSelectedTime] = useState(null);
+    const [guestInfo, setGuestInfo] = useState({
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: ''
+    });
+    // Services Data
+    const rawServices = storeConfig.services || [];
+    const activeServices = filterActiveServices(rawServices);
+    // In preview mode fallback logic is handled in homepage, but for modal we need valid services.
+    // If no services, the modal might look empty if opened without a specific service ID.
+    const services = activeServices;
+    // Pre-fill form data for authenticated users
+    useEffect(() => {
+        if (isAuthenticated && user) {
+            setGuestInfo(prev => ({
+                firstName: user.firstName || prev.firstName,
+                lastName: user.lastName || prev.lastName,
+                email: user.email || prev.email,
+                phone: user.phone || prev.phone,
+            }));
+        }
+    }, [isAuthenticated, user]);
+    // Payment Hook
+    const payazaPublicKey = storeConfig.payment?.payazaPublicKey || process.env.NEXT_PUBLIC_PAYAZA_PUBLIC_KEY || '';
+    const { checkout, isLoading: isPaymentLoading } = usePayazaCheckout({
+        publicKey: payazaPublicKey,
+        onSuccess: () => {
+            setBookingStep(4); // Success
+            addToast('Payment successful & Booking confirmed!', 'success');
+        },
+        onError: (error) => {
+            addToast(error, 'error');
+            setBookingStep(2); // Stay on payment step
+        },
+        onClose: () => { }
+    });
+    // Booking Actions
+    const openBooking = (serviceId) => {
+        if (serviceId)
+            setSelectedService(serviceId);
+        setSelectedTime(null);
+        setBookingStep(1);
+        setIsBookingModalOpen(true);
+    };
+    const closeBooking = () => {
+        setIsBookingModalOpen(false);
+    };
+    // Payment Handling
+    const handlePaymentSubmit = async () => {
+        if (!selectedService)
+            return;
+        const service = services.find(s => s.id === selectedService);
+        // If service not found (e.g. mock data in preview), we can't proceed with real payment easily.
+        // But for layout wrapper, we assume valid data.
+        if (!service && services.length > 0)
+            return;
+        // Fallback for mock services if needed (simulated)
+        const price = service ? service.price : 0;
+        setBookingStep(3); // Loading
+        // DEMO MODE BYPASS
+        if (storeConfig.slug.startsWith('demo/')) {
+            setTimeout(() => {
+                setBookingStep(4);
+                addToast('Payment successful & Booking confirmed!', 'success');
+            }, 1500);
+            return;
+        }
+        if (!payazaPublicKey) {
+            addToast('Payment gateway not configured', 'error');
+            setBookingStep(2);
+            return;
+        }
+        const customerEmail = isAuthenticated && user ? user.email : guestInfo.email;
+        const customerFirstName = isAuthenticated && user ? user.firstName : guestInfo.firstName;
+        const customerLastName = isAuthenticated && user ? user.lastName : guestInfo.lastName;
+        const customerPhone = isAuthenticated && user ? (user.phone || '') : guestInfo.phone;
+        await checkout({
+            amount: price,
+            email: customerEmail,
+            firstName: customerFirstName,
+            lastName: customerLastName,
+            phone: customerPhone,
+            reference: `BK-${Date.now()}`,
+            currency: storeConfig.settings.currency || 'USD',
+        });
+    };
+    // Generate next 7 days
+    const days = Array.from({ length: 7 }, (_, i) => {
+        const d = new Date();
+        d.setDate(d.getDate() + i);
+        return {
+            date: d,
+            dayName: formatDateSafe(d, undefined, { weekday: 'short' }),
+            dayNumber: d.getDate(),
+            fullDate: formatDateSafe(d, undefined, { month: 'long', day: 'numeric', year: 'numeric' })
+        };
+    });
+    // Theme Colors
+    const bgPrimary = getThemeColor(storeConfig, 'background', 'primary', '#FAFAFA');
+    const bgOverlay = getThemeColor(storeConfig, 'background', 'overlay', 'rgba(255,255,255,0.5)');
+    const textPrimary = getThemeColor(storeConfig, 'text', 'primary', '#1E293B');
+    const blob1 = getThemeColor(storeConfig, 'layoutSpecific', 'blob1', '#FECDD3');
+    const blob2 = getThemeColor(storeConfig, 'layoutSpecific', 'blob2', '#DDD6FE');
+    const blob3 = getThemeColor(storeConfig, 'layoutSpecific', 'blob3', '#E9D5FF');
+    return (_jsx(BookingContext.Provider, { value: { openBooking, closeBooking }, children: _jsx(AlertModalProvider, { children: _jsxs("div", { className: "min-h-screen font-sans", style: { backgroundColor: bgPrimary, color: textPrimary }, children: [_jsxs("div", { className: "fixed inset-0 z-0 pointer-events-none opacity-40", children: [_jsx("div", { className: "absolute top-0 right-0 w-[600px] h-[600px] rounded-full mix-blend-multiply filter blur-3xl animate-blob", style: { backgroundColor: blob1 } }), _jsx("div", { className: "absolute top-0 left-0 w-[600px] h-[600px] rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000", style: { backgroundColor: blob2 } }), _jsx("div", { className: "absolute -bottom-32 left-20 w-[600px] h-[600px] rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000", style: { backgroundColor: blob3 } })] }), _jsxs("div", { className: "relative z-10 flex flex-col md:flex-row max-w-[1600px] mx-auto backdrop-blur-xl min-h-screen shadow-[0_0_100px_rgba(0,0,0,0.05)]", style: { backgroundColor: bgOverlay }, children: [_jsx(BookingAgendaSidebar, { storeConfig: storeConfig, onBookClick: () => openBooking() }), _jsxs("main", { "data-store-scroll-root": true, className: "flex-1 min-w-0 overflow-y-auto relative", children: [isBackendLoading && _jsx(PageContentLoader, {}), _jsx(PageAnimateWrapper, { children: children })] })] }), _jsxs(Modal, { isOpen: isBookingModalOpen, onClose: closeBooking, title: bookingStep === 2 ? getLayoutText(storeConfig, 'booking.completePayment', 'Complete Payment') : getLayoutText(storeConfig, 'booking.confirmBooking', 'Confirm Appointment'), className: "max-w-md bg-white rounded-3xl overflow-hidden", children: [bookingStep === 1 && (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "bg-rose-50/50 p-6 rounded-2xl border border-rose-100", children: [_jsx("h4", { className: "font-bold text-rose-900 text-sm uppercase tracking-wide mb-3", children: "Summary" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-rose-700", children: "Date" }), _jsx("span", { className: "font-bold text-slate-900", children: days[selectedDate].fullDate })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-rose-700", children: "Service" }), _jsx("span", { className: "font-bold text-slate-900", children: selectedService ? services.find(s => s.id === selectedService)?.name : 'Select a service' })] }), _jsxs("div", { className: "flex justify-between pt-2 border-t border-rose-200/50", children: [_jsx("span", { className: "text-rose-900 font-bold", children: "Total" }), _jsx("span", { className: "font-bold text-slate-900 text-lg", children: formatCurrency(selectedService ? (services.find(s => s.id === selectedService)?.price || 0) : 0, (selectedService ? services.find(s => s.id === selectedService)?.currency : null) || storeConfig.settings?.currency || 'USD') })] })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2", children: "Available Times" }), _jsx("div", { className: "grid grid-cols-3 gap-2", children: ['09:00', '10:00', '11:00', '13:00', '14:00', '15:00'].map(time => (_jsx("button", { onClick: () => setSelectedTime(time), className: `px-3 py-2.5 rounded-xl border text-sm font-medium transition-all ${selectedTime === time ? 'bg-rose-600 text-white border-rose-600' : 'border-gray-200 hover:border-rose-500 hover:text-rose-600 hover:bg-rose-50 focus:ring-2 focus:ring-rose-500 focus:outline-none'}`, children: time }, time))) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2", children: "Your Details" }), _jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [_jsx("input", { type: "text", placeholder: "First Name", className: "w-full border border-gray-200 rounded-xl p-3 text-sm focus:border-rose-500 outline-none", value: guestInfo.firstName, onChange: (e) => setGuestInfo({ ...guestInfo, firstName: e.target.value }) }), _jsx("input", { type: "text", placeholder: "Last Name", className: "w-full border border-gray-200 rounded-xl p-3 text-sm focus:border-rose-500 outline-none", value: guestInfo.lastName, onChange: (e) => setGuestInfo({ ...guestInfo, lastName: e.target.value }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx("input", { type: "email", placeholder: "Email", className: "w-full border border-gray-200 rounded-xl p-3 text-sm focus:border-rose-500 outline-none", value: guestInfo.email, onChange: (e) => setGuestInfo({ ...guestInfo, email: e.target.value }) }), _jsx("input", { type: "tel", placeholder: "Phone", className: "w-full border border-gray-200 rounded-xl p-3 text-sm focus:border-rose-500 outline-none", value: guestInfo.phone, onChange: (e) => setGuestInfo({ ...guestInfo, phone: e.target.value }) })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold uppercase tracking-wider text-slate-500 mb-2", children: "Special Requests" }), _jsx("textarea", { className: "w-full border border-gray-200 rounded-xl p-3 text-sm h-24 resize-none focus:border-rose-500 focus:ring-4 focus:ring-rose-500/10 outline-none transition-all", placeholder: "Any allergies or preferences?" })] })] }), _jsx(Button, { onClick: () => {
+                                            if (!guestInfo.email || !guestInfo.firstName || !guestInfo.lastName) {
+                                                addToast('Please fill in your details', 'error');
+                                                return;
+                                            }
+                                            if (!selectedTime) {
+                                                addToast('Please select a time', 'error');
+                                                return;
+                                            }
+                                            setBookingStep(2);
+                                        }, className: "w-full bg-slate-900 hover:bg-slate-800 h-12 rounded-xl text-lg font-medium shadow-lg", children: "Continue to Payment" })] })), bookingStep === 2 && (_jsxs("div", { className: "space-y-6 animate-in slide-in-from-right duration-300", children: [_jsxs("div", { className: "bg-slate-900 p-6 rounded-2xl text-white shadow-xl relative overflow-hidden", children: [_jsx("div", { className: "absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16 blur-xl" }), _jsxs("div", { className: "relative z-10", children: [_jsx("p", { className: "text-xs font-bold uppercase tracking-widest text-slate-400 mb-1", children: "Amount to Pay" }), _jsx("p", { className: "text-3xl font-serif font-bold", children: formatCurrency(selectedService ? (services.find(s => s.id === selectedService)?.price || 0) : 0, (selectedService ? services.find(s => s.id === selectedService)?.currency : null) || storeConfig.settings?.currency || 'USD') }), _jsxs("div", { className: "flex items-center gap-2 mt-4 text-xs text-slate-300", children: [_jsx(Lock, { className: "h-3 w-3" }), " Secure Payaza Transaction"] })] })] }), _jsxs("div", { className: "bg-slate-50 p-4 rounded-xl border border-slate-100", children: [_jsx("h4", { className: "font-bold text-sm mb-2 text-slate-900", children: "Billing Details" }), _jsxs("div", { className: "text-sm text-slate-600 space-y-1", children: [_jsxs("p", { children: [_jsx("span", { className: "font-medium text-slate-900", children: "Name:" }), " ", guestInfo.firstName, " ", guestInfo.lastName] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium text-slate-900", children: "Email:" }), " ", guestInfo.email] }), _jsxs("p", { children: [_jsx("span", { className: "font-medium text-slate-900", children: "Phone:" }), " ", guestInfo.phone] })] })] }), _jsx(Button, { onClick: handlePaymentSubmit, disabled: isPaymentLoading, className: "w-full bg-rose-600 hover:bg-rose-700 h-12 rounded-xl text-lg font-medium shadow-lg shadow-rose-600/20 flex items-center justify-center gap-2", children: isPaymentLoading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" }), "Processing..."] })) : (_jsx(_Fragment, { children: "Pay & Confirm Booking" })) }), _jsx("button", { type: "button", onClick: () => setBookingStep(1), className: "w-full text-sm text-slate-500 font-medium hover:text-slate-800", children: "Back to Details" })] })), bookingStep === 3 && (_jsxs("div", { className: "py-16 flex flex-col items-center justify-center space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "w-16 h-16 border-4 border-rose-100 border-t-rose-600 rounded-full animate-spin" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx(Sparkles, { className: "h-6 w-6 text-rose-600 animate-pulse" }) })] }), _jsx("p", { className: "text-slate-500 font-medium", children: "Processing secure payment..." })] })), bookingStep === 4 && (_jsxs("div", { className: "py-10 text-center space-y-6", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto shadow-lg shadow-green-900/10 animate-in zoom-in duration-300", children: _jsx(CheckCircle, { className: "h-10 w-10" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-2xl font-serif font-bold text-slate-900", children: "Payment Successful!" }), _jsx("p", { className: "text-slate-500 mt-2 max-w-[250px] mx-auto leading-relaxed", children: "Your appointment is confirmed. We've sent a receipt to your email." })] }), _jsx(Button, { onClick: closeBooking, className: "w-full bg-slate-900 hover:bg-black h-12 rounded-xl font-medium", children: "Done" })] }))] })] }) }) }));
+}

package/dist/layouts/shared/wrappers/ClothingLayout.d.ts

@@ -0,0 +1,10 @@
+import { StoreConfig } from '../../../lib/store-types';
+import '../../clothing/styles/clothing.css';
+interface ClothingLayoutProps {
+    children: React.ReactNode;
+    storeConfig: StoreConfig;
+}
+/** Fashion Hub shell — scoped CSS + theme tokens under data-layout="clothing". */
+export declare function ClothingLayout({ children, storeConfig }: ClothingLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ClothingLayout.d.ts.map

package/dist/layouts/shared/wrappers/ClothingLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClothingLayout.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/wrappers/ClothingLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AASvD,OAAO,oCAAoC,CAAC;AAE5C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,kFAAkF;AAClF,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,mBAAmB,2CAkD5E"}

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

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StoreHeader } from '../components/StoreHeader.js';
+import { StoreFooter } from '../components/StoreFooter.js';
+import { PageAnimateWrapper } from '../../../components/ui/page-animate-wrapper.js';
+import { PageContentLoader } from '../../../components/ui/page-content-loader.js';
+import { useStore } from '../../../lib/store-context.js';
+import { useLoading } from '../../../lib/loading-context.js';
+import { getThemeColor } from '../../../lib/utils/asset-helpers.js';
+import { AlertModalProvider } from '../../../components/ui/alert-modal.js';
+import '../../clothing/styles/clothing.css';
+/** Fashion Hub shell — scoped CSS + theme tokens under data-layout="clothing". */
+export function ClothingLayout({ children, storeConfig }) {
+    const { cartCount } = useStore();
+    const { isBackendLoading } = useLoading();
+    const shouldShowHeader = storeConfig.headerConfig?.show ?? true;
+    const bgPrimary = getThemeColor(storeConfig, 'background', 'primary', '#FFFFFF');
+    const bgSecondary = getThemeColor(storeConfig, 'background', 'secondary', '#FAFAFA');
+    const bgDark = getThemeColor(storeConfig, 'background', 'dark', '#0F0F0F');
+    const textPrimary = getThemeColor(storeConfig, 'text', 'primary', '#1F2937');
+    const textSecondary = getThemeColor(storeConfig, 'text', 'secondary', '#6B7280');
+    const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
+    const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
+    const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
+    const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
+    const cssVariables = {
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
+        '--layout-clothing-primary': storeConfig.branding.primaryColor,
+        '--theme-bg-primary': bgPrimary,
+        '--theme-bg-secondary': bgSecondary,
+        '--theme-bg-dark': bgDark,
+        '--theme-text-primary': textPrimary,
+        '--theme-text-secondary': textSecondary,
+        '--theme-text-inverse': textInverse,
+        '--theme-border-primary': borderPrimary,
+        '--theme-border-secondary': borderSecondary,
+        '--theme-accent-hover': accentHover,
+        ...(accentFocus ? { '--theme-accent-focus': accentFocus } : {}),
+    };
+    return (_jsx(AlertModalProvider, { children: _jsxs("div", { "data-layout": "clothing", className: "layout-clothing min-h-screen flex flex-col bg-white text-gray-900", style: cssVariables, children: [shouldShowHeader && _jsx(StoreHeader, { storeConfig: storeConfig, cartItemCount: cartCount }), _jsxs("main", { className: "flex-1 relative", children: [isBackendLoading && _jsx(PageContentLoader, {}), _jsx(PageAnimateWrapper, { children: children })] }), _jsx(StoreFooter, { storeConfig: storeConfig })] }) }));
+}

package/dist/layouts/shared/wrappers/ClothingMinimalLayout.d.ts

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

package/dist/layouts/shared/wrappers/ClothingMinimalLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClothingMinimalLayout.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/wrappers/ClothingMinimalLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAUvD,UAAU,0BAA0B;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,0BAA0B,2CAyD1F"}

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClothingMinimalHeader } from '../components/headers/ClothingMinimalHeader.js';
+import { StoreFooter } from '../components/StoreFooter.js';
+import { PageAnimateWrapper } from '../../../components/ui/page-animate-wrapper.js';
+import { PageContentLoader } from '../../../components/ui/page-content-loader.js';
+import { usePathname } from 'next/navigation';
+import { useLoading } from '../../../lib/loading-context.js';
+import { getThemeColor } from '../../../lib/utils/asset-helpers.js';
+import { AlertModalProvider } from '../../../components/ui/alert-modal.js';
+export function ClothingMinimalLayout({ children, storeConfig }) {
+    const pathname = usePathname();
+    const { isBackendLoading } = useLoading();
+    const isHomePage = pathname === `/${storeConfig.slug}`;
+    // Determine if header should be shown
+    // In preview mode, hide header by default unless explicitly enabled
+    const shouldShowHeader = storeConfig.headerConfig?.show ?? true;
+    // Get theme colors with fallbacks
+    const bgPrimary = getThemeColor(storeConfig, 'background', 'primary', '#FFFFFF');
+    const bgSecondary = getThemeColor(storeConfig, 'background', 'secondary', '#FAFAFA');
+    const bgDark = getThemeColor(storeConfig, 'background', 'dark', '#0F0F0F');
+    const textPrimary = getThemeColor(storeConfig, 'text', 'primary', '#1F2937');
+    const textSecondary = getThemeColor(storeConfig, 'text', 'secondary', '#6B7280');
+    const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
+    const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
+    const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
+    const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
+    // Build CSS variables for theme colors
+    const cssVariables = {
+        // Branding colors (existing)
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
+        // Theme colors
+        '--theme-bg-primary': bgPrimary,
+        '--theme-bg-secondary': bgSecondary,
+        '--theme-bg-dark': bgDark,
+        '--theme-text-primary': textPrimary,
+        '--theme-text-secondary': textSecondary,
+        '--theme-text-inverse': textInverse,
+        '--theme-border-primary': borderPrimary,
+        '--theme-border-secondary': borderSecondary,
+        '--theme-accent-hover': accentHover,
+        ...(accentFocus ? { '--theme-accent-focus': accentFocus } : {}),
+    };
+    return (_jsx(AlertModalProvider, { children: _jsxs("div", { className: "min-h-screen flex flex-col", style: cssVariables, children: [shouldShowHeader && _jsx(ClothingMinimalHeader, { storeConfig: storeConfig }), _jsxs("main", { className: `flex-1 relative ${!isHomePage ? 'pt-20' : ''}`, children: [isBackendLoading && _jsx(PageContentLoader, {}), _jsx(PageAnimateWrapper, { children: children })] }), _jsx(StoreFooter, { storeConfig: storeConfig })] }) }));
+}

package/dist/layouts/shared/wrappers/ElectronicsLayout.d.ts

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

package/dist/layouts/shared/wrappers/ElectronicsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElectronicsLayout.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/wrappers/ElectronicsLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CA8ClF"}

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

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageAnimateWrapper } from '../../../components/ui/page-animate-wrapper.js';
+import { PageContentLoader } from '../../../components/ui/page-content-loader.js';
+import { useLoading } from '../../../lib/loading-context.js';
+import { getThemeColor } from '../../../lib/utils/asset-helpers.js';
+import { AlertModalProvider } from '../../../components/ui/alert-modal.js';
+export function ElectronicsLayout({ children, storeConfig }) {
+    const { isBackendLoading } = useLoading();
+    // Get theme colors with fallbacks
+    const bgPrimary = getThemeColor(storeConfig, 'background', 'primary', '#FFFFFF');
+    const bgSecondary = getThemeColor(storeConfig, 'background', 'secondary', '#FAFAFA');
+    const bgDark = getThemeColor(storeConfig, 'background', 'dark', '#0F0F0F');
+    const textPrimary = getThemeColor(storeConfig, 'text', 'primary', '#1F2937');
+    const textSecondary = getThemeColor(storeConfig, 'text', 'secondary', '#6B7280');
+    const textInverse = getThemeColor(storeConfig, 'text', 'inverse', '#FFFFFF');
+    const borderPrimary = getThemeColor(storeConfig, 'border', 'primary', '#E5E7EB');
+    const borderSecondary = getThemeColor(storeConfig, 'border', 'secondary', '#F3F4F6');
+    const accentHover = getThemeColor(storeConfig, 'accent', 'hover', storeConfig.branding.primaryColor);
+    const accentFocus = getThemeColor(storeConfig, 'accent', 'focus', '');
+    // Build CSS variables for theme colors
+    const cssVariables = {
+        // Branding colors (existing)
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
+        // Theme colors
+        '--theme-bg-primary': bgPrimary,
+        '--theme-bg-secondary': bgSecondary,
+        '--theme-bg-dark': bgDark,
+        '--theme-text-primary': textPrimary,
+        '--theme-text-secondary': textSecondary,
+        '--theme-text-inverse': textInverse,
+        '--theme-border-primary': borderPrimary,
+        '--theme-border-secondary': borderSecondary,
+        '--theme-accent-hover': accentHover,
+        ...(accentFocus ? { '--theme-accent-focus': accentFocus } : {}),
+    };
+    return (_jsx(AlertModalProvider, { children: _jsx("div", { className: "min-h-screen flex flex-col", style: cssVariables, children: _jsxs("main", { className: "flex-1 relative", children: [isBackendLoading && _jsx(PageContentLoader, {}), _jsx(PageAnimateWrapper, { children: children })] }) }) }));
+}

package/dist/layouts/shared/wrappers/FoodModernLayout.d.ts

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

package/dist/layouts/shared/wrappers/FoodModernLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FoodModernLayout.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/wrappers/FoodModernLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAUvD,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,qBAAqB,2CAwFhF"}

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FoodModernHeader } from '../components/headers/FoodModernHeader.js';
+import { StoreFooter } from '../components/StoreFooter.js';
+import { PageAnimateWrapper } from '../../../components/ui/page-animate-wrapper.js';
+import { PageContentLoader } from '../../../components/ui/page-content-loader.js';
+import { usePathname } from 'next/navigation';
+import { useLoading } from '../../../lib/loading-context.js';
+import { AlertModalProvider } from '../../../components/ui/alert-modal.js';
+export function FoodModernLayout({ children, storeConfig }) {
+    const pathname = usePathname();
+    const { isBackendLoading } = useLoading();
+    const isHomePage = pathname === `/${storeConfig.slug}`;
+    // Determine if header should be shown
+    // In preview mode, hide header by default unless explicitly enabled
+    const shouldShowHeader = storeConfig.headerConfig?.show ?? true;
+    // Get theme colors with fallbacks
+    // Food Modern uses strict dark theme overrides
+    const bgPrimary = '#0F0F0F';
+    const bgSecondary = '#1A1A1A';
+    const bgDark = '#000000';
+    const textPrimary = '#FFFFFF';
+    const textSecondary = '#A1A1AA'; // gray-400
+    const textInverse = '#000000';
+    const borderPrimary = 'rgba(255, 255, 255, 0.1)';
+    const borderSecondary = 'rgba(255, 255, 255, 0.05)';
+    const accentHover = storeConfig.branding.primaryColor || '#EA580C'; // orange-600
+    const accentFocus = '#C2410C'; // orange-700
+    // Build CSS variables for theme colors
+    const cssVariables = {
+        // Branding colors (existing)
+        '--store-primary': storeConfig.branding.primaryColor,
+        '--store-secondary': storeConfig.branding.secondaryColor || storeConfig.branding.primaryColor,
+        '--store-accent': storeConfig.branding.accentColor || storeConfig.branding.primaryColor,
+        // Theme colors
+        '--theme-bg-primary': bgPrimary,
+        '--theme-bg-secondary': bgSecondary,
+        '--theme-bg-dark': bgDark,
+        '--theme-text-primary': textPrimary,
+        '--theme-text-secondary': textSecondary,
+        '--theme-text-inverse': textInverse,
+        '--theme-border-primary': borderPrimary,
+        '--theme-border-secondary': borderSecondary,
+        '--theme-accent-hover': accentHover,
+        '--theme-accent-focus': accentFocus,
+    };
+    return (_jsx(AlertModalProvider, { children: _jsxs("div", { className: "min-h-screen flex flex-col bg-[#0F0F0F] text-white selection:bg-orange-500 selection:text-white", style: cssVariables, children: [shouldShowHeader && _jsx(FoodModernHeader, { storeConfig: storeConfig }), _jsxs("main", { className: `flex-1 relative ${!isHomePage ? 'pt-24' : ''}`, children: [isBackendLoading && _jsx(PageContentLoader, {}), _jsx(PageAnimateWrapper, { children: children })] }), _jsx(StoreFooter, { storeConfig: storeConfig })] }) }));
+}

package/dist/layouts/shared/wrappers/MotivationalLayout.d.ts

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

package/dist/layouts/shared/wrappers/MotivationalLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MotivationalLayout.d.ts","sourceRoot":"","sources":["../../../../src/layouts/shared/wrappers/MotivationalLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAYvD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,uBAAuB,2CA6DpF"}