@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,136 +0,0 @@
-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

@@ -1,329 +0,0 @@
-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'
-
-export interface OrderLine {
-  id: string
-  name: string
-  variant?: string
-  quantity: number
-  /** Canonical backend line total. */
-  lineTotal: Money
-  unitPrice?: Money
-  /** Optional; an absent image is omitted rather than serialized as `""`. */
-  image?: string
-}
-
-export interface FulfilmentStageDetail {
-  stage: FulfilmentStage
-  /** What happened, in a sentence. Present tense for a stage that has not arrived yet. */
-  summary: string
-  /** Where it happened, or where it will. */
-  location: string
-  /**
-   * When it happened. `null` for a stage still ahead, which the panel renders as an
-   * expectation rather than as a fact — a date with no event behind it is a promise, and
-   * printing it in the same voice as a completed step is how a tracker starts lying.
-   */
-  at: string | null
-}
-
-export interface OrderAddress {
-  name: string
-  lines: string[]
-  method?: string
-}
-
-export interface OrderTotals {
-  subtotal?: Money
-  discount?: Money
-  shipping?: Money
-  tax?: Money
-  total?: Money
-}
-
-export interface Order {
-  number: string
-  /** ISO date */
-  placedAt: 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
-  totals: OrderTotals
-}
-
-export interface CheckoutConfirmationProps {
-  order: Order
-  orderLines: OrderLine[]
-  /**
-   * 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 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
-  /** Prefix of the support line; the `supportLabel` link renders right after it. */
-  contactSupportLabel?: string
-  supportLabel?: string
-  progressLabel?: string
-  estimatedDeliveryLabel?: string
-  currentStageLabel?: string
-  inProgressLabel?: string
-  expectedByLabel?: string
-  completedLabel?: string
-  statusLabel?: string
-  locationLabel?: string
-  trackOrderLabel?: string
-  continueShoppingHref?: string
-  supportHref?: string
-  onContinueShopping?: () => void
-}
-
-const longDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'long' })
-
-/**
- * The screen that closes the purchase journey the checkout blocks open.
- *
- * This file has no hooks or handlers, so it still renders as a server component straight from
- * your order record. Only the progress tabs are interactive, and they carry their own
- * `'use client'` — the boundary is one child rather than the whole page.
- */
-export function CheckoutConfirmation({
-  order,
-  orderLines,
-  fulfilmentDetails,
-  formatPrice,
-  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',
-  contactSupportLabel = '¿Algo falla con este pedido?',
-  supportLabel = 'Contacta con soporte',
-  progressLabel = 'Progreso',
-  estimatedDeliveryLabel = 'Entrega estimada',
-  currentStageLabel = 'Etapa actual',
-  inProgressLabel = 'En curso',
-  expectedByLabel = 'Se espera para',
-  completedLabel = 'Completada',
-  statusLabel = 'Estado',
-  locationLabel = 'Ubicación',
-  trackOrderLabel = 'Seguir este pedido',
-  continueShoppingHref,
-  supportHref,
-  onContinueShopping,
-}: CheckoutConfirmationProps) {
-  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'>
-      <div className='mx-auto w-full max-w-3xl px-4 sm:px-6 lg:px-8'>
-        <div className='text-center'>
-          <span
-            aria-hidden='true'
-            className='bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full'
-          >
-            <CircleCheck className='size-6' />
-          </span>
-          <h1 className='mt-4 text-3xl font-semibold tracking-tight'>{titleLabel}</h1>
-          <p className='text-muted-foreground mt-3'>{placedText}</p>
-        </div>
-
-        {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>
-            <CardTitle className='text-base'>{itemsLabel}</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <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'>
-                  {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>
-                    {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.lineTotal) ?? amountUnavailableLabel}
-                  </p>
-                </li>
-              ))}
-            </ul>
-
-            <Separator className='my-4' />
-
-            <dl className='flex flex-col gap-2 text-sm'>
-              {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>
-
-        {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 ? (
-            <Button variant='ghost' asChild>
-              <a href={continueShoppingHref}>{continueShoppingLabel}</a>
-            </Button>
-          ) : onContinueShopping ? (
-            <Button variant='ghost' onClick={onContinueShopping}>
-              {continueShoppingLabel}
-            </Button>
-          ) : null}
-          {supportHref ? (
-            <p className='text-muted-foreground text-sm'>
-              {contactSupportLabel}{' '}
-              <a href={supportHref} className='underline underline-offset-4'>
-                {supportLabel}
-              </a>
-            </p>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default CheckoutConfirmation

package/src/blocks/e-commerce/checkout-forms/checkout-field-feedback.tsx

@@ -1,29 +0,0 @@
-'use client'
-
-import { FieldDescription, FieldError } from '../../../ui/field'
-import type { CheckoutFieldError } from './checkout-form-types'
-
-export function checkoutFieldAria(id: string, errors?: CheckoutFieldError[]) {
-  const invalid = !!errors?.length
-  return {
-    'aria-invalid': invalid || undefined,
-    'aria-describedby': invalid ? `${id}-error` : undefined,
-  }
-}
-
-export function CheckoutFieldFeedback({
-  id,
-  errors,
-  description,
-}: {
-  id: string
-  errors?: CheckoutFieldError[]
-  description?: string
-}) {
-  return (
-    <>
-      {description && <FieldDescription id={`${id}-description`}>{description}</FieldDescription>}
-      {errors?.length ? <FieldError id={`${id}-error`} errors={errors} /> : null}
-    </>
-  )
-}

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

@@ -1,96 +0,0 @@
-'use client'
-
-import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type {
-  CheckoutForm1ChangeHandler,
-  CheckoutForm1FieldDescriptions,
-  CheckoutForm1FieldErrors,
-  CheckoutForm1FormData,
-} from './checkout-form-1'
-
-export interface CheckoutForm1ContactStepProps {
-  formData: CheckoutForm1FormData
-  onChange: CheckoutForm1ChangeHandler
-  fieldErrors?: CheckoutForm1FieldErrors
-  fieldDescriptions?: CheckoutForm1FieldDescriptions
-}
-
-export function CheckoutForm1ContactStep({
-  formData,
-  onChange,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutForm1ContactStepProps) {
-  return (
-    <FieldGroup className="grid gap-4">
-      <Field data-invalid={!!fieldErrors?.email?.length}>
-        <FieldLabel htmlFor="checkout-email">Email</FieldLabel>
-        <Input
-          id="checkout-email"
-          type="text"
-          inputMode="email"
-          placeholder="john@example.com"
-          value={formData.email}
-          onChange={(e) => onChange('email', e.target.value)}
-          {...checkoutFieldAria('checkout-email', fieldErrors?.email)}
-        />
-        <CheckoutFieldFeedback
-          id="checkout-email"
-          errors={fieldErrors?.email}
-          description={fieldDescriptions?.email}
-        />
-      </Field>
-      <div className="grid gap-4 md:grid-cols-2">
-        <Field data-invalid={!!fieldErrors?.firstName?.length}>
-          <FieldLabel htmlFor="checkout-first-name">First name</FieldLabel>
-          <Input
-            id="checkout-first-name"
-            placeholder="John"
-            value={formData.firstName}
-            onChange={(e) => onChange('firstName', e.target.value)}
-            {...checkoutFieldAria('checkout-first-name', fieldErrors?.firstName)}
-          />
-          <CheckoutFieldFeedback
-            id="checkout-first-name"
-            errors={fieldErrors?.firstName}
-            description={fieldDescriptions?.firstName}
-          />
-        </Field>
-        <Field data-invalid={!!fieldErrors?.lastName?.length}>
-          <FieldLabel htmlFor="checkout-last-name">Last name</FieldLabel>
-          <Input
-            id="checkout-last-name"
-            placeholder="Doe"
-            value={formData.lastName}
-            onChange={(e) => onChange('lastName', e.target.value)}
-            {...checkoutFieldAria('checkout-last-name', fieldErrors?.lastName)}
-          />
-          <CheckoutFieldFeedback
-            id="checkout-last-name"
-            errors={fieldErrors?.lastName}
-            description={fieldDescriptions?.lastName}
-          />
-        </Field>
-      </div>
-      <Field data-invalid={!!fieldErrors?.phone?.length}>
-        <FieldLabel htmlFor="checkout-phone">Phone (optional)</FieldLabel>
-        <Input
-          id="checkout-phone"
-          type="text"
-          inputMode="tel"
-          placeholder="+1 (555) 000-0000"
-          value={formData.phone}
-          onChange={(e) => onChange('phone', e.target.value)}
-          {...checkoutFieldAria('checkout-phone', fieldErrors?.phone)}
-        />
-        <CheckoutFieldFeedback
-          id="checkout-phone"
-          errors={fieldErrors?.phone}
-          description={fieldDescriptions?.phone}
-        />
-      </Field>
-    </FieldGroup>
-  )
-}

package/src/blocks/e-commerce/checkout-forms/checkout-form-1-country-field.tsx

@@ -1,51 +0,0 @@
-'use client'
-
-import { Field, FieldLabel } from '../../../ui/field'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '../../../ui/select'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type { CheckoutFieldError } from './checkout-form-types'
-import type { CheckoutForm1CountryOption } from './checkout-form-1'
-
-export interface CheckoutForm1CountryFieldProps {
-  countries: CheckoutForm1CountryOption[]
-  value: string
-  onValueChange: (value: string) => void
-  errors?: CheckoutFieldError[]
-  description?: string
-}
-
-export function CheckoutForm1CountryField({
-  countries,
-  value,
-  onValueChange,
-  errors,
-  description,
-}: CheckoutForm1CountryFieldProps) {
-  return (
-    <Field data-invalid={!!errors?.length}>
-      <FieldLabel htmlFor="checkout-country">Country</FieldLabel>
-      <Select value={value} onValueChange={onValueChange}>
-        <SelectTrigger id="checkout-country" {...checkoutFieldAria('checkout-country', errors)}>
-          <SelectValue placeholder="Select a country" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            {countries.map((country) => (
-              <SelectItem key={country.value} value={country.value}>
-                {country.label}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-      <CheckoutFieldFeedback id="checkout-country" errors={errors} description={description} />
-    </Field>
-  )
-}