@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/approval-decision-form.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import {useState, useTransition} from 'react';
+import {Button} from '@/components/ui/button';
+import {Textarea} from '@/components/ui/textarea';
+import {CheckCircle, XCircle} from 'lucide-react';
+import {submitApprovalDecision} from '@/app/[locale]/account/approvals/actions';
+
+interface ApprovalDecisionFormProps {
+    approvalRequestId: string;
+}
+
+export function ApprovalDecisionForm({approvalRequestId}: ApprovalDecisionFormProps) {
+    const [comment, setComment] = useState('');
+    const [isPending, startTransition] = useTransition();
+    const [result, setResult] = useState<{ success: boolean; message?: string } | null>(null);
+
+    function handleDecision(decision: 'APPROVED' | 'REJECTED') {
+        startTransition(async () => {
+            const res = await submitApprovalDecision({
+                approvalRequestId,
+                decision,
+                comment: comment || undefined,
+            });
+            setResult(res);
+        });
+    }
+
+    if (result?.success) {
+        return (
+            <div className="rounded-md border border-green-200 bg-green-50 p-3">
+                <p className="text-sm text-green-800">Decision submitted successfully.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-3">
+            <Textarea
+                placeholder="Add a comment (optional)"
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                rows={2}
+                disabled={isPending}
+            />
+            {result && !result.success && (
+                <p className="text-sm text-red-600">{result.message || 'An error occurred'}</p>
+            )}
+            <div className="flex gap-2">
+                <Button
+                    size="sm"
+                    onClick={() => handleDecision('APPROVED')}
+                    disabled={isPending}
+                >
+                    <CheckCircle className="h-4 w-4 mr-1"/>
+                    Approve
+                </Button>
+                <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => handleDecision('REJECTED')}
+                    disabled={isPending}
+                >
+                    <XCircle className="h-4 w-4 mr-1"/>
+                    Reject
+                </Button>
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/approval-status-badge.tsx

@@ -0,0 +1,37 @@
+import {Badge} from '@/components/ui/badge';
+import {
+    Clock,
+    CheckCircle,
+    XCircle,
+    Loader2,
+    Ban,
+    Timer,
+    MessageSquare,
+    type LucideIcon,
+} from 'lucide-react';
+
+const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
+    PENDING: {color: 'bg-gray-100 text-gray-800', label: 'Pending', icon: Clock},
+    IN_PROGRESS: {color: 'bg-blue-100 text-blue-800', label: 'In Progress', icon: Loader2},
+    APPROVED: {color: 'bg-green-100 text-green-800', label: 'Approved', icon: CheckCircle},
+    REJECTED: {color: 'bg-red-100 text-red-800', label: 'Rejected', icon: XCircle},
+    CANCELLED: {color: 'bg-gray-100 text-gray-500', label: 'Cancelled', icon: Ban},
+    EXPIRED: {color: 'bg-yellow-100 text-yellow-800', label: 'Expired', icon: Timer},
+    CHANGES_REQUESTED: {color: 'bg-orange-100 text-orange-800', label: 'Changes Requested', icon: MessageSquare},
+};
+
+interface ApprovalStatusBadgeProps {
+    status: string;
+}
+
+export function ApprovalStatusBadge({status}: ApprovalStatusBadgeProps) {
+    const config = STATUS_CONFIG[status] || {color: 'bg-gray-100 text-gray-800', label: status, icon: Clock};
+    const Icon = config.icon;
+
+    return (
+        <Badge className={config.color} variant="secondary">
+            <Icon className="h-3 w-3 mr-1"/>
+            {config.label}
+        </Badge>
+    );
+}

package/dist/assets/storefront/src/components/commerce/business-unit-switcher.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import {useTransition} from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {Button} from '@/components/ui/button';
+import {Building2, Check, ChevronDown} from 'lucide-react';
+import {switchBusinessUnitAction} from '@/components/layout/navbar/actions';
+interface BusinessUnitSwitcherProps {
+    businessUnits: Array<{ id: string; name: string }>;
+    activeBusinessUnitId: string | null;
+}
+
+export function BusinessUnitSwitcher({businessUnits, activeBusinessUnitId}: BusinessUnitSwitcherProps) {
+    const [isPending, startTransition] = useTransition();
+    const activeBu = businessUnits.find(bu => bu.id === activeBusinessUnitId);
+
+    if (businessUnits.length <= 1) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="w-full justify-between" disabled={isPending}>
+                    <span className="flex items-center gap-2">
+                        <Building2 className="h-4 w-4"/>
+                        {isPending ? 'Switching...' : (activeBu?.name ?? 'Select Unit')}
+                    </span>
+                    <ChevronDown className="h-3 w-3"/>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+                {businessUnits.map(bu => (
+                    <DropdownMenuItem
+                        key={bu.id}
+                        onClick={() => {
+                            if (bu.id !== activeBusinessUnitId) {
+                                startTransition(() => switchBusinessUnitAction(bu.id));
+                            }
+                        }}
+                    >
+                        <span className="flex items-center gap-2">
+                            {bu.id === activeBusinessUnitId && <Check className="h-3 w-3"/>}
+                            {bu.name}
+                        </span>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}

package/dist/assets/storefront/src/components/commerce/catalog-search-bar.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { InstantSearchDropdown } from '@/components/commerce/instant-search-dropdown';
+import { Input } from '@/components/ui/input';
+import { KbdShortcut } from '@/components/ui/kbd-shortcut';
+import { useSearchBar } from '@/lib/search-bar-context';
+import { Search } from 'lucide-react';
+import { useSearchParams } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useRouter } from '@/i18n/navigation';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
+
+export function CatalogSearchBar() {
+    const t = useTranslations('Catalog');
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const [isPending, startTransition] = useTransition();
+    const [value, setValue] = useState(searchParams.get('q') || '');
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const { registerInlineSearch, unregisterInlineSearch, searchInputRef } = useSearchBar();
+
+    useEffect(() => {
+        registerInlineSearch();
+        return () => unregisterInlineSearch();
+    }, [registerInlineSearch, unregisterInlineSearch]);
+
+    const setRef = useCallback(
+        (el: HTMLInputElement | null) => {
+            inputRef.current = el;
+            searchInputRef.current = el;
+        },
+        [searchInputRef],
+    );
+
+    useEffect(() => {
+        setValue(searchParams.get('q') || '');
+    }, [searchParams]);
+
+    const handleSubmit = useCallback(
+        (term: string) => {
+            if (!term.trim()) return;
+            startTransition(() => {
+                router.push(`/search?q=${encodeURIComponent(term.trim())}`);
+            });
+        },
+        [router],
+    );
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = e.target.value;
+        setValue(newValue);
+        if (!newValue) startTransition(() => router.push('/search'));
+    };
+
+    const handleFormSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        handleSubmit(value);
+    };
+
+    return (
+        <InstantSearchDropdown
+            inputRef={inputRef}
+            searchValue={value}
+            onSearchValueChange={setValue}
+            onSubmit={handleSubmit}
+        >
+            <form onSubmit={handleFormSubmit} className="relative mb-4">
+                <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('searchPlaceholder')}
+                    className="pl-9 pr-16 w-full"
+                    value={value}
+                    onChange={handleChange}
+                    disabled={isPending}
+                    autoComplete="off"
+                />
+                <KbdShortcut className="absolute right-3 top-1/2 -translate-y-1/2" />
+            </form>
+        </InstantSearchDropdown>
+    );
+}

package/dist/assets/storefront/src/components/commerce/category-product-section.tsx

@@ -0,0 +1,69 @@
+import {Link} from '@/i18n/navigation';
+import { ArrowRight } from 'lucide-react';
+import { cacheLife, cacheTag } from 'next/cache';
+import {getTranslations} from 'next-intl/server';
+import { publicClient } from '@/lib/vendure/api';
+import { SearchProductsQuery } from '@/lib/vendure/queries';
+import { readFragment } from '@/graphql';
+import { ProductCardFragment } from '@/lib/vendure/fragments';
+import { ProductCard } from '@/components/commerce/product-card';
+const PRODUCTS_PER_SECTION = 4;
+
+interface CategoryProductSectionProps {
+    name: string;
+    slug: string;
+    locale: string;
+    channelToken?: string;
+}
+
+async function getCollectionPreviewProducts(slug: string, locale: string, channelToken?: string) {
+    'use cache';
+    cacheLife('hours');
+    cacheTag(`collection-preview-${slug}-${locale}${channelToken ? `-${channelToken}` : ''}`);
+
+    const [result, error] = await publicClient.query(SearchProductsQuery, {
+        input: {
+            collectionSlug: slug,
+            take: PRODUCTS_PER_SECTION,
+            skip: 0,
+            groupByProduct: true,
+        },
+    }, {languageCode: locale, ...(channelToken ? {channelToken} : {})});
+    if (error) return [];
+    return result.data.search.items;
+}
+
+export async function CategoryProductSection({ name, slug, locale, channelToken }: CategoryProductSectionProps) {
+    const [products, t] = await Promise.all([
+        getCollectionPreviewProducts(slug, locale, channelToken),
+        getTranslations('Catalog'),
+    ]);
+
+    if (products.length === 0) return null;
+
+    return (
+        <section>
+            <div className="flex items-center gap-3 mb-6 mt-4">
+                <Link
+                    href={`/collection/${slug}`}
+                    className="text-xl font-semibold text-foreground hover:text-primary transition-colors whitespace-nowrap"
+                >
+                    {name}
+                </Link>
+                <div className="flex-1 border-t border-border" />
+                <Link
+                    href={`/collection/${slug}`}
+                    className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary transition-colors whitespace-nowrap"
+                >
+                    {t('viewAllLink')}
+                    <ArrowRight className="h-3 w-3" />
+                </Link>
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {products.map((product) => (
+                    <ProductCard key={readFragment(ProductCardFragment, product).productId} product={product} />
+                ))}
+            </div>
+        </section>
+    );
+}

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

@@ -0,0 +1,133 @@
+'use client';
+
+import Image from 'next/image';
+import {useTranslations} from 'next-intl';
+import {Link, usePathname} from '@/i18n/navigation';
+import { ChevronRight, Layers, 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 { ResultOf } from '@/graphql';
+import type { GetTopCollectionsQuery } from '@/lib/vendure/queries';
+
+type Collection = ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
+
+interface CategorySidebarProps {
+    collections: Collection[];
+}
+
+function CategoryLinks({ collections, pathname, categoriesLabel, viewAllLabel }: { collections: Collection[]; pathname: string; categoriesLabel: string; viewAllLabel: string }) {
+    return (
+        <nav className="space-y-1">
+            <h2 className="font-semibold text-sm pb-2 flex items-center gap-2">
+                <Layers className="h-4 w-4 text-muted-foreground" />
+                {categoriesLabel}
+            </h2>
+            {collections.map((collection) => {
+                const href = `/collection/${collection.slug}`;
+                const isActive = pathname === href;
+                const hasChildren = collection.children && collection.children.length > 0;
+                const childActive = hasChildren && collection.children!.some(
+                    (c) => pathname === `/collection/${c.slug}`,
+                );
+
+                return (
+                    <div key={collection.id}>
+                        <Link
+                            href={href}
+                            className={cn(
+                                'flex items-center gap-2 py-2 px-2 rounded-md text-sm transition-colors',
+                                isActive || childActive
+                                    ? 'bg-primary/10 text-primary font-medium'
+                                    : 'text-foreground hover:bg-muted',
+                            )}
+                        >
+                            {collection.featuredAsset?.preview && (
+                                <Image
+                                    src={collection.featuredAsset.preview}
+                                    alt=""
+                                    width={32}
+                                    height={32}
+                                    className="flex-shrink-0 rounded object-cover w-8 h-8"
+                                />
+                            )}
+                            <span className="flex-1 truncate">{collection.name}</span>
+                            {hasChildren && (
+                                <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />
+                            )}
+                        </Link>
+                        {hasChildren && (isActive || childActive) && (
+                            <div className="ml-3 mt-0.5 space-y-0.5 border-l border-border pl-2">
+                                {collection.children!.map((child) => (
+                                    <Link
+                                        key={child.id}
+                                        href={`/collection/${child.slug}`}
+                                        className={cn(
+                                            'block py-1 px-2 rounded-md text-xs transition-colors',
+                                            pathname === `/collection/${child.slug}`
+                                                ? 'text-primary font-medium'
+                                                : 'text-muted-foreground hover:text-foreground',
+                                        )}
+                                    >
+                                        {child.name}
+                                    </Link>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                );
+            })}
+            <Link
+                href="/search"
+                className={cn(
+                    'flex items-center gap-2 py-2 px-2 rounded-md text-sm transition-colors',
+                    pathname === '/search'
+                        ? 'bg-primary/10 text-primary font-medium'
+                        : 'text-muted-foreground hover:text-foreground',
+                )}
+            >
+                {viewAllLabel}
+            </Link>
+        </nav>
+    );
+}
+
+export function CategorySidebar({ collections }: CategorySidebarProps) {
+    const t = useTranslations('Catalog');
+    const pathname = usePathname();
+
+    return (
+        <>
+            {/* Desktop: sticky sidebar */}
+            <div className="hidden lg:block sticky top-20">
+                <CategoryLinks collections={collections} pathname={pathname} categoriesLabel={t('categories')} viewAllLabel={t('viewAll')} />
+            </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('categories')}
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent side="left" className="overflow-y-auto">
+                        <SheetHeader>
+                            <SheetTitle>{t('categories')}</SheetTitle>
+                        </SheetHeader>
+                        <div className="px-4 pb-4">
+                            <CategoryLinks collections={collections} pathname={pathname} categoriesLabel={t('categories')} viewAllLabel={t('viewAll')} />
+                        </div>
+                    </SheetContent>
+                </Sheet>
+            </div>
+        </>
+    );
+}

package/dist/assets/storefront/src/components/commerce/collection-hero-banner.tsx

@@ -0,0 +1,36 @@
+import Image from 'next/image';
+
+interface CollectionHeroBannerProps {
+    name: string;
+    description?: string | null;
+    imageUrl: string;
+}
+
+export function CollectionHeroBanner({name, description, imageUrl}: CollectionHeroBannerProps) {
+    return (
+        <section className="relative overflow-hidden rounded-lg mb-6 aspect-[21/9] lg:aspect-[14/3]">
+            <Image
+                src={imageUrl}
+                alt=""
+                fill
+                priority
+                sizes="(max-width: 1024px) 100vw, 75vw"
+                className="object-cover"
+            />
+            <div
+                aria-hidden
+                className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-black/10"
+            />
+            <div className="absolute inset-x-0 bottom-0 p-6 md:p-8 text-white">
+                <h1 className="text-2xl md:text-4xl font-bold tracking-tight drop-shadow">
+                    {name}
+                </h1>
+                {description && (
+                    <p className="mt-2 max-w-2xl text-sm md:text-base text-white/80 line-clamp-2 drop-shadow">
+                        {description}
+                    </p>
+                )}
+            </div>
+        </section>
+    );
+}

package/dist/assets/storefront/src/components/commerce/company-state-badge.tsx

@@ -0,0 +1,32 @@
+import {Badge} from '@/components/ui/badge';
+import {
+    Clock,
+    CheckCircle,
+    XCircle,
+    Ban,
+    type LucideIcon,
+} from 'lucide-react';
+
+const STATE_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
+    Pending: {color: 'bg-amber-100 text-amber-800', label: 'Pending', icon: Clock},
+    Active: {color: 'bg-green-100 text-green-800', label: 'Active', icon: CheckCircle},
+    Suspended: {color: 'bg-red-100 text-red-800', label: 'Suspended', icon: XCircle},
+    Denied: {color: 'bg-red-100 text-red-800', label: 'Denied', icon: Ban},
+    Closed: {color: 'bg-gray-100 text-gray-500', label: 'Closed', icon: Ban},
+};
+
+interface CompanyStateBadgeProps {
+    state: string;
+}
+
+export function CompanyStateBadge({state}: CompanyStateBadgeProps) {
+    const config = STATE_CONFIG[state] || {color: 'bg-gray-100 text-gray-800', label: state, icon: Clock};
+    const Icon = config.icon;
+
+    return (
+        <Badge className={config.color} variant="secondary">
+            <Icon className="h-3 w-3 mr-1"/>
+            {config.label}
+        </Badge>
+    );
+}

package/dist/assets/storefront/src/components/commerce/company-switcher.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import {useTransition} from 'react';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {Button} from '@/components/ui/button';
+import {Building, Check, ChevronDown} from 'lucide-react';
+import {switchCompanyAction} from '@/components/layout/navbar/actions';
+import type {CompanyUserCompany} from '@/lib/vendure/queries';
+
+interface CompanySwitcherProps {
+    companies: CompanyUserCompany[];
+    activeCompanyId: string;
+}
+
+export function CompanySwitcher({companies, activeCompanyId}: CompanySwitcherProps) {
+    const [isPending, startTransition] = useTransition();
+    const activeCompany = companies.find(c => c.id === activeCompanyId);
+
+    if (companies.length <= 1) {
+        return null;
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm" className="w-full justify-between" disabled={isPending}>
+                    <span className="flex items-center gap-2">
+                        <Building className="h-4 w-4"/>
+                        {isPending ? 'Switching...' : (activeCompany?.name ?? 'Select Company')}
+                    </span>
+                    <ChevronDown className="h-3 w-3"/>
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+                {companies.map(company => (
+                    <DropdownMenuItem
+                        key={company.id}
+                        onClick={() => {
+                            if (company.id !== activeCompanyId) {
+                                startTransition(() => switchCompanyAction(company.id));
+                            }
+                        }}
+                    >
+                        <span className="flex items-center gap-2">
+                            {company.id === activeCompanyId && <Check className="h-3 w-3"/>}
+                            {company.name}
+                        </span>
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+}