@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/instant-search-dropdown.tsx

@@ -0,0 +1,377 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback, useTransition } from 'react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useRouter } from '@/i18n/navigation';
+import { Search, Clock, ArrowRight, Package, FolderOpen, X } from 'lucide-react';
+import Image from 'next/image';
+import { instantSearch, type InstantSearchResult } from '@/lib/vendure/instant-search-action';
+import { useRecentSearches } from '@/lib/use-recent-searches';
+import { formatPrice } from '@/lib/format';
+
+interface InstantSearchDropdownProps {
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    searchValue: string;
+    onSearchValueChange: (value: string) => void;
+    onSubmit: (term: string) => void;
+    children: React.ReactNode;
+    dropdownClassName?: string;
+}
+
+export function InstantSearchDropdown({
+    inputRef,
+    searchValue,
+    onSearchValueChange,
+    onSubmit,
+    children,
+    dropdownClassName = '',
+}: InstantSearchDropdownProps) {
+    const router = useRouter();
+    const locale = useLocale();
+    const tProduct = useTranslations('Product');
+    const tCatalog = useTranslations('Catalog');
+    const [isOpen, setIsOpen] = useState(false);
+    const [results, setResults] = useState<InstantSearchResult | null>(null);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const [isPending, startTransition] = useTransition();
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const { searches: recentSearches, addSearch, removeSearch } = useRecentSearches();
+
+    const collections = results?.collections ?? [];
+
+    // Build flat list of navigable items for keyboard nav (products first, then collections)
+    const items = buildItemList(searchValue, results, collections, recentSearches);
+
+    // Debounced search
+    useEffect(() => {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+
+        if (!searchValue.trim() || searchValue.trim().length < 2) {
+            setResults(null);
+            setActiveIndex(-1);
+            return;
+        }
+
+        debounceRef.current = setTimeout(() => {
+            startTransition(async () => {
+                const data = await instantSearch(searchValue);
+                setResults(data);
+                setActiveIndex(-1);
+            });
+        }, 250);
+
+        return () => {
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+        };
+    }, [searchValue]);
+
+    // Close on outside click
+    useEffect(() => {
+        function handleClick(e: MouseEvent) {
+            if (
+                dropdownRef.current &&
+                !dropdownRef.current.contains(e.target as Node) &&
+                inputRef.current &&
+                !inputRef.current.contains(e.target as Node)
+            ) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [inputRef]);
+
+    const handleFocus = useCallback(() => setIsOpen(true), []);
+
+    const navigateToItem = useCallback((item: NavItem) => {
+        setIsOpen(false);
+        if (item.type === 'product') {
+            addSearch(searchValue.trim());
+            router.push(`/product/${item.slug}`);
+        } else if (item.type === 'collection') {
+            addSearch(searchValue.trim());
+            router.push(`/collection/${item.slug}`);
+        } else if (item.type === 'recent') {
+            onSearchValueChange(item.term);
+            onSubmit(item.term);
+        } else if (item.type === 'view-all') {
+            addSearch(searchValue.trim());
+            onSubmit(searchValue.trim());
+        }
+    }, [router, searchValue, addSearch, onSearchValueChange, onSubmit]);
+
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (!isOpen) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                setIsOpen(true);
+                e.preventDefault();
+            }
+            return;
+        }
+
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setActiveIndex(prev => (prev + 1) % items.length);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setActiveIndex(prev => (prev <= 0 ? items.length - 1 : prev - 1));
+                break;
+            case 'Enter':
+                if (activeIndex >= 0 && activeIndex < items.length) {
+                    e.preventDefault();
+                    navigateToItem(items[activeIndex]);
+                } else if (searchValue.trim()) {
+                    e.preventDefault();
+                    const firstProduct = items.find(item => item.type === 'product');
+                    if (firstProduct) {
+                        addSearch(searchValue.trim());
+                        navigateToItem(firstProduct);
+                    } else {
+                        addSearch(searchValue.trim());
+                        onSubmit(searchValue.trim());
+                        setIsOpen(false);
+                    }
+                }
+                break;
+            case 'Escape':
+                setIsOpen(false);
+                setActiveIndex(-1);
+                break;
+        }
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
+    }, [isOpen, activeIndex, items, searchValue, navigateToItem, addSearch, onSubmit]);
+
+    const showDropdown = isOpen && (
+        (searchValue.trim().length >= 2 && (results || isPending)) ||
+        (!searchValue.trim() && recentSearches.length > 0)
+    );
+
+    return (
+        <div
+            onFocus={handleFocus}
+            onKeyDown={handleKeyDown}
+            className="relative"
+        >
+            {children}
+            {showDropdown && (
+                    <div
+                        ref={dropdownRef}
+                        className={`absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-lg z-50 overflow-hidden ${dropdownClassName}`}
+                        role="listbox"
+                    >
+                        {/* Recent searches (when input is empty) */}
+                        {!searchValue.trim() && recentSearches.length > 0 && (
+                            <div>
+                                <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    Recent Searches
+                                </div>
+                                {recentSearches.map((term, i) => (
+                                    <div
+                                        key={term}
+                                        role="option"
+                                        aria-selected={activeIndex === i}
+                                        className={`flex items-center gap-2 px-3 py-2 cursor-pointer text-sm ${
+                                            activeIndex === i ? 'bg-primary/15' : 'hover:bg-accent/50'
+                                        }`}
+                                        onMouseEnter={() => setActiveIndex(i)}
+                                        onClick={() => navigateToItem(items[i])}
+                                    >
+                                        <Clock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                        <span className={`flex-1 truncate ${activeIndex === i ? 'text-primary' : ''}`}>{term}</span>
+                                        <button
+                                            type="button"
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                removeSearch(term);
+                                            }}
+                                            className="p-0.5 hover:bg-muted rounded"
+                                        >
+                                            <X className="h-3 w-3 text-muted-foreground" />
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+
+                        {/* Loading state */}
+                        {searchValue.trim().length >= 2 && isPending && !results && (
+                            <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+                                Searching...
+                            </div>
+                        )}
+
+                        {/* Results */}
+                        {searchValue.trim().length >= 2 && results && (
+                            <>
+                                {/* Product results (shown first) */}
+                                {results.products.length > 0 && (
+                                    <div>
+                                        <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                            Products
+                                        </div>
+                                        {results.products.map((product, i) => {
+                                            const itemIndex = i;
+                                            return (
+                                                <div
+                                                    key={product.productId}
+                                                    role="option"
+                                                    aria-selected={activeIndex === itemIndex}
+                                                    className={`flex items-center gap-3 px-3 py-2 cursor-pointer ${
+                                                        activeIndex === itemIndex ? 'bg-primary/15' : 'hover:bg-accent/50'
+                                                    }`}
+                                                    onMouseEnter={() => setActiveIndex(itemIndex)}
+                                                    onClick={() => navigateToItem(items[itemIndex])}
+                                                >
+                                                    {product.imageUrl ? (
+                                                        <Image
+                                                            src={`${product.imageUrl}?w=80&h=80&mode=crop`}
+                                                            alt={product.productName}
+                                                            width={40}
+                                                            height={40}
+                                                            className="rounded object-cover flex-shrink-0"
+                                                        />
+                                                    ) : (
+                                                        <div className="w-10 h-10 rounded bg-muted flex items-center justify-center flex-shrink-0">
+                                                            <Package className="h-4 w-4 text-muted-foreground" />
+                                                        </div>
+                                                    )}
+                                                    <div className="flex-1 min-w-0">
+                                                        <div className={`text-sm font-medium truncate ${activeIndex === itemIndex ? 'text-primary' : ''}`}>
+                                                            {product.productName}
+                                                        </div>
+                                                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                                            <span className="font-mono">{product.sku}</span>
+                                                            <span>&#183;</span>
+                                                            <span>{formatProductPrice(product, locale)}</span>
+                                                        </div>
+                                                    </div>
+                                                    {product.inStock ? (
+                                                        <span className="text-xs text-green-500 flex-shrink-0">{tProduct('inStock')}</span>
+                                                    ) : (
+                                                        <span className="text-xs text-red-500 flex-shrink-0">{tProduct('outOfStock')}</span>
+                                                    )}
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+
+                                {/* Collection suggestions */}
+                                {collections.length > 0 && (
+                                    <div>
+                                        {results.products.length > 0 && (
+                                            <div className="border-t border-border" />
+                                        )}
+                                        <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                            {tCatalog('categories')}
+                                        </div>
+                                        {collections.map((collection, i) => {
+                                            const itemIndex = results.products.length + i;
+                                            return (
+                                                <div
+                                                    key={collection.id}
+                                                    role="option"
+                                                    aria-selected={activeIndex === itemIndex}
+                                                    className={`flex items-center gap-2 px-3 py-2 cursor-pointer text-sm ${
+                                                        activeIndex === itemIndex ? 'bg-primary/15' : 'hover:bg-accent/50'
+                                                    }`}
+                                                    onMouseEnter={() => setActiveIndex(itemIndex)}
+                                                    onClick={() => navigateToItem(items[itemIndex])}
+                                                >
+                                                    <FolderOpen className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                    <span className={`flex-1 truncate ${activeIndex === itemIndex ? 'text-primary font-medium' : ''}`}>{collection.name}</span>
+                                                    <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+
+                                {/* No results */}
+                                {results.products.length === 0 && collections.length === 0 && (
+                                    <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+                                        No results for &ldquo;{searchValue.trim()}&rdquo;
+                                    </div>
+                                )}
+
+                                {/* View all results footer */}
+                                {results.totalItems > 0 && (
+                                    <>
+                                        <div className="border-t border-border" />
+                                        {(() => {
+                                            const viewAllIndex = items.length - 1;
+                                            return (
+                                                <div
+                                                    role="option"
+                                                    aria-selected={activeIndex === viewAllIndex}
+                                                    className={`flex items-center justify-center gap-2 px-3 py-2.5 cursor-pointer text-sm font-medium ${
+                                                        activeIndex === viewAllIndex
+                                                            ? 'bg-primary text-primary-foreground'
+                                                            : 'text-primary hover:bg-accent/50'
+                                                    }`}
+                                                    onMouseEnter={() => setActiveIndex(viewAllIndex)}
+                                                    onClick={() => navigateToItem(items[viewAllIndex])}
+                                                >
+                                                    <Search className="h-3.5 w-3.5" />
+                                                    View all {results.totalItems} results
+                                                </div>
+                                            );
+                                        })()}
+                                    </>
+                                )}
+                            </>
+                        )}
+                    </div>
+            )}
+        </div>
+    );
+}
+
+// ── Types and helpers for keyboard navigation ────────────────────────
+
+type NavItem =
+    | { type: 'recent'; term: string }
+    | { type: 'collection'; slug: string }
+    | { type: 'product'; slug: string }
+    | { type: 'view-all' };
+
+function buildItemList(
+    searchValue: string,
+    results: InstantSearchResult | null,
+    collections: InstantSearchResult['collections'],
+    recentSearches: string[],
+): NavItem[] {
+    // Empty input → show recent searches
+    if (!searchValue.trim()) {
+        return recentSearches.map(term => ({ type: 'recent', term }));
+    }
+
+    if (!results) return [];
+
+    // Products first, then matching collections, then view-all
+    const items: NavItem[] = [];
+    for (const p of results.products) {
+        items.push({ type: 'product', slug: p.slug });
+    }
+    for (const c of collections) {
+        items.push({ type: 'collection', slug: c.slug });
+    }
+    if (results.totalItems > 0) {
+        items.push({ type: 'view-all' });
+    }
+    return items;
+}
+
+function formatProductPrice(product: { price: { type: string; value?: number; min?: number; max?: number } }, locale: string): string {
+    if (product.price.type === 'single' && product.price.value != null) {
+        return formatPrice(product.price.value, locale);
+    }
+    if (product.price.type === 'range' && product.price.min != null) {
+        return `from ${formatPrice(product.price.min, locale)}`;
+    }
+    return '';
+}

package/dist/assets/storefront/src/components/commerce/order-status-badge.tsx

@@ -0,0 +1,41 @@
+import {Badge} from '@/components/ui/badge';
+import {
+    ShoppingCart,
+    CreditCard,
+    Clock,
+    CheckCircle,
+    Truck,
+    PackageCheck,
+    Package,
+    XCircle,
+    type LucideIcon,
+} from 'lucide-react';
+
+const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
+    AddingItems: {color: 'bg-gray-100 text-gray-800', label: 'Adding Items', icon: ShoppingCart},
+    ArrangingPayment: {color: 'bg-yellow-100 text-yellow-800', label: 'Arranging Payment', icon: CreditCard},
+    PaymentAuthorized: {color: 'bg-blue-100 text-blue-800', label: 'Payment Authorized', icon: Clock},
+    PaymentSettled: {color: 'bg-green-100 text-green-800', label: 'Payment Settled', icon: CheckCircle},
+    PartiallyShipped: {color: 'bg-indigo-100 text-indigo-800', label: 'Partially Shipped', icon: Package},
+    Shipped: {color: 'bg-purple-100 text-purple-800', label: 'Shipped', icon: Truck},
+    PartiallyDelivered: {color: 'bg-cyan-100 text-cyan-800', label: 'Partially Delivered', icon: PackageCheck},
+    Delivered: {color: 'bg-emerald-100 text-emerald-800', label: 'Delivered', icon: PackageCheck},
+    Cancelled: {color: 'bg-red-100 text-red-800', label: 'Cancelled', icon: XCircle},
+    AwaitingApproval: {color: 'bg-amber-100 text-amber-800', label: 'Awaiting Approval', icon: Clock},
+};
+
+interface OrderStatusBadgeProps {
+    state: string;
+}
+
+export function OrderStatusBadge({state}: OrderStatusBadgeProps) {
+    const config = STATUS_CONFIG[state] || {color: 'bg-gray-100 text-gray-800', label: state, icon: Clock};
+    const Icon = config.icon;
+
+    return (
+        <Badge className={config.color} variant="secondary">
+            <Icon className="h-3 w-3 mr-1"/>
+            {config.label}
+        </Badge>
+    );
+}

package/dist/assets/storefront/src/components/commerce/packaging-unit-selector.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { Label } from '@/components/ui/label';
+import { Price } from '@/components/commerce/price';
+import { Badge } from '@/components/ui/badge';
+import { Package } from 'lucide-react';
+import type { PriceTier } from '@/components/commerce/price-tiers';
+import type { PackagingUnitOption } from '@/lib/vendure/queries';
+
+interface PackagingUnitSelectorProps {
+    packagingUnits: PackagingUnitOption[];
+    selectedId: string | undefined;
+    onSelect: (unit: PackagingUnitOption) => void;
+    /** The base variant price (excl. tax) for computing derived prices */
+    baseVariantPrice: number;
+    currencyCode?: string;
+    /** Price tiers from volume pricing — used to show tier-adjusted package prices */
+    priceTiers?: PriceTier[];
+}
+
+/**
+ * Returns the per-piece price for the given effective base-unit quantity.
+ * Falls back to basePrice if no tier matches.
+ */
+function getTierAdjustedPiecePrice(basePrice: number, tiers: PriceTier[] | undefined, effectivePieces: number): number {
+    if (!tiers || tiers.length === 0) return basePrice;
+    let price = basePrice;
+    for (const tier of tiers) {
+        if (tier.minQuantity != null && effectivePieces >= tier.minQuantity) {
+            price = tier.price;
+        }
+    }
+    return price;
+}
+
+export function PackagingUnitSelector({
+    packagingUnits,
+    selectedId,
+    onSelect,
+    baseVariantPrice,
+    currencyCode,
+    priceTiers,
+}: PackagingUnitSelectorProps) {
+    if (packagingUnits.length === 0) return null;
+
+    const sortedTiers = priceTiers
+        ? [...priceTiers].filter(t => t.minQuantity != null).sort((a, b) => a.minQuantity! - b.minQuantity!)
+        : undefined;
+
+    return (
+        <div className="space-y-2">
+            <Label className="text-sm font-medium flex items-center gap-1.5">
+                <Package className="h-4 w-4" />
+                Packaging Unit
+            </Label>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                {packagingUnits.map((pu) => {
+                    const isSelected = selectedId === pu.packagingUnit.id;
+
+                    // Effective pieces at minQuantity: e.g. 1 box × 50 = 50 pieces
+                    const effectivePieces = pu.minQuantity * pu.conversionFactor;
+                    const perPiecePrice = getTierAdjustedPiecePrice(baseVariantPrice, sortedTiers, effectivePieces);
+                    const displayPrice = Math.round(perPiecePrice * pu.conversionFactor);
+
+                    const stockLevel = pu.effectiveStockLevel;
+                    const isOutOfStock = stockLevel !== null && stockLevel <= 0;
+
+                    return (
+                        <button
+                            key={pu.id}
+                            type="button"
+                            disabled={isOutOfStock}
+                            onClick={() => onSelect(pu)}
+                            className={`relative flex flex-col items-start gap-1 rounded-md border-2 p-3 text-left text-sm transition-colors ${
+                                isSelected
+                                    ? 'border-primary bg-primary/5'
+                                    : isOutOfStock
+                                      ? 'border-muted opacity-50 cursor-not-allowed'
+                                      : 'border-muted bg-popover hover:bg-accent hover:text-accent-foreground cursor-pointer'
+                            }`}
+                        >
+                            <div className="flex items-center gap-2 w-full">
+                                <span className="font-medium">
+                                    {pu.conversionFactor === 1
+                                        ? pu.packagingUnit.name
+                                        : `${pu.packagingUnit.name} (${pu.conversionFactor} pcs)`}
+                                </span>
+                                {pu.isBaseUnit && (
+                                    <Badge
+                                        variant="secondary"
+                                        className="text-[10px] px-1.5 py-0"
+                                    >
+                                        Base
+                                    </Badge>
+                                )}
+                            </div>
+
+                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                <span className="font-medium text-foreground">
+                                    <Price
+                                        value={displayPrice}
+                                        currencyCode={currencyCode}
+                                    />
+                                </span>
+                                {pu.conversionFactor > 1 && (
+                                    <>
+                                        <span>·</span>
+                                        <span>
+                                            <Price value={perPiecePrice} currencyCode={currencyCode} />/pc
+                                        </span>
+                                    </>
+                                )}
+                            </div>
+
+                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                {stockLevel !== null && (
+                                    <span
+                                        className={
+                                            isOutOfStock
+                                                ? 'text-red-600'
+                                                : stockLevel < 10
+                                                  ? 'text-amber-600'
+                                                  : 'text-emerald-600'
+                                        }
+                                    >
+                                        {isOutOfStock
+                                            ? 'Out of stock'
+                                            : `${stockLevel} available`}
+                                    </span>
+                                )}
+                                {pu.minQuantity > 1 && (
+                                    <>
+                                        {stockLevel !== null && (
+                                            <span>·</span>
+                                        )}
+                                        <span>Min. {pu.minQuantity}</span>
+                                    </>
+                                )}
+                            </div>
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/permission-gate.tsx

@@ -0,0 +1,20 @@
+import type {ReactNode} from 'react';
+import {getCompanyAccount} from '@/lib/vendure/actions';
+
+interface PermissionGateProps {
+    permission: string | string[];
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+
+export async function PermissionGate({permission, children, fallback = null}: PermissionGateProps) {
+    const companyAccount = await getCompanyAccount();
+
+    if (!companyAccount) return fallback;
+
+    const permissions = companyAccount.permissions;
+    const required = Array.isArray(permission) ? permission : [permission];
+    const hasPermission = required.some(p => permissions.includes(p));
+
+    return hasPermission ? <>{children}</> : <>{fallback}</>;
+}