@thorprovider/blocks 0.1.3 → 2.0.0

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

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

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

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

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