@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -1,252 +0,0 @@
-'use client'
-
-import { Shield, Truck } from 'lucide-react'
-import { Badge } from '../../../ui/badge'
-import { Button } from '../../../ui/button'
-import { Card, CardContent, CardTitle } from '../../../ui/card'
-import { Field, FieldLabel } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { Separator } from '../../../ui/separator'
-import { formatMoney, isAvailableMoney } from '../../../lib/money'
-import type { Money } from '@thorprovider/types'
-import type {
-  CheckoutForm1OrderSummary,
-  CheckoutForm1OrderSummaryItem,
-  CheckoutForm1TotalsState,
-} from './checkout-form-1'
-
-export interface CheckoutForm1OrderSummaryProps {
-  orderSummary: CheckoutForm1OrderSummary
-  totalsState?: CheckoutForm1TotalsState
-  totalsErrorLabel?: string
-  /** Shown when a required total amount is absent or malformed (never as zero). */
-  totalsUnavailableLabel?: string
-  /** Shown for a line whose supplied line total is absent or malformed. */
-  amountUnavailableLabel?: string
-  retryLabel?: string
-  onRetryTotals?: () => void
-  promoCode?: string
-  onPromoCodeChange?: (value: string) => void
-  onApplyPromo?: (code: string) => void
-  promoPending?: boolean
-  promoApplyLabel?: string
-  promoPlaceholder?: string
-  trustNotes?: string[]
-  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
-  formatMoney?: (money: Money) => string
-}
-
-export function CheckoutForm1OrderSummary({
-  orderSummary,
-  totalsState = 'idle',
-  totalsErrorLabel = 'No se pudieron actualizar los totales.',
-  totalsUnavailableLabel = 'Totales no disponibles.',
-  amountUnavailableLabel = '—',
-  retryLabel = 'Reintentar',
-  onRetryTotals,
-  promoCode,
-  onPromoCodeChange,
-  onApplyPromo,
-  promoPending = false,
-  promoApplyLabel = 'Aplicar',
-  promoPlaceholder = 'Ingresa el código',
-  trustNotes,
-  formatMoney: formatMoneyProp,
-}: CheckoutForm1OrderSummaryProps) {
-  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)
-  const lineAmount = (item: CheckoutForm1OrderSummaryItem): string | null => {
-    // A supplied line total that is absent/malformed must not fall back to a
-    // numeric guess; only an entirely absent line total uses the legacy field.
-    if (item.lineTotal !== undefined) return format(item.lineTotal)
-    if (typeof item.price === 'number') return `$${(item.price * item.quantity).toFixed(2)}`
-    return null
-  }
-
-  const renderTotals = () => {
-    if (totalsState === 'pending') {
-      return <p className="text-muted-foreground text-sm" aria-live="polite">Actualizando totales…</p>
-    }
-    if (totalsState === 'error') {
-      return (
-        <div className="flex flex-col gap-2" role="alert">
-          <p className="text-destructive text-sm">{totalsErrorLabel}</p>
-          {onRetryTotals ? (
-            <Button type="button" variant="outline" size="sm" className="w-fit" onClick={onRetryTotals}>
-              {retryLabel}
-            </Button>
-          ) : null}
-        </div>
-      )
-    }
-
-    const totals = orderSummary.totals
-    if (totals) {
-      const subtotalText = format(totals.subtotal)
-      const totalText = format(totals.total)
-      // Required totals: if either is absent/malformed, show an explicit
-      // unavailable state (with recovery) rather than a fabricated zero.
-      if (subtotalText === null || totalText === null) {
-        return (
-          <div className="flex flex-col gap-2" role="status">
-            <p className="text-muted-foreground text-sm">{totalsUnavailableLabel}</p>
-            {onRetryTotals ? (
-              <Button type="button" variant="outline" size="sm" className="w-fit" onClick={onRetryTotals}>
-                {retryLabel}
-              </Button>
-            ) : null}
-          </div>
-        )
-      }
-      return (
-        <div className="flex flex-col gap-2 text-sm">
-          <div className="flex items-center justify-between">
-            <span className="text-muted-foreground">Subtotal</span>
-            <span className="font-medium tabular-nums">{subtotalText}</span>
-          </div>
-          {isAvailableMoney(totals.discount) ? (
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Descuento</span>
-              <span className="font-medium tabular-nums">{format(totals.discount)}</span>
-            </div>
-          ) : null}
-          {isAvailableMoney(totals.tax) ? (
-            <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">Impuestos</span>
-              <span className="font-medium tabular-nums">{format(totals.tax)}</span>
-            </div>
-          ) : null}
-          {isAvailableMoney(totals.shipping) ? (
-            <div className="flex items-center justify-between">
-              <span className="flex items-center gap-1.5 text-muted-foreground">
-                <Truck className="size-4" />
-                Envío
-              </span>
-              <span className="font-medium tabular-nums">{format(totals.shipping)}</span>
-            </div>
-          ) : null}
-          <Separator />
-          <div className="flex items-center justify-between">
-            <span className="font-semibold">Total</span>
-            <span className="font-semibold tabular-nums">{totalText}</span>
-          </div>
-        </div>
-      )
-    }
-
-    // Legacy numeric fallback for consumers that have not moved to `totals`.
-    const legacySubtotal = orderSummary.items.reduce(
-      (sum, item) => sum + (item.price ?? 0) * item.quantity,
-      0
-    )
-    const legacyTotal =
-      legacySubtotal +
-      (orderSummary.shipping ?? 0) +
-      (orderSummary.tax ?? 0) -
-      (orderSummary.discount ?? 0) -
-      (orderSummary.promoDiscount ?? 0)
-    return (
-      <div className="flex flex-col gap-2 text-sm">
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">Subtotal</span>
-          <span className="font-medium tabular-nums">${legacySubtotal.toFixed(2)}</span>
-        </div>
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">Envío</span>
-          <span className="font-medium tabular-nums">${(orderSummary.shipping ?? 0).toFixed(2)}</span>
-        </div>
-        <div className="flex items-center justify-between">
-          <span className="text-muted-foreground">Impuestos</span>
-          <span className="font-medium tabular-nums">${(orderSummary.tax ?? 0).toFixed(2)}</span>
-        </div>
-        <Separator />
-        <div className="flex items-center justify-between">
-          <span className="font-semibold">Total</span>
-          <span className="font-semibold tabular-nums">${legacyTotal.toFixed(2)}</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <Card className="sticky top-8">
-      <CardContent className="flex flex-col gap-4 p-6">
-        <CardTitle>Order Summary</CardTitle>
-
-        <div className="flex flex-col gap-4">
-          {orderSummary.items.map((item) => {
-            const amount = lineAmount(item)
-            return (
-              <div key={String(item.id)} className="flex items-center gap-3">
-                <div className="relative">
-                  {item.image ? (
-                    <img
-                      src={item.image || undefined}
-                      alt={item.name}
-                      width={64}
-                      height={64}
-                      className="bg-muted size-16 rounded-lg object-cover"
-                    />
-                  ) : (
-                    <div aria-hidden="true" className="bg-muted size-16 rounded-lg" />
-                  )}
-                  <Badge
-                    variant="secondary"
-                    className="absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs"
-                  >
-                    {item.quantity}
-                  </Badge>
-                </div>
-                <div className="flex-1">
-                  <p className="text-sm font-medium">{item.name}</p>
-                  {item.variant ? <p className="text-sm text-muted-foreground">{item.variant}</p> : null}
-                </div>
-                <p className="text-sm font-medium tabular-nums">{amount ?? amountUnavailableLabel}</p>
-              </div>
-            )
-          })}
-        </div>
-
-        <Separator />
-
-        {onPromoCodeChange ? (
-          <Field className="gap-2">
-            <FieldLabel htmlFor="checkout-promo-code">Código promocional</FieldLabel>
-            <div className="flex gap-2">
-              <Input
-                id="checkout-promo-code"
-                placeholder={promoPlaceholder}
-                value={promoCode ?? ''}
-                onChange={(e) => onPromoCodeChange(e.target.value)}
-              />
-              <Button
-                type="button"
-                variant="outline"
-                disabled={promoPending || !onApplyPromo}
-                onClick={() => onApplyPromo?.(promoCode ?? '')}
-              >
-                {promoApplyLabel}
-              </Button>
-            </div>
-          </Field>
-        ) : null}
-
-        <Separator />
-
-        {renderTotals()}
-
-        {trustNotes && trustNotes.length > 0 ? (
-          <div className="flex flex-col gap-2 text-sm text-muted-foreground">
-            {trustNotes.map((note, index) => (
-              <span key={`trust:${index}:${note}`} className="flex items-center gap-2">
-                <Shield className="size-4" />
-                {note}
-              </span>
-            ))}
-          </div>
-        ) : null}
-      </CardContent>
-    </Card>
-  )
-}
-
-export default CheckoutForm1OrderSummary

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

@@ -1,188 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
-import { Field, FieldContent, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-} from '../../../ui/input-group'
-import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
-import { CheckboxCheck } from './checkbox-check'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type { PaymentMethod } from '@thorprovider/types'
-import type {
-  CheckoutForm1ChangeHandler,
-  CheckoutForm1FieldDescriptions,
-  CheckoutForm1FieldErrors,
-  CheckoutForm1FormData,
-} from './checkout-form-1'
-
-export interface CheckoutForm1PaymentStepProps {
-  formData: CheckoutForm1FormData
-  onChange: CheckoutForm1ChangeHandler
-  onCardNumberChange: (value: string) => void
-  onExpiryChange: (value: string) => void
-  paymentMethods?: PaymentMethod[]
-  noPaymentMethodsLabel?: string
-  /** Raw card fields are legacy-only; the launch flow defaults to `false`. */
-  collectCardFields?: boolean
-  fieldErrors?: CheckoutForm1FieldErrors
-  fieldDescriptions?: CheckoutForm1FieldDescriptions
-}
-
-export function CheckoutForm1PaymentStep({
-  formData,
-  onChange,
-  onCardNumberChange,
-  onExpiryChange,
-  paymentMethods = [],
-  noPaymentMethodsLabel = 'No payment methods are available for this region.',
-  collectCardFields = false,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutForm1PaymentStepProps) {
-  const [showCvv, setShowCvv] = useState(false)
-
-  const selectedMethod = paymentMethods.find(method => method.id === formData.paymentMethod)
-  const isCard = selectedMethod?.type === 'card'
-  const showCardFields = collectCardFields && isCard
-
-  return (
-    <FieldSet>
-      <FieldLegend>Payment method</FieldLegend>
-      {paymentMethods.length === 0 ? (
-        <p className="text-muted-foreground text-sm">{noPaymentMethodsLabel}</p>
-      ) : (
-        <RadioGroup value={formData.paymentMethod} onValueChange={value => value && onChange('paymentMethod', value)} className="grid gap-3">
-          {paymentMethods.map(method => (
-            <Field key={method.id} orientation="horizontal" className="justify-between rounded-lg border p-4">
-              <FieldContent>
-                <FieldLabel htmlFor={`payment-${method.id}`} className="flex flex-col gap-0.5">
-                  <span>{method.name}</span>
-                  {method.description ? (
-                    <span className="text-muted-foreground text-xs font-normal">{method.description}</span>
-                  ) : null}
-                </FieldLabel>
-              </FieldContent>
-              <RadioGroupItem value={method.id} id={`payment-${method.id}`} />
-            </Field>
-          ))}
-        </RadioGroup>
-      )}
-
-      {selectedMethod && !showCardFields ? (
-        <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}
-
-      {showCardFields ? (
-        <>
-          <Field data-invalid={!!fieldErrors?.cardNumber?.length}>
-            <FieldLabel htmlFor="checkout-card-number">Card number</FieldLabel>
-            <Input
-              id="checkout-card-number"
-              inputMode="numeric"
-              maxLength={19}
-              placeholder="1234 5678 9012 3456"
-              value={formData.cardNumber}
-              onChange={(e) => onCardNumberChange(e.target.value)}
-              {...checkoutFieldAria('checkout-card-number', fieldErrors?.cardNumber)}
-            />
-            <CheckoutFieldFeedback
-              id="checkout-card-number"
-              errors={fieldErrors?.cardNumber}
-              description={fieldDescriptions?.cardNumber}
-            />
-          </Field>
-          <div className="grid gap-4 md:grid-cols-2">
-            <Field data-invalid={!!fieldErrors?.expiryDate?.length}>
-              <FieldLabel htmlFor="checkout-expiry">Expiry date</FieldLabel>
-              <Input
-                id="checkout-expiry"
-                inputMode="numeric"
-                maxLength={5}
-                placeholder="MM/YY"
-                value={formData.expiryDate}
-                onChange={(e) => onExpiryChange(e.target.value)}
-                {...checkoutFieldAria('checkout-expiry', fieldErrors?.expiryDate)}
-              />
-              <CheckoutFieldFeedback
-                id="checkout-expiry"
-                errors={fieldErrors?.expiryDate}
-                description={fieldDescriptions?.expiryDate}
-              />
-            </Field>
-            <Field data-invalid={!!fieldErrors?.cvv?.length}>
-              <FieldLabel htmlFor="checkout-cvv">CVV</FieldLabel>
-              <InputGroup>
-                <InputGroupInput
-                  id="checkout-cvv"
-                  inputMode="numeric"
-                  maxLength={4}
-                  placeholder="123"
-                  type={showCvv ? 'text' : 'password'}
-                  value={formData.cvv}
-                  onChange={(e) => onChange('cvv', e.target.value)}
-                  {...checkoutFieldAria('checkout-cvv', fieldErrors?.cvv)}
-                />
-                <InputGroupAddon inline-end>
-                  <InputGroupButton
-                    type="button"
-                    variant="ghost"
-                    size="icon-xs"
-                    aria-label={showCvv ? 'Hide CVV' : 'Show CVV'}
-                    onClick={() => setShowCvv((s) => !s)}
-                  >
-                    {showCvv ? <EyeOff /> : <Eye />}
-                  </InputGroupButton>
-                </InputGroupAddon>
-              </InputGroup>
-              <CheckoutFieldFeedback
-                id="checkout-cvv"
-                errors={fieldErrors?.cvv}
-                description={fieldDescriptions?.cvv}
-              />
-            </Field>
-          </div>
-          <Field data-invalid={!!fieldErrors?.cardName?.length}>
-            <FieldLabel htmlFor="checkout-card-name">Name on card</FieldLabel>
-            <Input
-              id="checkout-card-name"
-              placeholder="John Doe"
-              value={formData.cardName}
-              onChange={(e) => onChange('cardName', e.target.value)}
-              {...checkoutFieldAria('checkout-card-name', fieldErrors?.cardName)}
-            />
-            <CheckoutFieldFeedback
-              id="checkout-card-name"
-              errors={fieldErrors?.cardName}
-              description={fieldDescriptions?.cardName}
-            />
-          </Field>
-          <Field orientation="horizontal" className="gap-2" data-invalid={!!fieldErrors?.saveInfo?.length}>
-            <CheckboxCheck
-              id="checkout-save-info"
-              checked={formData.saveInfo}
-              onCheckedChange={(checked) => onChange('saveInfo', checked === true)}
-              {...checkoutFieldAria('checkout-save-info', fieldErrors?.saveInfo)}
-            />
-            <FieldContent>
-              <FieldLabel htmlFor="checkout-save-info">Save payment info for next time</FieldLabel>
-              <CheckoutFieldFeedback
-                id="checkout-save-info"
-                errors={fieldErrors?.saveInfo}
-                description={fieldDescriptions?.saveInfo}
-              />
-            </FieldContent>
-          </Field>
-        </>
-      ) : null}
-    </FieldSet>
-  )
-}

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

@@ -1,36 +0,0 @@
-'use client'
-
-import { cn } from '../../../lib/utils'
-
-const STEP_COUNT = 3
-
-export interface CheckoutForm1ProgressProps {
-  step: number
-}
-
-export function CheckoutForm1Progress({ step }: CheckoutForm1ProgressProps) {
-  return (
-    <div className="flex items-center justify-center gap-2">
-      {Array.from({ length: STEP_COUNT }, (_, index) => {
-        const current = index + 1
-        const isDone = current <= step
-        return (
-          <div key={current} className="flex items-center gap-2">
-            {index > 0 && (
-              <div aria-hidden="true" className={cn('h-1 w-16', isDone ? 'bg-primary' : 'bg-muted')} />
-            )}
-            <div
-              aria-current={current === step ? 'step' : undefined}
-              className={cn(
-                'flex size-10 items-center justify-center rounded-full text-sm font-medium',
-                isDone ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
-              )}
-            >
-              {current}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

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

@@ -1,156 +0,0 @@
-'use client'
-
-import { Field, FieldContent, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'
-import { Input } from '../../../ui/input'
-import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
-import { formatMoney, isAvailableMoney } from '../../../lib/money'
-import type { Money } from '@thorprovider/types'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type {
-  CheckoutForm1ChangeHandler,
-  CheckoutForm1CountryOption,
-  CheckoutForm1FieldDescriptions,
-  CheckoutForm1FieldErrors,
-  CheckoutForm1FormData,
-  CheckoutForm1ShippingOption,
-} from './checkout-form-1'
-import { CheckoutForm1CountryField } from './checkout-form-1-country-field'
-
-export interface CheckoutForm1ShippingStepProps {
-  formData: CheckoutForm1FormData
-  onChange: CheckoutForm1ChangeHandler
-  countries?: CheckoutForm1CountryOption[]
-  shippingOptions?: CheckoutForm1ShippingOption[]
-  selectedShippingOptionId?: string
-  onSelectShippingOption?: (id: string) => void
-  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
-  formatMoney?: (money: Money) => string
-  fieldErrors?: CheckoutForm1FieldErrors
-  fieldDescriptions?: CheckoutForm1FieldDescriptions
-}
-
-export function CheckoutForm1ShippingStep({
-  formData,
-  onChange,
-  countries,
-  shippingOptions,
-  selectedShippingOptionId,
-  onSelectShippingOption,
-  formatMoney: formatMoneyProp,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutForm1ShippingStepProps) {
-  return (
-    <FieldGroup className="grid gap-4">
-      <Field data-invalid={!!fieldErrors?.address?.length}>
-        <FieldLabel htmlFor="checkout-address">Street address</FieldLabel>
-        <Input
-          id="checkout-address"
-          placeholder="123 Main St"
-          value={formData.address}
-          onChange={(e) => onChange('address', e.target.value)}
-          {...checkoutFieldAria('checkout-address', fieldErrors?.address)}
-        />
-        <CheckoutFieldFeedback
-          id="checkout-address"
-          errors={fieldErrors?.address}
-          description={fieldDescriptions?.address}
-        />
-      </Field>
-      <div className="grid gap-4 md:grid-cols-2">
-        <Field data-invalid={!!fieldErrors?.city?.length}>
-          <FieldLabel htmlFor="checkout-city">City</FieldLabel>
-          <Input
-            id="checkout-city"
-            placeholder="San Francisco"
-            value={formData.city}
-            onChange={(e) => onChange('city', e.target.value)}
-            {...checkoutFieldAria('checkout-city', fieldErrors?.city)}
-          />
-          <CheckoutFieldFeedback
-            id="checkout-city"
-            errors={fieldErrors?.city}
-            description={fieldDescriptions?.city}
-          />
-        </Field>
-        <Field data-invalid={!!fieldErrors?.state?.length}>
-          <FieldLabel htmlFor="checkout-state">State / Province</FieldLabel>
-          <Input
-            id="checkout-state"
-            placeholder="CA"
-            value={formData.state}
-            onChange={(e) => onChange('state', e.target.value)}
-            {...checkoutFieldAria('checkout-state', fieldErrors?.state)}
-          />
-          <CheckoutFieldFeedback
-            id="checkout-state"
-            errors={fieldErrors?.state}
-            description={fieldDescriptions?.state}
-          />
-        </Field>
-      </div>
-      <div className="grid gap-4 md:grid-cols-2">
-        <Field data-invalid={!!fieldErrors?.zipCode?.length}>
-          <FieldLabel htmlFor="checkout-zip">ZIP / Postal code</FieldLabel>
-          <Input
-            id="checkout-zip"
-            placeholder="94103"
-            value={formData.zipCode}
-            onChange={(e) => onChange('zipCode', e.target.value)}
-            {...checkoutFieldAria('checkout-zip', fieldErrors?.zipCode)}
-          />
-          <CheckoutFieldFeedback
-            id="checkout-zip"
-            errors={fieldErrors?.zipCode}
-            description={fieldDescriptions?.zipCode}
-          />
-        </Field>
-        {countries && countries.length > 0 && (
-          <CheckoutForm1CountryField
-            countries={countries}
-            value={formData.country}
-            onValueChange={(value) => onChange('country', value)}
-            errors={fieldErrors?.country}
-            description={fieldDescriptions?.country}
-          />
-        )}
-      </div>
-
-      {shippingOptions && shippingOptions.length > 0 ? (
-        <FieldSet>
-          <FieldLegend>Shipping method</FieldLegend>
-          <RadioGroup
-            value={selectedShippingOptionId ?? ''}
-            onValueChange={(value) => value && onSelectShippingOption?.(String(value))}
-            className="grid gap-3"
-          >
-            {shippingOptions.map((option) => (
-              <Field
-                key={option.id}
-                orientation="horizontal"
-                className="justify-between rounded-lg border p-4"
-              >
-                <FieldContent>
-                  <FieldLabel htmlFor={`shipping-${option.id}`} className="flex flex-col gap-0.5">
-                    <span>{option.name}</span>
-                    {option.description ? (
-                      <span className="text-muted-foreground text-xs font-normal">
-                        {option.description}
-                      </span>
-                    ) : null}
-                  </FieldLabel>
-                </FieldContent>
-                <div className="flex items-center gap-3">
-                  {isAvailableMoney(option.price) ? (
-                    <span className="text-sm tabular-nums">{formatMoney(option.price, formatMoneyProp)}</span>
-                  ) : null}
-                  <RadioGroupItem value={option.id} id={`shipping-${option.id}`} />
-                </div>
-              </Field>
-            ))}
-          </RadioGroup>
-        </FieldSet>
-      ) : null}
-    </FieldGroup>
-  )
-}