@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/order-confirmation/[code]/order-confirmation.tsx

@@ -0,0 +1,296 @@
+import {client} from '@/lib/vendure/api';
+import {graphql} from '@/graphql';
+import {getLatestApprovalForOrder} from '@/lib/vendure/approval-utils';
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {CheckCircle2, Clock, XCircle, MessageSquare} from 'lucide-react';
+import {Link} from '@/i18n/navigation';
+import Image from 'next/image';
+import {Separator} from '@/components/ui/separator';
+import {Price} from '@/components/commerce/price';
+import {maskCode} from '@/lib/format';
+import {notFound} from "next/navigation";
+import {getTranslations} from 'next-intl/server';
+
+const GetOrderByCodeQuery = graphql(`
+    query GetOrderByCode($code: String!) {
+        orderByCode(code: $code) {
+            id
+            code
+            state
+            subTotal
+            subTotalWithTax
+            shipping
+            shippingWithTax
+            total
+            totalWithTax
+            currencyCode
+            storeCreditsApplied {
+                code
+                balance
+                amountDeducted
+            }
+            totalWithTaxAfterStoreCredit
+            payments {
+                id
+                method
+                amount
+                state
+                metadata
+            }
+            lines {
+                id
+                productVariant {
+                    id
+                    name
+                    product {
+                        id
+                        name
+                        slug
+                        featuredAsset {
+                            id
+                            preview
+                        }
+                    }
+                }
+                quantity
+                linePrice
+                linePriceWithTax
+            }
+            shippingAddress {
+                fullName
+                streetLine1
+                streetLine2
+                city
+                province
+                postalCode
+                country
+            }
+        }
+    }
+`);
+
+export async function OrderConfirmation({params}: {params: Promise<{locale: string; code: string}>}) {
+    const {code} = await params;
+    const t = await getTranslations('OrderConfirmation');
+    const [result, queryError] = await client.query(GetOrderByCodeQuery, {code});
+    if (queryError) {
+        notFound();
+    }
+    const order = result.data.orderByCode;
+
+    if (!order) {
+       notFound();
+    }
+
+    const taxTotal = order.totalWithTax - order.total;
+    const hasCreditsApplied = (order.storeCreditsApplied ?? []).length > 0;
+
+    // Determine the approval state for this order
+    const { latestApproval, changesComment } = await getLatestApprovalForOrder(order.id);
+
+    const isAwaitingApproval = order.state === 'AwaitingApproval';
+    const isRejected = !isAwaitingApproval && latestApproval?.status === 'REJECTED';
+    const isChangesRequested = !isAwaitingApproval && latestApproval?.status === 'CHANGES_REQUESTED';
+
+    return (
+        <div className="container mx-auto px-4 py-16">
+            <div className="max-w-3xl mx-auto">
+                <div className="text-center mb-8">
+                    {isRejected ? (
+                        <>
+                            <XCircle className="h-16 w-16 text-red-500 mx-auto mb-4"/>
+                            <h1 className="text-3xl font-bold mb-2">Order Rejected</h1>
+                            <p className="text-muted-foreground">
+                                Your order <span className="font-semibold">{order.code}</span> was not approved.
+                            </p>
+                            <div className="mt-4 flex gap-3 justify-center">
+                                <Button variant="outline" asChild>
+                                    <Link href="/account/approvals">View Approvals</Link>
+                                </Button>
+                                <Button asChild>
+                                    <Link href="/cart">Return to Cart</Link>
+                                </Button>
+                            </div>
+                        </>
+                    ) : isChangesRequested ? (
+                        <>
+                            <MessageSquare className="h-16 w-16 text-orange-500 mx-auto mb-4"/>
+                            <h1 className="text-3xl font-bold mb-2">Changes Requested</h1>
+                            <p className="text-muted-foreground">
+                                A reviewer has requested changes to your order{' '}
+                                <span className="font-semibold">{order.code}</span>.
+                            </p>
+                            {changesComment && (
+                                <blockquote className="mt-3 mx-auto max-w-md border-l-2 border-orange-300 pl-3 text-sm text-muted-foreground italic text-left">
+                                    &ldquo;{changesComment}&rdquo;
+                                </blockquote>
+                            )}
+                            <div className="mt-4">
+                                <Button asChild>
+                                    <Link href="/cart">Review &amp; Update Order</Link>
+                                </Button>
+                            </div>
+                        </>
+                    ) : isAwaitingApproval ? (
+                        <>
+                            <Clock className="h-16 w-16 text-amber-500 mx-auto mb-4"/>
+                            <h1 className="text-3xl font-bold mb-2">Order Submitted for Approval</h1>
+                            <p className="text-muted-foreground">
+                                Your order <span className="font-semibold">{order.code}</span> has been
+                                submitted and is awaiting approval. You&apos;ll be notified once a decision is made.
+                            </p>
+                            <div className="mt-4">
+                                <Button variant="outline" asChild>
+                                    <Link href="/account/approvals">View My Requests</Link>
+                                </Button>
+                            </div>
+                        </>
+                    ) : (
+                        <>
+                            <CheckCircle2 className="h-16 w-16 text-green-500 mx-auto mb-4"/>
+                            <h1 className="text-3xl font-bold mb-2">{t('orderConfirmed')}</h1>
+                            <p className="text-muted-foreground">
+                                {t('thankYou')}{' '}
+                                <span className="font-semibold">{order.code}</span>
+                            </p>
+                        </>
+                    )}
+                </div>
+
+                <Card className="mb-6">
+                    <CardHeader>
+                        <CardTitle>{t('orderSummary')}</CardTitle>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        {order.lines.map((line) => (
+                            <div key={line.id} className="flex gap-4 items-center">
+                                {line.productVariant.product.featuredAsset && (
+                                    <div className="flex-shrink-0">
+                                        <Image
+                                            src={line.productVariant.product.featuredAsset.preview}
+                                            alt={line.productVariant.name}
+                                            width={80}
+                                            height={80}
+                                            className="rounded object-cover h-20 w-20 object-center"
+                                        />
+                                    </div>
+                                )}
+                                <div className="flex-1 min-w-0">
+                                    <p className="font-medium">{line.productVariant.product.name}</p>
+                                    {line.productVariant.name !== line.productVariant.product.name && (
+                                        <p className="text-sm text-muted-foreground">
+                                            {line.productVariant.name}
+                                        </p>
+                                    )}
+                                </div>
+                                <div className="text-center w-16">
+                                    <p className="text-sm text-muted-foreground">Qty</p>
+                                    <p className="font-medium">{line.quantity}</p>
+                                </div>
+                                <div className="text-right w-24">
+                                    <p className="font-semibold">
+                                        <Price value={line.linePrice} currencyCode={order.currencyCode}/>
+                                    </p>
+                                </div>
+                            </div>
+                        ))}
+
+                        <Separator/>
+
+                        <div className="space-y-2">
+                            <div className="flex justify-between text-sm">
+                                <span className="text-muted-foreground">Subtotal <span className="text-[10px]">(excl. tax)</span></span>
+                                <span>
+                                    <Price value={order.subTotal} currencyCode={order.currencyCode}/>
+                                </span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-muted-foreground">Shipping</span>
+                                <span>
+                                    {order.shipping > 0
+                                        ? <Price value={order.shipping} currencyCode={order.currencyCode}/>
+                                        : 'FREE'}
+                                </span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-muted-foreground">Tax</span>
+                                <span>
+                                    <Price value={taxTotal} currencyCode={order.currencyCode}/>
+                                </span>
+                            </div>
+                            {hasCreditsApplied && order.storeCreditsApplied.map((credit) => (
+                                <div key={credit.code} className="flex justify-between text-sm text-green-600">
+                                    <span>Store Credit ({maskCode(credit.code)})</span>
+                                    <span>-<Price value={credit.amountDeducted} currencyCode={order.currencyCode}/></span>
+                                </div>
+                            ))}
+                        </div>
+
+                        <Separator/>
+
+                        <div>
+                            <div className="flex justify-between font-bold text-lg">
+                                <span>{t('total')}</span>
+                                <span>
+                                    {hasCreditsApplied ? (
+                                        <span className="flex items-center gap-2">
+                                            <span className="text-sm font-normal text-muted-foreground line-through">
+                                                <Price value={order.totalWithTax} currencyCode={order.currencyCode}/>
+                                            </span>
+                                            <Price value={order.totalWithTaxAfterStoreCredit} currencyCode={order.currencyCode} taxLabel="incl" />
+                                        </span>
+                                    ) : (
+                                        <Price value={order.totalWithTax} currencyCode={order.currencyCode} taxLabel="incl" />
+                                    )}
+                                </span>
+                            </div>
+                        </div>
+                    </CardContent>
+                </Card>
+
+                {order.payments && order.payments.length > 0 && (
+                    <Card className="mb-6">
+                        <CardHeader>
+                            <CardTitle>Payment</CardTitle>
+                        </CardHeader>
+                        <CardContent className="space-y-2">
+                            {order.payments.map((payment) => (
+                                <div key={payment.id} className="flex justify-between text-sm">
+                                    <span className="text-muted-foreground capitalize">{payment.method}</span>
+                                    <Price value={payment.amount} currencyCode={order.currencyCode}/>
+                                </div>
+                            ))}
+                        </CardContent>
+                    </Card>
+                )}
+
+                {order.shippingAddress && (
+                    <Card className="mb-6">
+                        <CardHeader>
+                            <CardTitle>{t('shippingAddress')}</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            <p className="font-medium">{order.shippingAddress.fullName}</p>
+                            <p className="text-sm text-muted-foreground mt-1">
+                                {order.shippingAddress.streetLine1}
+                                {order.shippingAddress.streetLine2 && `, ${order.shippingAddress.streetLine2}`}
+                            </p>
+                            <p className="text-sm text-muted-foreground">
+                                {order.shippingAddress.city}, {order.shippingAddress.province}{' '}
+                                {order.shippingAddress.postalCode}
+                            </p>
+                            <p className="text-sm text-muted-foreground">{order.shippingAddress.country}</p>
+                        </CardContent>
+                    </Card>
+                )}
+
+                <div className="flex gap-4">
+                    <Button asChild className="flex-1">
+                        <Link href="/">{t('continueShopping')}</Link>
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/order-confirmation/[code]/page.tsx

@@ -0,0 +1,18 @@
+import type {Metadata} from 'next';
+import {Suspense} from 'react';
+import {OrderConfirmation} from './order-confirmation';
+import {noIndexRobots} from '@/lib/metadata';
+
+export const metadata: Metadata = {
+    title: 'Order Confirmation',
+    description: 'Your order has been placed successfully.',
+    robots: noIndexRobots(),
+};
+
+export default async function OrderConfirmationPage(props: {params: Promise<{locale: string; code: string}>}) {
+    return (
+        <Suspense fallback={<div className="container mx-auto px-4 py-16 text-center">Loading...</div>}>
+            <OrderConfirmation {...props} />
+        </Suspense>
+    );
+}

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

@@ -0,0 +1,125 @@
+import type { Metadata } from 'next';
+import { Suspense } from 'react';
+import { SITE_NAME, SITE_URL, buildCanonicalUrl } from '@/lib/metadata';
+import { getTopCollections } from '@/lib/vendure/cached';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { setRequestLocale } from 'next-intl/server';
+import { CatalogSearchBar } from '@/components/commerce/catalog-search-bar';
+import { CategorySidebar } from '@/components/commerce/category-sidebar';
+import { CategoryProductSection } from '@/components/commerce/category-product-section';
+import { ShopByCategory } from '@/components/commerce/shop-by-category';
+import { CatalogSidebarSkeleton } from '@/components/shared/catalog-sidebar-skeleton';
+import { getBranding } from '@/config/branding';
+import { getScenarioConfig, isFullPageOverride } from '@/config/scenario';
+import type { ServerComponent, HomeSlotOverrides } from '@/config/scenario';
+
+const _branding = getBranding();
+
+export const metadata: Metadata = {
+    title: {
+        absolute: `${SITE_NAME} - ${_branding.metadata.homepageTitle}`,
+    },
+    description: _branding.metadata.homepageDescription,
+    alternates: {
+        canonical: buildCanonicalUrl('/'),
+    },
+    openGraph: {
+        title: `${SITE_NAME} - ${_branding.metadata.homepageTitle}`,
+        description: _branding.metadata.homepageDescription,
+        type: 'website',
+        url: SITE_URL,
+    },
+};
+
+function CategorySectionSkeleton() {
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-3 mt-4">
+                <div className="h-6 w-32 bg-muted rounded" />
+                <div className="flex-1 border-t border-border" />
+                <div className="h-4 w-16 bg-muted rounded" />
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {Array.from({ length: 4 }).map((_, i) => (
+                    <div key={i} className="bg-card rounded-lg overflow-hidden border border-border">
+                        <div className="aspect-[4/3] bg-muted" />
+                        <div className="p-3 space-y-1.5">
+                            <div className="h-4 bg-muted rounded w-3/4" />
+                            <div className="h-3 bg-muted rounded w-1/3" />
+                            <div className="h-5 bg-muted rounded w-1/2" />
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default async function Home({params}: {params: Promise<{locale: string}>}) {
+    const {locale} = await params;
+    setRequestLocale(locale);
+    const channelToken = await getActiveChannelToken();
+    const collections = await getTopCollections(locale, channelToken);
+    const homeOverride = getScenarioConfig().overrides?.home;
+
+    // Full page override — scenario replaces the entire homepage
+    if (isFullPageOverride(homeOverride)) {
+        const HomePage = homeOverride as ServerComponent;
+        return <HomePage />;
+    }
+
+    const slots = (homeOverride ?? {}) as HomeSlotOverrides;
+    const HeroComponent = slots.Hero;
+    const ShopByCategoryComponent = slots.ShopByCategory;
+
+    // Only surface the "Shop by Category" tile row when every top-level
+    // collection carries a featuredAsset — avoids mixed rows of real imagery
+    // and fallback icons during partial populate (see EE-73 plan concern #11).
+    const showBaseShopByCategory =
+        !ShopByCategoryComponent &&
+        collections.length > 0 &&
+        collections.every((c) => !!c.featuredAsset);
+
+    return (
+        // No wrapper padding-top here — the hero is full-bleed and absorbs
+        // the --page-top-offset inside its own content container so the
+        // background image/gradient extends to the top of the viewport.
+        // If a scenario ever omits the hero, add an explicit spacer.
+        <div>
+            {HeroComponent && <HeroComponent />}
+            {ShopByCategoryComponent ? (
+                <ShopByCategoryComponent collections={collections} />
+            ) : showBaseShopByCategory ? (
+                <section className="container mx-auto px-4 pt-8">
+                    <ShopByCategory collections={collections} />
+                </section>
+            ) : null}
+            <div className="container mx-auto px-4 pt-8">
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                <aside className="lg:col-span-1">
+                    <Suspense fallback={<CatalogSidebarSkeleton />}>
+                        <CategorySidebar collections={collections} />
+                    </Suspense>
+                </aside>
+                <div className="lg:col-span-3">
+                    <Suspense>
+                        <CatalogSearchBar />
+                    </Suspense>
+                    <div className="mt-6 space-y-12">
+                        {collections.map((collection) => (
+                            <Suspense key={collection.id} fallback={<CategorySectionSkeleton />}>
+                                <CategoryProductSection
+                                    name={collection.name}
+                                    slug={collection.slug}
+                                    locale={locale}
+                                    channelToken={channelToken}
+                                />
+                            </Suspense>
+                        ))}
+                    </div>
+                </div>
+            </div>
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,50 @@
+'use server';
+
+import {client} from '@/lib/vendure/api';
+import {RegisterCustomerAccountMutation} from '@/lib/vendure/mutations';
+import {cookies} from 'next/headers';
+import {redirect} from '@/i18n/navigation';
+
+export async function registerAction(prevState: { error?: string } | undefined, formData: FormData) {
+    const emailAddress = formData.get('emailAddress') as string;
+    const firstName = formData.get('firstName') as string;
+    const lastName = formData.get('lastName') as string;
+    const phoneNumber = formData.get('phoneNumber') as string;
+    const password = formData.get('password') as string;
+    const redirectTo = formData.get('redirectTo') as string | null;
+
+    if (!emailAddress || !password) {
+        return {error: 'Email address and password are required'};
+    }
+
+    const [result, error] = await client.mutate(RegisterCustomerAccountMutation, {
+        input: {
+            emailAddress,
+            firstName: firstName || undefined,
+            lastName: lastName || undefined,
+            phoneNumber: phoneNumber || undefined,
+            password,
+        }
+    });
+    if (error) throw error;
+
+    const registerResult = result.data.registerCustomerAccount;
+
+    if (registerResult.__typename !== 'Success') {
+        return {error: registerResult.message};
+    }
+
+    // Two mechanisms preserve redirectTo through the email verification round-trip:
+    // 1. Cookie: survives the email link click (which has no query params we control),
+    //    read by verify/actions.ts after successful verification.
+    // 2. Query param: used by the verify-pending page's "Go to Sign In" link only.
+    if (redirectTo) {
+        const cookieStore = await cookies();
+        cookieStore.set('post-verify-redirect', redirectTo, { maxAge: 60 * 60 }); // 1 hour
+    }
+    const verifyUrl = redirectTo
+        ? `/verify-pending?redirectTo=${encodeURIComponent(redirectTo)}`
+        : '/verify-pending';
+
+    await redirect(verifyUrl);
+}

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

@@ -0,0 +1,82 @@
+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 { RegistrationForm } from "./registration-form";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+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('createAccount'),
+        description: t('joinUs'),
+    };
+}
+
+function RegistrationFormSkeleton() {
+    return (
+        <Card>
+            <CardContent className="space-y-4 pt-6">
+                <div className="space-y-2">
+                    <Skeleton className="h-4 w-24" />
+                    <Skeleton className="h-10 w-full" />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                        <Skeleton className="h-4 w-20" />
+                        <Skeleton className="h-10 w-full" />
+                    </div>
+                    <div className="space-y-2">
+                        <Skeleton className="h-4 w-20" />
+                        <Skeleton className="h-10 w-full" />
+                    </div>
+                </div>
+                <div className="space-y-2">
+                    <Skeleton className="h-4 w-36" />
+                    <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>
+                <div className="space-y-2">
+                    <Skeleton className="h-4 w-32" />
+                    <Skeleton className="h-10 w-full" />
+                </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4 mt-4">
+                <Skeleton className="h-10 w-full" />
+                <Skeleton className="h-4 w-44 mx-auto" />
+            </CardFooter>
+        </Card>
+    );
+}
+
+async function RegisterContent({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    const resolvedParams = await searchParams;
+    const redirectTo = resolvedParams?.redirectTo as string | undefined;
+
+    return <RegistrationForm redirectTo={redirectTo} />;
+}
+
+export default async function RegisterPage({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    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('createAccount')}</h1>
+                <p className="text-muted-foreground">
+                    {t('signUpMessage')}
+                </p>
+            </div>
+            <Suspense fallback={<RegistrationFormSkeleton />}>
+                <RegisterContent searchParams={searchParams} />
+            </Suspense>
+        </AuthPageShell>
+    );
+}