@vendure-platform/create 0.1.0

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

@@ -0,0 +1,49 @@
+'use client';
+
+import {useRef, useTransition} from 'react';
+import {useRouter} from '@/i18n/navigation';
+import {toast} from 'sonner';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {Loader2} from 'lucide-react';
+import {applyCode} from './actions';
+import {useTranslations} from 'next-intl';
+
+export function CodeInput() {
+    const t = useTranslations('Cart');
+    const router = useRouter();
+    const [isPending, startTransition] = useTransition();
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const code = inputRef.current?.value.trim();
+        if (!code) return;
+
+        startTransition(async () => {
+            const result = await applyCode(code);
+            if (result.success) {
+                if (inputRef.current) inputRef.current.value = '';
+                router.refresh();
+            } else {
+                toast.error(result.error || t('failedToApplyCode'));
+            }
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className="flex gap-2">
+            <Input
+                ref={inputRef}
+                type="text"
+                placeholder={t('enterCode')}
+                className="flex-1"
+                required
+                disabled={isPending}
+            />
+            <Button type="submit" disabled={isPending}>
+                {isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : t('apply')}
+            </Button>
+        </form>
+    );
+}

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

@@ -0,0 +1,10 @@
+import { CartSkeleton } from '@/components/shared/skeletons/cart-skeleton';
+
+export default function CartLoading() {
+    return (
+        <div className="container mx-auto px-4 py-8 mt-[var(--page-top-offset)]">
+            <div className="h-9 w-48 bg-muted animate-pulse rounded mb-8" />
+            <CartSkeleton />
+        </div>
+    );
+}

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

@@ -0,0 +1,178 @@
+import {Link} from '@/i18n/navigation';
+import {Button} from '@/components/ui/button';
+import {Price} from '@/components/commerce/price';
+import {maskCode} from '@/lib/format';
+import {RequestQuoteButton} from './request-quote-button';
+import {getAuthToken} from '@/lib/auth';
+import {getActiveCustomer, getCompanyAccount} from '@/lib/vendure/actions';
+import {getTranslations} from 'next-intl/server';
+
+type ActiveOrder = {
+    id: string;
+    currencyCode: string;
+    subTotal: number;
+    subTotalWithTax: number;
+    shipping: number;
+    shippingWithTax: number;
+    total: number;
+    totalWithTax: number;
+    storeCreditsApplied: Array<{ code: string; balance: number; amountDeducted: number }>;
+    totalWithTaxAfterStoreCredit: number;
+    lines: Array<{
+        id: string;
+        quantity: number;
+        unitPrice: number;
+        productVariant: {
+            id: string;
+            name: string;
+            sku: string;
+            product: {
+                id: string;
+                name: string;
+                slug: string;
+                featuredAsset?: { id: string; preview: string } | null;
+            };
+        };
+    }>;
+    taxSummary?: Array<{
+        description: string;
+        taxRate: number;
+        taxTotal: number;
+    }>;
+    discounts?: Array<{
+        description: string;
+        amount: number;
+        amountWithTax: number;
+    }> | null;
+};
+
+export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder }) {
+    const t = await getTranslations('Cart');
+    const hasCreditsApplied = activeOrder.storeCreditsApplied.length > 0;
+    const authToken = await getAuthToken();
+    const taxTotal = activeOrder.totalWithTax - activeOrder.total;
+    const MIN_QTY_FOR_QUOTE = 50;
+    const hasHighQuantityLine = activeOrder.lines.some(line => line.quantity >= MIN_QTY_FOR_QUOTE);
+
+    // Check PlaceOrders permission for company users
+    const companyAccount = await getCompanyAccount();
+    const canCheckout = !companyAccount || companyAccount.permissions.includes('PlaceOrders');
+
+    // Only show quote button for logged-in customers (not anonymous sessions)
+    let senderInfo: { name: string; email: string; company?: string } | null = null;
+    if (hasHighQuantityLine) {
+        const customer = await getActiveCustomer();
+        if (customer) {
+            senderInfo = {
+                name: `${customer.firstName} ${customer.lastName}`,
+                email: customer.emailAddress,
+                company: companyAccount?.company?.name,
+            };
+        }
+    }
+
+    return (
+        <div className="border rounded-lg p-6 bg-card">
+            <h2 className="text-xl font-bold mb-4">{t('orderSummary')}</h2>
+
+            <div className="space-y-2 mb-4">
+                <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">{t('subtotal')}</span>
+                    <span>
+                        <Price value={activeOrder.subTotal} currencyCode={activeOrder.currencyCode}/>
+                    </span>
+                </div>
+                {activeOrder.discounts && activeOrder.discounts.length > 0 && (
+                    <>
+                        {activeOrder.discounts.map((discount, index) => (
+                            <div key={index} className="flex justify-between text-sm text-green-600">
+                                <span>{discount.description}</span>
+                                <span>
+                                    <Price value={discount.amount} currencyCode={activeOrder.currencyCode}/>
+                                </span>
+                            </div>
+                        ))}
+                    </>
+                )}
+                <div className="flex justify-between text-sm">
+                    <span className="text-muted-foreground">{t('shipping')}</span>
+                    <span>
+                        {activeOrder.shipping > 0
+                            ? <Price value={activeOrder.shipping} currencyCode={activeOrder.currencyCode}/>
+                            : t('calculatedAtCheckout')}
+                    </span>
+                </div>
+                {activeOrder.taxSummary && activeOrder.taxSummary.length > 0 ? (
+                    activeOrder.taxSummary.map((tax, index) => (
+                        <div key={index} className="flex justify-between text-sm">
+                            <span className="text-muted-foreground">
+                                {tax.description} ({tax.taxRate}%)
+                            </span>
+                            <span>
+                                <Price value={tax.taxTotal} currencyCode={activeOrder.currencyCode}/>
+                            </span>
+                        </div>
+                    ))
+                ) : (
+                    <div className="flex justify-between text-sm">
+                        <span className="text-muted-foreground">{t('tax')}</span>
+                        <span>
+                            <Price value={taxTotal} currencyCode={activeOrder.currencyCode}/>
+                        </span>
+                    </div>
+                )}
+                {hasCreditsApplied && activeOrder.storeCreditsApplied.map((credit) => (
+                    <div key={credit.code} className="flex justify-between text-sm text-green-600">
+                        <span>{t('storeCredit', {code: maskCode(credit.code)})}</span>
+                        <span>-<Price value={credit.amountDeducted} currencyCode={activeOrder.currencyCode}/></span>
+                    </div>
+                ))}
+            </div>
+
+            <div className="border-t pt-4 mb-6">
+                <div className="flex justify-between font-bold text-lg">
+                    <span>{t('total')}</span>
+                    <span>
+                        {hasCreditsApplied ? (
+                            <span className="flex items-center gap-2">
+                                <span className="text-sm font-normal text-muted-foreground line-through">
+                                    <Price value={activeOrder.totalWithTax} currencyCode={activeOrder.currencyCode}/>
+                                </span>
+                                <Price value={activeOrder.totalWithTaxAfterStoreCredit} currencyCode={activeOrder.currencyCode} taxLabel="incl" />
+                            </span>
+                        ) : (
+                            <Price value={activeOrder.totalWithTax} currencyCode={activeOrder.currencyCode} taxLabel="incl" />
+                        )}
+                    </span>
+                </div>
+            </div>
+
+            {canCheckout ? (
+                <Button className="w-full" size="lg" asChild>
+                    <Link href="/checkout">{t('proceedToCheckout')}</Link>
+                </Button>
+            ) : (
+                <div className="space-y-2">
+                    <Button className="w-full" size="lg" disabled>
+                        {t('checkoutNotPermitted')}
+                    </Button>
+                    <p className="text-xs text-muted-foreground text-center">
+                        {t('noOrderingPermissions')}
+                    </p>
+                </div>
+            )}
+
+            {senderInfo && (
+                <RequestQuoteButton
+                    cartLines={activeOrder.lines}
+                    currencyCode={activeOrder.currencyCode}
+                    sender={senderInfo}
+                />
+            )}
+
+            <Button variant="outline" className="w-full mt-2" asChild>
+                <Link href="/">{t('continueShopping')}</Link>
+            </Button>
+        </div>
+    );
+}

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

@@ -0,0 +1,33 @@
+import type {Metadata} from 'next';
+import {Cart} from "@/app/[locale]/cart/cart";
+import {Suspense} from "react";
+import {CartSkeleton} from "@/components/shared/skeletons/cart-skeleton";
+import {noIndexRobots} from '@/lib/metadata';
+import {locale as rootLocale} from 'next/root-params';
+import {getTranslations} from 'next-intl/server';
+import {type Locale} from '@/i18n/routing';
+
+export async function generateMetadata(): Promise<Metadata> {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'Cart'});
+    return {
+        title: t('title'),
+        description: t('description'),
+        robots: noIndexRobots(),
+    };
+}
+
+export default async function CartPage() {
+    const locale = (await rootLocale()) as Locale;
+    const t = await getTranslations({locale, namespace: 'Cart'});
+
+    return (
+        <div className="container mx-auto px-4 py-8 mt-[var(--page-top-offset)]">
+            <h1 className="text-3xl font-bold mb-8">{t('title')}</h1>
+
+            <Suspense fallback={<CartSkeleton />}>
+                <Cart/>
+            </Suspense>
+        </div>
+    );
+}

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

@@ -0,0 +1,142 @@
+import {Button} from '@/components/ui/button';
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import {Tag, Wallet} from 'lucide-react';
+import {applyStoreCredit, removePromotionCode, removeStoreCredit} from './actions';
+import {CodeInput} from './code-input';
+import {client} from '@/lib/vendure/api';
+import {GetMyStoreCreditsQuery} from '@/lib/vendure/queries';
+import {getActiveCustomer} from '@/lib/vendure/actions';
+import {Price} from '@/components/commerce/price';
+import {maskCode} from '@/lib/format';
+import {getTranslations} from 'next-intl/server';
+
+const MAX_STORE_CREDITS_IN_CART = 100;
+
+type ActiveOrder = {
+    id: string;
+    couponCodes?: string[] | null;
+    storeCreditsApplied: Array<{ code: string; balance: number; amountDeducted: number }>;
+    totalWithTaxAfterStoreCredit: number;
+    currencyCode: string;
+};
+
+export async function PromotionCode({activeOrder}: { activeOrder: ActiveOrder }) {
+    const [t, activeCustomer, [creditsResult, creditsError]] = await Promise.all([
+        getTranslations('Cart'),
+        getActiveCustomer(),
+        client.query(GetMyStoreCreditsQuery, {options: {take: MAX_STORE_CREDITS_IN_CART}}),
+    ]);
+    const availableCredits = creditsError ? [] : (creditsResult.data.myStoreCredits?.items ?? []);
+    const appliedCodes = new Set(activeOrder.storeCreditsApplied.map(c => c.code));
+    const activeCustomerId = activeCustomer?.id;
+    // Only show credits the current customer can actually redeem (own + unclaimed)
+    // Hide when order is already fully covered by applied credits
+    const orderFullyCovered = activeOrder.totalWithTaxAfterStoreCredit <= 0;
+    const redeemableCredits = orderFullyCovered ? [] : availableCredits.filter(
+        c => !appliedCodes.has(c.code) && (!c.issuedTo || c.issuedTo.id === activeCustomerId),
+    );
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="text-lg flex items-center gap-2">
+                    <Tag className="h-5 w-5"/>
+                    {t('promotionCode')}
+                </CardTitle>
+                <CardDescription>
+                    {t('enterDiscountCode')}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                {/* Applied coupon codes */}
+                {activeOrder.couponCodes && activeOrder.couponCodes.length > 0 && (
+                    <div className="space-y-2">
+                        {activeOrder.couponCodes.map((code) => (
+                            <div key={code}
+                                 className="flex items-center justify-between p-3 border rounded-md bg-green-50 dark:bg-green-950/20">
+                                <div className="flex items-center gap-2">
+                                    <Tag className="h-4 w-4 text-green-600"/>
+                                    <span className="font-medium text-sm">{code}</span>
+                                </div>
+                                <form action={removePromotionCode}>
+                                    <input type="hidden" name="code" value={code}/>
+                                    <Button
+                                        type="submit"
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                                    >
+                                        {t('remove')}
+                                    </Button>
+                                </form>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {/* Applied store credits */}
+                {activeOrder.storeCreditsApplied.length > 0 && (
+                    <div className="space-y-2">
+                        {activeOrder.storeCreditsApplied.map((credit) => (
+                            <div key={credit.code}
+                                 className="flex items-center justify-between p-3 border rounded-md bg-green-50 dark:bg-green-950/20">
+                                <div className="flex items-center gap-2">
+                                    <Wallet className="h-4 w-4 text-green-600"/>
+                                    <span className="font-medium text-sm">
+                                        {maskCode(credit.code)}
+                                    </span>
+                                    <span className="text-xs text-green-600">
+                                        -<Price value={credit.amountDeducted} currencyCode={activeOrder.currencyCode}/>
+                                    </span>
+                                </div>
+                                <form action={removeStoreCredit}>
+                                    <input type="hidden" name="code" value={credit.code}/>
+                                    <Button
+                                        type="submit"
+                                        variant="ghost"
+                                        size="sm"
+                                        className="h-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                                    >
+                                        {t('remove')}
+                                    </Button>
+                                </form>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {/* Available store credits from account */}
+                {redeemableCredits.length > 0 && (
+                    <div className="space-y-2">
+                        <p className="text-xs text-muted-foreground font-medium flex items-center gap-1.5">
+                            <Wallet className="h-3.5 w-3.5"/>
+                            {t('availableStoreCredits')}
+                        </p>
+                        {redeemableCredits.map((credit) => (
+                            <div key={credit.id}
+                                 className="flex items-center justify-between p-3 border rounded-md">
+                                <div className="flex items-center gap-2">
+                                    <span className="font-mono text-sm">
+                                        {maskCode(credit.code)}
+                                    </span>
+                                    <span className="text-xs text-muted-foreground">
+                                        <Price value={credit.balance} currencyCode={credit.currencyCode}/>
+                                    </span>
+                                </div>
+                                <form action={applyStoreCredit}>
+                                    <input type="hidden" name="code" value={credit.code}/>
+                                    <Button type="submit" variant="outline" size="sm" className="h-8">
+                                        {t('apply')}
+                                    </Button>
+                                </form>
+                            </div>
+                        ))}
+                    </div>
+                )}
+
+                {/* Code input */}
+                <CodeInput />
+            </CardContent>
+        </Card>
+    );
+}

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

@@ -0,0 +1,76 @@
+'use client';
+
+import {useState, useCallback, useRef} from 'react';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import {useTranslations} from 'next-intl';
+
+/**
+ * Hook that provides a confirmation gate for actions that would invalidate
+ * a prior approval.
+ *
+ * @param requiresReapproval - Static boolean (from server component props) or
+ *   async function that checks at action time (for components that don't know upfront).
+ */
+export function useReapprovalConfirm(requiresReapproval?: boolean | (() => Promise<boolean>)) {
+    const t = useTranslations('Cart');
+    const [open, setOpen] = useState(false);
+    const [isChecking, setIsChecking] = useState(false);
+    const pendingActionRef = useRef<(() => void) | null>(null);
+
+    const guardCartChange = useCallback(async (action: () => void) => {
+        setIsChecking(true);
+        try {
+            const needsConfirmation = typeof requiresReapproval === 'function'
+                ? await requiresReapproval()
+                : requiresReapproval;
+
+            if (needsConfirmation) {
+                pendingActionRef.current = action;
+                setOpen(true);
+            } else {
+                action();
+            }
+        } finally {
+            setIsChecking(false);
+        }
+    }, [requiresReapproval]);
+
+    const handleConfirm = useCallback(() => {
+        setOpen(false);
+        pendingActionRef.current?.();
+        pendingActionRef.current = null;
+    }, []);
+
+    const handleCancel = useCallback(() => {
+        setOpen(false);
+        pendingActionRef.current = null;
+    }, []);
+
+    const dialog = (
+        <AlertDialog open={open} onOpenChange={setOpen}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>{t('reapprovalTitle')}</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        {t('reapprovalMessage')}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel onClick={handleCancel}>{t('cancel')}</AlertDialogCancel>
+                    <AlertDialogAction onClick={handleConfirm}>{t('continue')}</AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+
+    return { guardCartChange, isChecking, dialog };
+}

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

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import { FileText } from 'lucide-react';
+import { QuoteRequestForm, type QuoteLineItemDraft } from '@/components/commerce/quote-request-form';
+import { requestQuoteFromCartWithReview } from '@/app/[locale]/account/quotes/actions';
+import {useTranslations} from 'next-intl';
+
+interface CartLine {
+    id: string;
+    quantity: number;
+    unitPrice: number;
+    productVariant: {
+        id: string;
+        name: string;
+        sku: string;
+        product: {
+            id: string;
+            name: string;
+            slug: string;
+            featuredAsset?: { id: string; preview: string } | null;
+        };
+    };
+}
+
+interface RequestQuoteButtonProps {
+    cartLines: CartLine[];
+    currencyCode: string;
+    sender: { name: string; email: string; company?: string };
+}
+
+export function RequestQuoteButton({ cartLines, currencyCode, sender }: RequestQuoteButtonProps) {
+    const t = useTranslations('Cart');
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    const initialLineItems: QuoteLineItemDraft[] = cartLines.map(line => ({
+        productVariantId: line.productVariant.id,
+        productName: line.productVariant.product.name,
+        variantName: line.productVariant.name,
+        sku: line.productVariant.sku,
+        imageUrl: line.productVariant.product.featuredAsset?.preview,
+        quantity: line.quantity,
+        unitPrice: line.unitPrice,
+        currencyCode,
+    }));
+
+    return (
+        <>
+            <Button
+                variant="outline"
+                className="w-full mt-2"
+                onClick={() => setDialogOpen(true)}
+            >
+                <FileText className="h-4 w-4 mr-2" />
+                {t('requestQuote')}
+            </Button>
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle>{t('requestQuote')}</DialogTitle>
+                    </DialogHeader>
+                    <QuoteRequestForm
+                        initialLineItems={initialLineItems}
+                        sender={sender}
+                        mode="from-cart"
+                        onSubmit={requestQuoteFromCartWithReview}
+                        onCancel={() => setDialogOpen(false)}
+                    />
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+}