@thorprovider/blocks 0.1.1 → 0.1.2

package/src/blocks/e-commerce/checkout-forms/checkout-form-1-order-summary.tsx

@@ -1,139 +1,252 @@
 'use client'
 
-import { useState } from 'react'
-import { Gift, Shield, Truck } from 'lucide-react'
+import { Shield, Truck } from 'lucide-react'
 import { Badge } from '../../../ui/badge'
 import { Button } from '../../../ui/button'
 import { Card, CardContent, CardTitle } from '../../../ui/card'
 import { Field, FieldLabel } from '../../../ui/field'
 import { Input } from '../../../ui/input'
 import { Separator } from '../../../ui/separator'
-import type { CheckoutForm1OrderSummary } from './checkout-form-1'
+import { formatMoney, isAvailableMoney } from '../../../lib/money'
+import type { Money } from '@thorprovider/types'
+import type {
+  CheckoutForm1OrderSummary,
+  CheckoutForm1OrderSummaryItem,
+  CheckoutForm1TotalsState,
+} from './checkout-form-1'
 
 export interface CheckoutForm1OrderSummaryProps {
   orderSummary: CheckoutForm1OrderSummary
+  totalsState?: CheckoutForm1TotalsState
+  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
+  promoCode?: string
+  onPromoCodeChange?: (value: string) => void
+  onApplyPromo?: (code: string) => void
+  promoPending?: boolean
+  promoApplyLabel?: string
+  promoPlaceholder?: string
+  trustNotes?: string[]
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatMoney?: (money: Money) => string
 }
 
-export function CheckoutForm1OrderSummary({ orderSummary }: CheckoutForm1OrderSummaryProps) {
-  const [promoCode, setPromoCode] = useState('')
+export function CheckoutForm1OrderSummary({
+  orderSummary,
+  totalsState = 'idle',
+  totalsErrorLabel = 'No se pudieron actualizar los totales.',
+  totalsUnavailableLabel = 'Totales no disponibles.',
+  amountUnavailableLabel = '—',
+  retryLabel = 'Reintentar',
+  onRetryTotals,
+  promoCode,
+  onPromoCodeChange,
+  onApplyPromo,
+  promoPending = false,
+  promoApplyLabel = 'Aplicar',
+  promoPlaceholder = 'Ingresa el código',
+  trustNotes,
+  formatMoney: formatMoneyProp,
+}: CheckoutForm1OrderSummaryProps) {
+  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)
+  const lineAmount = (item: CheckoutForm1OrderSummaryItem): 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 format(item.lineTotal)
+    if (typeof item.price === 'number') return `$${(item.price * item.quantity).toFixed(2)}`
+    return null
+  }
 
-  const subtotal = orderSummary.items.reduce(
-    (sum, item) => sum + item.price * item.quantity,
-    0
-  )
-  const total =
-    subtotal +
-    orderSummary.shipping +
-    orderSummary.tax -
-    (orderSummary.discount ?? 0) -
-    (orderSummary.promoDiscount ?? 0)
-
-  return (
-    <Card className="sticky top-8">
-      <CardContent className="flex flex-col gap-4 p-6">
-        <CardTitle>Order Summary</CardTitle>
-
-        <div className="flex flex-col gap-4">
-          {orderSummary.items.map((item) => (
-            <div key={item.id} className="flex items-center gap-3">
-              <div className="relative">
-                <img
-                  src={item.image || undefined}
-                  alt={item.name}
-                  width={64}
-                  height={64}
-                  className="size-16 rounded-lg object-cover"
-                />
-                <Badge
-                  variant="secondary"
-                  className="absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs"
-                >
-                  {item.quantity}
-                </Badge>
-              </div>
-              <div className="flex-1">
-                <p className="text-sm font-medium">{item.name}</p>
-                <p className="text-sm text-muted-foreground">{item.variant}</p>
-              </div>
-              <p className="text-sm font-medium">${item.price.toFixed(2)}</p>
-            </div>
-          ))}
+  const renderTotals = () => {
+    if (totalsState === 'pending') {
+      return <p className="text-muted-foreground text-sm" aria-live="polite">Actualizando totales…</p>
+    }
+    if (totalsState === 'error') {
+      return (
+        <div className="flex flex-col gap-2" role="alert">
+          <p className="text-destructive text-sm">{totalsErrorLabel}</p>
+          {onRetryTotals ? (
+            <Button type="button" variant="outline" size="sm" className="w-fit" onClick={onRetryTotals}>
+              {retryLabel}
+            </Button>
+          ) : null}
         </div>
+      )
+    }
 
-        <Separator />
-
-        <Field className="gap-2">
-          <FieldLabel>Promo code</FieldLabel>
-          <div className="flex gap-2">
-            <Input
-              placeholder="Enter code"
-              value={promoCode}
-              onChange={(e) => setPromoCode(e.target.value)}
-            />
-            <Button type="button" variant="outline">
-              Apply
-            </Button>
+    const totals = orderSummary.totals
+    if (totals) {
+      const subtotalText = format(totals.subtotal)
+      const totalText = format(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 type="button" variant="outline" size="sm" className="w-fit" onClick={onRetryTotals}>
+                {retryLabel}
+              </Button>
+            ) : null}
           </div>
-        </Field>
-
-        <Separator />
-
+        )
+      }
+      return (
         <div className="flex flex-col gap-2 text-sm">
           <div className="flex items-center justify-between">
             <span className="text-muted-foreground">Subtotal</span>
-            <span className="font-medium">${subtotal.toFixed(2)}</span>
+            <span className="font-medium tabular-nums">{subtotalText}</span>
           </div>
-          <div className="flex items-center justify-between">
-            <span className="flex items-center gap-1.5 text-muted-foreground">
-              <Truck className="size-4" />
-              Shipping
-            </span>
-            <span className="font-medium">${orderSummary.shipping.toFixed(2)}</span>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground">Tax</span>
-            <span className="font-medium">${orderSummary.tax.toFixed(2)}</span>
-          </div>
-          {(orderSummary.discount ?? 0) > 0 && (
+          {isAvailableMoney(totals.discount) ? (
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Discount</span>
-              <span className="font-medium text-destructive">
-                -${(orderSummary.discount ?? 0).toFixed(2)}
-              </span>
+              <span className="text-muted-foreground">Descuento</span>
+              <span className="font-medium tabular-nums">{format(totals.discount)}</span>
+            </div>
+          ) : null}
+          {isAvailableMoney(totals.tax) ? (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Impuestos</span>
+              <span className="font-medium tabular-nums">{format(totals.tax)}</span>
             </div>
-          )}
-          {(orderSummary.promoDiscount ?? 0) > 0 && (
+          ) : null}
+          {isAvailableMoney(totals.shipping) ? (
             <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Promo discount</span>
-              <span className="font-medium text-success">
-                -${(orderSummary.promoDiscount ?? 0).toFixed(2)}
+              <span className="flex items-center gap-1.5 text-muted-foreground">
+                <Truck className="size-4" />
+                Envío
               </span>
+              <span className="font-medium tabular-nums">{format(totals.shipping)}</span>
             </div>
-          )}
+          ) : null}
+          <Separator />
+          <div className="flex items-center justify-between">
+            <span className="font-semibold">Total</span>
+            <span className="font-semibold tabular-nums">{totalText}</span>
+          </div>
         </div>
+      )
+    }
 
+    // Legacy numeric fallback for consumers that have not moved to `totals`.
+    const legacySubtotal = orderSummary.items.reduce(
+      (sum, item) => sum + (item.price ?? 0) * item.quantity,
+      0
+    )
+    const legacyTotal =
+      legacySubtotal +
+      (orderSummary.shipping ?? 0) +
+      (orderSummary.tax ?? 0) -
+      (orderSummary.discount ?? 0) -
+      (orderSummary.promoDiscount ?? 0)
+    return (
+      <div className="flex flex-col gap-2 text-sm">
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Subtotal</span>
+          <span className="font-medium tabular-nums">${legacySubtotal.toFixed(2)}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Envío</span>
+          <span className="font-medium tabular-nums">${(orderSummary.shipping ?? 0).toFixed(2)}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Impuestos</span>
+          <span className="font-medium tabular-nums">${(orderSummary.tax ?? 0).toFixed(2)}</span>
+        </div>
         <Separator />
-
         <div className="flex items-center justify-between">
           <span className="font-semibold">Total</span>
-          <span className="font-semibold">${total.toFixed(2)}</span>
+          <span className="font-semibold tabular-nums">${legacyTotal.toFixed(2)}</span>
         </div>
+      </div>
+    )
+  }
 
-        <div className="flex flex-col gap-2 text-sm text-muted-foreground">
-          <span className="flex items-center gap-2">
-            <Shield className="size-4" />
-            SSL encrypted checkout
-          </span>
-          <span className="flex items-center gap-2">
-            <Truck className="size-4" />
-            Free shipping on orders over $75
-          </span>
-          <span className="flex items-center gap-2">
-            <Gift className="size-4" />
-            30-day return policy
-          </span>
+  return (
+    <Card className="sticky top-8">
+      <CardContent className="flex flex-col gap-4 p-6">
+        <CardTitle>Order Summary</CardTitle>
+
+        <div className="flex flex-col gap-4">
+          {orderSummary.items.map((item) => {
+            const amount = lineAmount(item)
+            return (
+              <div key={String(item.id)} className="flex items-center gap-3">
+                <div className="relative">
+                  {item.image ? (
+                    <img
+                      src={item.image || undefined}
+                      alt={item.name}
+                      width={64}
+                      height={64}
+                      className="bg-muted size-16 rounded-lg object-cover"
+                    />
+                  ) : (
+                    <div aria-hidden="true" className="bg-muted size-16 rounded-lg" />
+                  )}
+                  <Badge
+                    variant="secondary"
+                    className="absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs"
+                  >
+                    {item.quantity}
+                  </Badge>
+                </div>
+                <div className="flex-1">
+                  <p className="text-sm font-medium">{item.name}</p>
+                  {item.variant ? <p className="text-sm text-muted-foreground">{item.variant}</p> : null}
+                </div>
+                <p className="text-sm font-medium tabular-nums">{amount ?? amountUnavailableLabel}</p>
+              </div>
+            )
+          })}
         </div>
+
+        <Separator />
+
+        {onPromoCodeChange ? (
+          <Field className="gap-2">
+            <FieldLabel htmlFor="checkout-promo-code">Código promocional</FieldLabel>
+            <div className="flex gap-2">
+              <Input
+                id="checkout-promo-code"
+                placeholder={promoPlaceholder}
+                value={promoCode ?? ''}
+                onChange={(e) => onPromoCodeChange(e.target.value)}
+              />
+              <Button
+                type="button"
+                variant="outline"
+                disabled={promoPending || !onApplyPromo}
+                onClick={() => onApplyPromo?.(promoCode ?? '')}
+              >
+                {promoApplyLabel}
+              </Button>
+            </div>
+          </Field>
+        ) : null}
+
+        <Separator />
+
+        {renderTotals()}
+
+        {trustNotes && trustNotes.length > 0 ? (
+          <div className="flex flex-col gap-2 text-sm text-muted-foreground">
+            {trustNotes.map((note, index) => (
+              <span key={`trust:${index}:${note}`} className="flex items-center gap-2">
+                <Shield className="size-4" />
+                {note}
+              </span>
+            ))}
+          </div>
+        ) : null}
       </CardContent>
     </Card>
   )
-}
+}
+
+export default CheckoutForm1OrderSummary

package/src/blocks/e-commerce/checkout-forms/checkout-form-1-payment-step.tsx

@@ -28,6 +28,8 @@ export interface CheckoutForm1PaymentStepProps {
   onExpiryChange: (value: string) => void
   paymentMethods?: PaymentMethod[]
   noPaymentMethodsLabel?: string
+  /** Raw card fields are legacy-only; the launch flow defaults to `false`. */
+  collectCardFields?: boolean
   fieldErrors?: CheckoutForm1FieldErrors
   fieldDescriptions?: CheckoutForm1FieldDescriptions
 }
@@ -39,6 +41,7 @@ export function CheckoutForm1PaymentStep({
   onExpiryChange,
   paymentMethods = [],
   noPaymentMethodsLabel = 'No payment methods are available for this region.',
+  collectCardFields = false,
   fieldErrors,
   fieldDescriptions,
 }: CheckoutForm1PaymentStepProps) {
@@ -46,6 +49,7 @@ export function CheckoutForm1PaymentStep({
 
   const selectedMethod = paymentMethods.find(method => method.id === formData.paymentMethod)
   const isCard = selectedMethod?.type === 'card'
+  const showCardFields = collectCardFields && isCard
 
   return (
     <FieldSet>
@@ -70,14 +74,14 @@ export function CheckoutForm1PaymentStep({
         </RadioGroup>
       )}
 
-      {selectedMethod && !isCard ? (
+      {selectedMethod && !showCardFields ? (
         <div className="bg-muted/50 rounded-lg p-4 text-sm">
           <p className="font-medium">{selectedMethod.name}</p>
           {selectedMethod.description ? <p className="text-muted-foreground mt-1">{selectedMethod.description}</p> : null}
         </div>
       ) : null}
 
-      {isCard ? (
+      {showCardFields ? (
         <>
           <Field data-invalid={!!fieldErrors?.cardNumber?.length}>
             <FieldLabel htmlFor="checkout-card-number">Card number</FieldLabel>

package/src/blocks/e-commerce/checkout-forms/checkout-form-1-shipping-step.tsx

@@ -1,7 +1,10 @@
 'use client'
 
-import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
+import { Field, FieldContent, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'
 import { Input } from '../../../ui/input'
+import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
+import { formatMoney, isAvailableMoney } from '../../../lib/money'
+import type { Money } from '@thorprovider/types'
 import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
 import type {
   CheckoutForm1ChangeHandler,
@@ -9,6 +12,7 @@ import type {
   CheckoutForm1FieldDescriptions,
   CheckoutForm1FieldErrors,
   CheckoutForm1FormData,
+  CheckoutForm1ShippingOption,
 } from './checkout-form-1'
 import { CheckoutForm1CountryField } from './checkout-form-1-country-field'
 
@@ -16,6 +20,11 @@ export interface CheckoutForm1ShippingStepProps {
   formData: CheckoutForm1FormData
   onChange: CheckoutForm1ChangeHandler
   countries?: CheckoutForm1CountryOption[]
+  shippingOptions?: CheckoutForm1ShippingOption[]
+  selectedShippingOptionId?: string
+  onSelectShippingOption?: (id: string) => void
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatMoney?: (money: Money) => string
   fieldErrors?: CheckoutForm1FieldErrors
   fieldDescriptions?: CheckoutForm1FieldDescriptions
 }
@@ -24,6 +33,10 @@ export function CheckoutForm1ShippingStep({
   formData,
   onChange,
   countries,
+  shippingOptions,
+  selectedShippingOptionId,
+  onSelectShippingOption,
+  formatMoney: formatMoneyProp,
   fieldErrors,
   fieldDescriptions,
 }: CheckoutForm1ShippingStepProps) {
@@ -102,6 +115,42 @@ export function CheckoutForm1ShippingStep({
           />
         )}
       </div>
+
+      {shippingOptions && shippingOptions.length > 0 ? (
+        <FieldSet>
+          <FieldLegend>Shipping method</FieldLegend>
+          <RadioGroup
+            value={selectedShippingOptionId ?? ''}
+            onValueChange={(value) => value && onSelectShippingOption?.(String(value))}
+            className="grid gap-3"
+          >
+            {shippingOptions.map((option) => (
+              <Field
+                key={option.id}
+                orientation="horizontal"
+                className="justify-between rounded-lg border p-4"
+              >
+                <FieldContent>
+                  <FieldLabel htmlFor={`shipping-${option.id}`} className="flex flex-col gap-0.5">
+                    <span>{option.name}</span>
+                    {option.description ? (
+                      <span className="text-muted-foreground text-xs font-normal">
+                        {option.description}
+                      </span>
+                    ) : null}
+                  </FieldLabel>
+                </FieldContent>
+                <div className="flex items-center gap-3">
+                  {isAvailableMoney(option.price) ? (
+                    <span className="text-sm tabular-nums">{formatMoney(option.price, formatMoneyProp)}</span>
+                  ) : null}
+                  <RadioGroupItem value={option.id} id={`shipping-${option.id}`} />
+                </div>
+              </Field>
+            ))}
+          </RadioGroup>
+        </FieldSet>
+      ) : null}
     </FieldGroup>
   )
-}
+}