@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,216 +0,0 @@
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import type { PaymentMethod } from '@thorprovider/types'
-import { CheckoutForm1PaymentStep } from './checkout-form-1-payment-step'
-import { CheckoutForm1ShippingStep } from './checkout-form-1-shipping-step'
-import { CheckoutForm1OrderSummary } from './checkout-form-1-order-summary'
-import type { CheckoutForm1FormData } from './checkout-form-1'
-
-const formData: CheckoutForm1FormData = {
-  email: '',
-  firstName: '',
-  lastName: '',
-  phone: '',
-  address: '',
-  city: '',
-  state: '',
-  zipCode: '',
-  country: 'US',
-  paymentMethod: 'pp_card',
-  cardNumber: '',
-  expiryDate: '',
-  cvv: '',
-  cardName: '',
-  saveInfo: false,
-  sameAsBilling: true,
-  newsletter: false,
-  promoCode: '',
-}
-
-const cardMethod: PaymentMethod = {
-  id: 'pp_card',
-  name: 'Tarjeta',
-  type: 'card',
-  isEnabled: true,
-  requiresSetup: true,
-  description: 'Paga con tarjeta',
-}
-
-const manualMethod: PaymentMethod = {
-  id: 'pp_system_default',
-  name: 'Pago manual TEST',
-  type: 'cash_on_delivery',
-  isEnabled: true,
-  requiresSetup: false,
-  description: 'Pago de prueba, sin tarjeta',
-}
-
-const noop = () => {}
-
-const formatMoney = (money: { amount: string; currencyCode: string }) =>
-  `${money.currencyCode} ${money.amount}`
-
-describe('CheckoutForm1 payment step — launch flow collects no raw card data', () => {
-  it('renders no card fields by default even for a card-type method', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1PaymentStep
-        formData={formData}
-        onChange={noop}
-        onCardNumberChange={noop}
-        onExpiryChange={noop}
-        paymentMethods={[cardMethod]}
-      />,
-    )
-    expect(html).not.toContain('checkout-card-number')
-    expect(html).not.toContain('checkout-cvv')
-    expect(html).toContain('Paga con tarjeta')
-  })
-
-  it('renders the approved manual TEST provider label only', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1PaymentStep
-        formData={{ ...formData, paymentMethod: 'pp_system_default' }}
-        onChange={noop}
-        onCardNumberChange={noop}
-        onExpiryChange={noop}
-        paymentMethods={[manualMethod]}
-      />,
-    )
-    expect(html).toContain('Pago manual TEST')
-    expect(html).toContain('Pago de prueba, sin tarjeta')
-    expect(html).not.toContain('checkout-card-number')
-  })
-
-  it('renders card fields only in the explicit legacy mode', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1PaymentStep
-        formData={formData}
-        onChange={noop}
-        onCardNumberChange={noop}
-        onExpiryChange={noop}
-        paymentMethods={[cardMethod]}
-        collectCardFields
-      />,
-    )
-    expect(html).toContain('checkout-card-number')
-    expect(html).toContain('checkout-cvv')
-  })
-})
-
-describe('CheckoutForm1 shipping step — controlled eligible options', () => {
-  it('renders only the supplied eligible shipping options with their prices', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1ShippingStep
-        formData={formData}
-        onChange={noop}
-        countries={[{ value: 'US', label: 'Estados Unidos' }]}
-        shippingOptions={[
-          { id: 'sm_std', name: 'Estándar', price: { amount: '5.00', currencyCode: 'USD' } },
-          { id: 'sm_exp', name: 'Exprés', price: { amount: '15.00', currencyCode: 'USD' } },
-        ]}
-        selectedShippingOptionId='sm_exp'
-        onSelectShippingOption={noop}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('Estándar')
-    expect(html).toContain('Exprés')
-    expect(html).toContain('USD 5.00')
-    expect(html).toContain('USD 15.00')
-  })
-
-  it('renders no shipping section when no options are supplied', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1ShippingStep formData={formData} onChange={noop} />,
-    )
-    expect(html).not.toContain('Shipping method')
-  })
-})
-
-describe('CheckoutForm1 order summary — authoritative totals and states', () => {
-  const items = [
-    {
-      id: 'line_1',
-      name: 'Taladro',
-      variant: 'Rojo',
-      quantity: 2,
-      lineTotal: { amount: '90.00', currencyCode: 'USD' },
-    },
-  ]
-
-  it('renders backend-authoritative totals verbatim', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1OrderSummary
-        orderSummary={{
-          items,
-          totals: {
-            subtotal: { amount: '90.00', currencyCode: 'USD' },
-            tax: { amount: '7.20', currencyCode: 'USD' },
-            shipping: { amount: '5.00', currencyCode: 'USD' },
-            total: { amount: '102.20', currencyCode: 'USD' },
-          },
-        }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('USD 90.00')
-    expect(html).toContain('USD 7.20')
-    expect(html).toContain('USD 5.00')
-    expect(html).toContain('USD 102.20')
-    expect(html).not.toContain('Free shipping on orders over')
-  })
-
-  it('renders a controlled pending state without inventing amounts', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1OrderSummary orderSummary={{ items }} totalsState='pending' />,
-    )
-    expect(html).toContain('Actualizando totales')
-    expect(html).not.toContain('Total')
-  })
-
-  it('never renders a fake zero for absent or malformed required totals', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1OrderSummary
-        orderSummary={{
-          items,
-          totals: {
-            subtotal: { amount: '', currencyCode: 'USD' },
-            total: { amount: 'abc', currencyCode: 'USD' },
-          },
-        }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).not.toContain('USD 0')
-    expect(html).toContain('Totales no disponibles')
-  })
-
-  it('preserves a legitimate zero total', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1OrderSummary
-        orderSummary={{
-          items,
-          totals: {
-            subtotal: { amount: '0', currencyCode: 'USD' },
-            total: { amount: '0', currencyCode: 'USD' },
-          },
-        }}
-        formatMoney={formatMoney}
-      />,
-    )
-    expect(html).toContain('USD 0')
-    expect(html).not.toContain('Totales no disponibles')
-  })
-
-  it('renders a controlled error state with a recovery action', () => {
-    const html = renderToStaticMarkup(
-      <CheckoutForm1OrderSummary
-        orderSummary={{ items }}
-        totalsState='error'
-        onRetryTotals={noop}
-      />,
-    )
-    expect(html).toContain('No se pudieron actualizar los totales')
-    expect(html).toContain('Reintentar')
-  })
-})

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

@@ -1,338 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Lock } from 'lucide-react'
-import { Button } from '../../../ui/button'
-import { Card, CardContent } from '../../../ui/card'
-import { cn } from '../../../lib/utils'
-import { CheckoutForm1ContactStep } from './checkout-form-1-contact-step'
-import { CheckoutForm1ShippingStep } from './checkout-form-1-shipping-step'
-import { CheckoutForm1PaymentStep } from './checkout-form-1-payment-step'
-import { CheckoutForm1OrderSummary } from './checkout-form-1-order-summary'
-import { CheckoutForm1Progress } from './checkout-form-1-progress'
-import { formatCardNumber, formatExpiryDate } from './card-formatting'
-import type { Money, PaymentMethod } from '@thorprovider/types'
-import type { CheckoutFieldErrors } from './checkout-form-types'
-
-export interface CheckoutForm1FormData {
-  email: string
-  firstName: string
-  lastName: string
-  phone: string
-  address: string
-  city: string
-  state: string
-  zipCode: string
-  country: string
-  paymentMethod: string
-  cardNumber: string
-  expiryDate: string
-  cvv: string
-  cardName: string
-  saveInfo: boolean
-  sameAsBilling: boolean
-  newsletter: boolean
-  promoCode: string
-}
-
-export type CheckoutForm1FieldErrors = CheckoutFieldErrors<keyof CheckoutForm1FormData>
-
-export type CheckoutForm1FieldDescriptions = Partial<
-  Record<keyof CheckoutForm1FormData, string>
->
-
-export interface CheckoutForm1OrderSummaryItem {
-  id: string | number
-  name: string
-  variant?: string
-  quantity: number
-  /** Canonical backend line total; preferred over `price * quantity`. */
-  lineTotal?: Money
-  /** @deprecated legacy numeric price, used only when `lineTotal` is absent. */
-  price?: number
-  /** Optional; an absent image is omitted rather than serialized as `""`. */
-  image?: string
-}
-
-export interface CheckoutForm1Totals {
-  subtotal: Money
-  discount?: Money
-  tax?: Money
-  shipping?: Money
-  total: Money
-}
-
-export type CheckoutForm1TotalsState = 'idle' | 'pending' | 'error'
-
-export interface CheckoutForm1OrderSummary {
-  items: CheckoutForm1OrderSummaryItem[]
-  /** Backend-authoritative totals; rendered verbatim when present. */
-  totals?: CheckoutForm1Totals
-  /** @deprecated legacy numeric amounts, used only when `totals` is absent. */
-  shipping?: number
-  /** @deprecated */
-  tax?: number
-  /** @deprecated */
-  discount?: number
-  /** @deprecated */
-  promoDiscount?: number
-}
-
-export interface CheckoutForm1CountryOption {
-  value: string
-  label: string
-}
-
-export interface CheckoutForm1ShippingOption {
-  /** Backend shipping method id — the controlled selection identity. */
-  id: string
-  name: string
-  price?: Money
-  description?: string
-  estimatedDays?: string
-}
-
-export type CheckoutForm1ChangeHandler = (
-  field: keyof CheckoutForm1FormData,
-  value: string | boolean
-) => void
-
-const STEP_COPY = [
-  { title: 'Información de contacto', description: 'La usaremos para enviarte novedades de tu pedido.' },
-  { title: 'Dirección de envío', description: 'Enviaremos tu pedido a esta dirección.' },
-  { title: 'Datos de pago', description: 'Pago seguro para tu pedido.' },
-] as const
-
-export interface CheckoutForm1Props {
-  title?: string
-  description?: string
-  orderSummary?: CheckoutForm1OrderSummary
-  /** Controlled state of the totals fetch/mutation. */
-  totalsState?: CheckoutForm1TotalsState
-  totalsErrorLabel?: string
-  retryLabel?: string
-  onRetryTotals?: () => void
-  countries?: CheckoutForm1CountryOption[]
-  /** Eligible shipping options for the cart's region/address. */
-  shippingOptions?: CheckoutForm1ShippingOption[]
-  /** Controlled selection of a shipping option id. */
-  selectedShippingOptionId?: string
-  onSelectShippingOption?: (id: string) => void
-  paymentMethods?: PaymentMethod[]
-  noPaymentMethodsLabel?: string
-  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
-  formatMoney?: (money: Money) => string
-  /**
-   * Raw card fields are legacy-only and never collected in the launch flow.
-   * Defaults to `false`: the curated surface renders no card inputs.
-   */
-  collectCardFields?: boolean
-  onApplyPromo?: (code: string) => void
-  promoPending?: boolean
-  promoApplyLabel?: string
-  promoPlaceholder?: string
-  /** Optional trust copy; rendered only when supplied (never fabricated). */
-  trustNotes?: string[]
-  backLabel?: string
-  completeOrderLabel?: string
-  processingLabel?: string
-  continueLabel?: string
-  values: CheckoutForm1FormData
-  onChange: CheckoutForm1ChangeHandler
-  fieldErrors?: CheckoutForm1FieldErrors
-  fieldDescriptions?: CheckoutForm1FieldDescriptions
-  validateStep?: (step: number) => boolean
-  onSubmit?: (data: CheckoutForm1FormData) => void
-  /** Disables the submit button while the order is being placed. */
-  submitting?: boolean
-  /** Order-level error surfaced above the footer actions. */
-  submitError?: string
-  /** Optional recovery action for a failed submission. */
-  onRetrySubmit?: () => void
-  submitErrorActionLabel?: string
-}
-
-export default function CheckoutForm1({
-  title,
-  description,
-  orderSummary,
-  totalsState = 'idle',
-  totalsErrorLabel,
-  retryLabel,
-  onRetryTotals,
-  countries,
-  shippingOptions,
-  selectedShippingOptionId,
-  onSelectShippingOption,
-  paymentMethods,
-  noPaymentMethodsLabel,
-  formatMoney,
-  collectCardFields = false,
-  onApplyPromo,
-  promoPending = false,
-  promoApplyLabel,
-  promoPlaceholder,
-  trustNotes,
-  backLabel = 'Atrás',
-  completeOrderLabel = 'Completar pedido',
-  processingLabel = 'Procesando pedido…',
-  continueLabel = 'Continuar',
-  values,
-  onChange,
-  fieldErrors,
-  fieldDescriptions,
-  validateStep,
-  onSubmit,
-  submitting = false,
-  submitError,
-  onRetrySubmit,
-  submitErrorActionLabel = 'Reintentar',
-}: CheckoutForm1Props) {
-  const [step, setStep] = useState(1)
-
-  const handleCardNumberChange = (value: string) => {
-    onChange('cardNumber', formatCardNumber(value))
-  }
-
-  const handleExpiryChange = (value: string) => {
-    onChange('expiryDate', formatExpiryDate(value))
-  }
-
-  const handleContinue = () => {
-    if (validateStep && !validateStep(step)) return
-    setStep((s) => Math.min(STEP_COPY.length, s + 1))
-  }
-
-  const handleSubmit = () => {
-    if (validateStep) {
-      const allValid = Array.from({ length: STEP_COPY.length }, (_, index) => index + 1).every(
-        (currentStep) => validateStep(currentStep)
-      )
-      if (!allValid) return
-    }
-    onSubmit?.(values)
-  }
-
-  const stepCount = STEP_COPY.length
-  const isLastStep = step === stepCount
-
-  return (
-    <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
-      {(title || description) && (
-        <header className="mb-8 text-center">
-          {title && <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">{title}</h1>}
-          {description && <p className="mt-2 text-muted-foreground">{description}</p>}
-        </header>
-      )}
-
-      <CheckoutForm1Progress step={step} />
-
-      <div className="mt-8 grid gap-6 lg:grid-cols-3">
-        <Card className={cn('lg:col-span-2', !orderSummary && 'lg:col-span-3')}>
-          <CardContent className="p-6">
-            <div className="mb-6">
-              <h2 className="text-lg font-semibold">{STEP_COPY[step - 1].title}</h2>
-              <p className="text-sm text-muted-foreground">{STEP_COPY[step - 1].description}</p>
-            </div>
-
-            {step === 1 && (
-              <CheckoutForm1ContactStep
-                formData={values}
-                onChange={onChange}
-                fieldErrors={fieldErrors}
-                fieldDescriptions={fieldDescriptions}
-              />
-            )}
-            {step === 2 && (
-              <CheckoutForm1ShippingStep
-                formData={values}
-                onChange={onChange}
-                countries={countries}
-                shippingOptions={shippingOptions}
-                selectedShippingOptionId={selectedShippingOptionId}
-                onSelectShippingOption={onSelectShippingOption}
-                formatMoney={formatMoney}
-                fieldErrors={fieldErrors}
-                fieldDescriptions={fieldDescriptions}
-              />
-            )}
-            {step === 3 && (
-              <CheckoutForm1PaymentStep
-                formData={values}
-                onChange={onChange}
-                onCardNumberChange={handleCardNumberChange}
-                onExpiryChange={handleExpiryChange}
-                paymentMethods={paymentMethods}
-                noPaymentMethodsLabel={noPaymentMethodsLabel}
-                collectCardFields={collectCardFields}
-                fieldErrors={fieldErrors}
-                fieldDescriptions={fieldDescriptions}
-              />
-            )}
-
-            {submitError && (
-              <div
-                role="alert"
-                className="mt-6 flex flex-wrap items-center justify-between gap-3 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"
-              >
-                <span>{submitError}</span>
-                {onRetrySubmit ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={onRetrySubmit}
-                    disabled={submitting}
-                  >
-                    {submitErrorActionLabel}
-                  </Button>
-                ) : null}
-              </div>
-            )}
-
-            <div className="mt-6 flex items-center justify-between gap-4">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setStep((s) => Math.max(1, s - 1))}
-                disabled={step === 1 || submitting}
-              >
-                {backLabel}
-              </Button>
-              {isLastStep ? (
-                <Button type="button" onClick={handleSubmit} disabled={submitting}>
-                  <Lock className="size-4" />
-                  {submitting ? processingLabel : completeOrderLabel}
-                </Button>
-              ) : (
-                <Button type="button" onClick={handleContinue} disabled={submitting}>
-                  {continueLabel}
-                </Button>
-              )}
-            </div>
-          </CardContent>
-        </Card>
-
-        {orderSummary && (
-          <div className="lg:col-span-1">
-            <CheckoutForm1OrderSummary
-              orderSummary={orderSummary}
-              totalsState={totalsState}
-              totalsErrorLabel={totalsErrorLabel}
-              retryLabel={retryLabel}
-              onRetryTotals={onRetryTotals}
-              promoCode={values.promoCode}
-              onPromoCodeChange={(value) => onChange('promoCode', value)}
-              onApplyPromo={onApplyPromo}
-              promoPending={promoPending}
-              promoApplyLabel={promoApplyLabel}
-              promoPlaceholder={promoPlaceholder}
-              trustNotes={trustNotes}
-              formatMoney={formatMoney}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

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

@@ -1,130 +0,0 @@
-import { Truck } from 'lucide-react'
-
-import { Badge } from '../../../ui/badge'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Separator } from '../../../ui/separator'
-import type { CheckoutForm2Item } from './checkout-form-2'
-
-interface CheckoutForm2OrderSummaryProps {
-  items: CheckoutForm2Item[]
-  subtotal: number
-  shipping: number
-  tax: number
-  total: number
-  currencySymbol: string
-  orderSummaryLabel: string
-  subtotalLabel: string
-  shippingLabel: string
-  freeShippingLabel: string
-  taxLabel: string
-  totalLabel: string
-  freeShippingNoteLabel: string
-  estimatedDeliveryLabel: string
-  freeShippingThreshold: number
-}
-
-export function CheckoutForm2OrderSummary({
-  items,
-  subtotal,
-  shipping,
-  tax,
-  total,
-  currencySymbol,
-  orderSummaryLabel,
-  subtotalLabel,
-  shippingLabel,
-  freeShippingLabel,
-  taxLabel,
-  totalLabel,
-  freeShippingNoteLabel,
-  estimatedDeliveryLabel,
-  freeShippingThreshold,
-}: CheckoutForm2OrderSummaryProps) {
-  return (
-    <Card className='sticky top-6'>
-      <CardHeader>
-        <CardTitle>{orderSummaryLabel}</CardTitle>
-      </CardHeader>
-      <CardContent className='flex flex-col gap-4'>
-        <div className='flex flex-col gap-3'>
-          {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={48}
-                  height={48}
-                  className='size-12 rounded-md object-cover'
-                />
-                <Badge
-                  variant='secondary'
-                  className='absolute -top-2 -end-2 size-5 rounded-full p-0 text-xs font-semibold'
-                >
-                  {item.quantity}
-                </Badge>
-              </div>
-              <div className='flex-1'>
-                <h4 className='text-sm font-medium'>{item.name}</h4>
-                <p className='text-muted-foreground text-sm'>
-                  {currencySymbol}
-                  {item.price} × {item.quantity}
-                </p>
-              </div>
-              <div className='text-sm font-medium'>
-                {currencySymbol}
-                {(item.price * item.quantity).toFixed(2)}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <Separator />
-
-        <div className='flex flex-col gap-2 text-sm'>
-          <div className='flex justify-between'>
-            <span>{subtotalLabel}</span>
-            <span>
-              {currencySymbol}
-              {subtotal.toFixed(2)}
-            </span>
-          </div>
-          <div className='flex justify-between'>
-            <span>{shippingLabel}</span>
-            <span>{shipping === 0 ? freeShippingLabel : `${currencySymbol}${shipping.toFixed(2)}`}</span>
-          </div>
-          <div className='flex justify-between'>
-            <span>{taxLabel}</span>
-            <span>
-              {currencySymbol}
-              {tax.toFixed(2)}
-            </span>
-          </div>
-        </div>
-
-        <Separator />
-
-        <div className='flex justify-between text-lg font-semibold'>
-          <span>{totalLabel}</span>
-          <span>
-            {currencySymbol}
-            {total.toFixed(2)}
-          </span>
-        </div>
-
-        {shipping === 0 ? (
-          <div className='bg-muted/50 rounded-lg p-3 text-sm'>
-            <div className='flex items-center gap-2 font-medium'>
-              <Truck className='size-4' aria-hidden='true' />
-              <span>
-                {freeShippingNoteLabel} {currencySymbol}
-                {freeShippingThreshold}
-              </span>
-            </div>
-            <p className='text-muted-foreground mt-1'>{estimatedDeliveryLabel}</p>
-          </div>
-        ) : null}
-      </CardContent>
-    </Card>
-  )
-}