@vendure-platform/create 0.1.0

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

@@ -0,0 +1,127 @@
+'use client';
+
+import {use, useEffect, useState} from 'react';
+import {useTranslations} from 'next-intl';
+import {verifyAccountAction} from './actions';
+import {Card, CardContent} from '@/components/ui/card';
+import {Button} from '@/components/ui/button';
+import {Link} from '@/i18n/navigation';
+import {CheckCircle, XCircle, Loader2} from 'lucide-react';
+
+interface VerifyContentProps {
+    searchParams: Promise<{ token?: string }>;
+}
+
+export function VerifyContent({searchParams}: VerifyContentProps) {
+    const t = useTranslations('Verify');
+    const params = use(searchParams);
+    const token = params.token;
+    const [result, setResult] = useState<{success?: boolean; error?: string; redirectTo?: string | null} | null>(null);
+
+    useEffect(() => {
+        if (!token) return;
+        let cancelled = false;
+        verifyAccountAction(token).then(r => {
+            if (!cancelled) setResult(r);
+        });
+        return () => { cancelled = true; };
+    }, [token]);
+
+    if (!token) {
+        return (
+            <Card>
+                <CardContent className="pt-6 space-y-4">
+                    <div className="flex justify-center">
+                        <XCircle className="h-16 w-16 text-destructive"/>
+                    </div>
+                    <div className="space-y-2 text-center">
+                        <h1 className="text-2xl font-bold">{t('invalidLink')}</h1>
+                        <p className="text-muted-foreground">
+                            {t('invalidLinkMessage')}
+                        </p>
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <Link href="/register" className="block">
+                            <Button variant="outline" className="w-full">
+                                {t('createNewAccount')}
+                            </Button>
+                        </Link>
+                        <Link href="/sign-in" className="block">
+                            <Button variant="ghost" className="w-full">
+                                {t('backToSignIn')}
+                            </Button>
+                        </Link>
+                    </div>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (!result) {
+        return (
+            <Card>
+                <CardContent className="pt-6 space-y-4">
+                    <div className="flex justify-center">
+                        <Loader2 className="h-16 w-16 text-muted-foreground animate-spin"/>
+                    </div>
+                    <div className="space-y-2 text-center">
+                        <h1 className="text-2xl font-bold">{t('loading')}</h1>
+                    </div>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    if (result.success) {
+        const continueHref = result.redirectTo || '/sign-in';
+        const continueLabel = result.redirectTo ? 'Continue' : t('backToSignIn');
+        return (
+            <Card>
+                <CardContent className="pt-6 space-y-4">
+                    <div className="flex justify-center">
+                        <CheckCircle className="h-16 w-16 text-green-600"/>
+                    </div>
+                    <div className="space-y-2 text-center">
+                        <h1 className="text-2xl font-bold">{t('accountVerified')}</h1>
+                        <p className="text-muted-foreground">
+                            {t('accountVerifiedMessage')}
+                        </p>
+                    </div>
+                    <Link href={continueHref} className="block">
+                        <Button className="w-full">
+                            {continueLabel}
+                        </Button>
+                    </Link>
+                </CardContent>
+            </Card>
+        );
+    }
+
+    return (
+        <Card>
+            <CardContent className="pt-6 space-y-4">
+                <div className="flex justify-center">
+                    <XCircle className="h-16 w-16 text-destructive"/>
+                </div>
+                <div className="space-y-2 text-center">
+                    <h1 className="text-2xl font-bold">{t('verificationFailed')}</h1>
+                    <p className="text-muted-foreground">
+                        {result.error || t('verificationFailedMessage')}
+                    </p>
+                </div>
+                <div className="flex flex-col gap-2">
+                    <Link href="/register" className="block">
+                        <Button variant="outline" className="w-full">
+                            {t('createNewAccount')}
+                        </Button>
+                    </Link>
+                    <Link href="/sign-in" className="block">
+                        <Button variant="ghost" className="w-full">
+                            {t('backToSignIn')}
+                        </Button>
+                    </Link>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

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

@@ -0,0 +1,67 @@
+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 { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {Link} from '@/i18n/navigation';
+import { CheckCircle } from 'lucide-react';
+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: 'Verify.pending'});
+    return {
+        title: t('title'),
+        description: t('message'),
+    };
+}
+
+async function VerifyPendingContent({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    const resolvedParams = await searchParams;
+    const redirectTo = resolvedParams?.redirectTo as string | undefined;
+    const t = await getTranslations('Verify.pending');
+
+    const signInHref = redirectTo
+        ? `/sign-in?redirectTo=${encodeURIComponent(redirectTo)}`
+        : '/sign-in';
+
+    return (
+        <Card>
+            <CardContent className="pt-6 space-y-4">
+                <div className="flex justify-center">
+                    <CheckCircle className="h-16 w-16 text-green-600" />
+                </div>
+                <div className="space-y-2 text-center">
+                    <h1 className="text-2xl font-bold">{t('title')}</h1>
+                    <p className="text-muted-foreground">
+                        {t('message')}
+                    </p>
+                </div>
+                <div className="bg-muted p-4 rounded-md">
+                    <p className="text-sm text-muted-foreground">
+                        {t('spamNote')}
+                    </p>
+                </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-2">
+                <Link href={signInHref} className="w-full">
+                    <Button className="w-full">
+                        {t('goToSignIn')}
+                    </Button>
+                </Link>
+            </CardFooter>
+        </Card>
+    );
+}
+
+export default async function VerifyPendingPage({searchParams}: {searchParams: Promise<Record<string, string | string[] | undefined>>}) {
+    return (
+        <AuthPageShell>
+            <Suspense fallback={null}>
+                <VerifyPendingContent searchParams={searchParams} />
+            </Suspense>
+        </AuthPageShell>
+    );
+}

package/dist/assets/storefront/src/app/api/clear-company-context/route.ts

@@ -0,0 +1,26 @@
+import {cookies, headers} from 'next/headers';
+import {NextResponse} from 'next/server';
+
+const COMPANY_ID_COOKIE = 'vendure-company-id';
+const BUSINESS_UNIT_ID_COOKIE = 'vendure-business-unit-id';
+
+/**
+ * Route Handler that clears stale company context cookies and redirects back.
+ *
+ * Called by CompanyContextGuard when it detects the `vendure-company-id` cookie
+ * points to a company that no longer exists (e.g. after a database repopulate).
+ * Server Components can't modify cookies directly, so this handler exists as the
+ * mechanism to clear them.
+ */
+export async function GET() {
+    const cookieStore = await cookies();
+    cookieStore.delete(COMPANY_ID_COOKIE);
+    cookieStore.delete(BUSINESS_UNIT_ID_COOKIE);
+
+    // Redirect to home — the referer would be ideal but may not be reliable
+    const headerStore = await headers();
+    const referer = headerStore.get('referer');
+    const redirectTo = referer ? new URL(referer).pathname : '/';
+
+    return NextResponse.redirect(new URL(redirectTo, process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'), 302);
+}

package/dist/assets/storefront/src/app/api/draft/disable/route.ts

@@ -0,0 +1,12 @@
+import { draftMode } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const slug = searchParams.get('slug');
+
+    const draft = await draftMode();
+    draft.disable();
+
+    redirect(slug || '/');
+}

package/dist/assets/storefront/src/app/api/draft/route.ts

@@ -0,0 +1,17 @@
+import { draftMode } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function GET(request: Request) {
+    const { searchParams } = new URL(request.url);
+    const secret = searchParams.get('secret');
+    const slug = searchParams.get('slug');
+
+    if (secret !== process.env.DRAFT_MODE_SECRET) {
+        return new Response('Invalid token', { status: 401 });
+    }
+
+    const draft = await draftMode();
+    draft.enable();
+
+    redirect(slug || '/');
+}

package/dist/assets/storefront/src/app/api/revalidate/route.ts

@@ -0,0 +1,110 @@
+import {revalidateTag} from 'next/cache';
+import {NextRequest, NextResponse} from 'next/server';
+import {routing} from '@/i18n/routing';
+
+// Supported cache tags that can be revalidated.
+// These are locale-independent base names — the endpoint expands them to all locales.
+const LOCALE_SENSITIVE_TAGS = [
+    'collections',
+    'countries',
+    'featured-products',
+    'gift-card-templates',
+    'products',
+] as const;
+
+// Dynamic tags follow patterns like 'product-{slug}-{locale}', 'collection-{slug}-{locale}'
+const DYNAMIC_TAG_PATTERNS = [
+    /^product-.+$/,
+    /^collection-.+$/,
+    /^collection-meta-.+$/,
+    /^collection-preview-.+$/,
+    /^related-products-.+$/,
+];
+
+function isValidTag(tag: string): boolean {
+    if ((LOCALE_SENSITIVE_TAGS as readonly string[]).includes(tag)) return true;
+    return DYNAMIC_TAG_PATTERNS.some(pattern => pattern.test(tag));
+}
+
+/**
+ * Expand a base tag to all locale-suffixed variants.
+ * e.g. 'collections' → ['collections-en', 'collections-de']
+ */
+function expandToLocales(tag: string): string[] {
+    return routing.locales.map(locale => `${tag}-${locale}`);
+}
+
+export async function POST(request: NextRequest) {
+    // Verify the secret token
+    const authHeader = request.headers.get('authorization');
+    const expectedToken = process.env.REVALIDATION_SECRET;
+
+    if (!expectedToken) {
+        console.error('REVALIDATION_SECRET environment variable not set');
+        return NextResponse.json(
+            {error: 'Server configuration error'},
+            {status: 500}
+        );
+    }
+
+    if (authHeader !== `Bearer ${expectedToken}`) {
+        return NextResponse.json(
+            {error: 'Unauthorized'},
+            {status: 401}
+        );
+    }
+
+    try {
+        const body = await request.json();
+        const {tags} = body;
+
+        if (!tags || !Array.isArray(tags) || tags.length === 0) {
+            return NextResponse.json(
+                {error: 'Missing or invalid "tags" array in request body'},
+                {status: 400}
+            );
+        }
+
+        // Validate and revalidate each tag, expanding to all locales
+        const results: {tag: string; success: boolean; error?: string}[] = [];
+
+        for (const tag of tags) {
+            if (typeof tag !== 'string') {
+                results.push({tag: String(tag), success: false, error: 'Invalid tag type'});
+                continue;
+            }
+
+            if (!isValidTag(tag)) {
+                results.push({tag, success: false, error: 'Unknown tag'});
+                continue;
+            }
+
+            // Expand to locale-suffixed tags and revalidate each
+            const expanded = expandToLocales(tag);
+            try {
+                for (const localeTag of expanded) {
+                    revalidateTag(localeTag, {expire: 0});
+                }
+                results.push({tag, success: true});
+            } catch {
+                results.push({tag, success: false, error: 'Revalidation failed'});
+            }
+        }
+
+        const allSuccessful = results.every(r => r.success);
+
+        return NextResponse.json(
+            {
+                revalidated: allSuccessful,
+                results,
+                timestamp: Date.now(),
+            },
+            {status: allSuccessful ? 200 : 207} // 207 = Multi-Status
+        );
+    } catch {
+        return NextResponse.json(
+            {error: 'Invalid JSON body'},
+            {status: 400}
+        );
+    }
+}

package/dist/assets/storefront/src/app/api/search-analytics/route.ts

@@ -0,0 +1,16 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { client } from '@/lib/vendure/api';
+import { LogSearchResultClickedMutation } from '@/lib/vendure/mutations';
+
+export async function POST(request: NextRequest) {
+    const body = await request.json();
+    const { queryId, position, resultId } = body;
+    if (!queryId || position == null || !resultId) {
+        return NextResponse.json({ error: 'Missing fields' }, { status: 400 });
+    }
+    // Fire-and-forget — don't await the mutation result
+    client.mutate(LogSearchResultClickedMutation, {
+        input: { queryId, position: Number(position), resultId },
+    });
+    return NextResponse.json({ ok: true });
+}

package/dist/assets/storefront/src/components/commerce/account-nav-items.ts

@@ -0,0 +1,56 @@
+import type { LucideIcon } from 'lucide-react';
+import {
+    Package,
+    User,
+    MapPin,
+    ShieldCheck,
+    FileText,
+    Building2,
+    Users,
+    Network,
+    Shield,
+    MapPinHouse,
+    CreditCard,
+    Receipt,
+    Heart,
+    Zap,
+} from 'lucide-react';
+
+export interface NavItem {
+    href: string;
+    label: string;
+    icon: LucideIcon;
+    exact?: boolean;
+}
+
+export interface CompanyNavItem extends NavItem {
+    requiredPermissions?: string[];
+}
+
+export const personalNavItems: NavItem[] = [
+    { href: '/account/orders', label: 'orders', icon: Package },
+    { href: '/account/store-credits', label: 'storeCredits', icon: CreditCard },
+    { href: '/account/quotes', label: 'quotes', icon: FileText },
+    { href: '/account/shopping-lists', label: 'shoppingLists', icon: Heart },
+    { href: '/account/quick-order', label: 'quickOrder', icon: Zap },
+    { href: '/account/approvals', label: 'approvals', icon: ShieldCheck },
+    { href: '/account/addresses', label: 'addresses', icon: MapPin },
+    { href: '/account/profile', label: 'profile', icon: User },
+];
+
+export const companyNavItems: CompanyNavItem[] = [
+    { href: '/account/company', label: 'companyProfile', icon: Building2, exact: true },
+    { href: '/account/company/users', label: 'users', icon: Users, requiredPermissions: ['ViewUsers', 'ManageUsers'] },
+    { href: '/account/company/business-units', label: 'businessUnits', icon: Network, requiredPermissions: ['ManageBusinessUnits'] },
+    { href: '/account/company/roles', label: 'roles', icon: Shield, requiredPermissions: ['ManageRoles'] },
+    { href: '/account/company/addresses', label: 'companyAddresses', icon: MapPinHouse, requiredPermissions: ['ManageAddresses'] },
+    { href: '/account/company/payment-methods', label: 'paymentMethods', icon: CreditCard, requiredPermissions: ['ManagePaymentMethods'] },
+    { href: '/account/company/tax-ids', label: 'taxIds', icon: Receipt, requiredPermissions: ['ManageCompany'] },
+];
+
+export function getVisibleCompanyItems(permissions: string[]): CompanyNavItem[] {
+    return companyNavItems.filter(item => {
+        if (!item.requiredPermissions) return true;
+        return item.requiredPermissions.some(p => permissions.includes(p));
+    });
+}

package/dist/assets/storefront/src/components/commerce/account-sidebar.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import {Link, usePathname} from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { LayoutGrid } from 'lucide-react';
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { type NavItem, personalNavItems, getVisibleCompanyItems } from './account-nav-items';
+
+function NavLink({ item, pathname, t }: { item: NavItem; pathname: string; t: ReturnType<typeof useTranslations<'Account'>> }) {
+    const isActive = item.exact
+        ? pathname === item.href
+        : pathname === item.href || pathname.startsWith(item.href + '/');
+    return (
+        <Link
+            href={item.href}
+            prefetch={true}
+            className={cn(
+                'flex items-center gap-3 px-3 py-2 text-sm rounded-md transition-colors',
+                isActive
+                    ? 'bg-primary/10 text-primary font-medium'
+                    : 'text-foreground hover:bg-muted',
+            )}
+        >
+            <item.icon className="h-4 w-4" />
+            {t(`sidebar.${item.label}`)}
+        </Link>
+    );
+}
+
+function AccountNavLinks({
+    permissions,
+    hasCompany,
+    pathname,
+    t,
+}: {
+    permissions: string[];
+    hasCompany: boolean;
+    pathname: string;
+    t: ReturnType<typeof useTranslations<'Account'>>;
+}) {
+    const visibleCompanyItems = hasCompany
+        ? getVisibleCompanyItems(permissions)
+        : [];
+
+    return (
+        <nav className="space-y-1">
+            <h2 className="font-semibold text-sm pb-2">{t('sidebar.accountHeading')}</h2>
+            {personalNavItems.map(item => (
+                <NavLink key={item.href} item={item} pathname={pathname} t={t} />
+            ))}
+            {visibleCompanyItems.length > 0 && (
+                <>
+                    <div className="pt-4 pb-2 px-3">
+                        <span className="text-xs font-semibold uppercase text-muted-foreground tracking-wider">
+                            {t('sidebar.companySection')}
+                        </span>
+                    </div>
+                    {visibleCompanyItems.map(item => (
+                        <NavLink key={item.href} item={item} pathname={pathname} t={t} />
+                    ))}
+                </>
+            )}
+        </nav>
+    );
+}
+
+interface AccountSidebarProps {
+    permissions: string[];
+    hasCompany: boolean;
+}
+
+export function AccountSidebar({ permissions, hasCompany }: AccountSidebarProps) {
+    const t = useTranslations('Account');
+    const pathname = usePathname();
+
+    return (
+        <>
+            {/* Desktop: sticky sidebar */}
+            <div className="hidden lg:block sticky top-20">
+                <AccountNavLinks permissions={permissions} hasCompany={hasCompany} pathname={pathname} t={t} />
+            </div>
+
+            {/* Mobile: sheet trigger */}
+            <div className="lg:hidden">
+                <Sheet>
+                    <SheetTrigger asChild>
+                        <Button variant="outline" size="sm" className="gap-2">
+                            <LayoutGrid className="h-4 w-4" />
+                            {t('sidebar.accountMenu')}
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent side="left" className="overflow-y-auto">
+                        <SheetHeader>
+                            <SheetTitle>{t('sidebar.accountHeading')}</SheetTitle>
+                        </SheetHeader>
+                        <div className="px-4 pb-4">
+                            <AccountNavLinks permissions={permissions} hasCompany={hasCompany} pathname={pathname} t={t} />
+                        </div>
+                    </SheetContent>
+                </Sheet>
+            </div>
+        </>
+    );
+}

package/dist/assets/storefront/src/components/commerce/active-filters.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { formatPrice } from '@/lib/format';
+import { RESERVED_PARAMS } from '@/lib/search-helpers';
+import { X } from 'lucide-react';
+import { useLocale } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { usePathname, useRouter } from '@/i18n/navigation';
+
+interface FacetValueInfo {
+    code: string;
+    name: string;
+    facetCode: string;
+    facetName: string;
+}
+
+interface ActiveFiltersProps {
+    facetValueMap: FacetValueInfo[];
+}
+
+function FilterChip({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
+    return (
+        <button
+            onClick={onClick}
+            className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-primary/10 text-primary text-xs border border-primary/20 hover:bg-primary/20 transition-colors"
+        >
+            {children}
+            <X className="h-3 w-3 ml-0.5" />
+        </button>
+    );
+}
+
+export function ActiveFilters({ facetValueMap }: ActiveFiltersProps) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const locale = useLocale();
+    const formatWholePrice = (cents: number) =>
+        formatPrice(cents, locale, undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+
+    const activeFacets: FacetValueInfo[] = [];
+    for (const [key, value] of searchParams.entries()) {
+        if (RESERVED_PARAMS.has(key) || !value) continue;
+        const valueCodes = value.split(',');
+        for (const code of valueCodes) {
+            const match = facetValueMap.find((fv) => fv.facetCode === key && fv.code === code);
+            if (match) activeFacets.push(match);
+        }
+    }
+
+    // Check for price range and inStock
+    const priceMin = searchParams.get('priceMin');
+    const priceMax = searchParams.get('priceMax');
+    const hasPriceFilter = priceMin != null || priceMax != null;
+    const hasInStock = searchParams.get('inStock') === 'true';
+
+    if (activeFacets.length === 0 && !hasPriceFilter && !hasInStock) return null;
+
+    const removeFacet = (facetCode: string, valueCode: string) => {
+        const params = new URLSearchParams(searchParams);
+        const current = params.get(facetCode)?.split(',') ?? [];
+        const updated = current.filter((c) => c !== valueCode);
+        if (updated.length > 0) {
+            params.set(facetCode, updated.join(','));
+        } else {
+            params.delete(facetCode);
+        }
+        params.delete('page');
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    const removeParam = (key: string) => {
+        const params = new URLSearchParams(searchParams);
+        params.delete(key);
+        params.delete('page');
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    const removePriceFilter = () => {
+        const params = new URLSearchParams(searchParams);
+        params.delete('priceMin');
+        params.delete('priceMax');
+        params.delete('page');
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    return (
+        <div className="flex flex-wrap items-center gap-1.5">
+            {activeFacets.map((fv) => (
+                <FilterChip
+                    key={`${fv.facetCode}-${fv.code}`}
+                    onClick={() => removeFacet(fv.facetCode, fv.code)}
+                >
+                    <span className="text-muted-foreground">{fv.facetName}:</span>
+                    {fv.name}
+                </FilterChip>
+            ))}
+            {hasPriceFilter && (
+                <FilterChip onClick={removePriceFilter}>
+                    Price: {formatWholePrice(Number(priceMin) || 0)} –{' '}
+                    {formatWholePrice(Number(priceMax) || 0)}
+                </FilterChip>
+            )}
+            {hasInStock && <FilterChip onClick={() => removeParam('inStock')}>In Stock Only</FilterChip>}
+        </div>
+    );
+}