@thorprovider/blocks 0.1.2 → 1.0.0

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

@@ -1,65 +1,48 @@
 'use client'
 
-import { useState } from 'react'
-import { ShoppingCart, Zap, Clock, CreditCard, Wallet, Minus, Plus, X } from 'lucide-react'
+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'
 
-export interface ShoppingCart4Item {
-  /** Backend cart line-item id — the stable identity for update/removal. */
-  id: string
-  name: string
-  price: number
-  quantity: number
-  /** 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 {
+/** Host-supplied promotion definition. Icons are React-side only. */
+export interface ShoppingCartPromotion {
   threshold: number
   reward: string
   icon: LucideIcon
 }
 
-export interface ShoppingCart4RecentlyViewed {
-  id: string
-  name: string
-  price: number
-  image?: string
-}
+export type ShoppingCartTotalsState = 'idle' | 'pending' | 'error'
 
-export interface ShoppingCart4Props {
-  items: ShoppingCart4Item[]
-  promotions: ShoppingCart4Promotion[]
-  recentlyViewed?: ShoppingCart4RecentlyViewed[]
+export type ShoppingCartPresentation = 'compact' | 'page'
+
+export interface ShoppingCartProps {
+  /** Canonical cart lines keyed by backend cart line-item id. */
+  items: ShoppingCartItem[]
+  promotions?: ShoppingCartPromotion[]
+  recentlyViewed?: ShoppingCartSuggestion[]
   /**
-   * Backend-authoritative totals. The curated cart renders these verbatim; it
-   * never computes subtotal/tax/shipping/total locally.
+   * 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.
    */
-  totals?: ShoppingCart4Totals
+  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?: ShoppingCart4TotalsState
+  totalsState?: ShoppingCartTotalsState
   totalsErrorLabel?: string
   /** Shown when a required total amount is absent or malformed (never as zero). */
   totalsUnavailableLabel?: string
@@ -69,10 +52,6 @@ export interface ShoppingCart4Props {
   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'
@@ -91,6 +70,9 @@ export interface ShoppingCart4Props {
   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'
@@ -100,6 +82,12 @@ export interface ShoppingCart4Props {
   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
@@ -112,10 +100,19 @@ export interface ShoppingCart4Props {
   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 usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+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) => {
@@ -123,10 +120,11 @@ const interpolate = (template: string, values: Record<string, string>) =>
     return values[key] ?? match
   })
 
-export function ShoppingCart4({
+export function ShoppingCart({
   items,
   promotions,
   recentlyViewed,
+  presentation = 'compact',
   totals,
   totalsState = 'idle',
   totalsErrorLabel = 'No se pudieron actualizar los totales.',
@@ -135,7 +133,6 @@ export function ShoppingCart4({
   retryLabel = 'Reintentar',
   onRetryTotals,
   formatMoney: formatMoneyProp,
-  formatPrice,
   titleLabel = 'Carrito de compras',
   subtotalLabel = 'Subtotal',
   discountLabel = 'Descuento',
@@ -153,6 +150,9 @@ export function ShoppingCart4({
   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',
@@ -162,24 +162,47 @@ export function ShoppingCart4({
   removeLabel = 'Quitar',
   decreaseLabel = 'Disminuir cantidad',
   increaseLabel = 'Aumentar cantidad',
+  continueShoppingLabel = 'Seguir comprando',
+  checkoutUnavailable,
+  checkoutDisabled,
   onQuantityChange,
   onRemove,
   onCheckout,
   onQuickCheckout,
   onPayWithApple,
   onPayWithGoogle,
+  onApplyPromo,
   onRecentlyViewedClick,
-}: ShoppingCart4Props) {
+  onContinueShopping,
+}: ShoppingCartProps) {
   const [isExpanded, setIsExpanded] = useState(true)
   const [quickCheckout, setQuickCheckout] = useState(false)
-
-  const format = formatPrice ?? (value => usdFormatter.format(value))
+  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 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--) {
@@ -195,11 +218,12 @@ export function ShoppingCart4({
       ? 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 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 = () => {
@@ -277,33 +301,73 @@ export function ShoppingCart4({
     )
   }
 
+  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='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' />
+              <ShoppingCartIcon 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'>
-                <ShoppingCart className='text-muted-foreground/50 size-10' />
+              <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>
             ) : (
               <>
@@ -337,10 +401,16 @@ 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'>
                           {item.image ? (
@@ -366,7 +436,7 @@ export function ShoppingCart4({
                                       ? () => onQuantityChange(item.id, item.quantity - 1)
                                       : undefined
                                   }
-                                  disabled={item.quantity <= 1}
+                                  disabled={item.quantity <= 1 || mutationsDisabled}
                                   aria-label={`${decreaseLabel}, ${item.name}`}
                                 >
                                   <Minus />
@@ -382,6 +452,7 @@ export function ShoppingCart4({
                                       : undefined
                                   }
                                   aria-label={`${increaseLabel}, ${item.name}`}
+                                  disabled={mutationsDisabled}
                                 >
                                   <Plus />
                                 </Button>
@@ -390,6 +461,7 @@ export function ShoppingCart4({
                                   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 />
@@ -406,6 +478,9 @@ export function ShoppingCart4({
                     {/* 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 */}
@@ -445,13 +520,28 @@ export function ShoppingCart4({
                       ) : null}
 
                       {/* Checkout Button */}
-                      <Button
-                        size='lg'
-                        className='h-10 w-full cursor-pointer px-8'
-                        onClick={hasExpress && quickCheckout ? onQuickCheckout : onCheckout}
-                      >
-                        {hasExpress && quickCheckout ? quickCheckoutLabel : checkoutLabel}
-                      </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 ? (
@@ -473,7 +563,7 @@ 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'>
@@ -490,34 +580,39 @@ export function ShoppingCart4({
                   </div>
                 )}
 
-                {/* Recently Viewed */}
-                {isExpanded && recentlyViewed && recentlyViewed.length > 0 && (
+                {/* 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 => (
-                        <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'
-                              />
+                      {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}
-                          </div>
-                          <p className='text-muted-foreground truncate text-xs'>{item.name}</p>
-                          <p className='text-xs font-medium'>${item.price.toFixed(2)}</p>
-                        </button>
-                      ))}
+                          </button>
+                        )
+                      })}
                     </div>
                   </div>
                 )}
@@ -530,4 +625,4 @@ export function ShoppingCart4({
   )
 }
 
-export default ShoppingCart4
+export default ShoppingCart