@vendure-platform/create 0.5.0 → 0.5.2

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

@@ -1,29 +1,29 @@
 '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 {AddToSharedCart} from '@/components/commerce/add-to-shared-cart';
-import type {ProductDetail, PackagingUnitOption} from '@/lib/vendure/queries';
-import type {ShoppingListInfo} from '@/app/[locale]/account/shopping-lists/actions';
+import { addToCart } from '@/app/[locale]/(catalog)/product/[slug]/actions';
+import type { ShoppingListInfo } from '@/app/[locale]/account/shopping-lists/actions';
+import { useReapprovalConfirm } from '@/app/[locale]/cart/reapproval-confirm';
+import { AddToSharedCart } from '@/components/commerce/add-to-shared-cart';
+import { PackagingUnitSelector } from '@/components/commerce/packaging-unit-selector';
+import { Price } from '@/components/commerce/price';
+import { PriceTier, PriceTiers } from '@/components/commerce/price-tiers';
+import { ShoppingListToggle } from '@/components/commerce/shopping-list-toggle';
+import { Badge } from '@/components/ui/badge';
+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 { usePathname, useRouter } from '@/i18n/navigation';
+import { useCartCount } from '@/lib/cart-count-context';
+import { checkCartRequiresReapproval } from '@/lib/cart-guard';
+import { MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput } from '@/lib/quantity';
+import type { PackagingUnitOption, ProductDetail } from '@/lib/vendure/queries';
+import { Check, CheckCircle2, Copy, Minus, Plus, ShoppingCart } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState, useTransition } from 'react';
+import { toast } from 'sonner';
 
 export interface ProductInfoProps {
     product: ProductDetail;
@@ -34,7 +34,14 @@ export interface ProductInfoProps {
     canCreateSharedCart?: boolean;
 }
 
-export function ProductInfo({ product, searchParams, shoppingLists, currencyCode, isCompanyUser, canCreateSharedCart }: ProductInfoProps) {
+export function ProductInfo({
+    product,
+    searchParams,
+    shoppingLists,
+    currencyCode,
+    isCompanyUser,
+    canCreateSharedCart,
+}: ProductInfoProps) {
     const tProduct = useTranslations('Product');
     const tCart = useTranslations('Cart');
     const pathname = usePathname();
@@ -44,9 +51,15 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
     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);
+    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>>(() => {
@@ -64,8 +77,12 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
         });
 
         // 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 (
+            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;
@@ -108,7 +125,7 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
             }
         }
         if (needsUpdate) {
-            router.replace(`${pathname}?${params.toString()}`, {scroll: false});
+            router.replace(`${pathname}?${params.toString()}`, { scroll: false });
         }
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -223,7 +240,9 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
         const tiers = selectedPackagingUnit?.priceTiers ?? selectedVariant.priceTiers;
         let perPiecePrice = selectedVariant.price;
         if (tiers) {
-            const sorted = [...tiers].filter(t => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!);
+            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;
@@ -247,23 +266,28 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
         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 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'};
+            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'};
+            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]);
 
@@ -277,13 +301,26 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                     <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" />
+                                <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>
-                            )}
+                            {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"
@@ -296,7 +333,10 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                             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">
+                            <Badge
+                                variant="secondary"
+                                className="font-mono text-sm transition-colors group-hover/sku:bg-accent"
+                            >
                                 {selectedPackagingUnit?.sku ?? selectedVariant.sku}
                             </Badge>
                             {skuCopied ? (
@@ -322,19 +362,19 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                                 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';
+                                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>
+                                <Label className="text-sm font-medium">{group.name}</Label>
                                 {useDropdown ? (
                                     <Select
                                         value={selectedOptions[group.id] || ''}
@@ -352,7 +392,8 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                                                         value={option.id}
                                                         disabled={!inStock}
                                                     >
-                                                        {option.name}{!inStock ? ' (Out of Stock)' : ''}
+                                                        {option.name}
+                                                        {!inStock ? ' (Out of Stock)' : ''}
                                                     </SelectItem>
                                                 );
                                             })}
@@ -414,15 +455,15 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
             <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={`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>
+                                <span className="text-muted-foreground text-xs">
+                                    Increment {effectiveQuantityIncrement}
+                                </span>
                             </>
                         )}
                     </div>
@@ -439,7 +480,7 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                             disabled={isPending || quantity <= effectiveMinQuantity}
                             onClick={() => stepQuantity(-1)}
                         >
-                            <Minus className="h-4 w-4"/>
+                            <Minus className="h-4 w-4" />
                         </Button>
 
                         <Input
@@ -462,13 +503,15 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                             disabled={isPending}
                             onClick={() => stepQuantity(1)}
                         >
-                            <Plus className="h-4 w-4"/>
+                            <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})}
+                            {tCart('equalsNPcs', {
+                                count: quantity * selectedPackagingUnit.conversionFactor,
+                            })}
                         </span>
                     )}
 
@@ -480,21 +523,21 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                     >
                         {isAdded ? (
                             <>
-                                <CheckCircle2 className="mr-2 h-5 w-5"/>
+                                <CheckCircle2 className="mr-2 h-5 w-5" />
                                 {tProduct('addedToCart')}
                             </>
                         ) : (
                             <>
-                                <ShoppingCart className="mr-2 h-5 w-5"/>
+                                <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')}
+                                    ? tProduct('selectOptions')
+                                    : !isInStock
+                                    ? tProduct('outOfStock')
+                                    : tProduct('addToCart')}
                             </>
                         )}
                     </Button>
@@ -510,7 +553,7 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                 {selectedVariant && isCompanyUser && (
                     <div className="mt-2">
                         <AddToSharedCart
-                            lines={[{productVariantId: selectedVariant.id, quantity}]}
+                            lines={[{ productVariantId: selectedVariant.id, quantity }]}
                             disabled={!canAddToCart}
                             canCreate={canCreateSharedCart}
                         />
@@ -522,7 +565,9 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
             {(selectedPackagingUnit?.priceTiers ?? selectedVariant?.priceTiers) && (
                 <div className="mt-6">
                     <PriceTiers
-                        tiers={(selectedPackagingUnit?.priceTiers ?? selectedVariant?.priceTiers) as PriceTier[]}
+                        tiers={
+                            (selectedPackagingUnit?.priceTiers ?? selectedVariant?.priceTiers) as PriceTier[]
+                        }
                         basePrice={selectedVariant?.price ?? 0}
                         quantity={quantity}
                         onTierClick={(minQty) => setQuantityInput(String(minQty))}
@@ -532,7 +577,6 @@ export function ProductInfo({ product, searchParams, shoppingLists, currencyCode
                     />
                 </div>
             )}
-
         </div>
     );
 }