@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/components/commerce/quote-version-comparison.tsx

@@ -0,0 +1,88 @@
+import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
+import {Price} from '@/components/commerce/price';
+import {Badge} from '@/components/ui/badge';
+import type {QuoteDetail, QuoteVersion} from '@/lib/vendure/queries';
+import {getTranslations} from 'next-intl/server';
+
+interface VersionComparisonProps {
+    currentVersion: NonNullable<QuoteDetail['currentVersion']>;
+    versions: QuoteVersion[];
+    currencyCode: string;
+}
+
+export async function QuoteVersionComparison({currentVersion, versions, currencyCode}: VersionComparisonProps) {
+    const t = await getTranslations('Quotes');
+    const hasMultipleVersions = versions.length > 1;
+    const v1 = versions.find(v => v.versionNumber === 1);
+    const v1ItemsBySku = new Map(
+        v1?.lineItems.map(item => [item.sku, item]) ?? [],
+    );
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>{t('lineItemsCardTitle', {version: currentVersion.versionNumber})}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div className="space-y-3">
+                    {currentVersion.lineItems.map((item) => {
+                        const v1Item = v1ItemsBySku.get(item.sku);
+                        const hasPriceDiff = hasMultipleVersions && v1Item && v1Item.unitPrice !== item.unitPrice;
+                        const isNew = hasMultipleVersions && !v1Item;
+                        const diff = hasPriceDiff ? item.unitPrice - v1Item.unitPrice : 0;
+                        const pctDiff = hasPriceDiff ? ((diff / v1Item.unitPrice) * 100) : 0;
+
+                        return (
+                            <div key={item.id} className="flex gap-4">
+                                <div className="flex-1">
+                                    <div className="flex items-center gap-2 flex-wrap">
+                                        <p className="font-medium">{item.productName}</p>
+                                        {isNew && (
+                                            <Badge variant="secondary" className="text-xs">{t('lineItemNew')}</Badge>
+                                        )}
+                                        {item.productVariant?.stockLevel && item.productVariant.stockLevel !== 'IN_STOCK' && (
+                                            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${
+                                                item.productVariant.stockLevel === 'OUT_OF_STOCK'
+                                                    ? 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
+                                                    : 'bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300'
+                                            }`}>
+                                                {item.productVariant.stockLevel === 'OUT_OF_STOCK' ? t('lineItemOutOfStock') : t('lineItemLowStock')}
+                                            </span>
+                                        )}
+                                    </div>
+                                    <p className="text-sm text-muted-foreground">
+                                        {t('lineItemSku', {sku: item.sku})}
+                                    </p>
+                                    {item.note && (
+                                        <p className="text-sm text-muted-foreground italic mt-1">
+                                            {item.note}
+                                        </p>
+                                    )}
+                                </div>
+                                <div className="text-right">
+                                    <p className="font-medium">
+                                        <Price value={item.unitPrice * item.quantity} currencyCode={currencyCode}/>
+                                    </p>
+                                    <p className="text-sm text-muted-foreground">
+                                        {t('lineItemQty', {qty: item.quantity})} &times; <Price value={item.unitPrice} currencyCode={currencyCode}/>
+                                    </p>
+                                    {hasPriceDiff && (
+                                        <div className="mt-1">
+                                            <p className="text-xs text-muted-foreground line-through">
+                                                <Price value={v1Item.unitPrice} currencyCode={currencyCode}/>
+                                            </p>
+                                            <p className={`text-xs font-medium ${diff < 0 ? 'text-green-600' : 'text-red-600'}`}>
+                                                {diff < 0 ? '' : '+'}<Price value={diff} currencyCode={currencyCode}/>
+                                                {' '}({pctDiff > 0 ? '+' : ''}{pctDiff.toFixed(1)}%)
+                                            </p>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

package/dist/assets/storefront/src/components/commerce/related-products.tsx

@@ -0,0 +1,56 @@
+import { ProductCarousel } from "@/components/commerce/product-carousel";
+import { cacheLife, cacheTag } from "next/cache";
+import { publicClient } from "@/lib/vendure/api";
+import { GetCollectionProductsQuery } from "@/lib/vendure/queries";
+import { readFragment } from "@/graphql";
+import { ProductCardFragment } from "@/lib/vendure/fragments";
+import { getTranslations } from "next-intl/server";
+export interface RelatedProductsProps {
+    collectionSlug: string;
+    currentProductId: string;
+    locale: string;
+    channelToken?: string;
+}
+
+async function getRelatedProducts(collectionSlug: string, locale: string, currentProductId: string, channelToken?: string) {
+    'use cache'
+    cacheLife('hours')
+    cacheTag(`related-products-${collectionSlug}-${locale}${channelToken ? `-${channelToken}` : ''}`)
+
+    const [result, error] = await publicClient.query(GetCollectionProductsQuery, {
+        slug: collectionSlug,
+        input: {
+            collectionSlug: collectionSlug,
+            take: 13, // Fetch extra to account for filtering out current product
+            skip: 0,
+            groupByProduct: true
+        }
+    }, {languageCode: locale, ...(channelToken ? {channelToken} : {})});
+    if (error) return [];
+
+    // Filter out the current product and limit to 12
+    return result.data.search.items
+        .filter(item => {
+            const product = readFragment(ProductCardFragment, item);
+            return product.productId !== currentProductId;
+        })
+        .slice(0, 12);
+}
+
+export async function RelatedProducts({ collectionSlug, currentProductId, locale, channelToken }: RelatedProductsProps) {
+    const [products, t] = await Promise.all([
+        getRelatedProducts(collectionSlug, locale, currentProductId, channelToken),
+        getTranslations('Product'),
+    ]);
+
+    if (products.length === 0) {
+        return null;
+    }
+
+    return (
+        <ProductCarousel
+            title={t('relatedProducts')}
+            products={products}
+        />
+    );
+}

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

@@ -0,0 +1,59 @@
+import Image from 'next/image';
+import {Layers} from 'lucide-react';
+import {Link} from '@/i18n/navigation';
+import type {ResultOf} from '@/graphql';
+import type {GetTopCollectionsQuery} from '@/lib/vendure/queries';
+
+export type ShopByCategoryCollection =
+    ResultOf<typeof GetTopCollectionsQuery>['collections']['items'][number];
+
+export interface ShopByCategoryProps {
+    collections: ShopByCategoryCollection[];
+}
+
+/**
+ * Photo tile grid of top-level collections. Each tile links to the collection
+ * detail page; tiles without `featuredAsset` fall back to a `Layers` icon on
+ * muted background. Callers wrap in their own `<section>` / container —
+ * this component is layout-neutral so it can be used on the homepage, a
+ * standalone catalog landing page, or elsewhere.
+ */
+export function ShopByCategory({collections}: ShopByCategoryProps) {
+    if (!collections.length) return null;
+
+    return (
+        <ul className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+            {collections.map((collection) => (
+                <li key={collection.id}>
+                    <Link
+                        href={`/collection/${collection.slug}`}
+                        className="group relative block overflow-hidden rounded-lg border border-border hover:border-primary/40 transition-colors aspect-[4/3]"
+                    >
+                        {collection.featuredAsset?.preview ? (
+                            <Image
+                                src={collection.featuredAsset.preview}
+                                alt=""
+                                fill
+                                sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 17vw"
+                                className="object-cover group-hover:scale-105 transition-transform duration-300"
+                            />
+                        ) : (
+                            <div className="h-full w-full flex items-center justify-center bg-muted">
+                                <Layers className="h-8 w-8 text-muted-foreground/30" />
+                            </div>
+                        )}
+                        <div
+                            aria-hidden
+                            className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"
+                        />
+                        <div className="absolute inset-x-0 bottom-0 p-2.5 text-white">
+                            <h3 className="text-sm font-semibold tracking-tight drop-shadow line-clamp-2">
+                                {collection.name}
+                            </h3>
+                        </div>
+                    </Link>
+                </li>
+            ))}
+        </ul>
+    );
+}

package/dist/assets/storefront/src/components/commerce/shopping-list-toggle.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { Heart, Check, Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@/components/ui/popover';
+import { addToShoppingList, removeFromShoppingList } from '@/app/[locale]/account/shopping-lists/actions';
+import { toast } from 'sonner';
+import type { ShoppingListInfo } from '@/app/[locale]/account/shopping-lists/actions';
+
+interface ShoppingListToggleProps {
+    variantId: string;
+    shoppingLists: ShoppingListInfo[];
+    initialIsInAnyList: boolean;
+}
+
+export function ShoppingListToggle({ variantId, shoppingLists, initialIsInAnyList }: ShoppingListToggleProps) {
+    const [lists, setLists] = useState(shoppingLists);
+    const [isPending, startTransition] = useTransition();
+    const [open, setOpen] = useState(false);
+    // Track adds when we have no list data (0 lists → server creates default)
+    const [addedToDefault, setAddedToDefault] = useState(false);
+
+    const isInAnyList = addedToDefault || lists.some((list) => list.items.some((item) => item.variantId === variantId));
+
+    const handleAdd = (listId: string, listName: string) => {
+        startTransition(async () => {
+            const result = await addToShoppingList(variantId, listId);
+            if (result.success) {
+                setLists((prev) =>
+                    prev.map((l) =>
+                        l.id === listId
+                            ? { ...l, items: [...l.items, { itemId: result.addedItemId ?? '', variantId }] }
+                            : l,
+                    ),
+                );
+                toast.success(`Added to ${listName}`);
+            } else {
+                toast.error(result.error || 'Failed to add to shopping list');
+            }
+        });
+    };
+
+    const handleRemove = (listId: string, listName: string) => {
+        const list = lists.find((l) => l.id === listId);
+        const item = list?.items.find((i) => i.variantId === variantId);
+        if (!item) return;
+
+        startTransition(async () => {
+            const result = await removeFromShoppingList([item.itemId], listId);
+            if (result.success) {
+                setLists((prev) =>
+                    prev.map((l) =>
+                        l.id === listId
+                            ? { ...l, items: l.items.filter((i) => i.variantId !== variantId) }
+                            : l,
+                    ),
+                );
+                toast.success(`Removed from ${listName}`);
+            } else {
+                toast.error(result.error || 'Failed to remove from shopping list');
+            }
+        });
+    };
+
+    // No lists or single list: simple toggle button
+    if (lists.length <= 1) {
+        const list = lists[0];
+        const isInList = list?.items.some((item) => item.variantId === variantId) ?? false;
+
+        const handleToggle = () => {
+            if (isInList && list) {
+                handleRemove(list.id, list.name);
+            } else if (list) {
+                handleAdd(list.id, list.name);
+            } else {
+                // No lists yet — addToShoppingList without ID creates default list
+                startTransition(async () => {
+                    const result = await addToShoppingList(variantId);
+                    if (result.success) {
+                        setAddedToDefault(true);
+                        toast.success('Added to shopping list');
+                    } else {
+                        toast.error(result.error || 'Failed to add to shopping list');
+                    }
+                });
+            }
+        };
+
+        return (
+            <Button
+                variant="outline"
+                size="icon"
+                onClick={handleToggle}
+                disabled={isPending}
+                aria-label={isInList || addedToDefault ? 'Remove from shopping list' : 'Add to shopping list'}
+            >
+                <Heart
+                    className={`h-5 w-5 transition-colors ${
+                        isInList || addedToDefault ? 'fill-red-500 text-red-500' : 'text-muted-foreground'
+                    }`}
+                />
+            </Button>
+        );
+    }
+
+    // Multiple lists: popover with list picker
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    size="icon"
+                    disabled={isPending}
+                    aria-label="Add to shopping list"
+                >
+                    <Heart
+                        className={`h-5 w-5 transition-colors ${
+                            isInAnyList ? 'fill-red-500 text-red-500' : 'text-muted-foreground'
+                        }`}
+                    />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-56 p-1">
+                <div className="text-xs font-medium text-muted-foreground px-2 py-1.5">
+                    Add to shopping list
+                </div>
+                {lists.map((list) => {
+                    const isInList = list.items.some((item) => item.variantId === variantId);
+                    return (
+                        <button
+                            key={list.id}
+                            type="button"
+                            disabled={isPending}
+                            onClick={() =>
+                                isInList
+                                    ? handleRemove(list.id, list.name)
+                                    : handleAdd(list.id, list.name)
+                            }
+                            className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+                        >
+                            {isInList ? (
+                                <Check className="h-4 w-4 text-primary" />
+                            ) : (
+                                <Plus className="h-4 w-4 text-muted-foreground" />
+                            )}
+                            <span className="truncate">{list.name}</span>
+                        </button>
+                    );
+                })}
+            </PopoverContent>
+        </Popover>
+    );
+}

package/dist/assets/storefront/src/components/commerce/sort-dropdown.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import {useSearchParams} from "next/navigation";
+import {usePathname, useRouter} from "@/i18n/navigation";
+import {useTranslations} from 'next-intl';
+
+export function SortDropdown() {
+    const t = useTranslations('Sort');
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+
+    const sortOptions = [
+        {value: 'name-asc', label: t('nameAsc')},
+        {value: 'name-desc', label: t('nameDesc')},
+        {value: 'price-asc', label: t('priceAsc')},
+        {value: 'price-desc', label: t('priceDesc')},
+    ];
+
+    const currentSort = searchParams.get('sort') || 'name-asc';
+
+    const handleSortChange = (value: string) => {
+        const params = new URLSearchParams(searchParams);
+        params.set('sort', value);
+        params.delete('page'); // Reset to page 1 when sort changes
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    return (
+        <Select value={currentSort} onValueChange={handleSortChange}>
+            <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder={t('placeholder')}/>
+            </SelectTrigger>
+            <SelectContent>
+                {sortOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                        {option.label}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}

package/dist/assets/storefront/src/components/commerce/store-credit-summary.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { Price } from '@/components/commerce/price';
+import { maskCode } from '@/lib/format';
+import { Wallet } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import type { StoreCredit } from '@/lib/vendure/queries';
+
+interface StoreCreditSummaryProps {
+  credits: StoreCredit[];
+  totalAfterCredit: number | null | undefined;
+  currencyCode: string;
+}
+
+export function StoreCreditSummary({ credits, totalAfterCredit, currencyCode }: StoreCreditSummaryProps) {
+  const t = useTranslations('Cart');
+  if (credits.length === 0) return null;
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Wallet className="h-5 w-5 text-muted-foreground" />
+        <h4 className="font-medium">{t('storeCreditsApplied')}</h4>
+      </div>
+      <div className="text-sm space-y-1">
+        {credits.map((credit) => (
+          <div key={credit.code} className="flex justify-between">
+            <span className="text-muted-foreground">
+              {maskCode(credit.code)}
+            </span>
+            <span className="text-green-600">
+              -<Price value={credit.amountDeducted} currencyCode={currencyCode} />
+            </span>
+          </div>
+        ))}
+        {totalAfterCredit != null && (
+          <div className="flex justify-between font-medium pt-1">
+            <span>{t('amountToPay')}</span>
+            <Price value={totalAfterCredit} currencyCode={currencyCode} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/dist/assets/storefront/src/components/commerce/subcollection-tiles.tsx

@@ -0,0 +1,56 @@
+import Image from 'next/image';
+import {Link} from '@/i18n/navigation';
+import {Layers} from 'lucide-react';
+import type {ResultOf} from 'gql.tada';
+import type {GetCollectionProductsQuery} from '@/lib/vendure/queries';
+
+// Derived from the GetCollectionProductsQuery so the shape stays in sync with
+// the actual GraphQL response. The `children` field is `null | undefined |
+// SubcollectionTile[]`, so unwrap via NonNullable + the array element type.
+type CollectionChildren = NonNullable<ResultOf<typeof GetCollectionProductsQuery>['collection']>['children'];
+type SubcollectionTile = NonNullable<CollectionChildren>[number];
+
+interface SubcollectionTilesProps {
+    collections: SubcollectionTile[];
+}
+
+export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
+    if (!collections.length) return null;
+
+    return (
+        <nav aria-label="Subcategories" className="mb-6">
+            <ul className="flex gap-3 overflow-x-auto pb-1 -mx-1 px-1 snap-x">
+                {collections.map((c) => (
+                    <li key={c.id} className="snap-start shrink-0">
+                        <Link
+                            href={`/collection/${c.slug}`}
+                            className="group block w-[160px]"
+                        >
+                            <div className="relative h-[120px] w-full overflow-hidden rounded-md bg-muted border border-border group-hover:border-primary/40 transition-colors">
+                                {c.featuredAsset?.preview ? (
+                                    <Image
+                                        src={c.featuredAsset.preview}
+                                        alt=""
+                                        fill
+                                        sizes="160px"
+                                        className="object-cover group-hover:scale-105 transition-transform duration-300"
+                                    />
+                                ) : (
+                                    <div className="h-full w-full flex items-center justify-center">
+                                        <Layers className="h-8 w-8 text-muted-foreground/40" />
+                                    </div>
+                                )}
+                                <div aria-hidden className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                                <div className="absolute inset-x-0 bottom-0 p-2 text-white">
+                                    <p className="text-xs font-medium line-clamp-2 drop-shadow">
+                                        {c.name}
+                                    </p>
+                                </div>
+                            </div>
+                        </Link>
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+}

package/dist/assets/storefront/src/components/layout/auth-page-shell.tsx

@@ -0,0 +1,15 @@
+import type {ReactNode} from 'react';
+
+/**
+ * Wraps auth-flow pages (sign-in, register, verify, etc.) in a vertically
+ * centered, viewport-tall container that clears the fixed navbar via the
+ * `--page-top-offset` CSS variable. The content is centered horizontally
+ * inside a max-width-md column.
+ */
+export function AuthPageShell({children}: {children: ReactNode}) {
+    return (
+        <div className="flex min-h-[calc(100vh-var(--page-top-offset))] mt-[var(--page-top-offset)] items-center justify-center px-4 py-8">
+            <div className="w-full max-w-md space-y-6">{children}</div>
+        </div>
+    );
+}

package/dist/assets/storefront/src/components/layout/draft-mode-action.ts

@@ -0,0 +1,8 @@
+'use server';
+
+import { draftMode } from 'next/headers';
+
+export async function isDraftModeEnabled(): Promise<boolean> {
+    const draft = await draftMode();
+    return draft.isEnabled;
+}

package/dist/assets/storefront/src/components/layout/draft-mode-indicator.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Hammer } from 'lucide-react';
+import { isDraftModeEnabled } from './draft-mode-action';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from '@/components/ui/tooltip';
+
+export function DraftModeIndicator() {
+    const [active, setActive] = useState(false);
+
+    useEffect(() => {
+        isDraftModeEnabled().then(setActive);
+    }, []);
+
+    if (!active) {
+        return null;
+    }
+
+    return (
+        <TooltipProvider>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <div className="flex items-center justify-center size-9 rounded-md bg-amber-400 text-black cursor-default">
+                        <Hammer className="h-5 w-5" />
+                    </div>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>Draft mode active — viewing unpublished content</p>
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+}
+
+export function DraftModeBorderStyle() {
+    const [active, setActive] = useState(false);
+
+    useEffect(() => {
+        isDraftModeEnabled().then(setActive);
+    }, []);
+
+    if (!active) {
+        return null;
+    }
+
+    return (
+        <style>{`header { border-bottom-color: rgb(245 158 11) !important; border-bottom-width: 2px !important; }`}</style>
+    );
+}

package/dist/assets/storefront/src/components/layout/draft-mode-link.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { usePathname } from '@/i18n/navigation';
+import { Hammer } from 'lucide-react';
+import { isDraftModeEnabled } from './draft-mode-action';
+
+export function DraftModeLink() {
+    const pathname = usePathname();
+    const [active, setActive] = useState(false);
+
+    useEffect(() => {
+        isDraftModeEnabled().then(setActive);
+    }, []);
+
+    const href = active
+        ? `/api/draft/disable?slug=${encodeURIComponent(pathname)}`
+        : `/api/draft?secret=draft-preview-secret&slug=${encodeURIComponent(pathname)}`;
+
+    return (
+        <a
+            href={href}
+            className={`transition-colors inline-flex items-center gap-1.5 ${active ? 'text-amber-500 hover:text-amber-600' : 'hover:text-primary'}`}
+        >
+            <Hammer className="h-3.5 w-3.5" />
+            {active ? 'Disable Draft Mode' : 'Enable Draft Mode'}
+        </a>
+    );
+}