@thorprovider/blocks 0.1.1 → 0.1.3

package/src/blocks/e-commerce/shopping-carts/shopping-cart-4.tsx

@@ -3,22 +3,39 @@
 import { useState } from 'react'
 import { ShoppingCart, Zap, Clock, CreditCard, Wallet, Minus, Plus, X } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
+import type { Money } from '@thorprovider/types'
 import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
 import { Button } from '../../../ui/button'
 import { Separator } from '../../../ui/separator'
 import { Progress } from '../../../ui/progress'
-import { ShoppingCart4SpinningCounter } from './shopping-cart-4-spinning-counter'
 import { cn } from '../../../lib/utils'
+import { formatMoney, isAvailableMoney } from '../../../lib/money'
 
 export interface ShoppingCart4Item {
-  id: string // serialization-friendly (seed used number)
+  /** Backend cart line-item id — the stable identity for update/removal. */
+  id: string
   name: string
   price: number
   quantity: number
-  image: string
+  /** Optional; an absent image is omitted rather than serialized as `""`. */
+  image?: string
   variant?: string
+  /** Canonical backend per-unit price; preferred for display when present. */
+  unitPrice?: Money
+  /** Canonical backend line total; preferred over `price * quantity`. */
+  lineTotal?: Money
+}
+
+export interface ShoppingCart4Totals {
+  subtotal: Money
+  discount?: Money
+  tax?: Money
+  shipping?: Money
+  total: Money
 }
 
+export type ShoppingCart4TotalsState = 'idle' | 'pending' | 'error'
+
 export interface ShoppingCart4Promotion {
   threshold: number
   reward: string
@@ -29,29 +46,58 @@ export interface ShoppingCart4RecentlyViewed {
   id: string
   name: string
   price: number
-  image: string
+  image?: string
 }
 
+export type ShoppingCart4Presentation = 'compact' | 'page'
+
 export interface ShoppingCart4Props {
   items: ShoppingCart4Item[]
   promotions: ShoppingCart4Promotion[]
   recentlyViewed?: ShoppingCart4RecentlyViewed[]
-  // business rules externalized:
-  taxRate?: number // default 0.08
+  /**
+   * Layout presentation. `compact` (default) is the collapsible quick-cart
+   * card; `page` is a wide, always-expanded review layout with a primary
+   * heading, no collapse control, and normal page scrolling. Both use the same
+   * line controls and authoritative monetary rendering.
+   */
+  presentation?: ShoppingCart4Presentation
+  /**
+   * Backend-authoritative totals. The curated cart renders these verbatim; it
+   * never computes subtotal/tax/shipping/total locally.
+   */
+  totals?: ShoppingCart4Totals
+  /** Controlled state of the totals fetch/mutation. */
+  totalsState?: ShoppingCart4TotalsState
+  totalsErrorLabel?: string
+  /** Shown when a required total amount is absent or malformed (never as zero). */
+  totalsUnavailableLabel?: string
+  /** Shown for a line whose supplied line total is absent or malformed. */
+  amountUnavailableLabel?: string
+  retryLabel?: string
+  onRetryTotals?: () => void
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatMoney?: (money: Money) => string
+  /** @deprecated legacy numeric formatter, used only when `totals` is absent. */
+  formatPrice?: (value: number) => string
+  /** @deprecated legacy local tax rate, used only when `totals` is absent. */
+  taxRate?: number
   // labels (Spanish defaults):
   titleLabel?: string // 'Carrito de compras'
   subtotalLabel?: string // 'Subtotal'
+  discountLabel?: string
   taxLabel?: string // 'Impuestos'
   shippingLabel?: string // 'Envío'
   shippingFreeLabel?: string // 'Gratis'
   totalLabel?: string // 'Total'
+  totalsPendingLabel?: string
   awayFromLabel?: string // 'Te faltan ${amount} para'
   activatedLabel?: string // '¡{reward} activada!'
   itemsLabel?: string // 'artículos'
   expressCheckoutLabel?: string // 'Compra rápida'
   expressLabel?: string // 'Rápido'
   standardLabel?: string // 'Estándar'
-  estimatedDeliveryLabel?: string // 'Entrega estimada: 2-3 días hábiles'
+  estimatedDeliveryLabel?: string
   secureCheckoutLabel?: string // 'Pago seguro • SSL cifrado'
   recentlyViewedLabel?: string // 'Vistos recientemente'
   collapseLabel?: string // 'Contraer carrito'
@@ -59,16 +105,35 @@ export interface ShoppingCart4Props {
   checkoutLabel?: string // 'Ver carrito y finalizar'
   quickCheckoutLabel?: string // 'Compra rápida'
   checkoutNowLabel?: string // 'Finalizar ahora'
+  emptyLabel?: string
+  removeLabel?: string
+  decreaseLabel?: string
+  increaseLabel?: string
+  continueShoppingLabel?: string // 'Seguir comprando'
+  // action availability:
+  /** Suppress the checkout action (e.g. the checkout feature is not installed). */
+  checkoutUnavailable?: boolean
+  /** Disable checkout while the cart is not ready (pending/error/invalid totals). */
+  checkoutDisabled?: boolean
   // callbacks:
+  /**
+   * ABSOLUTE quantity for a backend cart line-item id (distinct from the
+   * Navbar's DELTA). The boundary mutates the cart by line-item id.
+   */
   onQuantityChange?: (id: string, quantity: number) => void
+  /** Remove the backend cart line-item id. */
   onRemove?: (id: string) => void
   onCheckout?: () => void
-  onQuickCheckout?: () => void // Express mode checkout button
+  onQuickCheckout?: () => void
   onPayWithApple?: () => void
   onPayWithGoogle?: () => void
   onRecentlyViewedClick?: (id: string) => void
+  /** Page presentation only: navigate back to browsing. */
+  onContinueShopping?: () => void
 }
 
+const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+
 const interpolate = (template: string, values: Record<string, string>) =>
   template.replace(/\$\{(\w+)\}|\{(\w+)\}/g, (match, dollarKey, braceKey) => {
     const key = dollarKey ?? braceKey
@@ -79,20 +144,31 @@ export function ShoppingCart4({
   items,
   promotions,
   recentlyViewed,
-  taxRate = 0.08,
+  presentation = 'compact',
+  totals,
+  totalsState = 'idle',
+  totalsErrorLabel = 'No se pudieron actualizar los totales.',
+  totalsUnavailableLabel = 'Totales no disponibles.',
+  amountUnavailableLabel = '—',
+  retryLabel = 'Reintentar',
+  onRetryTotals,
+  formatMoney: formatMoneyProp,
+  formatPrice,
   titleLabel = 'Carrito de compras',
   subtotalLabel = 'Subtotal',
+  discountLabel = 'Descuento',
   taxLabel = 'Impuestos',
   shippingLabel = 'Envío',
   shippingFreeLabel = 'Gratis',
   totalLabel = 'Total',
+  totalsPendingLabel = 'Actualizando totales…',
   awayFromLabel = 'Te faltan ${amount} para',
   activatedLabel = '¡{reward} activada!',
   itemsLabel = 'artículos',
   expressCheckoutLabel = 'Compra rápida',
   expressLabel = 'Rápido',
   standardLabel = 'Estándar',
-  estimatedDeliveryLabel = 'Entrega estimada: 2-3 días hábiles',
+  estimatedDeliveryLabel,
   secureCheckoutLabel = 'Pago seguro • SSL cifrado',
   recentlyViewedLabel = 'Vistos recientemente',
   collapseLabel = 'Contraer carrito',
@@ -100,6 +176,13 @@ export function ShoppingCart4({
   checkoutLabel = 'Ver carrito y finalizar',
   quickCheckoutLabel = 'Compra rápida',
   checkoutNowLabel = 'Finalizar ahora',
+  emptyLabel = 'Tu carrito está vacío',
+  removeLabel = 'Quitar',
+  decreaseLabel = 'Disminuir cantidad',
+  increaseLabel = 'Aumentar cantidad',
+  continueShoppingLabel = 'Seguir comprando',
+  checkoutUnavailable,
+  checkoutDisabled,
   onQuantityChange,
   onRemove,
   onCheckout,
@@ -107,57 +190,158 @@ export function ShoppingCart4({
   onPayWithApple,
   onPayWithGoogle,
   onRecentlyViewedClick,
+  onContinueShopping,
 }: ShoppingCart4Props) {
   const [isExpanded, setIsExpanded] = useState(true)
   const [quickCheckout, setQuickCheckout] = useState(false)
 
+  const isPage = presentation === 'page'
+  // The page presentation is always expanded; only the compact card collapses.
+  const expanded = isPage ? true : isExpanded
+  const format = formatPrice ?? (value => usdFormatter.format(value))
+  const money = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)
+  const subtotalAmount = isAvailableMoney(totals?.subtotal) ? Number(totals.subtotal.amount) : 0
   const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
-  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
-  const tax = subtotal * taxRate
-  const total = subtotal + tax
+  const hasExpress = Boolean(onQuickCheckout || onPayWithApple || onPayWithGoogle)
+  // While totals/mutations are pending, keep confirmed data visible but block
+  // conflicting edits and checkout until the backend responds.
+  const mutationsDisabled = totalsState === 'pending'
 
   const sortedPromotions = [...promotions].sort((a, b) => a.threshold - b.threshold)
   const currentPromo = (() => {
+    if (!isAvailableMoney(totals?.subtotal)) return null
     for (let i = sortedPromotions.length - 1; i >= 0; i--) {
-      if (subtotal >= sortedPromotions[i].threshold) {
+      if (subtotalAmount >= sortedPromotions[i].threshold) {
         return { ...sortedPromotions[i], achieved: true }
       }
     }
-    const next = sortedPromotions.find(p => subtotal < p.threshold)
+    const next = sortedPromotions.find(p => subtotalAmount < p.threshold)
     return next ? { ...next, achieved: false } : null
   })()
   const progressPercentage =
     currentPromo && !currentPromo.achieved
-      ? Math.min(100, (subtotal / currentPromo.threshold) * 100)
+      ? Math.min(100, (subtotalAmount / currentPromo.threshold) * 100)
       : 100
 
+  const lineAmount = (item: ShoppingCart4Item): string | null => {
+    // A supplied line total that is absent/malformed must not fall back to a
+    // numeric guess; only an entirely absent line total uses the legacy field.
+    if (item.lineTotal !== undefined) return money(item.lineTotal)
+    return format(item.price * item.quantity)
+  }
+
+  const renderTotals = () => {
+    if (totalsState === 'pending') {
+      return (
+        <div className='flex flex-col gap-2' aria-live='polite'>
+          <p className='text-muted-foreground text-sm'>{totalsPendingLabel}</p>
+        </div>
+      )
+    }
+    if (totalsState === 'error') {
+      return (
+        <div className='flex flex-col gap-2' role='alert'>
+          <p className='text-destructive text-sm'>{totalsErrorLabel}</p>
+          {onRetryTotals ? (
+            <Button variant='outline' size='sm' className='w-fit' onClick={onRetryTotals}>
+              {retryLabel}
+            </Button>
+          ) : null}
+        </div>
+      )
+    }
+    if (!totals) return null
+
+    const subtotalText = money(totals.subtotal)
+    const totalText = money(totals.total)
+    // Required totals: if either is absent/malformed, show an explicit
+    // unavailable state (with recovery) rather than a fabricated zero.
+    if (subtotalText === null || totalText === null) {
+      return (
+        <div className='flex flex-col gap-2' role='status'>
+          <p className='text-muted-foreground text-sm'>{totalsUnavailableLabel}</p>
+          {onRetryTotals ? (
+            <Button variant='outline' size='sm' className='w-fit' onClick={onRetryTotals}>
+              {retryLabel}
+            </Button>
+          ) : null}
+        </div>
+      )
+    }
+
+    const shippingText = money(totals.shipping)
+    return (
+      <>
+        <div className='flex justify-between text-sm'>
+          <span>{subtotalLabel}</span>
+          <span className='tabular-nums'>{subtotalText}</span>
+        </div>
+        {isAvailableMoney(totals.discount) ? (
+          <div className='flex justify-between text-sm'>
+            <span>{discountLabel}</span>
+            <span className='tabular-nums'>{money(totals.discount)}</span>
+          </div>
+        ) : null}
+        {isAvailableMoney(totals.tax) ? (
+          <div className='flex justify-between text-sm'>
+            <span>{taxLabel}</span>
+            <span className='tabular-nums'>{money(totals.tax)}</span>
+          </div>
+        ) : null}
+        {shippingText !== null ? (
+          <div className='flex justify-between text-sm text-success'>
+            <span>{shippingLabel}</span>
+            <span className='tabular-nums'>
+              {Number(totals.shipping?.amount) === 0 ? shippingFreeLabel : shippingText}
+            </span>
+          </div>
+        ) : null}
+        <Separator />
+        <div className='flex justify-between font-semibold'>
+          <span>{totalLabel}</span>
+          <span className='tabular-nums'>{totalText}</span>
+        </div>
+      </>
+    )
+  }
+
   return (
     <section className='py-8'>
-      <div className='mx-auto max-w-md px-4'>
-        <Card className='shadow-lg'>
+      <div className={cn('mx-auto px-4', isPage ? 'max-w-3xl' : 'max-w-md')}>
+        {isPage ? (
+          <h1 className='mb-6 text-2xl font-semibold tracking-tight'>{titleLabel}</h1>
+        ) : null}
+        <Card className={isPage ? 'shadow-sm' : 'shadow-lg'}>
           {/* Header */}
           <CardHeader className='flex flex-row items-center justify-between space-y-0 pb-3'>
             <CardTitle className='flex items-center gap-2'>
               <ShoppingCart className='size-5' />
               {titleLabel} ({itemCount})
             </CardTitle>
-            <Button
-              variant='ghost'
-              className='h-8 cursor-pointer px-3 text-xs'
-              size='sm'
-              onClick={() => setIsExpanded(!isExpanded)}
-              aria-expanded={isExpanded}
-              aria-label={isExpanded ? collapseLabel : expandLabel}
-            >
-              {isExpanded ? <X /> : <Plus />}
-            </Button>
+            {!isPage ? (
+              <Button
+                variant='ghost'
+                className='h-8 cursor-pointer px-3 text-xs'
+                size='sm'
+                onClick={() => setIsExpanded(!isExpanded)}
+                aria-expanded={isExpanded}
+                aria-label={isExpanded ? collapseLabel : expandLabel}
+              >
+                {isExpanded ? <X /> : <Plus />}
+              </Button>
+            ) : null}
           </CardHeader>
 
           <CardContent className='flex flex-col gap-6'>
             {items.length === 0 ? (
-              <div className='flex flex-col items-center justify-center gap-2 py-6 text-center'>
+              <div className='flex flex-col items-center justify-center gap-4 py-6 text-center'>
                 <ShoppingCart className='text-muted-foreground/50 size-10' />
-                <p className='text-muted-foreground text-sm'>Tu carrito está vacío</p>
+                <p className='text-muted-foreground text-sm'>{emptyLabel}</p>
+                {isPage && onContinueShopping ? (
+                  <Button variant='outline' onClick={onContinueShopping}>
+                    {continueShoppingLabel}
+                  </Button>
+                ) : null}
               </div>
             ) : (
               <>
@@ -167,7 +351,7 @@ export function ShoppingCart4({
                     <div className='flex items-center justify-between text-sm'>
                       <span className='text-muted-foreground'>
                         {interpolate(awayFromLabel, {
-                          amount: `$${(currentPromo.threshold - subtotal).toFixed(2)}`,
+                          amount: format(currentPromo.threshold - subtotalAmount),
                         })}
                       </span>
                       <div className='flex items-center gap-1'>
@@ -191,20 +375,30 @@ export function ShoppingCart4({
                   </div>
                 ) : null}
 
-                {isExpanded && (
+                {expanded && (
                   <>
                     {/* Cart Items */}
-                    <div className='scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex max-h-64 flex-col gap-4 overflow-y-auto'>
+                    <div
+                      className={cn(
+                        'flex flex-col gap-4',
+                        !isPage &&
+                          'scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent max-h-64 overflow-y-auto',
+                      )}
+                    >
                       {items.map(item => (
                         <div key={item.id} className='flex items-start gap-3'>
-                          <img src={item.image || undefined} alt={item.name} className='h-12 w-12 rounded-md object-cover' />
+                          {item.image ? (
+                            <img src={item.image || undefined} alt='' className='h-12 w-12 rounded-md object-cover' />
+                          ) : (
+                            <div aria-hidden='true' className='bg-muted h-12 w-12 shrink-0 rounded-md' />
+                          )}
 
                           <div className='flex flex-1 flex-col gap-1'>
                             <h3 className='line-clamp-2 text-sm font-medium'>{item.name}</h3>
                             {item.variant ? <p className='text-muted-foreground text-xs'>{item.variant}</p> : null}
 
                             <div className='flex items-center justify-between'>
-                              <span className='text-sm font-semibold'>${item.price.toFixed(2)}</span>
+                              <span className='text-sm font-semibold'>{lineAmount(item) ?? amountUnavailableLabel}</span>
 
                               <div className='flex items-center'>
                                 <Button
@@ -216,8 +410,8 @@ export function ShoppingCart4({
                                       ? () => onQuantityChange(item.id, item.quantity - 1)
                                       : undefined
                                   }
-                                  disabled={item.quantity <= 1}
-                                  aria-label={`Disminuir cantidad de ${item.name}`}
+                                  disabled={item.quantity <= 1 || mutationsDisabled}
+                                  aria-label={`${decreaseLabel}, ${item.name}`}
                                 >
                                   <Minus />
                                 </Button>
@@ -231,16 +425,18 @@ export function ShoppingCart4({
                                       ? () => onQuantityChange(item.id, item.quantity + 1)
                                       : undefined
                                   }
-                                  aria-label={`Aumentar cantidad de ${item.name}`}
+                                  aria-label={`${increaseLabel}, ${item.name}`}
+                                  disabled={mutationsDisabled}
                                 >
                                   <Plus />
                                 </Button>
                                 <Button
                                   variant='ghost'
                                   size='sm'
-                                  className='ms-2 size-6 h-8 cursor-pointer p-0 px-3 text-xs text-destructive hover:text-destructive'
+                                  className='text-destructive hover:text-destructive ms-2 size-6 h-8 cursor-pointer p-0 px-3 text-xs'
                                   onClick={onRemove ? () => onRemove(item.id) : undefined}
-                                  aria-label={`Quitar ${item.name}`}
+                                  disabled={mutationsDisabled}
+                                  aria-label={`${removeLabel} ${item.name}`}
                                 >
                                   <X />
                                 </Button>
@@ -253,73 +449,78 @@ export function ShoppingCart4({
 
                     <Separator />
 
-                    {/* Order Summary */}
-                    <div className='flex flex-col gap-2'>
-                      <div className='flex justify-between text-sm'>
-                        <span>{subtotalLabel}</span>
-                        <span>${subtotal.toFixed(2)}</span>
-                      </div>
-                      <div className='flex justify-between text-sm'>
-                        <span>{taxLabel}</span>
-                        <span>${tax.toFixed(2)}</span>
-                      </div>
-                      <div className='flex justify-between text-sm text-success'>
-                        <span>{shippingLabel}</span>
-                        <span>{shippingFreeLabel}</span>
-                      </div>
-                      <Separator />
-                      <div className='flex justify-between font-semibold'>
-                        <span>{totalLabel}</span>
-                        <span>
-                          <ShoppingCart4SpinningCounter value={total} decimals={2} prefix='$' />
-                        </span>
-                      </div>
-                    </div>
+                    {/* Order Summary — backend-authoritative only */}
+                    <div className='flex flex-col gap-2'>{renderTotals()}</div>
 
                     {/* Quick Actions */}
                     <div className='flex flex-col gap-3'>
-                      {/* Express Checkout Toggle */}
-                      <div className='flex items-center justify-between text-sm'>
-                        <span>{expressCheckoutLabel}</span>
+                      {/* Express Checkout Toggle — only when the host supplies a handler */}
+                      {hasExpress ? (
+                        <>
+                          <div className='flex items-center justify-between text-sm'>
+                            <span>{expressCheckoutLabel}</span>
+                            <Button
+                              variant='outline'
+                              size='sm'
+                              onClick={() => setQuickCheckout(!quickCheckout)}
+                              className='h-8 cursor-pointer'
+                              aria-pressed={quickCheckout}
+                            >
+                              <Zap />
+                              {quickCheckout ? standardLabel : expressLabel}
+                            </Button>
+                          </div>
+
+                          {quickCheckout ? (
+                            <div className='grid grid-cols-2 gap-2'>
+                              {onPayWithApple ? (
+                                <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithApple}>
+                                  <Wallet />
+                                  Apple Pay
+                                </Button>
+                              ) : null}
+                              {onPayWithGoogle ? (
+                                <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithGoogle}>
+                                  <CreditCard />
+                                  Google Pay
+                                </Button>
+                              ) : null}
+                            </div>
+                          ) : null}
+                        </>
+                      ) : null}
+
+                      {/* Checkout Button */}
+                      {!checkoutUnavailable ? (
+                        <Button
+                          size='lg'
+                          className='h-10 w-full cursor-pointer px-8'
+                          onClick={hasExpress && quickCheckout ? onQuickCheckout : onCheckout}
+                          disabled={checkoutDisabled || totalsState === 'pending'}
+                        >
+                          {hasExpress && quickCheckout ? quickCheckoutLabel : checkoutLabel}
+                        </Button>
+                      ) : null}
+
+                      {/* Continue shopping — page presentation only */}
+                      {isPage && onContinueShopping ? (
                         <Button
                           variant='outline'
-                          size='sm'
-                          onClick={() => setQuickCheckout(!quickCheckout)}
-                          className='h-8 cursor-pointer'
-                          aria-pressed={quickCheckout}
+                          size='lg'
+                          className='h-10 w-full cursor-pointer px-8'
+                          onClick={onContinueShopping}
                         >
-                          <Zap />
-                          {quickCheckout ? standardLabel : expressLabel}
+                          {continueShoppingLabel}
                         </Button>
-                      </div>
+                      ) : null}
 
-                      {quickCheckout && (
-                        <div className='grid grid-cols-2 gap-2'>
-                          <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithApple}>
-                            <Wallet />
-                            Apple Pay
-                          </Button>
-                          <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithGoogle}>
-                            <CreditCard />
-                            Google Pay
-                          </Button>
+                      {/* Estimated Delivery — only when supplied, never fabricated */}
+                      {estimatedDeliveryLabel ? (
+                        <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
+                          <Clock className='size-3' />
+                          <span>{estimatedDeliveryLabel}</span>
                         </div>
-                      )}
-
-                      {/* Checkout Button */}
-                      <Button
-                        size='lg'
-                        className='h-10 w-full cursor-pointer px-8'
-                        onClick={quickCheckout ? onQuickCheckout : onCheckout}
-                      >
-                        {quickCheckout ? quickCheckoutLabel : checkoutLabel}
-                      </Button>
-
-                      {/* Estimated Delivery */}
-                      <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
-                        <Clock className='size-3' />
-                        <span>{estimatedDeliveryLabel}</span>
-                      </div>
+                      ) : null}
                     </div>
 
                     {/* Security Badge */}
@@ -333,15 +534,15 @@ export function ShoppingCart4({
                 )}
 
                 {/* Collapsed Summary */}
-                {!isExpanded && (
+                {!expanded && (
                   <div className='flex flex-col gap-3'>
                     <div className='flex items-center justify-between'>
                       <span className='text-muted-foreground text-sm'>
                         {itemCount} {itemsLabel}
                       </span>
-                      <span className='font-semibold'>
-                        <ShoppingCart4SpinningCounter value={total} decimals={2} prefix='$' />
-                      </span>
+                      {isAvailableMoney(totals?.total) ? (
+                        <span className='font-semibold tabular-nums'>{money(totals.total)}</span>
+                      ) : null}
                     </div>
 
                     <Button size='sm' className='h-8 w-full cursor-pointer px-3 text-xs' onClick={onCheckout}>
@@ -351,7 +552,7 @@ export function ShoppingCart4({
                 )}
 
                 {/* Recently Viewed */}
-                {isExpanded && recentlyViewed && recentlyViewed.length > 0 && (
+                {expanded && recentlyViewed && recentlyViewed.length > 0 && (
                   <div className='flex flex-col gap-3'>
                     <h4 className='text-sm font-medium'>{recentlyViewedLabel}</h4>
                     <div className='grid grid-cols-3 gap-2'>
@@ -365,12 +566,14 @@ export function ShoppingCart4({
                           )}
                           onClick={onRecentlyViewedClick ? () => onRecentlyViewedClick(item.id) : undefined}
                         >
-                          <div className='mb-1 aspect-square overflow-hidden'>
-                            <img
-                              src={item.image || undefined}
-                              alt={item.name}
-                              className='size-full rounded-md object-cover'
-                            />
+                          <div className='bg-muted mb-1 aspect-square overflow-hidden'>
+                            {item.image ? (
+                              <img
+                                src={item.image || undefined}
+                                alt={item.name}
+                                className='size-full rounded-md object-cover'
+                              />
+                            ) : null}
                           </div>
                           <p className='text-muted-foreground truncate text-xs'>{item.name}</p>
                           <p className='text-xs font-medium'>${item.price.toFixed(2)}</p>
@@ -388,4 +591,4 @@ export function ShoppingCart4({
   )
 }
 
-export default ShoppingCart4
+export default ShoppingCart4