@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,392 @@
+'use client'
+
+import { useState } from 'react'
+import { ChevronLeft, ChevronRight, Lock } from 'lucide-react'
+
+import type { PaymentMethod } from '@thorprovider/types'
+
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+
+import { CheckoutForm3InformationStep } from './checkout-form-3-information-step'
+import { CheckoutForm3OrderSummary } from './checkout-form-3-order-summary'
+import { CheckoutForm3PaymentStep } from './checkout-form-3-payment-step'
+import { CheckoutForm3Progress, CHECKOUT_FORM_3_STEP_ICONS } from './checkout-form-3-progress'
+import { CheckoutForm3ReviewStep } from './checkout-form-3-review-step'
+import { CheckoutForm3ShippingStep } from './checkout-form-3-shipping-step'
+
+export interface CheckoutForm3CartItem {
+  id: number
+  name: string
+  price: number
+  quantity: number
+  image: string
+}
+
+export interface CheckoutForm3ShippingMethod {
+  id: string
+  name: string
+  description: string
+  cost: number
+}
+
+export interface CheckoutForm3CountryOption {
+  value: string
+  label: string
+}
+
+export interface CheckoutForm3Step {
+  id: number
+  name: string
+}
+
+export interface CheckoutForm3FormData {
+  email: string
+  firstName: string
+  lastName: string
+  phone: string
+  address: string
+  apartment: string
+  city: string
+  state: string
+  zipCode: string
+  country: string
+  shippingMethod: string
+  paymentMethod: string
+  cardNumber: string
+  expiryDate: string
+  cvv: string
+  cardName: string
+  billingAddress: string
+  newsletter: boolean
+  saveInfo: boolean
+}
+
+export type CheckoutForm3ChangeHandler = (
+  field: keyof CheckoutForm3FormData,
+  value: string | boolean
+) => void
+
+export interface CheckoutForm3Props {
+  cartItems: CheckoutForm3CartItem[]
+  shippingMethods: CheckoutForm3ShippingMethod[]
+  paymentMethods?: PaymentMethod[]
+  taxRate?: number
+  countryOptions?: CheckoutForm3CountryOption[]
+  steps?: CheckoutForm3Step[]
+  currencySymbol?: string
+  titleLabel?: string
+  subtitleLabel?: string
+  backLabel?: string
+  continueLabel?: string
+  placeOrderLabel?: string
+  shippingAddressLabel?: string
+  shippingMethodLabel?: string
+  paymentLabel?: string
+  noMethodsLabel?: string
+  securePaymentLabel?: string
+  emailLabel?: string
+  firstNameLabel?: string
+  lastNameLabel?: string
+  phoneLabel?: string
+  addressLabel?: string
+  apartmentLabel?: string
+  cityLabel?: string
+  stateLabel?: string
+  zipCodeLabel?: string
+  countryLabel?: string
+  cardNumberLabel?: string
+  expiryLabel?: string
+  cvvLabel?: string
+  cardNameLabel?: string
+  newsletterLabel?: string
+  saveInfoLabel?: string
+  orderSummaryLabel?: string
+  subtotalLabel?: string
+  shippingLabel?: string
+  taxLabel?: string
+  totalLabel?: string
+  freeLabel?: string
+  orderReviewLabel?: string
+  contactReviewLabel?: string
+  shipToReviewLabel?: string
+  paymentReviewLabel?: string
+  shippingReviewLabel?: string
+  onComplete?: (data: CheckoutForm3FormData) => void
+  onNextStep?: (step: number) => void
+  onPreviousStep?: (step: number) => void
+  onFieldChange?: CheckoutForm3ChangeHandler
+}
+
+const DEFAULT_COUNTRY_OPTIONS: CheckoutForm3CountryOption[] = [
+  { value: 'US', label: 'Estados Unidos' },
+  { value: 'CA', label: 'Canadá' },
+  { value: 'UK', label: 'Reino Unido' },
+  { value: 'AU', label: 'Australia' },
+]
+
+const DEFAULT_STEPS: CheckoutForm3Step[] = [
+  { id: 1, name: 'Información' },
+  { id: 2, name: 'Envío' },
+  { id: 3, name: 'Pago' },
+  { id: 4, name: 'Revisión' },
+]
+
+export default function CheckoutForm3({
+  cartItems,
+  shippingMethods,
+  paymentMethods = [],
+  taxRate = 0,
+  countryOptions = DEFAULT_COUNTRY_OPTIONS,
+  steps = DEFAULT_STEPS,
+  currencySymbol = '$',
+  titleLabel = 'Checkout seguro',
+  subtitleLabel,
+  backLabel = 'Anterior',
+  continueLabel = 'Continuar',
+  placeOrderLabel = 'Realizar pedido',
+  shippingAddressLabel = 'Dirección de envío',
+  shippingMethodLabel = 'Método de envío',
+  paymentLabel = 'Método de pago',
+  noMethodsLabel = 'No hay métodos de pago disponibles para esta región.',
+  securePaymentLabel = 'Tu información de pago está cifrada y es segura',
+  emailLabel = 'Correo electrónico',
+  firstNameLabel = 'Nombre',
+  lastNameLabel = 'Apellidos',
+  phoneLabel = 'Teléfono',
+  addressLabel = 'Dirección',
+  apartmentLabel = 'Apartamento, suite, etc.',
+  cityLabel = 'Ciudad',
+  stateLabel = 'Estado/Provincia',
+  zipCodeLabel = 'Código postal',
+  countryLabel = 'País',
+  cardNumberLabel = 'Número de tarjeta',
+  expiryLabel = 'Fecha de vencimiento',
+  cvvLabel = 'CVV',
+  cardNameLabel = 'Nombre en la tarjeta',
+  newsletterLabel = 'Quiero recibir novedades y ofertas',
+  saveInfoLabel = 'Guardar esta información para la próxima vez',
+  orderSummaryLabel = 'Resumen del pedido',
+  subtotalLabel = 'Subtotal',
+  shippingLabel = 'Envío',
+  taxLabel = 'Impuestos',
+  totalLabel = 'Total',
+  freeLabel = 'Gratis',
+  orderReviewLabel = 'Revisión del pedido',
+  contactReviewLabel = 'Contacto',
+  shipToReviewLabel = 'Enviar a',
+  paymentReviewLabel = 'Pago',
+  shippingReviewLabel = 'Envío',
+  onComplete,
+  onNextStep,
+  onPreviousStep,
+  onFieldChange,
+}: CheckoutForm3Props) {
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState<CheckoutForm3FormData>(() => ({
+    email: '',
+    firstName: '',
+    lastName: '',
+    phone: '',
+    address: '',
+    apartment: '',
+    city: '',
+    state: '',
+    zipCode: '',
+    country: countryOptions[0]?.value ?? '',
+    shippingMethod: shippingMethods[0]?.id ?? '',
+    paymentMethod: paymentMethods[0]?.id ?? '',
+    cardNumber: '',
+    expiryDate: '',
+    cvv: '',
+    cardName: '',
+    billingAddress: 'same',
+    newsletter: false,
+    saveInfo: false,
+  }))
+
+  const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const shippingCosts = Object.fromEntries(
+    shippingMethods.map(method => [method.id, method.cost]),
+  ) as Record<string, number>
+  const shipping = shippingCosts[formData.shippingMethod] ?? 0
+  const tax = subtotal * taxRate
+  const total = subtotal + shipping + tax
+
+  const handleInputChange: CheckoutForm3ChangeHandler = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
+    onFieldChange?.(field, value)
+  }
+
+  const handleNextStep = () => {
+    const next = Math.min(currentStep + 1, steps.length)
+    setCurrentStep(next)
+    onNextStep?.(next)
+  }
+
+  const handlePreviousStep = () => {
+    const next = Math.max(currentStep - 1, 1)
+    setCurrentStep(next)
+    onPreviousStep?.(next)
+  }
+
+  /** Continue stays disabled until the fields this step is responsible for are filled in. */
+  const isStepComplete = (stepNumber: number) => {
+    if (stepNumber < currentStep) return true
+    if (stepNumber === 1) return Boolean(formData.email && formData.firstName && formData.lastName)
+    if (stepNumber === 2) return Boolean(formData.address && formData.city && formData.zipCode)
+    if (stepNumber === 3) {
+      const selectedMethod = paymentMethods.find(method => method.id === formData.paymentMethod)
+      if (!formData.paymentMethod) return false
+      return selectedMethod?.type === 'card' ? Boolean(formData.cardNumber) : true
+    }
+    return false
+  }
+
+  const CurrentStepIcon = CHECKOUT_FORM_3_STEP_ICONS[currentStep - 1]
+
+  return (
+    <section className='py-8'>
+      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='mb-8'>
+          <h1 className='text-3xl font-bold tracking-tight text-balance'>{titleLabel}</h1>
+          <p className='text-muted-foreground mt-2'>
+            {subtitleLabel ?? `Completa tu compra en ${steps.length} sencillos pasos`}
+          </p>
+        </div>
+
+        <div className='grid gap-8 lg:grid-cols-3'>
+          <div className='lg:col-span-2'>
+            <CheckoutForm3Progress
+              steps={steps}
+              currentStep={currentStep}
+              isStepComplete={isStepComplete}
+            />
+
+            <Card>
+              <CardHeader>
+                <CardTitle className='flex items-center gap-2'>
+                  {CurrentStepIcon ? <CurrentStepIcon className='size-5' aria-hidden='true' /> : null}
+                  {steps[currentStep - 1].name}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className='flex flex-col gap-6'>
+                {currentStep === 1 ? (
+                  <CheckoutForm3InformationStep
+                    formData={formData}
+                    onChange={handleInputChange}
+                    emailLabel={emailLabel}
+                    firstNameLabel={firstNameLabel}
+                    lastNameLabel={lastNameLabel}
+                    phoneLabel={phoneLabel}
+                    newsletterLabel={newsletterLabel}
+                  />
+                ) : null}
+
+                {currentStep === 2 ? (
+                  <CheckoutForm3ShippingStep
+                    formData={formData}
+                    onChange={handleInputChange}
+                    countryOptions={countryOptions}
+                    shippingMethods={shippingMethods}
+                    shippingAddressLabel={shippingAddressLabel}
+                    shippingMethodLabel={shippingMethodLabel}
+                    addressLabel={addressLabel}
+                    apartmentLabel={apartmentLabel}
+                    cityLabel={cityLabel}
+                    stateLabel={stateLabel}
+                    zipCodeLabel={zipCodeLabel}
+                    countryLabel={countryLabel}
+                    freeLabel={freeLabel}
+                    currencySymbol={currencySymbol}
+                  />
+                ) : null}
+
+                {currentStep === 3 ? (
+                  <CheckoutForm3PaymentStep
+                    formData={formData}
+                    onChange={handleInputChange}
+                    paymentMethods={paymentMethods}
+                    paymentLabel={paymentLabel}
+                    noMethodsLabel={noMethodsLabel}
+                    cardNumberLabel={cardNumberLabel}
+                    expiryLabel={expiryLabel}
+                    cvvLabel={cvvLabel}
+                    cardNameLabel={cardNameLabel}
+                    securePaymentLabel={securePaymentLabel}
+                  />
+                ) : null}
+
+                {currentStep === 4 ? (
+                  <CheckoutForm3ReviewStep
+                    formData={formData}
+                    onChange={handleInputChange}
+                    shippingMethods={shippingMethods}
+                    paymentMethods={paymentMethods}
+                    orderReviewLabel={orderReviewLabel}
+                    contactReviewLabel={contactReviewLabel}
+                    shipToReviewLabel={shipToReviewLabel}
+                    paymentReviewLabel={paymentReviewLabel}
+                    shippingReviewLabel={shippingReviewLabel}
+                    saveInfoLabel={saveInfoLabel}
+                  />
+                ) : null}
+
+                <div className='flex justify-between pt-6'>
+                  <Button
+                    type='button'
+                    variant='outline'
+                    className='h-9 px-4 py-2 cursor-pointer'
+                    onClick={handlePreviousStep}
+                    disabled={currentStep === 1}
+                  >
+                    <ChevronLeft data-icon='inline-start' />
+                    {backLabel}
+                  </Button>
+
+                  {currentStep < steps.length ? (
+                    <Button
+                      type='button'
+                      onClick={handleNextStep}
+                      className='h-9 px-4 py-2 cursor-pointer'
+                      disabled={!isStepComplete(currentStep)}
+                    >
+                      {continueLabel}
+                      <ChevronRight data-icon='inline-end' />
+                    </Button>
+                  ) : (
+                    <Button
+                      type='button'
+                      className='h-9 px-4 py-2 min-w-32 cursor-pointer'
+                      onClick={() => onComplete?.(formData)}
+                    >
+                      <Lock data-icon='inline-start' />
+                      {placeOrderLabel}
+                    </Button>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className='lg:col-span-1'>
+            <CheckoutForm3OrderSummary
+              items={cartItems}
+              subtotal={subtotal}
+              shipping={shipping}
+              tax={tax}
+              total={total}
+              currencySymbol={currencySymbol}
+              orderSummaryLabel={orderSummaryLabel}
+              subtotalLabel={subtotalLabel}
+              shippingLabel={shippingLabel}
+              taxLabel={taxLabel}
+              totalLabel={totalLabel}
+              freeLabel={freeLabel}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/blocks/e-commerce/checkout-forms/checkout-form-types.ts

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

package/src/blocks/e-commerce/navigation/category-icon.test.tsx

@@ -0,0 +1,54 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import {
+  CategoryIcon,
+  categoryIconNameSchema,
+  categoryIconPropsSchema,
+  type CategoryIconName,
+} from './category-icon'
+
+describe('CategoryIcon', () => {
+  it('parses a valid props object', () => {
+    const result = categoryIconPropsSchema.parse({ name: 'wrench' })
+    expect(result.name).toBe('wrench')
+  })
+
+  it('accepts every known icon name', () => {
+    const names = categoryIconNameSchema.options
+    expect(names).toHaveLength(18)
+    for (const name of names) {
+      expect(() => categoryIconPropsSchema.parse({ name })).not.toThrow()
+    }
+  })
+
+  it('rejects an unknown name at the schema boundary', () => {
+    expect(() => categoryIconNameSchema.parse('nope')).toThrow()
+  })
+
+  it('renders an svg with aria-hidden for a known name', () => {
+    const html = renderToStaticMarkup(<CategoryIcon name="wrench" />)
+    expect(html).toContain('<svg')
+    expect(html).toContain('aria-hidden="true"')
+  })
+
+  it('renders null for an unknown name', () => {
+    const html = renderToStaticMarkup(
+      <CategoryIcon name={'not-a-category' as CategoryIconName} />,
+    )
+    expect(html).toBe('')
+  })
+
+  it('renders null when no name is given', () => {
+    const html = renderToStaticMarkup(<CategoryIcon />)
+    expect(html).toBe('')
+  })
+
+  it('merges className', () => {
+    const html = renderToStaticMarkup(
+      <CategoryIcon name="home" className="size-8" />,
+    )
+    expect(html).toContain('size-8')
+    expect(html).not.toContain('size-4')
+  })
+})

package/src/blocks/e-commerce/navigation/category-icon.tsx

@@ -0,0 +1,94 @@
+import {
+  Bolt,
+  Boxes,
+  Car,
+  ChefHat,
+  Droplet,
+  HardHat,
+  Home,
+  Refrigerator,
+  Shield,
+  Sofa,
+  Store,
+  Sun,
+  Tractor,
+  Trees,
+  Utensils,
+  Wind,
+  Wrench,
+  Zap,
+  type LucideIcon,
+} from 'lucide-react'
+import { z } from 'zod'
+
+import { cn } from '../../../lib/utils'
+
+/**
+ * The explicit vocabulary of known category icon names. Kept as a Zod enum so
+ * the union type derives from the schema and never drifts.
+ */
+export const categoryIconNameSchema = z.enum([
+  'wrench',
+  'bolt',
+  'tree',
+  'refrigerator',
+  'wind',
+  'droplet',
+  'zap',
+  'hard-hat',
+  'car',
+  'utensils',
+  'boxes',
+  'sofa',
+  'shield',
+  'sun',
+  'chef-hat',
+  'tractor',
+  'store',
+  'home',
+])
+
+export type CategoryIconName = z.infer<typeof categoryIconNameSchema>
+
+export const categoryIconPropsSchema = z.object({
+  name: categoryIconNameSchema.optional(),
+  className: z.string().optional(),
+})
+
+export type CategoryIconProps = z.infer<typeof categoryIconPropsSchema>
+
+const iconMap: Record<CategoryIconName, LucideIcon> = {
+  wrench: Wrench,
+  bolt: Bolt,
+  tree: Trees,
+  refrigerator: Refrigerator,
+  wind: Wind,
+  droplet: Droplet,
+  zap: Zap,
+  'hard-hat': HardHat,
+  car: Car,
+  utensils: Utensils,
+  boxes: Boxes,
+  sofa: Sofa,
+  shield: Shield,
+  sun: Sun,
+  'chef-hat': ChefHat,
+  tractor: Tractor,
+  store: Store,
+  home: Home,
+}
+
+/**
+ * Category icon by name: maps a string icon-name to a Lucide icon.
+ *
+ * Framework-agnostic and prop-driven. Unknown or absent names render null
+ * (graceful fallback); the schema validates names at the boundary, so a
+ * non-vocabulary value fails `parse` but the component still renders null
+ * instead of throwing.
+ */
+export function CategoryIcon({ name, className }: CategoryIconProps) {
+  if (!name) return null
+  const Icon = iconMap[name]
+  if (!Icon) return null
+  return <Icon className={cn('size-4', className)} aria-hidden="true" />
+}

package/src/blocks/e-commerce/navigation/mega-menu.test.tsx

@@ -0,0 +1,139 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import type { CollectionItem, MenuItem } from '../../../lib/types/menu'
+import { MegaMenu, megaMenuPropsSchema } from './mega-menu'
+
+const categories: MenuItem[] = [
+  {
+    id: 'hogar',
+    label: 'Hogar',
+    icon: 'home',
+    href: '/hogar',
+    children: [
+      {
+        id: 'hogar-decoracion',
+        label: 'Decoración',
+        href: '/hogar/decoracion',
+        children: [
+          {
+            id: 'hogar-decoracion-cortinas',
+            label: 'Cortinas',
+            href: '/hogar/decoracion/cortinas',
+          },
+        ],
+      },
+    ],
+  },
+  { id: 'cocina', label: 'Cocina', icon: 'utensils', href: '/cocina' },
+]
+
+const collections: CollectionItem[] = [
+  {
+    id: 'ofertas',
+    label: 'Ofertas',
+    description: 'Precios bajos',
+    image: '/img/ofertas.jpg',
+    href: '/colecciones/ofertas',
+  },
+]
+
+describe('MegaMenu', () => {
+  it('parses a valid props object', () => {
+    const result = megaMenuPropsSchema.parse({ categories, collections })
+    expect(result.categories).toHaveLength(2)
+    expect(result.collections).toHaveLength(1)
+  })
+
+  it('rejects missing categories', () => {
+    expect(() => megaMenuPropsSchema.parse({ collections })).toThrow()
+  })
+
+  it('rejects missing collections', () => {
+    expect(() => megaMenuPropsSchema.parse({ categories })).toThrow()
+  })
+
+  it('renders category columns from the categories prop', () => {
+    const html = renderToStaticMarkup(
+      <MegaMenu categories={categories} collections={collections} />,
+    )
+    expect(html).toContain('Comprar por categorías')
+    expect(html).toContain('Hogar')
+    expect(html).toContain('href="/hogar"')
+    expect(html).toContain('Decoración')
+    expect(html).toContain('href="/hogar/decoracion"')
+    expect(html).toContain('Cortinas')
+    expect(html).toContain('href="/hogar/decoracion/cortinas"')
+  })
+
+  it('renders the collections grid', () => {
+    const html = renderToStaticMarkup(
+      <MegaMenu categories={categories} collections={collections} />,
+    )
+    expect(html).toContain('Colecciones')
+    expect(html).toContain('Ofertas')
+    expect(html).toContain('Precios bajos')
+    expect(html).toContain('href="/colecciones/ofertas"')
+  })
+
+  it('uses CategoryIcon for icon items', () => {
+    const html = renderToStaticMarkup(
+      <MegaMenu categories={categories} collections={collections} />,
+    )
+    expect(html).toContain('<svg')
+    expect(html).toContain('aria-hidden="true"')
+  })
+
+  it('renders the view-all link only when collectionsHref is set', () => {
+    const withHref = renderToStaticMarkup(
+      <MegaMenu
+        categories={categories}
+        collections={collections}
+        collectionsHref="/tienda/colecciones"
+        viewAllLabel="Ver todas"
+      />,
+    )
+    expect(withHref).toContain('href="/tienda/colecciones"')
+    expect(withHref).toContain('Ver todas')
+
+    const withoutHref = renderToStaticMarkup(
+      <MegaMenu
+        categories={categories}
+        collections={collections}
+        collectionsHref=""
+      />,
+    )
+    expect(withoutHref).not.toContain('Ver todas')
+  })
+
+  it('uses ES defaults for copy, hrefs and aria-label', () => {
+    const html = renderToStaticMarkup(
+      <MegaMenu categories={categories} collections={collections} />,
+    )
+    expect(html).toContain('Comprar por categorías')
+    expect(html).toContain('Colecciones')
+    expect(html).toContain('Ver todas las colecciones')
+    expect(html).toContain('href="/colecciones"')
+    expect(html).toContain('aria-label="Menú de categorías"')
+  })
+
+  it('applies copy overrides', () => {
+    const html = renderToStaticMarkup(
+      <MegaMenu
+        categories={categories}
+        collections={collections}
+        categoryColumnTitle="Shop by category"
+        collectionsTitle="Collections"
+        viewAllLabel="View all collections"
+        collectionsHref="/collections"
+        ariaLabel="Category menu"
+      />,
+    )
+    expect(html).toContain('Shop by category')
+    expect(html).toContain('Collections')
+    expect(html).toContain('View all collections')
+    expect(html).toContain('href="/collections"')
+    expect(html).toContain('aria-label="Category menu"')
+    expect(html).not.toContain('Comprar por categorías')
+  })
+})