@vendure-platform/create 0.1.0

package/dist/assets/storefront/src/app/[locale]/cart/cart-items.tsx

@@ -0,0 +1,228 @@
+'use client';
+
+import Image from 'next/image';
+import {Link} from '@/i18n/navigation';
+import {Badge} from '@/components/ui/badge';
+import {EmptyState} from '@/components/ui/empty-state';
+import {ClipboardCheck, Gift, Package, ShoppingCart} from 'lucide-react';
+import {Price} from '@/components/commerce/price';
+import {CartQuantityControl} from './cart-quantity-control';
+import {CartRemoveButton} from './cart-remove-button';
+import {useTranslations} from 'next-intl';
+
+type GiftCardInput = {
+    value: number;
+    senderName?: string | null;
+    recipientEmailAddress?: string | null;
+    message?: string | null;
+    deliveryDate?: string | null;
+    templateName?: string | null;
+};
+
+type ActiveOrder = {
+    id: string;
+    currencyCode: string;
+    lines: Array<{
+        id: string;
+        quantity: number;
+        unitPrice: number;
+        unitPriceWithTax: number;
+        linePrice: number;
+        linePriceWithTax: number;
+        productVariant: {
+            id: string;
+            name: string;
+            sku: string;
+            price: number;
+            product: {
+                name: string;
+                slug: string;
+                featuredAsset?: {
+                    preview: string;
+                } | null;
+            };
+        };
+        giftCardInput?: GiftCardInput | null;
+        customFields?: {
+            packagingUnit?: {
+                id: string;
+                name: string;
+            } | null;
+            packagingUnitConversionFactor?: number | null;
+        } | null;
+    }>;
+};
+
+export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved, readOnly}: { activeOrder: ActiveOrder | null; awaitingApprovalOrderCode?: string; wasApproved?: boolean; readOnly?: boolean }) {
+    const t = useTranslations('Cart');
+
+    if (!activeOrder || activeOrder.lines.length === 0) {
+        return (
+            <div className="container mx-auto px-4">
+                {awaitingApprovalOrderCode ? (
+                    <EmptyState
+                        icon={ClipboardCheck}
+                        heading={t('orderPendingApproval')}
+                        body={t('orderPendingApprovalMessage', {code: awaitingApprovalOrderCode})}
+                        action={{label: t('viewMyRequests'), href: '/account/approvals'}}
+                    />
+                ) : (
+                    <EmptyState
+                        icon={ShoppingCart}
+                        heading={t('empty')}
+                        body={t('emptyMessage')}
+                        action={{label: t('continueShopping'), href: '/'}}
+                    />
+                )}
+            </div>
+        );
+    }
+
+    return (
+        <div className="lg:col-span-2 space-y-4">
+            {activeOrder.lines.map((line) => {
+                const gc = line.giftCardInput;
+
+                return (
+                    <div
+                        key={line.id}
+                        className="flex flex-col sm:flex-row gap-4 p-4 border rounded-lg bg-card"
+                    >
+                        {line.productVariant.product.featuredAsset && (
+                            <Link
+                                href={`/product/${line.productVariant.product.slug}`}
+                                className="flex-shrink-0"
+                            >
+                                <Image
+                                    src={line.productVariant.product.featuredAsset.preview}
+                                    alt={line.productVariant.name}
+                                    width={120}
+                                    height={120}
+                                    className="rounded-md object-cover w-full sm:w-[120px] h-[120px]"
+                                />
+                            </Link>
+                        )}
+
+                        <div className="flex-grow min-w-0">
+                            <div className="flex items-center gap-2 flex-wrap">
+                                <Link
+                                    href={`/product/${line.productVariant.product.slug}`}
+                                    className="font-semibold hover:underline"
+                                >
+                                    {line.productVariant.product.name}
+                                </Link>
+                                {line.customFields?.packagingUnit && (
+                                    <Badge className="text-sm gap-1.5 px-2.5 py-0.5 bg-primary text-primary-foreground">
+                                        <Package className="h-3.5 w-3.5" />
+                                        {line.customFields.packagingUnit.name}
+                                        {line.customFields.packagingUnitConversionFactor && line.customFields.packagingUnitConversionFactor > 1 && (
+                                            <span className="opacity-80">· {t('pcs', {count: line.customFields.packagingUnitConversionFactor})}</span>
+                                        )}
+                                    </Badge>
+                                )}
+                            </div>
+
+                            {gc ? (
+                                <div className="mt-1 space-y-1">
+                                    <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                                        <Gift className="h-3.5 w-3.5" />
+                                        <span>{t('giftCard')}</span>
+                                        {gc.templateName && (
+                                            <span>— {gc.templateName}</span>
+                                        )}
+                                    </div>
+                                    <p className="text-sm text-muted-foreground">
+                                        {t('value')}<Price value={gc.value} currencyCode={activeOrder.currencyCode} />
+                                    </p>
+                                    {gc.recipientEmailAddress && (
+                                        <p className="text-sm text-muted-foreground">
+                                            {t('to')}{gc.recipientEmailAddress}
+                                        </p>
+                                    )}
+                                    {gc.senderName && (
+                                        <p className="text-sm text-muted-foreground">
+                                            {t('from')}{gc.senderName}
+                                        </p>
+                                    )}
+                                    {gc.message && (
+                                        <p className="text-sm text-muted-foreground italic line-clamp-2">
+                                            &ldquo;{gc.message}&rdquo;
+                                        </p>
+                                    )}
+                                    {gc.deliveryDate && (
+                                        <p className="text-sm text-muted-foreground">
+                                            {t('delivery')}{new Date(gc.deliveryDate).toLocaleDateString()}
+                                        </p>
+                                    )}
+                                </div>
+                            ) : (
+                                <>
+                                    {line.productVariant.name !== line.productVariant.product.name && (
+                                        <p className="text-sm text-muted-foreground mt-1">
+                                            {line.productVariant.name}
+                                        </p>
+                                    )}
+                                    <p className="text-sm text-muted-foreground mt-1">
+                                        {t('sku', {sku: line.productVariant.sku})}
+                                    </p>
+                                    <p className="text-sm text-muted-foreground mt-2 sm:hidden">
+                                        <Price value={line.unitPrice} currencyCode={activeOrder.currencyCode}/> {t('each')}
+                                        {line.unitPrice < line.productVariant.price && (
+                                            <span className="ml-1">
+                                                <span className="line-through opacity-60"><Price value={line.productVariant.price} currencyCode={activeOrder.currencyCode}/></span>
+                                                {' '}<span className="text-green-600 font-medium">{t('savePercent', {percent: Math.round((1 - line.unitPrice / line.productVariant.price) * 100)})}</span>
+                                            </span>
+                                        )}
+                                    </p>
+                                </>
+                            )}
+
+                            <div className="flex items-center gap-3 mt-4">
+                                {!gc && !readOnly && (
+                                    <CartQuantityControl lineId={line.id} quantity={line.quantity} requiresReapproval={wasApproved}/>
+                                )}
+                                {!gc && readOnly && (
+                                    <span className="text-sm text-muted-foreground">{t('qty', {quantity: line.quantity})}</span>
+                                )}
+
+                                {line.customFields?.packagingUnitConversionFactor && line.customFields.packagingUnitConversionFactor > 1 && (
+                                    <span className="text-xs text-muted-foreground">
+                                        {t('equalsNPcs', {count: line.quantity * line.customFields.packagingUnitConversionFactor})}
+                                    </span>
+                                )}
+
+                                {!readOnly && <CartRemoveButton lineId={line.id} requiresReapproval={wasApproved} />}
+
+                                <div className="sm:hidden ml-auto">
+                                    <p className="font-semibold text-lg">
+                                        <Price value={line.linePrice}
+                                               currencyCode={activeOrder.currencyCode} taxLabel="excl" />
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="hidden sm:block text-right flex-shrink-0">
+                            <p className="font-semibold text-lg">
+                                <Price value={line.linePrice} currencyCode={activeOrder.currencyCode} taxLabel="excl" />
+                            </p>
+                            {!gc && (
+                                <>
+                                    <p className="text-sm text-muted-foreground mt-1">
+                                        <Price value={line.unitPrice} currencyCode={activeOrder.currencyCode}/> {t('each')}
+                                    </p>
+                                    {line.unitPrice < line.productVariant.price && (
+                                        <p className="text-xs mt-0.5">
+                                            <span className="line-through text-muted-foreground/60"><Price value={line.productVariant.price} currencyCode={activeOrder.currencyCode}/></span>
+                                            {' '}<span className="text-green-600 font-medium">{t('savePercent', {percent: Math.round((1 - line.unitPrice / line.productVariant.price) * 100)})}</span>
+                                        </p>
+                                    )}
+                                </>
+                            )}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/cart/cart-line-actions.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import {Button} from '@/components/ui/button';
+import {Minus, Plus, X} from 'lucide-react';
+import {removeFromCart, adjustQuantity} from './actions';
+import {useTransition} from 'react';
+
+export function QuantityControls({lineId, quantity}: { lineId: string; quantity: number }) {
+    const [isPending, startTransition] = useTransition();
+
+    return (
+        <div className="flex items-center gap-2 border rounded-md">
+            <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 rounded-none"
+                disabled={quantity <= 1 || isPending}
+                onClick={() => startTransition(() => void adjustQuantity(lineId, quantity - 1))}
+            >
+                <Minus className="h-4 w-4"/>
+            </Button>
+
+            <span className="w-12 text-center font-medium">{quantity}</span>
+
+            <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-9 w-9 rounded-none"
+                disabled={isPending}
+                onClick={() => startTransition(() => void adjustQuantity(lineId, quantity + 1))}
+            >
+                <Plus className="h-4 w-4"/>
+            </Button>
+        </div>
+    );
+}
+
+export function RemoveLineButton({lineId}: { lineId: string }) {
+    const [isPending, startTransition] = useTransition();
+
+    return (
+        <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="h-9 w-9 text-destructive hover:text-destructive hover:bg-destructive/10"
+            disabled={isPending}
+            onClick={() => startTransition(() => void removeFromCart(lineId))}
+        >
+            <X className="h-5 w-5"/>
+        </Button>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/cart/cart-quantity-control.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import {useCallback, useEffect, useRef, useState, useTransition} from 'react';
+import {useRouter} from '@/i18n/navigation';
+import {Minus, Plus} from 'lucide-react';
+import {toast} from 'sonner';
+
+import {adjustQuantity} from './actions';
+import {useReapprovalConfirm} from './reapproval-confirm';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {MIN_ORDER_QUANTITY, normalizeQuantity, sanitizeQuantityInput} from '@/lib/quantity';
+import {useTranslations} from 'next-intl';
+
+const DEBOUNCE_MS = 300;
+
+export function CartQuantityControl({lineId, quantity, requiresReapproval}: { lineId: string; quantity: number; requiresReapproval?: boolean }) {
+    const t = useTranslations('Cart');
+    const router = useRouter();
+    const [isPending, startTransition] = useTransition();
+    const [quantityInput, setQuantityInput] = useState(String(quantity));
+    const skipBlurSubmitRef = useRef(false);
+    const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+    const {guardCartChange, dialog} = useReapprovalConfirm(requiresReapproval);
+
+    useEffect(() => {
+        setQuantityInput(String(quantity));
+    }, [quantity]);
+
+    const normalizedQuantity = normalizeQuantity(quantityInput);
+
+    const submitQuantity = useCallback((nextValue: number | string) => {
+        const nextQuantity = normalizeQuantity(nextValue);
+        const rawParsed = typeof nextValue === 'number' ? nextValue : parseInt(String(nextValue), 10);
+        if (Number.isFinite(rawParsed) && rawParsed < MIN_ORDER_QUANTITY) {
+            toast.info(t('minimumQuantity', {min: MIN_ORDER_QUANTITY}));
+        }
+        setQuantityInput(String(nextQuantity));
+
+        if (nextQuantity === quantity) {
+            return;
+        }
+
+        // Clear any pending debounce
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+
+        debounceRef.current = setTimeout(() => {
+            guardCartChange(() => {
+                startTransition(async () => {
+                    const result = await adjustQuantity(lineId, nextQuantity);
+
+                    if (!result.success) {
+                        setQuantityInput(String(quantity));
+                        toast.error(t('unableToUpdateQuantity'), {
+                            description: result.error,
+                        });
+                        return;
+                    }
+
+                    router.refresh();
+                });
+            });
+        }, DEBOUNCE_MS);
+    }, [lineId, quantity, guardCartChange, router]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current) clearTimeout(debounceRef.current);
+        };
+    }, []);
+
+    return (
+        <>
+            {dialog}
+            <div className="flex items-center gap-2 border rounded-md">
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    aria-label={t('decreaseQuantity')}
+                    className="h-9 w-9 rounded-none"
+                    disabled={isPending || normalizedQuantity <= MIN_ORDER_QUANTITY}
+                    onMouseDown={() => {
+                        skipBlurSubmitRef.current = true;
+                    }}
+                    onClick={() => submitQuantity(normalizedQuantity - 1)}
+                >
+                    <Minus className="h-4 w-4"/>
+                </Button>
+
+                <Input
+                    aria-label={t('quantity')}
+                    inputMode="numeric"
+                    pattern="[0-9]*"
+                    value={quantityInput}
+                    onChange={(event) => {
+                        setQuantityInput(sanitizeQuantityInput(event.target.value));
+                    }}
+                    onBlur={() => {
+                        if (skipBlurSubmitRef.current) {
+                            skipBlurSubmitRef.current = false;
+                            return;
+                        }
+
+                        // Immediate submit on blur (no debounce)
+                        if (debounceRef.current) clearTimeout(debounceRef.current);
+                        const nextQuantity = normalizeQuantity(quantityInput);
+                        setQuantityInput(String(nextQuantity));
+                        if (nextQuantity !== quantity) {
+                            guardCartChange(() => {
+                                startTransition(async () => {
+                                    const result = await adjustQuantity(lineId, nextQuantity);
+                                    if (!result.success) {
+                                        setQuantityInput(String(quantity));
+                                        toast.error(t('unableToUpdateQuantity'), { description: result.error });
+                                        return;
+                                    }
+                                    router.refresh();
+                                });
+                            });
+                        }
+                    }}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                            event.preventDefault();
+                            if (debounceRef.current) clearTimeout(debounceRef.current);
+                            submitQuantity(quantityInput);
+                        }
+
+                        if (event.key === 'Escape') {
+                            if (debounceRef.current) clearTimeout(debounceRef.current);
+                            setQuantityInput(String(quantity));
+                            event.currentTarget.blur();
+                        }
+                    }}
+                    disabled={isPending}
+                    className="h-9 w-16 border-0 text-center shadow-none focus-visible:ring-0"
+                />
+
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    aria-label={t('increaseQuantity')}
+                    className="h-9 w-9 rounded-none"
+                    disabled={isPending}
+                    onMouseDown={() => {
+                        skipBlurSubmitRef.current = true;
+                    }}
+                    onClick={() => submitQuantity(normalizedQuantity + 1)}
+                >
+                    <Plus className="h-4 w-4"/>
+                </Button>
+            </div>
+        </>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/cart/cart-remove-button.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import {useTransition} from 'react';
+import {useRouter} from '@/i18n/navigation';
+import {X} from 'lucide-react';
+import {Button} from '@/components/ui/button';
+import {removeFromCart} from './actions';
+import {useReapprovalConfirm} from './reapproval-confirm';
+
+export function CartRemoveButton({lineId, requiresReapproval}: {lineId: string; requiresReapproval?: boolean}) {
+    const router = useRouter();
+    const [isPending, startTransition] = useTransition();
+    const {guardCartChange, dialog} = useReapprovalConfirm(requiresReapproval);
+
+    return (
+        <>
+            {dialog}
+            <Button
+                variant="ghost"
+                size="icon"
+                disabled={isPending}
+                className="text-muted-foreground hover:text-destructive"
+                onClick={() => {
+                    guardCartChange(() => {
+                        startTransition(async () => {
+                            await removeFromCart(lineId);
+                            router.refresh();
+                        });
+                    });
+                }}
+            >
+                <X className="h-4 w-4"/>
+            </Button>
+        </>
+    );
+}

package/dist/assets/storefront/src/app/[locale]/cart/cart.tsx

@@ -0,0 +1,151 @@
+import {CartItems as DefaultCartItems} from "@/app/[locale]/cart/cart-items";
+import {OrderSummary} from "@/app/[locale]/cart/order-summary";
+import {PromotionCode} from "@/app/[locale]/cart/promotion-code";
+import {client, getVendureContext} from "@/lib/vendure/api";
+import type {VendureContext} from "@/lib/vendure/api";
+import {GetActiveOrderQuery} from "@/lib/vendure/queries";
+import {getLatestApprovalForOrder} from "@/lib/vendure/approval-utils";
+import {FileText, MessageSquare} from "lucide-react";
+import {cacheTag} from 'next/cache';
+import {CancelQuoteCheckoutButton} from "@/app/[locale]/checkout/cancel-quote-checkout-button";
+import {Link} from "@/i18n/navigation";
+import {Button} from "@/components/ui/button";
+import {getTranslations} from 'next-intl/server';
+import {getScenarioConfig} from "@/config/scenario";
+
+// Scenario override: replace the default CartItems with the scenario-registered
+// slot when present. The slot is a ServerComponent with the same shape as the
+// built-in CartItems so scenarios can extend or regroup lines (e.g. group
+// configurator BOMs) without forking the whole cart orchestration.
+const CartItems = getScenarioConfig().overrides?.cart?.CartItems ?? DefaultCartItems;
+
+export async function Cart() {
+    const [ctx, t] = await Promise.all([
+        getVendureContext(),
+        getTranslations('Cart'),
+    ]);
+    return (
+        <CartCached
+            ctx={ctx}
+            quoteCheckoutTitle={t('quoteCheckout')}
+            quoteCheckoutMessage={t('quoteCheckoutMessage')}
+            viewQuote={t('viewQuote')}
+            approvedOrderWarning={t('approvedOrderWarning')}
+            changesRequestedLabel={t('changesRequested')}
+            changesRequestedMessage={t('changesRequestedMessage')}
+        />
+    );
+}
+
+async function CartCached({
+    ctx,
+    quoteCheckoutTitle,
+    quoteCheckoutMessage,
+    viewQuote,
+    approvedOrderWarning,
+    changesRequestedLabel,
+    changesRequestedMessage,
+}: {
+    ctx: VendureContext;
+    quoteCheckoutTitle: string;
+    quoteCheckoutMessage: string;
+    viewQuote: string;
+    approvedOrderWarning: string;
+    changesRequestedLabel: string;
+    changesRequestedMessage: string;
+}) {
+    "use cache: private"
+    cacheTag('cart');
+
+    const [result, error] = await client.query(GetActiveOrderQuery, {}, ctx);
+    if (error) {
+        return <CartItems activeOrder={null}/>;
+    }
+    const {data} = result;
+
+    const activeOrder = data.activeOrder;
+
+    // Handle empty cart case
+    if (!activeOrder || activeOrder.lines.length === 0) {
+        return <CartItems activeOrder={null}/>;
+    }
+
+    // Order is awaiting approval — show a message instead of editable cart
+    if (activeOrder.state === 'AwaitingApproval') {
+        return <CartItems activeOrder={null} awaitingApprovalOrderCode={activeOrder.code} />;
+    }
+
+    // Quote checkout in progress — show the cart read-only with a banner
+    const sourceQuoteId = activeOrder.customFields?.sourceQuoteId;
+    if (sourceQuoteId) {
+        return (
+            <div className="space-y-6">
+                <div className="rounded-lg border border-primary/30 bg-primary/10 p-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex gap-3">
+                            <FileText className="h-5 w-5 text-primary flex-shrink-0 mt-0.5"/>
+                            <div>
+                                <h3 className="font-medium text-foreground">{quoteCheckoutTitle}</h3>
+                                <p className="text-sm text-muted-foreground mt-1">
+                                    {quoteCheckoutMessage}
+                                </p>
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-2 shrink-0 ml-4">
+                            <Button asChild variant="outline" size="sm" className="border-primary/40 text-primary hover:bg-primary/10">
+                                <Link href={`/account/quotes/${sourceQuoteId}`}>{viewQuote}</Link>
+                            </Button>
+                            <CancelQuoteCheckoutButton />
+                        </div>
+                    </div>
+                </div>
+                <div className="grid lg:grid-cols-3 gap-8">
+                    <CartItems activeOrder={activeOrder} readOnly />
+                    <div className="lg:col-span-1">
+                        <OrderSummary activeOrder={activeOrder}/>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    // Check if this order was returned from an approval flow with changes requested
+    const { latestApproval, changesRequested, changesComment } = await getLatestApprovalForOrder(activeOrder.id, ctx);
+    const wasApproved = latestApproval?.status === 'APPROVED';
+
+    return (
+        <div className="space-y-6">
+            {wasApproved && (
+                <p className="text-sm text-muted-foreground">
+                    {approvedOrderWarning}
+                </p>
+            )}
+            {changesRequested && (
+                <div className="rounded-lg border border-destructive/30 bg-destructive/10 p-4">
+                    <div className="flex gap-3">
+                        <MessageSquare className="h-5 w-5 text-destructive flex-shrink-0 mt-0.5"/>
+                        <div>
+                            <h3 className="font-medium text-foreground">{changesRequestedLabel}</h3>
+                            <p className="text-sm text-muted-foreground mt-1">
+                                {changesRequestedMessage}
+                            </p>
+                            {changesComment && (
+                                <blockquote className="mt-2 border-l-2 border-destructive/40 pl-3 text-sm text-muted-foreground italic">
+                                    &ldquo;{changesComment}&rdquo;
+                                </blockquote>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+            <div className="grid lg:grid-cols-3 gap-8">
+                <CartItems activeOrder={activeOrder} wasApproved={wasApproved}/>
+
+                <div className="lg:col-span-1 sticky top-20 space-y-4">
+                    <OrderSummary activeOrder={activeOrder}/>
+                    <PromotionCode activeOrder={activeOrder}/>
+                </div>
+            </div>
+        </div>
+    )
+}