@thorprovider/blocks 0.1.0 → 0.1.2

package/src/blocks/e-commerce/checkout-forms/checkout-confirmation-fulfilment-progress.tsx

@@ -23,8 +23,8 @@ const STAGE_LABELS: Record<FulfilmentStage, string> = {
 
 interface CheckoutConfirmationFulfilmentProgressProps {
   order: {
-    currentStage: FulfilmentStage
-    estimatedDelivery: string
+    currentStage?: FulfilmentStage
+    estimatedDelivery?: string | null
     trackingHref?: string
   }
   /** Ordered by `Object.keys(fulfilmentDetails)` from the orchestrator. */
@@ -72,17 +72,21 @@ export function CheckoutConfirmationFulfilmentProgress({
   locationLabel = 'Ubicación',
   trackOrderLabel = 'Seguir este pedido',
 }: CheckoutConfirmationFulfilmentProgressProps) {
-  const currentIndex = stages.findIndex(stage => stage.stage === order.currentStage)
-  const [selected, setSelected] = useState<string>(order.currentStage)
+  const currentIndex = order.currentStage
+    ? stages.findIndex(stage => stage.stage === order.currentStage)
+    : -1
+  const [selected, setSelected] = useState<string>(order.currentStage ?? stages[0]?.stage ?? '')
 
   return (
     <Card className='mt-10'>
       <CardHeader>
         <CardTitle className='flex flex-wrap items-center justify-between gap-2 text-base'>
           {progressLabel}
-          <span className='text-muted-foreground text-sm font-normal'>
-            {`${estimatedDeliveryLabel} ${longDate.format(new Date(order.estimatedDelivery))}`}
-          </span>
+          {order.estimatedDelivery ? (
+            <span className='text-muted-foreground text-sm font-normal'>
+              {`${estimatedDeliveryLabel} ${longDate.format(new Date(order.estimatedDelivery))}`}
+            </span>
+          ) : null}
         </CardTitle>
       </CardHeader>
 
@@ -156,7 +160,9 @@ export function CheckoutConfirmationFulfilmentProgress({
                         ? stampDate.format(new Date(detail.at))
                         : done
                           ? inProgressLabel
-                          : `${expectedByLabel} ${longDate.format(new Date(order.estimatedDelivery))}`}
+                          : order.estimatedDelivery
+                            ? `${expectedByLabel} ${longDate.format(new Date(order.estimatedDelivery))}`
+                            : null}
                     </dd>
                   </div>
 

package/src/blocks/e-commerce/checkout-forms/checkout-confirmation.test.tsx

@@ -0,0 +1,136 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { CheckoutConfirmation, type Order, type OrderLine } from './checkout-confirmation'
+
+const order: Order = {
+  number: '1001',
+  placedAt: '2026-10-06T00:00:00.000Z',
+  totals: {},
+}
+
+const orderLines: OrderLine[] = [
+  { id: 'l1', name: 'Taladro', quantity: 1, lineTotal: { amount: '45.00', currencyCode: 'USD' } },
+  {
+    id: 'l2',
+    name: 'Batería',
+    quantity: 2,
+    lineTotal: { amount: '40.00', currencyCode: 'USD' },
+    image: '',
+  },
+]
+
+describe('CheckoutConfirmation — truthful optional data', () => {
+  it('omits email, ETA, progress, addresses, and totals when the backend supplies none', () => {
+    const html = renderToStaticMarkup(<CheckoutConfirmation order={order} orderLines={orderLines} />)
+    expect(html).toContain('Pedido 1001 realizado')
+    expect(html).not.toContain('Enviamos la confirmación')
+    expect(html).not.toContain('Entrega estimada')
+    expect(html).not.toContain('Progreso')
+    expect(html).not.toContain('Subtotal')
+    expect(html).not.toContain('Total')
+    expect(html).not.toContain('Gratis')
+    expect(html).not.toContain('Facturación')
+  })
+
+  it('renders supplied email, totals, and a zero-shipping free label', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutConfirmation
+        order={{
+          ...order,
+          email: 'ana@example.com',
+          totals: {
+            subtotal: { amount: '85.00', currencyCode: 'USD' },
+            shipping: { amount: '0', currencyCode: 'USD' },
+            tax: { amount: '6.80', currencyCode: 'USD' },
+            total: { amount: '91.80', currencyCode: 'USD' },
+          },
+        }}
+        orderLines={orderLines}
+        formatPrice={money => `${money.currencyCode} ${money.amount}`}
+      />,
+    )
+    expect(html).toContain('ana@example.com')
+    expect(html).toContain('USD 85.00')
+    expect(html).toContain('Gratis')
+    expect(html).toContain('USD 91.80')
+  })
+
+  it('renders the fulfilment progress only when stages and a current stage are supplied', () => {
+    const withProgress = renderToStaticMarkup(
+      <CheckoutConfirmation
+        order={{ ...order, currentStage: 'Confirmed', estimatedDelivery: '2026-10-10T00:00:00.000Z' }}
+        orderLines={orderLines}
+        fulfilmentDetails={{
+          Confirmed: { stage: 'Confirmed', summary: 'Confirmado', location: 'Bodega', at: '2026-10-06T00:00:00.000Z' },
+          Packed: { stage: 'Packed', summary: 'Empaquetado', location: 'Bodega', at: null },
+          Shipped: { stage: 'Shipped', summary: 'Enviado', location: 'Bodega', at: null },
+          Delivered: { stage: 'Delivered', summary: 'Entregado', location: 'Bodega', at: null },
+        }}
+      />,
+    )
+    expect(withProgress).toContain('Progreso')
+    expect(withProgress).toContain('Entrega estimada')
+
+    const withoutProgress = renderToStaticMarkup(
+      <CheckoutConfirmation order={order} orderLines={orderLines} />,
+    )
+    expect(withoutProgress).not.toContain('Progreso')
+  })
+
+  it('omits an absent line image without emitting an empty src', () => {
+    const html = renderToStaticMarkup(<CheckoutConfirmation order={order} orderLines={orderLines} />)
+    expect(html).not.toMatch(/src=""/)
+  })
+
+  it('renders duplicate address lines without colliding keys', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutConfirmation
+        order={{
+          ...order,
+          shipping: { name: 'Ana', lines: ['Calle 1', 'Calle 1'] },
+        }}
+        orderLines={orderLines}
+      />,
+    )
+    expect((html.match(/Calle 1/g) ?? []).length).toBe(2)
+  })
+
+  it('never renders a fake zero for absent or malformed line/total amounts', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutConfirmation
+        order={{
+          ...order,
+          totals: {
+            subtotal: { amount: '', currencyCode: 'USD' },
+            total: { amount: 'abc', currencyCode: 'USD' },
+          },
+        }}
+        orderLines={[
+          { id: 'l1', name: 'Pieza', quantity: 1, lineTotal: { amount: '', currencyCode: 'USD' } },
+        ]}
+        formatPrice={money => `${money.currencyCode} ${money.amount}`}
+      />,
+    )
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('—')
+  })
+
+  it('preserves a legitimate zero shipping and total', () => {
+    const html = renderToStaticMarkup(
+      <CheckoutConfirmation
+        order={{
+          ...order,
+          totals: {
+            subtotal: { amount: '0', currencyCode: 'USD' },
+            shipping: { amount: '0', currencyCode: 'USD' },
+            total: { amount: '0', currencyCode: 'USD' },
+          },
+        }}
+        orderLines={orderLines}
+        formatPrice={money => `${money.currencyCode} ${money.amount}`}
+      />,
+    )
+    expect(html).toContain('USD 0')
+    expect(html).toContain('Gratis')
+  })
+})

package/src/blocks/e-commerce/checkout-forms/checkout-confirmation.tsx

@@ -2,6 +2,8 @@ import { CircleCheck } from 'lucide-react'
 import { Button } from '../../../ui/button'
 import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
 import { Separator } from '../../../ui/separator'
+import { formatMoney, isAvailableMoney } from '../../../lib/money'
+import type { Money } from '@thorprovider/types'
 import { CheckoutConfirmationFulfilmentProgress } from './checkout-confirmation-fulfilment-progress'
 
 export type FulfilmentStage = 'Confirmed' | 'Packed' | 'Shipped' | 'Delivered'
@@ -9,10 +11,13 @@ export type FulfilmentStage = 'Confirmed' | 'Packed' | 'Shipped' | 'Delivered'
 export interface OrderLine {
   id: string
   name: string
-  variant: string
+  variant?: string
   quantity: number
-  price: number
-  image: string
+  /** Canonical backend line total. */
+  lineTotal: Money
+  unitPrice?: Money
+  /** Optional; an absent image is omitted rather than serialized as `""`. */
+  image?: string
 }
 
 export interface FulfilmentStageDetail {
@@ -32,26 +37,29 @@ export interface FulfilmentStageDetail {
 export interface OrderAddress {
   name: string
   lines: string[]
-  method: string
+  method?: string
 }
 
 export interface OrderTotals {
-  subtotal: number
-  shipping: number
-  tax: number
+  subtotal?: Money
+  discount?: Money
+  shipping?: Money
+  tax?: Money
+  total?: Money
 }
 
 export interface Order {
   number: string
   /** ISO date */
   placedAt: string
-  email: string
-  currentStage: FulfilmentStage
-  /** ISO date */
-  estimatedDelivery: string
+  email?: string
+  /** Present only when the backend reports a fulfilment stage. */
+  currentStage?: FulfilmentStage
+  /** ISO date. Rendered only when supplied; no delivery estimate is fabricated. */
+  estimatedDelivery?: string | null
   trackingHref?: string
-  shipping: OrderAddress
-  billing: OrderAddress
+  shipping?: OrderAddress
+  billing?: OrderAddress
   totals: OrderTotals
 }
 
@@ -59,22 +67,28 @@ export interface CheckoutConfirmationProps {
   order: Order
   orderLines: OrderLine[]
   /**
-   * Keyed by `FulfilmentStage`. The stage strip is ordered by `Object.keys`,
-   * so define the record in the canonical `Confirmed → Packed → Shipped → Delivered` order.
+   * Keyed by `FulfilmentStage`. Rendered only when supplied; the stage strip is
+   * ordered by `Object.keys`, so define the record in the canonical
+   * `Confirmed → Packed → Shipped → Delivered` order.
    */
-  fulfilmentDetails: Record<FulfilmentStage, FulfilmentStageDetail>
-  /** Override price formatting (locale, currency). Defaults to USD. */
-  formatPrice?: (value: number) => string
+  fulfilmentDetails?: Record<FulfilmentStage, FulfilmentStageDetail>
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatPrice?: (money: Money) => string
   titleLabel?: string
   /** Template with `{number}`/`{date}`/`{email}` placeholders, resolved internally. */
   orderPlacedLabel?: string
+  /** Used when the order carries no email. */
+  orderPlacedNoEmailLabel?: string
   itemsLabel?: string
   quantityLabel?: string
   subtotalLabel?: string
+  discountLabel?: string
   shippingLabel?: string
   taxLabel?: string
   totalLabel?: string
   freeLabel?: string
+  /** Shown for a line whose supplied line total is absent or malformed. */
+  amountUnavailableLabel?: string
   shippingAddressLabel?: string
   billingAddressLabel?: string
   continueShoppingLabel?: string
@@ -95,7 +109,6 @@ export interface CheckoutConfirmationProps {
   onContinueShopping?: () => void
 }
 
-const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
 const longDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' })
 
 /**
@@ -110,15 +123,18 @@ export function CheckoutConfirmation({
   orderLines,
   fulfilmentDetails,
   formatPrice,
-  titleLabel = '¡Gracias! Tu pedido está en camino',
-  orderPlacedLabel = 'Pedido {number} realizado el {date}. Enviamos la confirmación a {email}.',
-  itemsLabel = 'Artículos',
+  titleLabel = 'Pedido registrado',
+  orderPlacedLabel = 'Pedido {number} · {date} · Correo de contacto: {email}',
+  orderPlacedNoEmailLabel = 'Pedido {number} realizado el {date}.',
+  itemsLabel = 'Comprobante del pedido',
   quantityLabel = 'Cantidad',
   subtotalLabel = 'Subtotal',
+  discountLabel = 'Descuento',
   shippingLabel = 'Envío',
   taxLabel = 'Impuestos',
   totalLabel = 'Total',
   freeLabel = 'Gratis',
+  amountUnavailableLabel = '—',
   shippingAddressLabel = 'Envío',
   billingAddressLabel = 'Facturación',
   continueShoppingLabel = 'Seguir comprando',
@@ -137,9 +153,21 @@ export function CheckoutConfirmation({
   supportHref,
   onContinueShopping,
 }: CheckoutConfirmationProps) {
-  const total = order.totals.subtotal + order.totals.shipping + order.totals.tax
-  const format = formatPrice ?? (value => usdFormatter.format(value))
-  const fulfilmentStages = Object.keys(fulfilmentDetails) as FulfilmentStage[]
+  const format = (value: Money | null | undefined) => formatMoney(value, formatPrice)
+  const placedDate = longDate.format(new Date(order.placedAt))
+  const placedText = order.email
+    ? orderPlacedLabel
+        .replace('{number}', order.number)
+        .replace('{date}', placedDate)
+        .replace('{email}', order.email)
+    : orderPlacedNoEmailLabel.replace('{number}', order.number).replace('{date}', placedDate)
+  const fulfilmentStages = fulfilmentDetails
+    ? (Object.keys(fulfilmentDetails) as FulfilmentStage[])
+    : []
+  const addresses = [
+    { title: shippingAddressLabel, address: order.shipping },
+    { title: billingAddressLabel, address: order.billing },
+  ].filter((section): section is { title: string; address: OrderAddress } => Boolean(section.address))
 
   return (
     <div className='w-full py-16 sm:py-24'>
@@ -152,31 +180,28 @@ export function CheckoutConfirmation({
             <CircleCheck className='size-6' />
           </span>
           <h1 className='mt-4 text-3xl font-semibold tracking-tight'>{titleLabel}</h1>
-          <p className='text-muted-foreground mt-3'>
-            {orderPlacedLabel
-              .replace('{number}', order.number)
-              .replace('{date}', longDate.format(new Date(order.placedAt)))
-              .replace('{email}', order.email)}
-          </p>
+          <p className='text-muted-foreground mt-3'>{placedText}</p>
         </div>
 
-        <CheckoutConfirmationFulfilmentProgress
-          order={{
-            currentStage: order.currentStage,
-            estimatedDelivery: order.estimatedDelivery,
-            trackingHref: order.trackingHref,
-          }}
-          stages={fulfilmentStages.map(stage => fulfilmentDetails[stage])}
-          progressLabel={progressLabel}
-          estimatedDeliveryLabel={estimatedDeliveryLabel}
-          currentStageLabel={currentStageLabel}
-          inProgressLabel={inProgressLabel}
-          expectedByLabel={expectedByLabel}
-          completedLabel={completedLabel}
-          statusLabel={statusLabel}
-          locationLabel={locationLabel}
-          trackOrderLabel={trackOrderLabel}
-        />
+        {fulfilmentDetails && order.currentStage ? (
+          <CheckoutConfirmationFulfilmentProgress
+            order={{
+              currentStage: order.currentStage,
+              estimatedDelivery: order.estimatedDelivery,
+              trackingHref: order.trackingHref,
+            }}
+            stages={fulfilmentStages.map(stage => fulfilmentDetails[stage])}
+            progressLabel={progressLabel}
+            estimatedDeliveryLabel={estimatedDeliveryLabel}
+            currentStageLabel={currentStageLabel}
+            inProgressLabel={inProgressLabel}
+            expectedByLabel={expectedByLabel}
+            completedLabel={completedLabel}
+            statusLabel={statusLabel}
+            locationLabel={locationLabel}
+            trackOrderLabel={trackOrderLabel}
+          />
+        ) : null}
 
         <Card className='mt-6'>
           <CardHeader>
@@ -186,22 +211,26 @@ export function CheckoutConfirmation({
             <ul className='divide-border divide-y'>
               {orderLines.map(line => (
                 <li key={line.id} className='flex gap-4 py-4 first:pt-0 last:pb-0'>
-                  <img
-                    src={line.image || undefined}
-                    alt={line.name}
-                    width={72}
-                    height={88}
-                    className='bg-muted h-22 w-18 shrink-0 rounded-md object-cover'
-                  />
+                  {line.image ? (
+                    <img
+                      src={line.image || undefined}
+                      alt={line.name}
+                      width={72}
+                      height={88}
+                      className='bg-muted h-22 w-18 shrink-0 rounded-md object-cover'
+                    />
+                  ) : (
+                    <div aria-hidden='true' className='bg-muted h-22 w-18 shrink-0 rounded-md' />
+                  )}
                   <div className='min-w-0 flex-1'>
                     <p className='text-sm font-medium'>{line.name}</p>
-                    <p className='text-muted-foreground text-sm'>{line.variant}</p>
+                    {line.variant ? <p className='text-muted-foreground text-sm'>{line.variant}</p> : null}
                     <p className='text-muted-foreground text-sm tabular-nums'>
                       {`${quantityLabel} ${line.quantity}`}
                     </p>
                   </div>
                   <p className='text-sm font-medium tabular-nums'>
-                    {format(line.price * line.quantity)}
+                    {format(line.lineTotal) ?? amountUnavailableLabel}
                   </p>
                 </li>
               ))}
@@ -210,51 +239,68 @@ export function CheckoutConfirmation({
             <Separator className='my-4' />
 
             <dl className='flex flex-col gap-2 text-sm'>
-              <div className='flex justify-between'>
-                <dt className='text-muted-foreground'>{subtotalLabel}</dt>
-                <dd className='tabular-nums'>{format(order.totals.subtotal)}</dd>
-              </div>
-              <div className='flex justify-between'>
-                <dt className='text-muted-foreground'>{shippingLabel}</dt>
-                <dd className='tabular-nums'>
-                  {order.totals.shipping === 0 ? freeLabel : format(order.totals.shipping)}
-                </dd>
-              </div>
-              <div className='flex justify-between'>
-                <dt className='text-muted-foreground'>{taxLabel}</dt>
-                <dd className='tabular-nums'>{format(order.totals.tax)}</dd>
-              </div>
-              <div className='flex justify-between pt-2 text-base font-semibold'>
-                <dt>{totalLabel}</dt>
-                <dd className='tabular-nums'>{format(total)}</dd>
-              </div>
+              {isAvailableMoney(order.totals.subtotal) ? (
+                <div className='flex justify-between'>
+                  <dt className='text-muted-foreground'>{subtotalLabel}</dt>
+                  <dd className='tabular-nums'>{format(order.totals.subtotal)}</dd>
+                </div>
+              ) : null}
+              {isAvailableMoney(order.totals.discount) ? (
+                <div className='flex justify-between'>
+                  <dt className='text-muted-foreground'>{discountLabel}</dt>
+                  <dd className='tabular-nums'>{format(order.totals.discount)}</dd>
+                </div>
+              ) : null}
+              {isAvailableMoney(order.totals.shipping) ? (
+                <div className='flex justify-between'>
+                  <dt className='text-muted-foreground'>{shippingLabel}</dt>
+                  <dd className='tabular-nums'>
+                    {Number(order.totals.shipping.amount) === 0
+                      ? freeLabel
+                      : format(order.totals.shipping)}
+                  </dd>
+                </div>
+              ) : null}
+              {isAvailableMoney(order.totals.tax) ? (
+                <div className='flex justify-between'>
+                  <dt className='text-muted-foreground'>{taxLabel}</dt>
+                  <dd className='tabular-nums'>{format(order.totals.tax)}</dd>
+                </div>
+              ) : null}
+              {isAvailableMoney(order.totals.total) ? (
+                <div className='flex justify-between pt-2 text-base font-semibold'>
+                  <dt>{totalLabel}</dt>
+                  <dd className='tabular-nums'>{format(order.totals.total)}</dd>
+                </div>
+              ) : null}
             </dl>
           </CardContent>
         </Card>
 
-        <div className='mt-6 grid gap-6 sm:grid-cols-2'>
-          {[
-            { title: shippingAddressLabel, address: order.shipping },
-            { title: billingAddressLabel, address: order.billing },
-          ].map(section => (
-            <Card key={section.title}>
-              <CardHeader>
-                <CardTitle className='text-base'>{section.title}</CardTitle>
-              </CardHeader>
-              <CardContent className='text-sm'>
-                <address className='text-muted-foreground not-italic'>
-                  <span className='text-foreground block font-medium'>{section.address.name}</span>
-                  {section.address.lines.map(line => (
-                    <span key={line} className='block'>
-                      {line}
-                    </span>
-                  ))}
-                </address>
-                <p className='text-muted-foreground mt-3'>{section.address.method}</p>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
+        {addresses.length > 0 ? (
+          <div className='mt-6 grid gap-6 sm:grid-cols-2'>
+            {addresses.map(section => (
+              <Card key={section.title}>
+                <CardHeader>
+                  <CardTitle className='text-base'>{section.title}</CardTitle>
+                </CardHeader>
+                <CardContent className='text-sm'>
+                  <address className='text-muted-foreground not-italic'>
+                    <span className='text-foreground block font-medium'>{section.address.name}</span>
+                    {section.address.lines.map((line, index) => (
+                      <span key={`${section.title}:${index}:${line}`} className='block'>
+                        {line}
+                      </span>
+                    ))}
+                  </address>
+                  {section.address.method ? (
+                    <p className='text-muted-foreground mt-3'>{section.address.method}</p>
+                  ) : null}
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        ) : null}
 
         <div className='mt-8 flex flex-col items-center gap-2'>
           {continueShoppingHref ? (
@@ -280,4 +326,4 @@ export function CheckoutConfirmation({
   )
 }
 
-export default CheckoutConfirmation
+export default CheckoutConfirmation