@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/layout/search-input.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useRouter } from '@/i18n/navigation';
+import { Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { useSearchBar } from '@/lib/search-bar-context';
+import { KbdShortcut } from '@/components/ui/kbd-shortcut';
+import { InstantSearchDropdown } from '@/components/commerce/instant-search-dropdown';
+
+export function SearchInput() {
+    const t = useTranslations('Navigation');
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [searchValue, setSearchValue] = useState(searchParams.get('q') || '');
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const { hasInlineSearch, searchInputRef } = useSearchBar();
+
+    const setRef = useCallback((el: HTMLInputElement | null) => {
+        inputRef.current = el;
+    }, []);
+
+    useEffect(() => {
+        if (!hasInlineSearch && inputRef.current) {
+            searchInputRef.current = inputRef.current;
+        }
+    }, [hasInlineSearch, searchInputRef]);
+
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- sync external URL state
+        setSearchValue(searchParams.get('q') || '');
+    }, [searchParams]);
+
+    const handleSubmit = useCallback((term: string) => {
+        if (!term.trim()) return;
+        router.push(`/search?q=${encodeURIComponent(term.trim())}`);
+    }, [router]);
+
+    const handleFormSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        handleSubmit(searchValue);
+    };
+
+    return (
+        <div className={hasInlineSearch ? 'hidden' : ''}>
+        <InstantSearchDropdown
+            inputRef={inputRef}
+            searchValue={searchValue}
+            onSearchValueChange={setSearchValue}
+            onSubmit={handleSubmit}
+            dropdownClassName="w-[32rem] right-0 left-auto"
+        >
+            <form onSubmit={handleFormSubmit} className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                    ref={setRef}
+                    type="search"
+                    placeholder={t('searchByNameSkuKeyword')}
+                    className="pl-9 pr-16 w-64"
+                    value={searchValue}
+                    onChange={(e) => setSearchValue(e.target.value)}
+                    autoComplete="off"
+                />
+                <KbdShortcut className="absolute right-3 top-1/2 -translate-y-1/2" />
+            </form>
+        </InstantSearchDropdown>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/providers/awaiting-approval-banner.tsx

@@ -0,0 +1,58 @@
+import {cacheLife, cacheTag} from 'next/cache';
+import {ClipboardCheck, ArrowRight} from 'lucide-react';
+import {getTranslations} from 'next-intl/server';
+import {Link} from '@/i18n/navigation';
+import {client, getVendureContext} from '@/lib/vendure/api';
+import type {VendureContext} from '@/lib/vendure/api';
+import {GetActiveOrderQuery} from '@/lib/vendure/queries';
+
+async function getAwaitingApprovalOrderCode(ctx: VendureContext): Promise<string | null> {
+    'use cache: private';
+    cacheLife('minutes');
+    cacheTag('cart');
+    cacheTag('active-order');
+
+    const [result, error] = await client.query(GetActiveOrderQuery, undefined, ctx);
+    if (error) return null;
+    const order = result.data.activeOrder;
+    if (!order || order.state !== 'AwaitingApproval') return null;
+    return order.code;
+}
+
+export async function AwaitingApprovalBanner() {
+    const ctx = await getVendureContext();
+    const code = await getAwaitingApprovalOrderCode(ctx);
+    if (!code) return null;
+    const t = await getTranslations('Cart');
+    return (
+        <>
+            {/* Push page content down so it clears the banner. The banner is
+                ~44px tall on >=sm screens and wraps to ~68px on <640px. The
+                page-top-offset = navbar + banner sum is computed in globals.css. */}
+            <style>{`:root{--banner-height:44px}@media (max-width:639px){:root{--banner-height:68px}}`}</style>
+            <div className="bg-amber-500/15 border-b border-amber-500/30 text-foreground">
+                <Link
+                    href={`/account/approvals?order=${code}`}
+                    className="block hover:bg-amber-500/25 transition-colors"
+                >
+                    <div className="container mx-auto px-4 py-2 flex items-center justify-between gap-4 flex-wrap">
+                        <div className="flex items-center gap-3 min-w-0">
+                            <ClipboardCheck className="h-5 w-5 flex-shrink-0 text-amber-600 dark:text-amber-400"/>
+                            <p className="text-sm">
+                                <span className="font-semibold">{t('orderPendingApproval')}:</span>{' '}
+                                <code className="font-mono font-semibold px-1.5 py-0.5 rounded bg-amber-500/20">
+                                    {code}
+                                </code>{' '}
+                                <span className="text-muted-foreground">{t('awaitingApprovalBannerBody')}</span>
+                            </p>
+                        </div>
+                        <span className="text-sm font-semibold inline-flex items-center gap-1.5 flex-shrink-0 text-amber-600 dark:text-amber-400">
+                            {t('viewRequest')}
+                            <ArrowRight className="h-4 w-4"/>
+                        </span>
+                    </div>
+                </Link>
+            </div>
+        </>
+    );
+}

package/dist/assets/storefront/src/components/providers/cart-count-server.tsx

@@ -0,0 +1,31 @@
+import {cacheLife, cacheTag} from 'next/cache';
+import {CartStatusSync} from '@/lib/cart-count-context';
+import {client, getVendureContext} from '@/lib/vendure/api';
+import type {VendureContext} from '@/lib/vendure/api';
+import {GetActiveOrderQuery} from '@/lib/vendure/queries';
+
+async function getCartStatus(ctx: VendureContext): Promise<{count: number; awaitingApprovalOrderCode: string | null}> {
+    'use cache: private';
+    cacheLife('minutes');
+    cacheTag('cart');
+    cacheTag('active-order');
+
+    const [result, error] = await client.query(GetActiveOrderQuery, undefined, ctx);
+    if (error) return {count: 0, awaitingApprovalOrderCode: null};
+
+    const order = result.data.activeOrder;
+    if (!order) return {count: 0, awaitingApprovalOrderCode: null};
+    if (order.state === 'AwaitingApproval') {
+        return {count: 0, awaitingApprovalOrderCode: order.code};
+    }
+    // Only count lines when the order is in AddingItems (editable cart).
+    if (order.state !== 'AddingItems') return {count: 0, awaitingApprovalOrderCode: null};
+
+    return {count: order.lines.length, awaitingApprovalOrderCode: null};
+}
+
+export async function CartCountServer() {
+    const ctx = await getVendureContext();
+    const {count, awaitingApprovalOrderCode} = await getCartStatus(ctx);
+    return <CartStatusSync count={count} awaitingApprovalOrderCode={awaitingApprovalOrderCode} />;
+}

package/dist/assets/storefront/src/components/providers/company-context-guard.tsx

@@ -0,0 +1,47 @@
+import {cookies} from 'next/headers';
+import {getMyCompanies} from '@/lib/vendure/actions';
+import {redirect} from 'next/navigation';
+
+const COMPANY_ID_COOKIE = 'vendure-company-id';
+
+/**
+ * Server component that detects and clears stale company context cookies.
+ *
+ * ## Why this exists
+ *
+ * The storefront stores the active company ID in a `vendure-company-id` cookie.
+ * This cookie persists across server restarts and database repopulations. After a
+ * repopulate, entity IDs change but the browser still sends the old cookie value.
+ * The Vendure API then can't resolve the company context, causing:
+ * - Company addresses not loading at checkout
+ * - Company section disappearing from the account sidebar
+ * - ForbiddenError on company-scoped queries
+ *
+ * ## How it works
+ *
+ * On every page load, this component reads the `vendure-company-id` cookie and
+ * checks whether it matches one of the user's actual company memberships.
+ * If the cookie is stale, it redirects to `/api/clear-company-context` (a Route
+ * Handler that can modify cookies) which clears the cookie and redirects back.
+ *
+ * ## Performance
+ *
+ * `getMyCompanies()` is wrapped in React `cache()`, so if other components on the
+ * same page also call it, no duplicate API request is made. The redirect only
+ * happens once (on the first request with a stale cookie).
+ */
+export async function CompanyContextGuard() {
+    const cookieStore = await cookies();
+    const companyId = cookieStore.get(COMPANY_ID_COOKIE)?.value;
+    if (!companyId) return null;
+
+    const companies = await getMyCompanies();
+    const isValid = companies.some(c => c.id === companyId);
+    if (!isValid) {
+        // Can't modify cookies in a Server Component, so redirect to a Route Handler
+        // that clears the stale cookie and sends the user back.
+        await redirect('/api/clear-company-context');
+    }
+
+    return null;
+}

package/dist/assets/storefront/src/components/providers/company-permissions-server.tsx

@@ -0,0 +1,14 @@
+import { getCompanyAccount } from '@/lib/vendure/actions';
+import { CompanyPermissionsProvider } from '@/lib/company-permissions-context';
+import type { ReactNode } from 'react';
+
+export async function CompanyPermissionsServer({ children }: { children: ReactNode }) {
+    const account = await getCompanyAccount();
+    const permissions = account?.permissions ?? null;
+
+    return (
+        <CompanyPermissionsProvider permissions={permissions}>
+            {children}
+        </CompanyPermissionsProvider>
+    );
+}

package/dist/assets/storefront/src/components/providers/theme-provider.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import {ThemeProvider as NextThemesProvider} from "next-themes";
+
+export function ThemeProvider({children}: {children: React.ReactNode}) {
+    return (
+        <NextThemesProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem={false}
+            disableTransitionOnChange
+        >
+            {children}
+        </NextThemesProvider>
+    );
+}

package/dist/assets/storefront/src/components/shared/breadcrumbs.tsx

@@ -0,0 +1,39 @@
+import { PrefetchLink } from '@/components/shared/prefetch-link';
+import { ChevronRight } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
+
+interface BreadcrumbItem {
+    name: string;
+    href?: string;
+}
+
+interface BreadcrumbsProps {
+    items?: BreadcrumbItem[];
+}
+
+export async function Breadcrumbs({ items = [] }: BreadcrumbsProps) {
+    const t = await getTranslations('Navigation');
+    return (
+        <nav aria-label="Breadcrumb" className="pt-4 pb-10 flex items-center">
+            <ol className="flex items-center gap-2 text-lg text-muted-foreground">
+                <li>
+                    <PrefetchLink href="/search" className="hover:text-foreground transition-colors">
+                        {t('catalog')}
+                    </PrefetchLink>
+                </li>
+                {items.map((item, i) => (
+                    <li key={i} className="flex items-center gap-1.5">
+                        <ChevronRight className="h-5 w-5" />
+                        {item.href ? (
+                            <PrefetchLink href={item.href} className="hover:text-foreground transition-colors">
+                                {item.name}
+                            </PrefetchLink>
+                        ) : (
+                            <span className="text-foreground font-medium">{item.name}</span>
+                        )}
+                    </li>
+                ))}
+            </ol>
+        </nav>
+    );
+}

package/dist/assets/storefront/src/components/shared/catalog-sidebar-skeleton.tsx

@@ -0,0 +1,21 @@
+const WIDTHS = ['75%', '60%', '85%'];
+
+export function CatalogSidebarSkeleton() {
+    return (
+        <div className="space-y-4">
+            <div className="h-5 w-16 bg-muted rounded" />
+            <div className="space-y-3">
+                {Array.from({ length: 4 }).map((_, i) => (
+                    <div key={i} className="space-y-2">
+                        <div className="h-4 w-24 bg-muted rounded" />
+                        <div className="space-y-1.5 pl-1">
+                            {Array.from({ length: 3 }).map((_, j) => (
+                                <div key={j} className="h-4 bg-muted rounded" style={{ width: WIDTHS[j] }} />
+                            ))}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/shared/country-select.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+interface Country {
+  code: string;
+  name: string;
+}
+
+interface CountrySelectProps {
+  countries: Country[];
+  value?: string;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+export function CountrySelect({ countries, value, onValueChange, disabled }: CountrySelectProps) {
+  const t = useTranslations('Common');
+  const [open, setOpen] = React.useState(false);
+  const selectedCountry = countries.find((country) => country.code === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+          disabled={disabled}
+        >
+          {selectedCountry ? selectedCountry.name : t('selectCountry')}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start">
+        <Command>
+          <CommandInput placeholder={t('searchCountry')} />
+          <CommandList>
+            <CommandEmpty>{t('noCountryFound')}</CommandEmpty>
+            <CommandGroup>
+              {countries.map((country) => (
+                <CommandItem
+                  key={country.code}
+                  value={country.name}
+                  onSelect={() => {
+                    onValueChange(country.code);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      value === country.code ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                  {country.name}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/dist/assets/storefront/src/components/shared/error-state.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+export function ErrorState({ message }: { message: string }) {
+    const t = useTranslations('Common');
+    return (
+        <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{t('somethingWentWrong')}</AlertTitle>
+            <AlertDescription>{message}</AlertDescription>
+        </Alert>
+    );
+}

package/dist/assets/storefront/src/components/shared/pagination.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import {useSearchParams} from 'next/navigation';
+import {usePathname} from '@/i18n/navigation';
+import {ChevronLeft, ChevronRight} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {Link} from "@/i18n/navigation";
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+}
+
+export function Pagination({currentPage, totalPages}: PaginationProps) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+
+    const createPageUrl = (page: number) => {
+        const params = new URLSearchParams(searchParams);
+        params.set('page', page.toString());
+        return `${pathname}?${params.toString()}`;
+    };
+
+    const getPageNumbers = () => {
+        const delta = 2;
+        const range = [];
+        const rangeWithDots = [];
+
+        for (let i = 1; i <= totalPages; i++) {
+            if (
+                i === 1 ||
+                i === totalPages ||
+                (i >= currentPage - delta && i <= currentPage + delta)
+            ) {
+                range.push(i);
+            }
+        }
+
+        let prev = 0;
+        for (const i of range) {
+            if (prev && i - prev > 1) {
+                rangeWithDots.push('...');
+            }
+            rangeWithDots.push(i);
+            prev = i;
+        }
+
+        return rangeWithDots;
+    };
+
+    const pages = getPageNumbers();
+
+    return (
+        <nav className="flex items-center justify-center gap-2">
+            <Button
+                variant="outline"
+                size="icon"
+                asChild
+                disabled={currentPage === 1}
+            >
+                {currentPage === 1 ? (
+                    <span className="cursor-not-allowed">
+                        <ChevronLeft className="h-4 w-4"/>
+                    </span>
+                ) : (
+                    <Link href={createPageUrl(currentPage - 1)} prefetch={false}>
+                        <ChevronLeft className="h-4 w-4"/>
+                    </Link>
+                )}
+            </Button>
+
+            {pages.map((page, index) => {
+                if (page === '...') {
+                    return (
+                        <span key={`dots-${index}`} className="px-2 text-muted-foreground">
+                            ...
+                        </span>
+                    );
+                }
+
+                const pageNum = page as number;
+                const isActive = pageNum === currentPage;
+
+                return (
+                    <Button
+                        key={pageNum}
+                        variant={isActive ? 'default' : 'outline'}
+                        size="icon"
+                        asChild={!isActive}
+                        disabled={isActive}
+                    >
+                        {isActive ? (
+                            <span>{pageNum}</span>
+                        ) : (
+                            <Link href={createPageUrl(pageNum)} prefetch={false}>{pageNum}</Link>
+                        )}
+                    </Button>
+                );
+            })}
+
+            <Button
+                variant="outline"
+                size="icon"
+                asChild
+                disabled={currentPage === totalPages}
+            >
+                {currentPage === totalPages ? (
+                    <span className="cursor-not-allowed">
+                        <ChevronRight className="h-4 w-4"/>
+                    </span>
+                ) : (
+                    <Link href={createPageUrl(currentPage + 1)} prefetch={false}>
+                        <ChevronRight className="h-4 w-4"/>
+                    </Link>
+                )}
+            </Button>
+        </nav>
+    );
+}

package/dist/assets/storefront/src/components/shared/prefetch-link.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import {Link} from '@/i18n/navigation';
+import { useState, type ComponentProps } from 'react';
+
+type PrefetchLinkProps = ComponentProps<typeof Link>;
+
+/**
+ * Link that defers prefetching until hover/focus, then does a FULL prefetch
+ * (including dynamic 'use cache' data). This avoids the skeleton flash on
+ * navigation while not flooding the server with viewport-triggered requests.
+ *
+ * - false: no prefetch until user shows intent
+ * - true (on hover): full route prefetch including cached data
+ *
+ * See: https://nextjs.org/docs/app/api-reference/components/link#prefetch
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function PrefetchLink({ prefetch, onMouseEnter, onFocus, ...props }: PrefetchLinkProps) {
+    const [active, setActive] = useState(false);
+
+    return (
+        <Link
+            {...props}
+            prefetch={active ? true : false}
+            onMouseEnter={(e) => {
+                setActive(true);
+                onMouseEnter?.(e);
+            }}
+            onFocus={(e) => {
+                setActive(true);
+                onFocus?.(e);
+            }}
+        />
+    );
+}

package/dist/assets/storefront/src/components/shared/product-grid-skeleton.tsx

@@ -0,0 +1,26 @@
+export function ProductGridSkeleton() {
+    return (
+        <div className="space-y-6">
+            <div className="flex items-center justify-between">
+                <div className="h-5 w-32 bg-muted rounded" />
+                <div className="flex items-center gap-2">
+                    <div className="h-8 w-16 bg-muted rounded" />
+                    <div className="h-8 w-24 bg-muted rounded" />
+                </div>
+            </div>
+
+            <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {Array.from({ length: 12 }).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>
+    );
+}

package/dist/assets/storefront/src/components/shared/scenario-paused.tsx

@@ -0,0 +1,80 @@
+import Image from 'next/image';
+import {getTranslations} from 'next-intl/server';
+import {Button} from '@/components/ui/button';
+import {getBranding} from '@/config/branding';
+import {isBackendReachable} from '@/lib/backend-health';
+
+const CONTACT_URL = 'https://vendure.io/contact/';
+
+/**
+ * Suspense-wrappable server component that renders nothing when the Vendure
+ * backend is reachable, or a full-screen "Demo Paused" overlay when it isn't.
+ *
+ * Must be used inside a <Suspense> boundary — it awaits isBackendReachable(),
+ * which would otherwise block layout prerender under cacheComponents.
+ */
+export async function BackendHealthGate({locale}: {locale: string}) {
+    const reachable = await isBackendReachable();
+    if (reachable) return null;
+    return <ScenarioPausedOverlay locale={locale} />;
+}
+
+async function ScenarioPausedOverlay({locale}: {locale: string}) {
+    const t = await getTranslations({locale, namespace: 'ScenarioPaused'});
+    const {logo, logoInverted, siteName} = getBranding();
+    const displayLogo = logoInverted ?? logo;
+
+    return (
+        <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center px-4 py-12 bg-background overflow-auto">
+            <div className="max-w-lg w-full text-center space-y-8">
+                <div className="flex justify-center">
+                    <Image
+                        src={displayLogo.src}
+                        alt={displayLogo.alt}
+                        width={displayLogo.width}
+                        height={displayLogo.height}
+                        className="h-16 w-auto"
+                        priority
+                    />
+                </div>
+
+                <div className="inline-flex items-center gap-2 rounded-full border border-border bg-muted/60 px-4 py-1.5 text-xs font-medium text-muted-foreground">
+                    <span className="relative flex h-2 w-2">
+                        <span className="absolute inline-flex h-full w-full rounded-full bg-primary/40 animate-ping" />
+                        <span className="relative inline-flex h-2 w-2 rounded-full bg-primary" />
+                    </span>
+                    {t('badge')}
+                </div>
+
+                <div className="space-y-4">
+                    <h1 className="text-3xl sm:text-4xl font-bold tracking-tight text-foreground">
+                        {t('title', {siteName})}
+                    </h1>
+                    <p className="text-base text-muted-foreground leading-relaxed">
+                        {t('description')}
+                    </p>
+                </div>
+
+                <div className="flex flex-col sm:flex-row gap-3 justify-center pt-2">
+                    <Button asChild size="lg">
+                        <a href={CONTACT_URL} target="_blank" rel="noopener noreferrer">
+                            {t('contactCta')}
+                        </a>
+                    </Button>
+                    <Button asChild size="lg" variant="outline">
+                        <a href="https://vendure.io" target="_blank" rel="noopener noreferrer">
+                            {t('learnMore')}
+                        </a>
+                    </Button>
+                </div>
+
+                <p className="text-xs text-muted-foreground pt-4">
+                    {t('poweredBy')}{' '}
+                    <a href="https://vendure.io" target="_blank" rel="noopener noreferrer" className="underline hover:text-foreground transition-colors">
+                        Vendure
+                    </a>
+                </p>
+            </div>
+        </div>
+    );
+}