@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,137 @@
+'use client'
+
+import { CreditCard, Shield } from 'lucide-react'
+
+import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
+
+import type { PaymentMethod } from '@thorprovider/types'
+import type { CheckoutForm3ChangeHandler, CheckoutForm3FormData } from './checkout-form-3'
+
+interface CheckoutForm3PaymentStepProps {
+  formData: CheckoutForm3FormData
+  onChange: CheckoutForm3ChangeHandler
+  paymentMethods: PaymentMethod[]
+  paymentLabel: string
+  noMethodsLabel: string
+  cardNumberLabel: string
+  expiryLabel: string
+  cvvLabel: string
+  cardNameLabel: string
+  securePaymentLabel: string
+}
+
+export function CheckoutForm3PaymentStep({
+  formData,
+  onChange,
+  paymentMethods,
+  paymentLabel,
+  noMethodsLabel,
+  cardNumberLabel,
+  expiryLabel,
+  cvvLabel,
+  cardNameLabel,
+  securePaymentLabel,
+}: CheckoutForm3PaymentStepProps) {
+  const selectedMethod = paymentMethods.find(method => method.id === formData.paymentMethod)
+  const isCard = selectedMethod?.type === 'card'
+
+  return (
+    <div className='flex flex-col gap-6'>
+      <FieldSet className='gap-4'>
+        <FieldLegend className='flex items-center gap-2 text-base font-medium'>
+          <CreditCard className='size-4' aria-hidden='true' />
+          {paymentLabel}
+        </FieldLegend>
+
+        {paymentMethods.length === 0 ? (
+          <p className='text-muted-foreground text-sm'>{noMethodsLabel}</p>
+        ) : (
+          <RadioGroup value={formData.paymentMethod} onValueChange={value => value && onChange('paymentMethod', value)}>
+            {paymentMethods.map(method => (
+              <Field key={method.id} orientation='horizontal' className='rounded-lg border p-4'>
+                <RadioGroupItem value={method.id} id={method.id} />
+                <FieldLabel htmlFor={method.id} className='flex flex-1 flex-col gap-0.5 font-normal'>
+                  <span className='flex items-center gap-2'>
+                    {method.logo ? (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img src={method.logo} alt='' className='size-4 object-contain' />
+                    ) : (
+                      <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>
+        )}
+      </FieldSet>
+
+      {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='rounded-lg border p-4'>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor='cardNumber'>{cardNumberLabel} *</FieldLabel>
+              <Input
+                id='cardNumber'
+                placeholder='1234 5678 9012 3456'
+                className='h-9 font-mono'
+                value={formData.cardNumber}
+                onChange={event => onChange('cardNumber', event.target.value)}
+              />
+            </Field>
+            <div className='grid gap-4 sm:grid-cols-3'>
+              <Field className='sm:col-span-2'>
+                <FieldLabel htmlFor='expiryDate'>{expiryLabel} *</FieldLabel>
+                <Input
+                  id='expiryDate'
+                  placeholder='MM/AA'
+                  className='h-9 font-mono'
+                  value={formData.expiryDate}
+                  onChange={event => onChange('expiryDate', event.target.value)}
+                />
+              </Field>
+              <Field>
+                <FieldLabel htmlFor='cvv'>{cvvLabel} *</FieldLabel>
+                <Input
+                  id='cvv'
+                  placeholder='123'
+                  className='h-9 font-mono'
+                  value={formData.cvv}
+                  onChange={event => onChange('cvv', event.target.value)}
+                />
+              </Field>
+            </div>
+            <Field>
+              <FieldLabel htmlFor='cardName'>{cardNameLabel} *</FieldLabel>
+              <Input
+                id='cardName'
+                placeholder='Juan Pérez'
+                value={formData.cardName}
+                onChange={event => onChange('cardName', event.target.value)}
+                className='h-9'
+              />
+            </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>{securePaymentLabel}</span>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,68 @@
+'use client'
+
+import { Check, CreditCard, Package, Truck, User } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+import { cn } from '../../../lib/utils'
+
+import type { CheckoutForm3Step } from './checkout-form-3'
+
+export const CHECKOUT_FORM_3_STEP_ICONS: LucideIcon[] = [User, Truck, CreditCard, Package]
+
+interface CheckoutForm3ProgressProps {
+  steps: CheckoutForm3Step[]
+  currentStep: number
+  isStepComplete: (stepNumber: number) => boolean
+}
+
+export function CheckoutForm3Progress({ steps, currentStep, isStepComplete }: CheckoutForm3ProgressProps) {
+  return (
+    <div className='mb-8'>
+      <div className='flex items-center justify-between'>
+        {steps.map((step, index) => {
+          const Icon = CHECKOUT_FORM_3_STEP_ICONS[index]
+          const isActive = step.id === currentStep
+          const isCompleted = isStepComplete(step.id)
+
+          return (
+            <div key={step.id} className='flex flex-1 items-center'>
+              <div className='flex flex-col items-center'>
+                <div
+                  aria-current={isActive ? 'step' : undefined}
+                  className={cn(
+                    'flex size-10 items-center justify-center rounded-full border-2 transition-colors',
+                    isCompleted
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : isActive
+                        ? 'border-primary bg-background text-primary'
+                        : 'border-muted bg-background text-muted-foreground',
+                  )}
+                >
+                  {isCompleted ? (
+                    <Check className='size-5' aria-hidden='true' />
+                  ) : Icon ? (
+                    <Icon className='size-5' aria-hidden='true' />
+                  ) : null}
+                </div>
+                <span
+                  className={cn(
+                    'mt-2 text-center text-xs font-medium',
+                    isActive ? 'text-primary' : 'text-muted-foreground',
+                  )}
+                >
+                  {step.name}
+                </span>
+              </div>
+              {index < steps.length - 1 ? (
+                <div
+                  aria-hidden='true'
+                  className={cn('mx-4 h-px flex-1 transition-colors', isCompleted ? 'bg-primary' : 'bg-muted')}
+                />
+              ) : null}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,79 @@
+'use client'
+
+import { CheckboxCheck } from './checkbox-check'
+import { Field, FieldLabel } from '../../../ui/field'
+
+import type { PaymentMethod } from '@thorprovider/types'
+import type {
+  CheckoutForm3ChangeHandler,
+  CheckoutForm3FormData,
+  CheckoutForm3ShippingMethod,
+} from './checkout-form-3'
+
+interface CheckoutForm3ReviewStepProps {
+  formData: CheckoutForm3FormData
+  onChange: CheckoutForm3ChangeHandler
+  shippingMethods: CheckoutForm3ShippingMethod[]
+  paymentMethods: PaymentMethod[]
+  orderReviewLabel: string
+  contactReviewLabel: string
+  shipToReviewLabel: string
+  paymentReviewLabel: string
+  shippingReviewLabel: string
+  saveInfoLabel: string
+}
+
+export function CheckoutForm3ReviewStep({
+  formData,
+  onChange,
+  shippingMethods,
+  paymentMethods,
+  orderReviewLabel,
+  contactReviewLabel,
+  shipToReviewLabel,
+  paymentReviewLabel,
+  shippingReviewLabel,
+  saveInfoLabel,
+}: CheckoutForm3ReviewStepProps) {
+  const shippingName = shippingMethods.find(method => method.id === formData.shippingMethod)?.name
+  const paymentMethodName = paymentMethods.find(method => method.id === formData.paymentMethod)?.name
+
+  return (
+    <div className='flex flex-col gap-6'>
+      <div className='bg-muted/50 rounded-lg p-6'>
+        <h3 className='mb-4 font-medium'>{orderReviewLabel}</h3>
+        <dl className='flex flex-col gap-4 text-sm'>
+          <div>
+            <dt className='inline font-medium'>{contactReviewLabel}: </dt>
+            <dd className='inline'>{formData.email}</dd>
+          </div>
+          <div>
+            <dt className='inline font-medium'>{shipToReviewLabel}: </dt>
+            <dd className='inline'>
+              {formData.firstName} {formData.lastName}, {formData.address}, {formData.city} {formData.zipCode}
+            </dd>
+          </div>
+          <div>
+            <dt className='inline font-medium'>{paymentReviewLabel}: </dt>
+            <dd className='inline'>{paymentMethodName}</dd>
+          </div>
+          <div>
+            <dt className='inline font-medium'>{shippingReviewLabel}: </dt>
+            <dd className='inline'>{shippingName}</dd>
+          </div>
+        </dl>
+      </div>
+
+      <Field orientation='horizontal'>
+        <CheckboxCheck
+          id='saveInfo'
+          checked={formData.saveInfo}
+          onCheckedChange={checked => onChange('saveInfo', checked as boolean)}
+        />
+        <FieldLabel htmlFor='saveInfo' className='text-sm font-normal'>
+          {saveInfoLabel}
+        </FieldLabel>
+      </Field>
+    </div>
+  )
+}

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

@@ -0,0 +1,172 @@
+'use client'
+
+import { MapPin, Truck } from 'lucide-react'
+
+import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'
+import { Separator } from '../../../ui/separator'
+
+import type {
+  CheckoutForm3ChangeHandler,
+  CheckoutForm3CountryOption,
+  CheckoutForm3FormData,
+  CheckoutForm3ShippingMethod,
+} from './checkout-form-3'
+
+interface CheckoutForm3ShippingStepProps {
+  formData: CheckoutForm3FormData
+  onChange: CheckoutForm3ChangeHandler
+  countryOptions: CheckoutForm3CountryOption[]
+  shippingMethods: CheckoutForm3ShippingMethod[]
+  shippingAddressLabel: string
+  addressLabel: string
+  apartmentLabel: string
+  cityLabel: string
+  stateLabel: string
+  zipCodeLabel: string
+  countryLabel: string
+  shippingMethodLabel: string
+  freeLabel: string
+  currencySymbol: string
+}
+
+const countryLabelFor = (value: string, options: CheckoutForm3CountryOption[]) =>
+  options.find(option => option.value === value)?.label ?? value
+
+export function CheckoutForm3ShippingStep({
+  formData,
+  onChange,
+  countryOptions,
+  shippingMethods,
+  shippingAddressLabel,
+  addressLabel,
+  apartmentLabel,
+  cityLabel,
+  stateLabel,
+  zipCodeLabel,
+  countryLabel,
+  shippingMethodLabel,
+  freeLabel,
+  currencySymbol,
+}: CheckoutForm3ShippingStepProps) {
+  return (
+    <div className='flex flex-col gap-6'>
+      <div className='flex flex-col gap-4'>
+        <h3 className='flex items-center gap-2 font-medium'>
+          <MapPin className='size-4' aria-hidden='true' />
+          {shippingAddressLabel}
+        </h3>
+
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor='address'>{addressLabel} *</FieldLabel>
+            <Input
+              id='address'
+              placeholder='Calle Principal 123'
+              value={formData.address}
+              onChange={event => onChange('address', event.target.value)}
+              required
+              className='h-9'
+            />
+          </Field>
+
+          <Field>
+            <FieldLabel htmlFor='apartment'>{apartmentLabel}</FieldLabel>
+            <Input
+              id='apartment'
+              placeholder='Piso 4B'
+              value={formData.apartment}
+              onChange={event => onChange('apartment', event.target.value)}
+              className='h-9'
+            />
+          </Field>
+
+          <div className='grid gap-4 sm:grid-cols-3'>
+            <Field>
+              <FieldLabel htmlFor='city'>{cityLabel} *</FieldLabel>
+              <Input
+                id='city'
+                placeholder='Madrid'
+                value={formData.city}
+                onChange={event => onChange('city', event.target.value)}
+                required
+                className='h-9'
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor='state'>{stateLabel}</FieldLabel>
+              <Input
+                id='state'
+                placeholder='Madrid'
+                value={formData.state}
+                onChange={event => onChange('state', event.target.value)}
+                className='h-9'
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor='zipCode'>{zipCodeLabel} *</FieldLabel>
+              <Input
+                id='zipCode'
+                placeholder='28001'
+                value={formData.zipCode}
+                onChange={event => onChange('zipCode', event.target.value)}
+                required
+                className='h-9'
+              />
+            </Field>
+          </div>
+
+          <Field>
+            <FieldLabel htmlFor='country'>{countryLabel}</FieldLabel>
+            <Select value={formData.country} onValueChange={value => value && onChange('country', value)}>
+              <SelectTrigger id='country' className='!h-9 w-full'>
+                <SelectValue>{countryLabelFor(formData.country, countryOptions)}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {countryOptions.map(country => (
+                    <SelectItem key={country.value} value={country.value}>
+                      {country.label}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </Field>
+        </FieldGroup>
+      </div>
+
+      <Separator />
+
+      <FieldSet className='gap-4'>
+        <FieldLegend className='flex items-center gap-2 text-base font-medium'>
+          <Truck className='size-4' aria-hidden='true' />
+          {shippingMethodLabel}
+        </FieldLegend>
+        <RadioGroup
+          value={formData.shippingMethod}
+          onValueChange={value => value && onChange('shippingMethod', value)}
+        >
+          {shippingMethods.map(method => (
+            <div key={method.id} className='flex items-center justify-between rounded-lg border p-4'>
+              <Field orientation='horizontal' className='w-auto'>
+                <RadioGroupItem value={method.id} id={method.id} />
+                <FieldLabel htmlFor={method.id} className='font-normal'>
+                  <div>
+                    <div className='font-medium'>{method.name}</div>
+                    <div className='text-muted-foreground text-sm'>{method.description}</div>
+                  </div>
+                </FieldLabel>
+              </Field>
+              <div className='font-medium'>
+                {method.cost === 0 ? freeLabel : `${currencySymbol}${method.cost.toFixed(2)}`}
+              </div>
+            </div>
+          ))}
+        </RadioGroup>
+      </FieldSet>
+    </div>
+  )
+}