@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/config/scenario.ts

@@ -0,0 +1,313 @@
+import type { ReactElement } from 'react';
+import type { ConfiguratorSystem, ProductDetail } from '@/lib/vendure/queries';
+import type { ShoppingListInfo } from '@/app/[locale]/account/shopping-lists/actions';
+import type { ProductInfoProps } from '@/components/commerce/product-info';
+import type { ProductSidebarProps } from '@/components/commerce/product-sidebar';
+import type { ProductImageCarouselProps } from '@/components/commerce/product-image-carousel';
+import type { RelatedProductsProps } from '@/components/commerce/related-products';
+import type { ShopByCategoryProps } from '@/components/commerce/shop-by-category';
+import { defaultScenario } from '@/scenarios/default';
+import { bauDirektScenario } from '@/scenarios/b2b-wholesale';
+import { kaminProScenario } from '@/scenarios/kaminpro';
+
+// =============================================================
+// Branding — pure serializable data (no React components)
+// =============================================================
+
+export interface StorefrontBranding {
+    siteName: string;
+    siteDescription: string;
+
+    logo: { src: string; alt: string; width: number; height: number };
+    logoInverted?: { src: string; alt: string; width: number; height: number };
+
+    /** CSS custom property overrides, keyed by variable name (e.g. '--primary', '--radius') */
+    colors: {
+        dark: Record<string, string>;
+        light: Record<string, string>;
+    };
+
+    /** Navigation links shown in the top navbar. Defaults to Catalog, Orders, Quotes. */
+    navLinks?: Array<{ href: string; label: string }>;
+
+    /**
+     * By default the Navbar appends an `Unternehmen` link for logged-in
+     * company-bound users. Opt out to keep the scenario nav strip fixed —
+     * useful for demos that want to keep the nav narrow regardless of
+     * who's signed in.
+     */
+    hideCompanyNavLink?: boolean;
+
+    /**
+     * Hide the globe / language-picker dropdown in the navbar. Useful for
+     * single-locale scenarios where offering a locale switch suggests
+     * translations exist when they don't. The underlying routing still
+     * carries the locale prefix; only the UI affordance is suppressed.
+     */
+    hideLanguagePicker?: boolean;
+
+    /** Demo accounts shown on the sign-in page for quick login. */
+    demoAccounts?: Array<{ email: string; label: string; description: string }>;
+
+    footer: {
+        copyright: string;
+        poweredByLinks?: Array<{ label: string; href: string }>;
+    };
+
+    metadata: {
+        themeColor: string;
+        defaultDescription: string;
+        homepageTitle: string;
+        homepageDescription: string;
+    };
+
+    /**
+     * Optional typography opt-ins. Default scenarios get the standard Geist
+     * stack; opting in swaps the whole site onto the scenario's preferred
+     * typeface. Kept as a narrow flag set rather than a free-form font
+     * descriptor so next/font imports can stay at module scope (required by
+     * next/font — dynamic imports are not supported).
+     */
+    fonts?: {
+        /**
+         * Use the "technical documentation" stack: `Inter Tight` for prose
+         * and `JetBrains Mono` for code/monospace contexts. Also adds the
+         * `.kp-app` class to `<body>` so scenario-scoped utility styles
+         * (caps tracking, tabular nums, slim scrollbars) engage.
+         */
+        technical?: boolean;
+    };
+}
+
+// =============================================================
+// Component override types
+// =============================================================
+
+/**
+ * A component type that supports both sync (Client) and async (Server) components.
+ * React's ComponentType can't express async Server Components — see
+ * https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/65079
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export type ServerComponent<P = {}> = (props: P) => ReactElement | Promise<ReactElement>;
+
+/** Props for a full PDP page override */
+export interface PdpPageProps {
+    product: ProductDetail;
+    searchParams: { [key: string]: string | string[] | undefined };
+    breadcrumbs: Array<{ name: string; href?: string }>;
+    shoppingLists: ShoppingListInfo[] | null;
+    currencyCode: string;
+    /** Active channel token — pass to publicClient queries for correct channel isolation in 'use cache' functions. */
+    channelToken?: string;
+    /**
+     * Fetched `ConfiguratorSystem` for products carrying a
+     * `configuratorSystemCode` custom field. `null` for non-configurable
+     * products (a conditional PDP override would normally gate on this).
+     */
+    configuratorSystem?: ConfiguratorSystem | null;
+}
+
+/** Slot-level overrides for the default PDP layout */
+export interface PdpSlotOverrides {
+    ProductInfo?: ServerComponent<ProductInfoProps>;
+    ProductSidebar?: ServerComponent<ProductSidebarProps>;
+    ProductImageCarousel?: ServerComponent<ProductImageCarouselProps>;
+    RelatedProducts?: ServerComponent<RelatedProductsProps>;
+}
+
+/**
+ * Full-page PDP override that only engages when `shouldApply` returns true
+ * for the current product. Non-matching products fall through to the default
+ * PDP composition (or to `slots` if both are provided on a future extension).
+ */
+export interface ConditionalPdpOverride {
+    shouldApply: (product: ProductDetail) => boolean;
+    component: ServerComponent<PdpPageProps>;
+}
+
+/** Slot-level overrides for the default homepage layout */
+export interface HomeSlotOverrides {
+    Hero?: ServerComponent;
+    /**
+     * Replace the default `ShopByCategory` tile row. The base component only
+     * renders when every top-level collection has a `featuredAsset`; an
+     * override is free to ignore that rule.
+     */
+    ShopByCategory?: ServerComponent<ShopByCategoryProps>;
+}
+
+/** Slot-level overrides for the default cart page. */
+export interface CartSlotOverrides {
+    /**
+     * Replace the `<CartItems>` component inside the cart page. The override
+     * receives the same props as the built-in component and is responsible
+     * for rendering the entire line-items column (not the order summary /
+     * promotion-code sidebar).
+     *
+     * Typed as `ComponentType<any>` to avoid locking the storefront into the
+     * built-in `ActiveOrder` shape — a scenario override can query its own
+     * extra fields and declare a stricter type locally.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    CartItems?: ServerComponent<any>;
+}
+
+// =============================================================
+// Channel switching
+// =============================================================
+
+export interface ChannelOption {
+    /** The vendure-token header value */
+    token: string;
+    /** Human-readable label shown in the picker UI (e.g. "Österreich") */
+    label: string;
+    /** ISO 3166-1 alpha-2 country code (e.g. "AT", "DE") */
+    countryCode: string;
+}
+
+export interface ChannelsConfig {
+    /** Available channels for this scenario */
+    available: ChannelOption[];
+    /** Token of the channel to use when no cookie is set */
+    defaultToken: string;
+}
+
+// =============================================================
+// Scenario Config
+// =============================================================
+
+export interface ScenarioConfig {
+    branding: StorefrontBranding;
+
+    /** Multi-channel configuration. When present, enables the ChannelPicker in the navbar. */
+    channels?: ChannelsConfig;
+
+    /**
+     * Per-page overrides. Each key accepts EITHER:
+     * - A ServerComponent to replace the entire page
+     * - An object with slot keys to override individual sections
+     */
+    overrides?: {
+        pdp?: ServerComponent<PdpPageProps> | ConditionalPdpOverride | PdpSlotOverrides;
+        home?: ServerComponent | HomeSlotOverrides;
+        cart?: CartSlotOverrides;
+    };
+
+    /** Scenario-specific routes. The route page file checks this to render or return notFound(). */
+    routes?: Record<string, ServerComponent>;
+}
+
+/**
+ * Type guard: is the override a full page component (a function), versus a
+ * slot-overrides object?
+ *
+ * NOTE: this guard discriminates ONLY on `typeof === 'function'`. If a future
+ * override variant is added that is itself callable (e.g. a higher-order
+ * component returning a slot map), this guard breaks. Only add object-valued
+ * variants to the override unions.
+ */
+export function isFullPageOverride(
+    override: unknown,
+): override is (...args: unknown[]) => unknown {
+    return typeof override === 'function';
+}
+
+/** Type guard: is the override a conditional `{ shouldApply, component }` form? */
+export function isConditionalPdpOverride(
+    override: unknown,
+): override is ConditionalPdpOverride {
+    return (
+        typeof override === 'object' &&
+        override !== null &&
+        typeof (override as ConditionalPdpOverride).shouldApply === 'function' &&
+        typeof (override as ConditionalPdpOverride).component === 'function'
+    );
+}
+
+// =============================================================
+// Registry — add new scenarios here
+// =============================================================
+
+const registry: Record<string, ScenarioConfig> = {
+    default: defaultScenario,
+    'b2b-wholesale': bauDirektScenario,
+    kaminpro: kaminProScenario,
+};
+
+// Safe to cache at module level: NEXT_PUBLIC_SCENARIO is baked at build time, so
+// the active scenario never changes within a single process/build.
+let _cached: ScenarioConfig | undefined;
+
+export function getScenarioConfig(): ScenarioConfig {
+    if (_cached) return _cached;
+    const scenario = process.env.NEXT_PUBLIC_SCENARIO || 'default';
+    if (!registry[scenario]) {
+        console.warn(
+            `[scenario] Unknown scenario "${scenario}" — falling back to "default". ` +
+            `Did you register it in scenario.ts?`,
+        );
+    }
+    _cached = registry[scenario] ?? registry.default;
+    return _cached;
+}
+
+export function getBranding(): StorefrontBranding {
+    return getScenarioConfig().branding;
+}
+
+export function getChannelsConfig(): ChannelsConfig | undefined {
+    return getScenarioConfig().channels;
+}
+
+const _brandingStyleTag = (() => {
+    const { colors, fonts } = getBranding();
+    const darkVars = Object.entries(colors.dark)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join('; ') + ';';
+    const lightVars = Object.entries(colors.light)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join('; ') + ';';
+
+    let base = `:root { ${darkVars} } .light { ${lightVars} }`;
+
+    // Scenario-scoped typography overrides. The `.kp-app` class is only
+    // added to <body> when `fonts.technical === true`, so these rules
+    // are dormant for every other scenario.
+    if (fonts?.technical) {
+        base += `
+.kp-app {
+    --font-geist-sans: var(--font-inter-tight);
+    --font-geist-mono: var(--font-jetbrains-mono);
+    font-feature-settings: 'ss01', 'cv11', 'tnum';
+    letter-spacing: -0.005em;
+}
+.kp-app .caps {
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+.kp-app .mono {
+    font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
+}
+.kp-app :where(table, .tabular-nums) { font-variant-numeric: tabular-nums; }
+/* Slim scrollbars in scenario-scoped scroll containers (same rules as
+   the configurator's scroll-slim utility, just widened in scope). */
+.kp-app *::-webkit-scrollbar { width: 8px; height: 8px; }
+.kp-app *::-webkit-scrollbar-track { background: transparent; }
+.kp-app *::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+    border: 2px solid var(--background);
+}
+.kp-app *::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }
+`;
+    }
+
+    return base;
+})();
+
+export function getBrandingStyleTag(): string {
+    return _brandingStyleTag;
+}

package/dist/assets/storefront/src/contexts/auth-context.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import {createContext, ReactNode, useContext} from 'react';
+import {ResultOf} from '@/graphql';
+import {ActiveCustomerFragment} from '@/lib/vendure/fragments';
+
+type ActiveCustomer = ResultOf<typeof ActiveCustomerFragment>;
+
+interface AuthContextType {
+    activeCustomer: Promise<ActiveCustomer | null>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+interface AuthProviderProps {
+    children: ReactNode;
+    initialActiveCustomerPromise: Promise<ActiveCustomer | null>;
+}
+
+export function AuthProvider({children, initialActiveCustomerPromise}: AuthProviderProps) {
+
+    return (
+        <AuthContext.Provider value={{activeCustomer: initialActiveCustomerPromise}}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth() {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+}

package/dist/assets/storefront/src/graphql.ts

@@ -0,0 +1,14 @@
+import { initGraphQLTada } from 'gql.tada';
+import type { introspection } from './graphql-env.d.ts';
+
+export const graphql = initGraphQLTada<{
+    introspection: introspection;
+    scalars: {
+        DateTime: string,
+        JSON: Record<string, unknown>,
+        Money: number
+    }
+}>();
+
+export type { FragmentOf, ResultOf, VariablesOf } from 'gql.tada';
+export { readFragment } from 'gql.tada';

package/dist/assets/storefront/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/dist/assets/storefront/src/i18n/locale-utils.ts

@@ -0,0 +1,33 @@
+import {routing, type Locale} from './routing';
+
+const INTL_LOCALE_MAP: Record<Locale, string> = {en: 'en-US', de: 'de-DE'};
+const OG_LOCALE_MAP: Record<Locale, string> = {en: 'en_US', de: 'de_DE'};
+
+/** Map a routing locale to a full BCP-47 tag for Intl APIs. Falls back to the raw locale. */
+export function toIntlLocale(locale: string): string {
+    return INTL_LOCALE_MAP[locale as Locale] ?? locale;
+}
+
+/** Map a routing locale to an OpenGraph-style locale. Falls back to the raw locale. */
+export function toOgLocale(locale: string): string {
+    return OG_LOCALE_MAP[locale as Locale] ?? locale;
+}
+
+/** Prepend a locale prefix to a path. Ensures no double-prefixing. */
+export function applyLocalePrefix(path: string, locale: string): string {
+    const stripped = stripLocalePrefix(path);
+    return `/${locale}${stripped === '/' ? '' : stripped}`;
+}
+
+/** Strip locale prefix from a path. Returns the path unchanged if no prefix matches. */
+export function stripLocalePrefix(path: string): string {
+    for (const locale of routing.locales) {
+        if (path.startsWith(`/${locale}/`)) {
+            return path.slice(locale.length + 1) || '/';
+        }
+        if (path === `/${locale}`) {
+            return '/';
+        }
+    }
+    return path;
+}

package/dist/assets/storefront/src/i18n/locales.ts

@@ -0,0 +1,18 @@
+/**
+ * Single source of truth for the set of locales the storefront supports.
+ *
+ * Kept in its own tiny module so modules outside the routing graph
+ * (e.g. server actions, helpers that need to narrow `string → Locale`)
+ * can import the `Locale` type without pulling `routing.ts`'s full
+ * import surface — `routing.ts` itself is imported by client components
+ * via `@/i18n/navigation`, so anything it drags in ends up in client
+ * bundles.
+ */
+export const LOCALES = ['en', 'de'] as const;
+
+export type Locale = (typeof LOCALES)[number];
+
+export const localeNames: Record<Locale, string> = {
+    en: 'English',
+    de: 'Deutsch',
+};

package/dist/assets/storefront/src/i18n/navigation.ts

@@ -0,0 +1,35 @@
+import {createNavigation} from 'next-intl/navigation';
+import {routing} from './routing';
+
+const nav = createNavigation(routing);
+
+export const Link = nav.Link;
+export const usePathname = nav.usePathname;
+export const useRouter = nav.useRouter;
+export const getPathname = nav.getPathname;
+
+/**
+ * Locale-aware redirect that accepts a plain pathname string.
+ *
+ * next-intl 4.9+ changed nav.redirect() to require {href, locale} instead
+ * of a plain string. This wrapper preserves the simpler call-site API used
+ * across ~30 server actions and pages: redirect('/path').
+ *
+ * ⚠ MUST BE AWAITED. This is an async function — a bare `redirect('/path')`
+ * call returns a floating Promise and the NEXT_REDIRECT never gets thrown,
+ * so the caller keeps executing past the "redirect". Always write:
+ *
+ *     await redirect('/path');
+ *
+ * (Unlike `redirect` from `next/navigation`, which is synchronous and
+ * throws immediately.)
+ *
+ * Uses a dynamic import for getLocale to avoid pulling next-intl/server
+ * into the module's top-level scope (which would break client component
+ * bundling since this module also exports Link).
+ */
+export async function redirect(pathname: string, type?: 'push' | 'replace'): Promise<never> {
+    const {getLocale} = await import('next-intl/server');
+    const locale = await getLocale();
+    return nav.redirect({href: pathname, locale}, type);
+}

package/dist/assets/storefront/src/i18n/request.ts

@@ -0,0 +1,19 @@
+import {hasLocale} from 'next-intl';
+import {getRequestConfig} from 'next-intl/server';
+import {routing} from './routing';
+
+// Static per-locale imports. When adding a new locale to routing.locales,
+// add a corresponding entry here.
+const messageImports = {
+    en: () => import('../../messages/en.json'),
+    de: () => import('../../messages/de.json'),
+} as const;
+
+export default getRequestConfig(async ({requestLocale}) => {
+    const requested = await requestLocale;
+    const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
+    return {
+        locale,
+        messages: (await messageImports[locale]()).default,
+    };
+});

package/dist/assets/storefront/src/i18n/routing.ts

@@ -0,0 +1,19 @@
+import {defineRouting} from 'next-intl/routing';
+import {getScenarioMeta} from '@/config/scenario-meta';
+import {LOCALES, type Locale, localeNames} from './locales';
+
+// Scenarios declare their preferred default locale in their own
+// `meta.ts` (a client-safe projection that never imports React or
+// server-only APIs). `getScenarioMeta()` resolves the active scenario
+// at build time from `NEXT_PUBLIC_SCENARIO` and returns its meta.
+// Scenarios that don't declare a `defaultLocale` inherit the first
+// entry in `LOCALES`.
+const scenarioDefaultLocale = getScenarioMeta().defaultLocale ?? LOCALES[0];
+
+export const routing = defineRouting({
+    locales: LOCALES,
+    defaultLocale: scenarioDefaultLocale,
+});
+
+export type {Locale};
+export {localeNames};

package/dist/assets/storefront/src/i18n/server.ts

@@ -0,0 +1,16 @@
+import {getLocale} from 'next-intl/server';
+import {hasLocale} from 'next-intl';
+import {routing, type Locale} from './routing';
+
+/**
+ * Resolve the current locale from request context with validation.
+ * Falls back to defaultLocale if the resolved locale isn't in routing config.
+ *
+ * Use this in non-cached server components and server actions.
+ * For 'use cache' scopes or route files (layout/page), prefer rootLocale()
+ * from 'next/root-params' directly (the SWC transform only works in route files).
+ */
+export async function getRouteLocale(): Promise<Locale> {
+    const loc = await getLocale();
+    return hasLocale(routing.locales, loc) ? (loc as Locale) : routing.defaultLocale;
+}

package/dist/assets/storefront/src/lib/actions/switch-channel.ts

@@ -0,0 +1,32 @@
+'use server';
+
+import {cookies} from 'next/headers';
+import {revalidatePath} from 'next/cache';
+import {CHANNEL_COOKIE} from '@/lib/channel';
+import {CURRENCY_COOKIE} from '@/lib/currency';
+import {getChannelsConfig} from '@/config/scenario';
+
+export async function switchChannel(token: string) {
+    const channelsConfig = getChannelsConfig();
+    if (!channelsConfig) {
+        return {success: false, message: 'Channel switching not configured'};
+    }
+    if (!channelsConfig.available.some(c => c.token === token)) {
+        return {success: false, message: 'Invalid channel token'};
+    }
+
+    const jar = await cookies();
+    jar.set(CHANNEL_COOKIE, token, {
+        path: '/',
+        maxAge: 60 * 60 * 24 * 365,
+        sameSite: 'lax',
+        httpOnly: true,
+    });
+
+    // Clear currency preference — the new channel may have different available currencies,
+    // so let getActiveCurrencyCode() fall back to the new channel's default.
+    jar.delete(CURRENCY_COOKIE);
+
+    revalidatePath('/', 'layout');
+    return {success: true};
+}

package/dist/assets/storefront/src/lib/actions/switch-currency.ts

@@ -0,0 +1,25 @@
+'use server';
+
+import {cookies} from 'next/headers';
+import {revalidatePath} from 'next/cache';
+import {CURRENCY_COOKIE} from '@/lib/currency';
+import {getActiveChannelCached} from '@/lib/vendure/cached';
+
+export async function switchCurrency(currencyCode: string) {
+    const {getActiveChannelToken} = await import('@/lib/channel-server');
+    const channelToken = await getActiveChannelToken();
+    const channel = await getActiveChannelCached(channelToken);
+    if (!channel.availableCurrencyCodes.includes(currencyCode as never)) {
+        return {success: false, message: 'Invalid currency code'};
+    }
+
+    const jar = await cookies();
+    jar.set(CURRENCY_COOKIE, currencyCode, {
+        path: '/',
+        maxAge: 60 * 60 * 24 * 365,
+        sameSite: 'lax',
+    });
+
+    revalidatePath('/', 'layout');
+    return {success: true};
+}

package/dist/assets/storefront/src/lib/auth.ts

@@ -0,0 +1,18 @@
+import {cookies} from 'next/headers';
+
+const AUTH_TOKEN_COOKIE = process.env.VENDURE_AUTH_TOKEN_COOKIE || 'vendure-auth-token';
+
+export async function setAuthToken(token: string) {
+    const cookieStore = await cookies();
+    cookieStore.set(AUTH_TOKEN_COOKIE, token);
+}
+
+export async function getAuthToken(): Promise<string | undefined> {
+    const cookieStore = await cookies();
+    return cookieStore.get(AUTH_TOKEN_COOKIE)?.value;
+}
+
+export async function removeAuthToken() {
+    const cookieStore = await cookies();
+    cookieStore.delete(AUTH_TOKEN_COOKIE);
+}

package/dist/assets/storefront/src/lib/backend-health.ts

@@ -0,0 +1,38 @@
+import {cacheLife} from 'next/cache';
+
+const HEALTH_CHECK_TIMEOUT_MS = 3000;
+
+/**
+ * Pings the Vendure Shop API to check whether the backend is reachable.
+ *
+ * Used to detect when a demo scenario has been paused via the demo control
+ * panel — in that case the storefront still resolves (it's hosted separately
+ * on Vercel) but every API call fails, leaving the user with a branded but
+ * empty shell. When this returns false we render a "Demo Paused" page instead.
+ *
+ * Cached for 15s (cacheLife('seconds')) so a stop/start of the backend is
+ * reflected quickly without hammering the API on every request.
+ */
+export async function isBackendReachable(): Promise<boolean> {
+    'use cache';
+    cacheLife('seconds');
+
+    const apiUrl = process.env.VENDURE_SHOP_API_URL || process.env.NEXT_PUBLIC_VENDURE_SHOP_API_URL;
+    if (!apiUrl) return true;
+
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), HEALTH_CHECK_TIMEOUT_MS);
+    try {
+        const res = await fetch(apiUrl, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({query: '{ __typename }'}),
+            signal: controller.signal,
+        });
+        return res.ok;
+    } catch {
+        return false;
+    } finally {
+        clearTimeout(timeout);
+    }
+}