@vendure-platform/create 0.4.0 → 0.5.1

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

@@ -1,17 +1,17 @@
-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";
+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 { CancelQuoteCheckoutButton } from '@/app/[locale]/checkout/cancel-quote-checkout-button';
+import { Button } from '@/components/ui/button';
+import { getScenarioConfig } from '@/config/scenario';
+import { Link } from '@/i18n/navigation';
+import type { VendureContext } from '@/lib/vendure/api';
+import { client, getVendureContext } from '@/lib/vendure/api';
+import { getLatestApprovalForOrder } from '@/lib/vendure/approval-utils';
+import { GetActiveOrderQuery } from '@/lib/vendure/queries';
+import { FileText, MessageSquare } from 'lucide-react';
+import { getTranslations } from 'next-intl/server';
+import { cacheTag } from 'next/cache';
 
 // Scenario override: replace the default CartItems with the scenario-registered
 // slot when present. The slot is a ServerComponent with the same shape as the
@@ -25,10 +25,7 @@ const CartItems = getScenarioConfig().overrides?.cart?.CartItems ?? DefaultCartI
 const ScenarioCartBanner = getScenarioConfig().overrides?.cart?.Banner ?? null;
 
 export async function Cart() {
-    const [ctx, t] = await Promise.all([
-        getVendureContext(),
-        getTranslations('Cart'),
-    ]);
+    const [ctx, t] = await Promise.all([getVendureContext(), getTranslations('Cart')]);
     return (
         <CartCached
             ctx={ctx}
@@ -59,14 +56,14 @@ async function CartCached({
     changesRequestedLabel: string;
     changesRequestedMessage: string;
 }) {
-    "use cache: private"
+    'use cache: private';
     cacheTag('cart');
 
     const [result, error] = await client.query(GetActiveOrderQuery, {}, ctx);
     if (error) {
-        return <CartItems activeOrder={null}/>;
+        return <CartItems activeOrder={null} />;
     }
-    const {data} = result;
+    const { data } = result;
 
     const activeOrder = data.activeOrder;
 
@@ -93,16 +90,19 @@ async function CartCached({
                 <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"/>
+                            <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>
+                                <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">
+                            <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 />
@@ -112,7 +112,7 @@ async function CartCached({
                 <div className="grid lg:grid-cols-3 gap-8">
                     <CartItems activeOrder={activeOrder} readOnly />
                     <div className="lg:col-span-1">
-                        <OrderSummary activeOrder={activeOrder}/>
+                        <OrderSummary activeOrder={activeOrder} />
                     </div>
                 </div>
             </div>
@@ -120,26 +120,23 @@ async function CartCached({
     }
 
     // Check if this order was returned from an approval flow with changes requested
-    const { latestApproval, changesRequested, changesComment } = await getLatestApprovalForOrder(activeOrder.id, ctx);
+    const { latestApproval, changesRequested, changesComment } = await getLatestApprovalForOrder(
+        activeOrder.id,
+        ctx,
+    );
     const wasApproved = latestApproval?.status === 'APPROVED';
 
     return (
         <div className="space-y-6">
             {ScenarioCartBanner && <ScenarioCartBanner />}
-            {wasApproved && (
-                <p className="text-sm text-muted-foreground">
-                    {approvedOrderWarning}
-                </p>
-            )}
+            {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"/>
+                        <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>
+                            <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;
@@ -150,13 +147,13 @@ async function CartCached({
                 </div>
             )}
             <div className="grid lg:grid-cols-3 gap-8">
-                <CartItems activeOrder={activeOrder} wasApproved={wasApproved}/>
+                <CartItems activeOrder={activeOrder} wasApproved={wasApproved} />
 
                 <div className="lg:col-span-1 sticky top-20 space-y-4">
-                    <OrderSummary activeOrder={activeOrder}/>
-                    <PromotionCode activeOrder={activeOrder}/>
+                    <OrderSummary activeOrder={activeOrder} />
+                    <PromotionCode activeOrder={activeOrder} />
                 </div>
             </div>
         </div>
-    )
+    );
 }

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,11 +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 {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;
@@ -46,13 +48,13 @@ 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 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();
@@ -71,6 +73,13 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
         }
     }
 
+    const canShareCart = canCreateSharedCarts(companyAccount?.permissions);
+    let shareDefaultName = 'Shared cart';
+    if (canShareCart) {
+        const customer = await getActiveCustomer();
+        if (customer?.firstName) shareDefaultName = `${customer.firstName}'s shared cart`;
+    }
+
     return (
         <div className="border rounded-lg p-6 bg-card">
             <h2 className="text-xl font-bold mb-4">{t('orderSummary')}</h2>
@@ -79,7 +88,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 && (
@@ -88,7 +97,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>
                         ))}
@@ -97,9 +106,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 ? (
@@ -109,7 +120,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>
                     ))
@@ -117,16 +128,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 &&
+                    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">
@@ -136,12 +154,23 @@ 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}
+                                    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>
@@ -156,9 +185,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>
             )}
 
@@ -170,6 +197,20 @@ export async function OrderSummary({activeOrder}: { activeOrder: ActiveOrder })
                 />
             )}
 
+            {canShareCart && activeOrder.lines.length > 0 && (
+                <AddToSharedCart
+                    lines={activeOrder.lines.map((line) => ({
+                        productVariantId: line.productVariant.id,
+                        quantity: line.quantity,
+                    }))}
+                    canCreate
+                    defaultName={shareDefaultName}
+                    label="Share this cart"
+                    size="default"
+                    className="w-full mt-2 gap-2"
+                />
+            )}
+
             <Button variant="outline" className="w-full mt-2" asChild>
                 <Link href="/">{t('continueShopping')}</Link>
             </Button>

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,14 +1,14 @@
-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;
 
@@ -20,46 +20,48 @@ type ActiveOrder = {
     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 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),
-    );
+    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"
@@ -78,19 +80,23 @@ export async function PromotionCode({activeOrder}: { activeOrder: ActiveOrder })
                 {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
+                                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 +115,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>