@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/product-info.tsx

@@ -0,0 +1,525 @@
+'use client';
+
+import {useState, useMemo, useEffect, useTransition} from 'react';
+import {useSearchParams} from 'next/navigation';
+import {usePathname, useRouter} from '@/i18n/navigation';
+import {useTranslations} from 'next-intl';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Label} from '@/components/ui/label';
+import {RadioGroup, RadioGroupItem} from '@/components/ui/radio-group';
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
+import {ShoppingCart, CheckCircle2, Minus, Plus, Copy, Check} from 'lucide-react';
+import {addToCart} from '@/app/[locale]/(catalog)/product/[slug]/actions';
+import {checkCartRequiresReapproval} from '@/lib/cart-guard';
+import {useReapprovalConfirm} from '@/app/[locale]/cart/reapproval-confirm';
+import {toast} from 'sonner';
+import {Price} from '@/components/commerce/price';
+import {PriceTiers, PriceTier} from '@/components/commerce/price-tiers';
+import {Badge} from '@/components/ui/badge';
+import {MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput} from '@/lib/quantity';
+import {useCartCount} from '@/lib/cart-count-context';
+import {PackagingUnitSelector} from '@/components/commerce/packaging-unit-selector';
+import {ShoppingListToggle} from '@/components/commerce/shopping-list-toggle';
+import type {ProductDetail, PackagingUnitOption} from '@/lib/vendure/queries';
+import type {ShoppingListInfo} from '@/app/[locale]/account/shopping-lists/actions';
+
+export interface ProductInfoProps {
+    product: ProductDetail;
+    searchParams: { [key: string]: string | string[] | undefined };
+    shoppingLists?: ShoppingListInfo[] | null;
+    currencyCode?: string;
+}
+
+export function ProductInfo({ product, searchParams, shoppingLists, currencyCode }: ProductInfoProps) {
+    const tProduct = useTranslations('Product');
+    const tCart = useTranslations('Cart');
+    const pathname = usePathname();
+    const router = useRouter();
+    const currentSearchParams = useSearchParams();
+    const [isPending, startTransition] = useTransition();
+    const [isAdded, setIsAdded] = useState(false);
+    const [skuCopied, setSkuCopied] = useState(false);
+    const [quantityInput, setQuantityInput] = useState('1');
+    const [selectedPackagingUnit, setSelectedPackagingUnit] = useState<PackagingUnitOption | undefined>(undefined);
+    const {setCount} = useCartCount();
+    const {guardCartChange, isChecking, dialog: reapprovalDialog} = useReapprovalConfirm(checkCartRequiresReapproval);
+
+    // Initialize selected options from URL, falling back to the first in-stock variant
+    const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>(() => {
+        const initialOptions: Record<string, string> = {};
+
+        // Load from URL search params
+        product.optionGroups.forEach((group) => {
+            const paramValue = searchParams[group.code];
+            if (typeof paramValue === 'string') {
+                const option = group.options.find((opt) => opt.code === paramValue);
+                if (option) {
+                    initialOptions[group.id] = option.id;
+                }
+            }
+        });
+
+        // If URL params didn't yield a full selection, auto-select first in-stock variant
+        if (Object.keys(initialOptions).length !== product.optionGroups.length && product.variants.length > 1) {
+            const firstInStock = product.variants.find((v) => v.stockLevel !== 'OUT_OF_STOCK') ?? product.variants[0];
+            if (firstInStock) {
+                for (const opt of firstInStock.options) {
+                    initialOptions[opt.groupId] = opt.id;
+                }
+            }
+        }
+
+        return initialOptions;
+    });
+
+    // Find the matching variant based on selected options
+    const selectedVariant = useMemo(() => {
+        if (product.variants.length === 1) {
+            return product.variants[0];
+        }
+
+        // If not all option groups have a selection, return null
+        if (Object.keys(selectedOptions).length !== product.optionGroups.length) {
+            return null;
+        }
+
+        // Find variant that matches all selected options
+        return product.variants.find((variant) => {
+            const variantOptionIds = variant.options.map((opt) => opt.id);
+            const selectedOptionIds = Object.values(selectedOptions);
+            return selectedOptionIds.every((optId) => variantOptionIds.includes(optId));
+        });
+    }, [selectedOptions, product.variants, product.optionGroups]);
+
+    // Sync URL when variant is auto-selected without URL params
+    useEffect(() => {
+        if (!selectedVariant || product.variants.length <= 1) return;
+        const params = new URLSearchParams(currentSearchParams);
+        let needsUpdate = false;
+        for (const opt of selectedVariant.options) {
+            const group = product.optionGroups.find((g) => g.id === opt.groupId);
+            if (group && params.get(group.code) !== opt.code) {
+                params.set(group.code, opt.code);
+                needsUpdate = true;
+            }
+        }
+        if (needsUpdate) {
+            router.replace(`${pathname}?${params.toString()}`, {scroll: false});
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Auto-select base packaging unit when variant changes
+    const variantPackagingUnits = selectedVariant?.packagingUnits ?? [];
+    useEffect(() => {
+        if (variantPackagingUnits.length > 0) {
+            const base = variantPackagingUnits.find((pu) => pu.isBaseUnit) ?? variantPackagingUnits[0];
+            setSelectedPackagingUnit(base);
+            setQuantityInput(String(base.minQuantity));
+        } else {
+            setSelectedPackagingUnit(undefined);
+        }
+    }, [selectedVariant?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Sync selectedOptions when URL params change externally (e.g. sidebar variant click)
+    useEffect(() => {
+        const newOptions: Record<string, string> = {};
+        product.optionGroups.forEach((group) => {
+            const paramValue = currentSearchParams.get(group.code);
+            if (paramValue) {
+                const option = group.options.find((opt) => opt.code === paramValue);
+                if (option) {
+                    newOptions[group.id] = option.id;
+                }
+            }
+        });
+        if (Object.keys(newOptions).length === product.optionGroups.length) {
+            setSelectedOptions((prev) => {
+                const same = Object.keys(newOptions).every((k) => prev[k] === newOptions[k]);
+                return same ? prev : newOptions;
+            });
+        }
+    }, [currentSearchParams, product.optionGroups]);
+
+    const handleOptionChange = (groupId: string, optionId: string) => {
+        setSelectedOptions((prev) => ({
+            ...prev,
+            [groupId]: optionId,
+        }));
+
+        // Find the option group and option to get their codes
+        const group = product.optionGroups.find((g) => g.id === groupId);
+        const option = group?.options.find((opt) => opt.id === optionId);
+
+        if (group && option) {
+            // Update URL with option code
+            const params = new URLSearchParams(currentSearchParams);
+            params.set(group.code, option.code);
+            router.push(`${pathname}?${params.toString()}`, { scroll: false });
+        }
+    };
+
+    const handlePackagingUnitSelect = (unit: PackagingUnitOption) => {
+        setSelectedPackagingUnit(unit);
+        setQuantityInput(String(unit.minQuantity));
+    };
+
+    const handleAddToCart = async () => {
+        if (!selectedVariant) return;
+
+        const quantity = normalizeQuantity(quantityInput, effectiveMinQuantity);
+        setQuantityInput(String(quantity));
+
+        await guardCartChange(() => {
+            startTransition(async () => {
+                const packagingUnitId = selectedPackagingUnit?.packagingUnit.id;
+                const result = await addToCart(selectedVariant.id, quantity, packagingUnitId);
+
+                if (result.success && result.order) {
+                    setCount(result.order.lines.length);
+                    setIsAdded(true);
+                    const unitLabel = selectedPackagingUnit
+                        ? ` (${selectedPackagingUnit.packagingUnit.name})`
+                        : '';
+                    toast.success(tProduct('addedToCartMessage'), {
+                        description: `${quantity} × ${product.name}${unitLabel} added to your cart`,
+                    });
+
+                    // Reset the added state after 2 seconds
+                    setTimeout(() => setIsAdded(false), 2000);
+                } else {
+                    toast.error(tProduct('errorTitle'), {
+                        description: result.error || tProduct('errorAddToCart'),
+                    });
+                }
+            });
+        });
+    };
+
+    // Packaging unit-aware quantity constraints
+    const effectiveMinQuantity = selectedPackagingUnit?.minQuantity ?? MIN_ORDER_QUANTITY;
+    const effectiveQuantityIncrement = selectedPackagingUnit?.quantityIncrement ?? 1;
+
+    const quantity = normalizeQuantity(quantityInput, effectiveMinQuantity);
+
+    const updateQuantityInput = (value: string) => {
+        setQuantityInput(sanitizeQuantityInput(value));
+    };
+
+    const stepQuantity = (delta: number) => {
+        const step = delta > 0 ? effectiveQuantityIncrement : -effectiveQuantityIncrement;
+        setQuantityInput(String(Math.max(effectiveMinQuantity, quantity + step)));
+    };
+
+    // Compute displayed price based on selected packaging unit and active volume tier.
+    // Tier matching uses effective base-unit quantity: e.g. 2 boxes × 50 = 100 pieces.
+    const displayPrice = useMemo(() => {
+        if (!selectedVariant) return null;
+        const factor = selectedPackagingUnit?.conversionFactor ?? 1;
+        const effectiveQuantity = quantity * factor;
+        let perPiecePrice = selectedVariant.price;
+        const tiers = selectedVariant.priceTiers;
+        if (tiers) {
+            const sorted = [...tiers].filter(t => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!);
+            for (const tier of sorted) {
+                if (tier.minQuantity != null && effectiveQuantity >= tier.minQuantity) {
+                    perPiecePrice = tier.price;
+                }
+            }
+        }
+        return Math.round(perPiecePrice * factor);
+    }, [selectedVariant, selectedPackagingUnit, quantity]);
+
+    const isInStock = selectedVariant && selectedVariant.stockLevel !== 'OUT_OF_STOCK';
+    const canAddToCart = selectedVariant && isInStock;
+
+    const isInAnyShoppingList = useMemo(() => {
+        if (!selectedVariant || !shoppingLists?.length) return false;
+        return shoppingLists.some((list) => list.items.some((item) => item.variantId === selectedVariant.id));
+    }, [selectedVariant, shoppingLists]);
+
+    const stockDisplay = useMemo(() => {
+        if (!selectedVariant) return null;
+        // Use packaging unit's effective stock when a non-base unit is selected
+        if (selectedPackagingUnit && selectedPackagingUnit.effectiveStockLevel !== null) {
+            const stock = selectedPackagingUnit.effectiveStockLevel;
+            const name = selectedPackagingUnit.packagingUnit.name.toLowerCase();
+            const plural = stock === 1 ? name : name.endsWith('s') || name.endsWith('x') ? name + 'es' : name + 's';
+            if (stock <= 0) return {text: tProduct('outOfStock'), className: 'text-red-600'};
+            if (stock < 10) return {text: `${stock} ${plural} available`, className: 'text-amber-600'};
+            return {text: `${stock} ${plural} available`, className: 'text-emerald-600'};
+        }
+        const level = selectedVariant.stockLevel;
+        const numeric = Number(level);
+        if (!isNaN(numeric) && level.trim() !== '') {
+            if (numeric <= 0) return {text: tProduct('outOfStock'), className: 'text-red-600'};
+            if (numeric < 10) return {text: `${numeric} available`, className: 'text-amber-600'};
+            return {text: `${numeric} available`, className: 'text-emerald-600'};
+        }
+        switch (level) {
+            case 'IN_STOCK': return {text: tProduct('inStock'), className: 'text-emerald-600'};
+            case 'LOW_STOCK': return {text: tProduct('lowStock'), className: 'text-amber-600'};
+            case 'OUT_OF_STOCK': return {text: tProduct('outOfStock'), className: 'text-red-600'};
+            default: return {text: level, className: 'text-muted-foreground'};
+        }
+    }, [selectedVariant, selectedPackagingUnit, tProduct]);
+
+    return (
+        <div>
+            {reapprovalDialog}
+            {/* Identity block: Title + Price + SKU — tight grouping */}
+            <div className="space-y-1.5">
+                <h1 className="text-2xl font-bold">{product.name}</h1>
+                {selectedVariant && (
+                    <div className="flex items-center gap-3 flex-wrap">
+                        <div>
+                            <span className="text-3xl font-bold text-primary">
+                                <Price value={displayPrice ?? selectedVariant.price} currencyCode={currencyCode} taxLabel="excl" />
+                            </span>
+                            {selectedPackagingUnit && selectedPackagingUnit.conversionFactor > 1 && displayPrice != null && (
+                                <span className="text-sm text-muted-foreground ml-2">
+                                    (<Price value={Math.round(displayPrice / selectedPackagingUnit.conversionFactor)} currencyCode={currencyCode} />/pc)
+                                </span>
+                            )}
+                        </div>
+                        <button
+                            type="button"
+                            onClick={() => {
+                                const sku = selectedPackagingUnit?.sku ?? selectedVariant.sku;
+                                navigator.clipboard.writeText(sku);
+                                setSkuCopied(true);
+                                setTimeout(() => setSkuCopied(false), 1500);
+                            }}
+                            className="group/sku inline-flex items-center gap-1.5 cursor-pointer"
+                            aria-label={`Copy SKU ${selectedPackagingUnit?.sku ?? selectedVariant.sku}`}
+                        >
+                            <Badge variant="secondary" className="font-mono text-sm transition-colors group-hover/sku:bg-accent">
+                                {selectedPackagingUnit?.sku ?? selectedVariant.sku}
+                            </Badge>
+                            {skuCopied ? (
+                                <Check className="h-3.5 w-3.5 text-emerald-500" />
+                            ) : (
+                                <Copy className="h-3.5 w-3.5 text-muted-foreground opacity-0 group-hover/sku:opacity-100 transition-opacity" />
+                            )}
+                        </button>
+                    </div>
+                )}
+            </div>
+
+            {/* Option Groups */}
+            {product.optionGroups.length > 0 && (
+                <div className="mt-5 space-y-3">
+                    {product.optionGroups.map((group) => {
+                        const useDropdown = group.options.length >= 4 || product.optionGroups.length > 1;
+
+                        // Determine which options have at least one in-stock variant
+                        const optionStockMap = new Map<string, boolean>();
+                        for (const opt of group.options) {
+                            const hasInStock = product.variants.some((v) => {
+                                const hasOption = v.options.some((vo) => vo.id === opt.id);
+                                if (!hasOption) return false;
+                                // Check other selected groups match too
+                                return Object.entries(selectedOptions).every(([gId, oId]) => {
+                                    if (gId === group.id) return true;
+                                    return v.options.some((vo) => vo.id === oId);
+                                }) && v.stockLevel !== 'OUT_OF_STOCK';
+                            });
+                            optionStockMap.set(opt.id, hasInStock);
+                        }
+
+                        return (
+                            <div key={group.id} className="space-y-2">
+                                <Label className="text-sm font-medium">
+                                    {group.name}
+                                </Label>
+                                {useDropdown ? (
+                                    <Select
+                                        value={selectedOptions[group.id] || ''}
+                                        onValueChange={(value) => handleOptionChange(group.id, value)}
+                                    >
+                                        <SelectTrigger className="w-full">
+                                            <SelectValue placeholder={`Select ${group.name}`} />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {group.options.map((option) => {
+                                                const inStock = optionStockMap.get(option.id) ?? true;
+                                                return (
+                                                    <SelectItem
+                                                        key={option.id}
+                                                        value={option.id}
+                                                        disabled={!inStock}
+                                                    >
+                                                        {option.name}{!inStock ? ' (Out of Stock)' : ''}
+                                                    </SelectItem>
+                                                );
+                                            })}
+                                        </SelectContent>
+                                    </Select>
+                                ) : (
+                                    <RadioGroup
+                                        value={selectedOptions[group.id] || ''}
+                                        onValueChange={(value) => handleOptionChange(group.id, value)}
+                                    >
+                                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                                            {group.options.map((option) => {
+                                                const inStock = optionStockMap.get(option.id) ?? true;
+                                                return (
+                                                    <div key={option.id}>
+                                                        <RadioGroupItem
+                                                            value={option.id}
+                                                            id={option.id}
+                                                            className="peer sr-only"
+                                                            disabled={!inStock}
+                                                        />
+                                                        <Label
+                                                            htmlFor={option.id}
+                                                            className={`flex items-center justify-center rounded-md border-2 border-muted bg-popover px-3 py-2 text-sm transition-colors ${
+                                                                inStock
+                                                                    ? 'hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary cursor-pointer'
+                                                                    : 'opacity-50 cursor-not-allowed line-through'
+                                                            }`}
+                                                        >
+                                                            {option.name}
+                                                        </Label>
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                    </RadioGroup>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+
+            {/* Packaging Unit Selector */}
+            {variantPackagingUnits.length > 0 && selectedVariant && (
+                <div className="mt-5">
+                    <PackagingUnitSelector
+                        packagingUnits={variantPackagingUnits}
+                        selectedId={selectedPackagingUnit?.packagingUnit.id}
+                        onSelect={handlePackagingUnitSelect}
+                        baseVariantPrice={selectedVariant.price}
+                        priceTiers={selectedVariant.priceTiers ?? undefined}
+                        currencyCode={currencyCode}
+                    />
+                </div>
+            )}
+
+            {/* Action strip: Stock + Quantity + Add to Cart */}
+            <div className="mt-5 space-y-3">
+                {stockDisplay && (
+                    <div className="flex items-center gap-2 text-sm">
+                        <span className={`font-medium ${stockDisplay.className}`}>
+                            {stockDisplay.text}
+                        </span>
+                        <span className="text-muted-foreground">·</span>
+                        <span className="text-muted-foreground text-xs">Min. qty {effectiveMinQuantity}</span>
+                        {effectiveQuantityIncrement > 1 && (
+                            <>
+                                <span className="text-muted-foreground">·</span>
+                                <span className="text-muted-foreground text-xs">Increment {effectiveQuantityIncrement}</span>
+                            </>
+                        )}
+                    </div>
+                )}
+
+                <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-1 border rounded-md p-1">
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            aria-label={tCart('decreaseQuantity')}
+                            className="h-8 w-8"
+                            disabled={isPending || quantity <= effectiveMinQuantity}
+                            onClick={() => stepQuantity(-1)}
+                        >
+                            <Minus className="h-4 w-4"/>
+                        </Button>
+
+                        <Input
+                            id="product-quantity"
+                            aria-label={tCart('quantity')}
+                            inputMode="numeric"
+                            pattern="[0-9]*"
+                            value={quantityInput}
+                            onChange={(event) => updateQuantityInput(event.target.value)}
+                            onBlur={() => setQuantityInput(String(quantity))}
+                            className="h-8 w-14 border-0 text-center text-sm shadow-none focus-visible:ring-0"
+                        />
+
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            aria-label={tCart('increaseQuantity')}
+                            className="h-8 w-8"
+                            disabled={isPending}
+                            onClick={() => stepQuantity(1)}
+                        >
+                            <Plus className="h-4 w-4"/>
+                        </Button>
+                    </div>
+
+                    {selectedPackagingUnit && selectedPackagingUnit.conversionFactor > 1 && (
+                        <span className="text-xs text-muted-foreground">
+                            {tCart('equalsNPcs', {count: quantity * selectedPackagingUnit.conversionFactor})}
+                        </span>
+                    )}
+
+                    <Button
+                        size="lg"
+                        className="flex-1"
+                        disabled={!canAddToCart || isPending || isChecking}
+                        onClick={handleAddToCart}
+                    >
+                        {isAdded ? (
+                            <>
+                                <CheckCircle2 className="mr-2 h-5 w-5"/>
+                                {tProduct('addedToCart')}
+                            </>
+                        ) : (
+                            <>
+                                <ShoppingCart className="mr-2 h-5 w-5"/>
+                                {isChecking
+                                    ? 'Checking...'
+                                    : isPending
+                                    ? tProduct('adding')
+                                    : !selectedVariant && product.optionGroups.length > 0
+                                        ? tProduct('selectOptions')
+                                        : !isInStock
+                                            ? tProduct('outOfStock')
+                                            : tProduct('addToCart')}
+                            </>
+                        )}
+                    </Button>
+                    {selectedVariant && shoppingLists && (
+                        <ShoppingListToggle
+                            variantId={selectedVariant.id}
+                            shoppingLists={shoppingLists}
+                            initialIsInAnyList={isInAnyShoppingList}
+                        />
+                    )}
+                </div>
+            </div>
+
+            {/* Volume Pricing — reference material, post-action */}
+            {selectedVariant?.priceTiers && (
+                <div className="mt-6">
+                    <PriceTiers
+                        tiers={selectedVariant.priceTiers}
+                        basePrice={selectedVariant.price}
+                        quantity={quantity}
+                        onTierClick={(minQty) => setQuantityInput(String(minQty))}
+                        conversionFactor={selectedPackagingUnit?.conversionFactor}
+                        unitName={selectedPackagingUnit?.packagingUnit.name}
+                        currencyCode={currencyCode}
+                    />
+                </div>
+            )}
+
+        </div>
+    );
+}