storefront-layouts-staging 1.0.0-staging.0

package/dist/layouts/electronics/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 ElectronicsProductDetailPage({ 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/pages/ProductsPage.d.ts

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

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

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