@thorprovider/blocks 2.0.0 → 3.0.0

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

@@ -1,230 +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 {
-  CheckoutLabels,
-  CheckoutOrderSummary,
-  CheckoutOrderLine,
-  CheckoutTotalsState,
-} from './checkout'
-
-export interface CheckoutOrderSummaryPanelProps {
-  summary: CheckoutOrderSummary
-  labels: CheckoutLabels
-  formatMoney?: (money: Money) => string
-  totalsState?: CheckoutTotalsState
-  onRetryTotals?: () => void
-  promoCode: string
-  onPromoCodeChange: (value: string) => void
-  onApplyPromo?: (code: string) => void
-  promoPending?: boolean
-  trustNotes?: string[]
-}
-
-/**
- * Internal projection of the checkout's own cart. It is not a public block: the
- * amount contract is `Money` only and every total is rendered verbatim.
- */
-export function CheckoutOrderSummaryPanel({
-  summary,
-  labels,
-  formatMoney: formatMoneyProp,
-  totalsState = 'idle',
-  onRetryTotals,
-  promoCode,
-  onPromoCodeChange,
-  onApplyPromo,
-  promoPending = false,
-  trustNotes,
-}: CheckoutOrderSummaryPanelProps) {
-  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)
-  const lineAmount = (item: CheckoutOrderLine): string | null =>
-    isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null
-
-  const renderTotals = () => {
-    if (totalsState === 'pending') {
-      return (
-        <p className="text-muted-foreground text-sm" aria-live="polite">
-          {labels.totalsPendingLabel}
-        </p>
-      )
-    }
-    if (totalsState === 'error') {
-      return (
-        <div className="flex flex-col gap-2" role="alert">
-          <p className="text-destructive text-sm">{labels.totalsErrorLabel}</p>
-          {onRetryTotals ? (
-            <Button type="button" variant="outline" size="sm" className="w-fit" onClick={onRetryTotals}>
-              {labels.retryLabel}
-            </Button>
-          ) : null}
-        </div>
-      )
-    }
-
-    const totals = summary.totals
-    if (!totals) {
-      return (
-        <div className="flex flex-col gap-2" role="status">
-          <p className="text-muted-foreground text-sm">{labels.totalsUnavailableLabel}</p>
-          {onRetryTotals ? (
-            <Button type="button" variant="outline" size="sm" className="w-fit" onClick={onRetryTotals}>
-              {labels.retryLabel}
-            </Button>
-          ) : null}
-        </div>
-      )
-    }
-
-    const subtotalText = format(totals.subtotal)
-    const totalText = format(totals.total)
-    // Required totals: an absent/malformed amount is unavailable, never 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">{labels.totalsUnavailableLabel}</p>
-          {onRetryTotals ? (
-            <Button type="button" variant="outline" size="sm" className="w-fit" onClick={onRetryTotals}>
-              {labels.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">{labels.subtotalLabel}</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">{labels.discountLabel}</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">{labels.taxLabel}</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 aria-hidden="true" className="size-4" />
-              {labels.shippingLabel}
-            </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">{labels.totalLabel}</span>
-          <span className="font-semibold tabular-nums">{totalText}</span>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <Card className="lg:sticky lg:top-8">
-      <CardContent className="flex flex-col gap-4 p-6">
-        <CardTitle>{labels.orderSummaryTitle}</CardTitle>
-
-        <div className="flex flex-col gap-4">
-          {summary.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}
-                      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="min-w-0 flex-1">
-                  <p className="text-sm font-medium">{item.name}</p>
-                  {item.variant ? (
-                    <p className="text-sm text-muted-foreground">{item.variant}</p>
-                  ) : null}
-                  {item.quantity > 1 && isAvailableMoney(item.unitPrice) ? (
-                    <p className="text-muted-foreground text-xs">
-                      {format(item.unitPrice)} {labels.eachLabel}
-                    </p>
-                  ) : null}
-                </div>
-                <p className="text-sm font-medium tabular-nums">
-                  {amount ?? labels.amountUnavailableLabel}
-                </p>
-              </div>
-            )
-          })}
-        </div>
-
-        {onApplyPromo ? (
-          <>
-            <Separator />
-            <Field className="gap-2">
-              <FieldLabel htmlFor="checkout-promo-code">{labels.promoCodeLabel}</FieldLabel>
-              <div className="flex gap-2">
-                <Input
-                  id="checkout-promo-code"
-                  placeholder={labels.promoPlaceholder}
-                  value={promoCode}
-                  onChange={(e) => onPromoCodeChange(e.target.value)}
-                />
-                <Button
-                  type="button"
-                  variant="outline"
-                  disabled={promoPending}
-                  onClick={() => onApplyPromo(promoCode)}
-                >
-                  {labels.promoApplyLabel}
-                </Button>
-              </div>
-            </Field>
-          </>
-        ) : null}
-
-        <Separator />
-
-        {renderTotals()}
-
-        {trustNotes && trustNotes.length > 0 ? (
-          <div className="text-muted-foreground flex flex-col gap-2 text-sm">
-            {trustNotes.map((note, index) => (
-              <span key={`${index}:${note}`} className="flex items-center gap-2">
-                <Shield aria-hidden="true" className="size-4" />
-                {note}
-              </span>
-            ))}
-          </div>
-        ) : null}
-      </CardContent>
-    </Card>
-  )
-}

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

@@ -1,100 +0,0 @@
-'use client'
-
-import { Field, FieldContent, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'
-import { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'
-import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
-import type { PaymentMethod } from '@thorprovider/types'
-import type {
-  CheckoutChangeHandler,
-  CheckoutFieldDescriptions,
-  CheckoutValuesFieldErrors,
-  CheckoutLabels,
-  CheckoutValues,
-} from './checkout'
-
-export interface CheckoutPaymentStepProps {
-  values: CheckoutValues
-  onChange: CheckoutChangeHandler
-  labels: CheckoutLabels
-  paymentMethods?: PaymentMethod[]
-  fieldErrors?: CheckoutValuesFieldErrors
-  fieldDescriptions?: CheckoutFieldDescriptions
-}
-
-export function CheckoutPaymentStep({
-  values,
-  onChange,
-  labels,
-  paymentMethods = [],
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutPaymentStepProps) {
-  const selectedMethod = paymentMethods.find((method) => method.id === values.paymentMethod)
-
-  return (
-    <FieldSet>
-      <FieldLegend>{labels.paymentMethodLegend}</FieldLegend>
-      {paymentMethods.length === 0 ? (
-        <p className="text-muted-foreground text-sm">{labels.noPaymentMethodsLabel}</p>
-      ) : (
-        <RadioGroup
-          value={values.paymentMethod}
-          onValueChange={(value) => value && onChange('paymentMethod', String(value))}
-          className="grid grid-cols-1 gap-3"
-        >
-          {paymentMethods.map((method) => {
-            const unavailable = method.isEnabled === false
-            return (
-              <Field
-                key={method.id}
-                orientation="horizontal"
-                className="flex-wrap items-start justify-between gap-3 rounded-lg border p-4"
-              >
-                <FieldContent className="min-w-0">
-                  <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}
-                    {unavailable ? (
-                      <span className="text-muted-foreground text-xs font-normal">
-                        {labels.unavailableMethodLabel}
-                      </span>
-                    ) : null}
-                  </FieldLabel>
-                </FieldContent>
-                <RadioGroupItem
-                  value={method.id}
-                  id={`payment-${method.id}`}
-                  disabled={unavailable}
-                />
-              </Field>
-            )
-          })}
-        </RadioGroup>
-      )}
-
-      {selectedMethod ? (
-        <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}
-          {selectedMethod.requiresSetup ? (
-            <p className="text-muted-foreground mt-1 text-xs">{labels.requiresSetupLabel}</p>
-          ) : null}
-        </div>
-      ) : null}
-
-      <Field data-invalid={!!fieldErrors?.paymentMethod?.length}>
-        <CheckoutFieldFeedback
-          id="checkout-payment-method"
-          errors={fieldErrors?.paymentMethod}
-          description={fieldDescriptions?.paymentMethod}
-        />
-      </Field>
-    </FieldSet>
-  )
-}

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

@@ -1,62 +0,0 @@
-'use client'
-
-import { Check } from 'lucide-react'
-import { cn } from '../../../lib/utils'
-import type { CheckoutStepId } from './checkout'
-
-export interface CheckoutProgressProps {
-  steps: Array<{ id: CheckoutStepId; label: string }>
-  currentStep: CheckoutStepId
-  ariaLabel: string
-}
-
-export function CheckoutProgress({ steps, currentStep, ariaLabel }: CheckoutProgressProps) {
-  const currentIndex = steps.findIndex((step) => step.id === currentStep)
-
-  return (
-    <nav aria-label={ariaLabel}>
-      <ol className="flex flex-wrap items-center justify-center gap-2">
-        {steps.map((step, index) => {
-          const isCurrent = step.id === currentStep
-          const isComplete = index < currentIndex
-          return (
-            <li
-              key={step.id}
-              aria-current={isCurrent ? 'step' : undefined}
-              className="flex items-center gap-2"
-            >
-              {index > 0 ? (
-                <div
-                  aria-hidden="true"
-                  className={cn('h-1 w-8 sm:w-16', isComplete || isCurrent ? 'bg-primary' : 'bg-muted')}
-                />
-              ) : null}
-              <span
-                className={cn(
-                  'flex size-8 items-center justify-center rounded-full text-sm font-medium',
-                  isComplete || isCurrent
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-muted text-muted-foreground',
-                )}
-              >
-                {isComplete ? (
-                  <Check aria-hidden="true" className="size-4" />
-                ) : (
-                  <span aria-hidden="true">{index + 1}</span>
-                )}
-              </span>
-              <span
-                className={cn(
-                  'text-sm',
-                  isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground',
-                )}
-              >
-                {step.label}
-              </span>
-            </li>
-          )
-        })}
-      </ol>
-    </nav>
-  )
-}

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

@@ -1,59 +0,0 @@
-'use client'
-
-import type { PaymentMethod } from '@thorprovider/types'
-import type { CheckoutLabels, CheckoutShippingOption, CheckoutValues } from './checkout'
-
-export interface CheckoutReviewStepProps {
-  values: CheckoutValues
-  labels: CheckoutLabels
-  selectedShippingOptionId?: string
-  shippingOptions?: CheckoutShippingOption[]
-  paymentMethods?: PaymentMethod[]
-}
-
-export function CheckoutReviewStep({
-  values,
-  labels,
-  selectedShippingOptionId,
-  shippingOptions,
-  paymentMethods,
-}: CheckoutReviewStepProps) {
-  const shippingName = shippingOptions?.find(
-    (method) => method.id === selectedShippingOptionId,
-  )?.name
-  const paymentName = paymentMethods?.find((method) => method.id === values.paymentMethod)?.name
-
-  const shipTo = [
-    [values.firstName, values.lastName].filter(Boolean).join(' '),
-    values.address,
-    [values.city, values.state, values.zipCode].filter(Boolean).join(' '),
-    values.country,
-  ]
-    .filter(Boolean)
-    .join(', ')
-
-  const rows = [
-    { label: labels.reviewContactLabel, value: values.email },
-    { label: labels.reviewShipToLabel, value: shipTo },
-    { label: labels.reviewPaymentLabel, value: paymentName ?? '' },
-    { label: labels.reviewShippingLabel, value: shippingName ?? '' },
-  ].filter((row) => row.value.trim() !== '')
-
-  return (
-    <div className="bg-muted/50 rounded-lg p-6">
-      <h3 className="mb-4 font-medium">{labels.reviewHeading}</h3>
-      {rows.length === 0 ? (
-        <p className="text-muted-foreground text-sm">{labels.reviewEmptyLabel}</p>
-      ) : (
-        <dl className="flex flex-col gap-4 text-sm">
-          {rows.map((row) => (
-            <div key={row.label}>
-              <dt className="inline font-medium">{row.label}: </dt>
-              <dd className="inline">{row.value}</dd>
-            </div>
-          ))}
-        </dl>
-      )}
-    </div>
-  )
-}

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

@@ -1,180 +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 { CheckoutCountryField } from './checkout-country-field'
-import type {
-  CheckoutChangeHandler,
-  CheckoutCountryOption,
-  CheckoutFieldDescriptions,
-  CheckoutValuesFieldErrors,
-  CheckoutLabels,
-  CheckoutShippingOption,
-  CheckoutValues,
-} from './checkout'
-
-export interface CheckoutShippingStepProps {
-  values: CheckoutValues
-  onChange: CheckoutChangeHandler
-  labels: CheckoutLabels
-  countries?: CheckoutCountryOption[]
-  shippingOptions?: CheckoutShippingOption[]
-  selectedShippingOptionId?: string
-  onSelectShippingOption?: (id: string) => void
-  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
-  formatMoney?: (money: Money) => string
-  fieldErrors?: CheckoutValuesFieldErrors
-  fieldDescriptions?: CheckoutFieldDescriptions
-}
-
-export function CheckoutShippingStep({
-  values,
-  onChange,
-  labels,
-  countries,
-  shippingOptions,
-  selectedShippingOptionId,
-  onSelectShippingOption,
-  formatMoney: formatMoneyProp,
-  fieldErrors,
-  fieldDescriptions,
-}: CheckoutShippingStepProps) {
-  return (
-    <FieldGroup className="grid grid-cols-1 gap-4">
-      <Field data-invalid={!!fieldErrors?.address?.length}>
-        <FieldLabel htmlFor="checkout-address">{labels.addressLabel}</FieldLabel>
-        <Input
-          id="checkout-address"
-          autoComplete="street-address"
-          value={values.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 grid-cols-1 gap-4 md:grid-cols-2">
-        <Field data-invalid={!!fieldErrors?.city?.length}>
-          <FieldLabel htmlFor="checkout-city">{labels.cityLabel}</FieldLabel>
-          <Input
-            id="checkout-city"
-            autoComplete="address-level2"
-            value={values.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">{labels.stateLabel}</FieldLabel>
-          <Input
-            id="checkout-state"
-            autoComplete="address-level1"
-            value={values.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 grid-cols-1 gap-4 md:grid-cols-2">
-        <Field data-invalid={!!fieldErrors?.zipCode?.length}>
-          <FieldLabel htmlFor="checkout-zip">{labels.zipCodeLabel}</FieldLabel>
-          <Input
-            id="checkout-zip"
-            autoComplete="postal-code"
-            value={values.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 ? (
-          <CheckoutCountryField
-            labels={labels}
-            countries={countries}
-            value={values.country}
-            onValueChange={(value) => onChange('country', value)}
-            errors={fieldErrors?.country}
-            description={fieldDescriptions?.country}
-          />
-        ) : (
-          <Field data-invalid={!!fieldErrors?.country?.length}>
-            <FieldLabel htmlFor="checkout-country-input">{labels.countryLabel}</FieldLabel>
-            <Input
-              id="checkout-country-input"
-              autoComplete="country-name"
-              value={values.country}
-              onChange={(e) => onChange('country', e.target.value)}
-              {...checkoutFieldAria('checkout-country-input', fieldErrors?.country)}
-            />
-            <CheckoutFieldFeedback
-              id="checkout-country-input"
-              errors={fieldErrors?.country}
-              description={fieldDescriptions?.country}
-            />
-          </Field>
-        )}
-      </div>
-
-      {shippingOptions && shippingOptions.length > 0 ? (
-        <FieldSet>
-          <FieldLegend>{labels.shippingMethodLegend}</FieldLegend>
-          <RadioGroup
-            value={selectedShippingOptionId ?? ''}
-            onValueChange={(value) => value && onSelectShippingOption?.(String(value))}
-            className="grid grid-cols-1 gap-3"
-          >
-            {shippingOptions.map((option) => (
-              <Field
-                key={option.id}
-                orientation="horizontal"
-                className="flex-wrap items-start justify-between gap-3 rounded-lg border p-4"
-              >
-                <FieldContent className="min-w-0">
-                  <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>
-  )
-}