@thorprovider/blocks 0.1.3 → 2.0.0

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>
-  )
-}

package/src/blocks/e-commerce/checkout-forms/checkout-form-2-payment-card.tsx

@@ -1,175 +0,0 @@
-import { CreditCard, Shield } from 'lucide-react'
-
-import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
-import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type { PaymentMethod } from '@thorprovider/types'
-import type {
-  CheckoutForm2Data,
-  CheckoutForm2FieldDescriptions,
-  CheckoutForm2FieldErrors,
-} from './checkout-form-2'
-
-interface CheckoutForm2PaymentCardProps {
-  paymentMethod: string
-  onPaymentMethodChange: (method: string) => void
-  data: CheckoutForm2Data
-  onChange: (field: keyof CheckoutForm2Data, value: string | boolean) => void
-  onCardNumberChange: (value: string) => void
-  onExpiryChange: (value: string) => void
-  paymentMethods?: PaymentMethod[]
-  noMethodsLabel?: string
-  paymentLabel: string
-  cardNumberLabel: string
-  expiryLabel: string
-  cvvLabel: string
-  cardNameLabel: string
-  encryptedNoteLabel: string
-  fieldErrors?: CheckoutForm2FieldErrors
-  fieldDescriptions?: CheckoutForm2FieldDescriptions
-}
-
-export function CheckoutForm2PaymentCard({
-  paymentMethod,
-  onPaymentMethodChange,
-  data,
-  onChange,
-  onCardNumberChange,
-  onExpiryChange,
-  paymentMethods = [],
-  noMethodsLabel = 'No hay métodos de pago disponibles para esta región.',
-  paymentLabel,
-  cardNumberLabel,
-  expiryLabel,
-  cvvLabel,
-  cardNameLabel,
-  encryptedNoteLabel,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutForm2PaymentCardProps) {
-  const selectedMethod = paymentMethods.find(method => method.id === paymentMethod)
-  const isCard = selectedMethod?.type === 'card'
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className='flex items-center gap-2'>
-          <CreditCard className='size-5' aria-hidden='true' />
-          {paymentLabel}
-        </CardTitle>
-      </CardHeader>
-      <CardContent className='flex flex-col gap-4'>
-        {paymentMethods.length === 0 ? (
-          <p className='text-muted-foreground text-sm'>{noMethodsLabel}</p>
-        ) : (
-          <RadioGroup value={paymentMethod} onValueChange={value => value && onPaymentMethodChange(value)}>
-            {paymentMethods.map(method => (
-              <Field key={method.id} orientation='horizontal'>
-                <RadioGroupItem value={method.id} id={method.id} />
-                <FieldLabel htmlFor={method.id} className='flex flex-col gap-0.5 font-normal'>
-                  <span className='flex items-center gap-2'>
-                    <CreditCard className='size-4' aria-hidden='true' />
-                    {method.name}
-                  </span>
-                  {method.description ? (
-                    <span className='text-muted-foreground text-xs'>{method.description}</span>
-                  ) : null}
-                </FieldLabel>
-              </Field>
-            ))}
-          </RadioGroup>
-        )}
-
-        {selectedMethod && !isCard ? (
-          <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 ? (
-          <div className='border-muted border-l-2 ps-6'>
-            <FieldGroup>
-              <Field data-invalid={!!fieldErrors?.cardNumber?.length}>
-                <FieldLabel htmlFor='cardNumber'>{cardNumberLabel}</FieldLabel>
-                <Input
-                  id='cardNumber'
-                  placeholder='1234 5678 9012 3456'
-                  inputMode='numeric'
-                  value={data.cardNumber}
-                  onChange={event => onCardNumberChange(event.target.value)}
-                  {...checkoutFieldAria('cardNumber', fieldErrors?.cardNumber)}
-                  className='h-9 font-mono'
-                />
-                <CheckoutFieldFeedback
-                  id='cardNumber'
-                  errors={fieldErrors?.cardNumber}
-                  description={fieldDescriptions?.cardNumber}
-                />
-              </Field>
-              <div className='grid gap-4 sm:grid-cols-2 md:grid-cols-3'>
-                <Field data-invalid={!!fieldErrors?.expiryDate?.length} className='sm:col-span-2'>
-                  <FieldLabel htmlFor='expiryDate'>{expiryLabel}</FieldLabel>
-                  <Input
-                    id='expiryDate'
-                    placeholder='MM/AA'
-                    inputMode='numeric'
-                    value={data.expiryDate}
-                    onChange={event => onExpiryChange(event.target.value)}
-                    {...checkoutFieldAria('expiryDate', fieldErrors?.expiryDate)}
-                    className='h-9 font-mono'
-                  />
-                  <CheckoutFieldFeedback
-                    id='expiryDate'
-                    errors={fieldErrors?.expiryDate}
-                    description={fieldDescriptions?.expiryDate}
-                  />
-                </Field>
-                <Field data-invalid={!!fieldErrors?.cvv?.length}>
-                  <FieldLabel htmlFor='cvv'>{cvvLabel}</FieldLabel>
-                  <Input
-                    id='cvv'
-                    placeholder='123'
-                    inputMode='numeric'
-                    value={data.cvv}
-                    onChange={event => onChange('cvv', event.target.value)}
-                    {...checkoutFieldAria('cvv', fieldErrors?.cvv)}
-                    className='h-9 font-mono'
-                  />
-                  <CheckoutFieldFeedback
-                    id='cvv'
-                    errors={fieldErrors?.cvv}
-                    description={fieldDescriptions?.cvv}
-                  />
-                </Field>
-              </div>
-              <Field data-invalid={!!fieldErrors?.cardName?.length}>
-                <FieldLabel htmlFor='cardName'>{cardNameLabel}</FieldLabel>
-                <Input
-                  id='cardName'
-                  placeholder='Juan Pérez'
-                  value={data.cardName}
-                  onChange={event => onChange('cardName', event.target.value)}
-                  {...checkoutFieldAria('cardName', fieldErrors?.cardName)}
-                  className='h-9'
-                />
-                <CheckoutFieldFeedback
-                  id='cardName'
-                  errors={fieldErrors?.cardName}
-                  description={fieldDescriptions?.cardName}
-                />
-              </Field>
-            </FieldGroup>
-          </div>
-        ) : null}
-
-        <div className='bg-muted/50 flex items-center gap-2 rounded-lg p-3 text-sm'>
-          <Shield className='size-4 text-success' aria-hidden='true' />
-          <span>{encryptedNoteLabel}</span>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}