@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/scenarios/kaminpro/branding.ts

@@ -0,0 +1,238 @@
+import type { StorefrontBranding } from '@/config/branding';
+
+/* =============================================================
+   Color palettes — Anthracite + Fire-red (KaminPro)
+
+   Deliberate differentiation from Stocker Kaminsysteme's
+   `#ed1c24` signal-red: we use `#dc2626` (Tailwind red-600)
+   which sits a couple of degrees cooler on the hue wheel and
+   reads as its own brand rather than a clone. Background
+   stays dark anthracite `#1c1917` for industrial gravitas.
+   ============================================================= */
+
+const baseVars: Record<string, string> = {
+    // 2 px radius — matches the drafting aesthetic of the configurator.
+    // Corners on cards / buttons / badges get sharper but not hard-edged.
+    '--radius': '0.125rem',
+};
+
+const heroColors: Record<string, string> = {
+    // Tyrolean-valley hero photo at golden hour. Generated via
+    //   bun tools/scripts/generate-collection-images.ts \
+    //       --manifest tools/scripts/manifests/kaminpro-images.json \
+    //       --out apps/storefront/public/scenarios/kaminpro/hero
+    // Falls back to the gradient below when the image is missing.
+    '--hero-bg-image': 'url(/scenarios/kaminpro/hero/hero-bg.webp)',
+    '--hero-gradient-from': '#0c0a09',
+    '--hero-gradient-via': '#1c1917',
+    '--hero-gradient-to': '#0c0a09',
+    '--hero-accent': '#f87171',
+    '--hero-accent-bg': '#dc2626',
+    '--hero-accent-bg-hover': '#b91c1c',
+    '--hero-accent-foreground': '#ffffff',
+    '--hero-text': '#f5f5f4',
+    '--hero-text-muted': '#a8a29e',
+    '--hero-border': '#44403c',
+    '--hero-badge-bg': 'rgba(220, 38, 38, 0.12)',
+    '--hero-badge-border': 'rgba(220, 38, 38, 0.3)',
+};
+
+const darkColors: Record<string, string> = {
+    ...baseVars,
+
+    // Palette mirrors the configurator's drafting tokens so the rest of
+    // the site reads as a continuation of that aesthetic, not a separate
+    // visual language:
+    //   #0f0e0d   `--bg`       deepest canvas (was #1c1917)
+    //   #1c1917   `--panel`    cards / surfaces
+    //   #292524   `--panel-2`  popovers / hover layers
+    //   #1f1c1a   `--panel-3`  muted backgrounds
+    //   #3a3532   `--line`     hairline borders
+    //   #e7e5e4   `--ink`      primary text
+    //   #78716c   `--muted-2`  secondary text
+    //   #dc2626   `--fire`     brand accent (unchanged)
+    '--background': '#0f0e0d',
+    '--foreground': '#e7e5e4',
+
+    '--card': '#1c1917',
+    '--card-foreground': '#e7e5e4',
+    '--popover': '#292524',
+    '--popover-foreground': '#e7e5e4',
+
+    '--primary': '#dc2626',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#1c1917',
+    '--secondary-foreground': '#e7e5e4',
+
+    '--muted': '#1f1c1a',
+    '--muted-foreground': '#78716c',
+
+    '--accent': '#292524',
+    '--accent-foreground': '#e7e5e4',
+
+    '--destructive': '#ef4444',
+
+    '--border': '#3a3532',
+    '--input': '#292524',
+    '--ring': '#dc2626',
+
+    '--chart-1': '#dc2626',
+    '--chart-2': '#f87171',
+    '--chart-3': '#fbbf24',
+    '--chart-4': '#a8a29e',
+    '--chart-5': '#78716c',
+
+    '--sidebar': '#0f0e0d',
+    '--sidebar-foreground': '#e7e5e4',
+    '--sidebar-primary': '#dc2626',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#1c1917',
+    '--sidebar-accent-foreground': '#e7e5e4',
+    '--sidebar-border': '#3a3532',
+    '--sidebar-ring': '#dc2626',
+
+    ...heroColors,
+};
+
+const lightColors: Record<string, string> = {
+    ...baseVars,
+
+    '--background': '#ffffff',
+    '--foreground': '#1c1917',
+
+    '--card': '#fafaf9',
+    '--card-foreground': '#1c1917',
+    '--popover': '#ffffff',
+    '--popover-foreground': '#1c1917',
+
+    '--primary': '#b91c1c',
+    '--primary-foreground': '#ffffff',
+
+    '--secondary': '#f5f5f4',
+    '--secondary-foreground': '#1c1917',
+
+    '--muted': '#f5f5f4',
+    '--muted-foreground': '#78716c',
+
+    '--accent': '#f5f5f4',
+    '--accent-foreground': '#1c1917',
+
+    '--destructive': '#dc2626',
+
+    '--border': '#e7e5e4',
+    '--input': '#e7e5e4',
+    '--ring': '#b91c1c',
+
+    '--chart-1': '#b91c1c',
+    '--chart-2': '#ef4444',
+    '--chart-3': '#d97706',
+    '--chart-4': '#78716c',
+    '--chart-5': '#44403c',
+
+    '--sidebar': '#fafaf9',
+    '--sidebar-foreground': '#1c1917',
+    '--sidebar-primary': '#b91c1c',
+    '--sidebar-primary-foreground': '#ffffff',
+    '--sidebar-accent': '#f5f5f4',
+    '--sidebar-accent-foreground': '#1c1917',
+    '--sidebar-border': '#e7e5e4',
+    '--sidebar-ring': '#b91c1c',
+
+    ...heroColors,
+};
+
+export const branding: StorefrontBranding = {
+    siteName: 'KaminPro',
+    siteDescription: 'Komplette Kaminsysteme. In Minuten konfiguriert.',
+
+    logo: { src: '/scenarios/kaminpro/logo.svg', alt: 'KaminPro', width: 32, height: 32 },
+
+    colors: {
+        dark: darkColors,
+        light: lightColors,
+    },
+
+    // Opt into the technical-documentation font stack + site-wide scoped
+    // utilities (caps, tabular nums, slim scrollbars). See
+    // src/config/scenario.ts → getBrandingStyleTag() for the scoped rules.
+    fonts: {
+        technical: true,
+    },
+
+    // Narrow nav — the demo is configurator-first, not a general catalog
+    // browse. System Finder is promoted to the top slot. The direct-to-
+    // configurator entry is served by the system tiles on the landing
+    // page, so we no longer duplicate it in the nav. The remaining utility
+    // routes (quick-order, quotes) are still accessible via /account paths
+    // — they're just not advertised.
+    navLinks: [
+        { href: '/system-finder', label: 'System finden' },
+        { href: '/catalog', label: 'Katalog' },
+        { href: '/account/orders', label: 'Bestellungen' },
+    ],
+
+    // Keep the nav fixed regardless of whether the signed-in user is
+    // company-bound; company-management is still reachable via the user
+    // menu, just not promoted.
+    hideCompanyNavLink: true,
+
+    // KaminPro ships German-only — the products.csv isn't bilingualised
+    // and the UI chrome is all hand-written German. Offering a locale
+    // switch would suggest translations exist when they don't.
+    hideLanguagePicker: true,
+
+    demoAccounts: [
+        {
+            email: 'admin@holzofen-huber.demo',
+            label: 'Sepp Huber · Inhaber',
+            description: 'Holzofen Huber OG · Einzelbetrieb Hafner, keine Freigabe',
+        },
+        {
+            email: 'installer@holzofen-huber.demo',
+            label: 'Florian Pichler · Mitarbeiter',
+            description: 'Holzofen Huber OG · Installationshelfer',
+        },
+        {
+            email: 'buyer@bauer-haustechnik.demo',
+            label: 'Claudia Mayr · Einkäuferin',
+            description: 'Bauer Haustechnik · Bestellt Systeme (Freigabe ab €2.000)',
+        },
+        {
+            email: 'approver@bauer-haustechnik.demo',
+            label: 'Martin Schöpf · Freigeber',
+            description: 'Bauer Haustechnik · Genehmigt Bestellungen',
+        },
+        {
+            email: 'buyer@tiroler-energiebau.demo',
+            label: 'Johannes Gruber · Einkäufer',
+            description: 'Tiroler Energiebau · Gewerbeprojekte, Freigabe ab €2.000',
+        },
+        {
+            email: 'bu-approver@tiroler-energiebau.demo',
+            label: 'Stefan Holzmann · BU-Freigeber',
+            description: 'Tiroler Energiebau · Niederlassung Kufstein',
+        },
+        {
+            email: 'approver@tiroler-energiebau.demo',
+            label: 'Karin Lindner · Firmen-Freigeber',
+            description: 'Tiroler Energiebau · Unternehmensweite Freigabe',
+        },
+    ],
+
+    footer: {
+        copyright: 'KaminPro GmbH',
+        poweredByLinks: [
+            { label: 'Vendure Commerce', href: 'https://vendure.io' },
+        ],
+    },
+
+    metadata: {
+        themeColor: '#1c1917',
+        defaultDescription:
+            'Doppelwandige Edelstahl- und Kunststoff-Kaminsysteme für Hafner, HVAC-Betriebe und Gewerbeenergie. Mit Online-Konfigurator und Fachberatung.',
+        homepageTitle: 'Komplette Kaminsysteme. In Minuten konfiguriert.',
+        homepageDescription:
+            'StahlLine DW + PolyFlex PP — Partnerportal für Hafner, HVAC und Gewerbe. Konfigurator, Fachberatung, deterministische BOMs.',
+    },
+};

package/dist/assets/storefront/src/scenarios/kaminpro/cart-items.tsx

@@ -0,0 +1,359 @@
+'use client';
+
+import Image from 'next/image';
+import {Link} from '@/i18n/navigation';
+import {Badge} from '@/components/ui/badge';
+import {EmptyState} from '@/components/ui/empty-state';
+import {Layers, Package, ShoppingCart, ClipboardCheck} from 'lucide-react';
+import {Price} from '@/components/commerce/price';
+import {CartQuantityControl} from '@/app/[locale]/cart/cart-quantity-control';
+import {CartRemoveButton} from '@/app/[locale]/cart/cart-remove-button';
+import {useTranslations} from 'next-intl';
+
+/**
+ * KaminPro cart-items override — groups configurator-generated lines
+ * visually so a configured chimney system renders as a single card
+ * (header + BOM children), rather than as 10+ disconnected rows.
+ *
+ * Grouping contract:
+ *   - A line belongs to a "configurator group" when its customFields
+ *     expose either `productConfiguration` (the root configurable
+ *     variant) or `productConfigurationLine.productConfiguration.id`
+ *     (a generated BOM child line). We group by the shared
+ *     `productConfiguration.id`.
+ *   - The root line within a group drives the group header (name,
+ *     system, remove button). BOM children render as indented rows
+ *     with read-only quantity — an installer cannot hand-tweak the
+ *     BOM of a configured system; removing the whole config or
+ *     reconfiguring are the only paths.
+ *   - Lines without a configurator custom field render like normal.
+ */
+
+type ActiveOrder = {
+    id: string;
+    currencyCode: string;
+    lines: Array<ActiveOrderLine>;
+};
+
+type ActiveOrderLine = {
+    id: string;
+    quantity: number;
+    unitPrice: number;
+    unitPriceWithTax: number;
+    linePrice: number;
+    linePriceWithTax: number;
+    productVariant: {
+        id: string;
+        name: string;
+        sku: string;
+        price: number;
+        product: {
+            name: string;
+            slug: string;
+            featuredAsset?: { preview: string } | null;
+        };
+    };
+    customFields?: {
+        packagingUnit?: { id: string; name: string } | null;
+        packagingUnitConversionFactor?: number | null;
+        productConfiguration?: {
+            id: string;
+            name: string | null;
+            system: { id: string; code: string; name: string };
+        } | null;
+        productConfigurationLine?: {
+            id: string;
+            productConfiguration: { id: string };
+        } | null;
+    } | null;
+};
+
+interface Props {
+    activeOrder: ActiveOrder | null;
+    awaitingApprovalOrderCode?: string;
+    wasApproved?: boolean;
+    readOnly?: boolean;
+}
+
+function getConfigurationId(line: ActiveOrderLine): string | null {
+    return (
+        line.customFields?.productConfigurationLine?.productConfiguration.id ??
+        line.customFields?.productConfiguration?.id ??
+        null
+    );
+}
+
+// The configurator plugin sets `productConfigurationId` (→ the
+// `productConfiguration` relation) on BOTH the root line and every BOM
+// child. Children additionally carry `productConfigurationLineId` (→ the
+// `productConfigurationLine` relation). Presence of
+// `productConfigurationLine` is therefore the signal for "this is a child,
+// not the root".
+function isConfigRoot(line: ActiveOrderLine): boolean {
+    return !!line.customFields?.productConfiguration && !line.customFields?.productConfigurationLine;
+}
+
+export function KaminProCartItems({activeOrder, awaitingApprovalOrderCode, wasApproved, readOnly}: Props) {
+    const t = useTranslations('Cart');
+
+    if (!activeOrder || activeOrder.lines.length === 0) {
+        return (
+            <div className="container mx-auto px-4">
+                {awaitingApprovalOrderCode ? (
+                    <EmptyState
+                        icon={ClipboardCheck}
+                        heading={t('orderPendingApproval')}
+                        body={t('orderPendingApprovalMessage', {code: awaitingApprovalOrderCode})}
+                        action={{label: t('viewMyRequests'), href: '/account/approvals'}}
+                    />
+                ) : (
+                    <EmptyState
+                        icon={ShoppingCart}
+                        heading={t('empty')}
+                        body={t('emptyMessage')}
+                        action={{label: t('continueShopping'), href: '/'}}
+                    />
+                )}
+            </div>
+        );
+    }
+
+    // Walk lines once, preserving insertion order. Each configurator group is
+    // emitted in the position of its first-encountered member; standalone
+    // lines render at their natural position.
+    const groups = new Map<string, { root: ActiveOrderLine | null; lines: ActiveOrderLine[] }>();
+    const renderOrder: Array<
+        | { kind: 'group'; configId: string }
+        | { kind: 'line'; line: ActiveOrderLine }
+    > = [];
+
+    for (const line of activeOrder.lines) {
+        const configId = getConfigurationId(line);
+        if (!configId) {
+            renderOrder.push({kind: 'line', line});
+            continue;
+        }
+        if (!groups.has(configId)) {
+            groups.set(configId, {root: null, lines: []});
+            renderOrder.push({kind: 'group', configId});
+        }
+        const g = groups.get(configId)!;
+        if (isConfigRoot(line)) {
+            g.root = line;
+        } else {
+            g.lines.push(line);
+        }
+    }
+
+    return (
+        <div className="lg:col-span-2 space-y-4">
+            {renderOrder.map(entry => {
+                if (entry.kind === 'line') {
+                    return (
+                        <StandaloneLine
+                            key={entry.line.id}
+                            line={entry.line}
+                            currencyCode={activeOrder.currencyCode}
+                            wasApproved={wasApproved}
+                            readOnly={readOnly}
+                        />
+                    );
+                }
+                const group = groups.get(entry.configId)!;
+                return (
+                    <ConfigurationGroup
+                        key={entry.configId}
+                        root={group.root}
+                        lines={group.lines}
+                        currencyCode={activeOrder.currencyCode}
+                        wasApproved={wasApproved}
+                        readOnly={readOnly}
+                    />
+                );
+            })}
+        </div>
+    );
+}
+
+// ────────────────────────────────────────────────────────────────
+// Standalone (non-configured) line — mirrors the default renderer
+// ────────────────────────────────────────────────────────────────
+
+function StandaloneLine({
+    line,
+    currencyCode,
+    wasApproved,
+    readOnly,
+}: {
+    line: ActiveOrderLine;
+    currencyCode: string;
+    wasApproved?: boolean;
+    readOnly?: boolean;
+}) {
+    const t = useTranslations('Cart');
+    return (
+        <div className="flex flex-col sm:flex-row gap-4 p-4 border rounded-lg bg-card">
+            {line.productVariant.product.featuredAsset && (
+                <Link href={`/product/${line.productVariant.product.slug}`} className="flex-shrink-0">
+                    <Image
+                        src={line.productVariant.product.featuredAsset.preview}
+                        alt={line.productVariant.name}
+                        width={120}
+                        height={120}
+                        className="rounded-md object-cover w-full sm:w-[120px] h-[120px]"
+                    />
+                </Link>
+            )}
+            <div className="flex-grow min-w-0">
+                <div className="flex items-center gap-2 flex-wrap">
+                    <Link
+                        href={`/product/${line.productVariant.product.slug}`}
+                        className="font-semibold hover:underline"
+                    >
+                        {line.productVariant.product.name}
+                    </Link>
+                    {line.customFields?.packagingUnit && (
+                        <Badge className="text-sm gap-1.5 px-2.5 py-0.5 bg-primary text-primary-foreground">
+                            <Package className="h-3.5 w-3.5" />
+                            {line.customFields.packagingUnit.name}
+                        </Badge>
+                    )}
+                </div>
+                {line.productVariant.name !== line.productVariant.product.name && (
+                    <p className="text-sm text-muted-foreground mt-1">{line.productVariant.name}</p>
+                )}
+                <p className="text-sm text-muted-foreground mt-1">{t('sku', {sku: line.productVariant.sku})}</p>
+                <div className="flex items-center gap-3 mt-4">
+                    {!readOnly && (
+                        <CartQuantityControl
+                            lineId={line.id}
+                            quantity={line.quantity}
+                            requiresReapproval={wasApproved}
+                        />
+                    )}
+                    {readOnly && (
+                        <span className="text-sm text-muted-foreground">
+                            {t('qty', {quantity: line.quantity})}
+                        </span>
+                    )}
+                    {!readOnly && (
+                        <CartRemoveButton lineId={line.id} requiresReapproval={wasApproved} />
+                    )}
+                </div>
+            </div>
+            <div className="text-right flex-shrink-0 self-start">
+                <p className="font-semibold text-lg">
+                    <Price value={line.linePrice} currencyCode={currencyCode} taxLabel="excl" />
+                </p>
+                <p className="text-sm text-muted-foreground mt-1">
+                    <Price value={line.unitPrice} currencyCode={currencyCode} /> {t('each')}
+                </p>
+            </div>
+        </div>
+    );
+}
+
+// ────────────────────────────────────────────────────────────────
+// Configuration group — root header + read-only BOM children
+// ────────────────────────────────────────────────────────────────
+
+function ConfigurationGroup({
+    root,
+    lines,
+    currencyCode,
+    wasApproved,
+    readOnly,
+}: {
+    root: ActiveOrderLine | null;
+    lines: ActiveOrderLine[];
+    currencyCode: string;
+    wasApproved?: boolean;
+    readOnly?: boolean;
+}) {
+    const t = useTranslations('Cart');
+
+    // If the root line is missing (shouldn't happen — the configurator always
+    // emits a root line for a configured system), degrade by treating children
+    // as standalone lines so nothing is invisible to the user.
+    if (!root) {
+        return (
+            <div className="space-y-4">
+                {lines.map(line => (
+                    <StandaloneLine
+                        key={line.id}
+                        line={line}
+                        currencyCode={currencyCode}
+                        wasApproved={wasApproved}
+                        readOnly={readOnly}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    const configName = root.customFields?.productConfiguration?.name ?? 'Konfiguration';
+    const systemName = root.customFields?.productConfiguration?.system.name ?? root.productVariant.product.name;
+    const groupTotal = lines.reduce((s, l) => s + l.linePrice, 0);
+    const groupQuantity = lines.reduce((s, l) => s + l.quantity, 0);
+
+    return (
+        <div className="border rounded-lg bg-card overflow-hidden">
+            {/* Header row — config identity + aggregate totals + remove */}
+            <div className="flex items-start gap-4 p-4 bg-muted/30 border-b">
+                <div className="h-10 w-10 rounded-md bg-primary/10 text-primary flex items-center justify-center flex-shrink-0">
+                    <Layers className="h-5 w-5" />
+                </div>
+                <div className="flex-grow min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                        <h3 className="font-semibold text-base">{configName}</h3>
+                        <Badge variant="secondary" className="text-xs">
+                            {systemName}
+                        </Badge>
+                    </div>
+                    <p className="text-sm text-muted-foreground mt-1">
+                        {t('configGroupSummary', {
+                            positions: lines.length,
+                            pieces: groupQuantity,
+                        })}
+                    </p>
+                </div>
+                <div className="text-right flex-shrink-0">
+                    <p className="font-semibold text-lg">
+                        <Price value={groupTotal} currencyCode={currencyCode} taxLabel="excl" />
+                    </p>
+                    {!readOnly && (
+                        <div className="mt-2">
+                            <CartRemoveButton lineId={root.id} requiresReapproval={wasApproved} />
+                        </div>
+                    )}
+                </div>
+            </div>
+            {/* BOM children — read-only rows, indented under the header */}
+            <ul className="divide-y">
+                {lines.map(line => (
+                    <li key={line.id} className="flex items-start gap-3 px-4 py-3 pl-14">
+                        {line.productVariant.product.featuredAsset && (
+                            <Image
+                                src={`${line.productVariant.product.featuredAsset.preview}?preset=thumb`}
+                                alt=""
+                                width={40}
+                                height={40}
+                                className="rounded-sm object-cover flex-shrink-0 mt-0.5"
+                            />
+                        )}
+                        <div className="flex-grow min-w-0">
+                            <p className="text-sm text-foreground">{line.productVariant.product.name}</p>
+                            <p className="text-xs text-muted-foreground font-mono">{line.productVariant.sku}</p>
+                        </div>
+                        <div className="text-xs text-muted-foreground w-16 text-right flex-shrink-0 tabular-nums pt-0.5">
+                            {line.quantity} ×
+                        </div>
+                        <div className="text-sm text-foreground w-24 text-right flex-shrink-0 tabular-nums">
+                            <Price value={line.linePrice} currencyCode={currencyCode} taxLabel="excl" />
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}