@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

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

@@ -1,20 +1,20 @@
 'use client';
 
-import { useState, useEffect, useMemo, useTransition } from 'react';
-import Image from 'next/image';
-import {Link} from '@/i18n/navigation';
-import { Warehouse, Minus, Plus, ShoppingCart, CheckCircle2, ArrowRight } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Skeleton } from '@/components/ui/skeleton';
+import { addToCart, getProductBySlug } from '@/app/[locale]/(catalog)/product/[slug]/actions';
 import { Price } from '@/components/commerce/price';
 import type { PriceTier } from '@/components/commerce/price-tiers';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { getProductBySlug, addToCart } from '@/app/[locale]/(catalog)/product/[slug]/actions';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Link } from '@/i18n/navigation';
+import { useCartCount } from '@/lib/cart-count-context';
 import { MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput } from '@/lib/quantity';
+import { ArrowRight, CheckCircle2, Minus, Plus, ShoppingCart, Warehouse } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useEffect, useMemo, useState, useTransition } from 'react';
 import { toast } from 'sonner';
-import { useCartCount } from '@/lib/cart-count-context';
 
 interface ProductListExpansionProps {
     slug: string;
@@ -42,14 +42,19 @@ function getStockDisplay(stockLevel: string, t: ReturnType<typeof useTranslation
     const numeric = Number(stockLevel);
     if (!isNaN(numeric) && stockLevel.trim() !== '') {
         if (numeric <= 0) return { text: t('outOfStock'), className: 'text-red-600' };
-        if (numeric < 10) return { text: t('availableCount', {count: numeric}), className: 'text-amber-600' };
-        return { text: t('availableCount', {count: numeric}), className: 'text-emerald-600' };
+        if (numeric < 10)
+            return { text: t('availableCount', { count: numeric }), className: 'text-amber-600' };
+        return { text: t('availableCount', { count: numeric }), className: 'text-emerald-600' };
     }
     switch (stockLevel) {
-        case 'IN_STOCK': return { text: t('inStock'), className: 'text-emerald-600' };
-        case 'LOW_STOCK': return { text: t('lowStock'), className: 'text-amber-600' };
-        case 'OUT_OF_STOCK': return { text: t('outOfStock'), className: 'text-red-600' };
-        default: return { text: stockLevel, className: 'text-muted-foreground' };
+        case 'IN_STOCK':
+            return { text: t('inStock'), className: 'text-emerald-600' };
+        case 'LOW_STOCK':
+            return { text: t('lowStock'), className: 'text-amber-600' };
+        case 'OUT_OF_STOCK':
+            return { text: t('outOfStock'), className: 'text-red-600' };
+        default:
+            return { text: stockLevel, className: 'text-muted-foreground' };
     }
 }
 
@@ -77,7 +82,7 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
     const [quantityInput, setQuantityInput] = useState('1');
     const [isPending, startTransition] = useTransition();
     const [isAdded, setIsAdded] = useState(false);
-    const {setCount} = useCartCount();
+    const { setCount } = useCartCount();
 
     useEffect(() => {
         let cancelled = false;
@@ -85,7 +90,8 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
         const applyData = (data: ProductDetail) => {
             if (cancelled) return;
             setProduct(data);
-            const firstInStock = data.variants.find((v) => v.stockLevel !== 'OUT_OF_STOCK') ?? data.variants[0];
+            const firstInStock =
+                data.variants.find((v) => v.stockLevel !== 'OUT_OF_STOCK') ?? data.variants[0];
             if (firstInStock) {
                 setSelectedVariantId(firstInStock.id);
             }
@@ -109,7 +115,9 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
                 if (!cancelled) setLoading(false);
             }
         });
-        return () => { cancelled = true; };
+        return () => {
+            cancelled = true;
+        };
     }, [slug]);
 
     const selectedVariant = useMemo(
@@ -118,13 +126,13 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
     );
 
     const packagingUnits = selectedVariant?.packagingUnits ?? [];
-    const selectedPU = packagingUnits.find(pu => pu.packagingUnit.id === selectedPackagingUnitId);
+    const selectedPU = packagingUnits.find((pu) => pu.packagingUnit.id === selectedPackagingUnitId);
 
     // Auto-select base packaging unit when variant changes
     // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing local state to prop-derived data
     useEffect(() => {
         if (packagingUnits.length > 0) {
-            const base = packagingUnits.find(pu => pu.isBaseUnit) ?? packagingUnits[0];
+            const base = packagingUnits.find((pu) => pu.isBaseUnit) ?? packagingUnits[0];
             setSelectedPackagingUnitId(base.packagingUnit.id);
             setQuantityInput(String(base.minQuantity));
         } else {
@@ -136,7 +144,7 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
     const effectiveIncrement = selectedPU?.quantityIncrement ?? 1;
 
     const stockDisplay = useMemo(
-        () => selectedVariant ? getStockDisplay(selectedVariant.stockLevel, t) : null,
+        () => (selectedVariant ? getStockDisplay(selectedVariant.stockLevel, t) : null),
         [selectedVariant, t],
     );
 
@@ -161,7 +169,10 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
                 setIsAdded(true);
                 const unitLabel = selectedPU ? ` (${selectedPU.packagingUnit.name})` : '';
                 toast.success(t('addedToCartMessage'), {
-                    description: t('addedToCartDescriptionWithQty', {qty, name: `${productName}${unitLabel}`}),
+                    description: t('addedToCartDescriptionWithQty', {
+                        qty,
+                        name: `${productName}${unitLabel}`,
+                    }),
                 });
                 setTimeout(() => setIsAdded(false), 2000);
             } else {
@@ -177,11 +188,7 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
     }
 
     if (!product || product.variants.length === 0) {
-        return (
-            <div className="p-4 text-sm text-muted-foreground">
-                {t('productDetailsUnavailable')}
-            </div>
-        );
+        return <div className="p-4 text-sm text-muted-foreground">{t('productDetailsUnavailable')}</div>;
     }
 
     const imageUrl = product.assets?.[0]?.preview;
@@ -226,10 +233,21 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
                                 }`}
                             >
                                 <span className="truncate flex-1 text-left">{variant.name}</span>
-                                <Warehouse className={`h-3.5 w-3.5 flex-shrink-0 ${inStock ? 'text-emerald-500' : 'text-red-500'}`} />
-                                <span className="font-mono text-muted-foreground flex-shrink-0">{variant.sku}</span>
+                                <Warehouse
+                                    className={`h-3.5 w-3.5 flex-shrink-0 ${
+                                        inStock ? 'text-emerald-500' : 'text-red-500'
+                                    }`}
+                                />
+                                <span className="font-mono text-muted-foreground flex-shrink-0">
+                                    {variant.sku}
+                                </span>
                                 <span className="font-medium flex-shrink-0 whitespace-nowrap">
-                                    <Price value={Math.round(variant.price * (selectedPU?.conversionFactor ?? 1))} currencyCode={currencyCode} />
+                                    <Price
+                                        value={Math.round(
+                                            variant.price * (selectedPU?.conversionFactor ?? 1),
+                                        )}
+                                        currencyCode={currencyCode}
+                                    />
                                 </span>
                             </button>
                         );
@@ -280,7 +298,7 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
                                 value={selectedPackagingUnitId}
                                 onValueChange={(id) => {
                                     setSelectedPackagingUnitId(id);
-                                    const pu = packagingUnits.find(p => p.packagingUnit.id === id);
+                                    const pu = packagingUnits.find((p) => p.packagingUnit.id === id);
                                     if (pu) setQuantityInput(String(pu.minQuantity));
                                 }}
                             >
@@ -288,15 +306,20 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
                                     <SelectValue />
                                 </SelectTrigger>
                                 <SelectContent>
-                                    {packagingUnits.map(pu => (
+                                    {packagingUnits.map((pu) => (
                                         <SelectItem
                                             key={pu.packagingUnit.id}
                                             value={pu.packagingUnit.id}
-                                            disabled={pu.effectiveStockLevel !== null && pu.effectiveStockLevel <= 0}
+                                            disabled={
+                                                pu.effectiveStockLevel !== null && pu.effectiveStockLevel <= 0
+                                            }
                                         >
                                             {pu.conversionFactor === 1
                                                 ? pu.packagingUnit.name
-                                                : t('packagingUnitWithConversion', {name: pu.packagingUnit.name, conversion: pu.conversionFactor})}
+                                                : t('packagingUnitWithConversion', {
+                                                      name: pu.packagingUnit.name,
+                                                      conversion: pu.conversionFactor,
+                                                  })}
                                         </SelectItem>
                                     ))}
                                 </SelectContent>
@@ -306,7 +329,7 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
                         {/* Total pieces summary — only when qty > 1 so it adds info */}
                         {selectedPU && selectedPU.conversionFactor > 1 && quantity > 1 && (
                             <span className="text-xs text-muted-foreground">
-                                {t('equalsNPcs', {count: quantity * selectedPU.conversionFactor})}
+                                {t('equalsNPcs', { count: quantity * selectedPU.conversionFactor })}
                             </span>
                         )}
 
@@ -340,44 +363,49 @@ export function ProductListExpansion({ slug, productName, currencyCode }: Produc
                 )}
 
                 {/* Compact price tiers */}
-                {selectedVariant?.priceTiers && (() => {
-                    const sorted = [...selectedVariant.priceTiers]
-                        .filter((tier): tier is PriceTier => tier.minQuantity != null)
-                        .sort((a, b) => a.minQuantity! - b.minQuantity!);
-                    if (sorted.length < 2) return null;
-                    const baseTier = sorted[0];
-                    const activeTierIndex = sorted.reduce((acc, tier, i) =>
-                        quantity >= tier.minQuantity! ? i : acc, -1
-                    );
-                    return (
-                        <div className="flex items-center gap-1.5 flex-wrap text-[11px]">
-                            {sorted.map((tier, i) => {
-                                const savings = tier.price < baseTier.price
-                                    ? Math.round((1 - tier.price / baseTier.price) * 100)
-                                    : 0;
-                                const isActive = i === activeTierIndex && i > 0;
-                                return (
-                                    <button
-                                        type="button"
-                                        key={tier.minQuantity}
-                                        onClick={() => setQuantityInput(String(tier.minQuantity))}
-                                        className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded transition-colors cursor-pointer ${
-                                            isActive
-                                                ? 'border border-primary/50 bg-primary/10 font-medium'
-                                                : 'border border-transparent bg-muted hover:bg-accent'
-                                        }`}
-                                    >
-                                        <span className="text-xs font-semibold text-muted-foreground">{tier.minQuantity}+:</span>
-                                        <Price value={tier.price} currencyCode={currencyCode} />
-                                        {savings > 0 && (
-                                            <span className="text-green-600">-{savings}%</span>
-                                        )}
-                                    </button>
-                                );
-                            })}
-                        </div>
-                    );
-                })()}
+                {selectedVariant?.priceTiers &&
+                    (() => {
+                        const sorted = [...selectedVariant.priceTiers]
+                            .filter((tier): tier is PriceTier => tier.minQuantity != null)
+                            .sort((a, b) => a.minQuantity! - b.minQuantity!);
+                        if (sorted.length < 2) return null;
+                        const baseTier = sorted[0];
+                        const activeTierIndex = sorted.reduce(
+                            (acc, tier, i) => (quantity >= tier.minQuantity! ? i : acc),
+                            -1,
+                        );
+                        return (
+                            <div className="flex items-center gap-1.5 flex-wrap text-[11px]">
+                                {sorted.map((tier, i) => {
+                                    const savings =
+                                        tier.price < baseTier.price
+                                            ? Math.round((1 - tier.price / baseTier.price) * 100)
+                                            : 0;
+                                    const isActive = i === activeTierIndex && i > 0;
+                                    return (
+                                        <button
+                                            type="button"
+                                            key={tier.minQuantity}
+                                            onClick={() => setQuantityInput(String(tier.minQuantity))}
+                                            className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded transition-colors cursor-pointer ${
+                                                isActive
+                                                    ? 'border border-primary/50 bg-primary/10 font-medium'
+                                                    : 'border border-transparent bg-muted hover:bg-accent'
+                                            }`}
+                                        >
+                                            <span className="text-xs font-semibold text-muted-foreground">
+                                                {tier.minQuantity}+:
+                                            </span>
+                                            <Price value={tier.price} currencyCode={currencyCode} />
+                                            {savings > 0 && (
+                                                <span className="text-green-600">-{savings}%</span>
+                                            )}
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        );
+                    })()}
 
                 {/* Footer link */}
                 <Link

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { useState } from 'react';
 import { FragmentOf, readFragment } from '@/graphql';
 import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { useState } from 'react';
 import { ProductCardList } from './product-card-list';
 
 interface ProductListViewProps {

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

@@ -1,13 +1,13 @@
 'use client';
 
-import { useState } from 'react';
-import { useSearchParams } from 'next/navigation';
-import { usePathname, useRouter } from '@/i18n/navigation';
-import { useTranslations } from 'next-intl';
 import { PrefetchLink } from '@/components/shared/prefetch-link';
-import { ChevronRight, Package, Tag, Layers, Warehouse, ChevronDown, ChevronUp } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
+import { usePathname, useRouter } from '@/i18n/navigation';
 import type { ProductDetail } from '@/lib/vendure/queries';
+import { ChevronDown, ChevronRight, ChevronUp, Layers, Package, Tag, Warehouse } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { useState } from 'react';
 
 export interface ProductSidebarProps {
     collections: ProductDetail['collections'];
@@ -33,7 +33,14 @@ function isVariantSelected(
     });
 }
 
-export function ProductSidebar({ collections, variants, productName, optionGroups, searchParams, slug }: ProductSidebarProps) {
+export function ProductSidebar({
+    collections,
+    variants,
+    productName,
+    optionGroups,
+    searchParams,
+    slug,
+}: ProductSidebarProps) {
     const tCatalog = useTranslations('Catalog');
     const tProduct = useTranslations('Product');
     const pathname = usePathname();
@@ -105,13 +112,25 @@ export function ProductSidebar({ collections, variants, productName, optionGroup
                             <div className="flex items-center justify-between">
                                 <dt className="text-muted-foreground">Stock</dt>
                                 <dd className="flex items-center gap-1.5">
-                                    <Warehouse className={`h-3.5 w-3.5 ${variants[0].stockLevel === 'OUT_OF_STOCK' ? 'text-red-500' : 'text-emerald-500'}`} />
+                                    <Warehouse
+                                        className={`h-3.5 w-3.5 ${
+                                            variants[0].stockLevel === 'OUT_OF_STOCK'
+                                                ? 'text-red-500'
+                                                : 'text-emerald-500'
+                                        }`}
+                                    />
                                     {variants[0].stockLevel === 'OUT_OF_STOCK' ? (
-                                        <Badge variant="secondary" className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider">
+                                        <Badge
+                                            variant="secondary"
+                                            className="bg-red-900/80 text-red-300 border-0 text-[10px] uppercase tracking-wider"
+                                        >
                                             {tProduct('outOfStock')}
                                         </Badge>
                                     ) : (
-                                        <Badge variant="secondary" className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider">
+                                        <Badge
+                                            variant="secondary"
+                                            className="bg-emerald-900/80 text-emerald-300 border-0 text-[10px] uppercase tracking-wider"
+                                        >
                                             {tProduct('inStock')}
                                         </Badge>
                                     )}
@@ -141,8 +160,14 @@ export function ProductSidebar({ collections, variants, productName, optionGroup
                                             }`}
                                         >
                                             <span className="truncate">{v.name}</span>
-                                            <Warehouse className={`h-3.5 w-3.5 flex-shrink-0 ml-auto ${inStock ? 'text-emerald-500' : 'text-red-500'}`} />
-                                            <span className="font-mono text-muted-foreground flex-shrink-0">{v.sku}</span>
+                                            <Warehouse
+                                                className={`h-3.5 w-3.5 flex-shrink-0 ml-auto ${
+                                                    inStock ? 'text-emerald-500' : 'text-red-500'
+                                                }`}
+                                            />
+                                            <span className="font-mono text-muted-foreground flex-shrink-0">
+                                                {v.sku}
+                                            </span>
                                         </button>
                                     );
                                 })}

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

@@ -1,13 +1,13 @@
 'use client';
 
-import { useState, useCallback, type ReactNode } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { FragmentOf, readFragment } from '@/graphql';
 import { usePathname, useRouter } from '@/i18n/navigation';
-import { useTranslations } from 'next-intl';
-import { LayoutGrid, List } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { FragmentOf, readFragment } from '@/graphql';
 import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { LayoutGrid, List } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { useCallback, useState, type ReactNode } from 'react';
 import { ProductCard } from './product-card';
 import { ProductListView } from './product-list-view';
 
@@ -31,31 +31,39 @@ interface ProductViewSwitcherProps {
     children?: ReactNode;
 }
 
-export function ProductViewSwitcher({ products, totalItems, urlView, currentPage, take, children }: ProductViewSwitcherProps) {
+export function ProductViewSwitcher({
+    products,
+    totalItems,
+    urlView,
+    currentPage,
+    take,
+    children,
+}: ProductViewSwitcherProps) {
     const t = useTranslations('Product');
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const router = useRouter();
     const [view, setViewState] = useState<'grid' | 'list'>(() => getInitialView(urlView));
 
-    const setView = useCallback((newView: 'grid' | 'list') => {
-        setViewState(newView);
-        localStorage.setItem(STORAGE_KEY, newView);
-        const params = new URLSearchParams(searchParams);
-        if (newView === 'grid') {
-            params.delete('view');
-        } else {
-            params.set('view', newView);
-        }
-        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
-    }, [pathname, searchParams, router]);
+    const setView = useCallback(
+        (newView: 'grid' | 'list') => {
+            setViewState(newView);
+            localStorage.setItem(STORAGE_KEY, newView);
+            const params = new URLSearchParams(searchParams);
+            if (newView === 'grid') {
+                params.delete('view');
+            } else {
+                params.set('view', newView);
+            }
+            router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+        },
+        [pathname, searchParams, router],
+    );
 
     return (
         <>
             <div className="flex items-center justify-between">
-                <p className="text-sm text-muted-foreground">
-                    {t('productCount', {count: totalItems})}
-                </p>
+                <p className="text-sm text-muted-foreground">{t('productCount', { count: totalItems })}</p>
                 <div className="flex items-center gap-2">
                     <div className="flex items-center border border-border rounded-md">
                         <button
@@ -95,7 +103,11 @@ export function ProductViewSwitcher({ products, totalItems, urlView, currentPage
                         const { productId } = readFragment(ProductCardFragment, product);
                         const position = currentPage && take ? (currentPage - 1) * take + i + 1 : undefined;
                         return (
-                            <div key={productId} data-search-product-id={productId} data-search-position={position}>
+                            <div
+                                key={productId}
+                                data-search-product-id={productId}
+                                data-search-position={position}
+                            >
                                 <ProductCard product={product} />
                             </div>
                         );