@vendure-platform/create 0.1.0

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

@@ -0,0 +1,286 @@
+'use client';
+
+import { use, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { useSearchParams } from 'next/navigation';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '@/components/ui/accordion';
+import {
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
+} from '@/components/ui/sheet';
+import { SlidersHorizontal, Layers, ListTree, Tag } from 'lucide-react';
+import { type SearchProductsResult } from '@/lib/vendure/queries';
+import { RESERVED_PARAMS, STRUCTURAL_PARAMS } from '@/lib/search-helpers';
+import { ActiveFilters } from './active-filters';
+import { PriceRangeFilter } from './price-range-filter';
+import { Switch } from '@/components/ui/switch';
+
+const VISIBLE_COUNT = 6;
+
+// Controls display order of facet groups — lower = higher priority.
+// Unlisted facets sort alphabetically after these.
+const FACET_PRIORITY: Record<string, number> = {
+    category: 0,
+    subcategory: 1,
+    brand: 2,
+    material: 3,
+};
+
+function facetSortKey(name: string): number {
+    return FACET_PRIORITY[name.toLowerCase()] ?? 999;
+}
+
+interface FacetFiltersProps {
+    productDataPromise: SearchProductsResult;
+}
+
+export function FacetFilters({ productDataPromise }: FacetFiltersProps) {
+    const t = useTranslations('Filters');
+    const result = use(productDataPromise);
+    const searchResult = result.data.search;
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+
+    const facetGroups = searchResult.facets
+        .map((item) => ({
+            code: item.facet.code,
+            name: item.facet.name,
+            values: item.facetValueCounts.map((fvc) => ({
+                code: fvc.facetValue.code,
+                name: fvc.facetValue.name,
+                count: fvc.count,
+            })),
+        }))
+        .sort((a, b) => facetSortKey(a.name) - facetSortKey(b.name));
+
+    const facetValueMap = searchResult.facets.flatMap((item) =>
+        item.facetValueCounts.map((fvc) => ({
+            code: fvc.facetValue.code,
+            name: fvc.facetValue.name,
+            facetCode: item.facet.code,
+            facetName: item.facet.name,
+        })),
+    );
+
+    const activeFilterCount =
+        [...searchParams.entries()]
+            .filter(([key]) => !RESERVED_PARAMS.has(key))
+            .reduce((n, [, v]) => n + v.split(',').length, 0)
+        + (searchParams.has('priceMin') || searchParams.has('priceMax') ? 1 : 0)
+        + (searchParams.get('inStock') === 'true' ? 1 : 0);
+
+    const toggleFacet = (facetCode: string, valueCode: string) => {
+        const params = new URLSearchParams(searchParams);
+        const current = params.get(facetCode)?.split(',').filter(Boolean) ?? [];
+
+        if (current.includes(valueCode)) {
+            const updated = current.filter((c) => c !== valueCode);
+            if (updated.length > 0) {
+                params.set(facetCode, updated.join(','));
+            } else {
+                params.delete(facetCode);
+            }
+        } else {
+            params.set(facetCode, [...current, valueCode].join(','));
+        }
+
+        params.delete('page');
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    const clearFilters = () => {
+        const params = new URLSearchParams(searchParams);
+        for (const key of [...params.keys()]) {
+            if (!STRUCTURAL_PARAMS.has(key)) params.delete(key);
+        }
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    const toggleInStock = (checked: boolean) => {
+        const params = new URLSearchParams(searchParams);
+        if (checked) {
+            params.set('inStock', 'true');
+        } else {
+            params.delete('inStock');
+        }
+        params.delete('page');
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    const hasActiveFilters = activeFilterCount > 0;
+
+    const prices = searchResult.prices;
+    const isInStock = searchParams.get('inStock') === 'true';
+
+    if (facetGroups.length === 0 && prices.range.min === prices.range.max && !hasActiveFilters) {
+        return null;
+    }
+
+    const defaultOpen = facetGroups.slice(0, 2).map((f) => f.code);
+
+    const filterContent = (
+        <div className="space-y-1">
+            <div className="flex items-center justify-between pb-2">
+                <h2 className="font-semibold text-sm flex items-center gap-2">
+                    <SlidersHorizontal className="h-4 w-4 text-muted-foreground" />
+                    {t('title')}
+                </h2>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={clearFilters}
+                    className={`h-7 text-xs text-muted-foreground hover:text-foreground ${!hasActiveFilters ? 'invisible' : ''}`}
+                >
+                    {t('clearAll')}
+                </Button>
+            </div>
+
+            <ActiveFilters facetValueMap={facetValueMap} />
+
+            <div className="flex items-center justify-between py-2">
+                <Label htmlFor="in-stock-toggle" className="text-sm font-normal cursor-pointer">
+                    {t('inStockOnly')}
+                </Label>
+                <Switch
+                    id="in-stock-toggle"
+                    checked={isInStock}
+                    onCheckedChange={toggleInStock}
+                />
+            </div>
+
+            <PriceRangeFilter min={prices.range.min} max={prices.range.max} />
+
+            <Accordion type="multiple" defaultValue={defaultOpen}>
+                {facetGroups.map((facet) => {
+                    const facetNameLower = facet.name.toLowerCase();
+                    const FacetIcon = facetNameLower.includes('subcategory') ? ListTree
+                        : facetNameLower.includes('category') ? Layers
+                        : facetNameLower.includes('brand') ? Tag
+                        : SlidersHorizontal;
+
+                    const selectedValues = searchParams.get(facet.code)?.split(',') ?? [];
+
+                    return (
+                        <AccordionItem key={facet.code} value={facet.code}>
+                            <AccordionTrigger className="py-2 text-sm hover:no-underline">
+                                <span className="flex items-center gap-2">
+                                    <FacetIcon className="h-3.5 w-3.5 text-muted-foreground" />
+                                    {facet.name.charAt(0).toUpperCase() + facet.name.slice(1)}
+                                </span>
+                            </AccordionTrigger>
+                            <AccordionContent>
+                                <FacetValueList
+                                    facetCode={facet.code}
+                                    values={facet.values}
+                                    selectedValues={selectedValues}
+                                    onToggle={toggleFacet}
+                                />
+                            </AccordionContent>
+                        </AccordionItem>
+                    );
+                })}
+            </Accordion>
+        </div>
+    );
+
+    return (
+        <>
+            {/* Desktop: sticky sidebar */}
+            <div className="hidden lg:block sticky top-20">
+                {filterContent}
+            </div>
+
+            {/* Mobile: sheet trigger */}
+            <div className="lg:hidden">
+                <Sheet>
+                    <SheetTrigger asChild>
+                        <Button variant="outline" size="sm" className="gap-2">
+                            <SlidersHorizontal className="h-4 w-4" />
+                            {t('filtersButton')}
+                            {hasActiveFilters && (
+                                <Badge className="h-5 min-w-5 px-1.5 text-[10px]">
+                                    {activeFilterCount}
+                                </Badge>
+                            )}
+                        </Button>
+                    </SheetTrigger>
+                    <SheetContent side="left" className="overflow-y-auto">
+                        <SheetHeader>
+                            <SheetTitle>{t('title')}</SheetTitle>
+                        </SheetHeader>
+                        <div className="px-4 pb-4">{filterContent}</div>
+                    </SheetContent>
+                </Sheet>
+            </div>
+        </>
+    );
+}
+
+function FacetValueList({
+    facetCode,
+    values,
+    selectedValues,
+    onToggle,
+}: {
+    facetCode: string;
+    values: Array<{ code: string; name: string; count: number }>;
+    selectedValues: string[];
+    onToggle: (facetCode: string, valueCode: string) => void;
+}) {
+    const t = useTranslations('Filters');
+    const [expanded, setExpanded] = useState(false);
+    const needsTruncation = values.length > VISIBLE_COUNT;
+    const visible = expanded ? values : values.slice(0, VISIBLE_COUNT);
+
+    return (
+        <div className="space-y-2">
+            {visible.map((value) => {
+                const isChecked = selectedValues.includes(value.code);
+                return (
+                    <div key={value.code} className="flex items-center gap-2">
+                        <Checkbox
+                            id={`facet-${facetCode}-${value.code}`}
+                            checked={isChecked}
+                            onCheckedChange={() => onToggle(facetCode, value.code)}
+                        />
+                        <Label
+                            htmlFor={`facet-${facetCode}-${value.code}`}
+                            className="text-sm font-normal cursor-pointer flex-1 flex items-center justify-between"
+                        >
+                            <span className={isChecked ? 'text-foreground' : ''}>
+                                {value.name}
+                            </span>
+                            <span className="text-xs text-muted-foreground tabular-nums">
+                                {value.count}
+                            </span>
+                        </Label>
+                    </div>
+                );
+            })}
+            {needsTruncation && (
+                <button
+                    onClick={() => setExpanded(!expanded)}
+                    className="text-xs text-primary hover:text-primary/80 pt-1"
+                >
+                    {expanded
+                        ? t('showLess')
+                        : t('moreCount', { count: values.length - VISIBLE_COUNT })}
+                </button>
+            )}
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/gift-card-pdp.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useState } from 'react';
+import { ProductImageCarousel } from './product-image-carousel';
+import { GiftCardProductInfo } from './gift-card-product-info';
+import type { AddGiftCardInput } from '@/app/[locale]/(catalog)/product/[slug]/actions';
+import type { GiftCardTemplate } from '@/lib/vendure/queries';
+
+interface GiftCardPdpProps {
+    templates: GiftCardTemplate[];
+    currencyCode: string;
+    addToCartAction: (input: AddGiftCardInput) => Promise<{ error?: string; success?: boolean }>;
+}
+
+export function GiftCardPdp({ templates, currencyCode, addToCartAction }: GiftCardPdpProps) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+
+    const carouselImages = templates.map(t => ({
+        id: t.image.id,
+        preview: t.image.preview,
+        source: t.image.source,
+    }));
+
+    return (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
+            <div className="lg:sticky lg:top-20 lg:self-start">
+                <ProductImageCarousel
+                    images={carouselImages}
+                    selectedIndex={selectedIndex}
+                    onIndexChange={setSelectedIndex}
+                />
+            </div>
+            <div>
+                <GiftCardProductInfo
+                    templates={templates}
+                    currencyCode={currencyCode}
+                    selectedTemplateIndex={selectedIndex}
+                    addToCartAction={addToCartAction}
+                />
+            </div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/gift-card-product-info.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { useTranslations, useLocale } from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Loader2 } from 'lucide-react';
+import { useRouter } from '@/i18n/navigation';
+import type { AddGiftCardInput } from '@/app/[locale]/(catalog)/product/[slug]/actions';
+
+interface GiftCardProductInfoProps {
+    templates: Array<{ id: string; name: string }>;
+    currencyCode: string;
+    selectedTemplateIndex: number;
+    addToCartAction: (input: AddGiftCardInput) => Promise<{ error?: string; success?: boolean }>;
+}
+
+export function GiftCardProductInfo({
+    templates,
+    currencyCode,
+    selectedTemplateIndex,
+    addToCartAction,
+}: GiftCardProductInfoProps) {
+    const t = useTranslations('GiftCard');
+    const locale = useLocale();
+    const router = useRouter();
+    const [isPending, startTransition] = useTransition();
+    const [error, setError] = useState<string | null>(null);
+
+    const selectedTemplate = templates[selectedTemplateIndex] ?? templates[0];
+
+    const currencySymbol = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode })
+        .formatToParts(0).find(p => p.type === 'currency')?.value ?? currencyCode;
+    // Zero-decimal currencies (JPY, KRW, etc.) don't need subunit conversion
+    const subunitFactor = new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode })
+        .resolvedOptions().maximumFractionDigits === 0 ? 1 : 100;
+
+    const handleSubmit = (formData: FormData) => {
+        startTransition(async () => {
+            setError(null);
+
+            const amountInMajorUnits = parseFloat(formData.get('value') as string);
+            if (!amountInMajorUnits || amountInMajorUnits <= 0) {
+                setError(t('invalidAmount'));
+                return;
+            }
+
+            const result = await addToCartAction({
+                value: Math.round(amountInMajorUnits * subunitFactor),
+                templateId: selectedTemplate.id,
+                senderName: (formData.get('senderName') as string) || undefined,
+                recipientEmailAddress: (formData.get('recipientEmail') as string) || undefined,
+                message: (formData.get('message') as string) || undefined,
+                deliveryDate: (formData.get('deliveryDate') as string) || undefined,
+            });
+
+            if (result?.error) {
+                setError(result.error);
+            } else {
+                router.push('/cart');
+            }
+        });
+    };
+
+    return (
+        <div>
+            <h1 className="text-3xl font-bold mb-2">{t('purchaseTitle')}</h1>
+            <p className="text-muted-foreground mb-6">
+                {t('template', {name: selectedTemplate?.name ?? ''})}
+            </p>
+
+            <form action={handleSubmit} className="space-y-4">
+                <div className="space-y-2">
+                    <Label htmlFor="value">{t('amountLabel', {symbol: currencySymbol})}</Label>
+                    <Input
+                        id="value"
+                        name="value"
+                        type="number"
+                        min="1"
+                        step={subunitFactor === 1 ? '1' : '0.01'}
+                        placeholder="25.00"
+                        required
+                    />
+                </div>
+
+                <div className="space-y-2">
+                    <Label htmlFor="senderName">{t('yourName')}</Label>
+                    <Input
+                        id="senderName"
+                        name="senderName"
+                        placeholder="John Doe"
+                    />
+                </div>
+
+                <div className="space-y-2">
+                    <Label htmlFor="recipientEmail">{t('recipientEmail')}</Label>
+                    <Input
+                        id="recipientEmail"
+                        name="recipientEmail"
+                        type="email"
+                        placeholder="friend@example.com"
+                    />
+                </div>
+
+                <div className="space-y-2">
+                    <Label htmlFor="message">{t('message')}</Label>
+                    <Textarea
+                        id="message"
+                        name="message"
+                        placeholder="Happy Birthday!"
+                        rows={3}
+                    />
+                </div>
+
+                <div className="space-y-2">
+                    <Label htmlFor="deliveryDate">{t('deliveryDate')}</Label>
+                    <Input
+                        id="deliveryDate"
+                        name="deliveryDate"
+                        type="date"
+                    />
+                </div>
+
+                {error && (
+                    <p className="text-sm text-destructive">{error}</p>
+                )}
+
+                <Button type="submit" size="lg" className="w-full" disabled={isPending}>
+                    {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                    {t('addToCart')}
+                </Button>
+            </form>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/commerce/highlighted-text.tsx

@@ -0,0 +1,30 @@
+interface HighlightedTextProps {
+    text: string;
+    matchedTokens: string[];
+    className?: string;
+}
+
+export function HighlightedText({ text, matchedTokens, className }: HighlightedTextProps) {
+    if (matchedTokens.length === 0) return null;
+
+    const pattern = new RegExp(`(${matchedTokens.map(escapeRegExp).join('|')})`, 'gi');
+    const parts = text.split(pattern);
+
+    return (
+        <p className={className}>
+            {parts.map((part, i) =>
+                pattern.test(part) ? (
+                    <mark key={i} className="bg-primary/20 text-foreground">
+                        {part}
+                    </mark>
+                ) : (
+                    part
+                ),
+            )}
+        </p>
+    );
+}
+
+function escapeRegExp(s: string) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}