@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/configurator-form.tsx

@@ -0,0 +1,606 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback, useTransition, type ReactNode } from 'react';
+import { useTranslations } from 'next-intl';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
+import { Price } from '@/components/commerce/price';
+import { ShoppingCart, CheckCircle2, ChevronDown, Info, AlertCircle, Loader2, Minus, Plus } from 'lucide-react';
+import { toast } from 'sonner';
+import type {
+    ConfiguratorSystem,
+    ConfiguratorModule,
+    ConfiguratorField,
+    ConfigurationEvaluation,
+    EvaluatedField,
+    EvaluatedLine,
+} from '@/lib/vendure/queries';
+
+interface ConfiguratorFormProps {
+    system: ConfiguratorSystem;
+    productName: string;
+    currencyCode?: string;
+    evaluateAction: (systemId: string, values: { fieldRef: string; value: string }[]) => Promise<{ data?: ConfigurationEvaluation; error?: string }>;
+    addToOrderAction: (systemId: string, values: { fieldRef: string; value: string }[], name?: string) => Promise<{ success: boolean; error?: string }>;
+    children?: ReactNode;
+}
+
+function buildFieldRef(moduleCode: string, fieldCode: string) {
+    return `${moduleCode}.${fieldCode}`;
+}
+
+export function ConfiguratorForm({ system, productName, currencyCode, evaluateAction, addToOrderAction, children }: ConfiguratorFormProps) {
+    const t = useTranslations('Configurator');
+    const [values, setValues] = useState<Record<string, string>>(() => {
+        const initial: Record<string, string> = {};
+        for (const mod of system.modules) {
+            for (const field of mod.fields) {
+                if (field.defaultValue) {
+                    initial[buildFieldRef(mod.code, field.code)] = field.defaultValue;
+                }
+            }
+        }
+        return initial;
+    });
+
+    const [evaluation, setEvaluation] = useState<ConfigurationEvaluation | null>(null);
+    const [isEvaluating, setIsEvaluating] = useState(false);
+    const [isAdding, startAddTransition] = useTransition();
+    const [isAdded, setIsAdded] = useState(false);
+    const [expandedModules, setExpandedModules] = useState<Set<string>>(() => {
+        return new Set(system.modules.map(m => m.code));
+    });
+    const [bomDrawerOpen, setBomDrawerOpen] = useState(false);
+    const evalTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const fieldValueEntries = useCallback(() => {
+        return Object.entries(values)
+            .filter(([, v]) => v !== '')
+            .map(([fieldRef, value]) => ({ fieldRef, value }));
+    }, [values]);
+
+    useEffect(() => {
+        clearTimeout(evalTimeoutRef.current);
+        evalTimeoutRef.current = setTimeout(async () => {
+            const entries = fieldValueEntries();
+            if (entries.length === 0) return;
+            setIsEvaluating(true);
+            const result = await evaluateAction(system.id, entries);
+            setIsEvaluating(false);
+            if (result.data) {
+                setEvaluation(result.data);
+            }
+        }, 300);
+        return () => clearTimeout(evalTimeoutRef.current);
+    }, [values, system.id, evaluateAction, fieldValueEntries]);
+
+    const handleFieldChange = (moduleCode: string, fieldCode: string, value: string) => {
+        setValues(prev => ({ ...prev, [buildFieldRef(moduleCode, fieldCode)]: value }));
+    };
+
+    const handleAddToOrder = () => {
+        startAddTransition(async () => {
+            const entries = fieldValueEntries();
+            const result = await addToOrderAction(system.id, entries);
+            if (result.success) {
+                setIsAdded(true);
+                toast.success(t('addedToCartToast'));
+                setTimeout(() => setIsAdded(false), 2000);
+            } else {
+                toast.error(result.error || t('failedToAdd'));
+            }
+        });
+    };
+
+    const toggleModule = (code: string) => {
+        setExpandedModules(prev => {
+            const next = new Set(prev);
+            if (next.has(code)) next.delete(code);
+            else next.add(code);
+            return next;
+        });
+    };
+
+    const evalFieldMap = new Map<string, EvaluatedField>();
+    if (evaluation) {
+        for (const f of evaluation.fields) {
+            evalFieldMap.set(f.fieldRef, f);
+        }
+    }
+
+    const lines = evaluation?.lines ?? [];
+    const systemErrors = evaluation?.errors ?? [];
+    const totalPrice = lines.reduce((sum, line) => sum + line.productVariant.priceWithTax * line.quantity, 0);
+
+    // Collect all field-level error/warning messages for the top banner
+    const fieldIssues: { fieldName: string; message: string; type: string }[] = [];
+    for (const mod of system.modules) {
+        for (const field of mod.fields) {
+            const ref = buildFieldRef(mod.code, field.code);
+            const evalField = evalFieldMap.get(ref);
+            if (evalField?.hidden) continue;
+            for (const msg of evalField?.messages ?? []) {
+                if (msg.type === 'error' || msg.type === 'warning') {
+                    fieldIssues.push({ fieldName: field.name, message: msg.message, type: msg.type });
+                }
+            }
+        }
+    }
+    const allErrors = [
+        ...systemErrors.map(e => e.message),
+        ...fieldIssues.map(e => `${e.fieldName}: ${e.message}`),
+    ];
+    const hasErrors = allErrors.length > 0;
+
+    return (
+        <>
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                {/* LEFT: BOM sidebar (same position as ProductSidebar) */}
+                <aside className="lg:col-span-1 order-last lg:order-first">
+                    <div className="lg:sticky lg:top-20">
+                        <BomSidebar
+                            lines={lines}
+                            totalPrice={totalPrice}
+                            isEvaluating={isEvaluating}
+                            isAdding={isAdding}
+                            isAdded={isAdded}
+                            hasErrors={hasErrors}
+                            currencyCode={currencyCode}
+                            onAddToOrder={handleAddToOrder}
+                        />
+                    </div>
+                </aside>
+
+                {/* RIGHT: Main content area */}
+                <div className="lg:col-span-3">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        {/* Image + description — sticky */}
+                        <div className="md:sticky md:top-20 md:self-start space-y-5">
+                            {children}
+                        </div>
+
+                        {/* Configurator form */}
+                        <div>
+                            <div className="space-y-1.5">
+                                <h1 className="text-2xl font-bold">{productName}</h1>
+                                {lines.length > 0 && (
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-3xl font-bold text-primary">
+                                            <Price value={totalPrice} currencyCode={currencyCode} taxLabel="excl" />
+                                        </span>
+                                    </div>
+                                )}
+                            </div>
+
+                            {allErrors.length > 0 && (
+                                <div className="mt-4 space-y-2">
+                                    {allErrors.map((msg, i) => (
+                                        <div key={i} className="rounded-lg border border-red-200 bg-red-50 px-3 py-2.5 flex items-start gap-2">
+                                            <AlertCircle className="w-4 h-4 mt-0.5 shrink-0 text-red-500" />
+                                            <p className="text-sm text-red-800">{msg}</p>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+
+                            <div className="mt-5 space-y-3">
+                                {system.modules.map((mod, moduleIndex) => (
+                                    <ModuleSection
+                                        key={mod.id}
+                                        module={mod}
+                                        moduleIndex={moduleIndex + 1}
+                                        expanded={expandedModules.has(mod.code)}
+                                        onToggle={() => toggleModule(mod.code)}
+                                        values={values}
+                                        evalFieldMap={evalFieldMap}
+                                        onFieldChange={handleFieldChange}
+                                    />
+                                ))}
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Mobile: fixed bottom bar */}
+            <div className="lg:hidden fixed bottom-0 inset-x-0 z-40 border-t border-border bg-background shadow-[0_-4px_12px_rgba(0,0,0,0.05)]">
+                <div className="flex items-center justify-between px-4 py-3">
+                    <div>
+                        <p className="text-xs text-muted-foreground">
+                            {t('items', { count: lines.length })}
+                        </p>
+                        <p className="text-lg font-bold">
+                            <Price value={totalPrice} currencyCode={currencyCode} />
+                        </p>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        {lines.length > 0 && (
+                            <Button variant="outline" size="sm" onClick={() => setBomDrawerOpen(true)}>
+                                {t('viewBom')}
+                            </Button>
+                        )}
+                        <Button
+                            size="sm"
+                            disabled={lines.length === 0 || isAdding || hasErrors}
+                            onClick={handleAddToOrder}
+                        >
+                            {isAdded ? (
+                                <><CheckCircle2 className="mr-1.5 h-4 w-4" />{t('addedToCart')}</>
+                            ) : isAdding ? (
+                                <><Loader2 className="mr-1.5 h-4 w-4 animate-spin" />{t('adding')}</>
+                            ) : (
+                                <><ShoppingCart className="mr-1.5 h-4 w-4" />{t('addToCart')}</>
+                            )}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Mobile: BOM drawer */}
+            <Drawer open={bomDrawerOpen} onOpenChange={setBomDrawerOpen}>
+                <DrawerContent>
+                    <DrawerHeader>
+                        <DrawerTitle>{t('billOfMaterials')}</DrawerTitle>
+                    </DrawerHeader>
+                    <div className="px-4 pb-6 overflow-y-auto max-h-[60vh]">
+                        {lines.map((line, i) => (
+                            <div key={line.sourceKey ?? i} className="flex items-center justify-between py-2.5 border-b border-border last:border-0">
+                                <div className="min-w-0 flex-1">
+                                    <p className="text-sm font-medium">{line.productVariant.name}</p>
+                                    <p className="text-[11px] text-muted-foreground font-mono">{line.productVariant.sku}</p>
+                                </div>
+                                <div className="flex items-center gap-3 shrink-0 ml-3">
+                                    <span className="text-xs text-muted-foreground font-mono">×{line.quantity}</span>
+                                    <span className="text-sm font-mono tabular-nums">
+                                        <Price value={line.productVariant.priceWithTax * line.quantity} currencyCode={currencyCode} />
+                                    </span>
+                                </div>
+                            </div>
+                        ))}
+                        <div className="flex items-center justify-between pt-3 mt-1 font-semibold">
+                            <span>{t('total')}</span>
+                            <Price value={totalPrice} currencyCode={currencyCode} taxLabel="excl" />
+                        </div>
+                    </div>
+                </DrawerContent>
+            </Drawer>
+
+            {/* Spacer for mobile bottom bar */}
+            <div className="lg:hidden h-20" />
+        </>
+    );
+}
+
+// ─── BOM Sidebar ────────────────────────────────────────────────────
+
+function BomSidebar({
+    lines,
+    totalPrice,
+    isEvaluating,
+    isAdding,
+    isAdded,
+    hasErrors,
+    currencyCode,
+    onAddToOrder,
+}: {
+    lines: EvaluatedLine[];
+    totalPrice: number;
+    isEvaluating: boolean;
+    isAdding: boolean;
+    isAdded: boolean;
+    hasErrors: boolean;
+    currencyCode?: string;
+    onAddToOrder: () => void;
+}) {
+    const t = useTranslations('Configurator');
+    return (
+        <div className="space-y-4">
+            <div>
+                <div className="flex items-center gap-2 mb-3">
+                    <h3 className="text-sm font-semibold">{t('billOfMaterials')}</h3>
+                    {lines.length > 0 && (
+                        <span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/10 text-[11px] font-semibold text-primary tabular-nums">
+                            {lines.length}
+                        </span>
+                    )}
+                    {isEvaluating && <Loader2 className="w-3.5 h-3.5 animate-spin text-muted-foreground ml-auto" />}
+                </div>
+
+                {lines.length > 0 ? (
+                    <div className="space-y-0 divide-y divide-border border-y border-border">
+                        {lines.map((line, i) => (
+                            <div key={line.sourceKey ?? i} className="py-2">
+                                <div className="flex items-start justify-between gap-2">
+                                    <div className="min-w-0 flex-1">
+                                        <p className="text-sm font-medium leading-tight">{line.productVariant.name}</p>
+                                        <p className="text-[11px] text-muted-foreground font-mono mt-0.5">{line.productVariant.sku}</p>
+                                    </div>
+                                    <span className="text-xs text-muted-foreground font-mono tabular-nums shrink-0">×{line.quantity}</span>
+                                </div>
+                                <p className="text-sm font-mono tabular-nums text-right mt-0.5">
+                                    <Price value={line.productVariant.priceWithTax * line.quantity} currencyCode={currencyCode} />
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <p className="text-sm text-muted-foreground py-4">
+                        {t('emptyBom')}
+                    </p>
+                )}
+            </div>
+
+            {lines.length > 0 && (
+                <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm font-semibold">{t('total')}</span>
+                        <span className="text-lg font-bold text-primary">
+                            <Price value={totalPrice} currencyCode={currencyCode} taxLabel="excl" />
+                        </span>
+                    </div>
+                    <Button
+                        size="lg"
+                        className="w-full hidden lg:flex"
+                        disabled={hasErrors || isAdding}
+                        onClick={onAddToOrder}
+                    >
+                        {isAdded ? (
+                            <><CheckCircle2 className="mr-2 h-5 w-5" />{t('addedToCart')}</>
+                        ) : isAdding ? (
+                            <><Loader2 className="mr-2 h-5 w-5 animate-spin" />{t('adding')}</>
+                        ) : (
+                            <><ShoppingCart className="mr-2 h-5 w-5" />{t('addToCart')}</>
+                        )}
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// ─── Module Section ────────────────────────────────────────────────
+
+function ModuleSection({
+    module: mod,
+    moduleIndex,
+    expanded,
+    onToggle,
+    values,
+    evalFieldMap,
+    onFieldChange,
+}: {
+    module: ConfiguratorModule;
+    moduleIndex: number;
+    expanded: boolean;
+    onToggle: () => void;
+    values: Record<string, string>;
+    evalFieldMap: Map<string, EvaluatedField>;
+    onFieldChange: (moduleCode: string, fieldCode: string, value: string) => void;
+}) {
+    const t = useTranslations('Configurator');
+    const visibleFields = mod.fields
+        .filter(f => {
+            const ef = evalFieldMap.get(buildFieldRef(mod.code, f.code));
+            return !ef?.hidden;
+        })
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+
+    const allFilled = visibleFields
+        .filter(f => f.required)
+        .every(f => {
+            const val = values[buildFieldRef(mod.code, f.code)];
+            return val != null && val !== '';
+        });
+
+    const summaryParts = visibleFields
+        .map(f => {
+            const val = values[buildFieldRef(mod.code, f.code)];
+            if (!val) return null;
+            if (f.fieldType === 'BOOL') return val === 'true' ? f.name : null;
+            if (f.fieldType === 'NUMBER' && f.unit) return `${val} ${f.unit}`;
+            return val;
+        })
+        .filter(Boolean);
+    const summary = summaryParts.slice(0, 3).join(', ');
+
+    return (
+        <section className={`border border-border rounded-lg overflow-hidden transition-shadow ${expanded ? 'ring-1 ring-primary/20' : ''}`}>
+            <button
+                type="button"
+                onClick={onToggle}
+                className="w-full flex items-center gap-2.5 px-4 py-3 text-left hover:bg-muted/30 transition-colors"
+            >
+                <div className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-semibold shrink-0 ${
+                    allFilled && summaryParts.length > 0
+                        ? 'bg-primary text-white'
+                        : 'border-2 border-muted-foreground/30 text-muted-foreground'
+                }`}>
+                    {allFilled && summaryParts.length > 0 ? (
+                        <CheckCircle2 className="w-3 h-3" />
+                    ) : (
+                        moduleIndex
+                    )}
+                </div>
+                <div className="flex-1 min-w-0">
+                    <h2 className={`text-sm font-semibold ${allFilled && summaryParts.length > 0 ? 'text-foreground' : expanded ? 'text-foreground' : 'text-muted-foreground'}`}>
+                        {mod.name}
+                        {mod.optional && <span className="ml-1.5 text-xs font-normal text-muted-foreground">{t('optional')}</span>}
+                    </h2>
+                </div>
+                {!expanded && summary && (
+                    <span className="text-xs text-muted-foreground hidden sm:inline truncate max-w-32">{summary}</span>
+                )}
+                <ChevronDown className={`w-4 h-4 text-muted-foreground transition-transform ${expanded ? 'rotate-180' : ''}`} />
+            </button>
+            {expanded && (
+                <div className="px-4 pb-4 pt-2 space-y-3.5 border-t border-border">
+                    {visibleFields.map(field => (
+                        <FieldInput
+                            key={field.id}
+                            field={field}
+                            moduleCode={mod.code}
+                            value={values[buildFieldRef(mod.code, field.code)] ?? ''}
+                            evalField={evalFieldMap.get(buildFieldRef(mod.code, field.code))}
+                            onChange={val => onFieldChange(mod.code, field.code, val)}
+                        />
+                    ))}
+                </div>
+            )}
+        </section>
+    );
+}
+
+// ─── Field Input ────────────────────────────────────────────────────
+
+function FieldInput({
+    field,
+    moduleCode,
+    value,
+    evalField,
+    onChange,
+}: {
+    field: ConfiguratorField;
+    moduleCode: string;
+    value: string;
+    evalField?: EvaluatedField;
+    onChange: (value: string) => void;
+}) {
+    const t = useTranslations('Configurator');
+    const messages = evalField?.messages ?? [];
+
+    return (
+        <div className="space-y-1.5">
+            {field.fieldType === 'BOOL' ? (
+                <div className="flex items-center justify-between py-0.5">
+                    <Label className="text-sm font-medium">{field.name}</Label>
+                    <Switch
+                        checked={value === 'true'}
+                        onCheckedChange={checked => onChange(checked ? 'true' : 'false')}
+                    />
+                </div>
+            ) : (
+                <>
+                    <Label className="text-sm font-medium">
+                        {field.name}
+                        {field.required && <span className="text-red-500 text-xs ml-0.5">*</span>}
+                    </Label>
+                    {field.fieldType === 'NUMBER' ? (
+                        <NumberInput field={field} value={value} onChange={onChange} />
+                    ) : field.fieldType === 'SELECT' || field.fieldType === 'DYNAMIC_SELECT' ? (
+                        <SelectInput field={field} value={value} evalField={evalField} onChange={onChange} />
+                    ) : (
+                        <Input value={value} onChange={e => onChange(e.target.value)} />
+                    )}
+                </>
+            )}
+
+            {messages.map((msg, i) => (
+                <p key={i} className={`text-xs flex items-center gap-1 ${
+                    msg.type === 'error' ? 'text-red-600' : msg.type === 'warning' ? 'text-amber-600' : 'text-muted-foreground'
+                }`}>
+                    <Info className="w-3 h-3 shrink-0" />
+                    {msg.message}
+                </p>
+            ))}
+
+            {field.fieldType === 'NUMBER' && (field.min || field.max) && (
+                <p className="text-xs text-muted-foreground font-mono tabular-nums">
+                    {field.min && field.max
+                        ? t('range', {
+                            min: `${Number(field.min).toLocaleString()}`,
+                            max: `${Number(field.max).toLocaleString()}${field.unit ? ` ${field.unit}` : ''}`,
+                        })
+                        : field.min
+                        ? t('min', { value: `${Number(field.min).toLocaleString()}${field.unit ? ` ${field.unit}` : ''}` })
+                        : t('max', { value: `${Number(field.max).toLocaleString()}${field.unit ? ` ${field.unit}` : ''}` })
+                    }
+                </p>
+            )}
+        </div>
+    );
+}
+
+function NumberInput({ field, value, onChange }: { field: ConfiguratorField; value: string; onChange: (v: string) => void }) {
+    const step = field.unit === 'mm' ? 100 : 1;
+    const min = field.min ? Number(field.min) : undefined;
+    const max = field.max ? Number(field.max) : undefined;
+
+    const stepValue = (delta: number) => {
+        const current = Number(value) || 0;
+        let next = current + delta * step;
+        if (min != null) next = Math.max(min, next);
+        if (max != null) next = Math.min(max, next);
+        onChange(String(next));
+    };
+
+    return (
+        <div className="flex items-center border border-border rounded-md overflow-hidden focus-within:ring-[3px] focus-within:ring-primary/20 focus-within:border-primary transition-all">
+            <button
+                type="button"
+                onClick={() => stepValue(-1)}
+                className="h-9 w-9 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/30 transition-colors border-r border-border"
+            >
+                <Minus className="w-3.5 h-3.5" />
+            </button>
+            <input
+                type="number"
+                value={value}
+                min={min}
+                max={max}
+                step={step}
+                onChange={e => onChange(e.target.value)}
+                className="flex-1 h-9 px-3 text-sm focus:outline-none bg-transparent font-mono tabular-nums text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            />
+            <button
+                type="button"
+                onClick={() => stepValue(1)}
+                className="h-9 w-9 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/30 transition-colors border-l border-border"
+            >
+                <Plus className="w-3.5 h-3.5" />
+            </button>
+            {field.unit && (
+                <span className="h-9 px-3 flex items-center text-xs font-mono text-muted-foreground bg-muted/30 border-l border-border select-none">
+                    {field.unit}
+                </span>
+            )}
+        </div>
+    );
+}
+
+function SelectInput({
+    field,
+    value,
+    evalField,
+    onChange,
+}: {
+    field: ConfiguratorField;
+    value: string;
+    evalField?: EvaluatedField;
+    onChange: (v: string) => void;
+}) {
+    const t = useTranslations('Configurator');
+    const options = evalField?.availableOptions?.length
+        ? evalField.availableOptions.map(o => ({ value: o.value, label: o.label ?? o.value }))
+        : (field.options ?? []).map(o => ({ value: o.code, label: o.label }));
+
+    return (
+        <Select value={value || undefined} onValueChange={onChange}>
+            <SelectTrigger className="w-full">
+                <SelectValue placeholder={t('selectPlaceholder', { field: field.name.toLowerCase() })} />
+            </SelectTrigger>
+            <SelectContent>
+                {options.map(opt => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                        {opt.label}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}
+