@thorprovider/blocks 0.1.3 → 2.0.0

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

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

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

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

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