storefront-layouts 1.0.3 → 1.0.4

package/dist/layouts/food-modern/pages/CategoryPage.js

@@ -1,27 +1,30 @@
 '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 { useEffect, useMemo } from 'react';
-import { formatCurrency, isEditorPreviewMode, resolveCategoryBySlugForDisplay, resolveMenuItemsForDisplay } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { CategoryDescription } from '../../../components/rich-text/CategoryDescription.js';
-import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
-export function FoodModernCategoryPage({ storeConfig: initialConfig, categorySlug }) {
+import { useToast } from '../../../components/ui/toast';
+import { useAnalytics } from '../../../hooks/use-analytics';
+import { useEffect } from 'react';
+import { formatCurrency } from '../../../lib/utils';
+export function CategoryPage({ storeConfig: initialConfig, categorySlug }) {
     const { store, addToCart } = useStore();
     const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const { categories: loadedCategories, products: loadedProducts, menuItems: loadedMenuItems } = useCatalogLoader(storeConfig, { fetchServices: false });
-    const category = resolveCategoryBySlugForDisplay(loadedCategories, categorySlug, isPreview);
-    const menuItems = useMemo(() => {
-        const allItems = resolveMenuItemsForDisplay(loadedMenuItems, loadedProducts, isPreview);
-        return allItems.filter(item => item.categoryId === category?.id);
-    }, [loadedMenuItems, loadedProducts, isPreview, category?.id]);
+    const categories = storeConfig.categories || [];
+    const category = categories.find(c => c.slug === categorySlug);
+    const { products, isLoading, hasMore, loadMore } = useCategoryProducts(storeConfig.id, category?.id);
+    const menuItems = products.map((product) => ({
+        id: product.id,
+        name: product.name,
+        description: product.description || '',
+        price: product.price,
+        image: product.images[0],
+        categoryId: product.categoryId,
+        inStock: product.inStock,
+    }));
     const { addToast } = useToast();
     const { trackEvent } = useAnalytics();
     // Track category view
@@ -60,5 +63,5 @@ export function FoodModernCategoryPage({ storeConfig: initialConfig, categorySlu
     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 ${bgColor} ${textColor} transition-colors duration-300`, children: [_jsxs("div", { "data-section": "categoryDetail", "data-payaza-section-key": "categoryDetail", "data-payaza-page": "categoryDetail", 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 ${isDarkTheme ? 'bg-black/60' : '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 ${isDarkTheme ? 'text-gray-400 hover:text-white' : '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: `${isDarkTheme ? 'border-white/20 text-white hover:bg-white/10' : '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 items found in this category." }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsx("div", { className: "space-y-12", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: menuItems.map((item) => (_jsxs("div", { className: "group bg-[#1A1A1A] rounded-none overflow-hidden border border-white/5 hover:border-orange-500/50 transition-all duration-500 flex flex-col h-full", children: [_jsxs("div", { className: "relative aspect-square overflow-hidden grayscale hover:grayscale-0 transition-all duration-700", children: [_jsx(ImageWithFallback, { src: item.image, alt: item.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "square" }), _jsx("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-none bg-white text-black hover:bg-orange-600 hover:text-white transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8 uppercase tracking-widest text-xs", onClick: () => handleAddToCart(item), children: "Order Now" }) })] }), _jsxs("div", { className: "p-8 flex flex-col flex-1 text-center", children: [_jsx("h3", { className: "font-bold text-xl text-white uppercase tracking-tight mb-2 group-hover:text-orange-500 transition-colors", children: item.name }), _jsx(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-500 text-sm mb-6 line-clamp-2 leading-relaxed flex-1 font-light italic" }), _jsx("span", { className: "text-2xl font-serif text-white", children: formatCurrency(item.price, storeConfig.settings?.currency || 'USD') })] })] }, item.id))) }) }))] })] }));
+    return (_jsxs("div", { className: `min-h-screen ${bgColor} ${textColor} 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 ${isDarkTheme ? 'bg-black/60' : '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 ${isDarkTheme ? 'text-gray-400 hover:text-white' : '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: `${isDarkTheme ? 'border-white/20 text-white hover:bg-white/10' : 'bg-white'}`, children: [_jsx(Filter, { className: "h-4 w-4 mr-2" }), " Filter"] }) })] }), !hasItems && !isLoading ? (_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 items found in this category." }), _jsx(Button, { className: "mt-4", onClick: () => window.history.back(), children: "Go Back" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-12", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: menuItems.map((item) => (_jsxs("div", { className: "group bg-[#1A1A1A] rounded-none overflow-hidden border border-white/5 hover:border-orange-500/50 transition-all duration-500 flex flex-col h-full", children: [_jsxs("div", { className: "relative aspect-square overflow-hidden grayscale hover:grayscale-0 transition-all duration-700", children: [_jsx(ImageWithFallback, { src: item.image, alt: item.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "square" }), _jsx("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center", children: _jsx(Button, { className: "rounded-none bg-white text-black hover:bg-orange-600 hover:text-white transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 shadow-lg font-bold px-8 uppercase tracking-widest text-xs", onClick: () => handleAddToCart(item), children: "Order Now" }) })] }), _jsxs("div", { className: "p-8 flex flex-col flex-1 text-center", children: [_jsx("h3", { className: "font-bold text-xl text-white uppercase tracking-tight mb-2 group-hover:text-orange-500 transition-colors", children: item.name }), _jsx("p", { className: "text-gray-500 text-sm mb-6 line-clamp-2 leading-relaxed flex-1 font-light italic", children: item.description }), _jsx("span", { className: "text-2xl font-serif text-white", children: formatCurrency(item.price, storeConfig.settings?.currency || 'USD') })] })] }, item.id))) }) }), hasMore && (_jsx("div", { className: "mt-10 flex justify-center", children: _jsx(Button, { onClick: loadMore, disabled: isLoading, children: "Load more" }) }))] }))] })] }));
 }

package/dist/layouts/food-modern/pages/ContactPage.d.ts

@@ -2,6 +2,6 @@ import { StoreConfig } from '../../../lib/store-types';
 interface ContactPageProps {
     storeConfig: StoreConfig;
 }
-export declare function FoodModernContactPage({ 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/food-modern/pages/ContactPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/ContactPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQhD,UAAU,gBAAgB;IACtB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,wBAAgB,qBAAqB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,gBAAgB,2CAwUrF"}
+{"version":3,"file":"ContactPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/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,2CA6T3E"}

package/dist/layouts/food-modern/pages/ContactPage.js

@@ -1,13 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button } from '../../../components/ui/button.js';
+import { Button } from '../../../components/ui/button';
 import { Mail, Phone, MapPin, Clock, Send, MessageSquare, CheckCircle } from 'lucide-react';
-import { useStore } from '../../../lib/store-context.js';
+import { useStore } from '../../../lib/store-context';
 import Image from 'next/image';
-import { submitContact } from '../../../lib/services/contact.service.js';
-import { payazaInlineBindingProps, encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
-export function FoodModernContactPage({ storeConfig: initialConfig }) {
+import { submitContact } from '../../../lib/services/contact.service';
+export function ContactPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
     // We use CSS variables for theming to inherit from parent layout
@@ -16,7 +15,6 @@ export function FoodModernContactPage({ storeConfig: initialConfig }) {
     const [formState, setFormState] = useState('idle');
     const [errorMessage, setErrorMessage] = useState(null);
     const contactConfig = storeConfig.layoutConfig?.pages?.contact;
-    const isPreview = !!storeConfig.isPreview;
     const handleSubmit = async (e) => {
         e.preventDefault();
         setErrorMessage(null);
@@ -51,5 +49,5 @@ export function FoodModernContactPage({ storeConfig: initialConfig }) {
             setErrorMessage('Failed to send message. Please try again.');
         }
     };
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { "data-section": "contactHeader", "data-payaza-section-key": "contactHeader", "data-payaza-page": "contact", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", "data-payaza-image": isPreview ? encodePayazaFieldKey('contactHeader', ['backgroundImage']) : undefined, children: [_jsx(Image, { src: contactConfig?.contactHeader?.backgroundImage || "https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop", alt: "Contact Background", fill: true, className: "w-full h-full object-cover", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-black/60" })] }), _jsxs("div", { className: "container mx-auto px-4 relative z-10 text-center", children: [_jsx("h1", { className: "text-4xl md:text-6xl font-bold mb-4 tracking-tight", ...payazaInlineBindingProps(isPreview, 'contactHeader', ['title']), children: contactConfig?.contactHeader?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", ...payazaInlineBindingProps(isPreview, 'contactHeader', ['subtitle'], { rich: 'inline' }), children: contactConfig?.contactHeader?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { "data-section": "contactForm", "data-payaza-section-key": "contactForm", "data-payaza-page": "contact", className: "container mx-auto px-4 -mt-10 relative z-20 max-w-6xl", children: _jsxs("div", { className: "bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 flex flex-col lg:flex-row", children: [_jsxs("div", { className: "lg:w-2/5 p-8 md:p-12 text-white relative overflow-hidden", style: { backgroundColor: 'var(--store-primary)' }, children: [_jsx("div", { className: "absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl" }), _jsx("div", { className: "absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-black opacity-10 rounded-full blur-2xl" }), _jsx("h2", { className: "text-2xl font-bold mb-8 relative z-10", children: contactConfig?.contactForm?.infoTitle || "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10", children: contactConfig?.contactForm?.infoDescription || "Fill out the form and our team will get back to you within 24 hours." }), _jsxs("div", { className: "space-y-8 relative z-10", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Phone, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Call Us" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.phone || '+1 (555) 123-4567' })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Mail, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Email Us" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com` })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(MapPin, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Visit Us" }), _jsxs("p", { className: "text-white/80", children: [storeConfig.contactInfo?.address?.street || '123 Commerce Blvd', ",", _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Business City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Clock, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Opening Hours" }), _jsx("p", { className: "text-white/80", children: storeConfig.locations?.[0]?.openingHours || 'Mon - Fri: 9am - 6pm' }), !storeConfig.locations?.[0]?.openingHours && _jsx("p", { className: "text-white/80", children: "Sat: 10am - 4pm" })] })] })] }), _jsx("div", { className: "mt-12 relative z-10", children: _jsxs("div", { className: "flex gap-4", children: [storeConfig.branding.socialMedia?.instagram && (_jsx("a", { href: storeConfig.branding.socialMedia.instagram, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/instagram.svg", alt: "Instagram", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.twitter && (_jsx("a", { href: storeConfig.branding.socialMedia.twitter, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/twitter.svg", alt: "Twitter", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.facebook && (_jsx("a", { href: storeConfig.branding.socialMedia.facebook, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/facebook.svg", alt: "Facebook", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.youtube && (_jsx("a", { href: storeConfig.branding.socialMedia.youtube, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/youtube.svg", alt: "YouTube", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) }))] }) })] }), _jsxs("div", { className: "lg:w-3/5 p-8 md:p-12 bg-white relative", children: [_jsx("div", { className: "absolute top-0 right-0 p-6 opacity-5", children: _jsx(MessageSquare, { className: "w-32 h-32" }) }), formState === 'success' ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center text-center py-10", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6", children: _jsx(CheckCircle, { className: "w-10 h-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Message Sent!" }), _jsx("p", { className: "text-gray-600 max-w-sm mx-auto mb-8", children: "Thank you for contacting us. We have received your message and will respond as soon as possible." }), _jsx(Button, { onClick: () => setFormState('idle'), className: "bg-gray-900 hover:bg-gray-800", children: "Send Another Message" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "relative z-10 space-y-6", children: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3 rounded-xl", children: errorMessage })), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: contactConfig?.contactForm?.title || "Send us a Message" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "firstName", className: "text-sm font-medium text-gray-700", children: "First Name" }), _jsx("input", { type: "text", id: "firstName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "John" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "lastName", className: "text-sm font-medium text-gray-700", children: "Last Name" }), _jsx("input", { type: "text", id: "lastName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "Doe" })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "email", className: "text-sm font-medium text-gray-700", children: "Email Address" }), _jsx("input", { type: "email", id: "email", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "john@example.com" })] }), (contactConfig?.contactForm?.showPhone !== false) && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "phone", className: "text-sm font-medium text-gray-700", children: "Phone (Optional)" }), _jsx("input", { type: "tel", id: "phone", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "+1 (555) 000-0000" })] }))] }), (contactConfig?.contactForm?.showSubject !== false) && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsx("select", { id: "subject", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", children: contactConfig?.contactForm?.subjects?.length > 0 ? (contactConfig.contactForm.subjects.map((s, i) => (_jsx("option", { value: s.value, children: s.label }, i)))) : (_jsxs(_Fragment, { children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "reservations", children: "Table Reservation" }), _jsx("option", { value: "catering", children: "Gourmet Catering" }), _jsx("option", { value: "feedback", children: "Experience Feedback" }), _jsx("option", { value: "press", children: "Media & Press" })] })) })] })), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "message", className: "text-sm font-medium text-gray-700", children: "Message" }), _jsx("textarea", { id: "message", rows: 4, required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all resize-none", placeholder: "How can we help you today?" })] }), _jsx("div", { className: "pt-2", children: _jsx(Button, { type: "submit", disabled: formState === 'submitting', className: "w-full py-6 text-lg font-semibold rounded-xl", style: { backgroundColor: 'var(--store-primary)' }, children: formState === 'submitting' ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" }), "Sending..."] })) : (_jsxs("span", { className: "flex items-center gap-2", children: ["Send Message", _jsx(Send, { className: "w-4 h-4" })] })) }) })] }))] })] }) }), (contactConfig?.contactForm?.showMap !== false) && (_jsx("section", { "data-section": "contactForm", "data-payaza-section-key": "contactForm", "data-payaza-page": "contact", className: "container mx-auto px-4 mt-20 max-w-6xl", children: _jsxs("div", { className: "bg-gray-100 rounded-3xl overflow-hidden h-96 w-full relative grayscale hover:grayscale-0 transition-all duration-500", children: [_jsx("iframe", { src: contactConfig?.contactForm?.mapIframeUrl || "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus", width: "100%", height: "100%", style: { border: 0 }, allowFullScreen: true, loading: "lazy", title: "Store Location" }), _jsxs("div", { className: "absolute top-4 right-4 bg-white p-4 rounded-xl shadow-lg z-10 hidden md:block", children: [_jsx("p", { className: "font-bold text-gray-900", children: contactConfig?.contactForm?.mapTitle || storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: contactConfig?.contactForm?.mapAddress || storeConfig.contactInfo?.address?.street || '123 Commerce Blvd' })] })] }) }))] }));
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [_jsxs("section", { "data-section": "hero", className: "relative bg-gray-900 text-white py-20 overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0 opacity-20", children: [_jsx(Image, { src: contactConfig?.contactHeader?.backgroundImage || "https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop", alt: "Contact Background", fill: true, className: "w-full h-full object-cover" }), _jsx("div", { className: "absolute inset-0 bg-black/60" })] }), _jsxs("div", { className: "container mx-auto px-4 relative z-10 text-center", children: [_jsx("h1", { className: "text-4xl md:text-6xl font-bold mb-4 tracking-tight", children: contactConfig?.contactHeader?.title || "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: contactConfig?.contactHeader?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] }), _jsx("div", { "data-section": "form", className: "container mx-auto px-4 -mt-10 relative z-20 max-w-6xl", children: _jsxs("div", { className: "bg-white rounded-3xl shadow-xl overflow-hidden border border-gray-100 flex flex-col lg:flex-row", children: [_jsxs("div", { className: "lg:w-2/5 p-8 md:p-12 text-white relative overflow-hidden", style: { backgroundColor: 'var(--store-primary)' }, children: [_jsx("div", { className: "absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-white opacity-10 rounded-full blur-2xl" }), _jsx("div", { className: "absolute bottom-0 left-0 -mb-10 -ml-10 w-40 h-40 bg-black opacity-10 rounded-full blur-2xl" }), _jsx("h2", { className: "text-2xl font-bold mb-8 relative z-10", children: contactConfig?.contactForm?.infoTitle || "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10", children: contactConfig?.contactForm?.infoDescription || "Fill out the form and our team will get back to you within 24 hours." }), _jsxs("div", { className: "space-y-8 relative z-10", children: [_jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Phone, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Call Us" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.phone || '+1 (555) 123-4567' })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Mail, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Email Us" }), _jsx("p", { className: "text-white/80", children: storeConfig.contactInfo?.email || `hello@${storeConfig.slug}.com` })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(MapPin, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Visit Us" }), _jsxs("p", { className: "text-white/80", children: [storeConfig.contactInfo?.address?.street || '123 Commerce Blvd', ",", _jsx("br", {}), storeConfig.contactInfo?.address?.city || 'Business City', ", ", storeConfig.contactInfo?.address?.state || 'ST', " ", storeConfig.contactInfo?.address?.zipCode || '12345'] })] })] }), _jsxs("div", { className: "flex items-start gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0", children: _jsx(Clock, { className: "w-5 h-5 text-white" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-semibold text-white mb-1", children: "Opening Hours" }), _jsx("p", { className: "text-white/80", children: storeConfig.locations?.[0]?.openingHours || 'Mon - Fri: 9am - 6pm' }), !storeConfig.locations?.[0]?.openingHours && _jsx("p", { className: "text-white/80", children: "Sat: 10am - 4pm" })] })] })] }), _jsx("div", { className: "mt-12 relative z-10", children: _jsxs("div", { className: "flex gap-4", children: [storeConfig.branding.socialMedia?.instagram && (_jsx("a", { href: storeConfig.branding.socialMedia.instagram, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/instagram.svg", alt: "Instagram", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.twitter && (_jsx("a", { href: storeConfig.branding.socialMedia.twitter, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/twitter.svg", alt: "Twitter", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.facebook && (_jsx("a", { href: storeConfig.branding.socialMedia.facebook, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/facebook.svg", alt: "Facebook", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) })), storeConfig.branding.socialMedia?.youtube && (_jsx("a", { href: storeConfig.branding.socialMedia.youtube, target: "_blank", rel: "noopener noreferrer", className: "w-10 h-10 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors", children: _jsx(Image, { src: "https://storefront-assets.s3.amazonaws.com/icons/youtube.svg", alt: "YouTube", width: 20, height: 20, className: "brightness-0 invert", unoptimized: true }) }))] }) })] }), _jsxs("div", { className: "lg:w-3/5 p-8 md:p-12 bg-white relative", children: [_jsx("div", { className: "absolute top-0 right-0 p-6 opacity-5", children: _jsx(MessageSquare, { className: "w-32 h-32" }) }), formState === 'success' ? (_jsxs("div", { className: "h-full flex flex-col items-center justify-center text-center py-10", children: [_jsx("div", { className: "w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mb-6", children: _jsx(CheckCircle, { className: "w-10 h-10 text-green-600" }) }), _jsx("h3", { className: "text-2xl font-bold text-gray-900 mb-2", children: "Message Sent!" }), _jsx("p", { className: "text-gray-600 max-w-sm mx-auto mb-8", children: "Thank you for contacting us. We have received your message and will respond as soon as possible." }), _jsx(Button, { onClick: () => setFormState('idle'), className: "bg-gray-900 hover:bg-gray-800", children: "Send Another Message" })] })) : (_jsxs("form", { onSubmit: handleSubmit, className: "relative z-10 space-y-6", children: [errorMessage && (_jsx("p", { className: "text-sm text-red-600 bg-red-50 p-3 rounded-xl", children: errorMessage })), _jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: contactConfig?.contactForm?.title || "Send us a Message" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "firstName", className: "text-sm font-medium text-gray-700", children: "First Name" }), _jsx("input", { type: "text", id: "firstName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "John" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "lastName", className: "text-sm font-medium text-gray-700", children: "Last Name" }), _jsx("input", { type: "text", id: "lastName", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "Doe" })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "email", className: "text-sm font-medium text-gray-700", children: "Email Address" }), _jsx("input", { type: "email", id: "email", required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "john@example.com" })] }), (contactConfig?.contactForm?.showPhone !== false) && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "phone", className: "text-sm font-medium text-gray-700", children: "Phone (Optional)" }), _jsx("input", { type: "tel", id: "phone", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", placeholder: "+1 (555) 000-0000" })] }))] }), (contactConfig?.contactForm?.showSubject !== false) && (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsx("select", { id: "subject", className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all", children: contactConfig?.contactForm?.subjects?.length > 0 ? (contactConfig.contactForm.subjects.map((s, i) => (_jsx("option", { value: s.value, children: s.label }, i)))) : (_jsxs(_Fragment, { children: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "reservations", children: "Table Reservation" }), _jsx("option", { value: "catering", children: "Gourmet Catering" }), _jsx("option", { value: "feedback", children: "Experience Feedback" }), _jsx("option", { value: "press", children: "Media & Press" })] })) })] })), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "message", className: "text-sm font-medium text-gray-700", children: "Message" }), _jsx("textarea", { id: "message", rows: 4, required: true, className: "w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:border-gray-900 focus:ring-0 outline-none transition-all resize-none", placeholder: "How can we help you today?" })] }), _jsx("div", { className: "pt-2", children: _jsx(Button, { type: "submit", disabled: formState === 'submitting', className: "w-full py-6 text-lg font-semibold rounded-xl", style: { backgroundColor: 'var(--store-primary)' }, children: formState === 'submitting' ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" }), "Sending..."] })) : (_jsxs("span", { className: "flex items-center gap-2", children: ["Send Message", _jsx(Send, { className: "w-4 h-4" })] })) }) })] }))] })] }) }), (contactConfig?.contactForm?.showMap !== false) && (_jsx("section", { "data-section": "map", className: "container mx-auto px-4 mt-20 max-w-6xl", children: _jsxs("div", { className: "bg-gray-100 rounded-3xl overflow-hidden h-96 w-full relative grayscale hover:grayscale-0 transition-all duration-500", children: [_jsx("iframe", { src: contactConfig?.contactForm?.mapIframeUrl || "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3024.2219901290355!2d-74.00369368400567!3d40.71312937933185!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a23e28c1191%3A0x49f75d3281df052a!2s150%20Park%20Row%2C%20New%20York%2C%20NY%2010007!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus", width: "100%", height: "100%", style: { border: 0 }, allowFullScreen: true, loading: "lazy", title: "Store Location" }), _jsxs("div", { className: "absolute top-4 right-4 bg-white p-4 rounded-xl shadow-lg z-10 hidden md:block", children: [_jsx("p", { className: "font-bold text-gray-900", children: contactConfig?.contactForm?.mapTitle || storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: contactConfig?.contactForm?.mapAddress || storeConfig.contactInfo?.address?.street || '123 Commerce Blvd' })] })] }) }))] }));
 }

package/dist/layouts/food-modern/pages/MenuPage.d.ts

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

package/dist/layouts/food-modern/pages/MenuPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/MenuPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgBhD,UAAU,aAAa;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,aAAa,2CAsT7F"}
+{"version":3,"file":"MenuPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/MenuPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWhD,UAAU,aAAa;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,QAAQ,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,aAAa,2CA4UnF"}

package/dist/layouts/food-modern/pages/MenuPage.js

@@ -1,35 +1,90 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardContent } from '../../../components/ui/card.js';
-import { Button } from '../../../components/ui/button.js';
+import { Card, CardContent } from '../../../components/ui/card';
+import { Button } from '../../../components/ui/button';
 import { ShoppingCart, Search, Star, Flame, Leaf, Wheat, Info, ChevronRight, ChevronLeft } from 'lucide-react';
-import { useState, useRef, useEffect, useMemo } from 'react';
-import Link from 'next/link';
-import { cn, formatCurrency } from '../../../lib/utils/index.js';
-import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
-import { RichTextExcerpt } from '../../../components/rich-text/RichTextExcerpt.js';
-import { richFieldPlainTextForDisplay } from '../../../lib/rich-html.js';
-import { useStore } from '../../../lib/store-context.js';
-import { useToast } from '../../../components/ui/toast.js';
-import { isEditorPreviewMode, resolveMenuItemsForDisplay, resolveStoreCategoriesForDisplay } from '../../../lib/utils/index.js';
-import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
-import { payazaInlineBindingProps } from '../../../preview/canvas/field-key.js';
-export function FoodModernMenuPage({ storeConfig: initialConfig, categorySlug }) {
-    const { store, addToCart } = useStore();
+import { useState, useRef, useEffect } from 'react';
+import { cn, formatCurrency } from '../../../lib/utils';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback';
+import { useStore } from '../../../lib/store-context';
+import { productService } from '../../../lib/services/product.service';
+import { transformProductToStoreProduct } from '../../../lib/store-config-utils';
+export function MenuPage({ storeConfig: initialConfig, categorySlug }) {
+    const { store } = useStore();
     const storeConfig = store || initialConfig;
-    const { addToast } = useToast();
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const menuConfig = storeConfig.layoutConfig?.pages?.menu;
-    const menuHeader = menuConfig?.menuHeader;
-    const { products: loadedProducts, categories: loadedCategories, menuItems: loadedMenuItems } = useCatalogLoader(storeConfig, { fetchServices: false });
-    const categories = resolveStoreCategoriesForDisplay(loadedCategories, isPreview);
-    const menuItems = useMemo(() => resolveMenuItemsForDisplay(loadedMenuItems, loadedProducts, isPreview), [loadedMenuItems, loadedProducts, isPreview]);
+    const categories = storeConfig.categories || [];
+    const [menuItems, setMenuItems] = useState(storeConfig.menuItems || []);
     const [selectedCategory, setSelectedCategory] = useState(categorySlug || '');
     const [searchQuery, setSearchQuery] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [totalItems, setTotalItems] = useState(storeConfig.menuItems?.length || 0);
+    const [isLoadingItems, setIsLoadingItems] = useState(false);
     const scrollContainerRef = useRef(null);
     const [showLeftGradient, setShowLeftGradient] = useState(false);
     const [showRightGradient, setShowRightGradient] = useState(true);
     const primaryColor = storeConfig.branding.primaryColor;
+    const toMenuItems = (products) => products.map((apiProduct) => {
+        const product = transformProductToStoreProduct(apiProduct);
+        return {
+            id: product.id,
+            name: product.name,
+            description: product.description || '',
+            price: product.price,
+            image: product.images[0],
+            categoryId: product.categoryId,
+            inStock: product.inStock,
+            dietaryInfo: [],
+        };
+    });
+    useEffect(() => {
+        const categoryId = categories.find((category) => category.slug === selectedCategory)?.id;
+        const timer = window.setTimeout(async () => {
+            setIsLoadingItems(true);
+            try {
+                const response = await productService.getProducts({
+                    storeId: storeConfig.id,
+                    categoryId,
+                    search: searchQuery || undefined,
+                    page: 1,
+                    limit: 12,
+                });
+                setMenuItems(toMenuItems(response.data));
+                setCurrentPage(1);
+                setTotalItems(response.meta.total);
+            }
+            catch (error) {
+                console.error('Failed to fetch menu items:', error);
+            }
+            finally {
+                setIsLoadingItems(false);
+            }
+        }, searchQuery ? 250 : 0);
+        return () => window.clearTimeout(timer);
+    }, [categories, searchQuery, selectedCategory, storeConfig.id]);
+    const loadMore = async () => {
+        if (isLoadingItems || currentPage * 12 >= totalItems)
+            return;
+        setIsLoadingItems(true);
+        try {
+            const categoryId = categories.find((category) => category.slug === selectedCategory)?.id;
+            const response = await productService.getProducts({
+                storeId: storeConfig.id,
+                categoryId,
+                search: searchQuery || undefined,
+                page: currentPage + 1,
+                limit: 12,
+            });
+            setMenuItems((items) => [...items, ...toMenuItems(response.data)]);
+            setCurrentPage((page) => page + 1);
+            setTotalItems(response.meta.total);
+        }
+        catch (error) {
+            console.error('Failed to load more menu items:', error);
+        }
+        finally {
+            setIsLoadingItems(false);
+        }
+    };
     // Icons mapping for dietary info
     const dietaryIcons = {
         'spicy': Flame,
@@ -48,7 +103,7 @@ export function FoodModernMenuPage({ storeConfig: initialConfig, categorySlug })
         // Search Filter
         if (searchQuery) {
             return item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                richFieldPlainTextForDisplay(item.description).toLowerCase().includes(searchQuery.toLowerCase());
+                item.description.toLowerCase().includes(searchQuery.toLowerCase());
         }
         return true;
     });
@@ -73,37 +128,17 @@ export function FoodModernMenuPage({ storeConfig: initialConfig, categorySlug })
             });
         }
     };
-    const getItemProductSlug = (itemId) => storeConfig.products?.find((p) => p.id === itemId)?.slug ?? itemId;
-    const handleAddToCart = (item, e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const fullProduct = storeConfig.products?.find((p) => p.id === item.id);
-        const product = fullProduct ?? {
-            ...item,
-            slug: item.id,
-            images: item.image ? [item.image] : [],
-            variants: [],
-            specifications: {},
-            rating: 0,
-            reviewCount: 0,
-            categoryId: item.categoryId || '',
-            inStock: true,
-        };
-        addToCart(product);
-        addToast(`${item.name} added to cart`, 'success');
-    };
-    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [menuHeader?.show !== false && (_jsxs("div", { "data-section": "menuHeader", "data-payaza-section-key": "menuHeader", "data-payaza-page": "menu", className: "relative bg-black text-white py-16 px-4 overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" }), _jsxs("div", { className: "relative z-10 container mx-auto text-center max-w-4xl", children: [_jsx("h1", { className: "text-4xl md:text-5xl font-black mb-4 tracking-tight", ...payazaInlineBindingProps(isPreview, 'menuHeader', ['title']), children: menuHeader?.title || 'Our Menu' }), _jsx("p", { className: "text-lg text-gray-200 max-w-2xl mx-auto", ...payazaInlineBindingProps(isPreview, 'menuHeader', ['subtitle']), children: menuHeader?.subtitle ||
-                                    'Discover our wide range of delicious dishes, crafted with passion and the finest ingredients.' })] })] })), _jsx("div", { "data-section": "menuGrid", "data-payaza-section-key": "menuGrid", "data-payaza-page": "menu", className: "sticky top-0 z-30 bg-gray-50/95 backdrop-blur-sm py-4 transition-all border-b border-gray-200 shadow-sm", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-4 items-center", children: [_jsxs("div", { className: "relative w-full md:max-w-xs flex-shrink-0", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" }), _jsx("input", { type: "text", placeholder: "Search menu...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full pl-9 pr-4 py-2 bg-white border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-black/5 transition-all shadow-sm" })] }), _jsxs("div", { className: "relative flex-1 w-full overflow-hidden group", children: [_jsx("button", { onClick: () => scrollCategories('left'), className: cn("absolute left-0 top-1/2 -translate-y-1/2 z-10 h-8 w-8 bg-white/90 shadow-md rounded-full flex items-center justify-center text-gray-600 transition-opacity hover:bg-white md:flex hidden", !showLeftGradient && "opacity-0 pointer-events-none"), children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => scrollCategories('right'), className: cn("absolute right-0 top-1/2 -translate-y-1/2 z-10 h-8 w-8 bg-white/90 shadow-md rounded-full flex items-center justify-center text-gray-600 transition-opacity hover:bg-white md:flex hidden", !showRightGradient && "opacity-0 pointer-events-none"), children: _jsx(ChevronRight, { className: "w-4 h-4" }) }), _jsx("div", { className: cn("absolute left-0 top-0 bottom-0 w-12 bg-gradient-to-r from-gray-50 to-transparent z-0 pointer-events-none transition-opacity", showLeftGradient ? "opacity-100" : "opacity-0") }), _jsx("div", { className: cn("absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-gray-50 to-transparent z-0 pointer-events-none transition-opacity", showRightGradient ? "opacity-100" : "opacity-0") }), _jsxs("div", { ref: scrollContainerRef, onScroll: checkScroll, className: "flex gap-2 overflow-x-auto scrollbar-hide py-1 px-1 scroll-smooth", children: [_jsx("button", { onClick: () => setSelectedCategory(''), className: cn("px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all border flex-shrink-0 select-none", !selectedCategory
+    return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsxs("div", { "data-section": "hero", className: "relative bg-black text-white py-16 px-4 overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 to-transparent" }), _jsxs("div", { className: "relative z-10 container mx-auto text-center max-w-4xl", children: [_jsx("h1", { className: "text-4xl md:text-5xl font-black mb-4 tracking-tight", children: "Our Menu" }), _jsx("p", { className: "text-lg text-gray-200 max-w-2xl mx-auto", children: "Discover our wide range of delicious dishes, crafted with passion and the finest ingredients." })] })] }), _jsx("div", { "data-section": "menu-list", className: "sticky top-0 z-30 bg-gray-50/95 backdrop-blur-sm py-4 transition-all border-b border-gray-200 shadow-sm", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-4 items-center", children: [_jsxs("div", { className: "relative w-full md:max-w-xs flex-shrink-0", children: [_jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" }), _jsx("input", { type: "text", placeholder: "Search menu...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full pl-9 pr-4 py-2 bg-white border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-black/5 transition-all shadow-sm" })] }), _jsxs("div", { className: "relative flex-1 w-full overflow-hidden group", children: [_jsx("button", { onClick: () => scrollCategories('left'), className: cn("absolute left-0 top-1/2 -translate-y-1/2 z-10 h-8 w-8 bg-white/90 shadow-md rounded-full flex items-center justify-center text-gray-600 transition-opacity hover:bg-white md:flex hidden", !showLeftGradient && "opacity-0 pointer-events-none"), children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => scrollCategories('right'), className: cn("absolute right-0 top-1/2 -translate-y-1/2 z-10 h-8 w-8 bg-white/90 shadow-md rounded-full flex items-center justify-center text-gray-600 transition-opacity hover:bg-white md:flex hidden", !showRightGradient && "opacity-0 pointer-events-none"), children: _jsx(ChevronRight, { className: "w-4 h-4" }) }), _jsx("div", { className: cn("absolute left-0 top-0 bottom-0 w-12 bg-gradient-to-r from-gray-50 to-transparent z-0 pointer-events-none transition-opacity", showLeftGradient ? "opacity-100" : "opacity-0") }), _jsx("div", { className: cn("absolute right-0 top-0 bottom-0 w-12 bg-gradient-to-l from-gray-50 to-transparent z-0 pointer-events-none transition-opacity", showRightGradient ? "opacity-100" : "opacity-0") }), _jsxs("div", { ref: scrollContainerRef, onScroll: checkScroll, className: "flex gap-2 overflow-x-auto scrollbar-hide py-1 px-1 scroll-smooth", children: [_jsx("button", { onClick: () => setSelectedCategory(''), className: cn("px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all border flex-shrink-0 select-none", !selectedCategory
                                                     ? "text-white border-transparent shadow-md transform scale-105"
                                                     : "bg-white text-gray-600 border-gray-200 hover:bg-gray-100 hover:border-gray-300"), style: !selectedCategory ? { backgroundColor: primaryColor } : {}, children: "All Items" }), categories.map((category) => (_jsx("button", { onClick: () => setSelectedCategory(category.slug), className: cn("px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-all border flex-shrink-0 select-none", selectedCategory === category.slug
                                                     ? "text-white border-transparent shadow-md transform scale-105"
-                                                    : "bg-white text-gray-600 border-gray-200 hover:bg-gray-100 hover:border-gray-300"), style: selectedCategory === category.slug ? { backgroundColor: primaryColor } : {}, children: category.name }, category.id)))] })] })] }) }) }), _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-12", children: [selectedCategory && (_jsx("div", { className: "mb-8 animate-fade-in", children: _jsxs("h2", { className: "text-2xl font-bold text-gray-900 capitalize flex items-center gap-3", children: [categories.find(c => c.slug === selectedCategory)?.name || 'Category', _jsxs("span", { className: "text-sm font-normal text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full", children: [filteredItems.length, " items"] })] }) })), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: filteredItems.map((item, index) => (_jsxs(Card, { className: "group overflow-hidden hover:shadow-xl transition-all duration-300 border-gray-100 flex flex-col h-full bg-white rounded-2xl", children: [_jsx(Link, { href: `/${storeConfig.slug}/products/${getItemProductSlug(item.id)}`, className: "block", children: _jsxs("div", { className: "relative aspect-[4/3] overflow-hidden", children: [_jsx(ImageWithFallback, { src: item.image, alt: item.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "4/3" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6", children: _jsx(Button, { className: "rounded-full font-bold shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300", style: { backgroundColor: primaryColor, color: 'white' }, onClick: (e) => handleAddToCart(item, e), children: "Quick Add" }) }), index % 3 === 0 && (_jsxs("div", { className: "absolute top-3 right-3 bg-white/90 backdrop-blur text-gray-900 text-[10px] font-bold px-2 py-1 rounded-full shadow-sm flex items-center gap-1", children: [_jsx(Star, { className: "w-3 h-3 fill-yellow-400 text-yellow-400" }), " Popular"] }))] }) }), _jsxs(CardContent, { className: "p-6 flex-1 flex flex-col", children: [_jsx(Link, { href: `/${storeConfig.slug}/products/${getItemProductSlug(item.id)}`, className: "group/title", children: _jsxs("div", { className: "flex justify-between items-start mb-2", children: [_jsx("h3", { className: "font-bold text-lg text-gray-900 leading-tight group-hover/title:underline", children: item.name }), _jsx("span", { className: "font-black text-lg text-gray-900 whitespace-nowrap ml-2", children: formatCurrency(item.price, item.currency || storeConfig.settings?.currency || 'USD') })] }) }), _jsx(RichTextExcerpt, { value: item.description, as: "p", className: "text-gray-500 text-sm mb-4 line-clamp-2 leading-relaxed flex-1" }), item.dietaryInfo && item.dietaryInfo.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-6", children: item.dietaryInfo.map((info) => {
+                                                    : "bg-white text-gray-600 border-gray-200 hover:bg-gray-100 hover:border-gray-300"), style: selectedCategory === category.slug ? { backgroundColor: primaryColor } : {}, children: category.name }, category.id)))] })] })] }) }) }), _jsxs("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8 py-12", children: [selectedCategory && (_jsx("div", { className: "mb-8 animate-fade-in", children: _jsxs("h2", { className: "text-2xl font-bold text-gray-900 capitalize flex items-center gap-3", children: [categories.find(c => c.slug === selectedCategory)?.name || 'Category', _jsxs("span", { className: "text-sm font-normal text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full", children: [filteredItems.length, " items"] })] }) })), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8", children: filteredItems.map((item, index) => (_jsxs(Card, { className: "group overflow-hidden hover:shadow-xl transition-all duration-300 border-gray-100 flex flex-col h-full bg-white rounded-2xl", children: [_jsxs("div", { className: "relative aspect-[4/3] overflow-hidden", children: [_jsx(ImageWithFallback, { src: item.image, alt: item.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "4/3" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end justify-center pb-6", children: _jsx(Button, { className: "rounded-full font-bold shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300", style: { backgroundColor: primaryColor, color: 'white' }, children: "Quick Add" }) }), index % 3 === 0 && (_jsxs("div", { className: "absolute top-3 right-3 bg-white/90 backdrop-blur text-gray-900 text-[10px] font-bold px-2 py-1 rounded-full shadow-sm flex items-center gap-1", children: [_jsx(Star, { className: "w-3 h-3 fill-yellow-400 text-yellow-400" }), " Popular"] }))] }), _jsxs(CardContent, { className: "p-6 flex-1 flex flex-col", children: [_jsxs("div", { className: "flex justify-between items-start mb-2", children: [_jsx("h3", { className: "font-bold text-lg text-gray-900 leading-tight", children: item.name }), _jsx("span", { className: "font-black text-lg text-gray-900 whitespace-nowrap ml-2", children: formatCurrency(item.price, item.currency || storeConfig.settings?.currency || 'USD') })] }), _jsx("p", { className: "text-gray-500 text-sm mb-4 line-clamp-2 leading-relaxed flex-1", children: item.description }), item.dietaryInfo && item.dietaryInfo.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mb-6", children: item.dietaryInfo.map((info) => {
                                                 const Icon = dietaryIcons[info.toLowerCase()] || Info;
                                                 return (_jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] uppercase font-bold px-2 py-1 rounded bg-gray-50 text-gray-500 border border-gray-100", children: [_jsx(Icon, { className: "w-3 h-3" }), info] }, info));
                                             }) })), _jsxs(Button, { className: "w-full rounded-xl font-bold h-11 shadow-sm hover:shadow-md transition-all active:scale-[0.98]", style: {
                                                 backgroundColor: 'black',
                                                 color: 'white',
-                                            }, onClick: (e) => handleAddToCart(item, e), children: [_jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), "Add to Cart"] })] })] }, item.id))) }), filteredItems.length === 0 && (_jsxs("div", { className: "text-center py-20 bg-white rounded-3xl border border-dashed border-gray-200", children: [_jsx("div", { className: "w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4", children: _jsx(Search, { className: "w-8 h-8 text-gray-300" }) }), _jsx("h3", { className: "text-xl font-bold text-gray-900 mb-2", children: "No items found" }), _jsx("p", { className: "text-gray-500", children: "Try adjusting your search or category filter." }), _jsx(Button, { variant: "outline", className: "mt-6", onClick: () => {
+                                            }, children: [_jsx(ShoppingCart, { className: "h-4 w-4 mr-2" }), "Add to Cart"] })] })] }, item.id))) }), currentPage * 12 < totalItems && (_jsx("div", { className: "mt-10 flex justify-center", children: _jsx(Button, { onClick: loadMore, disabled: isLoadingItems, children: isLoadingItems ? 'Loading...' : 'Load more' }) })), filteredItems.length === 0 && (_jsxs("div", { className: "text-center py-20 bg-white rounded-3xl border border-dashed border-gray-200", children: [_jsx("div", { className: "w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-4", children: _jsx(Search, { className: "w-8 h-8 text-gray-300" }) }), _jsx("h3", { className: "text-xl font-bold text-gray-900 mb-2", children: "No items found" }), _jsx("p", { className: "text-gray-500", children: "Try adjusting your search or category filter." }), _jsx(Button, { variant: "outline", className: "mt-6", onClick: () => {
                                     setSearchQuery('');
                                     setSelectedCategory('');
                                 }, children: "Clear Filters" })] }))] })] }));

package/dist/layouts/food-modern/pages/ProductDetailPage.d.ts

@@ -3,6 +3,6 @@ interface ProductDetailPageProps {
     storeConfig: StoreConfig;
     productSlug: string;
 }
-export declare function FoodModernProductDetailPage({ storeConfig, productSlug }: ProductDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductDetailPage({ storeConfig, productSlug }: ProductDetailPageProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ProductDetailPage.d.ts.map

package/dist/layouts/food-modern/pages/ProductDetailPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/ProductDetailPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8C,MAAM,mBAAmB,CAAC;AAoD5F,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB;AAyHD,wBAAgB,2BAA2B,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CAq5B/F"}
+{"version":3,"file":"ProductDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/food-modern/pages/ProductDetailPage.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAA8C,MAAM,mBAAmB,CAAC;AA4B5F,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB;AAsHD,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CAuiCrF"}