@vendure-platform/create 0.4.0 → 0.5.1

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

@@ -1,19 +1,19 @@
 'use server';
 
-import {client} from '@/lib/vendure/api';
+import { cartGuard } from '@/lib/cart-guard';
+import { getGuardError } from '@/lib/cart-guard-utils';
+import { normalizeQuantity } from '@/lib/quantity';
+import { client } from '@/lib/vendure/api';
 import {
-    RemoveFromCartMutation,
     AdjustCartItemMutation,
     ApplyPromotionCodeMutation,
-    RemovePromotionCodeMutation,
     ApplyStoreCreditToOrderMutation,
-    RemoveStoreCreditFromOrderMutation,
     RemoveConfigurationFromOrderMutation,
+    RemoveFromCartMutation,
+    RemovePromotionCodeMutation,
+    RemoveStoreCreditFromOrderMutation,
 } from '@/lib/vendure/mutations';
-import {normalizeQuantity} from '@/lib/quantity';
-import {updateTag} from 'next/cache';
-import {cartGuard} from '@/lib/cart-guard';
-import {getGuardError} from '@/lib/cart-guard-utils';
+import { updateTag } from 'next/cache';
 
 function invalidateCart() {
     updateTag('cart');
@@ -25,7 +25,7 @@ export async function removeFromCart(lineId: string) {
     const guardError = getGuardError(guard);
     if (guardError) return { success: false, error: guardError };
 
-    const [result, error] = await client.mutate(RemoveFromCartMutation, {lineId});
+    const [result, error] = await client.mutate(RemoveFromCartMutation, { lineId });
     if (error) {
         return { success: false, error: 'Failed to remove item from cart' };
     }
@@ -33,9 +33,12 @@ export async function removeFromCart(lineId: string) {
         const data = result.data.removeOrderLine;
         return {
             success: false,
-            error: 'interceptorError' in data ? data.interceptorError
-                : 'message' in data ? data.message
-                : 'Failed to remove item',
+            error:
+                'interceptorError' in data
+                    ? data.interceptorError
+                    : 'message' in data
+                    ? data.message
+                    : 'Failed to remove item',
         };
     }
     invalidateCart();
@@ -52,7 +55,7 @@ export async function removeConfigurationFromCart(productConfigurationId: string
     const guardError = getGuardError(guard);
     if (guardError) return { success: false, error: guardError };
 
-    const [, error] = await client.mutate(RemoveConfigurationFromOrderMutation, {productConfigurationId});
+    const [, error] = await client.mutate(RemoveConfigurationFromOrderMutation, { productConfigurationId });
     if (error) {
         return { success: false, error: error.message || 'Failed to remove configuration from cart' };
     }
@@ -67,7 +70,7 @@ export async function adjustQuantity(lineId: string, quantity: number) {
 
     const nextQuantity = normalizeQuantity(quantity);
 
-    const [result, error] = await client.mutate(AdjustCartItemMutation, {lineId, quantity: nextQuantity});
+    const [result, error] = await client.mutate(AdjustCartItemMutation, { lineId, quantity: nextQuantity });
 
     if (error) {
         return {
@@ -80,15 +83,18 @@ export async function adjustQuantity(lineId: string, quantity: number) {
         const data = result.data.adjustOrderLine;
         return {
             success: false,
-            error: 'interceptorError' in data ? data.interceptorError
-                : 'message' in data ? data.message
-                : 'Failed to update cart quantity',
+            error:
+                'interceptorError' in data
+                    ? data.interceptorError
+                    : 'message' in data
+                    ? data.message
+                    : 'Failed to update cart quantity',
         };
     }
 
     invalidateCart();
 
-    return {success: true};
+    return { success: true };
 }
 
 export async function applyCode(code: string): Promise<{ success: boolean; error?: string }> {
@@ -98,14 +104,14 @@ export async function applyCode(code: string): Promise<{ success: boolean; error
     if (guardError) return { success: false, error: guardError };
 
     // Try coupon code first
-    const [couponRes, couponError] = await client.mutate(ApplyPromotionCodeMutation, {couponCode: code});
+    const [couponRes, couponError] = await client.mutate(ApplyPromotionCodeMutation, { couponCode: code });
     if (!couponError && couponRes.data.applyCouponCode.__typename === 'Order') {
         invalidateCart();
         return { success: true };
     }
 
     // Fall back to store credit / gift card
-    const [creditRes, creditError] = await client.mutate(ApplyStoreCreditToOrderMutation, {code});
+    const [creditRes, creditError] = await client.mutate(ApplyStoreCreditToOrderMutation, { code });
     if (creditError) {
         return { success: false, error: 'Invalid code. Please check and try again.' };
     }
@@ -122,7 +128,7 @@ export async function removePromotionCode(formData: FormData): Promise<void> {
     const guard = await cartGuard();
     if (getGuardError(guard)) return;
 
-    await client.mutate(RemovePromotionCodeMutation, {couponCode: code});
+    await client.mutate(RemovePromotionCodeMutation, { couponCode: code });
     invalidateCart();
 }
 
@@ -132,7 +138,7 @@ export async function applyStoreCredit(formData: FormData): Promise<void> {
     const guard = await cartGuard();
     if (getGuardError(guard)) return;
 
-    await client.mutate(ApplyStoreCreditToOrderMutation, {code});
+    await client.mutate(ApplyStoreCreditToOrderMutation, { code });
     invalidateCart();
 }
 
@@ -142,6 +148,6 @@ export async function removeStoreCredit(formData: FormData): Promise<void> {
     const guard = await cartGuard();
     if (getGuardError(guard)) return;
 
-    await client.mutate(RemoveStoreCreditFromOrderMutation, {code});
+    await client.mutate(RemoveStoreCreditFromOrderMutation, { code });
     invalidateCart();
 }

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

@@ -1,14 +1,14 @@
 'use client';
 
+import { Price } from '@/components/commerce/price';
+import { Badge } from '@/components/ui/badge';
+import { EmptyState } from '@/components/ui/empty-state';
+import { Link } from '@/i18n/navigation';
+import { ClipboardCheck, Gift, Package, ShoppingCart } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 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';
+import { CartQuantityControl } from './cart-quantity-control';
+import { CartRemoveButton } from './cart-remove-button';
 
 type GiftCardInput = {
     value: number;
@@ -53,7 +53,17 @@ type ActiveOrder = {
     }>;
 };
 
-export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved, readOnly}: { activeOrder: ActiveOrder | null; awaitingApprovalOrderCode?: string; wasApproved?: boolean; readOnly?: boolean }) {
+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) {
@@ -63,15 +73,15 @@ export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved,
                     <EmptyState
                         icon={ClipboardCheck}
                         heading={t('orderPendingApproval')}
-                        body={t('orderPendingApprovalMessage', {code: awaitingApprovalOrderCode})}
-                        action={{label: t('viewMyRequests'), href: '/account/approvals'}}
+                        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: '/'}}
+                        action={{ label: t('continueShopping'), href: '/' }}
                     />
                 )}
             </div>
@@ -115,9 +125,16 @@ export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved,
                                     <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>
-                                        )}
+                                        {line.customFields.packagingUnitConversionFactor &&
+                                            line.customFields.packagingUnitConversionFactor > 1 && (
+                                                <span className="opacity-80">
+                                                    ·{' '}
+                                                    {t('pcs', {
+                                                        count: line.customFields
+                                                            .packagingUnitConversionFactor,
+                                                    })}
+                                                </span>
+                                            )}
                                     </Badge>
                                 )}
                             </div>
@@ -127,21 +144,22 @@ export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved,
                                     <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>
-                                        )}
+                                        {gc.templateName && <span>— {gc.templateName}</span>}
                                     </div>
                                     <p className="text-sm text-muted-foreground">
-                                        {t('value')}<Price value={gc.value} currencyCode={activeOrder.currencyCode} />
+                                        {t('value')}
+                                        <Price value={gc.value} currencyCode={activeOrder.currencyCode} />
                                     </p>
                                     {gc.recipientEmailAddress && (
                                         <p className="text-sm text-muted-foreground">
-                                            {t('to')}{gc.recipientEmailAddress}
+                                            {t('to')}
+                                            {gc.recipientEmailAddress}
                                         </p>
                                     )}
                                     {gc.senderName && (
                                         <p className="text-sm text-muted-foreground">
-                                            {t('from')}{gc.senderName}
+                                            {t('from')}
+                                            {gc.senderName}
                                         </p>
                                     )}
                                     {gc.message && (
@@ -151,7 +169,8 @@ export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved,
                                     )}
                                     {gc.deliveryDate && (
                                         <p className="text-sm text-muted-foreground">
-                                            {t('delivery')}{new Date(gc.deliveryDate).toLocaleDateString()}
+                                            {t('delivery')}
+                                            {new Date(gc.deliveryDate).toLocaleDateString()}
                                         </p>
                                     )}
                                 </div>
@@ -163,14 +182,30 @@ export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved,
                                         </p>
                                     )}
                                     <p className="text-sm text-muted-foreground mt-1">
-                                        {t('sku', {sku: line.productVariant.sku})}
+                                        {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')}
+                                        <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 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>
@@ -179,24 +214,40 @@ export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved,
 
                             <div className="flex items-center gap-3 mt-4">
                                 {!gc && !readOnly && (
-                                    <CartQuantityControl lineId={line.id} quantity={line.quantity} requiresReapproval={wasApproved}/>
+                                    <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 className="text-sm text-muted-foreground">
+                                        {t('qty', { quantity: line.quantity })}
                                     </span>
                                 )}
 
-                                {!readOnly && <CartRemoveButton lineId={line.id} requiresReapproval={wasApproved} />}
+                                {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" />
+                                        <Price
+                                            value={line.linePrice}
+                                            currencyCode={activeOrder.currencyCode}
+                                            taxLabel="excl"
+                                        />
                                     </p>
                                 </div>
                             </div>
@@ -204,17 +255,37 @@ export function CartItems({activeOrder, awaitingApprovalOrderCode, wasApproved,
 
                         <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" />
+                                <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')}
+                                        <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>
+                                            <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>
                                     )}
                                 </>

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

@@ -1,11 +1,11 @@
 'use client';
 
-import {Button} from '@/components/ui/button';
-import {Minus, Plus, X} from 'lucide-react';
-import {removeFromCart, adjustQuantity} from './actions';
-import {useTransition} from 'react';
+import { Button } from '@/components/ui/button';
+import { Minus, Plus, X } from 'lucide-react';
+import { useTransition } from 'react';
+import { adjustQuantity, removeFromCart } from './actions';
 
-export function QuantityControls({lineId, quantity}: { lineId: string; quantity: number }) {
+export function QuantityControls({ lineId, quantity }: { lineId: string; quantity: number }) {
     const [isPending, startTransition] = useTransition();
 
     return (
@@ -18,7 +18,7 @@ export function QuantityControls({lineId, quantity}: { lineId: string; quantity:
                 disabled={quantity <= 1 || isPending}
                 onClick={() => startTransition(() => void adjustQuantity(lineId, quantity - 1))}
             >
-                <Minus className="h-4 w-4"/>
+                <Minus className="h-4 w-4" />
             </Button>
 
             <span className="w-12 text-center font-medium">{quantity}</span>
@@ -31,13 +31,13 @@ export function QuantityControls({lineId, quantity}: { lineId: string; quantity:
                 disabled={isPending}
                 onClick={() => startTransition(() => void adjustQuantity(lineId, quantity + 1))}
             >
-                <Plus className="h-4 w-4"/>
+                <Plus className="h-4 w-4" />
             </Button>
         </div>
     );
 }
 
-export function RemoveLineButton({lineId}: { lineId: string }) {
+export function RemoveLineButton({ lineId }: { lineId: string }) {
     const [isPending, startTransition] = useTransition();
 
     return (
@@ -49,7 +49,7 @@ export function RemoveLineButton({lineId}: { lineId: string }) {
             disabled={isPending}
             onClick={() => startTransition(() => void removeFromCart(lineId))}
         >
-            <X className="h-5 w-5"/>
+            <X className="h-5 w-5" />
         </Button>
     );
 }

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

@@ -1,27 +1,35 @@
 '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';
+import { useRouter } from '@/i18n/navigation';
+import { Minus, Plus } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
+import { toast } from 'sonner';
+
+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';
+import { adjustQuantity } from './actions';
+import { useReapprovalConfirm } from './reapproval-confirm';
 
 const DEBOUNCE_MS = 300;
 
-export function CartQuantityControl({lineId, quantity, requiresReapproval}: { lineId: string; quantity: number; requiresReapproval?: boolean }) {
+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);
+    const { guardCartChange, dialog } = useReapprovalConfirm(requiresReapproval);
 
     useEffect(() => {
         setQuantityInput(String(quantity));
@@ -29,39 +37,42 @@ export function CartQuantityControl({lineId, quantity, requiresReapproval}: { li
 
     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();
+    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]);
+            }, DEBOUNCE_MS);
+        },
+        [lineId, quantity, guardCartChange, router],
+    );
 
     // Cleanup on unmount
     useEffect(() => {
@@ -86,7 +97,7 @@ export function CartQuantityControl({lineId, quantity, requiresReapproval}: { li
                     }}
                     onClick={() => submitQuantity(normalizedQuantity - 1)}
                 >
-                    <Minus className="h-4 w-4"/>
+                    <Minus className="h-4 w-4" />
                 </Button>
 
                 <Input
@@ -113,7 +124,9 @@ export function CartQuantityControl({lineId, quantity, requiresReapproval}: { li
                                     const result = await adjustQuantity(lineId, nextQuantity);
                                     if (!result.success) {
                                         setQuantityInput(String(quantity));
-                                        toast.error(t('unableToUpdateQuantity'), { description: result.error });
+                                        toast.error(t('unableToUpdateQuantity'), {
+                                            description: result.error,
+                                        });
                                         return;
                                     }
                                     router.refresh();
@@ -150,7 +163,7 @@ export function CartQuantityControl({lineId, quantity, requiresReapproval}: { li
                     }}
                     onClick={() => submitQuantity(normalizedQuantity + 1)}
                 >
-                    <Plus className="h-4 w-4"/>
+                    <Plus className="h-4 w-4" />
                 </Button>
             </div>
         </>

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

@@ -1,16 +1,22 @@
 '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';
+import { Button } from '@/components/ui/button';
+import { useRouter } from '@/i18n/navigation';
+import { X } from 'lucide-react';
+import { useTransition } from 'react';
+import { removeFromCart } from './actions';
+import { useReapprovalConfirm } from './reapproval-confirm';
 
-export function CartRemoveButton({lineId, requiresReapproval}: {lineId: string; requiresReapproval?: boolean}) {
+export function CartRemoveButton({
+    lineId,
+    requiresReapproval,
+}: {
+    lineId: string;
+    requiresReapproval?: boolean;
+}) {
     const router = useRouter();
     const [isPending, startTransition] = useTransition();
-    const {guardCartChange, dialog} = useReapprovalConfirm(requiresReapproval);
+    const { guardCartChange, dialog } = useReapprovalConfirm(requiresReapproval);
 
     return (
         <>
@@ -29,7 +35,7 @@ export function CartRemoveButton({lineId, requiresReapproval}: {lineId: string;
                     });
                 }}
             >
-                <X className="h-4 w-4"/>
+                <X className="h-4 w-4" />
             </Button>
         </>
     );