storefront-layouts 1.0.3 → 1.0.4

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

@@ -1,22 +1,17 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } 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 { isEditorPreviewMode } from '../../../lib/utils/editor-preview.js';
-import { encodePayazaFieldKey, payazaInlineBindingProps } from '../../../preview/canvas/field-key.js';
-export function ElectronicsContactPage({ storeConfig: initialConfig }) {
+import { submitContact } from '../../../lib/services/contact.service';
+export function ContactPage({ storeConfig: initialConfig }) {
     const { store } = useStore();
     const storeConfig = store || initialConfig;
-    const isPreview = isEditorPreviewMode(storeConfig);
-    const contactConfig = storeConfig.layoutConfig?.pages?.contact;
-    const heroConfig = contactConfig?.hero;
-    const heroImage = typeof heroConfig?.backgroundImage === 'string' && heroConfig.backgroundImage.trim().length > 0
-        ? heroConfig.backgroundImage.trim()
-        : 'https://images.unsplash.com/photo-1596524430615-b46475ddff6e?q=80&w=2070&auto=format&fit=crop';
+    // We use CSS variables for theming to inherit from parent layout
+    // const primaryColor = storeConfig.branding.primaryColor;
+    // const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
     const [formState, setFormState] = useState('idle');
     const [errorMessage, setErrorMessage] = useState(null);
     const handleSubmit = async (e) => {
@@ -53,5 +48,5 @@ export function ElectronicsContactPage({ storeConfig: initialConfig }) {
             setErrorMessage('Failed to send message. Please try again.');
         }
     };
-    return (_jsxs("div", { className: "min-h-screen bg-white pb-20", children: [heroConfig?.show !== false && (_jsxs("section", { "data-section": "hero", "data-payaza-section-key": "hero", "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('hero', ['backgroundImage']) : undefined, children: [_jsx(Image, { src: heroImage, 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, 'hero', ['title']), children: heroConfig?.title || 'Get in Touch' }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", ...payazaInlineBindingProps(isPreview, 'hero', ['subtitle']), children: heroConfig?.subtitle || "We'd love to hear from you. Here's how you can reach us." })] })] })), _jsx("div", { "data-section": "form", "data-payaza-section-key": "form", "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: "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10", children: "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: "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" })] }), _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" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsxs("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: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "support", children: "Technical Support" }), _jsx("option", { value: "orders", children: "Orders & Tracking" }), _jsx("option", { value: "warranty", children: "Warranty & Repairs" }), _jsx("option", { value: "wholesale", children: "B2B & Wholesale" })] })] }), _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" })] })) }) })] }))] })] }) }), _jsx("section", { "data-section": "map", "data-payaza-section-key": "map", "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: "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: storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: "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: "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: "Get in Touch" }), _jsx("p", { className: "text-xl text-gray-300 max-w-2xl mx-auto font-light", children: "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: "Contact Information" }), _jsx("p", { className: "mb-10 text-white/90 leading-relaxed relative z-10", children: "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: "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" })] }), _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" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "subject", className: "text-sm font-medium text-gray-700", children: "Subject" }), _jsxs("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: [_jsx("option", { value: "general", children: "General Inquiry" }), _jsx("option", { value: "support", children: "Technical Support" }), _jsx("option", { value: "orders", children: "Orders & Tracking" }), _jsx("option", { value: "warranty", children: "Warranty & Repairs" }), _jsx("option", { value: "wholesale", children: "B2B & Wholesale" })] })] }), _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" })] })) }) })] }))] })] }) }), _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: "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: storeConfig.name }), _jsx("p", { className: "text-sm text-gray-500", children: "123 Commerce Blvd" })] })] }) })] }));
 }

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Search, ChevronDown, ChevronUp, Mail, Phone, MessageCircle } from 'lucide-react';
 import { useState } from 'react';
-import { Button } from '../../../components/ui/button.js';
+import { Button } from '../../../components/ui/button';
 export function ElectronicsHelpCenterPage({ storeConfig }) {
     const primaryColor = storeConfig.branding.primaryColor;
     const faqConfig = storeConfig.layoutConfig?.pages?.faq;

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ShieldCheck, ArrowLeft } from 'lucide-react';
 import Link from 'next/link';
-import { formatDateSafe } from '../../../utils/date.js';
+import { formatDateSafe } from '../../../utils/date';
 export function ElectronicsPrivacyPolicyPage({ storeConfig }) {
     const primaryColor = storeConfig.branding.primaryColor;
     return (_jsxs("div", { className: "min-h-screen bg-gray-50 pb-20", children: [_jsx("div", { className: "bg-white border-b", children: _jsxs("div", { className: "container mx-auto px-4 py-8", children: [_jsxs(Link, { href: `/${storeConfig.slug}`, className: "inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 transition-colors mb-6", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), "Back to Home"] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-12 h-12 rounded-xl flex items-center justify-center", style: { backgroundColor: `${primaryColor}15` }, children: _jsx(ShieldCheck, { className: "w-6 h-6", style: { color: primaryColor } }) }), _jsx("h1", { className: "text-3xl font-bold text-gray-900", children: "Privacy Policy" })] })] }) }), _jsx("div", { className: "container mx-auto px-4 py-12 max-w-4xl", children: _jsxs("div", { className: "bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100 prose prose-lg max-w-none", children: [_jsxs("p", { className: "text-gray-500 lead", children: ["Last updated: ", formatDateSafe(new Date(), undefined, { month: 'long', day: 'numeric', year: 'numeric' })] }), _jsxs("p", { children: ["At ", storeConfig.name, ", accessible from ", typeof window !== 'undefined' ? window.location.origin : 'our website', ", one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by ", storeConfig.name, " and how we use it."] }), _jsx("p", { children: "If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us." }), _jsx("h3", { children: "Log Files" }), _jsxs("p", { children: [storeConfig.name, " follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information."] }), _jsx("h3", { children: "Cookies and Web Beacons" }), _jsxs("p", { children: ["Like any other website, ", storeConfig.name, " uses \"cookies\". These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information."] }), _jsx("h3", { children: "Privacy Policies" }), _jsxs("p", { children: ["You may consult this list to find the Privacy Policy for each of the advertising partners of ", storeConfig.name, "."] }), _jsxs("p", { children: ["Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on ", storeConfig.name, ", which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit."] }), _jsxs("p", { children: ["Note that ", storeConfig.name, " has no access to or control over these cookies that are used by third-party advertisers."] }), _jsx("h3", { children: "Third Party Privacy Policies" }), _jsxs("p", { children: [storeConfig.name, "'s Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options."] }), _jsx("p", { children: "You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites." }), _jsx("h3", { children: "Children's Information" }), _jsx("p", { children: "Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity." }), _jsxs("p", { children: [storeConfig.name, " does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records."] }), _jsx("h3", { children: "Online Privacy Policy Only" }), _jsxs("p", { children: ["This Privacy Policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in ", storeConfig.name, ". This policy is not applicable to any information collected offline or via channels other than this website."] }), _jsx("h3", { children: "Consent" }), _jsx("p", { children: "By using our website, you hereby consent to our Privacy Policy and agree to its Terms and Conditions." })] }) })] }));

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

@@ -3,6 +3,6 @@ interface ProductDetailPageProps {
     storeConfig: StoreConfig;
     productSlug: string;
 }
-export declare function ElectronicsProductDetailPage({ 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/electronics/pages/ProductDetailPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/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,4BAA4B,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CAw5BhG"}
+{"version":3,"file":"ProductDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/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,2CA0iCrF"}