@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,235 @@
+'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 { 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
+  price: number
+  quantity: number
+  image: string
+}
+
+export interface CheckoutForm1OrderSummary {
+  items: CheckoutForm1OrderSummaryItem[]
+  shipping: number
+  tax: number
+  discount?: number
+  promoDiscount?: number
+}
+
+export interface CheckoutForm1CountryOption {
+  value: string
+  label: 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
+  countries?: CheckoutForm1CountryOption[]
+  paymentMethods?: PaymentMethod[]
+  noPaymentMethodsLabel?: string
+  backLabel?: string
+  completeOrderLabel?: 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
+}
+
+export default function CheckoutForm1({
+  title,
+  description,
+  orderSummary,
+  countries,
+  paymentMethods,
+  noPaymentMethodsLabel,
+  backLabel = 'Atrás',
+  completeOrderLabel = 'Completar pedido',
+  continueLabel = 'Continuar',
+  values,
+  onChange,
+  fieldErrors,
+  fieldDescriptions,
+  validateStep,
+  onSubmit,
+  submitting = false,
+  submitError,
+}: 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}
+                fieldErrors={fieldErrors}
+                fieldDescriptions={fieldDescriptions}
+              />
+            )}
+            {step === 3 && (
+              <CheckoutForm1PaymentStep
+                formData={values}
+                onChange={onChange}
+                onCardNumberChange={handleCardNumberChange}
+                onExpiryChange={handleExpiryChange}
+                paymentMethods={paymentMethods}
+                noPaymentMethodsLabel={noPaymentMethodsLabel}
+                fieldErrors={fieldErrors}
+                fieldDescriptions={fieldDescriptions}
+              />
+            )}
+
+            {submitError && (
+              <div
+                role="alert"
+                className="mt-6 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"
+              >
+                {submitError}
+              </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 ? 'Procesando pedido…' : completeOrderLabel}
+                </Button>
+              ) : (
+                <Button type="button" onClick={handleContinue} disabled={submitting}>
+                  {continueLabel}
+                </Button>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {orderSummary && (
+          <div className="lg:col-span-1">
+            <CheckoutForm1OrderSummary orderSummary={orderSummary} />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

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

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

@@ -0,0 +1,175 @@
+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>
+  )
+}