@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,190 @@
+import { Truck } from 'lucide-react'
+
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { CheckboxCheck } from './checkbox-check'
+import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../ui/select'
+import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
+import type {
+  CheckoutForm2CountryOption,
+  CheckoutForm2Data,
+  CheckoutForm2FieldDescriptions,
+  CheckoutForm2FieldErrors,
+} from './checkout-form-2'
+
+interface CheckoutForm2ShippingCardProps {
+  data: CheckoutForm2Data
+  onChange: (field: keyof CheckoutForm2Data, value: string | boolean) => void
+  countryOptions: CheckoutForm2CountryOption[]
+  shippingAddressLabel: string
+  firstNameLabel: string
+  lastNameLabel: string
+  addressLabel: string
+  cityLabel: string
+  zipCodeLabel: string
+  countryLabel: string
+  saveInfoLabel: string
+  fieldErrors?: CheckoutForm2FieldErrors
+  fieldDescriptions?: CheckoutForm2FieldDescriptions
+}
+
+const countryLabelFor = (value: string, options: CheckoutForm2CountryOption[]) =>
+  options.find(option => option.value === value)?.label ?? value
+
+export function CheckoutForm2ShippingCard({
+  data,
+  onChange,
+  countryOptions,
+  shippingAddressLabel,
+  firstNameLabel,
+  lastNameLabel,
+  addressLabel,
+  cityLabel,
+  zipCodeLabel,
+  countryLabel,
+  saveInfoLabel,
+  fieldErrors,
+  fieldDescriptions,
+}: CheckoutForm2ShippingCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className='flex items-center gap-2'>
+          <Truck className='size-5' aria-hidden='true' />
+          {shippingAddressLabel}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <div className='grid gap-4 sm:grid-cols-2'>
+            <Field data-invalid={!!fieldErrors?.firstName?.length}>
+              <FieldLabel htmlFor='firstName'>{firstNameLabel}</FieldLabel>
+              <Input
+                id='firstName'
+                placeholder='Juan'
+                value={data.firstName}
+                onChange={event => onChange('firstName', event.target.value)}
+                {...checkoutFieldAria('firstName', fieldErrors?.firstName)}
+                className='h-9'
+              />
+              <CheckoutFieldFeedback
+                id='firstName'
+                errors={fieldErrors?.firstName}
+                description={fieldDescriptions?.firstName}
+              />
+            </Field>
+            <Field data-invalid={!!fieldErrors?.lastName?.length}>
+              <FieldLabel htmlFor='lastName'>{lastNameLabel}</FieldLabel>
+              <Input
+                id='lastName'
+                placeholder='Pérez'
+                value={data.lastName}
+                onChange={event => onChange('lastName', event.target.value)}
+                {...checkoutFieldAria('lastName', fieldErrors?.lastName)}
+                className='h-9'
+              />
+              <CheckoutFieldFeedback
+                id='lastName'
+                errors={fieldErrors?.lastName}
+                description={fieldDescriptions?.lastName}
+              />
+            </Field>
+          </div>
+
+          <Field data-invalid={!!fieldErrors?.address?.length}>
+            <FieldLabel htmlFor='address'>{addressLabel}</FieldLabel>
+            <Input
+              id='address'
+              placeholder='Calle Principal 123'
+              value={data.address}
+              onChange={event => onChange('address', event.target.value)}
+              {...checkoutFieldAria('address', fieldErrors?.address)}
+              className='h-9'
+            />
+            <CheckoutFieldFeedback
+              id='address'
+              errors={fieldErrors?.address}
+              description={fieldDescriptions?.address}
+            />
+          </Field>
+
+          <div className='grid gap-4 sm:grid-cols-2 md:grid-cols-3'>
+            <Field data-invalid={!!fieldErrors?.city?.length}>
+              <FieldLabel htmlFor='city'>{cityLabel}</FieldLabel>
+              <Input
+                id='city'
+                placeholder='Madrid'
+                value={data.city}
+                onChange={event => onChange('city', event.target.value)}
+                {...checkoutFieldAria('city', fieldErrors?.city)}
+                className='h-9'
+              />
+              <CheckoutFieldFeedback
+                id='city'
+                errors={fieldErrors?.city}
+                description={fieldDescriptions?.city}
+              />
+            </Field>
+            <Field data-invalid={!!fieldErrors?.zipCode?.length}>
+              <FieldLabel htmlFor='zipCode'>{zipCodeLabel}</FieldLabel>
+              <Input
+                id='zipCode'
+                placeholder='28001'
+                value={data.zipCode}
+                onChange={event => onChange('zipCode', event.target.value)}
+                {...checkoutFieldAria('zipCode', fieldErrors?.zipCode)}
+                className='h-9'
+              />
+              <CheckoutFieldFeedback
+                id='zipCode'
+                errors={fieldErrors?.zipCode}
+                description={fieldDescriptions?.zipCode}
+              />
+            </Field>
+            <Field data-invalid={!!fieldErrors?.country?.length}>
+              <FieldLabel htmlFor='country'>{countryLabel}</FieldLabel>
+              <Select value={data.country} onValueChange={value => value && onChange('country', value)}>
+                <SelectTrigger id='country' {...checkoutFieldAria('country', fieldErrors?.country)} className='w-full'>
+                  <SelectValue>{countryLabelFor(data.country, countryOptions)}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {countryOptions.map(country => (
+                      <SelectItem key={country.value} value={country.value}>
+                        {country.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <CheckoutFieldFeedback
+                id='country'
+                errors={fieldErrors?.country}
+                description={fieldDescriptions?.country}
+              />
+            </Field>
+          </div>
+
+          <Field orientation='horizontal'>
+            <CheckboxCheck
+              id='saveInfo'
+              checked={data.saveInfo}
+              onCheckedChange={checked => onChange('saveInfo', checked as boolean)}
+            />
+            <FieldLabel htmlFor='saveInfo' className='text-sm font-normal'>
+              {saveInfoLabel}
+            </FieldLabel>
+          </Field>
+        </FieldGroup>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,312 @@
+'use client'
+
+import { useState, type FormEvent } from 'react'
+import { ArrowLeft, Lock, Package } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { CheckboxCheck } from './checkbox-check'
+import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
+import { formatCardNumber, formatExpiryDate } from './card-formatting'
+import type { PaymentMethod } from '@thorprovider/types'
+import type { CheckoutFieldErrors } from './checkout-form-types'
+
+import { CheckoutForm2OrderSummary } from './checkout-form-2-order-summary'
+import { CheckoutForm2PaymentCard } from './checkout-form-2-payment-card'
+import { CheckoutForm2ShippingCard } from './checkout-form-2-shipping-card'
+
+export interface CheckoutForm2Item {
+  id: string
+  name: string
+  price: number
+  quantity: number
+  image: string
+}
+
+export interface CheckoutForm2CountryOption {
+  value: string
+  label: string
+}
+
+export interface CheckoutForm2Data {
+  email: string
+  firstName: string
+  lastName: string
+  address: string
+  city: string
+  zipCode: string
+  country: string
+  saveInfo: boolean
+  newsletter: boolean
+  cardNumber: string
+  expiryDate: string
+  cvv: string
+  cardName: string
+}
+
+export type CheckoutForm2FieldErrors = CheckoutFieldErrors<keyof CheckoutForm2Data>
+
+export type CheckoutForm2FieldDescriptions = Partial<
+  Record<keyof CheckoutForm2Data, string>
+>
+
+export interface CheckoutForm2Totals {
+  subtotal: number
+  shipping: number
+  tax: number
+  total: number
+}
+
+export interface CheckoutForm2Props {
+  items: CheckoutForm2Item[]
+  countryOptions?: CheckoutForm2CountryOption[]
+  paymentMethods?: PaymentMethod[]
+  noMethodsLabel?: string
+  taxRate?: number
+  shippingCost?: number
+  freeShippingThreshold?: number
+  currencySymbol?: string
+  titleLabel?: string
+  descriptionLabel?: string
+  backToCartLabel?: string
+  completeOrderLabel?: string
+  contactLabel?: string
+  emailLabel?: string
+  emailPlaceholder?: string
+  newsletterLabel?: string
+  shippingAddressLabel?: string
+  firstNameLabel?: string
+  lastNameLabel?: string
+  addressLabel?: string
+  cityLabel?: string
+  zipCodeLabel?: string
+  countryLabel?: string
+  saveInfoLabel?: string
+  paymentLabel?: string
+  cardNumberLabel?: string
+  expiryLabel?: string
+  cvvLabel?: string
+  cardNameLabel?: string
+  encryptedNoteLabel?: string
+  orderSummaryLabel?: string
+  subtotalLabel?: string
+  shippingLineLabel?: string
+  freeShippingLineLabel?: string
+  taxLabel?: string
+  totalLabel?: string
+  freeShippingNoteLabel?: string
+  estimatedDeliveryLabel?: string
+  values: CheckoutForm2Data
+  onChange: (field: keyof CheckoutForm2Data, value: string | boolean) => void
+  fieldErrors?: CheckoutForm2FieldErrors
+  fieldDescriptions?: CheckoutForm2FieldDescriptions
+  onBackToCart?: () => void
+  onCompleteOrder?: (data: CheckoutForm2Data, totals: CheckoutForm2Totals) => void
+}
+
+const DEFAULT_COUNTRY_OPTIONS: CheckoutForm2CountryOption[] = [
+  { value: 'US', label: 'Estados Unidos' },
+  { value: 'CA', label: 'Canadá' },
+  { value: 'UK', label: 'Reino Unido' },
+  { value: 'AU', label: 'Australia' },
+]
+
+export function CheckoutForm2({
+  items,
+  countryOptions = DEFAULT_COUNTRY_OPTIONS,
+  paymentMethods = [],
+  noMethodsLabel,
+  taxRate = 0.08,
+  shippingCost = 9.99,
+  freeShippingThreshold = 75,
+  currencySymbol = '$',
+  titleLabel = 'Finalizar compra',
+  descriptionLabel = 'Completa tu pedido de forma segura',
+  backToCartLabel = 'Volver al carrito',
+  completeOrderLabel = 'Completar pedido',
+  contactLabel = 'Información de contacto',
+  emailLabel = 'Correo electrónico',
+  emailPlaceholder = 'tucorreo@ejemplo.com',
+  newsletterLabel = 'Quiero recibir novedades y ofertas',
+  shippingAddressLabel = 'Dirección de envío',
+  firstNameLabel = 'Nombre',
+  lastNameLabel = 'Apellido',
+  addressLabel = 'Dirección',
+  cityLabel = 'Ciudad',
+  zipCodeLabel = 'Código postal',
+  countryLabel = 'País',
+  saveInfoLabel = 'Guardar esta información para la próxima vez',
+  paymentLabel = 'Método de pago',
+  cardNumberLabel = 'Número de tarjeta',
+  expiryLabel = 'Fecha de vencimiento',
+  cvvLabel = 'CVV',
+  cardNameLabel = 'Nombre en la tarjeta',
+  encryptedNoteLabel = 'Tu información de pago está cifrada y segura',
+  orderSummaryLabel = 'Resumen del pedido',
+  subtotalLabel = 'Subtotal',
+  shippingLineLabel = 'Envío',
+  freeShippingLineLabel = 'Gratis',
+  taxLabel = 'Impuestos',
+  totalLabel = 'Total',
+  freeShippingNoteLabel = 'Envío gratis en pedidos superiores a',
+  estimatedDeliveryLabel = 'Entrega estimada: 3-5 días hábiles',
+  values,
+  onChange,
+  fieldErrors,
+  fieldDescriptions,
+  onBackToCart,
+  onCompleteOrder,
+}: CheckoutForm2Props) {
+  const [paymentMethod, setPaymentMethod] = useState(paymentMethods[0]?.id ?? '')
+
+  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
+  const shipping = subtotal >= freeShippingThreshold ? 0 : shippingCost
+  const tax = subtotal * taxRate
+  const total = subtotal + shipping + tax
+
+  const handleCardNumberChange = (value: string) => {
+    onChange('cardNumber', formatCardNumber(value))
+  }
+
+  const handleExpiryChange = (value: string) => {
+    onChange('expiryDate', formatExpiryDate(value))
+  }
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+    onCompleteOrder?.(values, { subtotal, shipping, tax, total })
+  }
+
+  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'>
+          <Button
+            type='button'
+            variant='secondary'
+            size='sm'
+            className='mb-4 h-8 px-3 text-xs cursor-pointer'
+            onClick={onBackToCart}
+          >
+            <ArrowLeft />
+            {backToCartLabel}
+          </Button>
+          <h1 className='text-3xl font-bold tracking-tight text-balance'>{titleLabel}</h1>
+          <p className='text-muted-foreground mt-2'>{descriptionLabel}</p>
+        </div>
+
+        <div className='grid gap-8 lg:grid-cols-3'>
+          <div className='order-2 lg:order-1 lg:col-span-2'>
+            <form onSubmit={handleSubmit} className='flex flex-col gap-8'>
+              <Card>
+                <CardHeader>
+                  <CardTitle className='flex items-center gap-2'>
+                    <Package className='size-5' aria-hidden='true' />
+                    {contactLabel}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <FieldGroup>
+                    <Field data-invalid={!!fieldErrors?.email?.length}>
+                      <FieldLabel htmlFor='email'>{emailLabel}</FieldLabel>
+                      <Input
+                        id='email'
+                        type='text'
+                        inputMode='email'
+                        placeholder={emailPlaceholder}
+                        value={values.email}
+                        onChange={event => onChange('email', event.target.value)}
+                        {...checkoutFieldAria('email', fieldErrors?.email)}
+                        className='h-9'
+                      />
+                      <CheckoutFieldFeedback
+                        id='email'
+                        errors={fieldErrors?.email}
+                        description={fieldDescriptions?.email}
+                      />
+                    </Field>
+                    <Field orientation='horizontal'>
+                      <CheckboxCheck
+                        id='newsletter'
+                        checked={values.newsletter}
+                        onCheckedChange={checked => onChange('newsletter', checked as boolean)}
+                      />
+                      <FieldLabel htmlFor='newsletter' className='text-sm font-normal'>
+                        {newsletterLabel}
+                      </FieldLabel>
+                    </Field>
+                  </FieldGroup>
+                </CardContent>
+              </Card>
+
+              <CheckoutForm2ShippingCard
+                data={values}
+                onChange={onChange}
+                countryOptions={countryOptions}
+                shippingAddressLabel={shippingAddressLabel}
+                firstNameLabel={firstNameLabel}
+                lastNameLabel={lastNameLabel}
+                addressLabel={addressLabel}
+                cityLabel={cityLabel}
+                zipCodeLabel={zipCodeLabel}
+                countryLabel={countryLabel}
+                saveInfoLabel={saveInfoLabel}
+                fieldErrors={fieldErrors}
+                fieldDescriptions={fieldDescriptions}
+              />
+
+              <CheckoutForm2PaymentCard
+                paymentMethod={paymentMethod}
+                onPaymentMethodChange={setPaymentMethod}
+                data={values}
+                onChange={onChange}
+                onCardNumberChange={handleCardNumberChange}
+                onExpiryChange={handleExpiryChange}
+                paymentMethods={paymentMethods}
+                noMethodsLabel={noMethodsLabel}
+                paymentLabel={paymentLabel}
+                cardNumberLabel={cardNumberLabel}
+                expiryLabel={expiryLabel}
+                cvvLabel={cvvLabel}
+                cardNameLabel={cardNameLabel}
+                encryptedNoteLabel={encryptedNoteLabel}
+                fieldErrors={fieldErrors}
+                fieldDescriptions={fieldDescriptions}
+              />
+
+              <Button type='submit' size='lg' className='h-10 px-8 w-full cursor-pointer'>
+                <Lock />
+                {completeOrderLabel} • {currencySymbol}
+                {total.toFixed(2)}
+              </Button>
+            </form>
+          </div>
+
+          <div className='order-1 lg:order-2 lg:col-span-1'>
+            <CheckoutForm2OrderSummary
+              items={items}
+              subtotal={subtotal}
+              shipping={shipping}
+              tax={tax}
+              total={total}
+              currencySymbol={currencySymbol}
+              orderSummaryLabel={orderSummaryLabel}
+              subtotalLabel={subtotalLabel}
+              shippingLabel={shippingLineLabel}
+              freeShippingLabel={freeShippingLineLabel}
+              taxLabel={taxLabel}
+              totalLabel={totalLabel}
+              freeShippingNoteLabel={freeShippingNoteLabel}
+              estimatedDeliveryLabel={estimatedDeliveryLabel}
+              freeShippingThreshold={freeShippingThreshold}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default CheckoutForm2

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

@@ -0,0 +1,91 @@
+'use client'
+
+import { CheckboxCheck } from './checkbox-check'
+import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+
+import type { CheckoutForm3ChangeHandler, CheckoutForm3FormData } from './checkout-form-3'
+
+interface CheckoutForm3InformationStepProps {
+  formData: CheckoutForm3FormData
+  onChange: CheckoutForm3ChangeHandler
+  emailLabel: string
+  firstNameLabel: string
+  lastNameLabel: string
+  phoneLabel: string
+  newsletterLabel: string
+}
+
+export function CheckoutForm3InformationStep({
+  formData,
+  onChange,
+  emailLabel,
+  firstNameLabel,
+  lastNameLabel,
+  phoneLabel,
+  newsletterLabel,
+}: CheckoutForm3InformationStepProps) {
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor='email'>{emailLabel} *</FieldLabel>
+        <Input
+          id='email'
+          type='email'
+          placeholder='tucorreo@ejemplo.com'
+          value={formData.email}
+          onChange={event => onChange('email', event.target.value)}
+          required
+          className='h-9'
+        />
+      </Field>
+
+      <div className='grid gap-4 sm:grid-cols-2'>
+        <Field>
+          <FieldLabel htmlFor='firstName'>{firstNameLabel} *</FieldLabel>
+          <Input
+            id='firstName'
+            placeholder='Juan'
+            value={formData.firstName}
+            onChange={event => onChange('firstName', event.target.value)}
+            required
+            className='h-9'
+          />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor='lastName'>{lastNameLabel} *</FieldLabel>
+          <Input
+            id='lastName'
+            placeholder='Pérez'
+            value={formData.lastName}
+            onChange={event => onChange('lastName', event.target.value)}
+            required
+            className='h-9'
+          />
+        </Field>
+      </div>
+
+      <Field>
+        <FieldLabel htmlFor='phone'>{phoneLabel}</FieldLabel>
+        <Input
+          id='phone'
+          placeholder='+34 600 123 456'
+          value={formData.phone}
+          onChange={event => onChange('phone', event.target.value)}
+          className='h-9'
+        />
+      </Field>
+
+      <Field orientation='horizontal'>
+        <CheckboxCheck
+          id='newsletterCheck'
+          checked={formData.newsletter}
+          onCheckedChange={checked => onChange('newsletter', checked as boolean)}
+        />
+        <FieldLabel htmlFor='newsletterCheck' className='text-sm font-normal'>
+          {newsletterLabel}
+        </FieldLabel>
+      </Field>
+    </FieldGroup>
+  )
+}

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

@@ -0,0 +1,110 @@
+import { Badge } from '../../../ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
+import { Separator } from '../../../ui/separator'
+
+import type { CheckoutForm3CartItem } from './checkout-form-3'
+
+interface CheckoutForm3OrderSummaryProps {
+  items: CheckoutForm3CartItem[]
+  subtotal: number
+  shipping: number
+  tax: number
+  total: number
+  currencySymbol: string
+  orderSummaryLabel: string
+  subtotalLabel: string
+  shippingLabel: string
+  taxLabel: string
+  totalLabel: string
+  freeLabel: string
+}
+
+export function CheckoutForm3OrderSummary({
+  items,
+  subtotal,
+  shipping,
+  tax,
+  total,
+  currencySymbol,
+  orderSummaryLabel,
+  subtotalLabel,
+  shippingLabel,
+  taxLabel,
+  totalLabel,
+  freeLabel,
+}: CheckoutForm3OrderSummaryProps) {
+  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='px-2.5 py-0.5 font-semibold absolute -top-2 -end-2 size-5 rounded-full p-0 text-xs'
+                >
+                  {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}
+                </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 ? freeLabel : `${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>
+      </CardContent>
+    </Card>
+  )
+}