@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/field-row.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { ConfiguratorField, EvaluatedField } from '../lib/types';
+
+interface FieldRowProps {
+    moduleCode: string;
+    field: ConfiguratorField;
+    /** Current value as a string (matches the backend evaluate input). */
+    value: string;
+    evalField: EvaluatedField | undefined;
+    onChange: (moduleCode: string, fieldCode: string, value: string) => void;
+}
+
+export function FieldRow({ moduleCode, field, value, evalField, onChange }: FieldRowProps) {
+    // `error` vs `warning` is backend-driven. Anything else is informational.
+    const firstMessage = evalField?.messages?.[0];
+    const err = firstMessage?.type === 'error';
+    const warn = firstMessage?.type === 'warning';
+    const filled = value !== '' && value !== undefined;
+
+    // Backend sends constrained options on `availableOptions` once a constrain
+    // rule has narrowed the set; otherwise we show the full options from the
+    // field definition.
+    const selectOptions = (evalField?.availableOptions && evalField.availableOptions.length > 0
+        ? evalField.availableOptions.map(o => ({ code: o.value, label: o.label }))
+        : field.options.map(o => ({ code: o.code, label: o.label })));
+
+    return (
+        <div className="field-row px-3 py-2.5 border-b border-[color:var(--line)] last:border-b-0">
+            <div className="flex items-center justify-between gap-2 mb-1 whitespace-nowrap">
+                <label
+                    htmlFor={`${moduleCode}-${field.code}`}
+                    className="text-[12px] text-[color:var(--ink-2)] font-medium flex items-center min-w-0 flex-1 truncate"
+                >
+                    <span className="truncate">{field.name}</span>
+                    {field.unit && (
+                        <span className="mono ml-2 text-[10px] text-[color:var(--muted-2)] shrink-0">[{field.unit}]</span>
+                    )}
+                </label>
+                <span className="shrink-0">
+                    {filled && !err && !warn && <span className="mono text-[10px] text-[color:var(--muted-2)]">✓ gesetzt</span>}
+                    {warn && <span className="mono text-[10px] text-[#fbbf24]">⚠ Warnung</span>}
+                    {err && <span className="mono text-[10px] text-[#f87171]">✕ Fehler</span>}
+                </span>
+            </div>
+
+            {(field.fieldType === 'SELECT' || field.fieldType === 'DYNAMIC_SELECT') && (
+                <select
+                    id={`${moduleCode}-${field.code}`}
+                    value={value}
+                    onChange={e => onChange(moduleCode, field.code, e.target.value)}
+                    className={cn(
+                        'mono w-full h-9 px-2 text-[12px] bg-[color:var(--panel-3)] border rounded-sm text-[color:var(--ink)] outline-none appearance-none cursor-pointer focus:border-[color:var(--fire)]',
+                        err ? 'border-[#7f1d1d]' : warn ? 'border-[#78350f]' : 'border-[color:var(--line-2)]',
+                    )}
+                    style={{
+                        backgroundImage:
+                            'linear-gradient(45deg, transparent 50%, #a8a29e 50%), linear-gradient(135deg, #a8a29e 50%, transparent 50%)',
+                        backgroundPosition: 'calc(100% - 14px) 50%, calc(100% - 10px) 50%',
+                        backgroundSize: '4px 4px, 4px 4px',
+                        backgroundRepeat: 'no-repeat',
+                    }}
+                >
+                    <option value="">— wählen —</option>
+                    {selectOptions.map(o => (
+                        <option key={o.code} value={o.code}>
+                            {o.label}
+                        </option>
+                    ))}
+                </select>
+            )}
+
+            {field.fieldType === 'NUMBER' && (
+                <div
+                    className={cn(
+                        'flex items-stretch border rounded-sm bg-[color:var(--panel-3)] focus-within:border-[color:var(--fire)]',
+                        err ? 'border-[#7f1d1d]' : warn ? 'border-[#78350f]' : 'border-[color:var(--line-2)]',
+                    )}
+                >
+                    <input
+                        id={`${moduleCode}-${field.code}`}
+                        type="number"
+                        inputMode="decimal"
+                        value={value}
+                        step={field.unit === 'mm' ? 100 : 1}
+                        min={field.min ?? undefined}
+                        max={field.max ?? undefined}
+                        onChange={e => onChange(moduleCode, field.code, e.target.value)}
+                        placeholder={`${field.min ?? ''}–${field.max ?? ''}`}
+                        className="mono flex-1 h-9 px-2 text-[12px] bg-transparent text-[color:var(--ink)] outline-none"
+                    />
+                    {field.unit && (
+                        <div className="mono flex items-center justify-center px-2 text-[11px] text-[color:var(--muted)] border-l border-[color:var(--line)]">
+                            {field.unit}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {field.fieldType === 'BOOL' && (
+                <button
+                    type="button"
+                    onClick={() => onChange(moduleCode, field.code, value === 'true' ? 'false' : 'true')}
+                    className="flex items-center gap-2 text-left w-full"
+                >
+                    <span className={cn('relative inline-block w-8 h-4 rounded-full transition', value === 'true' ? 'bg-[color:var(--fire)]' : 'bg-[color:var(--line)]')}>
+                        <span className={cn('absolute top-0.5 left-0.5 w-3 h-3 rounded-full bg-white transition-transform', value === 'true' && 'translate-x-4')} />
+                    </span>
+                    <span className="mono text-[11px] text-[color:var(--muted)]">{value === 'true' ? 'JA' : 'NEIN'}</span>
+                </button>
+            )}
+
+            {firstMessage && (
+                <div
+                    className={cn(
+                        'mt-2 px-2 py-1.5 text-[11px] leading-snug rounded-sm border',
+                        err ? 'bg-[#2a0f0f] border-[#4a1d1d] text-[#fca5a5]' : 'bg-[#2a1c0a] border-[#4a3418] text-[#fcd34d]',
+                    )}
+                >
+                    {firstMessage.message}
+                </div>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/info-dot.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useState } from 'react';
+
+export function InfoDot({ text }: { text: string }) {
+    const [show, setShow] = useState(false);
+    return (
+        <span
+            className="relative inline-flex ml-1 align-middle focus-within:outline-none"
+            onMouseEnter={() => setShow(true)}
+            onMouseLeave={() => setShow(false)}
+        >
+            <button
+                type="button"
+                tabIndex={0}
+                aria-label={text}
+                className="inline-flex items-center justify-center rounded-full focus:outline-none focus-visible:ring-1 focus-visible:ring-[color:var(--fire)]"
+                onFocus={() => setShow(true)}
+                onBlur={() => setShow(false)}
+            >
+                <svg width="12" height="12" viewBox="0 0 12 12" className="text-[color:var(--muted-2)]">
+                    <circle cx="6" cy="6" r="5" fill="none" stroke="currentColor" strokeWidth="1" />
+                    <text x="6" y="8.5" textAnchor="middle" fontSize="7" fill="currentColor" fontFamily="JetBrains Mono">
+                        i
+                    </text>
+                </svg>
+            </button>
+            {show && (
+                <span
+                    role="tooltip"
+                    className="absolute left-4 top-0 z-30 w-56 p-2 text-[11px] leading-[1.45] bg-[color:var(--panel-2)] border border-[color:var(--line-2)] rounded-md text-[color:var(--ink-2)] shadow-xl"
+                >
+                    {text}
+                </span>
+            )}
+        </span>
+    );
+}

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/login-notice.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Link } from '@/i18n/navigation';
+
+/**
+ * Auth-gate screen shown when an unauthenticated visitor hits the
+ * configurator PDP. Reinforces the "partner-portal" narrative and
+ * routes to the sign-in flow.
+ */
+export function LoginNotice() {
+    const bullets = [
+        { k: 'Projektpreise', v: 'Partnerrabatte · gestaffelt nach Volumen' },
+        { k: 'Live-Stückliste', v: 'Zeichnungen, CE-Nachweise, ÖNORM-Dokumentation' },
+        { k: 'Fachberatung', v: 'Direkter Draht zum Ingenieurteam in Wörgl' },
+        { k: 'Verfügbarkeit', v: 'Lagerstand Kufstein · tagesaktuell' },
+    ];
+
+    return (
+        <div className="kp-pdp flex-1 grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_480px] min-h-[calc(100vh-var(--page-top-offset))]">
+            {/* Left — marketing */}
+            <div className="relative paper-bg p-10 flex flex-col">
+                <div className="absolute top-6 left-6 mono text-[10px] text-[color:var(--muted-2)]">
+                    KAMINPRO · PARTNER PORTAL · ZUGRIFF BESCHRÄNKT
+                </div>
+
+                <div className="mt-auto max-w-[520px]">
+                    <div className="caps text-[color:var(--fire)] mb-4">Nur für Fachpartner</div>
+                    <h2 className="text-[44px] leading-[1.05] font-bold tracking-tight text-[color:var(--ink)]">
+                        Komplette Abgas­anlage in unter zwei Minuten — als Stückliste, Angebot oder Auftrag.
+                    </h2>
+                    <p className="mt-5 text-[14px] text-[color:var(--muted)] leading-relaxed max-w-[480px]">
+                        Bitte melden Sie sich an, um den Konfigurator zu nutzen. Der Zugang ist Hafnern, Heizungsbauern und gewerblichen Energietechnik-Unternehmen vorbehalten.
+                    </p>
+                    <div className="mt-8 flex items-center gap-3 flex-wrap">
+                        <Link
+                            href="/sign-in"
+                            className="inline-flex items-center justify-center h-11 px-5 text-[14px] rounded-md font-medium bg-[color:var(--fire)] text-white hover:bg-[color:var(--fire-2)] transition-all shadow-[0_0_0_1px_rgba(0,0,0,.35)_inset,0_1px_0_rgba(255,255,255,.08)_inset]"
+                        >
+                            Zur Anmeldung
+                        </Link>
+                        <Link
+                            href="/register-company"
+                            className="inline-flex items-center justify-center h-11 px-5 text-[14px] rounded-md font-medium border border-[color:var(--line-2)] text-[color:var(--ink)] hover:bg-[color:var(--panel-2)] transition-all"
+                        >
+                            Partner werden
+                        </Link>
+                    </div>
+                </div>
+
+                <div className="hidden lg:block absolute right-10 top-1/2 -translate-y-1/2 w-[260px] h-[340px] stripe border border-[color:var(--line)] rounded-sm flex items-end p-3">
+                    <div className="mono text-[10px] text-[color:var(--muted-2)] absolute bottom-3 left-3">
+                        PHOTO · STAHLLINE-DW · EDELSTAHL
+                    </div>
+                </div>
+            </div>
+
+            {/* Right — partner-only bullets (sign-in form lives at /login) */}
+            <div className="border-l border-[color:var(--line)] bg-[color:var(--panel)] p-8 flex flex-col">
+                <div className="caps text-[color:var(--muted)] mb-5">Was Partner erhalten</div>
+                <ul className="grid gap-4">
+                    {bullets.map(b => (
+                        <li key={b.k} className="flex items-start gap-3 py-1">
+                            <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-[color:var(--fire)] shrink-0" />
+                            <div>
+                                <div className="text-[13px] text-[color:var(--ink)]">{b.k}</div>
+                                <div className="mono text-[10.5px] text-[color:var(--muted)]">{b.v}</div>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+
+                <div className="mt-auto pt-6 border-t border-[color:var(--line)] text-[11px] text-[color:var(--muted)]">
+                    <span className="mono">Noch kein Konto?</span>{' '}
+                    <Link href="/register-company" className="underline underline-offset-2 text-[color:var(--ink)] hover:text-[color:var(--fire)]">
+                        Partner-Antrag stellen →
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/module-panel.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { buildFieldRef, moduleStats } from '../lib/data';
+import type { ConfigurationEvaluation, ConfiguratorSystem, Values } from '../lib/types';
+import { Chip } from './chip';
+import { FieldRow } from './field-row';
+
+interface ModulePanelProps {
+    system: ConfiguratorSystem;
+    values: Values;
+    evaluation: ConfigurationEvaluation | null;
+    activeId: string;
+    collapsed: boolean;
+    onActivate: (code: string) => void;
+    onToggleCollapsed: () => void;
+    onChange: (moduleCode: string, fieldCode: string, value: string) => void;
+}
+
+export function ModulePanel({
+    system,
+    values,
+    evaluation,
+    activeId,
+    collapsed,
+    onActivate,
+    onToggleCollapsed,
+    onChange,
+}: ModulePanelProps) {
+    const evalFieldMap = new Map(evaluation?.fields.map(f => [f.fieldRef, f]));
+    const modules = [...system.modules].sort((a, b) => a.sortOrder - b.sortOrder);
+
+    return (
+        <div className="h-full flex flex-col bg-[color:var(--panel)]">
+            {/* Header — full label when expanded, icon-only when collapsed */}
+            <div className="px-3 h-11 flex items-center border-b border-[color:var(--line)] shrink-0">
+                {!collapsed ? (
+                    <>
+                        <div className="caps text-[color:var(--muted)]">Konfigurationsbereiche</div>
+                        <div className="ml-auto mono text-[10px] text-[color:var(--muted-2)] mr-2">{modules.length}</div>
+                    </>
+                ) : null}
+                <button
+                    onClick={onToggleCollapsed}
+                    aria-label={collapsed ? 'Panel ausklappen' : 'Panel einklappen'}
+                    title={collapsed ? 'Panel ausklappen' : 'Panel einklappen'}
+                    className={cn(
+                        'mono text-[color:var(--muted)] hover:text-[color:var(--ink)] transition-colors',
+                        'text-[13px] w-6 h-6 flex items-center justify-center rounded-sm',
+                        'hover:bg-[color:var(--panel-2)]',
+                        collapsed ? 'mx-auto' : 'ml-0',
+                    )}
+                >
+                    {collapsed ? '»' : '«'}
+                </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto scroll-slim">
+                {modules.map((m, i) => {
+                    // Module is hidden only if EVERY field in it is hidden by
+                    // a visibility rule — otherwise keep the accordion entry.
+                    const visibleFields = m.fields.filter(f => {
+                        const ref = buildFieldRef(m.code, f.code);
+                        return !evalFieldMap.get(ref)?.hidden;
+                    });
+                    if (visibleFields.length === 0) return null;
+
+                    const isActive = m.code === activeId;
+                    const { filled, total, invalid } = moduleStats(m, values, evaluation);
+                    const icon = String(i + 1).padStart(2, '0');
+
+                    // Rail mode — compact centered badge per module; clicking
+                    // expands the panel via the shell's onActivate wrapper.
+                    if (collapsed) {
+                        return (
+                            <button
+                                key={m.code}
+                                onClick={() => onActivate(m.code)}
+                                aria-label={`${m.name} (${filled}/${total})`}
+                                title={`${m.name} · ${filled}/${total}`}
+                                className={cn(
+                                    'w-full px-2 py-3 flex flex-col items-center gap-1.5 border-b border-[color:var(--line)]',
+                                    'hover:bg-[color:var(--panel-2)] transition-colors',
+                                    isActive && 'bg-[color:var(--panel-3)]',
+                                )}
+                            >
+                                <span className="mono text-[10px] text-[color:var(--muted-2)]">{icon}</span>
+                                <Chip tone={invalid > 0 ? 'err' : filled === total && total > 0 ? 'ok' : 'neutral'}>
+                                    {filled}/{total}
+                                </Chip>
+                            </button>
+                        );
+                    }
+
+                    return (
+                        <div
+                            key={m.code}
+                            className={cn('border-b border-[color:var(--line)]', isActive && 'bg-[color:var(--panel-3)]')}
+                        >
+                            <button
+                                onClick={() => onActivate(m.code)}
+                                className="w-full text-left px-3 py-2.5 flex items-center gap-2 hover:bg-[color:var(--panel-2)]"
+                            >
+                                <span className="mono text-[10px] text-[color:var(--muted-2)] w-5 shrink-0">{icon}</span>
+                                <div className="flex-1 min-w-0">
+                                    <div className="text-[13px] font-medium text-[color:var(--ink)] truncate">{m.name}</div>
+                                    <div className="mono text-[10px] text-[color:var(--muted-2)] truncate">{m.code}</div>
+                                </div>
+                                <div className="flex items-center gap-1.5 shrink-0">
+                                    {invalid > 0 && <Chip tone="err">{invalid}</Chip>}
+                                    <Chip tone={filled === total && total > 0 ? 'ok' : 'neutral'}>
+                                        {filled}/{total}
+                                    </Chip>
+                                    <span className={cn('mono text-[11px] text-[color:var(--muted)] transition-transform', isActive && 'rotate-90')}>›</span>
+                                </div>
+                            </button>
+
+                            {isActive && (
+                                <div className="border-t border-[color:var(--line)]">
+                                    {visibleFields
+                                        .sort((a, b) => a.sortOrder - b.sortOrder)
+                                        .map(f => {
+                                            const ref = buildFieldRef(m.code, f.code);
+                                            const evalField = evalFieldMap.get(ref);
+                                            return (
+                                                <FieldRow
+                                                    key={f.code}
+                                                    moduleCode={m.code}
+                                                    field={f}
+                                                    value={values[ref] ?? ''}
+                                                    evalField={evalField}
+                                                    onChange={onChange}
+                                                />
+                                            );
+                                        })}
+                                </div>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/scenarios/kaminpro/pdp/components/quote-dialog.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useState } from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Send, FileText } from 'lucide-react';
+import { fmtEuro } from '../lib/data';
+
+interface QuoteDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    configName: string;
+    lineCount: number;
+    totalPriceCents: number;
+    submitting: boolean;
+    onSubmit: (message: string) => void;
+}
+
+/**
+ * Prompt the partner for an optional message (discount request,
+ * delivery-timing note, etc.) before the configured BOM is submitted as
+ * a quote. Without this prompt the quote is just a cart snapshot and
+ * carries no reason for an account manager to respond.
+ */
+export function QuoteDialog({
+    open,
+    onOpenChange,
+    configName,
+    lineCount,
+    totalPriceCents,
+    submitting,
+    onSubmit,
+}: QuoteDialogProps) {
+    const [message, setMessage] = useState('');
+
+    const handleSubmit = () => {
+        onSubmit(message.trim());
+    };
+
+    // Reset the message whenever the dialog is closed so a fresh open
+    // starts empty. (The dialog mounts once and persists — we can't rely
+    // on unmount for state reset.)
+    const handleOpenChange = (next: boolean) => {
+        if (!next) setMessage('');
+        onOpenChange(next);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={handleOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <FileText className="h-4 w-4" />
+                        Als Angebot speichern
+                    </DialogTitle>
+                    <DialogDescription>
+                        Ihr Fachberater prüft die Konfiguration und meldet sich mit einem
+                        verbindlichen Preis zurück. Geben Sie optional eine Nachricht mit —
+                        etwa Rabattanfrage, Wunschliefertermin oder Projekthinweis.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="rounded-md border bg-muted/30 px-3 py-2 text-xs space-y-0.5">
+                    <div className="font-medium text-foreground">{configName}</div>
+                    <div className="text-muted-foreground">
+                        {lineCount} Positionen · {fmtEuro(totalPriceCents / 100)}
+                    </div>
+                </div>
+
+                <div className="space-y-2">
+                    <label htmlFor="quote-message" className="text-sm font-medium">
+                        Nachricht an den Fachberater
+                        <span className="text-muted-foreground font-normal ml-1">(optional)</span>
+                    </label>
+                    <Textarea
+                        id="quote-message"
+                        value={message}
+                        onChange={e => setMessage(e.target.value)}
+                        rows={5}
+                        placeholder="z.B. Bitte um Rabatt für Stammkunden. Liefertermin KW 24 angestrebt."
+                        disabled={submitting}
+                    />
+                </div>
+
+                <DialogFooter>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => handleOpenChange(false)}
+                        disabled={submitting}
+                    >
+                        Abbrechen
+                    </Button>
+                    <Button onClick={handleSubmit} disabled={submitting}>
+                        <Send className="h-4 w-4 mr-2" />
+                        {submitting ? 'Wird gesendet…' : 'Angebot anfordern'}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}