@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,628 +0,0 @@
-'use client'
-
-import { useId, useState } from 'react'
-import { ShoppingCart as ShoppingCartIcon, 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 { Input } from '../../../ui/input'
-import { Separator } from '../../../ui/separator'
-import { Progress } from '../../../ui/progress'
-import { cn } from '../../../lib/utils'
-import { formatMoney, isAvailableMoney } from '../../../lib/money'
-import type { CartTotals, ShoppingCartItem, ShoppingCartSuggestion } from '../../../lib/contracts'
-
-/** Host-supplied promotion definition. Icons are React-side only. */
-export interface ShoppingCartPromotion {
-  threshold: number
-  reward: string
-  icon: LucideIcon
-}
-
-export type ShoppingCartTotalsState = 'idle' | 'pending' | 'error'
-
-export type ShoppingCartPresentation = 'compact' | 'page'
-
-export interface ShoppingCartProps {
-  /** Canonical cart lines keyed by backend cart line-item id. */
-  items: ShoppingCartItem[]
-  promotions?: ShoppingCartPromotion[]
-  recentlyViewed?: ShoppingCartSuggestion[]
-  /**
-   * 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?: ShoppingCartPresentation
-  /**
-   * Backend-authoritative totals. The cart renders these verbatim; it never
-   * computes subtotal/tax/shipping/total locally.
-   */
-  totals?: CartTotals
-  /** Controlled state of the totals fetch/mutation. */
-  totalsState?: ShoppingCartTotalsState
-  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
-  // 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
-  secureCheckoutLabel?: string // 'Pago seguro • SSL cifrado'
-  recentlyViewedLabel?: string // 'Vistos recientemente'
-  promoPromptLabel?: string // '¿Tienes un código de descuento?'
-  promoPlaceholderLabel?: string // 'Introduce tu código'
-  promoApplyLabel?: string // 'Aplicar'
-  collapseLabel?: string // 'Contraer carrito'
-  expandLabel?: string // 'Expandir carrito'
-  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
-  onPayWithApple?: () => void
-  onPayWithGoogle?: () => void
-  /**
-   * Report an entered promotion code to the host. The block never validates
-   * or resolves codes; the authoritative result arrives through `totals`
-   * (discount) and `promotions`. When absent, the promo affordance is not
-   * rendered.
-   */
-  onApplyPromo?: (code: string) => void
-  onRecentlyViewedClick?: (id: string) => void
-  /** Page presentation only: navigate back to browsing. */
-  onContinueShopping?: () => void
-}
-
-const fallbackFormatter = 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
-    return values[key] ?? match
-  })
-
-export function ShoppingCart({
-  items,
-  promotions,
-  recentlyViewed,
-  presentation = 'compact',
-  totals,
-  totalsState = 'idle',
-  totalsErrorLabel = 'No se pudieron actualizar los totales.',
-  totalsUnavailableLabel = 'Totales no disponibles.',
-  amountUnavailableLabel = '—',
-  retryLabel = 'Reintentar',
-  onRetryTotals,
-  formatMoney: formatMoneyProp,
-  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,
-  secureCheckoutLabel = 'Pago seguro • SSL cifrado',
-  recentlyViewedLabel = 'Vistos recientemente',
-  promoPromptLabel = '¿Tienes un código de descuento?',
-  promoPlaceholderLabel = 'Introduce tu código',
-  promoApplyLabel = 'Aplicar',
-  collapseLabel = 'Contraer carrito',
-  expandLabel = 'Expandir carrito',
-  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,
-  onQuickCheckout,
-  onPayWithApple,
-  onPayWithGoogle,
-  onApplyPromo,
-  onRecentlyViewedClick,
-  onContinueShopping,
-}: ShoppingCartProps) {
-  const [isExpanded, setIsExpanded] = useState(true)
-  const [quickCheckout, setQuickCheckout] = useState(false)
-  const [promoCode, setPromoCode] = useState('')
-  const promoInputId = useId()
-
-  const isPage = presentation === 'page'
-  // The page presentation is always expanded; only the compact card collapses.
-  const expanded = isPage ? true : isExpanded
-  // Display currency derives from the authoritative Money subtotal; the USD
-  // formatter is only the fallback when no authoritative currency exists.
-  const format = formatMoneyProp
-    ? (value: number) => {
-        const money: Money = { amount: String(value), currencyCode: totals?.subtotal?.currencyCode ?? 'USD' }
-        return formatMoneyProp(money)
-      }
-    : totals?.subtotal?.currencyCode && totals.subtotal.currencyCode !== 'USD'
-      ? (value: number) =>
-          new Intl.NumberFormat('en-US', { style: 'currency', currency: totals.subtotal.currencyCode }).format(value)
-      : (value: number) => fallbackFormatter.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 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 (subtotalAmount >= sortedPromotions[i].threshold) {
-        return { ...sortedPromotions[i], achieved: true }
-      }
-    }
-    const next = sortedPromotions.find(p => subtotalAmount < p.threshold)
-    return next ? { ...next, achieved: false } : null
-  })()
-  const progressPercentage =
-    currentPromo && !currentPromo.achieved
-      ? Math.min(100, (subtotalAmount / currentPromo.threshold) * 100)
-      : 100
-
-  const lineAmount = (item: ShoppingCartItem): string | null => {
-    // The backend-authoritative line total renders verbatim. A malformed amount
-    // is unavailable (never a fabricated zero); `unitPrice` is never multiplied
-    // locally — the cart contract forbids local `unit × qty` arithmetic.
-    if (item.lineTotal === undefined) return null
-    return money(item.lineTotal)
-  }
-
-  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>
-      </>
-    )
-  }
-
-  const renderPromoEntry = () =>
-    onApplyPromo ? (
-      <form
-        className='flex flex-col gap-2'
-        onSubmit={event => {
-          event.preventDefault()
-          const code = promoCode.trim()
-          if (!code) return
-          onApplyPromo(code)
-          setPromoCode('')
-        }}
-      >
-        <label className='text-sm' htmlFor={promoInputId}>
-          {promoPromptLabel}
-        </label>
-        <div className='flex gap-2'>
-          <Input
-            id={promoInputId}
-            value={promoCode}
-            onChange={event => setPromoCode(event.target.value)}
-            placeholder={promoPlaceholderLabel}
-            className='h-9 flex-1'
-          />
-          <Button type='submit' variant='outline' size='sm' className='h-9' disabled={mutationsDisabled}>
-            {promoApplyLabel}
-          </Button>
-        </div>
-      </form>
-    ) : null
-
-  return (
-    <section className='py-8'>
-      <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'>
-              <ShoppingCartIcon className='size-5' />
-              {titleLabel} ({itemCount})
-            </CardTitle>
-            {!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-4 py-6 text-center'>
-                <ShoppingCartIcon className='text-muted-foreground/50 size-10' />
-                <p className='text-muted-foreground text-sm'>{emptyLabel}</p>
-                {isPage && onContinueShopping ? (
-                  <Button variant='outline' onClick={onContinueShopping}>
-                    {continueShoppingLabel}
-                  </Button>
-                ) : null}
-              </div>
-            ) : (
-              <>
-                {/* Promotion Progress */}
-                {currentPromo && !currentPromo.achieved ? (
-                  <div className='flex flex-col gap-3'>
-                    <div className='flex items-center justify-between text-sm'>
-                      <span className='text-muted-foreground'>
-                        {interpolate(awayFromLabel, {
-                          amount: format(currentPromo.threshold - subtotalAmount),
-                        })}
-                      </span>
-                      <div className='flex items-center gap-1'>
-                        <currentPromo.icon className='text-primary size-4' />
-                        <span className='text-primary font-medium'>{currentPromo.reward}</span>
-                      </div>
-                    </div>
-                    <Progress value={progressPercentage} className='h-2' />
-                  </div>
-                ) : null}
-
-                {/* Active Promotion */}
-                {currentPromo?.achieved ? (
-                  <div className='rounded-lg bg-success/10 p-3'>
-                    <div className='flex items-center gap-2 text-success'>
-                      <currentPromo.icon className='size-4' />
-                      <span className='text-sm font-medium'>
-                        {interpolate(activatedLabel, { reward: currentPromo.reward })}
-                      </span>
-                    </div>
-                  </div>
-                ) : null}
-
-                {expanded && (
-                  <>
-                    {/* Cart Items */}
-                    <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'>
-                          {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'>{lineAmount(item) ?? amountUnavailableLabel}</span>
-
-                              <div className='flex items-center'>
-                                <Button
-                                  variant='ghost'
-                                  size='sm'
-                                  className='size-6 h-8 cursor-pointer p-0 px-3 text-xs'
-                                  onClick={
-                                    onQuantityChange
-                                      ? () => onQuantityChange(item.id, item.quantity - 1)
-                                      : undefined
-                                  }
-                                  disabled={item.quantity <= 1 || mutationsDisabled}
-                                  aria-label={`${decreaseLabel}, ${item.name}`}
-                                >
-                                  <Minus />
-                                </Button>
-                                <span className='mx-2 w-6 text-center text-sm'>{item.quantity}</span>
-                                <Button
-                                  variant='ghost'
-                                  size='sm'
-                                  className='size-6 h-8 cursor-pointer p-0 px-3 text-xs'
-                                  onClick={
-                                    onQuantityChange
-                                      ? () => onQuantityChange(item.id, item.quantity + 1)
-                                      : undefined
-                                  }
-                                  aria-label={`${increaseLabel}, ${item.name}`}
-                                  disabled={mutationsDisabled}
-                                >
-                                  <Plus />
-                                </Button>
-                                <Button
-                                  variant='ghost'
-                                  size='sm'
-                                  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}
-                                  disabled={mutationsDisabled}
-                                  aria-label={`${removeLabel} ${item.name}`}
-                                >
-                                  <X />
-                                </Button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-
-                    <Separator />
-
-                    {/* Order Summary — backend-authoritative only */}
-                    <div className='flex flex-col gap-2'>{renderTotals()}</div>
-
-                    {/* Promo code entry — reports to the host, never resolves locally */}
-                    {renderPromoEntry()}
-
-                    {/* Quick Actions */}
-                    <div className='flex flex-col gap-3'>
-                      {/* 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='lg'
-                          className='h-10 w-full cursor-pointer px-8'
-                          onClick={onContinueShopping}
-                        >
-                          {continueShoppingLabel}
-                        </Button>
-                      ) : null}
-
-                      {/* 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>
-                      ) : null}
-                    </div>
-
-                    {/* Security Badge */}
-                    <div className='bg-muted/50 rounded-lg p-3 text-center'>
-                      <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
-                        <div className='size-2 rounded-full bg-success' aria-hidden='true' />
-                        <span>{secureCheckoutLabel}</span>
-                      </div>
-                    </div>
-                  </>
-                )}
-
-                {/* Collapsed Summary */}
-                {!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>
-                      {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}>
-                      {checkoutNowLabel}
-                    </Button>
-                  </div>
-                )}
-
-                {/* Recently Viewed — host-supplied suggestions only */}
-                {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'>
-                      {recentlyViewed.map(item => {
-                        const suggestionPrice = money(item.unitPrice)
-                        return (
-                          <button
-                            key={item.id}
-                            type='button'
-                            className={cn(
-                              'group text-start',
-                              onRecentlyViewedClick && 'cursor-pointer',
-                            )}
-                            onClick={onRecentlyViewedClick ? () => onRecentlyViewedClick(item.id) : undefined}
-                          >
-                            <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>
-                            {suggestionPrice !== null ? (
-                              <p className='text-xs font-medium tabular-nums'>{suggestionPrice}</p>
-                            ) : null}
-                          </button>
-                        )
-                      })}
-                    </div>
-                  </div>
-                )}
-              </>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </section>
-  )
-}
-
-export default ShoppingCart

package/src/blocks/e-commerce/store-containers/store-container-1.tsx

@@ -1,29 +0,0 @@
-import type { ReactNode } from 'react'
-import { cn } from '../../../lib/utils'
-
-export interface StoreContainer1Props {
-  size?: 'default' | 'narrow' | 'wide' | 'full'
-  className?: string
-  children?: ReactNode
-}
-
-const sizeClasses: Record<NonNullable<StoreContainer1Props['size']>, string> = {
-  default: 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8',
-  narrow: 'mx-auto w-full max-w-3xl px-4 sm:px-6 lg:px-8',
-  wide: 'mx-auto w-full max-w-screen-2xl px-4 sm:px-6 lg:px-8',
-  full: 'w-full',
-}
-
-/**
- * Trivial presentational layout container used as the root of spec-driven
- * storefront pages. Constrains content width; children render as-is.
- */
-export function StoreContainer1({
-  size = 'default',
-  className,
-  children,
-}: StoreContainer1Props) {
-  return <div className={cn(sizeClasses[size], className)}>{children}</div>
-}
-
-export default StoreContainer1