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

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>
         </>
     );

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>
-    )
+    );
 }