@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/layout/footer.tsx

@@ -0,0 +1,168 @@
+import {cacheLife} from 'next/cache';
+import {getTranslations, setRequestLocale} from 'next-intl/server';
+import {getTopCollections} from '@/lib/vendure/cached';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {getActiveChannelToken} from '@/lib/channel-server';
+import Image from "next/image";
+import NextLink from "next/link";
+import {Link} from "@/i18n/navigation";
+import { DraftModeLink } from './draft-mode-link';
+import {getBranding} from '@/config/branding';
+
+
+async function Copyright({allRightsReserved}: {allRightsReserved: string}) {
+    'use cache'
+    cacheLife('days');
+
+    const { footer } = getBranding();
+    return (
+        <div>
+            &copy; {new Date().getFullYear()} {footer.copyright}. {allRightsReserved}
+        </div>
+    )
+}
+
+async function FooterCollections({locale, channelToken}: {locale: string; channelToken?: string}) {
+    'use cache'
+    cacheLife('days');
+
+    const collections = await getTopCollections(locale, channelToken);
+
+    // Use next/link (not next-intl Link) inside 'use cache' because next-intl's
+    // Link reads locale from headers() during SSR, which is forbidden in cache
+    // scopes. Construct locale-prefixed hrefs manually instead.
+    // See: https://github.com/amannn/next-intl/issues/2229
+    return (
+        <ul className="space-y-2 text-sm text-muted-foreground">
+            {collections.map((collection) => (
+                <li key={collection.id}>
+                    <NextLink
+                        href={`/${locale}/collection/${collection.slug}`}
+                        prefetch={false}
+                        className="hover:text-primary transition-colors"
+                    >
+                        {collection.name}
+                    </NextLink>
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+async function FooterAuthLink({label}: {label: string}) {
+    const customer = await getActiveCustomer();
+    if (customer) {
+        return null;
+    }
+    return (
+        <li>
+            <Link href="/sign-in" prefetch={false} className="hover:text-primary transition-colors">
+                {label}
+            </Link>
+        </li>
+    );
+}
+
+export async function Footer({locale}: {locale: string}) {
+    setRequestLocale(locale);
+    const [t, channelToken] = await Promise.all([
+        getTranslations({locale, namespace: 'Footer'}),
+        getActiveChannelToken(),
+    ]);
+    const { footer, logo, logoInverted } = getBranding();
+    const footerLogo = logoInverted ?? logo;
+    return (
+        <footer className="bg-muted border-t border-border mt-auto">
+            <div className="container mx-auto px-4 py-12">
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+                    {/* Categories */}
+                    <div>
+                        <h4 className="text-sm font-semibold mb-4 text-foreground">{t('categories')}</h4>
+                        <FooterCollections locale={locale} channelToken={channelToken} />
+                    </div>
+
+                    {/* Account */}
+                    <div>
+                        <h4 className="text-sm font-semibold mb-4 text-foreground">{t('account')}</h4>
+                        <ul className="space-y-2 text-sm text-muted-foreground">
+                            <li>
+                                <Link href="/account/orders" prefetch={false} className="hover:text-primary transition-colors">
+                                    {t('orders')}
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href="/account/quotes" prefetch={false} className="hover:text-primary transition-colors">
+                                    {t('quotes')}
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href="/account/company" prefetch={false} className="hover:text-primary transition-colors">
+                                    {t('company')}
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href="/account/addresses" prefetch={false} className="hover:text-primary transition-colors">
+                                    {t('addresses')}
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href="/account/profile" prefetch={false} className="hover:text-primary transition-colors">
+                                    {t('profile')}
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
+
+                    {/* Customer Service */}
+                    <div>
+                        <h4 className="text-sm font-semibold mb-4 text-foreground">{t('customerService')}</h4>
+                        <ul className="space-y-2 text-sm text-muted-foreground">
+                            <li>
+                                <Link href="/search" prefetch={false} className="hover:text-primary transition-colors">
+                                    {t('browseProducts')}
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href="/register-company" prefetch={false} className="hover:text-primary transition-colors">
+                                    {t('openTradeAccount')}
+                                </Link>
+                            </li>
+                            <FooterAuthLink label={t('signIn')} />
+                        </ul>
+                    </div>
+
+                    {/* Powered By */}
+                    {footer.poweredByLinks && footer.poweredByLinks.length > 0 && (
+                        <div>
+                            <h4 className="text-sm font-semibold mb-4 text-foreground">{t('poweredBy')}</h4>
+                            <ul className="space-y-2 text-sm text-muted-foreground">
+                                {footer.poweredByLinks.map((link) => (
+                                    <li key={link.href}>
+                                        <a
+                                            href={link.href}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="hover:text-primary transition-colors"
+                                        >
+                                            {link.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    )}
+                </div>
+
+                {/* Bottom bar */}
+                <div className="mt-10 pt-6 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
+                    <Copyright allRightsReserved={t('allRightsReserved')}/>
+                    <div className="flex items-center gap-4">
+                        <DraftModeLink />
+                        <a href={`${(process.env.VENDURE_SHOP_API_URL ?? 'http://localhost:3500/shop-api').replace(/\/shop-api$/, '')}/dev-mailbox/ui`} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">{t('demoMailbox')}</a>
+                        <Image src={footerLogo.src} alt={footerLogo.alt} width={footerLogo.width} height={footerLogo.height} className="h-4 w-auto invert" />
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/actions.ts

@@ -0,0 +1,33 @@
+'use server';
+
+import {readFragment} from '@/graphql';
+import {client} from '@/lib/vendure/api';
+import {SwitchBusinessUnitMutation} from '@/lib/vendure/mutations';
+import {CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
+import {setCompanyId, setBusinessUnitId, clearBusinessUnitId} from '@/lib/company-context';
+import {revalidatePath, revalidateTag} from 'next/cache';
+
+export async function switchBusinessUnitAction(businessUnitId: string) {
+    const [result, error] = await client.mutate(
+        SwitchBusinessUnitMutation,
+        {businessUnitId},
+    );
+    if (error) throw error;
+
+    const account = result.data.switchBusinessUnit;
+    if (account?.activeBusinessUnit) {
+        const activeBu = readFragment(CompanyBusinessUnitFragment, account.activeBusinessUnit);
+        await setBusinessUnitId(activeBu.id);
+    }
+
+    revalidateTag('active-customer', {expire: 0});
+    revalidatePath('/', 'layout');
+}
+
+export async function switchCompanyAction(companyId: string) {
+    await setCompanyId(companyId);
+    await clearBusinessUnitId();
+
+    revalidateTag('active-customer', {expire: 0});
+    revalidatePath('/', 'layout');
+}

package/dist/assets/storefront/src/components/layout/navbar/cart-icon.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import {Clock, ShoppingCart} from "lucide-react";
+import {Button} from "@/components/ui/button";
+import {Link} from "@/i18n/navigation";
+import {useCartCount} from "@/lib/cart-count-context";
+import {useTranslations} from 'next-intl';
+
+export function CartIcon() {
+    const t = useTranslations('Navigation');
+    const tCart = useTranslations('Cart');
+    const {count, awaitingApprovalOrderCode} = useCartCount();
+    const display = count > 99 ? '99+' : count;
+
+    if (awaitingApprovalOrderCode) {
+        const label = tCart('orderPendingApproval');
+        return (
+            <Button variant="ghost" size="icon" asChild className="relative">
+                <Link href="/cart" prefetch={false} aria-label={label} title={label}>
+                    <ShoppingCart className="h-5 w-5 text-muted-foreground"/>
+                    <span
+                        className="absolute -top-1 -right-1 bg-amber-500 text-white rounded-full h-4 w-4 flex items-center justify-center"
+                        aria-hidden
+                    >
+                        <Clock className="h-3 w-3"/>
+                    </span>
+                    <span className="sr-only">{label}</span>
+                </Link>
+            </Button>
+        );
+    }
+
+    return (
+        <Button variant="ghost" size="icon" asChild className="relative">
+            <Link href="/cart" prefetch={false}>
+                <ShoppingCart className="h-5 w-5"/>
+                {count > 0 && (
+                    <span
+                        className={`absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs font-bold rounded-full flex items-center justify-center ${
+                            count > 99 ? 'min-w-5 h-5 px-1' : 'h-5 w-5'
+                        }`}
+                    >
+                        {display}
+                    </span>
+                )}
+                <span className="sr-only">{t('shoppingCart')}</span>
+            </Link>
+        </Button>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/channel-picker-wrapper.tsx

@@ -0,0 +1,19 @@
+import {getChannelsConfig} from '@/config/scenario';
+import {getActiveChannelToken} from '@/lib/channel-server';
+import {ChannelPicker} from './channel-picker';
+
+export async function ChannelPickerWrapper() {
+    const channelsConfig = getChannelsConfig();
+    if (!channelsConfig || channelsConfig.available.length <= 1) return null;
+
+    // Guaranteed non-null: getActiveChannelToken() returns channelsConfig.defaultToken
+    // when channelsConfig is set (checked above), so it can never be undefined here.
+    const activeToken = (await getActiveChannelToken())!;
+
+    return (
+        <ChannelPicker
+            channels={channelsConfig.available}
+            activeToken={activeToken}
+        />
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/channel-picker.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import {useTransition} from 'react';
+import {MapPin} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {switchChannel} from '@/lib/actions/switch-channel';
+import type {ChannelOption} from '@/config/scenario';
+
+interface ChannelPickerProps {
+    channels: ChannelOption[];
+    activeToken: string;
+}
+
+export function ChannelPicker({channels, activeToken}: ChannelPickerProps) {
+    const [isPending, startTransition] = useTransition();
+
+    const active = channels.find(c => c.token === activeToken) ?? channels[0];
+
+    function handleSwitch(token: string) {
+        startTransition(async () => {
+            await switchChannel(token);
+        });
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-9 gap-1 px-2 text-xs font-medium" disabled={isPending}>
+                    <MapPin className="size-3.5" />
+                    {active.countryCode}
+                    <span className="sr-only">Switch country/channel</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                {channels.map((ch) => (
+                    <DropdownMenuItem
+                        key={ch.token}
+                        onClick={() => handleSwitch(ch.token)}
+                        className={ch.token === activeToken ? 'font-semibold' : undefined}
+                    >
+                        {ch.label}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/currency-picker-wrapper.tsx

@@ -0,0 +1,21 @@
+import {getActiveChannelCached} from '@/lib/vendure/cached';
+import {getActiveCurrencyCode} from '@/lib/currency-server';
+import {getActiveChannelToken} from '@/lib/channel-server';
+import {CurrencyPicker} from './currency-picker';
+
+export async function CurrencyPickerWrapper() {
+    const channelToken = await getActiveChannelToken();
+    const [channel, activeCurrency] = await Promise.all([
+        getActiveChannelCached(channelToken),
+        getActiveCurrencyCode(),
+    ]);
+
+    if (channel.availableCurrencyCodes.length <= 1) return null;
+
+    return (
+        <CurrencyPicker
+            availableCurrencies={channel.availableCurrencyCodes as string[]}
+            activeCurrency={activeCurrency}
+        />
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/currency-picker.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import {useTransition} from 'react';
+import {DollarSign} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {switchCurrency} from '@/lib/actions/switch-currency';
+
+interface CurrencyPickerProps {
+    availableCurrencies: string[];
+    activeCurrency: string;
+}
+
+export function CurrencyPicker({availableCurrencies, activeCurrency}: CurrencyPickerProps) {
+    const [isPending, startTransition] = useTransition();
+
+    if (availableCurrencies.length <= 1) return null;
+
+    function handleSwitch(code: string) {
+        startTransition(async () => {
+            await switchCurrency(code);
+        });
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-9 gap-1 px-2 text-xs font-medium" disabled={isPending}>
+                    <DollarSign className="size-3.5" />
+                    {activeCurrency}
+                    <span className="sr-only">Switch currency</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                {availableCurrencies.map((code) => (
+                    <DropdownMenuItem
+                        key={code}
+                        onClick={() => handleSwitch(code)}
+                        className={code === activeCurrency ? 'font-semibold' : undefined}
+                    >
+                        {code}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/language-picker.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import {useLocale} from 'next-intl';
+import {usePathname, useRouter} from '@/i18n/navigation';
+import {routing, localeNames, type Locale} from '@/i18n/routing';
+import {Globe} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {useTransition} from 'react';
+
+export function LanguagePicker() {
+    const locale = useLocale();
+    const router = useRouter();
+    const pathname = usePathname();
+    const [isPending, startTransition] = useTransition();
+
+    if (routing.locales.length <= 1) return null;
+
+    function switchLocale(newLocale: Locale) {
+        startTransition(() => {
+            router.replace({pathname}, {locale: newLocale});
+        });
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-9 w-9" disabled={isPending}>
+                    <Globe className="size-4" />
+                    <span className="sr-only">Switch language</span>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                {routing.locales.map((loc) => (
+                    <DropdownMenuItem
+                        key={loc}
+                        onClick={() => switchLocale(loc)}
+                        className={loc === locale ? 'font-semibold' : undefined}
+                    >
+                        {localeNames[loc]}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/login-button.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import {ComponentProps, useTransition} from "react";
+import {useTranslations} from 'next-intl';
+import {logoutAction} from "@/app/[locale]/sign-in/actions";
+import {useRouter} from "@/i18n/navigation";
+
+interface LoginButtonProps extends ComponentProps<'button'> {
+    isLoggedIn: boolean;
+}
+
+export function LoginButton({isLoggedIn, ...props}: LoginButtonProps) {
+    const t = useTranslations('Navigation');
+    const [isPending, startTransition] = useTransition();
+    const router = useRouter();
+
+    return (
+        <button {...props} aria-disabled={isPending}
+                onClick={() => {
+                    if (isLoggedIn) {
+                        startTransition(async () => {
+                            const result = await logoutAction();
+                            if (result?.redirectTo) {
+                                router.replace(result.redirectTo);
+                            }
+                        })
+                    } else {
+                        router.push('/sign-in')
+                    }
+                }}>
+            {isLoggedIn ? t('signOut') : t('signIn')}
+        </button>
+    )
+}

package/dist/assets/storefront/src/components/layout/navbar/mobile-nav.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import {useState} from 'react';
+import {useTranslations} from 'next-intl';
+import {Menu, Search} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger} from '@/components/ui/sheet';
+import {Input} from '@/components/ui/input';
+import {Link, useRouter} from '@/i18n/navigation';
+
+interface NavLink {
+    href: string;
+    label: string;
+}
+
+export function MobileNav({ navLinks }: { navLinks: NavLink[] }) {
+    const t = useTranslations('Navigation');
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const router = useRouter();
+
+    const handleSearch = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!searchValue.trim()) return;
+        router.push(`/search?q=${encodeURIComponent(searchValue.trim())}`);
+        setOpen(false);
+    };
+
+    const handleLinkClick = () => {
+        setOpen(false);
+    };
+
+    return (
+        <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-9 w-9" aria-label={t('openMenu')}>
+                    <Menu className="size-5" />
+                </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="w-80 bg-muted p-0">
+                <SheetHeader className="px-4 pt-4 pb-3 border-b border-border">
+                    <SheetTitle className="text-left text-foreground">{t('menu')}</SheetTitle>
+                </SheetHeader>
+                <div className="flex flex-col h-full">
+                    <form onSubmit={handleSearch} className="p-4 border-b border-border">
+                        <div className="relative">
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                            <Input
+                                type="search"
+                                placeholder={t('searchProducts')}
+                                className="pl-9 bg-input"
+                                value={searchValue}
+                                onChange={(e) => setSearchValue(e.target.value)}
+                            />
+                        </div>
+                    </form>
+                    <nav className="flex-1 overflow-y-auto py-2">
+                        {navLinks.map(({href, label}) => (
+                            <Link
+                                key={href}
+                                href={href}
+                                prefetch={false}
+                                onClick={handleLinkClick}
+                                className="flex items-center px-4 py-2.5 text-sm text-foreground hover:bg-accent transition-colors"
+                            >
+                                {label}
+                            </Link>
+                        ))}
+                    </nav>
+                </div>
+            </SheetContent>
+        </Sheet>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/nav-menu-items.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { personalNavItems, getVisibleCompanyItems } from '@/components/commerce/account-nav-items';
+import {
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { Link } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+
+export function PersonalNavMenuItems() {
+    const t = useTranslations('Navigation');
+    return (
+        <DropdownMenuGroup>
+            {personalNavItems.map(item => (
+                <DropdownMenuItem key={item.href} asChild>
+                    <Link href={item.href} prefetch={false}>
+                        <item.icon className="mr-2 h-4 w-4" />
+                        {t(item.label as Parameters<typeof t>[0])}
+                    </Link>
+                </DropdownMenuItem>
+            ))}
+        </DropdownMenuGroup>
+    );
+}
+
+export function CompanyNavMenuItems({ permissions }: { permissions: string[] }) {
+    const t = useTranslations('Navigation');
+    const items = getVisibleCompanyItems(permissions);
+    if (items.length === 0) return null;
+    return (
+        <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+                {t('company')}
+            </DropdownMenuLabel>
+            <DropdownMenuGroup>
+                {items.map(item => (
+                    <DropdownMenuItem key={item.href} asChild>
+                        <Link href={item.href} prefetch={false}>
+                            <item.icon className="mr-2 h-4 w-4" />
+                            {t(item.label as Parameters<typeof t>[0])}
+                        </Link>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuGroup>
+        </>
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/navbar-cart.tsx

@@ -0,0 +1,5 @@
+import {CartIcon} from './cart-icon';
+
+export function NavbarCart() {
+    return <CartIcon />;
+}