storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/motivational-speaker/pages/ProductsPage.js

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

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

package/dist/layouts/motivational-speaker/pages/ServiceDetailPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServiceDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/pages/ServiceDetailPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAmB9D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,6BAA6B,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CAqiBhH"}
+{"version":3,"file":"ServiceDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/pages/ServiceDetailPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAgB9D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CA4hBrF"}

package/dist/layouts/motivational-speaker/pages/ServiceDetailPage.js

@@ -1,32 +1,23 @@
 '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 { Button } from '../../../components/ui/button';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
 import { Play, FileText, Headphones, Lock, Star, CheckCircle, Clock, Download, Share2, Heart, ArrowRight, BookOpen, Users, Award, X } from 'lucide-react';
 import { useState, useMemo } from 'react';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
 import { useRouter } from 'next/navigation';
-import { useAuth } from '../../../lib/auth-context.js';
+import { useAuth } from '../../../lib/auth-context';
 import Image from 'next/image';
-import { CategoryDescription } from '../../../components/rich-text/CategoryDescription.js';
-import { richFieldPlainTextForDisplay } from '../../../lib/rich-html.js';
-import { formatCurrency, isEditorPreviewMode, resolveServiceBySlugForDisplay, resolveStoreServicesForDisplay } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { getServiceImage } from '../../../lib/utils/asset-helpers.js';
+import { formatCurrency, filterActiveServices } from '../../../lib/utils';
+import { getServiceImage } from '../../../lib/utils/asset-helpers';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
-import { cn } from '../../../lib/utils/index.js';
-export function MotivationalServiceDetailPage({ storeConfig: initialConfig, serviceSlug }) {
-    const { store, addToCart, isCartLoading, toggleWishlist, isInWishlist, isWishlistLoading, cart } = useStore();
-    const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { services: loadedServices } = useCatalogLoader(storeConfig, {
-        fetchProducts: false,
-        fetchCategories: false,
-    });
-    const services = resolveStoreServicesForDisplay(loadedServices, isPreview);
-    const service = resolveServiceBySlugForDisplay(loadedServices, serviceSlug, isPreview);
+import { cn } from '../../../lib/utils';
+export function ServiceDetailPage({ storeConfig, serviceSlug }) {
+    const services = filterActiveServices(storeConfig.services || []);
+    const service = services.find(s => s.slug === serviceSlug);
+    const { addToCart, isCartLoading, toggleWishlist, isInWishlist, isWishlistLoading, cart } = useStore();
     const { addToast } = useToast();
     const router = useRouter();
     const { isAuthenticated } = useAuth();
@@ -108,7 +99,7 @@ export function MotivationalServiceDetailPage({ storeConfig: initialConfig, serv
             try {
                 await navigator.share({
                     title: service.name,
-                    text: richFieldPlainTextForDisplay(service.description),
+                    text: service.description,
                     url: window.location.href,
                 });
             }
@@ -126,7 +117,7 @@ export function MotivationalServiceDetailPage({ storeConfig: initialConfig, serv
             }
         }
     };
-    return (_jsx("div", { className: "min-h-screen bg-white", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 max-w-7xl", children: [_jsx("div", { className: "mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 mb-20", children: [_jsxs("div", { className: "lg:col-span-2 space-y-8", children: [_jsxs("div", { className: "relative aspect-video bg-black rounded-2xl overflow-hidden group shadow-2xl border border-gray-800", children: [isPlaying && hasAccess ? (_jsxs("div", { className: "absolute inset-0 bg-black flex items-center justify-center", children: [service.contentType === 'video' ? (_jsx("video", { src: service.contentUrl, controls: true, autoPlay: true, className: "w-full h-full object-contain", poster: getServiceImage(service.image, storeConfig, ""), children: "Your browser does not support the video tag." })) : service.contentType === 'audio' ? (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center p-8 bg-gradient-to-br from-gray-900 to-slate-900 text-white", children: [_jsxs("div", { className: "w-32 h-32 bg-white/5 rounded-full flex items-center justify-center mb-6 backdrop-blur-xl border border-white/10 shadow-2xl relative", children: [_jsx(Headphones, { className: "w-12 h-12 text-white relative z-10" }), _jsx("div", { className: "absolute inset-0 bg-blue-500/20 rounded-full animate-ping opacity-20" })] }), _jsx("h3", { className: "text-xl font-bold mb-2", children: service.name }), _jsx("p", { className: "text-gray-400 mb-8", children: "Now Playing \u2022 Audiobook" }), _jsx("audio", { src: service.contentUrl, controls: true, autoPlay: true, className: "w-full max-w-md h-12" })] })) : (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center p-8 bg-gray-50", children: [_jsx("div", { className: "w-24 h-24 bg-blue-100 rounded-2xl flex items-center justify-center mb-6 shadow-sm", children: _jsx(FileText, { className: "w-12 h-12 text-blue-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Resource Ready" }), _jsx("p", { className: "text-gray-500 mb-8 text-center max-w-sm", children: "You have access to this premium guide. Download it below to start reading." }), _jsxs("a", { href: service.contentUrl, target: "_blank", rel: "noopener noreferrer", className: "bg-black text-white px-10 py-4 rounded-full font-bold hover:bg-gray-800 transition-all flex items-center gap-3 shadow-xl", children: [_jsx(Download, { className: "w-5 h-5" }), " Download PDF Guide"] })] })), _jsx("button", { onClick: () => setIsPlaying(false), className: "absolute top-6 right-6 bg-black/40 hover:bg-black/60 p-3 rounded-full backdrop-blur-md transition-all border border-white/10 group/close", title: "Close player", children: _jsx(X, { className: "w-5 h-5 text-white group-hover/close:rotate-90 transition-transform" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { src: getServiceImage(service.image, storeConfig, "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&auto=format&fit=crop"), alt: service.name, fill: true, className: "object-cover transition-transform duration-700 group-hover:scale-105 opacity-80", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: hasAccess ? (_jsxs(motion.button, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, onClick: () => setIsPlaying(true), className: "w-24 h-24 rounded-full bg-white/10 backdrop-blur-xl flex items-center justify-center shadow-2xl hover:bg-white/20 transition-colors border border-white/30 relative group/play", children: [_jsx("div", { className: "absolute inset-0 bg-white/20 rounded-full blur-xl group-hover/play:blur-2xl transition-all" }), service.contentType === 'pdf' ? (_jsx(Download, { className: "w-10 h-10 text-white relative z-10" })) : (_jsx(Play, { className: "w-10 h-10 text-white ml-1 relative z-10", fill: "currentColor" }))] })) : (_jsxs("div", { className: "text-center p-6 backdrop-blur-md bg-black/40 rounded-3xl border border-white/10 max-w-sm mx-4", children: [_jsx("div", { className: "w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-white/20", children: _jsx(Lock, { className: "w-8 h-8 text-white" }) }), _jsx("h3", { className: "text-xl font-bold text-white mb-2", children: "Premium Content" }), _jsxs("p", { className: "text-gray-300 text-sm mb-6", children: ["This ", typeLabel.toLowerCase(), " is exclusive to members. Unlock it now to start learning."] }), _jsxs(Button, { onClick: handleAddToCart, className: "bg-white text-black hover:bg-gray-200 rounded-full px-8 h-14 font-bold text-base w-full shadow-2xl", children: ["Unlock For ", formatCurrency(service.price, service.currency || 'USD')] })] })) })] })), _jsx("div", { className: "absolute top-6 left-6", children: _jsxs("div", { className: cn("px-4 py-2 rounded-full text-white text-xs font-bold uppercase tracking-wider flex items-center gap-2 backdrop-blur-md shadow-lg", contentTypeColor), children: [_jsx(TypeIcon, { className: "w-3 h-3" }), " ", typeLabel] }) }), !hasAccess && isLocked && (_jsx("div", { className: "absolute top-6 right-6", children: _jsxs("div", { className: "px-4 py-2 rounded-full bg-black/90 backdrop-blur-md text-white text-xs font-bold uppercase tracking-wider flex items-center gap-2 shadow-lg", children: [_jsx(Lock, { className: "w-3 h-3" }), " Premium"] }) }))] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsx("span", { className: "text-sm font-semibold text-gray-700 uppercase tracking-wide", children: category?.name || 'Course' }), _jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Star, { className: "w-4 h-4 fill-yellow-400 text-yellow-400" }), _jsx("span", { className: "text-sm font-semibold", children: "4.9" }), _jsx("span", { className: "text-sm text-gray-500", children: "(127 reviews)" })] })] }), _jsx("h1", { className: "text-4xl md:text-5xl font-serif text-gray-900 mb-4 leading-tight", children: service.name }), _jsx(CategoryDescription, { description: service.description, className: "text-xl text-gray-600 leading-relaxed [&_p]:mb-0" })] }), _jsx("div", { className: "border-b border-gray-200", children: _jsx("div", { className: "flex gap-8", children: [
+    return (_jsx("div", { className: "min-h-screen bg-white", children: _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 max-w-7xl", children: [_jsx("div", { className: "mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12 mb-20", children: [_jsxs("div", { className: "lg:col-span-2 space-y-8", children: [_jsxs("div", { className: "relative aspect-video bg-black rounded-2xl overflow-hidden group shadow-2xl border border-gray-800", children: [isPlaying && hasAccess ? (_jsxs("div", { className: "absolute inset-0 bg-black flex items-center justify-center", children: [service.contentType === 'video' ? (_jsx("video", { src: service.contentUrl, controls: true, autoPlay: true, className: "w-full h-full object-contain", poster: getServiceImage(service.image, storeConfig, ""), children: "Your browser does not support the video tag." })) : service.contentType === 'audio' ? (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center p-8 bg-gradient-to-br from-gray-900 to-slate-900 text-white", children: [_jsxs("div", { className: "w-32 h-32 bg-white/5 rounded-full flex items-center justify-center mb-6 backdrop-blur-xl border border-white/10 shadow-2xl relative", children: [_jsx(Headphones, { className: "w-12 h-12 text-white relative z-10" }), _jsx("div", { className: "absolute inset-0 bg-blue-500/20 rounded-full animate-ping opacity-20" })] }), _jsx("h3", { className: "text-xl font-bold mb-2", children: service.name }), _jsx("p", { className: "text-gray-400 mb-8", children: "Now Playing \u2022 Audiobook" }), _jsx("audio", { src: service.contentUrl, controls: true, autoPlay: true, className: "w-full max-w-md h-12" })] })) : (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center p-8 bg-gray-50", children: [_jsx("div", { className: "w-24 h-24 bg-blue-100 rounded-2xl flex items-center justify-center mb-6 shadow-sm", children: _jsx(FileText, { className: "w-12 h-12 text-blue-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Resource Ready" }), _jsx("p", { className: "text-gray-500 mb-8 text-center max-w-sm", children: "You have access to this premium guide. Download it below to start reading." }), _jsxs("a", { href: service.contentUrl, target: "_blank", rel: "noopener noreferrer", className: "bg-black text-white px-10 py-4 rounded-full font-bold hover:bg-gray-800 transition-all flex items-center gap-3 shadow-xl", children: [_jsx(Download, { className: "w-5 h-5" }), " Download PDF Guide"] })] })), _jsx("button", { onClick: () => setIsPlaying(false), className: "absolute top-6 right-6 bg-black/40 hover:bg-black/60 p-3 rounded-full backdrop-blur-md transition-all border border-white/10 group/close", title: "Close player", children: _jsx(X, { className: "w-5 h-5 text-white group-hover/close:rotate-90 transition-transform" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Image, { src: getServiceImage(service.image, storeConfig, "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&auto=format&fit=crop"), alt: service.name, fill: true, className: "object-cover transition-transform duration-700 group-hover:scale-105 opacity-80" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: hasAccess ? (_jsxs(motion.button, { whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, onClick: () => setIsPlaying(true), className: "w-24 h-24 rounded-full bg-white/10 backdrop-blur-xl flex items-center justify-center shadow-2xl hover:bg-white/20 transition-colors border border-white/30 relative group/play", children: [_jsx("div", { className: "absolute inset-0 bg-white/20 rounded-full blur-xl group-hover/play:blur-2xl transition-all" }), service.contentType === 'pdf' ? (_jsx(Download, { className: "w-10 h-10 text-white relative z-10" })) : (_jsx(Play, { className: "w-10 h-10 text-white ml-1 relative z-10", fill: "currentColor" }))] })) : (_jsxs("div", { className: "text-center p-6 backdrop-blur-md bg-black/40 rounded-3xl border border-white/10 max-w-sm mx-4", children: [_jsx("div", { className: "w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4 border border-white/20", children: _jsx(Lock, { className: "w-8 h-8 text-white" }) }), _jsx("h3", { className: "text-xl font-bold text-white mb-2", children: "Premium Content" }), _jsxs("p", { className: "text-gray-300 text-sm mb-6", children: ["This ", typeLabel.toLowerCase(), " is exclusive to members. Unlock it now to start learning."] }), _jsxs(Button, { onClick: handleAddToCart, className: "bg-white text-black hover:bg-gray-200 rounded-full px-8 h-14 font-bold text-base w-full shadow-2xl", children: ["Unlock For ", formatCurrency(service.price, service.currency || 'USD')] })] })) })] })), _jsx("div", { className: "absolute top-6 left-6", children: _jsxs("div", { className: cn("px-4 py-2 rounded-full text-white text-xs font-bold uppercase tracking-wider flex items-center gap-2 backdrop-blur-md shadow-lg", contentTypeColor), children: [_jsx(TypeIcon, { className: "w-3 h-3" }), " ", typeLabel] }) }), !hasAccess && isLocked && (_jsx("div", { className: "absolute top-6 right-6", children: _jsxs("div", { className: "px-4 py-2 rounded-full bg-black/90 backdrop-blur-md text-white text-xs font-bold uppercase tracking-wider flex items-center gap-2 shadow-lg", children: [_jsx(Lock, { className: "w-3 h-3" }), " Premium"] }) }))] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-3 mb-4", children: [_jsx("span", { className: "text-sm font-semibold text-gray-700 uppercase tracking-wide", children: category?.name || 'Course' }), _jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Star, { className: "w-4 h-4 fill-yellow-400 text-yellow-400" }), _jsx("span", { className: "text-sm font-semibold", children: "4.9" }), _jsx("span", { className: "text-sm text-gray-500", children: "(127 reviews)" })] })] }), _jsx("h1", { className: "text-4xl md:text-5xl font-serif text-gray-900 mb-4 leading-tight", children: service.name }), _jsx("p", { className: "text-xl text-gray-600 leading-relaxed", children: service.description })] }), _jsx("div", { className: "border-b border-gray-200", children: _jsx("div", { className: "flex gap-8", children: [
                                             { id: 'overview', label: 'Overview' },
                                             { id: 'curriculum', label: 'Curriculum' },
                                             { id: 'reviews', label: 'Reviews' },
@@ -149,5 +140,5 @@ export function MotivationalServiceDetailPage({ storeConfig: initialConfig, serv
                                                     { name: "David Lee", rating: 4, comment: "Great course overall. Some sections could be more detailed.", date: "2 months ago" },
                                                 ].map((review, i) => (_jsxs("div", { className: "border-b border-gray-100 pb-6 last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-3 mb-2", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center", children: _jsx("span", { className: "text-sm font-semibold", children: review.name[0] }) }), _jsxs("div", { children: [_jsx("div", { className: "font-semibold", children: review.name }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex items-center gap-1", children: [...Array(5)].map((_, j) => (_jsx(Star, { className: cn("w-3 h-3", j < review.rating ? "fill-yellow-400 text-yellow-400" : "text-gray-300") }, j))) }), _jsx("span", { className: "text-xs text-gray-500", children: review.date })] })] })] }), _jsx("p", { className: "text-gray-700 mt-2", children: review.comment })] }, i)))] }))] })] }), _jsx("div", { className: "lg:col-span-1", children: _jsx("div", { className: "sticky top-24", children: _jsxs("div", { className: "bg-white border-2 border-gray-200 rounded-2xl p-8 shadow-lg", children: [_jsxs("div", { className: "mb-6", children: [_jsx("div", { className: "text-4xl font-bold text-gray-900 mb-2", children: isFree ? 'Free' : formatCurrency(service.price, service.currency || 'USD') }), !isFree && (_jsx("div", { className: "text-sm text-gray-500 line-through", children: formatCurrency(service.price * 1.5, service.currency || 'USD') }))] }), _jsxs("div", { className: "space-y-4 mb-6", children: [_jsxs(Button, { size: "lg", onClick: handleAddToCart, disabled: isCartLoading, className: "w-full h-14 rounded-full bg-black text-white hover:bg-gray-800 font-bold text-lg", children: [isCartLoading ? 'Adding...' : isFree ? 'Enroll Now' : 'Add to Cart', _jsx(ArrowRight, { className: "ml-2 h-5 w-5" })] }), storeConfig.features.wishlist && (_jsxs(Button, { variant: "outline", size: "lg", onClick: handleWishlistClick, disabled: isWishlistLoading, className: cn("w-full h-14 rounded-full border-2 transition-all", isInWishlist(service.id)
                                                         ? "border-red-500 bg-red-50 text-red-500 hover:bg-red-100"
-                                                        : "border-gray-200 hover:border-gray-300"), children: [_jsx(Heart, { className: cn("w-5 h-5 mr-2", isInWishlist(service.id) && "fill-current") }), isInWishlist(service.id) ? 'In Wishlist' : 'Add to Wishlist'] })), _jsxs(Button, { variant: "outline", size: "lg", onClick: handleShare, className: "w-full h-14 rounded-full border-2 border-gray-200", children: [_jsx(Share2, { className: "w-5 h-5 mr-2" }), "Share"] })] }), _jsxs("div", { className: "border-t border-gray-200 pt-6 space-y-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(CheckCircle, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-gray-700", children: [_jsx("div", { className: "font-semibold", children: "Lifetime Access" }), _jsx("div", { className: "text-gray-500", children: "Access this course forever" })] })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(CheckCircle, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-gray-700", children: [_jsx("div", { className: "font-semibold", children: "Certificate of Completion" }), _jsx("div", { className: "text-gray-500", children: "Get certified upon completion" })] })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(CheckCircle, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-gray-700", children: [_jsx("div", { className: "font-semibold", children: "30-Day Money-Back Guarantee" }), _jsx("div", { className: "text-gray-500", children: "Full refund if not satisfied" })] })] })] }), isLocked && !isAuthenticated && (_jsx("div", { className: "mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: _jsxs("p", { className: "text-sm text-yellow-800", children: [_jsx(Lock, { className: "w-4 h-4 inline mr-1" }), "This content requires a membership or purchase."] }) }))] }) }) })] }), relatedServices.length > 0 && (_jsxs("div", { className: "mt-20 pt-16 border-t border-gray-200", children: [_jsx("h2", { className: "text-3xl font-serif text-gray-900 mb-8", children: "You Might Also Like" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", children: relatedServices.map((relatedService) => (_jsx(Link, { href: `/${storeConfig.slug}/services/${relatedService.slug}`, className: "group", children: _jsxs("div", { className: "bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-xl transition-all", children: [_jsx("div", { className: "relative aspect-video bg-gray-200", children: _jsx(Image, { src: getServiceImage(relatedService.image, storeConfig, "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&auto=format&fit=crop"), alt: relatedService.name, fill: true, className: "object-cover group-hover:scale-105 transition-transform duration-300", unoptimized: true }) }), _jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:underline", children: relatedService.name }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-bold text-gray-900", children: relatedService.price > 0 ? formatCurrency(relatedService.price, relatedService.currency || 'USD') : 'Free' }), _jsx(ArrowRight, { className: "w-4 h-4 text-gray-400 group-hover:text-gray-900 group-hover:translate-x-1 transition-all" })] })] })] }) }, relatedService.id))) })] }))] }) }));
+                                                        : "border-gray-200 hover:border-gray-300"), children: [_jsx(Heart, { className: cn("w-5 h-5 mr-2", isInWishlist(service.id) && "fill-current") }), isInWishlist(service.id) ? 'In Wishlist' : 'Add to Wishlist'] })), _jsxs(Button, { variant: "outline", size: "lg", onClick: handleShare, className: "w-full h-14 rounded-full border-2 border-gray-200", children: [_jsx(Share2, { className: "w-5 h-5 mr-2" }), "Share"] })] }), _jsxs("div", { className: "border-t border-gray-200 pt-6 space-y-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(CheckCircle, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-gray-700", children: [_jsx("div", { className: "font-semibold", children: "Lifetime Access" }), _jsx("div", { className: "text-gray-500", children: "Access this course forever" })] })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(CheckCircle, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-gray-700", children: [_jsx("div", { className: "font-semibold", children: "Certificate of Completion" }), _jsx("div", { className: "text-gray-500", children: "Get certified upon completion" })] })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(CheckCircle, { className: "w-5 h-5 text-green-500 shrink-0 mt-0.5" }), _jsxs("div", { className: "text-sm text-gray-700", children: [_jsx("div", { className: "font-semibold", children: "30-Day Money-Back Guarantee" }), _jsx("div", { className: "text-gray-500", children: "Full refund if not satisfied" })] })] })] }), isLocked && !isAuthenticated && (_jsx("div", { className: "mt-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: _jsxs("p", { className: "text-sm text-yellow-800", children: [_jsx(Lock, { className: "w-4 h-4 inline mr-1" }), "This content requires a membership or purchase."] }) }))] }) }) })] }), relatedServices.length > 0 && (_jsxs("div", { className: "mt-20 pt-16 border-t border-gray-200", children: [_jsx("h2", { className: "text-3xl font-serif text-gray-900 mb-8", children: "You Might Also Like" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", children: relatedServices.map((relatedService) => (_jsx(Link, { href: `/${storeConfig.slug}/services/${relatedService.slug}`, className: "group", children: _jsxs("div", { className: "bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-xl transition-all", children: [_jsx("div", { className: "relative aspect-video bg-gray-200", children: _jsx(Image, { src: getServiceImage(relatedService.image, storeConfig, "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&auto=format&fit=crop"), alt: relatedService.name, fill: true, className: "object-cover group-hover:scale-105 transition-transform duration-300" }) }), _jsxs("div", { className: "p-4", children: [_jsx("h3", { className: "font-semibold text-gray-900 mb-2 line-clamp-2 group-hover:underline", children: relatedService.name }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-bold text-gray-900", children: relatedService.price > 0 ? formatCurrency(relatedService.price, relatedService.currency || 'USD') : 'Free' }), _jsx(ArrowRight, { className: "w-4 h-4 text-gray-400 group-hover:text-gray-900 group-hover:translate-x-1 transition-all" })] })] })] }) }, relatedService.id))) })] }))] }) }));
 }

package/dist/layouts/motivational-speaker/pages/ServicesPage.d.ts

@@ -4,6 +4,6 @@ interface ServicesPageProps {
     initialCategory?: string;
     titleOverride?: string;
 }
-export declare function MotivationalServicesPage({ storeConfig: initialConfig, initialCategory, titleOverride }: ServicesPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ServicesPage({ storeConfig, initialCategory, titleOverride }: ServicesPageProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ServicesPage.d.ts.map

package/dist/layouts/motivational-speaker/pages/ServicesPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ServicesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/pages/ServicesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAahD,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,wBAAwB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,EAAE,iBAAiB,2CAoLzH"}
+{"version":3,"file":"ServicesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/motivational-speaker/pages/ServicesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQhD,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,EAAE,iBAAiB,2CA2J9F"}

package/dist/layouts/motivational-speaker/pages/ServicesPage.js

@@ -1,32 +1,17 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button } from '../../../components/ui/button.js';
+import { Button } from '../../../components/ui/button';
 import { Clock, ArrowRight, Filter } from 'lucide-react';
 import Link from 'next/link';
 import { useState } from 'react';
-import { cn, formatCurrency, isEditorPreviewMode, resolveStoreCategoriesForDisplay, resolveStoreServicesForDisplay } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
+import { cn, formatCurrency, filterActiveServices } from '../../../lib/utils';
 import Image from 'next/image';
-import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
-import { useStore } from '../../../lib/store-context.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
-import { encodePayazaFieldKey, payazaInlineBindingProps } from '../../../preview/canvas/field-key.js';
-export function MotivationalServicesPage({ storeConfig: initialConfig, initialCategory, titleOverride }) {
-    const { store } = useStore();
-    const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { services: loadedServices, categories: loadedCategories } = useCatalogLoader(storeConfig, {
-        fetchProducts: false,
-    });
-    const services = resolveStoreServicesForDisplay(loadedServices, isPreview);
-    const categories = resolveStoreCategoriesForDisplay(loadedCategories, isPreview);
+export function ServicesPage({ storeConfig, initialCategory, titleOverride }) {
+    const categories = storeConfig.categories || [];
+    const services = filterActiveServices(storeConfig.services || []);
     const [activeCategory, setActiveCategory] = useState(initialCategory || categories[0]?.slug || '');
     const primaryColor = storeConfig.branding.primaryColor;
     const servicesConfig = storeConfig.layoutConfig?.pages?.services;
-    const heroConfig = servicesConfig?.hero;
-    const heroImage = typeof heroConfig?.backgroundImage === 'string' && heroConfig.backgroundImage.trim().length > 0
-        ? heroConfig.backgroundImage.trim()
-        : 'https://images.unsplash.com/photo-1544531696-608a67ed9739?q=80&w=2070&auto=format&fit=crop';
     // Motivational-speaker specific labels
     const categoryLabel = 'Categories';
     const serviceLabel = 'Courses';
@@ -39,8 +24,8 @@ export function MotivationalServicesPage({ storeConfig: initialConfig, initialCa
     const getServiceLink = (slug) => {
         return `/${storeConfig.slug}/services/${slug}`;
     };
-    const pageTitle = titleOverride || heroConfig?.title || servicesConfig?.title || (_jsxs(_Fragment, { children: ["Signature ", _jsx("span", { className: "font-bold font-sans", style: { color: primaryColor }, children: serviceLabel })] }));
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [heroConfig?.show !== false && (_jsxs("div", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "services", className: "relative bg-gray-900 py-32 px-4 text-center overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", "data-payaza-image": isPreview ? encodePayazaFieldKey('hero', ['backgroundImage']) : undefined, children: [_jsx(Image, { src: heroImage, alt: "Service Menu", fill: true, className: "w-full h-full object-cover opacity-60", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/30" })] }), _jsxs("div", { className: "container mx-auto max-w-4xl relative z-10", children: [showLayoutDecorativeBadges() && (_jsx("span", { className: "inline-block py-1 px-3 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-xs font-bold uppercase tracking-widest text-white mb-6 shadow-sm", children: storeConfig.name })), _jsx("h1", { className: "text-5xl md:text-7xl font-serif font-light mb-6 tracking-tight text-white leading-tight", ...payazaInlineBindingProps(isPreview, 'hero', ['title']), children: pageTitle }), _jsx("p", { className: "text-gray-200 max-w-2xl mx-auto text-lg font-light leading-relaxed", ...payazaInlineBindingProps(isPreview, 'hero', ['description']), children: heroConfig?.description || servicesConfig?.description || storeConfig.description || `Explore our curated selection of premium ${serviceLabel.toLowerCase()} designed for your success.` })] })] })), _jsx("div", { className: "sticky top-16 z-30 bg-white/80 backdrop-blur-xl border-b border-gray-100 transition-all", children: _jsx("div", { className: "container mx-auto px-4", children: _jsxs("div", { className: "flex items-center gap-3 overflow-x-auto py-4 scrollbar-hide no-scrollbar", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-wider px-4 border-r border-gray-100 hidden md:flex shrink-0", children: [_jsx(Filter, { className: "w-3.5 h-3.5" }), categoryLabel] }), categories.map((cat) => (_jsx("button", { onClick: () => setActiveCategory(cat.slug), className: cn("px-6 py-2.5 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border flex-shrink-0", activeCategory === cat.slug
+    const pageTitle = titleOverride || servicesConfig?.title || (_jsxs(_Fragment, { children: ["Signature ", _jsx("span", { className: "font-bold font-sans", style: { color: primaryColor }, children: serviceLabel })] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("div", { "data-section": "hero", className: "relative bg-gray-900 py-32 px-4 text-center overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", children: [_jsx(Image, { src: "https://images.unsplash.com/photo-1544531696-608a67ed9739?q=80&w=2070&auto=format&fit=crop", alt: "Service Menu", fill: true, className: "w-full h-full object-cover opacity-60" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/30" })] }), _jsxs("div", { className: "container mx-auto max-w-4xl relative z-10", children: [_jsx("span", { className: "inline-block py-1 px-3 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-xs font-bold uppercase tracking-widest text-white mb-6 shadow-sm", children: storeConfig.name }), _jsx("h1", { className: "text-5xl md:text-7xl font-serif font-light mb-6 tracking-tight text-white leading-tight", children: pageTitle }), _jsx("p", { className: "text-gray-200 max-w-2xl mx-auto text-lg font-light leading-relaxed", children: servicesConfig?.description || storeConfig.description || `Explore our curated selection of premium ${serviceLabel.toLowerCase()} designed for your success.` })] })] }), _jsx("div", { className: "sticky top-16 z-30 bg-white/80 backdrop-blur-xl border-b border-gray-100 transition-all", children: _jsx("div", { className: "container mx-auto px-4", children: _jsxs("div", { className: "flex items-center gap-3 overflow-x-auto py-4 scrollbar-hide no-scrollbar", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-gray-400 uppercase tracking-wider px-4 border-r border-gray-100 hidden md:flex shrink-0", children: [_jsx(Filter, { className: "w-3.5 h-3.5" }), categoryLabel] }), categories.map((cat) => (_jsx("button", { onClick: () => setActiveCategory(cat.slug), className: cn("px-6 py-2.5 rounded-full text-sm font-bold whitespace-nowrap transition-all duration-300 border flex-shrink-0", activeCategory === cat.slug
                                     ? "text-white shadow-lg scale-105 border-transparent"
-                                    : "bg-white text-gray-500 border-gray-100 hover:border-gray-300 hover:text-black"), style: activeCategory === cat.slug ? { backgroundColor: primaryColor } : {}, children: cat.name }, cat.id)))] }) }) }), _jsx("div", { "data-section": "services-list", "data-payaza-section-key": "services-list", "data-payaza-page": "services", className: "container mx-auto px-4 max-w-7xl py-16", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-16", children: filteredServices.map((service) => (_jsxs("div", { className: "group flex flex-col h-full", children: [_jsxs(Link, { href: getServiceLink(service.slug), className: "block relative aspect-[4/3] rounded-3xl overflow-hidden bg-gray-100 mb-6 shadow-sm group-hover:shadow-xl transition-all duration-500", children: [_jsx(Image, { src: service.image || 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&auto=format&fit=crop&q=60', alt: service.name, fill: true, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105", unoptimized: true }), _jsx("div", { className: "absolute bottom-4 left-4 bg-white/95 backdrop-blur px-4 py-2 rounded-full text-sm font-bold shadow-sm text-gray-900", children: service.price > 0 ? formatCurrency(service.price, service.currency || storeConfig.settings?.currency || 'USD') : 'Free' }), _jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-full bg-white text-black hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8", children: "View Content" }) })] }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("div", { className: "flex justify-between items-start mb-3", children: _jsx(Link, { href: getServiceLink(service.slug), children: _jsx("h3", { className: "text-2xl font-bold text-gray-900 group-hover:text-gray-600 transition-colors", children: service.name }) }) }), _jsx(RichTextExcerpt, { value: service.description, as: "p", className: "text-gray-500 mb-6 line-clamp-2 leading-relaxed text-base flex-1" }), _jsxs("div", { className: "flex items-center justify-between pt-4 border-t border-gray-100 text-sm font-medium text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-6", children: [service.duration > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "w-4 h-4 text-gray-400" }), service.duration, " mins"] })), service.contentType && (_jsx("div", { className: "flex items-center gap-2 uppercase tracking-widest text-[10px] font-black", children: service.contentType }))] }), _jsxs(Link, { href: getServiceLink(service.slug), className: "flex items-center gap-2 text-black font-bold group/link", children: ["Explore ", _jsx(ArrowRight, { className: "w-4 h-4 transition-transform group-hover/link:translate-x-1" })] })] })] })] }, service.id))) }) })] }));
+                                    : "bg-white text-gray-500 border-gray-100 hover:border-gray-300 hover:text-black"), style: activeCategory === cat.slug ? { backgroundColor: primaryColor } : {}, children: cat.name }, cat.id)))] }) }) }), _jsx("div", { "data-section": "services-list", className: "container mx-auto px-4 max-w-7xl py-16", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-10 gap-y-16", children: filteredServices.map((service) => (_jsxs("div", { className: "group flex flex-col h-full", children: [_jsxs(Link, { href: getServiceLink(service.slug), className: "block relative aspect-[4/3] rounded-3xl overflow-hidden bg-gray-100 mb-6 shadow-sm group-hover:shadow-xl transition-all duration-500", children: [_jsx(Image, { src: service.image || 'https://images.unsplash.com/photo-1629909613654-28e377c37b09?w=800&auto=format&fit=crop&q=60', alt: service.name, fill: true, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }), _jsx("div", { className: "absolute bottom-4 left-4 bg-white/95 backdrop-blur px-4 py-2 rounded-full text-sm font-bold shadow-sm text-gray-900", children: service.price > 0 ? formatCurrency(service.price, service.currency || storeConfig.settings?.currency || 'USD') : 'Free' }), _jsx("div", { className: "absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-full bg-white text-black hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8", children: "View Content" }) })] }), _jsxs("div", { className: "flex flex-col flex-1", children: [_jsx("div", { className: "flex justify-between items-start mb-3", children: _jsx(Link, { href: getServiceLink(service.slug), children: _jsx("h3", { className: "text-2xl font-bold text-gray-900 group-hover:text-gray-600 transition-colors", children: service.name }) }) }), _jsx("p", { className: "text-gray-500 mb-6 line-clamp-2 leading-relaxed text-base flex-1", children: service.description }), _jsxs("div", { className: "flex items-center justify-between pt-4 border-t border-gray-100 text-sm font-medium text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-6", children: [service.duration > 0 && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "w-4 h-4 text-gray-400" }), service.duration, " mins"] })), service.contentType && (_jsx("div", { className: "flex items-center gap-2 uppercase tracking-widest text-[10px] font-black", children: service.contentType }))] }), _jsxs(Link, { href: getServiceLink(service.slug), className: "flex items-center gap-2 text-black font-bold group/link", children: ["Explore ", _jsx(ArrowRight, { className: "w-4 h-4 transition-transform group-hover/link:translate-x-1" })] })] })] })] }, service.id))) }) })] }));
 }

package/dist/layouts/motivational-speaker/pages/SubscriptionPage.js

@@ -1,17 +1,17 @@
 '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 { Button } from '../../../components/ui/button';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs';
 import { CheckCircle, Star, Zap, Crown, ArrowRight, Users, BookOpen, Video, Headphones } from 'lucide-react';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { formatCurrency } from '../../../lib/utils/index.js';
+import { formatCurrency } from '../../../lib/utils';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { cn } from '../../../lib/utils/index.js';
-import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
+import { useStore } from '../../../lib/store-context';
+import { useToast } from '../../../components/ui/toast';
+import { cn } from '../../../lib/utils';
+import { showLayoutDecorativeBadges } from '../../../lib/layout-badges';
 export function MotivationalSubscriptionPage({ storeConfig }) {
     const router = useRouter();
     const { addToCart } = useStore();

package/dist/layouts/shared/components/BaseStoreLayout.js

@@ -1,14 +1,14 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { isBookingAgendaStoreRoot } from '../../../lib/layout-route-utils.js';
-import { StandardLayout } from '../wrappers/StandardLayout.js';
-import { ClothingLayout } from '../wrappers/ClothingLayout.js';
-import { ClothingMinimalLayout } from '../wrappers/ClothingMinimalLayout.js';
-import { FoodModernLayout } from '../wrappers/FoodModernLayout.js';
-import { BookingAgendaLayout } from '../wrappers/BookingAgendaLayout.js';
-import { ElectronicsLayout } from '../wrappers/ElectronicsLayout.js';
-import { MotivationalLayout } from '../wrappers/MotivationalLayout.js';
-import { LoginSheet } from '../../../components/auth/LoginSheet.js';
+import { isBookingAgendaStoreRoot } from '../../../lib/layout-route-utils';
+import { StandardLayout } from '../wrappers/StandardLayout';
+import { ClothingLayout } from '../wrappers/ClothingLayout';
+import { ClothingMinimalLayout } from '../wrappers/ClothingMinimalLayout';
+import { FoodModernLayout } from '../wrappers/FoodModernLayout';
+import { BookingAgendaLayout } from '../wrappers/BookingAgendaLayout';
+import { ElectronicsLayout } from '../wrappers/ElectronicsLayout';
+import { MotivationalLayout } from '../wrappers/MotivationalLayout';
+import { LoginSheet } from '../../../components/auth/LoginSheet';
 import { usePathname, useSearchParams } from 'next/navigation';
 export function BaseStoreLayout({ children, storeConfig }) {
     const pathname = usePathname();