@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

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

@@ -1,13 +1,13 @@
 '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';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { useRouter } from '@/i18n/navigation';
+import { Loader2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRef, useTransition } from 'react';
+import { toast } from 'sonner';
+import { applyCode } from './actions';
 
 export function CodeInput() {
     const t = useTranslations('Cart');

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

@@ -1,13 +1,13 @@
-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 {AddToSharedCart} from '@/components/commerce/add-to-shared-cart';
-import {canCreateSharedCarts} from '@/components/commerce/shared-cart-role';
-import {getAuthToken} from '@/lib/auth';
-import {getActiveCustomer, getCompanyAccount} from '@/lib/vendure/actions';
-import {getTranslations} from 'next-intl/server';
+import { AddToSharedCart } from '@/components/commerce/add-to-shared-cart';
+import { Price } from '@/components/commerce/price';
+import { canCreateSharedCarts } from '@/components/commerce/shared-cart-role';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/navigation';
+import { getAuthToken } from '@/lib/auth';
+import { maskCode } from '@/lib/format';
+import { getActiveCustomer, getCompanyAccount } from '@/lib/vendure/actions';
+import { getTranslations } from 'next-intl/server';
+import { RequestQuoteButton } from './request-quote-button';
 
 type ActiveOrder = {
     id: string;
@@ -18,8 +18,8 @@ type ActiveOrder = {
     shippingWithTax: number;
     total: number;
     totalWithTax: number;
-    storeCreditsApplied: Array<{ code: string; balance: number; amountDeducted: number }>;
-    totalWithTaxAfterStoreCredit: number;
+    storeCreditsApplied?: Array<{ code: string; balance: number; amountDeducted: number }>;
+    totalWithTaxAfterStoreCredit?: number;
     lines: Array<{
         id: string;
         quantity: number;
@@ -48,13 +48,14 @@ type ActiveOrder = {
     }> | null;
 };
 
-export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder }) {
+export async function OrderSummary({ activeOrder }: { activeOrder: ActiveOrder }) {
     const t = await getTranslations('Cart');
-    const hasCreditsApplied = activeOrder.storeCreditsApplied.length > 0;
+    const storeCreditsApplied = activeOrder.storeCreditsApplied ?? [];
+    const hasCreditsApplied = 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);
+    const hasHighQuantityLine = activeOrder.lines.some((line) => line.quantity >= MIN_QTY_FOR_QUOTE);
 
     // Check PlaceOrders permission for company users
     const companyAccount = await getCompanyAccount();
@@ -88,7 +89,7 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                 <div className="flex justify-between text-sm">
                     <span className="text-muted-foreground">{t('subtotal')}</span>
                     <span>
-                        <Price value={activeOrder.subTotal} currencyCode={activeOrder.currencyCode}/>
+                        <Price value={activeOrder.subTotal} currencyCode={activeOrder.currencyCode} />
                     </span>
                 </div>
                 {activeOrder.discounts && activeOrder.discounts.length > 0 && (
@@ -97,7 +98,7 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                             <div key={index} className="flex justify-between text-sm text-green-600">
                                 <span>{discount.description}</span>
                                 <span>
-                                    <Price value={discount.amount} currencyCode={activeOrder.currencyCode}/>
+                                    <Price value={discount.amount} currencyCode={activeOrder.currencyCode} />
                                 </span>
                             </div>
                         ))}
@@ -106,9 +107,11 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                 <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')}
+                        {activeOrder.shipping > 0 ? (
+                            <Price value={activeOrder.shipping} currencyCode={activeOrder.currencyCode} />
+                        ) : (
+                            t('calculatedAtCheckout')
+                        )}
                     </span>
                 </div>
                 {activeOrder.taxSummary && activeOrder.taxSummary.length > 0 ? (
@@ -118,7 +121,7 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                                 {tax.description} ({tax.taxRate}%)
                             </span>
                             <span>
-                                <Price value={tax.taxTotal} currencyCode={activeOrder.currencyCode}/>
+                                <Price value={tax.taxTotal} currencyCode={activeOrder.currencyCode} />
                             </span>
                         </div>
                     ))
@@ -126,16 +129,23 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                     <div className="flex justify-between text-sm">
                         <span className="text-muted-foreground">{t('tax')}</span>
                         <span>
-                            <Price value={taxTotal} currencyCode={activeOrder.currencyCode}/>
+                            <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>
-                ))}
+                {hasCreditsApplied &&
+                    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">
@@ -145,12 +155,25 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                         {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}/>
+                                    <Price
+                                        value={activeOrder.totalWithTax}
+                                        currencyCode={activeOrder.currencyCode}
+                                    />
                                 </span>
-                                <Price value={activeOrder.totalWithTaxAfterStoreCredit} currencyCode={activeOrder.currencyCode} taxLabel="incl" />
+                                <Price
+                                    value={
+                                        activeOrder.totalWithTaxAfterStoreCredit ?? activeOrder.totalWithTax
+                                    }
+                                    currencyCode={activeOrder.currencyCode}
+                                    taxLabel="incl"
+                                />
                             </span>
                         ) : (
-                            <Price value={activeOrder.totalWithTax} currencyCode={activeOrder.currencyCode} taxLabel="incl" />
+                            <Price
+                                value={activeOrder.totalWithTax}
+                                currencyCode={activeOrder.currencyCode}
+                                taxLabel="incl"
+                            />
                         )}
                     </span>
                 </div>
@@ -165,9 +188,7 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                     <Button className="w-full" size="lg" disabled>
                         {t('checkoutNotPermitted')}
                     </Button>
-                    <p className="text-xs text-muted-foreground text-center">
-                        {t('noOrderingPermissions')}
-                    </p>
+                    <p className="text-xs text-muted-foreground text-center">{t('noOrderingPermissions')}</p>
                 </div>
             )}
 
@@ -181,7 +202,7 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
 
             {canShareCart && activeOrder.lines.length > 0 && (
                 <AddToSharedCart
-                    lines={activeOrder.lines.map(line => ({
+                    lines={activeOrder.lines.map((line) => ({
                         productVariantId: line.productVariant.id,
                         quantity: line.quantity,
                     }))}

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

@@ -1,15 +1,15 @@
-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';
+import { Cart } from '@/app/[locale]/cart/cart';
+import { CartSkeleton } from '@/components/shared/skeletons/cart-skeleton';
+import { type Locale } from '@/i18n/routing';
+import { noIndexRobots } from '@/lib/metadata';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { locale as rootLocale } from 'next/root-params';
+import { Suspense } from 'react';
 
 export async function generateMetadata(): Promise<Metadata> {
     const locale = (await rootLocale()) as Locale;
-    const t = await getTranslations({locale, namespace: 'Cart'});
+    const t = await getTranslations({ locale, namespace: 'Cart' });
     return {
         title: t('title'),
         description: t('description'),
@@ -19,14 +19,14 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default async function CartPage() {
     const locale = (await rootLocale()) as Locale;
-    const t = await getTranslations({locale, namespace: 'Cart'});
+    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/>
+                <Cart />
             </Suspense>
         </div>
     );

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

@@ -1,65 +1,70 @@
-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';
+import { Price } from '@/components/commerce/price';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { maskCode } from '@/lib/format';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { GetMyStoreCreditsQuery } from '@/lib/vendure/queries';
+import { Tag, Wallet } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
+import { applyStoreCredit, removePromotionCode, removeStoreCredit } from './actions';
+import { CodeInput } from './code-input';
 
 const MAX_STORE_CREDITS_IN_CART = 100;
 
 type ActiveOrder = {
     id: string;
     couponCodes?: string[] | null;
-    storeCreditsApplied: Array<{ code: string; balance: number; amountDeducted: number }>;
-    totalWithTaxAfterStoreCredit: number;
+    storeCreditsApplied?: Array<{ code: string; balance: number; amountDeducted: number }>;
+    totalWithTaxAfterStoreCredit?: number;
     currencyCode: string;
 };
 
-export async function PromotionCode({activeOrder}: { activeOrder: ActiveOrder }) {
+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}}),
+        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 availableCredits = creditsError ? [] : creditsResult.data.myStoreCredits?.items ?? [];
+    const storeCreditsApplied = activeOrder.storeCreditsApplied ?? [];
+    const appliedCodes = new Set(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),
-    );
+    const orderFullyCovered =
+        activeOrder.totalWithTaxAfterStoreCredit !== undefined &&
+        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"/>
+                    <Tag className="h-5 w-5" />
                     {t('promotionCode')}
                 </CardTitle>
-                <CardDescription>
-                    {t('enterDiscountCode')}
-                </CardDescription>
+                <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
+                                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"/>
+                                    <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}/>
+                                    <input type="hidden" name="code" value={code} />
                                     <Button
                                         type="submit"
                                         variant="ghost"
@@ -75,22 +80,26 @@ export async function PromotionCode({activeOrder}: { activeOrder: ActiveOrder })
                 )}
 
                 {/* Applied store credits */}
-                {activeOrder.storeCreditsApplied.length > 0 && (
+                {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">
+                        {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>
+                                    <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}/>
+                                        -
+                                        <Price
+                                            value={credit.amountDeducted}
+                                            currencyCode={activeOrder.currencyCode}
+                                        />
                                     </span>
                                 </div>
                                 <form action={removeStoreCredit}>
-                                    <input type="hidden" name="code" value={credit.code}/>
+                                    <input type="hidden" name="code" value={credit.code} />
                                     <Button
                                         type="submit"
                                         variant="ghost"
@@ -109,22 +118,22 @@ export async function PromotionCode({activeOrder}: { activeOrder: ActiveOrder })
                 {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"/>
+                            <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
+                                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="font-mono text-sm">{maskCode(credit.code)}</span>
                                     <span className="text-xs text-muted-foreground">
-                                        <Price value={credit.balance} currencyCode={credit.currencyCode}/>
+                                        <Price value={credit.balance} currencyCode={credit.currencyCode} />
                                     </span>
                                 </div>
                                 <form action={applyStoreCredit}>
-                                    <input type="hidden" name="code" value={credit.code}/>
+                                    <input type="hidden" name="code" value={credit.code} />
                                     <Button type="submit" variant="outline" size="sm" className="h-8">
                                         {t('apply')}
                                     </Button>

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

@@ -1,6 +1,5 @@
 'use client';
 
-import {useState, useCallback, useRef} from 'react';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -11,7 +10,8 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {useTranslations} from 'next-intl';
+import { useTranslations } from 'next-intl';
+import { useCallback, useRef, useState } from 'react';
 
 /**
  * Hook that provides a confirmation gate for actions that would invalidate
@@ -26,23 +26,27 @@ export function useReapprovalConfirm(requiresReapproval?: boolean | (() => Promi
     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;
+    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();
+                if (needsConfirmation) {
+                    pendingActionRef.current = action;
+                    setOpen(true);
+                } else {
+                    action();
+                }
+            } finally {
+                setIsChecking(false);
             }
-        } finally {
-            setIsChecking(false);
-        }
-    }, [requiresReapproval]);
+        },
+        [requiresReapproval],
+    );
 
     const handleConfirm = useCallback(() => {
         setOpen(false);
@@ -60,9 +64,7 @@ export function useReapprovalConfirm(requiresReapproval?: boolean | (() => Promi
             <AlertDialogContent>
                 <AlertDialogHeader>
                     <AlertDialogTitle>{t('reapprovalTitle')}</AlertDialogTitle>
-                    <AlertDialogDescription>
-                        {t('reapprovalMessage')}
-                    </AlertDialogDescription>
+                    <AlertDialogDescription>{t('reapprovalMessage')}</AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
                     <AlertDialogCancel onClick={handleCancel}>{t('cancel')}</AlertDialogCancel>

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

@@ -1,17 +1,12 @@
 'use client';
 
-import { useState } from 'react';
+import { requestQuoteFromCartWithReview } from '@/app/[locale]/account/quotes/actions';
+import { QuoteRequestForm, type QuoteLineItemDraft } from '@/components/commerce/quote-request-form';
 import { Button } from '@/components/ui/button';
-import {
-    Dialog,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-} from '@/components/ui/dialog';
+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';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 
 interface CartLine {
     id: string;
@@ -40,7 +35,7 @@ export function RequestQuoteButton({ cartLines, currencyCode, sender }: RequestQ
     const t = useTranslations('Cart');
     const [dialogOpen, setDialogOpen] = useState(false);
 
-    const initialLineItems: QuoteLineItemDraft[] = cartLines.map(line => ({
+    const initialLineItems: QuoteLineItemDraft[] = cartLines.map((line) => ({
         productVariantId: line.productVariant.id,
         productName: line.productVariant.product.name,
         variantName: line.productVariant.name,
@@ -53,11 +48,7 @@ export function RequestQuoteButton({ cartLines, currencyCode, sender }: RequestQ
 
     return (
         <>
-            <Button
-                variant="outline"
-                className="w-full mt-2"
-                onClick={() => setDialogOpen(true)}
-            >
+            <Button variant="outline" className="w-full mt-2" onClick={() => setDialogOpen(true)}>
                 <FileText className="h-4 w-4 mr-2" />
                 {t('requestQuote')}
             </Button>