storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/electronics-grid/pages/ProductsPage.js

@@ -1,39 +1,35 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
-import { Sheet } from '../../../components/ui/sheet.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { ProductCard } from '../../../components/ui/product-card.js';
-import { ProductGridSkeleton } from '../../../components/ui/skeletons/index.js';
-import { CategoryTree } from '../../../components/ui/category-tree.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { useLoading } from '../../../lib/loading-context.js';
-import { useAnalytics } from '../../../hooks/use-analytics.js';
+import { Button } from '../../../components/ui/button';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
+import { Sheet } from '../../../components/ui/sheet';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { ProductCard } from '../../../components/ui/product-card';
+import { ProductGridSkeleton } from '../../../components/ui/skeletons';
+import { CategoryTree } from '../../../components/ui/category-tree';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
+import { useLoading } from '../../../lib/loading-context';
+import { useAnalytics } from '../../../hooks/use-analytics';
 import { ChevronDown, ChevronUp, Star, Check, Search, RotateCcw, SlidersHorizontal } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import { useState, useMemo, useEffect, Suspense } from 'react';
-import { formatCurrency, isEditorPreviewMode, resolveStoreProductsForDisplay } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { useCatalogPriceRange } from '../../../hooks/use-catalog-price-range.js';
-import { getAllCategoryIds, flattenCategoryTree, buildCategoryTree } from '../../../lib/utils/category-tree.js';
-import { getBannerImage, getLayoutText } from '../../../lib/utils/asset-helpers.js';
-import { shouldUseAPI } from '../../../lib/utils/demo-detection.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-function ProductsPageContent({ storeConfig: initialConfig }) {
-    const { store, addToCart } = useStore();
-    const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { products: loadedProducts, categories: loadedCategories, isLoading: isLoadingProducts } = useCatalogLoader(storeConfig, { fetchServices: false });
+import { useState, useMemo, useEffect, useRef, Suspense } from 'react';
+import { useProductBrands } from '../../../hooks/use-product-brands';
+import { filterActiveProducts } from '../../../lib/utils';
+import { getAllCategoryIds, flattenCategoryTree, buildCategoryTree } from '../../../lib/utils/category-tree';
+import { getBannerImage, getLayoutText } from '../../../lib/utils/asset-helpers';
+import { shouldUseAPI } from '../../../lib/utils/demo-detection';
+import { useCatalogPriceRange } from '../../../hooks/use-catalog-price-range';
+import { isWithinActivePriceRange } from '../../../lib/utils/catalog-price-bounds';
+import { ProductPriceFilterSection } from '../../shared/components/ProductPriceFilterSection';
+function ProductsPageContent({ storeConfig }) {
     const searchParams = useSearchParams();
     const categoryParam = searchParams.get('category');
     const [products, setProducts] = useState(() => {
-        let initialProducts = resolveStoreProductsForDisplay(loadedProducts, isPreview);
-        // Ensure all products have unique IDs just in case mock data has duplicates
-        // or if we are artificially duplicating for grid demo
-        if (initialProducts.length > 0) {
-            // If very few products, duplicate them to show grid structure
+        // Filter out inactive/deleted products first
+        let initialProducts = filterActiveProducts(storeConfig.products || []);
+        // Template demos only: pad thin catalogs so the grid has structure.
+        if (initialProducts.length > 0 && !shouldUseAPI(storeConfig.slug)) {
             if (initialProducts.length < 4) {
                 initialProducts = [...initialProducts, ...initialProducts].map((p, i) => ({
                     ...p,
@@ -42,8 +38,6 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
                 }));
             }
             else {
-                // Even if enough products, ensure IDs are unique strings
-                // (Mock data usually is fine, but this is a safeguard)
                 const seenIds = new Set();
                 initialProducts = initialProducts.map((p, i) => {
                     if (seenIds.has(p.id)) {
@@ -56,19 +50,19 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
         }
         return initialProducts;
     });
-    const categories = loadedCategories;
-    useEffect(() => {
-        if (loadedProducts.length > 0) {
-            setProducts(resolveStoreProductsForDisplay(loadedProducts, isPreview));
-        }
-    }, [loadedProducts, isPreview]);
+    const [isLoadingProducts, setIsLoadingProducts] = useState(false);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [totalProducts, setTotalProducts] = useState(storeConfig.productsTotal || storeConfig.products?.length || 0);
+    const categories = storeConfig.categories || [];
+    const { addToCart } = useStore();
     const { addToast } = useToast();
     const { startBackendLoading, stopBackendLoading } = useLoading();
     const { trackEvent } = useAnalytics();
     // State for filters & sort
-    const { priceRange, setPriceRange, catalogBounds, sliderMax, resetPriceRange, hasActivePriceFilter, } = useCatalogPriceRange(products);
     const [selectedBrands, setSelectedBrands] = useState([]);
     const [selectedCategories, setSelectedCategories] = useState([]);
+    const storeCurrency = storeConfig.settings?.currency || 'NGN';
+    const { priceRange, setPriceRange, catalogBounds, resetPriceRange, hasActivePriceFilter, } = useCatalogPriceRange(products);
     const [selectedCategoryFilter, setSelectedCategoryFilter] = useState(null);
     // Initialize filters from URL
     useEffect(() => {
@@ -83,24 +77,20 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
     const [sortBy, setSortBy] = useState('featured');
     const [visibleProducts, setVisibleProducts] = useState(12);
     const [isFiltering, setIsFiltering] = useState(false);
-    // Extract unique brands
-    const brands = useMemo(() => {
+    // Fallback brands from the loaded page; full catalog brands come from the brands API.
+    const fallbackBrands = useMemo(() => {
         const brandSet = new Set();
         products.forEach(product => {
-            // First check specifications for Brand
             if (product.specifications?.Brand) {
                 brandSet.add(product.specifications.Brand);
             }
-            else {
-                // Fallback to regex matching common brand names
-                const brandMatch = product.name.match(/\b(Reebok|Nike|Adidas|Puma|Zara|Dickies|Vans|Uniqlo|New Balance|Converse|Sony|Samsung|Apple|Dell|HP|Gucci|Prada|Versace|Armani|Calvin Klein|Tommy Hilfiger|Levi's|Gap|H&M|Forever 21|ASOS|Shein|Amazon|Microsoft|LG|Canon|Nikon|Bose|JBL|Beats|Ray-Ban|Oakley)\b/i);
-                if (brandMatch) {
-                    brandSet.add(brandMatch[1]);
-                }
+            else if (product.brand) {
+                brandSet.add(product.brand);
             }
         });
         return Array.from(brandSet).sort();
     }, [products]);
+    const brands = useProductBrands(storeConfig.id, fallbackBrands);
     // Track filter changes and show loading
     useEffect(() => {
         setIsFiltering(true);
@@ -144,7 +134,7 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
                 }
             }
             // Price filter
-            if (product.price < priceRange[0] || product.price > priceRange[1]) {
+            if (!isWithinActivePriceRange(product.price, priceRange, catalogBounds)) {
                 return false;
             }
             // Category Filter (Top Buttons)
@@ -190,8 +180,87 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
         }
         return result;
     }, [products, selectedBrands, effectiveCategoryIds, priceRange, selectedCategoryFilter, minRating, showInStockOnly, sortBy, categories]);
+    const productQuery = useMemo(() => {
+        const categoryIds = new Set(effectiveCategoryIds);
+        const selectedCategory = categories.find((category) => category.slug === selectedCategoryFilter);
+        if (selectedCategory)
+            getAllCategoryIds(selectedCategory).forEach((id) => categoryIds.add(id));
+        return {
+            storeId: storeConfig.id,
+            categoryIds: categoryIds.size ? Array.from(categoryIds).join(',') : undefined,
+            brands: selectedBrands.length ? selectedBrands.join(',') : undefined,
+            minPrice: priceRange[0] || undefined,
+            maxPrice: priceRange[1] < catalogBounds.max ? priceRange[1] : undefined,
+            rating: minRating || undefined,
+            inStock: showInStockOnly || undefined,
+            sortBy,
+        };
+    }, [catalogBounds.max, categories, effectiveCategoryIds, minRating, priceRange, selectedBrands, selectedCategoryFilter, showInStockOnly, sortBy, storeConfig.id]);
+    const skipBootstrapRefetch = useRef(true);
+    useEffect(() => {
+        let cancelled = false;
+        const isDefaultQuery = !productQuery.categoryIds &&
+            !productQuery.brands &&
+            !productQuery.minPrice &&
+            productQuery.maxPrice === undefined &&
+            !productQuery.rating &&
+            !productQuery.inStock &&
+            productQuery.sortBy === 'featured';
+        const fetchFilteredProducts = async () => {
+            // Keep SSR bootstrap first paint; only refetch when filters/sort change.
+            if (skipBootstrapRefetch.current && isDefaultQuery && products.length > 0) {
+                skipBootstrapRefetch.current = false;
+                setTotalProducts(storeConfig.productsTotal || products.length);
+                return;
+            }
+            skipBootstrapRefetch.current = false;
+            setIsLoadingProducts(true);
+            try {
+                const { productService } = await import('../../../lib/services/product.service');
+                const { transformProductToStoreProduct } = await import('../../../lib/store-config-utils');
+                const response = await productService.getProducts({ ...productQuery, page: 1, limit: 12 });
+                if (cancelled)
+                    return;
+                setProducts(response.data.map(transformProductToStoreProduct));
+                setCurrentPage(1);
+                setTotalProducts(response.meta.total);
+                setVisibleProducts(12);
+            }
+            catch (error) {
+                if (!cancelled)
+                    console.error('Failed to fetch products:', error);
+            }
+            finally {
+                if (!cancelled)
+                    setIsLoadingProducts(false);
+            }
+        };
+        fetchFilteredProducts();
+        return () => { cancelled = true; };
+    }, [productQuery]);
     const displayedProducts = filteredAndSortedProducts.slice(0, visibleProducts);
-    const hasMore = visibleProducts < filteredAndSortedProducts.length;
+    const hasMore = currentPage * 12 < totalProducts;
+    const handleLoadMore = async () => {
+        if (isLoadingProducts || !hasMore)
+            return;
+        setIsLoadingProducts(true);
+        try {
+            const { productService } = await import('../../../lib/services/product.service');
+            const { transformProductToStoreProduct } = await import('../../../lib/store-config-utils');
+            const nextPage = currentPage + 1;
+            const response = await productService.getProducts({ ...productQuery, page: nextPage, limit: 12 });
+            setProducts((current) => [...current, ...response.data.map(transformProductToStoreProduct)]);
+            setCurrentPage(nextPage);
+            setTotalProducts(response.meta.total);
+            setVisibleProducts((current) => current + 12);
+        }
+        catch (error) {
+            console.error('Failed to load more products:', error);
+        }
+        finally {
+            setIsLoadingProducts(false);
+        }
+    };
     const handleAddToCart = (product) => {
         addToCart(product);
         addToast(`${product.name} added to cart`, 'success');
@@ -249,7 +318,7 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
     const secondaryButtonText = hasSecondaryButtonFromConfig
         ? (categoryHeaderSecondaryButton && categoryHeaderSecondaryButton.trim() !== '' ? categoryHeaderSecondaryButton.trim() : null)
         : getLayoutText(storeConfig, 'sections.categories.viewAll', 'View Categories');
-    return (_jsxs("div", { className: "min-h-screen bg-white font-sans text-slate-900", children: [_jsxs("div", { className: "relative overflow-hidden bg-white", children: [categoryHeaderImage && (_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(ImageWithFallback, { src: categoryHeaderImage, alt: categoryHeaderTitle || storeConfig.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60" })] })), !categoryHeaderImage && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-gray-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-gray-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow", style: { animationDelay: '2s' } })] })), _jsx("div", { className: `container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 pb-16 lg:pt-20 lg:pb-24 ${categoryHeaderImage ? 'min-h-[500px] flex items-center' : ''}`, children: _jsx("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: _jsxs("div", { className: `w-full text-center lg:text-left animate-fade-in-up ${categoryHeaderImage ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: categoryHeaderImage ? 'light' : 'default' }) }), showLayoutDecorativeBadges() && (_jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase mb-6 ${categoryHeaderImage ? 'bg-white/20 backdrop-blur-md text-white border border-white/30' : 'bg-black/5 text-gray-900'}`, children: [_jsx("span", { className: `w-2 h-2 rounded-full animate-pulse ${categoryHeaderImage ? 'bg-white' : 'bg-black'}` }), getLayoutText(storeConfig, 'common.newArrivals', 'New Arrivals 2024')] })), _jsx("h1", { className: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1] ${categoryHeaderImage ? 'text-white' : 'text-gray-900'}`, children: categoryHeaderTitle || (_jsxs(_Fragment, { children: ["Explore The Collections of ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900", children: storeConfig.name })] })) }), _jsx("p", { className: `text-lg mb-8 leading-relaxed max-w-lg mx-auto lg:mx-0 ${categoryHeaderImage ? 'text-white/90' : 'text-gray-600'}`, children: getLayoutText(storeConfig, 'category_header:description', "Don't miss out on shopping our latest collection! curated for quality and style. Experience the perfect blend of modern aesthetics and premium craftsmanship.") }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center lg:justify-start", children: [primaryButtonText && primaryButtonText.trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${categoryHeaderImage ? 'bg-white text-gray-900 hover:bg-gray-100' : ''}`, onClick: () => {
+    return (_jsxs("div", { className: "min-h-screen bg-white font-sans text-slate-900", children: [_jsxs("div", { className: "relative overflow-hidden bg-white", children: [categoryHeaderImage && (_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(ImageWithFallback, { src: categoryHeaderImage, alt: categoryHeaderTitle || storeConfig.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60" })] })), !categoryHeaderImage && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-gray-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-gray-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow", style: { animationDelay: '2s' } })] })), _jsx("div", { className: `container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 pb-16 lg:pt-20 lg:pb-24 ${categoryHeaderImage ? 'min-h-[500px] flex items-center' : ''}`, children: _jsx("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: _jsxs("div", { className: `w-full text-center lg:text-left animate-fade-in-up ${categoryHeaderImage ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx("div", { className: categoryHeaderImage ? 'bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20' : '', children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: categoryHeaderImage ? 'light' : 'default' }) }) }), _jsxs("div", { className: `inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase mb-6 ${categoryHeaderImage ? 'bg-white/20 backdrop-blur-md text-white border border-white/30' : 'bg-black/5 text-gray-900'}`, children: [_jsx("span", { className: `w-2 h-2 rounded-full animate-pulse ${categoryHeaderImage ? 'bg-white' : 'bg-black'}` }), getLayoutText(storeConfig, 'common.newArrivals', 'New Arrivals 2024')] }), _jsx("h1", { className: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1] ${categoryHeaderImage ? 'text-white' : 'text-gray-900'}`, children: categoryHeaderTitle || (_jsxs(_Fragment, { children: ["Explore The Collections of ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900", children: storeConfig.name })] })) }), _jsx("p", { className: `text-lg mb-8 leading-relaxed max-w-lg mx-auto lg:mx-0 ${categoryHeaderImage ? 'text-white/90' : 'text-gray-600'}`, children: getLayoutText(storeConfig, 'category_header:description', "Don't miss out on shopping our latest collection! curated for quality and style. Experience the perfect blend of modern aesthetics and premium craftsmanship.") }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center lg:justify-start", children: [primaryButtonText && primaryButtonText.trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${categoryHeaderImage ? 'bg-white text-gray-900 hover:bg-gray-100' : ''}`, onClick: () => {
                                                     const element = document.getElementById('product-grid');
                                                     element?.scrollIntoView({ behavior: 'smooth' });
                                                 }, children: primaryButtonText })), secondaryButtonText && secondaryButtonText.trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${categoryHeaderImage ? 'bg-white/10 backdrop-blur-md text-white border border-white/30 hover:bg-white/20' : 'bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200'}`, onClick: () => {
@@ -262,12 +331,12 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
                                                     setSelectedCategories(prev => isSelected
                                                         ? [...prev, categoryId]
                                                         : prev.filter(id => id !== categoryId));
-                                                }, mode: "checkbox" })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide", children: "Price Range" }), (priceRange[0] > 0 || hasActivePriceFilter) && (_jsx("button", { onClick: () => resetPriceRange(), className: "text-xs text-gray-600 hover:text-blue-600 font-medium transition-colors", children: "Reset" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { type: "range", min: "0", max: sliderMax, step: "50", value: priceRange[1], onChange: (e) => setPriceRange([priceRange[0], parseInt(e.target.value)]), className: "flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-gray-900" }) }), _jsxs("div", { className: "flex items-center justify-between text-sm font-medium", children: [_jsx("span", { className: "text-gray-900", children: formatCurrency(priceRange[0], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }), _jsx("span", { className: "text-gray-900", children: formatCurrency(priceRange[1], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("button", { onClick: () => setPriceRange([0, 100]), className: "px-3 py-2 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), " - ", formatCurrency(100, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 })] }), _jsxs("button", { onClick: () => setPriceRange([0, 500]), className: "px-3 py-2 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), " - ", formatCurrency(500, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 })] })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Rating" }), _jsx("div", { className: "space-y-2", children: [4, 3, 2, 1].map((rating) => (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded-full border flex items-center justify-center transition-colors ${minRating === rating ? 'border-blue-600 bg-blue-600' : 'border-gray-300 group-hover:border-blue-400'}`, children: minRating === rating && _jsx("div", { className: "w-2.5 h-2.5 bg-white rounded-full" }) }), _jsx("input", { type: "radio", name: "rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "hidden" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3.5 w-3.5 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "lg:col-span-3", children: [_jsxs("div", { className: "lg:hidden mb-6 flex items-center justify-between", children: [_jsxs(Button, { onClick: () => setIsFilterOpen(true), variant: "outline", className: "flex items-center gap-2", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), " Filters"] }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-700 focus:outline-none", children: [_jsx("option", { value: "featured", children: "Sort by: Featured" }), _jsx("option", { value: "newest", children: "Sort by: Newest" }), _jsx("option", { value: "price-asc", children: "Sort by: Price Low-High" }), _jsx("option", { value: "price-desc", children: "Sort by: Price High-Low" })] })] }), _jsxs("div", { className: "hidden lg:flex items-center justify-between mb-6", children: [_jsxs("p", { className: "text-sm text-gray-600", children: ["Showing ", _jsx("span", { className: "font-semibold text-gray-900", children: filteredAndSortedProducts.length }), " products"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Sort by:" }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-900 focus:outline-none cursor-pointer hover:text-blue-600 transition-colors", children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "newest", children: "Newest Arrivals" }), _jsx("option", { value: "price-asc", children: "Price: Low to High" }), _jsx("option", { value: "price-desc", children: "Price: High to Low" }), _jsx("option", { value: "rating", children: "Top Rated" })] })] })] }), isLoadingProducts || isFiltering ? (_jsx(ProductGridSkeleton, { count: 12, columns: 3 })) : displayedProducts.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: displayedProducts.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }), hasMore && (_jsx("div", { className: "mt-12 text-center", children: _jsx(Button, { onClick: () => setVisibleProducts(prev => prev + 12), variant: "outline", className: "min-w-[200px]", children: "Load More" }) }))] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 bg-white rounded-lg border border-dashed border-gray-200 text-center", children: [_jsx("div", { className: "w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-4 text-gray-400", children: _jsx(Search, { className: "h-6 w-6" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: "No products found" }), _jsx("p", { className: "text-sm text-gray-500 mb-6", children: "Try adjusting your filters or search criteria." }), _jsx(Button, { onClick: clearAllFilters, variant: "outline", children: "Clear All Filters" })] }))] })] })] }), _jsxs(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "right", children: [_jsxs("div", { className: "flex flex-col h-full overflow-y-auto pb-20 space-y-8 p-1", children: [_jsxs("div", { className: "pb-6 border-b border-gray-100", children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: "In Stock Only" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Price Range" }), _jsx("input", { type: "range", min: "0", max: sliderMax, step: "50", value: priceRange[1], onChange: (e) => setPriceRange([priceRange[0], parseInt(e.target.value)]), className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black mb-4" }), _jsxs("div", { className: "flex justify-between font-bold text-sm", children: [_jsx("span", { children: formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }), _jsxs("span", { children: [formatCurrency(priceRange[1], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), "+"] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
+                                                }, mode: "checkbox" })] }), _jsx(ProductPriceFilterSection, { currency: storeCurrency, priceRange: priceRange, onPriceRangeChange: setPriceRange, bounds: catalogBounds, isFilterActive: hasActivePriceFilter, onReset: resetPriceRange }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Rating" }), _jsx("div", { className: "space-y-2", children: [4, 3, 2, 1].map((rating) => (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded-full border flex items-center justify-center transition-colors ${minRating === rating ? 'border-blue-600 bg-blue-600' : 'border-gray-300 group-hover:border-blue-400'}`, children: minRating === rating && _jsx("div", { className: "w-2.5 h-2.5 bg-white rounded-full" }) }), _jsx("input", { type: "radio", name: "rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "hidden" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3.5 w-3.5 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "lg:col-span-3", children: [_jsxs("div", { className: "lg:hidden mb-6 flex items-center justify-between", children: [_jsxs(Button, { onClick: () => setIsFilterOpen(true), variant: "outline", className: "flex items-center gap-2", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), " Filters"] }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-700 focus:outline-none", children: [_jsx("option", { value: "featured", children: "Sort by: Featured" }), _jsx("option", { value: "newest", children: "Sort by: Newest" }), _jsx("option", { value: "price-asc", children: "Sort by: Price Low-High" }), _jsx("option", { value: "price-desc", children: "Sort by: Price High-Low" })] })] }), _jsxs("div", { className: "hidden lg:flex items-center justify-between mb-6", children: [_jsxs("p", { className: "text-sm text-gray-600", children: ["Showing ", _jsx("span", { className: "font-semibold text-gray-900", children: filteredAndSortedProducts.length }), " products"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Sort by:" }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-900 focus:outline-none cursor-pointer hover:text-blue-600 transition-colors", children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "newest", children: "Newest Arrivals" }), _jsx("option", { value: "price-asc", children: "Price: Low to High" }), _jsx("option", { value: "price-desc", children: "Price: High to Low" }), _jsx("option", { value: "rating", children: "Top Rated" })] })] })] }), isLoadingProducts || isFiltering ? (_jsx(ProductGridSkeleton, { count: 12, columns: 3 })) : displayedProducts.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: displayedProducts.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }), hasMore && (_jsx("div", { className: "mt-12 text-center", children: _jsx(Button, { onClick: handleLoadMore, variant: "outline", className: "min-w-[200px]", children: "Load More" }) }))] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 bg-white rounded-lg border border-dashed border-gray-200 text-center", children: [_jsx("div", { className: "w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-4 text-gray-400", children: _jsx(Search, { className: "h-6 w-6" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: "No products found" }), _jsx("p", { className: "text-sm text-gray-500 mb-6", children: "Try adjusting your filters or search criteria." }), _jsx(Button, { onClick: clearAllFilters, variant: "outline", children: "Clear All Filters" })] }))] })] })] }), _jsxs(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "right", children: [_jsxs("div", { className: "flex flex-col h-full overflow-y-auto pb-20 space-y-8 p-1", children: [_jsxs("div", { className: "pb-6 border-b border-gray-100", children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: "In Stock Only" })] })] }), _jsx(ProductPriceFilterSection, { currency: storeCurrency, priceRange: priceRange, onPriceRangeChange: setPriceRange, bounds: catalogBounds, isFilterActive: hasActivePriceFilter, onReset: resetPriceRange }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
                                             setSelectedCategories(prev => isSelected
                                                 ? [...prev, categoryId]
                                                 : prev.filter(id => id !== categoryId));
                                         }, mode: "checkbox" })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Brand" }), brands.length > 0 ? (_jsx("div", { className: "space-y-3", children: brands.map(brand => (_jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: selectedBrands.includes(brand), onChange: () => setSelectedBrands(prev => prev.includes(brand) ? prev.filter(b => b !== brand) : [...prev, brand]), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: brand })] }, brand))) })) : (_jsx("p", { className: "text-xs text-gray-500 italic", children: "No brands available" }))] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Rating" }), _jsx("div", { className: "space-y-3", children: [4, 3, 2, 1].map(rating => (_jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "radio", name: "mobile-rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "rounded-full border-gray-300 text-black focus:ring-black" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3 w-3 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100 flex gap-3", children: [_jsx(Button, { onClick: clearAllFilters, variant: "outline", className: "flex-1 h-12 font-bold rounded-lg border-gray-300", children: "Reset" }), _jsx(Button, { onClick: () => setIsFilterOpen(false), className: "flex-[2] bg-black text-white hover:bg-blue-600 h-12 font-bold rounded-lg transition-colors", children: "View Results" })] })] })] }));
 }
-export function ElectronicsGridProductsListingPage(props) {
+export function ProductsPage(props) {
     return (_jsx(Suspense, { fallback: _jsx("div", { className: "min-h-screen flex items-center justify-center", children: _jsx("div", { className: "w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin" }) }), children: _jsx(ProductsPageContent, { ...props }) }));
 }

package/dist/layouts/electronics-grid/pages/TermsPage.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollText, ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
-import { formatDateSafe } from '../../../utils/date.js';
+import { formatDateSafe } from '../../../utils/date';
 export function ElectronicsGridTermsPage({ storeConfig }) {
     const primaryColor = storeConfig.branding.primaryColor;
     return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsx("div", { className: "bg-white border-b", children: _jsxs("div", { className: "container mx-auto px-4 py-8", children: [_jsxs(Link, { href: `/${storeConfig.slug}`, className: "inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 transition-colors mb-6", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Back to Home"] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-12 h-12 rounded-xl flex items-center justify-center", style: { backgroundColor: `${primaryColor}15` }, children: _jsx(ScrollText, { className: "w-6 h-6", style: { color: primaryColor } }) }), _jsx("h1", { className: "text-3xl font-bold text-gray-900", children: "Terms of Service" })] })] }) }), _jsx("div", { className: "container mx-auto px-4 py-12 max-w-4xl", children: _jsxs("div", { className: "bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100 prose prose-lg max-w-none", children: [_jsxs("p", { className: "text-gray-500 lead", children: ["Last updated: ", formatDateSafe(new Date(), undefined, { month: 'long', day: 'numeric', year: 'numeric' })] }), _jsxs("p", { children: ["Please read these Terms of Service (\"Terms\", \"Terms of Service\") carefully before using the ", storeConfig.name, "website (the \"Service\") operated by ", storeConfig.name, " (\"us\", \"we\", or \"our\")."] }), _jsx("h3", { children: "1. Conditions of Use" }), _jsxs("p", { children: ["By using this website, you certify that you have read and reviewed this Agreement and that you agree to comply with its terms. If you do not want to be bound by the terms of this Agreement, you are advised to leave the website accordingly. ", storeConfig.name, "only grants use and access of this website, its products, and its services to those who have accepted its terms."] }), _jsx("h3", { children: "2. Privacy Policy" }), _jsx("p", { children: "Before you continue using our website, we advise you to read our privacy policy regarding our user data collection. It will help you better understand our practices." }), _jsx("h3", { children: "3. Age Restriction" }), _jsxs("p", { children: ["You must be at least 18 (eighteen) years of age before you can use this website. By using this website, you warrant that you are at least 18 years of age and you may legally adhere to this Agreement. ", storeConfig.name, " assumes no responsibility for liabilities related to age misrepresentation."] }), _jsx("h3", { children: "4. Intellectual Property" }), _jsxs("p", { children: ["You agree that all materials, products, and services provided on this website are the property of ", storeConfig.name, ", its affiliates, directors, officers, employees, agents, suppliers, or licensors including all copyrights, trade secrets, trademarks, patents, and other intellectual property. You also agree that you will not reproduce or redistribute the ", storeConfig.name, "'s intellectual property in any way, including electronic, digital, or new trademark registrations."] }), _jsx("h3", { children: "5. User Accounts" }), _jsx("p", { children: "As a user of this website, you may be asked to register with us and provide private information. You are responsible for ensuring the accuracy of this information, and you are responsible for maintaining the safety and security of your identifying information. You are also responsible for all activities that occur under your account or password." }), _jsx("h3", { children: "6. Applicable Law" }), _jsxs("p", { children: ["By visiting this website, you agree that the laws of the location where ", storeConfig.name, " is based, without regard to principles of conflict laws, will govern these terms and conditions, or any dispute of any sort that might come between ", storeConfig.name, " and you, or its business partners and associates."] }), _jsx("h3", { children: "7. Disputes" }), _jsx("p", { children: "Any dispute related in any way to your visit to this website or to products you purchase from us shall be arbitrated by state or federal court and you consent to exclusive jurisdiction and venue of such courts." }), _jsx("h3", { children: "8. Indemnification" }), _jsxs("p", { children: ["You agree to indemnify ", storeConfig.name, " and its affiliates and hold ", storeConfig.name, " harmless against legal claims and demands that may arise from your use or misuse of our services. We reserve the right to select our own legal counsel."] }), _jsx("h3", { children: "9. Limitation on Liability" }), _jsxs("p", { children: [storeConfig.name, " is not liable for any damages that may occur to you as a result of your misuse of our website."] }), _jsxs("p", { children: [storeConfig.name, " reserves the right to edit, modify, and change this Agreement any time. We shall let our users know of these changes through electronic mail. This Agreement is an understanding between ", storeConfig.name, " and the user, and this supersedes and replaces all prior agreements regarding the use of this website."] })] }) })] }));

package/dist/layouts/electronics-grid/pages/TrackOrderPage.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Search, Package, Truck, CheckCircle, Clock, AlertCircle, Loader2, XCircle, RotateCcw } from 'lucide-react';
 import { useState, useEffect, useRef } from 'react';
 import { useSearchParams } from 'next/navigation';
-import { Button } from '../../../components/ui/button.js';
-import { formatDateSafe } from '../../../utils/date.js';
+import { Button } from '../../../components/ui/button';
+import { formatDateSafe } from '../../../utils/date';
 // Note: orderService removed - this page is shared and not editable in the editor
 // Order tracking functionality not available in preview mode
-import { useToast } from '../../../components/ui/toast.js';
-import { useLoading } from '../../../lib/loading-context.js';
+import { useToast } from '../../../components/ui/toast';
+import { useLoading } from '../../../lib/loading-context';
 export function ElectronicsGridTrackOrderPage({ storeConfig }) {
     const primaryColor = storeConfig.branding.primaryColor;
     const searchParams = useSearchParams();

package/dist/layouts/food/components/FoodHomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FoodHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food/components/FoodHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAoB/D,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,iBAAiB,2CAspC7E"}
+{"version":3,"file":"FoodHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food/components/FoodHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAiB,MAAM,mBAAmB,CAAC;AAe/D,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,iBAAiB,2CA2jC7E"}