@vendure-platform/create 0.1.0

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

@@ -0,0 +1,393 @@
+'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 { Price } from '@/components/commerce/price';
+import type { PriceTier } from '@/components/commerce/price-tiers';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { getProductBySlug, addToCart } from '@/app/[locale]/(catalog)/product/[slug]/actions';
+import { MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput } from '@/lib/quantity';
+import { toast } from 'sonner';
+import { useCartCount } from '@/lib/cart-count-context';
+
+interface ProductListExpansionProps {
+    slug: string;
+    productName: string;
+    currencyCode?: string;
+}
+
+type ProductDetail = NonNullable<Awaited<ReturnType<typeof getProductBySlug>>>;
+
+// In-memory prefetch cache for product details
+const productCache = new Map<string, ProductDetail>();
+const inflight = new Map<string, Promise<ProductDetail | null>>();
+
+export function prefetchProduct(slug: string) {
+    if (productCache.has(slug) || inflight.has(slug)) return;
+    const promise = getProductBySlug(slug).then((data) => {
+        if (data) productCache.set(slug, data);
+        inflight.delete(slug);
+        return data;
+    });
+    inflight.set(slug, promise);
+}
+
+function getStockDisplay(stockLevel: string, t: ReturnType<typeof useTranslations<'Product'>>) {
+    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' };
+    }
+    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' };
+    }
+}
+
+function ExpansionSkeleton() {
+    return (
+        <div className="flex gap-4 p-3">
+            <Skeleton className="h-[100px] w-[100px] rounded-md flex-shrink-0" />
+            <div className="flex-1 space-y-2">
+                <Skeleton className="h-6 w-full" />
+                <Skeleton className="h-6 w-full" />
+                <Skeleton className="h-8 w-32 mt-2" />
+                <Skeleton className="h-3 w-24" />
+            </div>
+        </div>
+    );
+}
+
+export function ProductListExpansion({ slug, productName, currencyCode }: ProductListExpansionProps) {
+    const t = useTranslations('Product');
+    const tCart = useTranslations('Cart');
+    const [product, setProduct] = useState<ProductDetail | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
+    const [selectedPackagingUnitId, setSelectedPackagingUnitId] = useState<string | undefined>(undefined);
+    const [quantityInput, setQuantityInput] = useState('1');
+    const [isPending, startTransition] = useTransition();
+    const [isAdded, setIsAdded] = useState(false);
+    const {setCount} = useCartCount();
+
+    useEffect(() => {
+        let cancelled = false;
+
+        const applyData = (data: ProductDetail) => {
+            if (cancelled) return;
+            setProduct(data);
+            const firstInStock = data.variants.find((v) => v.stockLevel !== 'OUT_OF_STOCK') ?? data.variants[0];
+            if (firstInStock) {
+                setSelectedVariantId(firstInStock.id);
+            }
+            setLoading(false);
+        };
+
+        const cached = productCache.get(slug);
+        if (cached) {
+            applyData(cached);
+            return;
+        }
+
+        setLoading(true);
+        const pending = inflight.get(slug);
+        const promise = pending ?? getProductBySlug(slug);
+        promise.then((data) => {
+            if (data) {
+                productCache.set(slug, data);
+                applyData(data);
+            } else {
+                if (!cancelled) setLoading(false);
+            }
+        });
+        return () => { cancelled = true; };
+    }, [slug]);
+
+    const selectedVariant = useMemo(
+        () => product?.variants.find((v) => v.id === selectedVariantId) ?? null,
+        [product, selectedVariantId],
+    );
+
+    const packagingUnits = selectedVariant?.packagingUnits ?? [];
+    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];
+            setSelectedPackagingUnitId(base.packagingUnit.id);
+            setQuantityInput(String(base.minQuantity));
+        } else {
+            setSelectedPackagingUnitId(undefined);
+        }
+    }, [selectedVariantId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const effectiveMinQuantity = selectedPU?.minQuantity ?? MIN_ORDER_QUANTITY;
+    const effectiveIncrement = selectedPU?.quantityIncrement ?? 1;
+
+    const stockDisplay = useMemo(
+        () => selectedVariant ? getStockDisplay(selectedVariant.stockLevel, t) : null,
+        [selectedVariant, t],
+    );
+
+    const quantity = normalizeQuantity(quantityInput, effectiveMinQuantity);
+    const isInStock = selectedVariant && selectedVariant.stockLevel !== 'OUT_OF_STOCK';
+
+    const stepQuantity = (delta: number) => {
+        const step = delta > 0 ? effectiveIncrement : -effectiveIncrement;
+        setQuantityInput(String(Math.max(effectiveMinQuantity, quantity + step)));
+    };
+
+    const handleAddToCart = () => {
+        if (!selectedVariant || !isInStock) return;
+        const qty = normalizeQuantity(quantityInput, effectiveMinQuantity);
+        setQuantityInput(String(qty));
+
+        startTransition(async () => {
+            const packagingUnitId = selectedPU?.packagingUnit.id;
+            const result = await addToCart(selectedVariant.id, qty, packagingUnitId);
+            if (result.success && result.order) {
+                setCount(result.order.lines.length);
+                setIsAdded(true);
+                const unitLabel = selectedPU ? ` (${selectedPU.packagingUnit.name})` : '';
+                toast.success(t('addedToCartMessage'), {
+                    description: t('addedToCartDescriptionWithQty', {qty, name: `${productName}${unitLabel}`}),
+                });
+                setTimeout(() => setIsAdded(false), 2000);
+            } else {
+                toast.error(t('errorTitle'), {
+                    description: result.error || t('errorAddToCart'),
+                });
+            }
+        });
+    };
+
+    if (loading) {
+        return <ExpansionSkeleton />;
+    }
+
+    if (!product || product.variants.length === 0) {
+        return (
+            <div className="p-4 text-sm text-muted-foreground">
+                {t('productDetailsUnavailable')}
+            </div>
+        );
+    }
+
+    const imageUrl = product.assets?.[0]?.preview;
+
+    return (
+        <div className="flex gap-6 p-4 bg-muted/30 border-t border-border">
+            {/* Left: Product image */}
+            <div className="hidden sm:block flex-shrink-0">
+                <div className="relative h-[150px] w-[150px] rounded-md overflow-hidden bg-muted">
+                    {imageUrl ? (
+                        <Image
+                            src={imageUrl}
+                            alt={product.name}
+                            fill
+                            className="object-cover"
+                            sizes="150px"
+                        />
+                    ) : (
+                        <div className="w-full h-full flex items-center justify-center text-muted-foreground text-xs">
+                            {t('noImage')}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Right: Variants + buy controls */}
+            <div className="flex-1 min-w-0 space-y-3">
+                {/* Variant table */}
+                <div className="space-y-0.5 max-h-48 overflow-y-auto">
+                    {product.variants.map((variant) => {
+                        const selected = variant.id === selectedVariantId;
+                        const inStock = variant.stockLevel !== 'OUT_OF_STOCK';
+                        return (
+                            <button
+                                key={variant.id}
+                                type="button"
+                                onClick={() => setSelectedVariantId(variant.id)}
+                                className={`w-full flex items-center gap-3 py-1.5 px-2 rounded-md text-xs transition-colors cursor-pointer ${
+                                    selected
+                                        ? 'bg-primary/10 text-primary font-medium'
+                                        : 'hover:bg-muted text-foreground'
+                                }`}
+                            >
+                                <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>
+                                <span className="font-medium flex-shrink-0 whitespace-nowrap">
+                                    <Price value={Math.round(variant.price * (selectedPU?.conversionFactor ?? 1))} currencyCode={currencyCode} />
+                                </span>
+                            </button>
+                        );
+                    })}
+                </div>
+
+                {/* Buy controls */}
+                {selectedVariant && (
+                    <div className="flex items-center gap-3 flex-wrap">
+                        {/* Quantity input */}
+                        <div className="flex items-center gap-1 border rounded-md p-0.5">
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                aria-label={tCart('decreaseQuantity')}
+                                className="h-7 w-7"
+                                disabled={isPending || quantity <= effectiveMinQuantity}
+                                onClick={() => stepQuantity(-1)}
+                            >
+                                <Minus className="h-3 w-3" />
+                            </Button>
+                            <Input
+                                aria-label={tCart('quantity')}
+                                inputMode="numeric"
+                                pattern="[0-9]*"
+                                value={quantityInput}
+                                onChange={(e) => setQuantityInput(sanitizeQuantityInput(e.target.value))}
+                                onBlur={() => setQuantityInput(String(quantity))}
+                                className="h-7 w-10 border-0 text-center text-xs shadow-none focus-visible:ring-0 p-0"
+                            />
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                aria-label={tCart('increaseQuantity')}
+                                className="h-7 w-7"
+                                disabled={isPending}
+                                onClick={() => stepQuantity(1)}
+                            >
+                                <Plus className="h-3 w-3" />
+                            </Button>
+                        </div>
+
+                        {/* Packaging unit dropdown */}
+                        {packagingUnits.length > 0 && (
+                            <Select
+                                value={selectedPackagingUnitId}
+                                onValueChange={(id) => {
+                                    setSelectedPackagingUnitId(id);
+                                    const pu = packagingUnits.find(p => p.packagingUnit.id === id);
+                                    if (pu) setQuantityInput(String(pu.minQuantity));
+                                }}
+                            >
+                                <SelectTrigger className="h-8 w-auto min-w-[120px] text-xs">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {packagingUnits.map(pu => (
+                                        <SelectItem
+                                            key={pu.packagingUnit.id}
+                                            value={pu.packagingUnit.id}
+                                            disabled={pu.effectiveStockLevel !== null && pu.effectiveStockLevel <= 0}
+                                        >
+                                            {pu.conversionFactor === 1
+                                                ? pu.packagingUnit.name
+                                                : t('packagingUnitWithConversion', {name: pu.packagingUnit.name, conversion: pu.conversionFactor})}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+
+                        {/* 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})}
+                            </span>
+                        )}
+
+                        {/* Stock display */}
+                        {stockDisplay && (
+                            <span className={`text-xs font-medium ${stockDisplay.className}`}>
+                                {stockDisplay.text}
+                            </span>
+                        )}
+
+                        {/* Add to cart */}
+                        <Button
+                            size="sm"
+                            disabled={!isInStock || isPending}
+                            onClick={handleAddToCart}
+                            className="h-8"
+                        >
+                            {isAdded ? (
+                                <>
+                                    <CheckCircle2 className="mr-1.5 h-3.5 w-3.5" />
+                                    {t('added')}
+                                </>
+                            ) : (
+                                <>
+                                    <ShoppingCart className="mr-1.5 h-3.5 w-3.5" />
+                                    {isPending ? t('adding') : !isInStock ? t('outOfStock') : t('addToCart')}
+                                </>
+                            )}
+                        </Button>
+                    </div>
+                )}
+
+                {/* 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>
+                    );
+                })()}
+
+                {/* Footer link */}
+                <Link
+                    href={`/product/${slug}`}
+                    className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                >
+                    {t('viewFullDetails')}
+                    <ArrowRight className="h-3 w-3" />
+                </Link>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,34 @@
+'use client';
+
+import { useState } from 'react';
+import { FragmentOf, readFragment } from '@/graphql';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { ProductCardList } from './product-card-list';
+
+interface ProductListViewProps {
+    products: FragmentOf<typeof ProductCardFragment>[];
+    currentPage?: number;
+    take?: number;
+}
+
+export function ProductListView({ products, currentPage, take }: ProductListViewProps) {
+    const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+
+    return (
+        <div className="flex flex-col gap-2">
+            {products.map((product, i) => {
+                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}>
+                        <ProductCardList
+                            product={product}
+                            isExpanded={expandedIndex === i}
+                            onToggle={() => setExpandedIndex(expandedIndex === i ? null : i)}
+                        />
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

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

@@ -0,0 +1,175 @@
+'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 type { ProductDetail } from '@/lib/vendure/queries';
+
+export interface ProductSidebarProps {
+    collections: ProductDetail['collections'];
+    variants: ProductDetail['variants'];
+    productName: string;
+    optionGroups: ProductDetail['optionGroups'];
+    searchParams: { [key: string]: string | string[] | undefined };
+    slug: string;
+}
+
+const MAX_VISIBLE_VARIANTS = 8;
+
+function isVariantSelected(
+    variant: ProductDetail['variants'][number],
+    optionGroups: ProductDetail['optionGroups'],
+    searchParams: { [key: string]: string | string[] | undefined },
+) {
+    if (optionGroups.length === 0) return false;
+
+    return variant.options.every((opt) => {
+        const paramValue = searchParams[opt.group.code];
+        return paramValue === opt.code;
+    });
+}
+
+export function ProductSidebar({ collections, variants, productName, optionGroups, searchParams, slug }: ProductSidebarProps) {
+    const tCatalog = useTranslations('Catalog');
+    const tProduct = useTranslations('Product');
+    const pathname = usePathname();
+    const router = useRouter();
+    const currentSearchParams = useSearchParams();
+    const [showAll, setShowAll] = useState(false);
+
+    const liveParams: Record<string, string> = {};
+    currentSearchParams.forEach((value, key) => {
+        liveParams[key] = value;
+    });
+    const leafCollections = collections.filter((c) => c.parent?.id);
+
+    const handleVariantClick = (variant: ProductDetail['variants'][number]) => {
+        const params = new URLSearchParams();
+        variant.options.forEach((opt) => {
+            params.set(opt.group.code, opt.code);
+        });
+        router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    };
+
+    // Sort variants: in-stock first, then out-of-stock
+    const sortedVariants = [...variants].sort((a, b) => {
+        const aInStock = a.stockLevel !== 'OUT_OF_STOCK' ? 0 : 1;
+        const bInStock = b.stockLevel !== 'OUT_OF_STOCK' ? 0 : 1;
+        return aInStock - bInStock;
+    });
+
+    const visibleVariants = showAll ? sortedVariants : sortedVariants.slice(0, MAX_VISIBLE_VARIANTS);
+    const hasMore = sortedVariants.length > MAX_VISIBLE_VARIANTS;
+
+    return (
+        <div className="hidden lg:block sticky top-20 space-y-6">
+            {/* Collection navigation */}
+            {leafCollections.length > 0 && (
+                <div>
+                    <h3 className="font-semibold text-sm mb-3 flex items-center gap-2">
+                        <Layers className="h-4 w-4 text-muted-foreground" />
+                        {tCatalog('categories')}
+                    </h3>
+                    <div className="space-y-1">
+                        {leafCollections.map((collection) => (
+                            <PrefetchLink
+                                key={collection.id}
+                                href={`/collection/${collection.slug}`}
+                                className="flex items-center justify-between py-1.5 px-2 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                            >
+                                <span>{collection.name}</span>
+                                <ChevronRight className="h-3 w-3" />
+                            </PrefetchLink>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {/* Product specs */}
+            <div>
+                <h3 className="font-semibold text-sm mb-3 flex items-center gap-2">
+                    <Package className="h-4 w-4 text-muted-foreground" />
+                    Specifications
+                </h3>
+                <dl className="space-y-2 text-sm">
+                    {variants.length === 1 && (
+                        <>
+                            <div className="flex items-center justify-between">
+                                <dt className="text-muted-foreground">SKU</dt>
+                                <dd className="font-mono text-xs">{variants[0].sku}</dd>
+                            </div>
+                            <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'}`} />
+                                    {variants[0].stockLevel === 'OUT_OF_STOCK' ? (
+                                        <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">
+                                            {tProduct('inStock')}
+                                        </Badge>
+                                    )}
+                                </dd>
+                            </div>
+                        </>
+                    )}
+                    {variants.length > 1 && (
+                        <div>
+                            <dt className="text-muted-foreground flex items-center gap-1 mb-2">
+                                <Tag className="h-3 w-3" />
+                                {variants.length} variants
+                            </dt>
+                            <dd className="space-y-0.5">
+                                {visibleVariants.map((v) => {
+                                    const selected = isVariantSelected(v, optionGroups, liveParams);
+                                    const inStock = v.stockLevel !== 'OUT_OF_STOCK';
+                                    return (
+                                        <button
+                                            key={v.id}
+                                            type="button"
+                                            onClick={() => handleVariantClick(v)}
+                                            className={`w-full flex items-center gap-2 py-1.5 px-2 rounded-md text-xs transition-colors cursor-pointer ${
+                                                selected
+                                                    ? 'bg-primary/10 text-primary font-medium'
+                                                    : 'hover:bg-muted text-foreground'
+                                            }`}
+                                        >
+                                            <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>
+                                        </button>
+                                    );
+                                })}
+                                {hasMore && (
+                                    <button
+                                        type="button"
+                                        onClick={() => setShowAll(!showAll)}
+                                        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors pt-1 cursor-pointer"
+                                    >
+                                        {showAll ? (
+                                            <>
+                                                <ChevronUp className="h-3 w-3" />
+                                                Show fewer
+                                            </>
+                                        ) : (
+                                            <>
+                                                <ChevronDown className="h-3 w-3" />
+                                                Show all {variants.length} variants
+                                            </>
+                                        )}
+                                    </button>
+                                )}
+                            </dd>
+                        </div>
+                    )}
+                </dl>
+            </div>
+        </div>
+    );
+}