storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/clothing/pages/ProductsPage.d.ts

@@ -2,6 +2,6 @@ import { StoreConfig } from '../../../lib/store-types';
 interface ProductsPageProps {
     storeConfig: StoreConfig;
 }
-export declare function ClothingProductsPage(props: ProductsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductsPage(props: ProductsPageProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ProductsPage.d.ts.map

package/dist/layouts/clothing/pages/ProductsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/pages/ProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AA2BrE,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAosBD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,iBAAiB,2CAM5D"}
+{"version":3,"file":"ProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing/pages/ProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AAyBrE,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAowBD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAMpD"}

package/dist/layouts/clothing/pages/ProductsPage.js

@@ -1,42 +1,37 @@
 '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 { 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 { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
-import { useClothingPayaza } from '../payaza-bindings.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-import { ProductPriceFilterSection } from '../../shared/components/ProductPriceFilterSection.js';
+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: initialConfig }) {
     const { store, addToCart } = useStore();
     const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { products: loadedProducts, categories: loadedCategories, isLoading: isLoadingProducts } = useCatalogLoader(storeConfig, { fetchServices: false });
     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,
@@ -45,8 +40,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)) {
@@ -59,19 +52,18 @@ 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 { addToast } = useToast();
     const { startBackendLoading, stopBackendLoading } = useLoading();
     const { trackEvent } = useAnalytics();
     // State for filters & sort
-    const { priceRange, setPriceRange, catalogBounds, 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(() => {
@@ -86,24 +78,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);
@@ -147,7 +135,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)
@@ -193,8 +181,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');
@@ -223,7 +290,6 @@ function ProductsPageContent({ storeConfig: initialConfig }) {
     // Get layout config and category header image
     const layoutConfig = storeConfig.layoutConfig;
     const isRealStore = shouldUseAPI(storeConfig.slug);
-    const { section, edit, image, inline } = useClothingPayaza(storeConfig, 'products');
     // Get products header config - check pages.products.productsHeader first, then fallback to sections.productsHeader
     const productsHeaderConfig = layoutConfig?.pages?.products?.productsHeader ||
         layoutConfig?.sections?.productsHeader;
@@ -245,25 +311,25 @@ 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: [productsHeaderConfig?.show !== false && (_jsxs("div", { ...section('productsHeader'), style: getPayazaSectionInlineStyle(storeConfig, 'products', 'productsHeader'), className: "relative overflow-hidden bg-white", children: [(productsHeaderConfig?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute inset-0 z-0", ...image('productsHeader', ['image']), children: [_jsx(ImageWithFallback, { src: productsHeaderConfig?.image || categoryHeaderImage, alt: productsHeaderConfig?.title || 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" })] })), !(productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: (productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'bg-white' : 'bg-black'}` }), _jsx("span", { ...inline('productsHeader', ['badge']), children: productsHeaderConfig?.badge || 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] ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'text-white' : 'text-gray-900'}`, ...edit('productsHeader', ['title']), children: productsHeaderConfig?.title || 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 ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'text-white/90' : 'text-gray-600'}`, ...edit('productsHeader', ['description']), children: productsHeaderConfig?.description || 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: [(productsHeaderConfig?.primaryButtonText || primaryButtonText) && (productsHeaderConfig?.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 ${(productsHeaderConfig?.image || 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: [productsHeaderConfig?.show !== false && (_jsxs("div", { className: "relative overflow-hidden bg-white", children: [(productsHeaderConfig?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute inset-0 z-0", children: [_jsx(ImageWithFallback, { src: productsHeaderConfig?.image || categoryHeaderImage, alt: productsHeaderConfig?.title || 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" })] })), !(productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx("div", { className: (productsHeaderConfig?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md px-4 py-2 rounded-full border border-white/20' : '', children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: (productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || 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 ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'bg-white' : 'bg-black'}` }), productsHeaderConfig?.badge || 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] ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'text-white' : 'text-gray-900'}`, children: productsHeaderConfig?.title || 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 ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'text-white/90' : 'text-gray-600'}`, children: productsHeaderConfig?.description || 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: [(productsHeaderConfig?.primaryButtonText || primaryButtonText) && (productsHeaderConfig?.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 ${(productsHeaderConfig?.image || categoryHeaderImage) ? 'bg-white text-gray-900 hover:bg-gray-100' : ''}`, onClick: () => {
                                                     const element = document.getElementById('product-grid');
                                                     element?.scrollIntoView({ behavior: 'smooth' });
-                                                }, ...edit('productsHeader', ['primaryButtonText']), children: productsHeaderConfig?.primaryButtonText || primaryButtonText })), (productsHeaderConfig?.secondaryButtonText || secondaryButtonText) && (productsHeaderConfig?.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 ${(productsHeaderConfig?.image || 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: () => {
+                                                }, children: productsHeaderConfig?.primaryButtonText || primaryButtonText })), (productsHeaderConfig?.secondaryButtonText || secondaryButtonText) && (productsHeaderConfig?.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 ${(productsHeaderConfig?.image || 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: () => {
                                                     window.location.href = `/${storeConfig.slug}/categories`;
-                                                }, ...edit('productsHeader', ['secondaryButtonText']), children: productsHeaderConfig?.secondaryButtonText || secondaryButtonText }))] })] }) }) })] })), _jsxs("div", { "data-content-ready": true, ...section('productsGrid'), style: getPayazaSectionInlineStyle(storeConfig, 'products', 'productsGrid'), className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [_jsxs("div", { className: "flex gap-3 mb-8 overflow-x-auto pb-2 scrollbar-hide", children: [_jsx("button", { onClick: () => setSelectedCategoryFilter(null), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all duration-200 ${!selectedCategoryFilter
-                                    ? 'bg-gray-900 text-white shadow-sm hover:bg-gray-800 hover:shadow-md'
-                                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900'}`, children: "All" }), categories.map((category) => (_jsx("button", { onClick: () => setSelectedCategoryFilter(selectedCategoryFilter === category.slug ? null : category.slug), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all duration-200 ${selectedCategoryFilter === category.slug
-                                    ? 'bg-gray-900 text-white shadow-sm hover:bg-gray-800 hover:shadow-md'
-                                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900'}`, children: category.name }, category.id)))] }), _jsxs("div", { id: "product-grid", className: "grid grid-cols-1 lg:grid-cols-4 gap-8", children: [_jsxs("aside", { className: "hidden lg:block col-span-1 space-y-8 sticky top-24 h-fit max-h-[calc(100vh-8rem)] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent", children: [_jsxs("div", { className: "flex items-center justify-between pb-4 border-b border-gray-100", children: [_jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Filters" }), hasActiveFilters && (_jsxs("button", { onClick: clearAllFilters, className: "text-xs font-medium text-red-500 hover:text-red-700 flex items-center gap-1", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), " Reset"] }))] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-gray-50 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded border flex items-center justify-center transition-colors ${showInStockOnly ? 'bg-black border-black' : 'border-gray-300 group-hover:border-black'}`, children: showInStockOnly && _jsx(Check, { className: "h-3 w-3 text-white" }) }), _jsx("input", { type: "checkbox", className: "hidden", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly) }), _jsx("span", { className: "text-sm text-gray-700 font-medium", children: "In Stock Only" })] })] }), _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: "Brand" }), selectedBrands.length > 0 && (_jsx("button", { onClick: () => setSelectedBrands([]), className: "text-xs text-gray-600 hover:text-blue-600 font-medium transition-colors", children: "Clear" }))] }), brands.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [(showMoreBrands ? brands : brands.slice(0, 6)).map((brand) => (_jsx("label", { className: "flex items-center justify-between cursor-pointer group hover:bg-blue-50 hover:text-blue-600 p-2 rounded-lg -ml-2 -mr-2 transition-colors", children: _jsxs("div", { 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: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" }), _jsx("span", { className: "text-sm text-gray-700 font-medium group-hover:text-blue-600", children: brand })] }) }, brand))), brands.length > 6 && (_jsx("button", { onClick: () => setShowMoreBrands(!showMoreBrands), className: "text-sm text-gray-600 hover:text-blue-600 font-medium mt-2 flex items-center gap-1 transition-colors", children: showMoreBrands ? _jsxs(_Fragment, { children: ["Show less ", _jsx(ChevronUp, { className: "h-4 w-4" })] }) : _jsxs(_Fragment, { children: ["Show more ", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }))] })) : (_jsx("p", { className: "text-xs text-gray-500 italic", children: "No brands available" }))] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Category" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
+                                                }, children: productsHeaderConfig?.secondaryButtonText || secondaryButtonText }))] })] }) }) })] })), _jsxs("div", { "data-content-ready": true, className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [_jsxs("div", { className: "flex gap-3 mb-8 overflow-x-auto pb-2 scrollbar-hide", children: [_jsx("button", { onClick: () => setSelectedCategoryFilter(null), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all ${!selectedCategoryFilter
+                                    ? 'bg-gray-900 text-white hover:bg-blue-600'
+                                    : 'bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600'}`, children: "All" }), categories.map((category) => (_jsx("button", { onClick: () => setSelectedCategoryFilter(selectedCategoryFilter === category.slug ? null : category.slug), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all ${selectedCategoryFilter === category.slug
+                                    ? 'bg-gray-900 text-white hover:bg-blue-600'
+                                    : 'bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600'}`, children: category.name }, category.id)))] }), _jsxs("div", { id: "product-grid", className: "grid grid-cols-1 lg:grid-cols-4 gap-8", children: [_jsxs("aside", { className: "hidden lg:block col-span-1 space-y-8 sticky top-24 h-fit max-h-[calc(100vh-8rem)] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent", children: [_jsxs("div", { className: "flex items-center justify-between pb-4 border-b border-gray-100", children: [_jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Filters" }), hasActiveFilters && (_jsxs("button", { onClick: clearAllFilters, className: "text-xs font-medium text-red-500 hover:text-red-700 flex items-center gap-1", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), " Reset"] }))] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-gray-50 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded border flex items-center justify-center transition-colors ${showInStockOnly ? 'bg-black border-black' : 'border-gray-300 group-hover:border-black'}`, children: showInStockOnly && _jsx(Check, { className: "h-3 w-3 text-white" }) }), _jsx("input", { type: "checkbox", className: "hidden", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly) }), _jsx("span", { className: "text-sm text-gray-700 font-medium", children: "In Stock Only" })] })] }), _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: "Brand" }), selectedBrands.length > 0 && (_jsx("button", { onClick: () => setSelectedBrands([]), className: "text-xs text-gray-600 hover:text-blue-600 font-medium transition-colors", children: "Clear" }))] }), brands.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [(showMoreBrands ? brands : brands.slice(0, 6)).map((brand) => (_jsx("label", { className: "flex items-center justify-between cursor-pointer group hover:bg-blue-50 hover:text-blue-600 p-2 rounded-lg -ml-2 -mr-2 transition-colors", children: _jsxs("div", { 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: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" }), _jsx("span", { className: "text-sm text-gray-700 font-medium group-hover:text-blue-600", children: brand })] }) }, brand))), brands.length > 6 && (_jsx("button", { onClick: () => setShowMoreBrands(!showMoreBrands), className: "text-sm text-gray-600 hover:text-blue-600 font-medium mt-2 flex items-center gap-1 transition-colors", children: showMoreBrands ? _jsxs(_Fragment, { children: ["Show less ", _jsx(ChevronUp, { className: "h-4 w-4" })] }) : _jsxs(_Fragment, { children: ["Show more ", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }))] })) : (_jsx("p", { className: "text-xs text-gray-500 italic", children: "No brands available" }))] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Category" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
                                                     setSelectedCategories(prev => isSelected
                                                         ? [...prev, categoryId]
                                                         : prev.filter(id => id !== categoryId));
-                                                }, mode: "checkbox" })] }), _jsx(ProductPriceFilterSection, { currency: storeConfig.settings?.currency || 'USD', 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: () => 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" })] })] }), _jsx(ProductPriceFilterSection, { currency: storeConfig.settings?.currency || 'USD', 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) => {
+                                                }, 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 ClothingProductsPage(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/clothing/payaza-bindings.js

@@ -1,6 +1,6 @@
 'use client';
-import { encodePayazaFieldKey, payazaIconBindingProps, payazaInlineBindingProps } from '../../preview/canvas/field-key.js';
-import { isEditorPreviewMode } from '../../lib/utils/editor-preview.js';
+import { encodePayazaFieldKey, payazaIconBindingProps, payazaInlineBindingProps } from '../../preview/canvas/field-key';
+import { isEditorPreviewMode } from '../../lib/utils/editor-preview';
 /** Preview + Payaza field helpers for Fashion Hub (clothing) layout pages. */
 export function useClothingPayaza(storeConfig, pageId) {
     const isPreview = isEditorPreviewMode(storeConfig);

package/dist/layouts/clothing-minimal/components/ClothingHomePageMinimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClothingHomePageMinimal.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/components/ClothingHomePageMinimal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AA4BrE,UAAU,4BAA4B;IACpC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAQD,wBAAgB,uBAAuB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,4BAA4B,2CA4fnG"}
+{"version":3,"file":"ClothingHomePageMinimal.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/components/ClothingHomePageMinimal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAgB,MAAM,0BAA0B,CAAC;AAgBrE,UAAU,4BAA4B;IACpC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,uBAAuB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,4BAA4B,2CA0UnG"}