storefront-layouts-staging 1.0.0-staging.0

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

@@ -0,0 +1,55 @@
+'use client';
+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';
+export function ElectronicsGridHelpCenterPage({ storeConfig }) {
+    const primaryColor = storeConfig.branding.primaryColor;
+    const faqConfig = storeConfig.layoutConfig?.pages?.faq;
+    // Convert flat list of FAQs from config to categorized structure if needed,
+    // or just use a default category if the structure doesn't match perfectly.
+    // For simplicity, if config items exist, we'll put them in a "General Questions" category.
+    const faqs = faqConfig?.items ? [
+        {
+            category: "Frequently Asked Questions",
+            questions: faqConfig.items.map(item => ({ q: item.question, a: item.answer }))
+        }
+    ] : [
+        {
+            category: "Ordering & Payment",
+            questions: [
+                { q: "What payment methods do you accept?", a: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and various local payment methods depending on your region." },
+                { q: "Can I modify my order after placing it?", a: "Orders can be modified within 30 minutes of placement. Please contact our support team immediately if you need to make changes." },
+                { q: "How do I use a promo code?", a: "You can enter your promo code at checkout in the designated box. The discount will be applied to your total immediately." }
+            ]
+        },
+        {
+            category: "Shipping & Delivery",
+            questions: [
+                { q: "Do you ship internationally?", a: "Yes, we ship to most countries worldwide. Shipping costs and delivery times vary by location." },
+                { q: "How long will my order take to arrive?", a: "Standard shipping typically takes 3-5 business days domestically. Express shipping options are available at checkout." },
+                { q: "How can I track my order?", a: "Once your order ships, you'll receive a confirmation email with a tracking number and link to track your package." }
+            ]
+        },
+        {
+            category: "Returns & Refunds",
+            questions: [
+                { q: "What is your return policy?", a: "We offer a 30-day return policy for unused items in original packaging. Some exclusions apply to final sale items." },
+                { q: "How long do refunds take to process?", a: "Refunds are typically processed within 5-7 business days after we receive your return." }
+            ]
+        }
+    ];
+    const [openIndex, setOpenIndex] = useState(null);
+    const toggleAccordion = (id) => {
+        setOpenIndex(openIndex === id ? null : id);
+    };
+    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-16 sm:py-24 text-center max-w-3xl", children: [_jsx("h1", { className: "text-4xl font-bold tracking-tight text-gray-900 mb-6", children: faqConfig?.title || "How can we help you?" }), _jsxs("div", { className: "relative max-w-xl mx-auto", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400" }), _jsx("input", { type: "text", placeholder: "Search for answers...", className: "w-full pl-12 pr-4 py-4 rounded-xl border border-gray-200 shadow-sm focus:outline-none focus:ring-2 focus:border-transparent text-lg", style: { '--tw-ring-color': primaryColor } })] })] }) }), _jsxs("div", { className: "container mx-auto px-4 py-12 max-w-4xl", children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-16", children: [
+                            { title: "Track Order", icon: MessageCircle, desc: "Check your order status" },
+                            { title: "Shipping Info", icon: Mail, desc: "Delivery times & costs" },
+                            { title: "Returns", icon: Phone, desc: "Start a return or exchange" }
+                        ].map((item, i) => (_jsxs("div", { className: "bg-white p-6 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow cursor-pointer", children: [_jsx(item.icon, { className: "h-8 w-8 mb-4", style: { color: primaryColor } }), _jsx("h3", { className: "font-semibold text-lg text-gray-900 mb-2", children: item.title }), _jsx("p", { className: "text-gray-500", children: item.desc })] }, i))) }), _jsx("div", { className: "space-y-12", children: faqs.map((section, sectionIdx) => (_jsxs("div", { children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-6", children: section.category }), _jsx("div", { className: "space-y-4", children: section.questions.map((faq, faqIdx) => {
+                                        const id = `${sectionIdx}-${faqIdx}`;
+                                        const isOpen = openIndex === id;
+                                        return (_jsxs("div", { className: "bg-white border border-gray-200 rounded-lg overflow-hidden transition-all duration-200", children: [_jsxs("button", { onClick: () => toggleAccordion(id), className: "w-full flex items-center justify-between p-5 text-left bg-white hover:bg-gray-50 transition-colors", children: [_jsx("span", { className: "font-medium text-gray-900", children: faq.q }), isOpen ? (_jsx(ChevronUp, { className: "h-5 w-5 text-gray-500" })) : (_jsx(ChevronDown, { className: "h-5 w-5 text-gray-500" }))] }), _jsx("div", { className: `overflow-hidden transition-all duration-300 ease-in-out ${isOpen ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'}`, children: _jsx("div", { className: "p-5 pt-0 text-gray-600 border-t border-gray-100 bg-gray-50/50", children: faq.a }) })] }, faqIdx));
+                                    }) })] }, sectionIdx))) }), _jsxs("div", { className: "mt-20 bg-white rounded-2xl p-8 md:p-12 border border-gray-100 shadow-lg text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-gray-900 mb-4", children: "Still need help?" }), _jsx("p", { className: "text-gray-500 mb-8 max-w-lg mx-auto", children: "Our support team is available Monday through Friday, 9am to 6pm EST. We usually respond within 24 hours." }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [_jsx(Button, { className: "px-8 py-6 text-base", style: { backgroundColor: primaryColor }, children: "Contact Support" }), _jsx(Button, { variant: "outline", className: "px-8 py-6 text-base", children: "Email Us" })] })] })] })] }));
+}

package/dist/layouts/electronics-grid/pages/PrivacyPolicyPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface PrivacyPolicyPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ElectronicsGridPrivacyPolicyPage({ storeConfig }: PrivacyPolicyPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PrivacyPolicyPage.d.ts.map

package/dist/layouts/electronics-grid/pages/PrivacyPolicyPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrivacyPolicyPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/PrivacyPolicyPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAKhD,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,gCAAgC,CAAC,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CA2GvF"}

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

@@ -0,0 +1,9 @@
+'use client';
+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';
+export function ElectronicsGridPrivacyPolicyPage({ 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-grid/pages/ProductDetailPage.d.ts

@@ -0,0 +1,8 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface ProductDetailPageProps {
+    storeConfig: StoreConfig;
+    productSlug: string;
+}
+export declare function ElectronicsGridProductDetailPage({ storeConfig, productSlug }: ProductDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProductDetailPage.d.ts.map

package/dist/layouts/electronics-grid/pages/ProductDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductDetailPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/ProductDetailPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAA8C,MAAM,mBAAmB,CAAC;AA4C5F,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;CACrB;AAyHD,wBAAgB,gCAAgC,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,sBAAsB,2CAu3BpG"}

package/dist/layouts/electronics-grid/pages/ProductDetailPage.js

@@ -0,0 +1,430 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { shareProductLink } from '../../../lib/utils/product-share.js';
+import { Button } from '../../../components/ui/button.js';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
+import { Modal } from '../../../components/ui/modal.js';
+import { ShoppingCart, Heart, Star, ThumbsUp, User, Minus, Plus, Share2 } from 'lucide-react';
+import { useState, useMemo, useEffect } from 'react';
+import { useStore } from '../../../lib/store-context.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '../../../lib/auth-context.js';
+import { useAnalytics } from '../../../hooks/use-analytics.js';
+import { customerService } from '../../../lib/services/customer.service.js';
+import { GuestCheckoutModal } from '../../../components/ui/guest-checkout-modal.js';
+import { getGuestUserInfo, saveGuestUserInfo } from '../../../lib/guest-user.js';
+import { ProductCard } from '../../../components/ui/product-card.js';
+import Image from 'next/image';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { ButtonLoader } from '../../../components/ui/page-loader.js';
+import { extractImageUrls } from '../../../lib/store-config-utils.js';
+import { OutOfStockOverlay } from '../../../components/ui/out-of-stock-overlay.js';
+import { ProductStockBadge } from '../../../components/ui/product-stock-badge.js';
+import { LimitedTimeOfferBadge } from '../../../components/ui/limited-time-offer-badge.js';
+import { getProductStockInfo, getMaxPurchasableQuantity, formatStockLimitMessage } from '../../../lib/inventory-utils.js';
+import { cn, formatCurrency, isEditorPreviewMode, resolveProductBySlugForDisplay, resolveStoreProductsForDisplay, } from '../../../lib/utils/index.js';
+import { useShippingQuote } from '../../../hooks/use-shipping-quote.js';
+import { ProductDeliveryInfoSection } from '../../../components/shipping/ProductDeliveryInfoSection.js';
+import { isAutomatedShippingEnabled } from '../../../lib/shipping-settings.util.js';
+import { enrichShippingQuoteAddress } from '../../../lib/shipping-address.util.js';
+import { useProductVariationSelection } from '../../../hooks/use-product-variation-selection.js';
+import { ProductVariationSelectors } from '../../../components/product/ProductVariationSelectors.js';
+import { findMatchingVariation } from '../../../lib/product-variation-utils.js';
+import { guardCheckoutAvailable, isCheckoutDisabled } from '../../../lib/checkout-availability.js';
+import { formatDateSafe } from '../../../utils/date.js';
+// Helper function to format date
+const formatDate = (dateString) => {
+    return formatDateSafe(dateString, '—', { year: 'numeric', month: 'long', day: 'numeric' });
+};
+// Star Rating Component with half-star support
+function StarRating({ rating, size = 'md', className = '' }) {
+    const sizeClasses = {
+        sm: 'h-3.5 w-3.5',
+        md: 'h-4 w-4',
+        lg: 'h-6 w-6',
+    };
+    const starSize = sizeClasses[size];
+    return (_jsx("div", { className: `flex items-center gap-0.5 ${className}`, children: [...Array(5)].map((_, i) => {
+            const starValue = i + 1;
+            const fullStars = Math.floor(rating);
+            const hasHalfStar = rating % 1 >= 0.5 && fullStars === i;
+            const isFull = starValue <= fullStars;
+            const isHalf = hasHalfStar;
+            return (_jsxs("div", { className: `relative inline-block ${sizeClasses[size]}`, children: [_jsx(Star, { className: `w-full h-full absolute inset-0 text-gray-200 fill-gray-200` }), isHalf && (_jsx("div", { className: "absolute inset-0", style: { clipPath: 'inset(0 50% 0 0)' }, children: _jsx(Star, { className: `w-full h-full text-gray-900 fill-gray-900` }) })), isFull && (_jsx(Star, { className: `w-full h-full absolute inset-0 text-gray-900 fill-gray-900` }))] }, i));
+        }) }));
+}
+import { ProductDescription } from '../../../components/rich-text/ProductDescription.js';
+function ReviewCard({ review }) {
+    return (_jsxs("div", { className: "border-b border-gray-100 pb-8 last:border-b-0 last:pb-0", children: [_jsx("div", { className: "flex items-start justify-between mb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "w-12 h-12 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center flex-shrink-0 ring-2 ring-white shadow-sm overflow-hidden", children: [review.userAvatar ? (_jsx(Image, { src: review.userAvatar, alt: review.userName, fill: true, className: "w-full h-full object-cover", unoptimized: true })) : null, _jsx(User, { className: "h-6 w-6 text-gray-600", style: { display: review.userAvatar ? 'none' : 'flex' } })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("span", { className: "font-semibold text-gray-900", children: review.userName }), review.verified && (_jsx("span", { className: "text-xs bg-blue-50 text-blue-700 px-2.5 py-1 rounded-full font-medium border border-blue-100", children: "Verified Purchase" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StarRating, { rating: review.rating, size: "sm" }), _jsx("span", { className: "text-xs text-gray-500", children: formatDate(review.date) })] })] })] }) }), review.title && (_jsx("h4", { className: "font-semibold text-gray-900 mb-3 text-lg", children: review.title })), _jsx("p", { className: "text-gray-700 leading-relaxed mb-4", children: review.comment }), review.images && review.images.length > 0 && (_jsx("div", { className: "flex gap-2 mb-4", children: review.images.map((img, idx) => (_jsx("div", { className: "relative w-20 h-20 rounded-lg overflow-hidden border border-gray-200", children: _jsx(Image, { src: img, alt: `${review.userName}'s review image ${idx + 1}`, fill: true, className: "object-cover", unoptimized: true }) }, idx))) })), review.helpful !== undefined && (_jsx("div", { className: "flex items-center gap-4", children: _jsxs("button", { className: "flex items-center gap-1.5 text-xs text-gray-600 hover:text-gray-900 transition-colors font-medium", children: [_jsx(ThumbsUp, { className: "h-4 w-4" }), _jsxs("span", { children: ["Helpful (", review.helpful, ")"] })] }) }))] }));
+}
+export function ElectronicsGridProductDetailPage({ storeConfig, productSlug }) {
+    const { addToCart, isCartLoading, toggleWishlist, isInWishlist, isWishlistLoading, setBuyNowItem } = useStore();
+    const isPreview = isEditorPreviewMode(storeConfig);
+    const products = resolveStoreProductsForDisplay(storeConfig.products, isPreview);
+    const product = resolveProductBySlugForDisplay(storeConfig.products, productSlug, isPreview);
+    const { optionGroups, selectedAttributes, setAttribute, selectedColor, selectedSize, matchingVariation, hasVariations, } = useProductVariationSelection(product?.variants);
+    const { addToast } = useToast();
+    const router = useRouter();
+    const { isAuthenticated } = useAuth();
+    const { trackEvent } = useAnalytics();
+    // Related products logic
+    const relatedProducts = useMemo(() => {
+        if (!product)
+            return [];
+        return products
+            .filter(p => p.categoryId === product.categoryId && p.id !== product.id)
+            .slice(0, 4);
+    }, [product, products]);
+    const handleShare = async () => {
+        if (!product)
+            return;
+        try {
+            const result = await shareProductLink({
+                storeSlug: storeConfig.slug,
+                productSlug: product.slug,
+                productName: product.name,
+            });
+            addToast(result === 'shared' ? 'Product shared!' : 'Link copied to clipboard!', 'success');
+        }
+        catch (error) {
+            if (error instanceof Error && error.name === 'AbortError')
+                return;
+            addToast('Failed to copy link', 'error');
+        }
+    };
+    const handleQuickView = (p) => {
+        // Navigate to product page for now
+        router.push(`/${storeConfig.slug}/products/${p.slug}`);
+    };
+    const handleWishlistClick = async () => {
+        if (!product)
+            return;
+        if (isWishlistLoading) {
+            return; // Prevent multiple clicks
+        }
+        try {
+            const wasInWishlist = isInWishlist(product.id);
+            await toggleWishlist(product.id);
+            addToast(wasInWishlist
+                ? `${product.name} removed from wishlist`
+                : `${product.name} added to wishlist`, 'success');
+        }
+        catch (error) {
+            console.error('Failed to toggle wishlist:', error);
+            addToast('Failed to update wishlist', 'error');
+        }
+    };
+    // Initialize state with defaults
+    const [selectedImage, setSelectedImage] = useState(0);
+    // Ensure selectedImage is within bounds when images change
+    useEffect(() => {
+        if (product && product.images && product.images.length > 0 && selectedImage >= product.images.length) {
+            // Use setTimeout to avoid synchronous setState in effect
+            const timer = setTimeout(() => setSelectedImage(0), 0);
+            return () => clearTimeout(timer);
+        }
+    }, [product, selectedImage]);
+    const [quantity, setQuantity] = useState(1);
+    const [showAllReviews, setShowAllReviews] = useState(false);
+    const [isReviewModalOpen, setIsReviewModalOpen] = useState(false);
+    const [newReview, setNewReview] = useState({ rating: 5, title: '', comment: '' });
+    const [showGuestModal, setShowGuestModal] = useState(false);
+    const [isBuyNowLoading, setIsBuyNowLoading] = useState(false);
+    // Shipping calculation (ShipBubble-ready address fields)
+    const currency = product?.currency || storeConfig.settings?.currency || 'USD';
+    const { address: shippingAddress, updateAddress: updateShippingAddress, methods: shippingMethods, isCalculating: isCalculatingShipping, error: shippingError, freeShippingEligible, freeShippingThreshold, } = useShippingQuote({
+        storeId: storeConfig.id,
+        productId: product?.id || '',
+        productPrice: product?.price || 0,
+        currency,
+        quantity,
+        enabled: Boolean(product) && isAutomatedShippingEnabled(storeConfig),
+    });
+    const [savedAddresses, setSavedAddresses] = useState([]);
+    const handleSubmitReview = (e) => {
+        e.preventDefault();
+        // In a real app, this would submit to API
+        addToast('Review submitted successfully!', 'success');
+        setIsReviewModalOpen(false);
+        setNewReview({ rating: 5, title: '', comment: '' });
+    };
+    if (!product) {
+        return (_jsx("div", { className: "min-h-screen bg-white flex items-center justify-center p-8", children: _jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-2xl font-bold mb-2", children: "Product Not Found" }), _jsx("p", { className: "text-gray-600 mb-4", children: "The product you're looking for doesn't exist." })] }) }));
+    }
+    // Use SKU for display, fallback to generated SKU from slug if not available
+    const displaySKU = product.sku || product.slug?.toUpperCase().replace(/-/g, '').substring(0, 12).padEnd(8, 'X') || 'N/A';
+    // Build category breadcrumb path with all parent categories
+    const buildCategoryPath = (categoryId) => {
+        if (!categoryId)
+            return [];
+        const path = [];
+        let currentCategoryId = categoryId;
+        // Traverse up the parent chain
+        while (currentCategoryId) {
+            const category = storeConfig.categories.find(c => c.id === currentCategoryId);
+            if (!category)
+                break;
+            path.unshift(category); // Add to beginning to maintain root-to-leaf order
+            currentCategoryId = category.parentId || null;
+        }
+        return path;
+    };
+    // Get category path for breadcrumbs
+    const categoryPath = product.categoryId ? buildCategoryPath(product.categoryId) : [];
+    const directCategory = categoryPath.length > 0 ? categoryPath[categoryPath.length - 1] : null;
+    // Generate breadcrumbs with all parent categories
+    const breadcrumbItems = [
+        { label: storeConfig.name, href: `/${storeConfig.slug}` },
+        // Add all parent categories
+        ...categoryPath.map(cat => ({
+            label: cat.name,
+            href: `/${storeConfig.slug}/categories/${cat.slug || ''}`,
+        })),
+        // Add product name
+        { label: product.name, href: `/${storeConfig.slug}/products/${product.slug}` },
+    ];
+    // Extract product images - product.images should already be string[] from transformation,
+    // but handle edge cases where it might still be in object format
+    // Use the comprehensive extraction utility from store-config-utils for consistency
+    const productImages = (() => {
+        // Debug: Log the raw product.images to understand its format
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[ProductDetailPage] Raw product.images:', {
+                productId: product.id,
+                productName: product.name,
+                images: product.images,
+                imagesType: typeof product.images,
+                imagesIsArray: Array.isArray(product.images),
+                imagesLength: Array.isArray(product.images) ? product.images.length : 'N/A',
+                firstItem: Array.isArray(product.images) && product.images.length > 0 ? product.images[0] : 'N/A',
+                firstItemType: Array.isArray(product.images) && product.images.length > 0 ? typeof product.images[0] : 'N/A'
+            });
+        }
+        // If already an array of strings (normal case after transformation)
+        if (Array.isArray(product.images) && product.images.length > 0) {
+            const firstItem = product.images[0];
+            if (typeof firstItem === 'string') {
+                const filtered = product.images.filter((img) => typeof img === 'string' && img.trim().length > 0);
+                if (process.env.NODE_ENV === 'development') {
+                    console.log('[ProductDetailPage] Using string array directly:', { count: filtered.length, firstImage: filtered[0]?.substring(0, 100) });
+                }
+                return filtered;
+            }
+            // If array but not strings, extract using utility
+            if (process.env.NODE_ENV === 'development') {
+                console.log('[ProductDetailPage] Array but not strings, using extractImageUrls');
+            }
+        }
+        // Use the comprehensive extraction utility for any other format (objects, nested structures, etc.)
+        const extracted = extractImageUrls(product.images);
+        if (process.env.NODE_ENV === 'development') {
+            console.log('[ProductDetailPage] Extracted using utility:', { count: extracted.length, firstImage: extracted[0]?.substring(0, 100) });
+        }
+        return extracted;
+    })();
+    // For gallery, use actual images only (don't duplicate to fill 5 slots)
+    const displayImages = productImages.slice(0, 5);
+    const hasMoreImages = productImages.length > 5;
+    // Debug logging for images (can be removed in production)
+    if (process.env.NODE_ENV === 'development') {
+        if (productImages.length === 0) {
+            console.warn(`[ProductDetailPage] Product "${product.name}" (${product.id}) has no valid images:`, {
+                productId: product.id,
+                productName: product.name,
+                originalImages: product.images,
+                originalType: typeof product.images,
+                originalIsArray: Array.isArray(product.images),
+                validImagesCount: productImages.length
+            });
+        }
+        else {
+            console.log(`[ProductDetailPage] Product "${product.name}" (${product.id}) images:`, {
+                productId: product.id,
+                validImagesCount: productImages.length,
+                displayImagesCount: displayImages.length,
+                firstImage: productImages[0]?.substring(0, 100)
+            });
+        }
+    }
+    // Color swatch mapping
+    const colorSwatches = {
+        'White': '#FFFFFF',
+        'Black': '#000000',
+        'Gray': '#808080',
+        'Grey': '#808080',
+        'Blue': '#3B82F6',
+        'Red': '#EF4444',
+        'Green': '#10B981',
+        'Yellow': '#FBBF24',
+        'Brown': '#92400E',
+        'Navy': '#1E3A8A',
+        'Beige': '#F5F5DC',
+    };
+    // Get reviews
+    const reviews = product.reviews || [];
+    const displayedReviews = showAllReviews ? reviews : reviews.slice(0, 3);
+    const hasMoreReviews = reviews.length > 3;
+    // Out of stock check
+    const stockInfo = getProductStockInfo(product);
+    const isOutOfStock = !stockInfo.canPurchase;
+    const maxPurchasableQty = getMaxPurchasableQuantity(product);
+    // Calculate rating distribution
+    const ratingDistribution = [5, 4, 3, 2, 1].map(rating => {
+        const count = reviews.filter(r => r.rating === rating).length;
+        return {
+            rating,
+            count,
+            percentage: reviews.length > 0 ? (count / reviews.length) * 100 : 0,
+        };
+    });
+    const handleAddToCart = () => {
+        if (isOutOfStock) {
+            addToast(formatStockLimitMessage(product.name, stockInfo.availableStock ?? 0), 'error');
+            return;
+        }
+        if (hasVariations && !matchingVariation) {
+            addToast('Please select all product options', 'error');
+            return;
+        }
+        // Find the matching variation UUID based on selected attributes
+        // Note: StoreProduct uses 'variants' not 'variations'
+        let variationId = matchingVariation?.id;
+        if (!variationId && product.variants && product.variants.length > 0) {
+            const resolved = findMatchingVariation(product.variants, {
+                ...(selectedColor ? { color: selectedColor } : {}),
+                ...(selectedSize ? { size: selectedSize } : {}),
+                ...selectedAttributes,
+            });
+            variationId = resolved?.id;
+        }
+        // Fallback to composite string for backward compatibility if no variation found
+        const variantId = variationId || (selectedColor || selectedSize
+            ? [selectedColor, selectedSize].filter(Boolean).join(' / ')
+            : undefined);
+        const resolvedVariation = variationId ? product.variants?.find(v => v.id === variationId) : matchingVariation;
+        const variantName = resolvedVariation?.value || Object.values(resolvedVariation?.attributes || {}).filter(Boolean).join(' / ') || undefined;
+        const unitPrice = resolvedVariation?.price ?? product.price;
+        addToCart(product, quantity, { variantId, variantName, unitPrice });
+        addToast(`${product.name} added to cart`, 'success');
+    };
+    const handleBuyNow = async () => {
+        if (isOutOfStock) {
+            addToast(formatStockLimitMessage(product.name, stockInfo.availableStock ?? 0), 'error');
+            return;
+        }
+        if (hasVariations && !matchingVariation) {
+            addToast('Please select all product options', 'error');
+            return;
+        }
+        if (!guardCheckoutAvailable(storeConfig, addToast)) {
+            return;
+        }
+        if (isBuyNowLoading || isCartLoading) {
+            return; // Prevent multiple clicks
+        }
+        setIsBuyNowLoading(true);
+        try {
+            // Find the matching variation UUID based on selected attributes
+            // Note: StoreProduct uses 'variants' not 'variations'
+            let variationId = matchingVariation?.id;
+            let variantName;
+            if (!variationId && product.variants && product.variants.length > 0) {
+                const resolved = findMatchingVariation(product.variants, {
+                    ...(selectedColor ? { color: selectedColor } : {}),
+                    ...(selectedSize ? { size: selectedSize } : {}),
+                    ...selectedAttributes,
+                });
+                variationId = resolved?.id;
+                variantName = resolved?.value || Object.values(resolved?.attributes || {}).filter(Boolean).join(' / ');
+            }
+            else if (matchingVariation) {
+                variantName = matchingVariation.value || Object.values(matchingVariation.attributes || {}).filter(Boolean).join(' / ');
+            }
+            // Fallback to composite string for backward compatibility if no variation found
+            const variantId = variationId || (selectedColor || selectedSize
+                ? [selectedColor, selectedSize].filter(Boolean).join(' / ')
+                : undefined);
+            // Create buy now item (don't add to cart)
+            const buyNowItemId = variantId ? `${product.id}-${variantId}` : product.id;
+            const buyNowItem = {
+                id: buyNowItemId,
+                productId: product.id,
+                quantity,
+                variantId,
+                variantName: variantName || variantId,
+                price: (variationId ? product.variants?.find(v => v.id === variationId)?.price : matchingVariation?.price) ?? product.price,
+                product
+            };
+            // Set buy now item and navigate directly to checkout
+            setBuyNowItem(buyNowItem);
+            // Navigate to checkout page for direct checkout
+            router.push(`/${storeConfig.slug}/checkout`);
+        }
+        catch (error) {
+            console.error('Buy Now error:', error);
+            addToast('Failed to proceed to checkout. Please try again.', 'error');
+        }
+        finally {
+            setIsBuyNowLoading(false);
+        }
+    };
+    const handleGuestInfoSubmit = (userInfo) => {
+        // Save guest info to localStorage
+        saveGuestUserInfo(userInfo);
+        setShowGuestModal(false);
+        // Note: This is now only used for other flows, not buy now
+        // Buy now now redirects to checkout page
+    };
+    // Load saved addresses for authenticated users and auto-populate shipping address
+    useEffect(() => {
+        const loadAddresses = async () => {
+            if (isAuthenticated) {
+                try {
+                    const addresses = await customerService.getAddresses();
+                    setSavedAddresses(addresses);
+                    if (addresses.length > 0) {
+                        const defaultAddress = addresses.find((a) => a.isDefault) || addresses[0];
+                        if (defaultAddress) {
+                            updateShippingAddress(enrichShippingQuoteAddress({
+                                country: defaultAddress.country || '',
+                                city: defaultAddress.city || '',
+                                zipCode: defaultAddress.zipCode || '',
+                                street: defaultAddress.address1 || '',
+                                state: defaultAddress.state || '',
+                                phone: defaultAddress.phone || '',
+                            }));
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error('Failed to load addresses:', error);
+                }
+            }
+        };
+        loadAddresses();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isAuthenticated]);
+    // Track product view
+    useEffect(() => {
+        if (product && storeConfig?.id) {
+            trackEvent({
+                eventType: 'product_view',
+                metadata: {
+                    productId: product.id,
+                    productName: product.name,
+                    categoryId: product.categoryId,
+                    price: product.price,
+                },
+            });
+        }
+    }, [product?.id, storeConfig?.id, trackEvent]);
+    return (_jsxs("div", { className: "min-h-screen bg-white", children: [_jsxs("div", { "data-content-ready": true, className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8 lg:py-12 max-w-7xl", children: [_jsx("div", { className: "mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 mb-20", children: [_jsxs("div", { className: "relative lg:sticky lg:top-24 self-start z-0", children: [_jsxs("div", { className: "relative aspect-square bg-gray-50 rounded-xl overflow-hidden mb-4 border border-gray-100 shadow-sm group", children: [_jsx(ImageWithFallback, { "data-product-image": true, src: displayImages[selectedImage] || displayImages[0] || productImages[0], alt: product.name, className: cn("w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", isOutOfStock && "grayscale"), skeletonAspectRatio: "square" }), isOutOfStock && (_jsx(OutOfStockOverlay, { badgePosition: "center" }))] }), displayImages.length > 0 && (_jsxs("div", { className: "grid grid-cols-5 gap-2", children: [displayImages.map((image, index) => (_jsx("button", { onClick: () => setSelectedImage(Math.min(index, displayImages.length - 1)), className: `aspect-square rounded-lg overflow-hidden border-2 transition-all ${selectedImage === index
+                                                    ? 'border-gray-900 ring-2 ring-gray-900 ring-offset-2'
+                                                    : 'border-gray-200 hover:border-gray-300'}`, children: _jsx(ImageWithFallback, { src: image, alt: `${product.name} view ${index + 1}`, className: cn("w-full h-full object-cover", isOutOfStock && "grayscale"), skeletonAspectRatio: "square" }) }, index))), hasMoreImages && (_jsxs("div", { className: "aspect-square rounded-lg border-2 border-gray-200 bg-gray-50 flex items-center justify-center text-xs text-gray-500 font-medium", children: ["+", productImages.length - 5, " more"] }))] }))] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "text-sm font-semibold text-gray-700 uppercase tracking-wide", children: (() => {
+                                                    const brandMatch = product.name.match(/\b(Sony|Samsung|Apple|LG|Dell|HP|Microsoft|Logitech|Razer|Corsair|Asus|Acer|Lenovo)\b/i);
+                                                    return brandMatch ? brandMatch[1] : storeConfig.name;
+                                                })() }), _jsx("button", { onClick: handleShare, className: "text-gray-400 hover:text-gray-900 transition-colors p-2 rounded-full hover:bg-gray-100", title: "Share this product", children: _jsx(Share2, { className: "h-5 w-5" }) })] }), _jsx("h1", { "data-product-name": true, className: "text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-3 leading-tight tracking-tight", children: product.name }), _jsxs("p", { className: "text-sm text-gray-500 mb-6 font-mono", children: ["SKU: ", displaySKU] }), _jsxs("div", { className: "mb-4 flex items-center gap-2", children: [_jsx(ProductStockBadge, { product: product }), _jsx(LimitedTimeOfferBadge, { product: product })] }), _jsxs("div", { className: "mb-8", children: [_jsxs("div", { className: "flex items-baseline gap-4", children: [_jsx("span", { "data-product-price": true, className: "text-4xl lg:text-5xl font-bold text-gray-900", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice != null && product.compareAtPrice > product.price && (_jsx("span", { className: "text-2xl text-gray-500 line-through", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') }))] }), product.compareAtPrice != null && product.compareAtPrice > product.price && (_jsxs("span", { className: "inline-block mt-2 bg-red-100 text-red-700 text-xs font-bold px-2 py-1 rounded", children: ["SAVE ", Math.round(((product.compareAtPrice - product.price) / product.compareAtPrice) * 100), "%"] }))] }), _jsx(ProductVariationSelectors, { optionGroups: optionGroups, selectedAttributes: selectedAttributes, onSelectAttribute: setAttribute, storeSlug: storeConfig.slug, colorSwatches: colorSwatches }), _jsxs("div", { className: "flex flex-col gap-4 mb-8", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm font-semibold text-gray-900", children: "Quantity" }), _jsxs("div", { className: "flex items-center border border-gray-300 rounded-lg", children: [_jsx("button", { className: "p-3 text-gray-600 hover:bg-gray-100 rounded-l-lg disabled:opacity-50", onClick: () => setQuantity(Math.max(1, quantity - 1)), disabled: quantity <= 1, children: _jsx(Minus, { className: "h-4 w-4" }) }), _jsx("span", { className: "w-12 text-center font-semibold text-gray-900", children: quantity }), _jsx("button", { className: "p-3 text-gray-600 hover:bg-gray-100 rounded-r-lg", onClick: () => setQuantity(Math.min(maxPurchasableQty ?? quantity + 1, quantity + 1)), children: _jsx(Plus, { className: "h-4 w-4" }) })] })] }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-3 mt-2", children: [_jsx(Button, { "data-add-to-cart": true, size: "lg", onClick: handleAddToCart, disabled: isCartLoading || isOutOfStock, className: "w-full sm:flex-1 bg-white border-2 border-gray-900 text-gray-900 hover:bg-gray-50 rounded-full min-h-14 text-base font-bold shadow-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed", children: isCartLoading ? (_jsxs(_Fragment, { children: [_jsx(ButtonLoader, { className: "mr-2" }), "Adding..."] })) : (_jsxs(_Fragment, { children: [_jsx(ShoppingCart, { className: "h-5 w-5 mr-2" }), "Add to Cart"] })) }), _jsx(Button, { size: "xl", onClick: handleBuyNow, disabled: isOutOfStock || isBuyNowLoading || isCartLoading || isCheckoutDisabled(storeConfig), className: "w-full sm:flex-1 bg-gray-900 hover:bg-gray-800 text-white rounded-full min-h-14 text-base font-bold shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed", children: isBuyNowLoading || isCartLoading ? (_jsxs(_Fragment, { children: [_jsx(ButtonLoader, { className: "mr-2" }), "Adding..."] })) : ('Buy Now') }), storeConfig.features.wishlist && (_jsx(Button, { variant: "outline", size: "xl", onClick: handleWishlistClick, disabled: isWishlistLoading || !product, className: cn("h-14 w-14 rounded-full border-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed", product && isInWishlist(product.id)
+                                                            ? "border-red-500 bg-red-50 text-red-500 hover:bg-red-100"
+                                                            : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"), children: isWishlistLoading ? (_jsx(ButtonLoader, { className: "h-5 w-5" })) : (_jsx(Heart, { className: cn("h-5 w-5", product && isInWishlist(product.id) && "fill-current") })) }))] })] }), _jsx(ProductDeliveryInfoSection, { storeConfig: storeConfig, currency: currency, productCurrency: product.currency, productPrice: product.price, quantity: quantity, shippingAddress: shippingAddress, updateShippingAddress: updateShippingAddress, shippingMethods: shippingMethods, isCalculatingShipping: isCalculatingShipping, shippingError: shippingError, freeShippingEligible: freeShippingEligible, freeShippingThreshold: freeShippingThreshold, onToast: (message, type) => addToast(message, type) }), _jsx(ProductDescription, { description: product.description }), product.specifications && Object.keys(product.specifications).length > 0 && (_jsxs("div", { className: "mb-8", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Specifications" }), _jsx("dl", { className: "grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-4", children: Object.entries(product.specifications).map(([key, value]) => (_jsxs("div", { className: "flex flex-col p-3 bg-gray-50 rounded-lg", children: [_jsx("dt", { className: "text-xs text-gray-500 font-medium uppercase tracking-wider mb-1", children: key }), _jsx("dd", { className: "text-sm font-bold text-gray-900", children: value })] }, key))) })] }))] })] }), _jsx("div", { className: "mt-20 pt-16 border-t border-gray-200", children: _jsxs("div", { className: "max-w-4xl", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6 mb-10", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h2", { className: "text-2xl lg:text-3xl font-bold text-gray-900 mb-4", children: "Customer Reviews" }), product.reviewCount && product.reviewCount > 0 && product.rating && product.rating > 0 ? (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StarRating, { rating: typeof product.rating === 'number' ? product.rating : Number(product.rating) || 0, size: "lg" }), _jsx("span", { className: "text-2xl font-bold text-gray-900", children: Number(product.rating).toFixed(1) }), _jsx("span", { className: "text-lg text-gray-500", children: "out of 5" })] }), _jsx("span", { className: "text-gray-300", children: "|" }), _jsxs("span", { className: "text-lg text-gray-600", children: [product.reviewCount, " ", product.reviewCount === 1 ? 'review' : 'reviews'] })] })) : (_jsx("div", { className: "text-gray-500", children: _jsx("p", { className: "text-base", children: "Be the first to review this product" }) }))] }), _jsx(Button, { onClick: () => setIsReviewModalOpen(true), className: "rounded-full shrink-0 bg-gray-900 hover:bg-gray-800 text-white", children: product.reviewCount && product.reviewCount > 0 ? 'Write a Review' : 'Be the First to Review' })] }), ratingDistribution.some(r => r.count > 0) && (_jsxs("div", { className: "mb-10 p-6 bg-gray-50 rounded-xl border border-gray-100", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 mb-5", children: "Rating Breakdown" }), _jsx("div", { className: "space-y-3", children: ratingDistribution.map(({ rating, count, percentage }) => (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-1.5 w-20", children: [_jsx("span", { className: "text-sm font-semibold text-gray-900", children: rating }), _jsx(Star, { className: "h-4 w-4 fill-gray-900 text-gray-900" })] }), _jsx("div", { className: "flex-1 h-2.5 bg-gray-200 rounded-full overflow-hidden", children: _jsx("div", { className: "h-full bg-gradient-to-r from-gray-700 to-gray-900 rounded-full transition-all duration-500", style: { width: `${percentage}%` } }) }), _jsx("span", { className: "text-sm font-medium text-gray-700 w-12 text-right", children: count })] }, rating))) })] })), reviews.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-6", children: displayedReviews.map((review) => (_jsx(ReviewCard, { review: review }, review.id))) }), hasMoreReviews && !showAllReviews && (_jsx("div", { className: "mt-8 text-center", children: _jsxs(Button, { variant: "outline", onClick: () => setShowAllReviews(true), className: "px-8 rounded-full h-12 border-gray-300", children: ["Show All ", reviews.length, " Reviews"] }) }))] })) : (_jsxs("div", { className: "text-center py-12 bg-gray-50 rounded-xl border border-dashed border-gray-300", children: [_jsx("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-white shadow-sm mb-4", children: _jsx(Star, { className: "h-6 w-6 text-gray-400" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: "No Reviews Yet" }), _jsx("p", { className: "text-gray-500 max-w-sm mx-auto mb-6", children: "Be the first to review this product and help other customers make informed decisions." }), _jsx(Button, { onClick: () => setIsReviewModalOpen(true), className: "bg-gray-900 hover:bg-gray-800 text-white", children: "Write the First Review" })] }))] }) }), relatedProducts.length > 0 && (_jsxs("div", { className: "mt-20 pt-16 border-t border-gray-200", children: [_jsx("h2", { className: "text-2xl lg:text-3xl font-bold text-gray-900 mb-8", children: "You Might Also Like" }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6", children: relatedProducts.map((relatedProduct) => (_jsx("div", { className: "h-[400px]", children: _jsx(ProductCard, { product: relatedProduct, storeSlug: storeConfig.slug, onAddToCart: (p) => addToCart(p, 1), onQuickView: handleQuickView, className: "h-full" }) }, relatedProduct.id))) })] }))] }), _jsx(Modal, { isOpen: isReviewModalOpen, onClose: () => setIsReviewModalOpen(false), title: "Write a Review", children: _jsxs("form", { onSubmit: handleSubmitReview, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Rating" }), _jsxs("div", { className: "flex items-center gap-1", children: [[1, 2, 3, 4, 5].map((star) => (_jsxs("div", { className: "relative group", children: [_jsx("button", { type: "button", onClick: () => setNewReview({ ...newReview, rating: star - 0.5 }), className: "absolute top-0 left-0 w-1/2 h-full z-20 focus:outline-none", title: `${star - 0.5} stars` }), _jsx("button", { type: "button", onClick: () => setNewReview({ ...newReview, rating: star }), className: "absolute top-0 right-0 w-1/2 h-full z-20 focus:outline-none", title: `${star} stars` }), _jsxs("div", { className: "relative pointer-events-none transition-transform group-hover:scale-110", children: [_jsx(Star, { className: "h-8 w-8 text-gray-200 fill-gray-200" }), newReview.rating >= star - 0.5 && (_jsx("div", { className: "absolute inset-0 overflow-hidden", style: { width: newReview.rating === star - 0.5 ? '50%' : '100%' }, children: _jsx(Star, { className: "h-8 w-8 text-gray-900 fill-gray-900" }) }))] })] }, star))), _jsx("span", { className: "ml-3 text-lg font-medium text-gray-900 w-12", children: newReview.rating })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "title", className: "block text-sm font-medium text-gray-700 mb-1", children: "Review Title" }), _jsx("input", { type: "text", id: "title", required: true, className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-black", placeholder: "Summarize your thoughts", value: newReview.title, onChange: (e) => setNewReview({ ...newReview, title: e.target.value }) })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "comment", className: "block text-sm font-medium text-gray-700 mb-1", children: "Review" }), _jsx("textarea", { id: "comment", required: true, rows: 4, className: "w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-black", placeholder: "What did you like or dislike?", value: newReview.comment, onChange: (e) => setNewReview({ ...newReview, comment: e.target.value }) })] }), _jsxs("div", { className: "pt-4 flex justify-end gap-3", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => setIsReviewModalOpen(false), children: "Cancel" }), _jsx(Button, { type: "submit", className: "bg-black text-white hover:bg-gray-800", children: "Submit Review" })] })] }) }), _jsx(GuestCheckoutModal, { isOpen: showGuestModal, onClose: () => setShowGuestModal(false), onSubmit: handleGuestInfoSubmit, initialData: getGuestUserInfo() || undefined })] }));
+}

package/dist/layouts/electronics-grid/pages/ProductsPage.d.ts

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

package/dist/layouts/electronics-grid/pages/ProductsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductsPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics-grid/pages/ProductsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAwB9D,UAAU,iBAAiB;IACzB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAwuBD,wBAAgB,kCAAkC,CAAC,KAAK,EAAE,iBAAiB,2CAM1E"}