@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/(catalog)/product/[slug]/loading.tsx

@@ -0,0 +1,46 @@
+import { CatalogSidebarSkeleton } from '@/components/shared/catalog-sidebar-skeleton';
+
+export default function ProductLoading() {
+    return (
+        <div className="animate-pulse">
+            <div className="py-4 flex items-center">
+                <div className="flex items-center gap-1.5">
+                    <div className="h-5 w-12 bg-muted rounded" />
+                    <div className="h-4 w-4 bg-muted rounded" />
+                    <div className="h-5 w-24 bg-muted rounded" />
+                    <div className="h-4 w-4 bg-muted rounded" />
+                    <div className="h-5 w-36 bg-muted rounded" />
+                </div>
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                <aside className="lg:col-span-1">
+                    <CatalogSidebarSkeleton />
+                </aside>
+                <div className="lg:col-span-3">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div>
+                            <div className="aspect-[4/3] w-full rounded-lg bg-muted" />
+                            <div className="flex gap-2 mt-4">
+                                {Array.from({ length: 4 }).map((_, i) => (
+                                    <div key={i} className="h-16 w-16 rounded-md bg-muted" />
+                                ))}
+                            </div>
+                        </div>
+                        <div className="space-y-6">
+                            <div>
+                                <div className="h-9 w-3/4 bg-muted rounded" />
+                                <div className="h-8 w-24 bg-muted rounded mt-2" />
+                            </div>
+                            <div className="space-y-2">
+                                <div className="h-4 w-full bg-muted rounded" />
+                                <div className="h-4 w-full bg-muted rounded" />
+                                <div className="h-4 w-2/3 bg-muted rounded" />
+                            </div>
+                            <div className="h-12 w-full bg-muted rounded" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/(catalog)/product/[slug]/page.tsx

@@ -0,0 +1,330 @@
+import type { Metadata } from 'next';
+import { Suspense } from 'react';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { publicClient, client, getVendureContext } from '@/lib/vendure/api';
+import type { VendureContext } from '@/lib/vendure/api';
+import { GetProductDetailQuery, GetGiftCardTemplatesQuery, GetDraftVariantQuery, GetConfiguratorSystemQuery, type ConfiguratorSystem } from '@/lib/vendure/queries';
+import { draftMode } from 'next/headers';
+import { ProductImageCarousel } from '@/components/commerce/product-image-carousel';
+import { ProductInfo } from '@/components/commerce/product-info';
+import { GiftCardPdp } from '@/components/commerce/gift-card-pdp';
+import type { GiftCardTemplate } from '@/lib/vendure/queries';
+import { RelatedProducts } from '@/components/commerce/related-products';
+import { ProductSidebar } from '@/components/commerce/product-sidebar';
+import { Breadcrumbs } from '@/components/shared/breadcrumbs';
+import { getScenarioConfig, isConditionalPdpOverride, isFullPageOverride } from '@/config/scenario';
+import type { PdpPageProps, PdpSlotOverrides, ServerComponent } from '@/config/scenario';
+import { notFound } from 'next/navigation';
+import { cacheLife, cacheTag } from 'next/cache';
+import {
+    SITE_NAME,
+    truncateDescription,
+    buildCanonicalUrl,
+    buildAlternates,
+    buildOgImages,
+} from '@/lib/metadata';
+import { getActiveChannelCached } from '@/lib/vendure/cached';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { addGiftCardToCart, evaluateConfiguration, addConfigurationToOrder } from './actions';
+import { getShoppingListsWithMembership } from '@/app/[locale]/account/shopping-lists/actions';
+import { ConfiguratorForm } from '@/components/commerce/configurator-form';
+
+async function getProductData(slug: string, locale: string, ctx?: VendureContext, channelToken?: string) {
+    'use cache: private';
+    cacheLife('hours');
+    const effectiveToken = ctx?.channelToken ?? channelToken;
+    cacheTag(`product-${slug}-${locale}${effectiveToken ? `-${effectiveToken}` : ''}`, `products-${locale}`);
+
+    const opts = {languageCode: locale};
+    const [result, error] = ctx
+        ? await client.query(GetProductDetailQuery, { slug }, {...ctx, ...opts})
+        : await publicClient.query(GetProductDetailQuery, { slug }, {...opts, ...(channelToken ? {channelToken} : {})});
+    if (error) return undefined;
+    return result;
+}
+
+async function getGiftCardTemplates(locale: string) {
+    'use cache';
+    cacheLife('hours');
+    cacheTag(`gift-card-templates-${locale}`);
+
+    const [result, error] = await publicClient.query(GetGiftCardTemplatesQuery, undefined, {languageCode: locale});
+    if (error) return undefined;
+    return result;
+}
+
+export async function generateMetadata({
+    params,
+}: { params: Promise<{ locale: string; slug: string }> }): Promise<Metadata> {
+    const { locale, slug } = await params;
+    const channelToken = await getActiveChannelToken();
+    const [result, t] = await Promise.all([
+        getProductData(slug, locale, undefined, channelToken),
+        getTranslations({locale, namespace: 'Product'}),
+    ]);
+    if (!result) {
+        return { title: t('notFound') };
+    }
+    const product = result.data.product;
+
+    if (!product) {
+        return { title: t('notFound') };
+    }
+
+    const description = truncateDescription(product.description);
+    const ogImage = product.assets?.[0]?.preview;
+    const fallbackDescription = t('shopProductAt', { name: product.name, siteName: SITE_NAME });
+
+    const productPath = `/product/${product.slug}`;
+    return {
+        title: product.name,
+        description: description || fallbackDescription,
+        alternates: buildAlternates(productPath, locale),
+        openGraph: {
+            title: product.name,
+            description: description || fallbackDescription,
+            type: 'website',
+            url: buildCanonicalUrl(productPath, locale),
+            images: buildOgImages(ogImage, product.name),
+        },
+        twitter: {
+            card: 'summary_large_image',
+            title: product.name,
+            description: description || fallbackDescription,
+            images: ogImage ? [ogImage] : undefined,
+        },
+    };
+}
+
+export default async function ProductDetailPage({
+    params,
+    searchParams,
+}: {
+    params: Promise<{ locale: string; slug: string }>;
+    searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+    return (
+        <Suspense fallback={<ProductDetailSkeleton />}>
+            <ProductDetailContent params={params} searchParams={searchParams} />
+        </Suspense>
+    );
+}
+
+function ProductDetailSkeleton() {
+    return (
+        <>
+            <div className="pt-4 pb-10 h-[52px]" />
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                <aside className="lg:col-span-1">
+                    <div className="animate-pulse space-y-4">
+                        <div className="h-6 bg-muted rounded w-3/4" />
+                        <div className="h-6 bg-muted rounded w-1/2" />
+                    </div>
+                </aside>
+                <div className="lg:col-span-3">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div className="aspect-square bg-muted rounded animate-pulse" />
+                        <div className="animate-pulse space-y-4">
+                            <div className="h-8 bg-muted rounded w-3/4" />
+                            <div className="h-6 bg-muted rounded w-1/2" />
+                            <div className="h-10 bg-muted rounded w-1/3" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+async function ProductDetailContent({
+    params,
+    searchParams,
+}: {
+    params: Promise<{ locale: string; slug: string }>;
+    searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+    const { locale, slug } = await params;
+    setRequestLocale(locale);
+    const searchParamsResolved = await searchParams;
+    const ctx = await getVendureContext();
+
+    const result = await getProductData(slug, ctx.locale, ctx);
+    if (!result) {
+        notFound();
+    }
+    const product = result.data.product;
+
+    if (!product) {
+        notFound();
+    }
+
+    // In draft mode, re-fetch each variant via the top-level query so the
+    // DraftModeInterceptor can apply draft snapshots.
+    const draft = await draftMode();
+    if (draft.isEnabled && product.variants?.length) {
+        const draftVariants = await Promise.all(
+            product.variants.map(v => client.query(GetDraftVariantQuery, { id: v.id })),
+        );
+        for (let i = 0; i < product.variants.length; i++) {
+            const [res] = draftVariants[i];
+            const dv = res?.data.contentVersioningProductVariant;
+            if (dv) {
+                Object.assign(product.variants[i], { name: dv.name, sku: dv.sku });
+            }
+        }
+    }
+
+    const isGiftCard = product.customFields?.isGiftCard === true;
+
+    const [channel, shoppingLists] = await Promise.all([
+        getActiveChannelCached(ctx.channelToken),
+        getShoppingListsWithMembership(),
+    ]);
+    const currencyCode = channel.defaultCurrencyCode;
+
+    let giftCardTemplates: GiftCardTemplate[] = [];
+    if (isGiftCard) {
+        const templatesResult = await getGiftCardTemplates(ctx.locale);
+        giftCardTemplates = templatesResult?.data.giftCardTemplates?.items ?? [];
+    }
+
+    const primaryCollection = product.collections?.find((c) => c.parent?.id) ?? product.collections?.[0];
+
+    const collectionCrumbs = primaryCollection?.breadcrumbs
+        ?.filter((b) => b.slug !== '__root_collection__')
+        .map((b) => ({ name: b.name, href: `/collection/${b.slug}` })) ?? [];
+    const breadcrumbs = [...collectionCrumbs, { name: product.name }];
+
+    // Gift cards have their own dedicated PDP — they bypass scenario overrides intentionally.
+    if (isGiftCard && giftCardTemplates.length > 0) {
+        return (
+            <>
+                <Breadcrumbs items={breadcrumbs} />
+                <GiftCardPdp
+                    templates={giftCardTemplates}
+                    currencyCode={currencyCode}
+                    addToCartAction={addGiftCardToCart}
+                />
+            </>
+        );
+    }
+
+    // Configurable product — fetch the system so we can swap the info slot
+    const configuratorSystemCode = product.customFields?.configuratorSystemCode;
+    let configuratorSystem: ConfiguratorSystem | null = null;
+    if (configuratorSystemCode) {
+        const [systemResult] = await client.query(GetConfiguratorSystemQuery, { code: configuratorSystemCode }, { languageCode: locale });
+        configuratorSystem = systemResult?.data.configuratorSystem ?? null;
+    }
+
+    // Scenario overrides — full page replacement, conditional full page, or
+    // individual slot swaps
+    const pdpOverride = getScenarioConfig().overrides?.pdp;
+
+    const fullPageComponent: ServerComponent<PdpPageProps> | null = isFullPageOverride(pdpOverride)
+        ? (pdpOverride as ServerComponent<PdpPageProps>)
+        : isConditionalPdpOverride(pdpOverride) && pdpOverride.shouldApply(product)
+          ? pdpOverride.component
+          : null;
+
+    if (fullPageComponent) {
+        const PdpPage = fullPageComponent;
+        return (
+            <>
+                <Breadcrumbs items={breadcrumbs} />
+                <PdpPage
+                    product={product}
+                    searchParams={searchParamsResolved}
+                    breadcrumbs={breadcrumbs}
+                    shoppingLists={shoppingLists}
+                    currencyCode={currencyCode}
+                    channelToken={ctx.channelToken}
+                    configuratorSystem={configuratorSystem}
+                />
+            </>
+        );
+    }
+
+    const slots = (isConditionalPdpOverride(pdpOverride) ? {} : (pdpOverride ?? {})) as PdpSlotOverrides;
+    const InfoComponent = slots.ProductInfo ?? ProductInfo;
+    const SidebarComponent = slots.ProductSidebar ?? ProductSidebar;
+    const CarouselComponent = slots.ProductImageCarousel ?? ProductImageCarousel;
+    const RelatedComponent = slots.RelatedProducts ?? RelatedProducts;
+
+    const productDescription = product.description ? (
+        <div className="prose prose-sm max-w-none">
+            <div dangerouslySetInnerHTML={{__html: product.description}}/>
+        </div>
+    ) : null;
+
+    if (configuratorSystem) {
+        return (
+            <>
+                <Breadcrumbs items={breadcrumbs} />
+                <ConfiguratorForm
+                    system={configuratorSystem}
+                    productName={product.name}
+                    currencyCode={currencyCode}
+                    evaluateAction={evaluateConfiguration}
+                    addToOrderAction={addConfigurationToOrder}
+                >
+                    <CarouselComponent images={product.assets} />
+                    {productDescription}
+                </ConfiguratorForm>
+                {primaryCollection && (
+                    <div className="mt-12">
+                        <RelatedComponent
+                            collectionSlug={primaryCollection.slug}
+                            currentProductId={product.id}
+                            locale={locale}
+                            channelToken={ctx.channelToken}
+                        />
+                    </div>
+                )}
+            </>
+        );
+    }
+
+    return (
+        <>
+            <Breadcrumbs items={breadcrumbs} />
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                <aside className="lg:col-span-1">
+                    <SidebarComponent
+                        collections={product.collections ?? []}
+                        variants={product.variants}
+                        productName={product.name}
+                        optionGroups={product.optionGroups}
+                        searchParams={searchParamsResolved}
+                        slug={slug}
+                    />
+                </aside>
+
+                <div className="lg:col-span-3">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div>
+                            <div className="md:sticky md:top-20 md:self-start">
+                                <CarouselComponent images={product.assets} />
+                            </div>
+                            {productDescription && <div className="mt-6">{productDescription}</div>}
+                        </div>
+                        <div>
+                            <InfoComponent product={product} searchParams={searchParamsResolved} shoppingLists={shoppingLists} currencyCode={currencyCode} />
+                        </div>
+                    </div>
+
+                    {primaryCollection && (
+                        <div className="mt-12">
+                            <RelatedComponent
+                                collectionSlug={primaryCollection.slug}
+                                currentProductId={product.id}
+                                locale={locale}
+                                channelToken={ctx.channelToken}
+                            />
+                        </div>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/(catalog)/search/actions.ts

@@ -0,0 +1,11 @@
+'use server';
+
+import { client } from '@/lib/vendure/api';
+import { LogSearchListViewedMutation } from '@/lib/vendure/mutations';
+import { after } from 'next/server';
+
+export async function logSearchListViewed(queryId: string) {
+    after(async () => {
+        await client.mutate(LogSearchListViewedMutation, { input: { queryId } });
+    });
+}

package/dist/assets/storefront/src/app/[locale]/(catalog)/search/loading.tsx

@@ -0,0 +1,20 @@
+import { CatalogSidebarSkeleton } from '@/components/shared/catalog-sidebar-skeleton';
+import { ProductGridSkeleton } from '@/components/shared/product-grid-skeleton';
+
+export default function SearchLoading() {
+    return (
+        <div className="animate-pulse">
+            <div className="py-4 flex items-center">
+                <div className="h-5 w-48 bg-muted rounded" />
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                <aside className="lg:col-span-1">
+                    <CatalogSidebarSkeleton />
+                </aside>
+                <div className="lg:col-span-3">
+                    <ProductGridSkeleton />
+                </div>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/(catalog)/search/page.tsx

@@ -0,0 +1,97 @@
+import type { Metadata } from 'next';
+import { Suspense } from 'react';
+import { locale as rootLocale } from 'next/root-params';
+import { getTranslations } from 'next-intl/server';
+import { SearchResults } from '@/app/[locale]/(catalog)/search/search-results';
+import { Breadcrumbs } from '@/components/shared/breadcrumbs';
+import { CatalogSidebarSkeleton } from '@/components/shared/catalog-sidebar-skeleton';
+import { ProductGridSkeleton } from '@/components/shared/product-grid-skeleton';
+import { SITE_NAME, noIndexRobots } from '@/lib/metadata';
+import { type Locale } from '@/i18n/routing';
+
+export async function generateMetadata({
+    searchParams,
+}: { searchParams: Promise<{ q?: string }> }): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const [resolvedParams, t] = await Promise.all([
+        searchParams,
+        getTranslations({locale, namespace: 'Search'}),
+    ]);
+    const searchQuery = resolvedParams.q as string | undefined;
+
+    const title = searchQuery
+        ? t('resultsFor', { query: searchQuery })
+        : t('pageTitle');
+
+    return {
+        title,
+        description: searchQuery
+            ? t('metaDescription', { query: searchQuery, siteName: SITE_NAME })
+            : t('metaCatalogDescription', { siteName: SITE_NAME }),
+        robots: noIndexRobots(),
+    };
+}
+
+export default async function SearchPage({
+    searchParams,
+}: {
+    searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+    return (
+        <Suspense fallback={<SearchPageSkeleton />}>
+            <SearchContent searchParamsPromise={searchParams} />
+        </Suspense>
+    );
+}
+
+async function SearchContent({
+    searchParamsPromise,
+}: {
+    searchParamsPromise: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+    const [resolvedParams, t] = await Promise.all([
+        searchParamsPromise,
+        getTranslations('Search'),
+    ]);
+    const searchQuery = (resolvedParams.q as string) || '';
+
+    const breadcrumbs = searchQuery
+        ? [{ name: t('breadcrumbResults', { query: searchQuery }) }]
+        : [];
+
+    return (
+        <>
+            <Breadcrumbs items={breadcrumbs} />
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                <Suspense fallback={
+                    <>
+                        <aside className="lg:col-span-1">
+                            <CatalogSidebarSkeleton />
+                        </aside>
+                        <div className="lg:col-span-3">
+                            <ProductGridSkeleton />
+                        </div>
+                    </>
+                }>
+                    <SearchResults searchParams={searchParamsPromise} />
+                </Suspense>
+            </div>
+        </>
+    );
+}
+
+function SearchPageSkeleton() {
+    return (
+        <>
+            <div className="pt-4 pb-10 h-[52px]" />
+            <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 pb-8">
+                <aside className="lg:col-span-1">
+                    <CatalogSidebarSkeleton />
+                </aside>
+                <div className="lg:col-span-3">
+                    <ProductGridSkeleton />
+                </div>
+            </div>
+        </>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/(catalog)/search/search-analytics-tracker.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { type SearchProductsResult } from '@/lib/vendure/queries';
+import { use, useEffect, useRef, type MouseEvent, type ReactNode } from 'react';
+import { logSearchListViewed } from './actions';
+
+interface SearchAnalyticsTrackerProps {
+    productDataPromise: SearchProductsResult;
+    children: ReactNode;
+}
+
+export function SearchAnalyticsTracker({ productDataPromise, children }: SearchAnalyticsTrackerProps) {
+    const result = use(productDataPromise);
+    const queryId = result.data.search.queryId;
+    const lastFiredQueryId = useRef<string | null>(null);
+
+    useEffect(() => {
+        if (queryId && queryId !== lastFiredQueryId.current) {
+            lastFiredQueryId.current = queryId;
+            logSearchListViewed(queryId);
+        }
+    }, [queryId]);
+
+    const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+        if (!queryId) return;
+        const target = (e.target as HTMLElement).closest<HTMLElement>('[data-search-product-id]');
+        if (!target) return;
+        const productId = target.dataset.searchProductId;
+        const position = target.dataset.searchPosition;
+        if (productId && position) {
+            // Use fetch+keepalive instead of a server action. Server action POSTs
+            // get coalesced with <Link> navigation, targeting the destination URL
+            // which doesn't have this action — causing "unexpected response" errors.
+            fetch('/api/search-analytics', {
+                method: 'POST',
+                body: JSON.stringify({ queryId, position: Number(position), resultId: productId }),
+                headers: { 'Content-Type': 'application/json' },
+                keepalive: true,
+            });
+        }
+    };
+
+    if (!queryId) return <>{children}</>;
+
+    return <div onClick={handleClick}>{children}</div>;
+}

package/dist/assets/storefront/src/app/[locale]/(catalog)/search/search-results.tsx

@@ -0,0 +1,53 @@
+import { Suspense } from 'react';
+import { CatalogSearchBar } from '@/components/commerce/catalog-search-bar';
+import { FacetFilters } from '@/components/commerce/facet-filters';
+import { ProductGridSkeleton } from '@/components/shared/product-grid-skeleton';
+import { ProductGrid } from '@/components/commerce/product-grid';
+import { CatalogSidebarSkeleton } from '@/components/shared/catalog-sidebar-skeleton';
+import { SearchAnalyticsTracker } from './search-analytics-tracker';
+import { buildSearchInput, getCurrentPage } from '@/lib/search-helpers';
+import { client } from '@/lib/vendure/api';
+import { SearchProductsQuery } from '@/lib/vendure/queries';
+
+interface SearchResultsProps {
+    searchParams: Promise<{
+        [key: string]: string | string[] | undefined;
+    }>;
+}
+
+export async function SearchResults({ searchParams }: SearchResultsProps) {
+    const searchParamsResolved = await searchParams;
+    const page = getCurrentPage(searchParamsResolved);
+
+    const productDataPromise = client.query(SearchProductsQuery, {
+        input: { ...buildSearchInput({ searchParams: searchParamsResolved }), logAnalytics: true },
+    }).then(([result, error]) => {
+        if (error) throw error;
+        return result;
+    });
+
+    return (
+        <>
+            <aside className="lg:col-span-1">
+                <Suspense fallback={<CatalogSidebarSkeleton />}>
+                    <FacetFilters productDataPromise={productDataPromise} />
+                </Suspense>
+            </aside>
+            <div className="lg:col-span-3">
+                <Suspense>
+                    <CatalogSearchBar />
+                </Suspense>
+                <Suspense fallback={<ProductGridSkeleton />}>
+                    <SearchAnalyticsTracker productDataPromise={productDataPromise}>
+                        <ProductGrid
+                            productDataPromise={productDataPromise}
+                            currentPage={page}
+                            take={12}
+                            view={searchParamsResolved.view as string}
+                        />
+                    </SearchAnalyticsTracker>
+                </Suspense>
+            </div>
+        </>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/(catalog)/search/search-term.tsx

@@ -0,0 +1,26 @@
+interface SearchTermProps {
+    searchParams: Promise<{
+        q?: string
+    }>;
+}
+
+export async function SearchTerm({searchParams}: SearchTermProps) {
+    const searchParamsResolved = await searchParams;
+    const searchTerm = (searchParamsResolved.q as string) || '';
+
+    return (
+        <div className="mb-6">
+            <h1 className="text-3xl font-bold">
+                {searchTerm ? `Search results for "${searchTerm}"` : 'Search'}
+            </h1>
+        </div>
+    )
+}
+
+export function SearchTermSkeleton() {
+    return (
+        <div className="mb-6">
+            <div className="h-9 w-64 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" />
+        </div>
+    )
+}

package/dist/assets/storefront/src/app/[locale]/(scenario)/[...path]/page.tsx

@@ -0,0 +1,31 @@
+// Catch-all for scenario-specific routes (e.g. /compliance).
+// Lives in a (scenario) route group so it doesn't shadow other top-level routes
+// like /cart, /checkout, etc. Returns 404 if the active scenario doesn't define the route.
+import { Suspense } from 'react';
+import { getScenarioConfig } from '@/config/scenario';
+import { notFound } from 'next/navigation';
+
+export default async function ScenarioRoutePage({
+    params,
+}: {
+    params: Promise<{ locale: string; path: string[] }>;
+}) {
+    return (
+        <Suspense fallback={null}>
+            <ScenarioRouteContent paramsPromise={params} />
+        </Suspense>
+    );
+}
+
+async function ScenarioRouteContent({
+    paramsPromise,
+}: {
+    paramsPromise: Promise<{ locale: string; path: string[] }>;
+}) {
+    const { path } = await paramsPromise;
+    const pathname = '/' + path.join('/');
+    const { routes } = getScenarioConfig();
+    const RouteComponent = routes?.[pathname];
+    if (!RouteComponent) notFound();
+    return <RouteComponent />;
+}