@thorprovider/blocks 2.0.0 → 3.0.1

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-contact-step.tsx

@@ -1,149 +0,0 @@
-'use client'
-
-import { Field, FieldContent, FieldGroup, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { CheckboxCheck } from './checkbox-check'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type {
-  CheckoutChangeHandler,
-  CheckoutFieldDescriptions,
-  CheckoutValuesFieldErrors,
-  CheckoutLabels,
-  CheckoutValues,
-} from './checkout'
-
-export interface CheckoutContactStepProps {
-  values: CheckoutValues
-  onChange: CheckoutChangeHandler
-  labels: CheckoutLabels
-  /** Rendered only when the host supplies the corresponding label. */
-  showSaveInfo: boolean
-  showNewsletter: boolean
-  fieldErrors?: CheckoutValuesFieldErrors
-  fieldDescriptions?: CheckoutFieldDescriptions
-}
-
-export function CheckoutContactStep({
-  values,
-  onChange,
-  labels,
-  showSaveInfo,
-  showNewsletter,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutContactStepProps) {
-  return (
-    <FieldGroup className="grid grid-cols-1 gap-4">
-      <Field data-invalid={!!fieldErrors?.email?.length}>
-        <FieldLabel htmlFor="checkout-email">{labels.emailLabel}</FieldLabel>
-        <Input
-          id="checkout-email"
-          type="email"
-          inputMode="email"
-          autoComplete="email"
-          value={values.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 grid-cols-1 gap-4 md:grid-cols-2">
-        <Field data-invalid={!!fieldErrors?.firstName?.length}>
-          <FieldLabel htmlFor="checkout-first-name">{labels.firstNameLabel}</FieldLabel>
-          <Input
-            id="checkout-first-name"
-            autoComplete="given-name"
-            value={values.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">{labels.lastNameLabel}</FieldLabel>
-          <Input
-            id="checkout-last-name"
-            autoComplete="family-name"
-            value={values.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">{labels.phoneLabel}</FieldLabel>
-        <Input
-          id="checkout-phone"
-          type="tel"
-          inputMode="tel"
-          autoComplete="tel"
-          value={values.phone}
-          onChange={(e) => onChange('phone', e.target.value)}
-          {...checkoutFieldAria('checkout-phone', fieldErrors?.phone)}
-        />
-        <CheckoutFieldFeedback
-          id="checkout-phone"
-          errors={fieldErrors?.phone}
-          description={fieldDescriptions?.phone}
-        />
-      </Field>
-
-      {showSaveInfo ? (
-        <Field orientation="horizontal" className="gap-2" data-invalid={!!fieldErrors?.saveInfo?.length}>
-          <CheckboxCheck
-            id="checkout-save-info"
-            checked={values.saveInfo}
-            onCheckedChange={(checked) => onChange('saveInfo', checked === true)}
-            {...checkoutFieldAria('checkout-save-info', fieldErrors?.saveInfo)}
-          />
-          <FieldContent>
-            <FieldLabel htmlFor="checkout-save-info" className="text-sm font-normal">
-              {labels.saveInfoLabel}
-            </FieldLabel>
-            <CheckoutFieldFeedback
-              id="checkout-save-info"
-              errors={fieldErrors?.saveInfo}
-              description={fieldDescriptions?.saveInfo}
-            />
-          </FieldContent>
-        </Field>
-      ) : null}
-
-      {showNewsletter ? (
-        <Field orientation="horizontal" className="gap-2" data-invalid={!!fieldErrors?.newsletter?.length}>
-          <CheckboxCheck
-            id="checkout-newsletter"
-            checked={values.newsletter}
-            onCheckedChange={(checked) => onChange('newsletter', checked === true)}
-            {...checkoutFieldAria('checkout-newsletter', fieldErrors?.newsletter)}
-          />
-          <FieldContent>
-            <FieldLabel htmlFor="checkout-newsletter" className="text-sm font-normal">
-              {labels.newsletterLabel}
-            </FieldLabel>
-            <CheckoutFieldFeedback
-              id="checkout-newsletter"
-              errors={fieldErrors?.newsletter}
-              description={fieldDescriptions?.newsletter}
-            />
-          </FieldContent>
-        </Field>
-      ) : null}
-    </FieldGroup>
-  )
-}

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

@@ -1,53 +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 { CheckoutCountryOption, CheckoutLabels } from './checkout'
-
-export interface CheckoutCountryFieldProps {
-  labels: CheckoutLabels
-  countries: CheckoutCountryOption[]
-  value: string
-  onValueChange: (value: string) => void
-  errors?: CheckoutFieldError[]
-  description?: string
-}
-
-export function CheckoutCountryField({
-  labels,
-  countries,
-  value,
-  onValueChange,
-  errors,
-  description,
-}: CheckoutCountryFieldProps) {
-  return (
-    <Field data-invalid={!!errors?.length}>
-      <FieldLabel htmlFor="checkout-country">{labels.countryLabel}</FieldLabel>
-      <Select value={value} onValueChange={onValueChange}>
-        <SelectTrigger id="checkout-country" {...checkoutFieldAria('checkout-country', errors)}>
-          <SelectValue placeholder={labels.countryPlaceholder} />
-        </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>
-  )
-}

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-types.ts

@@ -1,7 +0,0 @@
-export interface CheckoutFieldError {
-  message?: string
-}
-
-export type CheckoutFieldErrors<T extends string> = Partial<
-  Record<T, CheckoutFieldError[]>
->