@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/forgot-password/forgot-password-form.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { useTranslations } from 'next-intl';
+import { requestPasswordResetAction } from './actions';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form';
+import {Link} from '@/i18n/navigation';
+
+const forgotPasswordSchema = z.object({
+    emailAddress: z.email('Please enter a valid email address'),
+});
+
+type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;
+
+export function ForgotPasswordForm() {
+    const t = useTranslations('Auth');
+    const [isPending, startTransition] = useTransition();
+    const [serverError, setServerError] = useState<string | null>(null);
+    const [success, setSuccess] = useState(false);
+
+    const form = useForm<ForgotPasswordFormData>({
+        resolver: zodResolver(forgotPasswordSchema),
+        defaultValues: {
+            emailAddress: '',
+        },
+    });
+
+    const onSubmit = (data: ForgotPasswordFormData) => {
+        setServerError(null);
+
+        startTransition(async () => {
+            const formData = new FormData();
+            formData.append('emailAddress', data.emailAddress);
+
+            const result = await requestPasswordResetAction(undefined, formData);
+            if (result?.error) {
+                setServerError(result.error);
+            } else if (result?.success) {
+                setSuccess(true);
+            }
+        });
+    };
+
+    if (success) {
+        return (
+            <Card>
+                <CardHeader>
+                    <CardTitle>{t('checkYourEmail')}</CardTitle>
+                    <CardDescription>
+                        {t('checkYourEmailDescription')}
+                    </CardDescription>
+                </CardHeader>
+                <CardFooter>
+                    <Link href="/sign-in">
+                        <Button variant="outline" className="w-full">
+                            {t('backToSignIn')}
+                        </Button>
+                    </Link>
+                </CardFooter>
+            </Card>
+        );
+    }
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{t('forgotPasswordTitle')}</CardTitle>
+                <CardDescription>
+                    {t('forgotPasswordDescription')}
+                </CardDescription>
+            </CardHeader>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)}>
+                    <CardContent>
+                        <FormField
+                            control={form.control}
+                            name="emailAddress"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t('email')}</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            type="email"
+                                            placeholder="you@example.com"
+                                            disabled={isPending}
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        {serverError && (
+                            <div className="text-sm text-destructive mt-4">
+                                {serverError}
+                            </div>
+                        )}
+                    </CardContent>
+                    <CardFooter className="flex flex-col space-y-4 mt-4">
+                        <Button type="submit" className="w-full" disabled={isPending}>
+                            {isPending ? t('sending') : t('sendResetLink')}
+                        </Button>
+                        <Link
+                            href="/sign-in"
+                            className="text-sm text-center text-muted-foreground hover:text-primary"
+                        >
+                            {t('backToSignIn')}
+                        </Link>
+                    </CardFooter>
+                </form>
+            </Form>
+        </Card>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/forgot-password/page.tsx

@@ -0,0 +1,24 @@
+import type {Metadata} from 'next';
+import {getTranslations} from 'next-intl/server';
+import {locale as rootLocale} from 'next/root-params';
+import {type Locale} from '@/i18n/routing';
+import { ForgotPasswordForm } from './forgot-password-form';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'Auth'});
+    return {
+        title: t('forgotPasswordPageTitle'),
+        description: t('forgotPasswordDescription'),
+    };
+}
+
+export default async function ForgotPasswordPage() {
+    return (
+        <div className="min-h-[calc(100vh-200px)] flex items-center justify-center px-4">
+            <div className="w-full max-w-md">
+                <ForgotPasswordForm />
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/globals.css

@@ -0,0 +1,72 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* =============================================================
+   Color values are injected at runtime via a <style> tag in
+   layout.tsx from the active scenario's branding config.
+   See: src/config/branding.ts
+   ============================================================= */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* =============================================================
+   Page content is offset past the fixed <header> via pt-[var(...)].
+   --navbar-height is the actual height of the fixed navbar (h-14 = 56px
+   + 8px shadow/breathing). --banner-height is the awaiting-approval
+   banner height; defaults to 0 (no banner) but is overridden by the
+   <AwaitingApprovalBanner/> when active. --page-top-offset is the sum.
+   ============================================================= */
+:root {
+  --navbar-height: 64px;
+  --banner-height: 0px;
+  --page-top-offset: calc(var(--navbar-height) + var(--banner-height));
+}

package/dist/assets/storefront/src/app/[locale]/layout.tsx

@@ -0,0 +1,202 @@
+import type {Metadata, Viewport} from "next";
+import {Geist, Geist_Mono, Inter_Tight, JetBrains_Mono} from "next/font/google";
+import {NextIntlClientProvider} from 'next-intl';
+import {getMessages, setRequestLocale} from 'next-intl/server';
+import "./globals.css";
+import {Toaster} from "@/components/ui/sonner";
+import {Navbar} from "@/components/layout/navbar";
+import {Footer} from "@/components/layout/footer";
+import {ThemeProvider} from "@/components/providers/theme-provider";
+import {SITE_NAME, SITE_URL, buildAlternates} from "@/lib/metadata";
+import {Suspense} from "react";
+import {SearchBarProvider} from "@/lib/search-bar-context";
+import {CartCountProvider} from "@/lib/cart-count-context";
+import {CartCountServer} from "@/components/providers/cart-count-server";
+import {CompanyContextGuard} from "@/components/providers/company-context-guard";
+import {CompanyPermissionsServer} from "@/components/providers/company-permissions-server";
+import {BackendHealthGate} from "@/components/shared/scenario-paused";
+import {getBranding, getBrandingStyleTag} from "@/config/branding";
+// next/root-params provides cache-safe locale resolution. The SWC transform
+// only runs in route files (layout/page), so this import cannot be moved to
+// a utility module. There must be no layout.tsx above [locale] — see next.config.ts.
+import {locale as rootLocale} from 'next/root-params';
+import {hasLocale} from 'next-intl';
+import {routing, type Locale} from '@/i18n/routing';
+import {toOgLocale} from '@/i18n/locale-utils';
+
+const geistSans = Geist({
+    variable: "--font-geist-sans",
+    subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"],
+});
+
+// Technical-documentation typography stack — loaded at module scope
+// (next/font requirement). The .variable classes are only applied to
+// <body> when the active scenario's branding opts in via `fonts.technical`;
+// other scenarios render with Geist and never see these CSS variables.
+const interTight = Inter_Tight({
+    variable: "--font-inter-tight",
+    subsets: ["latin"],
+});
+
+const jetbrainsMono = JetBrains_Mono({
+    variable: "--font-jetbrains-mono",
+    subsets: ["latin"],
+});
+
+const _branding = getBranding();
+const _technicalFonts = _branding.fonts?.technical ?? false;
+
+export async function generateMetadata(): Promise<Metadata> {
+    const loc = await rootLocale();
+    const locale = hasLocale(routing.locales, loc) ? (loc as Locale) : routing.defaultLocale;
+    return {
+        metadataBase: new URL(SITE_URL),
+        title: {
+            default: SITE_NAME,
+            template: `%s | ${SITE_NAME}`,
+        },
+        description: _branding.metadata.defaultDescription,
+        alternates: buildAlternates('/', locale),
+        openGraph: {
+            type: "website",
+            siteName: SITE_NAME,
+            locale: toOgLocale(locale),
+        },
+        twitter: {
+            card: "summary_large_image",
+        },
+        robots: {
+            index: true,
+            follow: true,
+            googleBot: {
+                index: true,
+                follow: true,
+                "max-video-preview": -1,
+                "max-image-preview": "large",
+                "max-snippet": -1,
+            },
+        },
+    };
+}
+
+export const viewport: Viewport = {
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 5,
+    themeColor: _branding.metadata.themeColor,
+};
+
+export function generateStaticParams() {
+    return routing.locales.map((locale) => ({locale}));
+}
+
+// Matches the exact structure of <Footer /> so the swap is zero-shift.
+function FooterSkeleton() {
+    return (
+        <footer className="bg-muted border-t border-border mt-auto">
+            <div className="container mx-auto px-4 py-12">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+                    {/* Categories (5 items) */}
+                    <div>
+                        <div className="h-5 w-20 mb-4" />
+                        <div className="space-y-2">
+                            {Array.from({length: 5}).map((_, i) => (
+                                <div key={i} className="h-5 rounded" style={{width: `${50 + i * 8}%`}} />
+                            ))}
+                        </div>
+                    </div>
+                    {/* Account (5 items) */}
+                    <div>
+                        <div className="h-5 w-16 mb-4" />
+                        <div className="space-y-2">
+                            {Array.from({length: 5}).map((_, i) => (
+                                <div key={i} className="h-5 rounded" style={{width: `${40 + i * 10}%`}} />
+                            ))}
+                        </div>
+                    </div>
+                    {/* Customer Service (3 items) */}
+                    <div>
+                        <div className="h-5 w-32 mb-4" />
+                        <div className="space-y-2">
+                            {Array.from({length: 3}).map((_, i) => (
+                                <div key={i} className="h-5 rounded" style={{width: `${50 + i * 15}%`}} />
+                            ))}
+                        </div>
+                    </div>
+                    {/* Powered By (3 items) */}
+                    <div>
+                        <div className="h-5 w-24 mb-4" />
+                        <div className="space-y-2">
+                            {Array.from({length: 3}).map((_, i) => (
+                                <div key={i} className="h-5 rounded" style={{width: `${55 + i * 12}%`}} />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-10 pt-6 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4">
+                    <div className="h-5 w-64" />
+                    <div className="h-4 w-8" />
+                </div>
+            </div>
+        </footer>
+    );
+}
+
+export default async function LocaleLayout({children, params}: {children: React.ReactNode; params: Promise<{locale: string}>}) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const messages = await getMessages({locale});
+
+    return (
+        <html lang={locale} suppressHydrationWarning>
+            <head>
+                <style dangerouslySetInnerHTML={{ __html: getBrandingStyleTag() }} />
+            </head>
+            <body
+                className={[
+                    geistSans.variable,
+                    geistMono.variable,
+                    // Only mount the technical-font CSS vars + .kp-app
+                    // scope class when the active scenario has opted in.
+                    _technicalFonts ? interTight.variable : '',
+                    _technicalFonts ? jetbrainsMono.variable : '',
+                    _technicalFonts ? 'kp-app' : '',
+                    'antialiased flex flex-col min-h-screen',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+            >
+                <NextIntlClientProvider locale={locale} messages={messages}>
+                    <ThemeProvider>
+                        <CartCountProvider initialCount={0}>
+                            <Suspense>
+                                <CompanyContextGuard />
+                                <CartCountServer />
+                            </Suspense>
+                            <Suspense fallback={null}>
+                                <CompanyPermissionsServer>
+                                    <SearchBarProvider>
+                                        <Navbar />
+                                        {children}
+                                        <Suspense fallback={<FooterSkeleton />}>
+                                            <Footer locale={locale} />
+                                        </Suspense>
+                                        <Toaster />
+                                    </SearchBarProvider>
+                                </CompanyPermissionsServer>
+                            </Suspense>
+                        </CartCountProvider>
+                        <Suspense fallback={null}>
+                            <BackendHealthGate locale={locale} />
+                        </Suspense>
+                    </ThemeProvider>
+                </NextIntlClientProvider>
+            </body>
+        </html>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/not-found.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@/components/ui/button';
+import {Link} from "@/i18n/navigation";
+import {getTranslations} from 'next-intl/server';
+
+export default async function NotFound() {
+    const t = await getTranslations('NotFound');
+    return (
+        <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center px-4">
+            <div className="text-center space-y-6 max-w-md">
+                <h1 className="text-6xl font-bold text-primary">404</h1>
+                <h2 className="text-2xl font-semibold">{t('title')}</h2>
+                <p className="text-muted-foreground">
+                    {t('message')}
+                </p>
+                <div className="flex gap-4 justify-center">
+                    <Button asChild>
+                        <Link href="/">{t('goHome')}</Link>
+                    </Button>
+                    <Button asChild variant="outline">
+                        <Link href="/search">{t('browseProducts')}</Link>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}