@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/shopping-list/[code]/page.tsx

@@ -0,0 +1,157 @@
+import type { Metadata } from 'next';
+import { Suspense } from 'react';
+import { getTranslations } from 'next-intl/server';
+import { locale as rootLocale } from 'next/root-params';
+import type { Locale } from '@/i18n/routing';
+import { getPublicShoppingList } from '@/app/[locale]/account/shopping-lists/actions';
+import Image from 'next/image';
+import {Link} from '@/i18n/navigation';
+import { Price } from '@/components/commerce/price';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { SITE_NAME, buildCanonicalUrl, buildAlternates } from '@/lib/metadata';
+import { getActiveChannelCached } from '@/lib/vendure/cached';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { PublicShoppingListAddToCart } from './add-to-cart-button';
+
+export async function generateMetadata({
+    params,
+}: { params: Promise<{ locale: string; code: string }> }): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'SharedShoppingList'});
+    const { code } = await params;
+    const shoppingList = await getPublicShoppingList(code);
+
+    if (!shoppingList) {
+        return { title: t('notFoundTitle') };
+    }
+
+    const title = `${shoppingList.name} - ${t('sharedSuffix')}`;
+    const description = shoppingList.description || t('itemsSharedOn', {count: shoppingList.totalItems, siteName: SITE_NAME});
+    const listPath = `/shopping-list/${code}`;
+
+    return {
+        title,
+        description,
+        alternates: buildAlternates(listPath, locale),
+        openGraph: {
+            title,
+            description,
+            type: 'website',
+            url: buildCanonicalUrl(listPath, locale),
+        },
+    };
+}
+
+export default async function PublicShoppingListPage({ params }: { params: Promise<{ locale: string; code: string }> }) {
+    return (
+        <Suspense fallback={<div className="container mx-auto px-4 py-30"><p className="text-sm text-muted-foreground">Loading...</p></div>}>
+            <PublicShoppingListContent params={params} />
+        </Suspense>
+    );
+}
+
+async function PublicShoppingListContent({ params }: { params: Promise<{ locale: string; code: string }> }) {
+    const { code } = await params;
+    const channelToken = await getActiveChannelToken();
+    const [t, shoppingList, channel] = await Promise.all([
+        getTranslations('SharedShoppingList'),
+        getPublicShoppingList(code),
+        getActiveChannelCached(channelToken),
+    ]);
+    const currencyCode = channel.defaultCurrencyCode;
+
+    if (!shoppingList) {
+        return (
+            <div className="container mx-auto px-4 py-30">
+                <div className="max-w-3xl mx-auto text-center space-y-4">
+                    <h1 className="text-3xl font-bold">{t('notFoundTitle')}</h1>
+                    <p className="text-muted-foreground">
+                        {t('notFoundMessage')}
+                    </p>
+                    <Button asChild variant="outline">
+                        <Link href="/">{t('browseProducts')}</Link>
+                    </Button>
+                </div>
+            </div>
+        );
+    }
+
+    const items = shoppingList.items ?? [];
+
+    return (
+        <div className="container mx-auto px-4 py-30">
+            <div className="max-w-3xl mx-auto">
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold">{shoppingList.name}</h1>
+                    {shoppingList.description && (
+                        <p className="text-muted-foreground mt-2">{shoppingList.description}</p>
+                    )}
+                    <p className="text-sm text-muted-foreground mt-1">
+                        {t('itemCount', {count: shoppingList.totalItems})}
+                    </p>
+                </div>
+
+                {items.length === 0 ? (
+                    <div className="text-center py-12">
+                        <p className="text-gray-500">{t('emptyMessage')}</p>
+                    </div>
+                ) : (
+                    <div className="space-y-4">
+                        {items.map((item) => (
+                            <div
+                                key={item.id}
+                                className="flex items-center gap-4 border rounded-lg p-4"
+                            >
+                                <Link href={`/product/${item.productVariant.product.slug}`} className="shrink-0">
+                                    {item.productVariant.product.featuredAsset ? (
+                                        <Image
+                                            src={item.productVariant.product.featuredAsset.preview + '?preset=thumb'}
+                                            alt={item.productVariant.product.name}
+                                            width={80}
+                                            height={80}
+                                            className="rounded-md object-cover"
+                                        />
+                                    ) : (
+                                        <div className="w-20 h-20 bg-muted rounded-md" />
+                                    )}
+                                </Link>
+
+                                <div className="flex-1 min-w-0">
+                                    <Link
+                                        href={`/product/${item.productVariant.product.slug}`}
+                                        className="font-medium hover:underline"
+                                    >
+                                        {item.productVariant.product.name}
+                                    </Link>
+                                    <p className="text-sm text-muted-foreground">{item.productVariant.name}</p>
+                                    <div className="flex items-center gap-2 mt-1">
+                                        <Price value={item.productVariant.priceWithTax} currencyCode={currencyCode} />
+                                        {item.quantity > 1 && (
+                                            <span className="text-sm text-muted-foreground">x{item.quantity}</span>
+                                        )}
+                                        {item.purchased && (
+                                            <Badge variant="secondary">{t('purchasedBadge')}</Badge>
+                                        )}
+                                        {item.productVariant.stockLevel === 'OUT_OF_STOCK' ? (
+                                            <Badge variant="destructive">{t('outOfStockBadge')}</Badge>
+                                        ) : (
+                                            <Badge variant="outline" className="text-green-600 border-green-600">{t('inStockBadge')}</Badge>
+                                        )}
+                                    </div>
+                                    {item.note && (
+                                        <p className="text-sm text-muted-foreground mt-1 italic">{item.note}</p>
+                                    )}
+                                </div>
+
+                                <div className="shrink-0">
+                                    <PublicShoppingListAddToCart variantId={item.productVariant.id} outOfStock={item.productVariant.stockLevel === 'OUT_OF_STOCK'} />
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/sign-in/actions.ts

@@ -0,0 +1,76 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {LoginMutation, LogoutMutation} from '@/lib/vendure/mutations';
+import {GetCompanyAccountQuery} from '@/lib/vendure/queries';
+import {removeAuthToken, setAuthToken} from '@/lib/auth';
+import {setCompanyId, setBusinessUnitId, clearCompanyContext} from '@/lib/company-context';
+import {readFragment} from '@/graphql';
+import {CompanyFragment, CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
+import {revalidatePath, revalidateTag} from "next/cache";
+import {redirect} from "@/i18n/navigation";
+
+export async function loginAction(prevState: { error?: string } | undefined, formData: FormData) {
+    const username = formData.get('username') as string;
+    const password = formData.get('password') as string;
+    const redirectTo = formData.get('redirectTo') as string | null;
+
+    const [result, error] = await client.mutate(LoginMutation, {
+        username,
+        password,
+    });
+    if (error) throw error;
+
+    const loginResult = result.data.login;
+
+    if (loginResult.__typename !== 'CurrentUser') {
+        if (loginResult.__typename === 'NotVerifiedError') {
+            return { error: 'Please verify your email address before signing in.' };
+        }
+        return { error: 'Invalid email or password.' };
+    }
+
+    // Store the token in a cookie if returned
+    if (result.authToken) {
+        await setAuthToken(result.authToken);
+    }
+
+    // Set company context if the user belongs to a company
+    const [accountResult, accountError] = await client.query(GetCompanyAccountQuery, undefined, {
+        authToken: result.authToken,
+    });
+    if (!accountError) {
+        const companyAccount = accountResult.data.companyAccount;
+        if (companyAccount) {
+            const company = readFragment(CompanyFragment, companyAccount.company);
+            await setCompanyId(company.id);
+            if (companyAccount.activeBusinessUnit) {
+                const bu = readFragment(CompanyBusinessUnitFragment, companyAccount.activeBusinessUnit);
+                await setBusinessUnitId(bu.id);
+            }
+        }
+    }
+    // Company context is optional — don't block login if it fails
+
+    revalidateTag('active-customer', {expire: 0});
+    revalidatePath('/', 'layout');
+
+    // Validate redirectTo is a safe internal path
+    const safeRedirect = redirectTo?.startsWith('/') && !redirectTo.startsWith('//')
+        ? redirectTo
+        : '/';
+
+    await redirect(safeRedirect);
+}
+
+export async function logoutAction() {
+    await client.mutate(LogoutMutation);
+    await removeAuthToken();
+    await clearCompanyContext();
+    revalidateTag('active-customer', {expire: 0});
+    revalidateTag('cart', {expire: 0});
+    revalidateTag('active-order', {expire: 0});
+    revalidatePath('/', 'layout');
+
+    return { redirectTo: '/' };
+}

package/dist/assets/storefront/src/app/[locale]/sign-in/login-form.tsx

@@ -0,0 +1,177 @@
+'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 {loginAction} from './actions';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Card, CardContent, CardFooter} from '@/components/ui/card';
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from '@/components/ui/form';
+import {Link} from '@/i18n/navigation';
+
+function useLoginSchema() {
+    const t = useTranslations('Auth');
+    return z.object({
+        username: z.email(t('emailValidation')),
+        password: z.string().min(1, t('passwordRequired')),
+    });
+}
+
+type LoginFormData = z.infer<ReturnType<typeof useLoginSchema>>;
+
+const DEFAULT_DEMO_ACCOUNTS = [
+    {email: 'buyer@acme-demo.com', label: 'Buyer', description: 'Acme · Places orders (needs approval)'},
+    {email: 'approver@acme-demo.com', label: 'Approver', description: 'Acme · Approves/rejects orders'},
+    {email: 'admin@acme-demo.com', label: 'Admin', description: 'Acme · Full company management'},
+    {email: 'admin@globex-demo.com', label: 'Admin', description: 'Globex · Different company'},
+];
+
+interface LoginFormProps {
+    redirectTo?: string;
+    demoAccounts?: Array<{ email: string; label: string; description: string }>;
+}
+
+export function LoginForm({redirectTo, demoAccounts}: LoginFormProps) {
+    const t = useTranslations('Auth');
+    const [isPending, startTransition] = useTransition();
+    const [serverError, setServerError] = useState<string | null>(null);
+    const loginSchema = useLoginSchema();
+
+    const form = useForm<LoginFormData>({
+        resolver: zodResolver(loginSchema),
+        defaultValues: {
+            username: '',
+            password: '',
+        },
+    });
+
+    const onSubmit = (data: LoginFormData) => {
+        setServerError(null);
+
+        startTransition(async () => {
+            const formData = new FormData();
+            formData.append('username', data.username);
+            formData.append('password', data.password);
+            if (redirectTo) {
+                formData.append('redirectTo', redirectTo);
+            }
+
+            const result = await loginAction(undefined, formData);
+            if (result?.error) {
+                setServerError(result.error);
+            }
+        });
+    };
+
+    const registerHref = redirectTo
+        ? `/register?redirectTo=${encodeURIComponent(redirectTo)}`
+        : '/register';
+
+    const fillDemoAccount = (email: string) => {
+        form.setValue('username', email);
+        form.setValue('password', 'test');
+    };
+
+    return (
+        <div className="space-y-4">
+            <Card>
+                <Form {...form}>
+                    <form onSubmit={form.handleSubmit(onSubmit)}>
+                        <CardContent className="space-y-4">
+                            <FormField
+                                control={form.control}
+                                name="username"
+                                render={({field}) => (
+                                    <FormItem>
+                                        <FormLabel>{t('email')}</FormLabel>
+                                        <FormControl>
+                                            <Input
+                                                type="email"
+                                                placeholder="you@example.com"
+                                                disabled={isPending}
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage/>
+                                    </FormItem>
+                                )}
+                            />
+
+                            <FormField
+                                control={form.control}
+                                name="password"
+                                render={({field}) => (
+                                    <FormItem>
+                                        <div className="flex items-center justify-between">
+                                            <FormLabel>{t('password')}</FormLabel>
+                                            <Link
+                                                href="/forgot-password"
+                                                className="text-muted-foreground hover:text-primary text-sm"
+                                            >
+                                                {t('forgotPassword')}
+                                            </Link>
+                                        </div>
+
+                                        <FormControl>
+                                            <Input
+                                                type="password"
+                                                placeholder="••••••••"
+                                                disabled={isPending}
+                                                {...field}
+                                            />
+                                        </FormControl>
+                                        <FormMessage/>
+                                    </FormItem>
+                                )}
+                            />
+
+                            {serverError && (
+                                <div className="text-sm text-destructive">
+                                    {serverError}
+                                </div>
+                            )}
+                            <Button type="submit" className="w-full" disabled={isPending}>
+                                {isPending ? t('signingIn') : t('signIn')}
+                            </Button>
+                        </CardContent>
+                        <CardFooter className="flex flex-col space-y-4 mt-2">
+                            <div className="text-muted-foreground text-sm text-center">
+                                {t('noAccount')}{' '}
+                                <Link href={registerHref} className="hover:text-primary underline">
+                                    {t('register')}
+                                </Link>
+                            </div>
+                        </CardFooter>
+                    </form>
+                </Form>
+            </Card>
+
+            <div className="space-y-2">
+                <p className="text-xs text-muted-foreground text-center">{t('demoAccounts')}</p>
+                <div className="grid grid-cols-2 gap-2">
+                    {(demoAccounts ?? DEFAULT_DEMO_ACCOUNTS).map((account) => (
+                        <button
+                            key={account.email}
+                            type="button"
+                            className="text-left rounded-lg border p-3 hover:bg-muted/50 transition-colors"
+                            onClick={() => fillDemoAccount(account.email)}
+                        >
+                            <div className="text-sm font-medium">{account.label}</div>
+                            <div className="text-xs text-muted-foreground">{account.description}</div>
+                        </button>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/sign-in/page.tsx

@@ -0,0 +1,81 @@
+import type {Metadata} from 'next';
+import {redirect} from 'next/navigation';
+import {Suspense} from 'react';
+import {getTranslations} from 'next-intl/server';
+import {LoginForm} from "./login-form";
+import {Card, CardContent, CardFooter} from "@/components/ui/card";
+import {Skeleton} from "@/components/ui/skeleton";
+import {getActiveCustomer} from "@/lib/vendure/actions";
+import {getBranding} from "@/config/branding";
+import {locale as rootLocale} from 'next/root-params';
+import {type Locale} from '@/i18n/routing';
+import {AuthPageShell} from '@/components/layout/auth-page-shell';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'Auth'});
+    return {
+        title: t('pageTitle'),
+        description: t('welcomeBack'),
+    };
+}
+
+function LoginFormSkeleton() {
+    return (
+        <Card>
+            <CardContent className="space-y-4 pt-6">
+                <div className="space-y-2">
+                    <Skeleton className="h-4 w-12"/>
+                    <Skeleton className="h-10 w-full"/>
+                </div>
+                <div className="space-y-2">
+                    <Skeleton className="h-4 w-16"/>
+                    <Skeleton className="h-10 w-full"/>
+                </div>
+                <Skeleton className="h-10 w-full"/>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+
+                <div className="flex flex-col items-center space-y-2">
+                    <Skeleton className="h-4 w-40"/>
+                </div>
+            </CardFooter>
+        </Card>
+    );
+}
+
+async function SignInContent({searchParams, locale}: { searchParams: Promise<Record<string, string | string[] | undefined>>; locale: string }) {
+    const resolvedParams = await searchParams;
+    const redirectTo = resolvedParams?.redirectTo as string | undefined;
+    const safeRedirect = redirectTo?.startsWith('/') && !redirectTo.startsWith('//')
+        ? redirectTo
+        : '/';
+
+    const customer = await getActiveCustomer();
+    if (customer) {
+        redirect(`/${locale}${safeRedirect}`);
+    }
+
+    return <LoginForm redirectTo={redirectTo} demoAccounts={getBranding().demoAccounts} />;
+}
+
+export default async function SignInPage({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    // Use explicit {locale, namespace} form — the namespace-only form reads
+    // from request context (headers), which is forbidden at page level with
+    // cacheComponents/dynamicIO outside a Suspense boundary.
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'Auth'});
+    return (
+        <AuthPageShell>
+            <div className="space-y-2 text-center">
+                <h1 className="text-3xl font-bold">{t('signIn')}</h1>
+                <p className="text-muted-foreground">
+                    {t('enterCredentials')}
+                </p>
+            </div>
+            <Suspense fallback={<LoginFormSkeleton/>}>
+                <SignInContent searchParams={searchParams} locale={locale}/>
+            </Suspense>
+        </AuthPageShell>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/verify/actions.ts

@@ -0,0 +1,41 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {VerifyCustomerAccountMutation} from '@/lib/vendure/mutations';
+import {setAuthToken} from '@/lib/auth';
+import {cookies} from 'next/headers';
+
+export async function verifyAccountAction(token: string, password?: string) {
+    if (!token) {
+        return {error: 'Verification token is required'};
+    }
+
+    const [result, error] = await client.mutate(VerifyCustomerAccountMutation, {
+        token,
+        password: password || undefined,
+    });
+
+    if (error) {
+        return {error: 'An unexpected error occurred. Please try again.'};
+    }
+
+    const verifyResult = result.data.verifyCustomerAccount;
+
+    if (verifyResult.__typename !== 'CurrentUser') {
+        return {error: verifyResult.message};
+    }
+
+    // Store the token in a cookie if returned
+    if (result.authToken) {
+        await setAuthToken(result.authToken);
+    }
+
+    // Check for a post-verification redirect (e.g. invitation flow)
+    const cookieStore = await cookies();
+    const redirectTo = cookieStore.get('post-verify-redirect')?.value;
+    if (redirectTo) {
+        cookieStore.delete('post-verify-redirect');
+    }
+
+    return {success: true, redirectTo: redirectTo || null};
+}

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

@@ -0,0 +1,40 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {Card, CardContent} from '@/components/ui/card';
+import {Loader2} from 'lucide-react';
+import {getTranslations} from 'next-intl/server';
+import {locale as rootLocale} from 'next/root-params';
+import {type Locale} from '@/i18n/routing';
+import {AuthPageShell} from '@/components/layout/auth-page-shell';
+import {VerifyContent} from './verify-content';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'Verify'});
+    return {
+        title: t('accountVerified'),
+        description: t('accountVerifiedMessage'),
+    };
+}
+
+function VerifyLoading() {
+    return (
+        <Card>
+            <CardContent className="pt-6 space-y-4">
+                <div className="flex justify-center">
+                    <Loader2 className="h-16 w-16 text-primary animate-spin"/>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}
+
+export default function VerifyPage({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    return (
+        <AuthPageShell>
+            <Suspense fallback={<VerifyLoading/>}>
+                <VerifyContent searchParams={searchParams}/>
+            </Suspense>
+        </AuthPageShell>
+    );
+}