storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/electronics/components/ElectronicsPageWrapper.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ElectronicsStoreHeader } from './ElectronicsStoreHeader.js';
-import { ElectronicsStoreFooter } from './ElectronicsStoreFooter.js';
-import { PageContentLoader } from '../../../components/ui/page-content-loader.js';
-import { useLoading } from '../../../lib/loading-context.js';
+import { ElectronicsStoreHeader } from './ElectronicsStoreHeader';
+import { ElectronicsStoreFooter } from './ElectronicsStoreFooter';
+import { PageContentLoader } from '../../../components/ui/page-content-loader';
+import { useLoading } from '../../../lib/loading-context';
 export function ElectronicsPageWrapper({ children, storeConfig }) {
     const { isBackendLoading } = useLoading();
     return (_jsxs("div", { className: "min-h-screen flex flex-col bg-slate-50 font-sans text-slate-900 selection:bg-blue-600 selection:text-white", children: [_jsx(ElectronicsStoreHeader, { storeConfig: storeConfig }), _jsxs("main", { className: "flex-1 pt-24 relative", children: [isBackendLoading && _jsx(PageContentLoader, {}), children] }), _jsx(ElectronicsStoreFooter, { storeConfig: storeConfig })] }));

package/dist/layouts/electronics/components/ElectronicsProductsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElectronicsProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAiB9D,UAAU,4BAA4B;IACnC,WAAW,EAAE,WAAW,CAAC;CAC3B;AAgSD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAM1E"}
+{"version":3,"file":"ElectronicsProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAsB9D,UAAU,4BAA4B;IACnC,WAAW,EAAE,WAAW,CAAC;CAC3B;AAwUD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAM1E"}

package/dist/layouts/electronics/components/ElectronicsProductsPage.js

@@ -1,20 +1,25 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
-import { CategoryTree } from '../../../components/ui/category-tree.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
+import { Button } from '../../../components/ui/button';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
+import { CategoryTree } from '../../../components/ui/category-tree';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
 import { Filter, ChevronDown, Search } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
-import { useState, useMemo, useEffect, Suspense } from 'react';
-import { ElectronicsStoreHeader } from './ElectronicsStoreHeader.js';
-import { ElectronicsStoreFooter } from './ElectronicsStoreFooter.js';
-import { ElectronicsGridProductCard } from './ElectronicsGridProductCard.js';
-import { Sheet } from '../../../components/ui/sheet.js';
+import { useState, useMemo, useEffect, useRef, Suspense } from 'react';
+import { ElectronicsStoreHeader } from './ElectronicsStoreHeader';
+import { ElectronicsStoreFooter } from './ElectronicsStoreFooter';
+import { ElectronicsGridProductCard } from './ElectronicsGridProductCard';
+import { Sheet } from '../../../components/ui/sheet';
 import { AnimatePresence } from 'framer-motion';
-import { formatCurrency, filterActiveProducts } from '../../../lib/utils/index.js';
-import { buildCategoryTree, getAllCategoryIds, flattenCategoryTree } from '../../../lib/utils/category-tree.js';
+import { filterActiveProducts } from '../../../lib/utils';
+import { buildCategoryTree, getAllCategoryIds, flattenCategoryTree } from '../../../lib/utils/category-tree';
+import { productService } from '../../../lib/services/product.service';
+import { transformProductToStoreProduct } from '../../../lib/store-config-utils';
+import { useCatalogPriceRange } from '../../../hooks/use-catalog-price-range';
+import { isWithinActivePriceRange } from '../../../lib/utils/catalog-price-bounds';
+import { ProductPriceFilterSection } from '../../shared/components/ProductPriceFilterSection';
 function ElectronicsProductsPageContent({ storeConfig }) {
     const searchParams = useSearchParams();
     const categoryParam = searchParams.get('category');
@@ -24,14 +29,14 @@ function ElectronicsProductsPageContent({ storeConfig }) {
     const { addToast } = useToast();
     // Filter States
     const [selectedCategoryFilter, setSelectedCategoryFilter] = useState(categoryParam);
-    const [priceRange, setPriceRange] = useState([0, 5000]);
+    const storeCurrency = storeConfig.settings?.currency || 'NGN';
+    const { priceRange, setPriceRange, catalogBounds, resetPriceRange, hasActivePriceFilter, } = useCatalogPriceRange(products);
     const [sortBy, setSortBy] = useState('featured');
     const [visibleProducts, setVisibleProducts] = useState(12);
     const [isFilterOpen, setIsFilterOpen] = useState(false);
-    // Initialize products
-    useEffect(() => {
-        setProducts(filterActiveProducts(storeConfig.products || []));
-    }, [storeConfig.products]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [totalProducts, setTotalProducts] = useState(storeConfig.products?.length || 0);
+    const [isLoadingProducts, setIsLoadingProducts] = useState(false);
     // Build category tree for filtering
     const categoryTree = useMemo(() => buildCategoryTree(categories), [categories]);
     // Get selected category IDs (including children if parent is selected)
@@ -45,6 +50,40 @@ function ElectronicsProductsPageContent({ storeConfig }) {
         // Return all category IDs including children
         return getAllCategoryIds(selectedCategory);
     }, [selectedCategoryFilter, categoryTree]);
+    const productQuery = useMemo(() => ({
+        storeId: storeConfig.id,
+        categoryIds: selectedCategoryIds.length ? selectedCategoryIds.join(',') : undefined,
+        minPrice: priceRange[0] || undefined,
+        maxPrice: priceRange[1] < catalogBounds.max ? priceRange[1] : undefined,
+        sortBy: sortBy,
+    }), [catalogBounds.max, priceRange, selectedCategoryIds, sortBy, storeConfig.id]);
+    const skipBootstrapRefetch = useRef(true);
+    useEffect(() => {
+        let cancelled = false;
+        const isDefaultQuery = !productQuery.categoryIds &&
+            !productQuery.minPrice &&
+            productQuery.maxPrice === undefined &&
+            productQuery.sortBy === 'featured';
+        if (skipBootstrapRefetch.current && isDefaultQuery && products.length > 0) {
+            skipBootstrapRefetch.current = false;
+            setTotalProducts(storeConfig.productsTotal || products.length);
+            return;
+        }
+        skipBootstrapRefetch.current = false;
+        setIsLoadingProducts(true);
+        productService.getProducts({ ...productQuery, page: 1, limit: 12 })
+            .then((response) => {
+            if (cancelled)
+                return;
+            setProducts(response.data.map(transformProductToStoreProduct));
+            setCurrentPage(1);
+            setTotalProducts(response.meta.total);
+            setVisibleProducts(12);
+        })
+            .catch((error) => !cancelled && console.error('Failed to fetch products:', error))
+            .finally(() => !cancelled && setIsLoadingProducts(false));
+        return () => { cancelled = true; };
+    }, [productQuery]);
     // Filter Logic
     const filteredAndSortedProducts = useMemo(() => {
         const result = products.filter(product => {
@@ -54,7 +93,7 @@ function ElectronicsProductsPageContent({ storeConfig }) {
                     return false;
                 }
             }
-            if (product.price < priceRange[0] || product.price > priceRange[1]) {
+            if (!isWithinActivePriceRange(product.price, priceRange, catalogBounds)) {
                 return false;
             }
             return true;
@@ -76,7 +115,26 @@ function ElectronicsProductsPageContent({ storeConfig }) {
         return result;
     }, [products, selectedCategoryFilter, selectedCategoryIds, priceRange, sortBy]);
     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 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');
@@ -85,11 +143,11 @@ function ElectronicsProductsPageContent({ storeConfig }) {
         { label: storeConfig.name, href: `/${storeConfig.slug}` },
         { label: 'Products', href: `/${storeConfig.slug}/products` },
     ];
-    return (_jsxs("div", { className: "min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-600 selection:text-white", children: [_jsx(ElectronicsStoreHeader, { storeConfig: storeConfig }), _jsxs("main", { className: "pt-24 pb-20", children: [_jsxs("div", { className: "bg-slate-950 text-white mb-10 overflow-hidden relative", children: [_jsx("div", { className: "absolute inset-0 bg-blue-600/10 pointer-events-none" }), _jsx("div", { className: "absolute -top-24 -right-24 w-96 h-96 bg-blue-500/20 rounded-full blur-[100px]" }), _jsxs("div", { className: "container mx-auto px-6 py-16 relative z-10", children: [_jsx("div", { className: "mb-6 opacity-60", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsx("h1", { className: "text-4xl md:text-5xl font-black tracking-tight mb-4", children: "All Products" }), _jsx("p", { className: "text-slate-400 max-w-xl text-lg font-light", children: "Explore our complete catalog of premium electronics." })] })] }), _jsx("div", { className: "container mx-auto px-6", children: _jsxs("div", { className: "flex flex-col lg:flex-row gap-12", children: [_jsx("aside", { className: "hidden lg:block w-64 shrink-0 space-y-10 sticky top-32 self-start h-fit", children: _jsxs("div", { children: [_jsxs("h3", { className: "font-bold text-slate-900 mb-4 flex items-center gap-2", children: [_jsx(Filter, { className: "h-4 w-4" }), " Filters"] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-xs font-bold text-slate-400 uppercase tracking-wider mb-3", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategoryFilter ? [categories.find(c => c.slug === selectedCategoryFilter)?.id || ''] : [], onCategorySelect: (slug) => setSelectedCategoryFilter(selectedCategoryFilter === slug ? null : slug), mode: "button", showAllOption: true, onAllSelect: () => setSelectedCategoryFilter(null), isAllSelected: !selectedCategoryFilter })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-xs font-bold text-slate-400 uppercase tracking-wider mb-3", children: "Price Range" }), _jsxs("div", { className: "px-2", children: [_jsx("input", { type: "range", min: "0", max: "5000", step: "50", value: priceRange[1], onChange: (e) => setPriceRange([0, parseInt(e.target.value)]), className: "w-full h-1 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600" }), _jsxs("div", { className: "flex justify-between mt-2 text-xs font-bold text-slate-600", 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", { className: "flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 mb-8", children: [_jsxs("div", { className: "text-sm font-medium text-slate-500", children: ["Showing ", _jsx("span", { className: "text-slate-900 font-bold", children: displayedProducts.length }), " results"] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Button, { variant: "outline", className: "lg:hidden rounded-full border-slate-200", onClick: () => setIsFilterOpen(true), children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-slate-500 hidden sm:inline", children: "Sort by:" }), _jsxs("div", { className: "relative", children: [_jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "appearance-none bg-white border border-slate-200 rounded-full pl-4 pr-10 py-2 text-sm font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer hover:bg-slate-50 transition-colors", children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "newest", children: "Newest" }), _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" })] }), _jsx(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500 pointer-events-none" })] })] })] })] }), displayedProducts.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6", children: _jsx(AnimatePresence, { mode: 'popLayout', children: displayedProducts.map((product, index) => (_jsx(ElectronicsGridProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, index: index }, product.id))) }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-32 text-center bg-white rounded-3xl border border-dashed border-slate-200", children: [_jsx("div", { className: "w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-6", children: _jsx(Search, { className: "h-6 w-6 text-slate-400" }) }), _jsx("h3", { className: "text-lg font-bold text-slate-900 mb-2", children: "No products found" }), _jsx("p", { className: "text-slate-500 max-w-sm mx-auto mb-8 text-sm", children: "Try adjusting your filters or search criteria." }), _jsx(Button, { onClick: () => {
+    return (_jsxs("div", { className: "min-h-screen bg-slate-50 font-sans text-slate-900 selection:bg-blue-600 selection:text-white", children: [_jsx(ElectronicsStoreHeader, { storeConfig: storeConfig }), _jsxs("main", { className: "pt-24 pb-20", children: [_jsxs("div", { className: "bg-slate-950 text-white mb-10 overflow-hidden relative", children: [_jsx("div", { className: "absolute inset-0 bg-blue-600/10 pointer-events-none" }), _jsx("div", { className: "absolute -top-24 -right-24 w-96 h-96 bg-blue-500/20 rounded-full blur-[100px]" }), _jsxs("div", { className: "container mx-auto px-6 py-16 relative z-10", children: [_jsx("div", { className: "mb-6 opacity-60", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsx("h1", { className: "text-4xl md:text-5xl font-black tracking-tight mb-4", children: "All Products" }), _jsx("p", { className: "text-slate-400 max-w-xl text-lg font-light", children: "Explore our complete catalog of premium electronics." })] })] }), _jsx("div", { className: "container mx-auto px-6", children: _jsxs("div", { className: "flex flex-col lg:flex-row gap-12", children: [_jsx("aside", { className: "hidden lg:block w-64 shrink-0 space-y-10 sticky top-32 self-start h-fit", children: _jsxs("div", { children: [_jsxs("h3", { className: "font-bold text-slate-900 mb-4 flex items-center gap-2", children: [_jsx(Filter, { className: "h-4 w-4" }), " Filters"] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-xs font-bold text-slate-400 uppercase tracking-wider mb-3", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategoryFilter ? [categories.find(c => c.slug === selectedCategoryFilter)?.id || ''] : [], onCategorySelect: (slug) => setSelectedCategoryFilter(selectedCategoryFilter === slug ? null : slug), mode: "button", showAllOption: true, onAllSelect: () => setSelectedCategoryFilter(null), isAllSelected: !selectedCategoryFilter })] }), _jsx(ProductPriceFilterSection, { currency: storeCurrency, priceRange: priceRange, onPriceRangeChange: setPriceRange, bounds: catalogBounds, isFilterActive: hasActivePriceFilter, onReset: resetPriceRange })] })] }) }), _jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 mb-8", children: [_jsxs("div", { className: "text-sm font-medium text-slate-500", children: ["Showing ", _jsx("span", { className: "text-slate-900 font-bold", children: displayedProducts.length }), " results"] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(Button, { variant: "outline", className: "lg:hidden rounded-full border-slate-200", onClick: () => setIsFilterOpen(true), children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filters"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-slate-500 hidden sm:inline", children: "Sort by:" }), _jsxs("div", { className: "relative", children: [_jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "appearance-none bg-white border border-slate-200 rounded-full pl-4 pr-10 py-2 text-sm font-medium text-slate-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent cursor-pointer hover:bg-slate-50 transition-colors", children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "newest", children: "Newest" }), _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" })] }), _jsx(ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500 pointer-events-none" })] })] })] })] }), displayedProducts.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6", children: _jsx(AnimatePresence, { mode: 'popLayout', children: displayedProducts.map((product, index) => (_jsx(ElectronicsGridProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, index: index }, product.id))) }) })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-32 text-center bg-white rounded-3xl border border-dashed border-slate-200", children: [_jsx("div", { className: "w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mb-6", children: _jsx(Search, { className: "h-6 w-6 text-slate-400" }) }), _jsx("h3", { className: "text-lg font-bold text-slate-900 mb-2", children: "No products found" }), _jsx("p", { className: "text-slate-500 max-w-sm mx-auto mb-8 text-sm", children: "Try adjusting your filters or search criteria." }), _jsx(Button, { onClick: () => {
                                                         setSelectedCategoryFilter(null);
-                                                        setPriceRange([0, 5000]);
-                                                    }, variant: "outline", className: "rounded-full px-8 border-slate-200", children: "Clear Filters" })] })), hasMore && (_jsx("div", { className: "mt-16 text-center", children: _jsx(Button, { onClick: () => setVisibleProducts(prev => prev + 12), variant: "outline", className: "rounded-full px-10 h-12 border-slate-200 hover:bg-slate-900 hover:text-white hover:border-slate-900 transition-all text-sm font-bold uppercase tracking-wide", children: "Load More" }) }))] })] }) })] }), _jsx(ElectronicsStoreFooter, { storeConfig: storeConfig }), _jsx(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "right", className: "w-[300px]", children: _jsxs("div", { className: "py-6 space-y-8 h-full flex flex-col", children: [_jsxs("div", { className: "flex-1 space-y-8 overflow-y-auto", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-wider mb-4 text-slate-900", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategoryFilter ? [categories.find(c => c.slug === selectedCategoryFilter)?.id || ''] : [], onCategorySelect: (slug) => setSelectedCategoryFilter(selectedCategoryFilter === slug ? null : slug), mode: "button", showAllOption: true, onAllSelect: () => setSelectedCategoryFilter(null), isAllSelected: !selectedCategoryFilter })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-wider mb-4 text-slate-900", children: "Price Range" }), _jsxs("div", { className: "px-2", children: [_jsx("input", { type: "range", min: "0", max: "5000", step: "50", value: priceRange[1], onChange: (e) => setPriceRange([0, parseInt(e.target.value)]), className: "w-full h-1 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600" }), _jsxs("div", { className: "flex justify-between mt-4 text-sm font-bold text-slate-900", 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", { className: "flex gap-4 pt-6 border-t border-slate-100", children: [_jsx(Button, { variant: "outline", className: "flex-1 h-12 rounded-full border-slate-200", onClick: () => {
-                                        setPriceRange([0, 5000]);
+                                                        resetPriceRange();
+                                                    }, variant: "outline", className: "rounded-full px-8 border-slate-200", children: "Clear Filters" })] })), hasMore && (_jsx("div", { className: "mt-16 text-center", children: _jsx(Button, { onClick: handleLoadMore, variant: "outline", className: "rounded-full px-10 h-12 border-slate-200 hover:bg-slate-900 hover:text-white hover:border-slate-900 transition-all text-sm font-bold uppercase tracking-wide", children: "Load More" }) }))] })] }) })] }), _jsx(ElectronicsStoreFooter, { storeConfig: storeConfig }), _jsx(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "right", className: "w-[300px]", children: _jsxs("div", { className: "py-6 space-y-8 h-full flex flex-col", children: [_jsxs("div", { className: "flex-1 space-y-8 overflow-y-auto", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-wider mb-4 text-slate-900", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategoryFilter ? [categories.find(c => c.slug === selectedCategoryFilter)?.id || ''] : [], onCategorySelect: (slug) => setSelectedCategoryFilter(selectedCategoryFilter === slug ? null : slug), mode: "button", showAllOption: true, onAllSelect: () => setSelectedCategoryFilter(null), isAllSelected: !selectedCategoryFilter })] }), _jsx(ProductPriceFilterSection, { currency: storeCurrency, priceRange: priceRange, onPriceRangeChange: setPriceRange, bounds: catalogBounds, isFilterActive: hasActivePriceFilter, onReset: resetPriceRange })] }), _jsxs("div", { className: "flex gap-4 pt-6 border-t border-slate-100", children: [_jsx(Button, { variant: "outline", className: "flex-1 h-12 rounded-full border-slate-200", onClick: () => {
+                                        resetPriceRange();
                                         setSelectedCategoryFilter(null);
                                         setIsFilterOpen(false);
                                     }, children: "Reset" }), _jsx(Button, { className: "flex-1 bg-blue-600 hover:bg-blue-700 text-white h-12 rounded-full", onClick: () => setIsFilterOpen(false), children: "Show Results" })] })] }) })] }));

package/dist/layouts/electronics/components/ElectronicsStoreFooter.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'next/link';
 import { Zap, Facebook, Twitter, Instagram, Mail, MapPin, Phone } from 'lucide-react';
-import { getLayoutText, getThemeColor } from '../../../lib/utils/asset-helpers.js';
-import { getCurrentYear } from '../../../utils/date.js';
+import { getLayoutText, getThemeColor } from '../../../lib/utils/asset-helpers';
+import { getCurrentYear } from '../../../utils/date';
 export function ElectronicsStoreFooter({ storeConfig }) {
     const bgDark = getThemeColor(storeConfig, 'background', 'dark', '#0F172A');
     const textSecondary = getThemeColor(storeConfig, 'text', 'secondary', '#CBD5E1');

package/dist/layouts/electronics/components/ElectronicsStoreHeader.js

@@ -1,14 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
+import { Button } from '../../../components/ui/button';
 import { ShoppingCart, Zap, Menu, X, Search, User } from 'lucide-react';
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
-import { cn, formatStoreDisplayName } from '../../../lib/utils/index.js';
-import { getLayoutText, getLogoUrl } from '../../../lib/utils/asset-helpers.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useAuth } from '../../../lib/auth-context.js';
-import { StoreLogo } from '../../../components/ui/store-logos.js';
+import { cn, formatStoreDisplayName } from '../../../lib/utils';
+import { getLayoutText, getLogoUrl } from '../../../lib/utils/asset-helpers';
+import { useStore } from '../../../lib/store-context';
+import { useAuth } from '../../../lib/auth-context';
+import { StoreLogo } from '../../../components/ui/store-logos';
 import { usePathname } from 'next/navigation';
 export function ElectronicsStoreHeader({ storeConfig }) {
     const [scrolled, setScrolled] = useState(false);

package/dist/layouts/electronics/index.js

@@ -1,19 +1,19 @@
 // Tech World (electronics) layout — fully sandboxed exports
-export { ElectronicsHomePage } from './components/ElectronicsHomePage.js';
-export { ElectronicsProductsPage } from './components/ElectronicsProductsPage.js';
-export { ElectronicsCategoriesPage } from './components/ElectronicsCategoriesPage.js';
-export { ElectronicsPageWrapper } from './components/ElectronicsPageWrapper.js';
-export { ElectronicsStoreHeader } from './components/ElectronicsStoreHeader.js';
-export { ElectronicsStoreFooter } from './components/ElectronicsStoreFooter.js';
-export { ElectronicsGridProductCard } from './components/ElectronicsGridProductCard.js';
-export { ElectronicsProductsListingPage } from './pages/ProductsPage.js';
-export { ElectronicsProductDetailPage } from './pages/ProductDetailPage.js';
-export { ElectronicsCategoryPage } from './pages/CategoryPage.js';
-export { ElectronicsCategoriesListingPage } from './pages/CategoriesPage.js';
-export { ElectronicsAboutPage } from './pages/AboutPage.js';
-export { ElectronicsContactPage } from './pages/ContactPage.js';
-export { ElectronicsHelpCenterPage } from './pages/HelpCenterPage.js';
-export { ElectronicsPrivacyPolicyPage } from './pages/PrivacyPolicyPage.js';
-export { ElectronicsShippingReturnsPage } from './pages/ShippingReturnsPage.js';
-export { ElectronicsTermsPage } from './pages/TermsPage.js';
-export { ElectronicsTrackOrderPage } from './pages/TrackOrderPage.js';
+export { ElectronicsHomePage } from './components/ElectronicsHomePage';
+export { ElectronicsProductsPage } from './components/ElectronicsProductsPage';
+export { ElectronicsCategoriesPage } from './components/ElectronicsCategoriesPage';
+export { ElectronicsPageWrapper } from './components/ElectronicsPageWrapper';
+export { ElectronicsStoreHeader } from './components/ElectronicsStoreHeader';
+export { ElectronicsStoreFooter } from './components/ElectronicsStoreFooter';
+export { ElectronicsGridProductCard } from './components/ElectronicsGridProductCard';
+export { ElectronicsProductsListingPage } from './pages/ProductsPage';
+export { ElectronicsProductDetailPage } from './pages/ProductDetailPage';
+export { ElectronicsCategoryPage } from './pages/CategoryPage';
+export { ElectronicsCategoriesListingPage } from './pages/CategoriesPage';
+export { ElectronicsAboutPage } from './pages/AboutPage';
+export { ElectronicsContactPage } from './pages/ContactPage';
+export { ElectronicsHelpCenterPage } from './pages/HelpCenterPage';
+export { ElectronicsPrivacyPolicyPage } from './pages/PrivacyPolicyPage';
+export { ElectronicsShippingReturnsPage } from './pages/ShippingReturnsPage';
+export { ElectronicsTermsPage } from './pages/TermsPage';
+export { ElectronicsTrackOrderPage } from './pages/TrackOrderPage';

package/dist/layouts/electronics/pages/AboutPage.d.ts

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

package/dist/layouts/electronics/pages/AboutPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAShD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,oBAAoB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA4PlF"}
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA2OvE"}

package/dist/layouts/electronics/pages/AboutPage.js

@@ -1,24 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Users, Award, Heart, Leaf, MapPin, Clock, Mail, ArrowRight } from 'lucide-react';
-import { Button } from '../../../components/ui/button.js';
-import { DotPattern } from '../../../components/ui/background-patterns.js';
-import { useStore } from '../../../lib/store-context.js';
+import { Button } from '../../../components/ui/button';
+import { DotPattern } from '../../../components/ui/background-patterns';
+import { useStore } from '../../../lib/store-context';
 import Image from 'next/image';
-import { payazaInlineBindingProps, encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-export function ElectronicsAboutPage({ storeConfig: initialConfig }) {
+export function AboutPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
     const primaryColor = storeConfig.branding.primaryColor;
     const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
     const aboutConfig = storeConfig.layoutConfig?.pages?.about;
-    const isPreview = !!storeConfig.isPreview;
-    // Electronics hero — check schema path (hero) first, then legacy sub-objects for backward compat
-    const heroImage = aboutConfig?.hero?.heroImage || aboutConfig?.aboutHeader?.image || aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1498049381960-da565139a979?q=80&w=2071&auto=format&fit=crop';
-    const pageTitle = aboutConfig?.hero?.title || aboutConfig?.aboutHeader?.title || aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
-    const pageContent = aboutConfig?.story?.content || aboutConfig?.aboutContent?.content || aboutConfig?.content || storeConfig.description;
-    const missionStatement = aboutConfig?.hero?.missionStatement || aboutConfig?.aboutHeader?.description || aboutConfig?.missionStatement;
+    // Electronics-specific hero image
+    const heroImage = aboutConfig?.aboutHeader?.image || aboutConfig?.heroImage || 'https://images.unsplash.com/photo-1498049381960-da565139a979?q=80&w=2071&auto=format&fit=crop';
+    const pageTitle = aboutConfig?.aboutHeader?.title || aboutConfig?.title || "Crafting Experiences, Delivering Joy.";
+    const pageContent = aboutConfig?.aboutContent?.content || aboutConfig?.content || storeConfig.description;
+    const missionStatement = aboutConfig?.aboutHeader?.description || aboutConfig?.missionStatement;
     const galleryImages = aboutConfig?.aboutContent?.gallerySection || aboutConfig?.gallerySection;
     const values = [
         {
@@ -42,10 +39,10 @@ export function ElectronicsAboutPage({ storeConfig: initialConfig }) {
             description: "Promoting energy-efficient devices and responsible e-waste disposal."
         }
     ];
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "about", className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", "data-payaza-image": isPreview ? encodePayazaFieldKey('hero', ['heroImage']) : undefined, children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [showLayoutDecorativeBadges() && (_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] })), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", ...payazaInlineBindingProps(isPreview, 'hero', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", ...payazaInlineBindingProps(isPreview, 'hero', ['missionStatement']), children: missionStatement || storeConfig.description })] }) }) })] }), _jsxs("section", { "data-section": "story", "data-payaza-section-key": "story", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 relative", children: [_jsx("div", { className: "absolute top-0 right-0 -mt-24 -mr-24 w-96 h-96 bg-gray-50 rounded-full blur-3xl -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "relative", children: [galleryImages && galleryImages.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: galleryImages.slice(0, 4).map((img, i) => (_jsx("div", { className: `relative overflow-hidden rounded-2xl shadow-lg ${i === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'}`, children: _jsx(Image, { src: img.image, alt: img.caption || "Gallery Image", fill: true, className: "w-full h-full object-cover hover:scale-110 transition-transform duration-500", unoptimized: true }) }, i))) })) : (_jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop", alt: "Our Team", fill: true, className: "w-full h-full object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60" }), _jsxs("div", { className: "absolute bottom-8 left-8 text-white", children: [_jsx("p", { className: "font-bold text-lg", children: "The Dream Team" }), _jsx("p", { className: "text-white/80 text-sm", children: "Working together to serve you better" })] })] })), _jsx("div", { className: "absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 animate-bounce duration-[3000ms]", children: _jsx(Heart, { className: "w-10 h-10", style: { color: primaryColor, fill: primaryColor } }) })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-widest mb-3 block", style: { color: primaryColor }, children: "Who We Are" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: "Our Journey" }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", ...payazaInlineBindingProps(isPreview, 'story', ['content'], { rich: 'inline' }), children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: values.map((item, idx) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, children: _jsx(item.icon, { className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2 text-lg", children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", children: item.description })] })] }, idx))) })] })] }) })] }), _jsxs("section", { "data-section": "stats", "data-payaza-section-key": "stats", "data-payaza-page": "about", className: "py-20 relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 opacity-10", children: _jsx(DotPattern, { color: primaryColor, cx: 2, cy: 2, cr: 2, width: 30, height: 30 }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundColor: `${secondaryColor}15` } }), _jsx("div", { className: "container mx-auto px-4 relative z-10", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12", children: [
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [_jsxs("section", { "data-section": "hero", className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [_jsxs("div", { className: "inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-sm font-medium mb-6", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-white animate-pulse" }), "Est. 2024"] }), _jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", children: missionStatement || storeConfig.description })] }) }) })] }), _jsxs("section", { "data-section": "story", className: "py-24 px-4 sm:px-6 lg:px-8 relative", children: [_jsx("div", { className: "absolute top-0 right-0 -mt-24 -mr-24 w-96 h-96 bg-gray-50 rounded-full blur-3xl -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "relative", children: [galleryImages && galleryImages.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: galleryImages.slice(0, 4).map((img, i) => (_jsx("div", { className: `relative overflow-hidden rounded-2xl shadow-lg ${i === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'}`, children: _jsx(Image, { src: img.image, alt: img.caption || "Gallery Image", fill: true, className: "w-full h-full object-cover hover:scale-110 transition-transform duration-500" }) }, i))) })) : (_jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop", alt: "Our Team", fill: true, className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60" }), _jsxs("div", { className: "absolute bottom-8 left-8 text-white", children: [_jsx("p", { className: "font-bold text-lg", children: "The Dream Team" }), _jsx("p", { className: "text-white/80 text-sm", children: "Working together to serve you better" })] })] })), _jsx("div", { className: "absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 animate-bounce duration-[3000ms]", children: _jsx(Heart, { className: "w-10 h-10", style: { color: primaryColor, fill: primaryColor } }) })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-widest mb-3 block", style: { color: primaryColor }, children: "Who We Are" }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", children: "Our Journey" }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the ", _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry, ", storeConfig.name, " has grown from a small passion project into a beloved brand. We believe in the power of quality, innovation, and community."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile. Our team is dedicated to ensuring that your experience with us is nothing short of exceptional." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: values.map((item, idx) => (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, children: _jsx(item.icon, { className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2 text-lg", children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", children: item.description })] })] }, idx))) })] })] }) })] }), _jsxs("section", { "data-section": "stats", className: "py-20 relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 opacity-10", children: _jsx(DotPattern, { color: primaryColor, cx: 2, cy: 2, cr: 2, width: 30, height: 30 }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundColor: `${secondaryColor}15` } }), _jsx("div", { className: "container mx-auto px-4 relative z-10", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12", children: [
                                 { label: "Devices Sold", value: "50k+" },
                                 { label: "Products", value: storeConfig.products?.length ? `${storeConfig.products.length}+` : "100+" },
                                 { label: "Years in Tech", value: "12+" },
                                 { label: "Service Points", value: "15+" }
-                            ].map((stat, idx) => (_jsxs("div", { className: "text-center group", children: [_jsx("div", { className: "text-5xl md:text-6xl font-black mb-2 tracking-tight transition-transform group-hover:scale-110 duration-300", style: { color: primaryColor }, children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", children: stat.label })] }, idx))) }) })] }), _jsx("section", { "data-section": "contact-info", "data-payaza-section-key": "contact-info", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "text-center mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: "Get in Touch" }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", children: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(MapPin, { className: "h-8 w-8 text-gray-400 group-hover:text-blue-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Visit Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: [storeConfig.contactInfo?.address?.street || '123 Store Street', _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Commerce City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Mail, { className: "h-8 w-8 text-gray-400 group-hover:text-orange-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Email Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com`, _jsx("br", {}), storeConfig.contactInfo?.phone || '+1 (555) 123-4567'] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Clock, { className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Opening Hours" }), _jsx("p", { className: "text-gray-600 leading-relaxed", children: storeConfig.locations?.[0]?.openingHours || (_jsxs(_Fragment, { children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })) })] })] })] }) })] }));
+                            ].map((stat, idx) => (_jsxs("div", { className: "text-center group", children: [_jsx("div", { className: "text-5xl md:text-6xl font-black mb-2 tracking-tight transition-transform group-hover:scale-110 duration-300", style: { color: primaryColor }, children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", children: stat.label })] }, idx))) }) })] }), _jsx("section", { "data-section": "contact-info", className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "text-center mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", children: "Get in Touch" }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", children: "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store." })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(MapPin, { className: "h-8 w-8 text-gray-400 group-hover:text-blue-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Visit Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: [storeConfig.contactInfo?.address?.street || '123 Store Street', _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Commerce City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Mail, { className: "h-8 w-8 text-gray-400 group-hover:text-orange-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Email Us" }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com`, _jsx("br", {}), storeConfig.contactInfo?.phone || '+1 (555) 123-4567'] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", children: _jsx(Clock, { className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", children: "Opening Hours" }), _jsx("p", { className: "text-gray-600 leading-relaxed", children: storeConfig.locations?.[0]?.openingHours || (_jsxs(_Fragment, { children: ["Mon - Fri: 9am - 6pm", _jsx("br", {}), "Sat - Sun: 10am - 4pm"] })) })] })] })] }) })] }));
 }

package/dist/layouts/electronics/pages/CategoriesPage.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ElectronicsCategoriesPage } from '../../electronics/components/ElectronicsCategoriesPage.js';
+import { ElectronicsCategoriesPage } from '../../electronics/components/ElectronicsCategoriesPage';
 export function ElectronicsCategoriesListingPage({ storeConfig }) {
     return _jsx(ElectronicsCategoriesPage, { storeConfig: storeConfig });
 }

package/dist/layouts/electronics/pages/CategoryPage.d.ts

@@ -3,6 +3,6 @@ interface CategoryPageProps {
     storeConfig: StoreConfig;
     categorySlug: string;
 }
-export declare function ElectronicsCategoryPage({ storeConfig: initialConfig, categorySlug }: CategoryPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function CategoryPage({ storeConfig, categorySlug }: CategoryPageProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CategoryPage.d.ts.map

package/dist/layouts/electronics/pages/CategoryPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/pages/CategoryPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8B,MAAM,mBAAmB,CAAC;AAqB5E,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAiHtG"}
+{"version":3,"file":"CategoryPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/pages/CategoryPage.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAA8B,MAAM,mBAAmB,CAAC;AAc5E,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,iBAAiB,2CAsH5E"}

package/dist/layouts/electronics/pages/CategoryPage.js

@@ -1,26 +1,20 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { useStore } from '../../../lib/store-context.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCategoryProducts } from '../../../hooks/use-category-products';
+import { Button } from '../../../components/ui/button';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useStore } from '../../../lib/store-context';
 import { ArrowLeft, Filter } from 'lucide-react';
 import Link from 'next/link';
-import { useToast } from '../../../components/ui/toast.js';
-import { useAnalytics } from '../../../hooks/use-analytics.js';
+import { useToast } from '../../../components/ui/toast';
+import { useAnalytics } from '../../../hooks/use-analytics';
 import { useEffect } from 'react';
-import { ProductCard } from '../../../components/ui/product-card.js';
-import { isEditorPreviewMode, resolveCategoryBySlugForDisplay, resolveCategoryProductsForDisplay, } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { CategoryDescription } from '../../../components/rich-text/CategoryDescription.js';
-export function ElectronicsCategoryPage({ storeConfig: initialConfig, categorySlug }) {
-    const { store, addToCart } = useStore();
-    const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { categories: loadedCategories, products: loadedProducts } = useCatalogLoader(storeConfig, {
-        fetchServices: false,
-    });
-    const category = resolveCategoryBySlugForDisplay(loadedCategories, categorySlug, isPreview);
-    const products = resolveCategoryProductsForDisplay(loadedProducts, category?.id, isPreview);
+import { ProductCard } from '../../../components/ui/product-card';
+export function CategoryPage({ storeConfig, categorySlug }) {
+    const categories = storeConfig.categories || [];
+    const category = categories.find(c => c.slug === categorySlug);
+    const { products, isLoading, hasMore, loadMore } = useCategoryProducts(storeConfig.id, category?.id);
+    const { addToCart } = useStore();
     const { addToast } = useToast();
     const { trackEvent } = useAnalytics();
     // Track category view
@@ -51,5 +45,5 @@ export function ElectronicsCategoryPage({ storeConfig: initialConfig, categorySl
     const isDarkTheme = storeConfig.type === 'food-modern' || storeConfig.branding.theme === 'dark';
     const bgColor = isDarkTheme ? 'bg-[#0F0F0F]' : 'bg-gray-50';
     const textColor = isDarkTheme ? 'text-white' : 'text-gray-900';
-    return (_jsxs("div", { className: "min-h-screen bg-gray-50 text-gray-900 transition-colors duration-300", children: [_jsxs("div", { className: "relative h-[40vh] overflow-hidden", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-[2px]" }), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center p-6 text-white", children: [_jsx("h1", { className: "text-5xl md:text-7xl font-bold tracking-tight mb-4", children: category.name }), _jsx(CategoryDescription, { description: category.description })] })] }), _jsxs("div", { className: "container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center mb-10 gap-4", children: [_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900", children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), "Back to All Categories"] }), _jsx("div", { className: "flex items-center gap-4", children: _jsxs(Button, { variant: "outline", className: "bg-white", children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filter"] }) })] }), !hasItems ? (_jsxs("div", { className: "text-center py-20 border border-dashed border-gray-300 rounded-3xl", children: [_jsx("p", { className: "text-gray-500 text-lg", children: "No products found in this category." }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: products.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }))] })] }));
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 text-gray-900 transition-colors duration-300", children: [_jsxs("div", { className: "relative h-[40vh] overflow-hidden", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-black/40 backdrop-blur-[2px]" }), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-center p-6 text-white", children: [_jsx("h1", { className: "text-5xl md:text-7xl font-bold tracking-tight mb-4", children: category.name }), category.description && (_jsx("p", { className: "text-lg md:text-xl max-w-2xl opacity-90 font-light", children: category.description }))] })] }), _jsxs("div", { className: "container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12", children: [_jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center mb-10 gap-4", children: [_jsxs(Link, { href: `/${storeConfig.slug}/categories`, className: "inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900", children: [_jsx(ArrowLeft, { className: "h-4 w-4 mr-2" }), "Back to All Categories"] }), _jsx("div", { className: "flex items-center gap-4", children: _jsxs(Button, { variant: "outline", className: "bg-white", children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filter"] }) })] }), !hasItems ? (_jsxs("div", { className: "text-center py-20 border border-dashed border-gray-300 rounded-3xl", children: [_jsx("p", { className: "text-gray-500 text-lg", children: "No products found in this category." }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: products.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }), hasMore && (_jsx("div", { className: "mt-10 flex justify-center", children: _jsx(Button, { onClick: loadMore, disabled: isLoading, children: "Load more" }) }))] }))] })] }));
 }

package/dist/layouts/electronics/pages/ContactPage.d.ts

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

package/dist/layouts/electronics/pages/ContactPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAShD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,sBAAsB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAsTtF"}
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CA0S3E"}