@thorprovider/blocks 0.1.3 → 1.0.0

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

@@ -1,74 +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 type ShoppingCart4Presentation = 'compact' | 'page'
+export type ShoppingCartPresentation = 'compact' | 'page'
 
-export interface ShoppingCart4Props {
-  items: ShoppingCart4Item[]
-  promotions: ShoppingCart4Promotion[]
-  recentlyViewed?: ShoppingCart4RecentlyViewed[]
+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?: ShoppingCart4Presentation
+  presentation?: ShoppingCartPresentation
   /**
-   * Backend-authoritative totals. The curated cart renders these verbatim; it
-   * never computes subtotal/tax/shipping/total locally.
+   * Backend-authoritative totals. The cart renders these verbatim; it never
+   * computes subtotal/tax/shipping/total locally.
    */
-  totals?: ShoppingCart4Totals
+  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
@@ -78,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'
@@ -100,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'
@@ -127,12 +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) => {
@@ -140,7 +120,7 @@ const interpolate = (template: string, values: Record<string, string>) =>
     return values[key] ?? match
   })
 
-export function ShoppingCart4({
+export function ShoppingCart({
   items,
   promotions,
   recentlyViewed,
@@ -153,7 +133,6 @@ export function ShoppingCart4({
   retryLabel = 'Reintentar',
   onRetryTotals,
   formatMoney: formatMoneyProp,
-  formatPrice,
   titleLabel = 'Carrito de compras',
   subtotalLabel = 'Subtotal',
   discountLabel = 'Descuento',
@@ -171,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',
@@ -189,16 +171,29 @@ export function ShoppingCart4({
   onQuickCheckout,
   onPayWithApple,
   onPayWithGoogle,
+  onApplyPromo,
   onRecentlyViewedClick,
   onContinueShopping,
-}: ShoppingCart4Props) {
+}: 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
-  const format = formatPrice ?? (value => usdFormatter.format(value))
+  // 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)
@@ -207,7 +202,7 @@ export function ShoppingCart4({
   // 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--) {
@@ -223,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 = () => {
@@ -305,6 +301,36 @@ 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={cn('mx-auto px-4', isPage ? 'max-w-3xl' : 'max-w-md')}>
@@ -315,7 +341,7 @@ export function ShoppingCart4({
           {/* 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>
             {!isPage ? (
@@ -335,7 +361,7 @@ export function ShoppingCart4({
           <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'>
-                <ShoppingCart className='text-muted-foreground/50 size-10' />
+                <ShoppingCartIcon className='text-muted-foreground/50 size-10' />
                 <p className='text-muted-foreground text-sm'>{emptyLabel}</p>
                 {isPage && onContinueShopping ? (
                   <Button variant='outline' onClick={onContinueShopping}>
@@ -452,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 */}
@@ -551,34 +580,39 @@ export function ShoppingCart4({
                   </div>
                 )}
 
-                {/* Recently Viewed */}
+                {/* 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>
                 )}
@@ -591,4 +625,4 @@ export function ShoppingCart4({
   )
 }
 
-export default ShoppingCart4
+export default ShoppingCart