@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -0,0 +1,149 @@
+'use client'
+
+import { Field, FieldContent, FieldGroup, FieldLabel } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+import { CheckboxCheck } from './checkbox-check'
+import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
+import type {
+  CheckoutChangeHandler,
+  CheckoutFieldDescriptions,
+  CheckoutValuesFieldErrors,
+  CheckoutLabels,
+  CheckoutValues,
+} from './checkout'
+
+export interface CheckoutContactStepProps {
+  values: CheckoutValues
+  onChange: CheckoutChangeHandler
+  labels: CheckoutLabels
+  /** Rendered only when the host supplies the corresponding label. */
+  showSaveInfo: boolean
+  showNewsletter: boolean
+  fieldErrors?: CheckoutValuesFieldErrors
+  fieldDescriptions?: CheckoutFieldDescriptions
+}
+
+export function CheckoutContactStep({
+  values,
+  onChange,
+  labels,
+  showSaveInfo,
+  showNewsletter,
+  fieldErrors,
+  fieldDescriptions,
+}: CheckoutContactStepProps) {
+  return (
+    <FieldGroup className="grid grid-cols-1 gap-4">
+      <Field data-invalid={!!fieldErrors?.email?.length}>
+        <FieldLabel htmlFor="checkout-email">{labels.emailLabel}</FieldLabel>
+        <Input
+          id="checkout-email"
+          type="email"
+          inputMode="email"
+          autoComplete="email"
+          value={values.email}
+          onChange={(e) => onChange('email', e.target.value)}
+          {...checkoutFieldAria('checkout-email', fieldErrors?.email)}
+        />
+        <CheckoutFieldFeedback
+          id="checkout-email"
+          errors={fieldErrors?.email}
+          description={fieldDescriptions?.email}
+        />
+      </Field>
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <Field data-invalid={!!fieldErrors?.firstName?.length}>
+          <FieldLabel htmlFor="checkout-first-name">{labels.firstNameLabel}</FieldLabel>
+          <Input
+            id="checkout-first-name"
+            autoComplete="given-name"
+            value={values.firstName}
+            onChange={(e) => onChange('firstName', e.target.value)}
+            {...checkoutFieldAria('checkout-first-name', fieldErrors?.firstName)}
+          />
+          <CheckoutFieldFeedback
+            id="checkout-first-name"
+            errors={fieldErrors?.firstName}
+            description={fieldDescriptions?.firstName}
+          />
+        </Field>
+        <Field data-invalid={!!fieldErrors?.lastName?.length}>
+          <FieldLabel htmlFor="checkout-last-name">{labels.lastNameLabel}</FieldLabel>
+          <Input
+            id="checkout-last-name"
+            autoComplete="family-name"
+            value={values.lastName}
+            onChange={(e) => onChange('lastName', e.target.value)}
+            {...checkoutFieldAria('checkout-last-name', fieldErrors?.lastName)}
+          />
+          <CheckoutFieldFeedback
+            id="checkout-last-name"
+            errors={fieldErrors?.lastName}
+            description={fieldDescriptions?.lastName}
+          />
+        </Field>
+      </div>
+
+      <Field data-invalid={!!fieldErrors?.phone?.length}>
+        <FieldLabel htmlFor="checkout-phone">{labels.phoneLabel}</FieldLabel>
+        <Input
+          id="checkout-phone"
+          type="tel"
+          inputMode="tel"
+          autoComplete="tel"
+          value={values.phone}
+          onChange={(e) => onChange('phone', e.target.value)}
+          {...checkoutFieldAria('checkout-phone', fieldErrors?.phone)}
+        />
+        <CheckoutFieldFeedback
+          id="checkout-phone"
+          errors={fieldErrors?.phone}
+          description={fieldDescriptions?.phone}
+        />
+      </Field>
+
+      {showSaveInfo ? (
+        <Field orientation="horizontal" className="gap-2" data-invalid={!!fieldErrors?.saveInfo?.length}>
+          <CheckboxCheck
+            id="checkout-save-info"
+            checked={values.saveInfo}
+            onCheckedChange={(checked) => onChange('saveInfo', checked === true)}
+            {...checkoutFieldAria('checkout-save-info', fieldErrors?.saveInfo)}
+          />
+          <FieldContent>
+            <FieldLabel htmlFor="checkout-save-info" className="text-sm font-normal">
+              {labels.saveInfoLabel}
+            </FieldLabel>
+            <CheckoutFieldFeedback
+              id="checkout-save-info"
+              errors={fieldErrors?.saveInfo}
+              description={fieldDescriptions?.saveInfo}
+            />
+          </FieldContent>
+        </Field>
+      ) : null}
+
+      {showNewsletter ? (
+        <Field orientation="horizontal" className="gap-2" data-invalid={!!fieldErrors?.newsletter?.length}>
+          <CheckboxCheck
+            id="checkout-newsletter"
+            checked={values.newsletter}
+            onCheckedChange={(checked) => onChange('newsletter', checked === true)}
+            {...checkoutFieldAria('checkout-newsletter', fieldErrors?.newsletter)}
+          />
+          <FieldContent>
+            <FieldLabel htmlFor="checkout-newsletter" className="text-sm font-normal">
+              {labels.newsletterLabel}
+            </FieldLabel>
+            <CheckoutFieldFeedback
+              id="checkout-newsletter"
+              errors={fieldErrors?.newsletter}
+              description={fieldDescriptions?.newsletter}
+            />
+          </FieldContent>
+        </Field>
+      ) : null}
+    </FieldGroup>
+  )
+}

package/src/blocks/e-commerce/checkout-forms/{checkout-form-1-country-field.tsx → checkout-country-field.tsx}

@@ -11,29 +11,31 @@ import {
 } from '../../../ui/select'
 import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
 import type { CheckoutFieldError } from './checkout-form-types'
-import type { CheckoutForm1CountryOption } from './checkout-form-1'
+import type { CheckoutCountryOption, CheckoutLabels } from './checkout'
 
-export interface CheckoutForm1CountryFieldProps {
-  countries: CheckoutForm1CountryOption[]
+export interface CheckoutCountryFieldProps {
+  labels: CheckoutLabels
+  countries: CheckoutCountryOption[]
   value: string
   onValueChange: (value: string) => void
   errors?: CheckoutFieldError[]
   description?: string
 }
 
-export function CheckoutForm1CountryField({
+export function CheckoutCountryField({
+  labels,
   countries,
   value,
   onValueChange,
   errors,
   description,
-}: CheckoutForm1CountryFieldProps) {
+}: CheckoutCountryFieldProps) {
   return (
     <Field data-invalid={!!errors?.length}>
-      <FieldLabel htmlFor="checkout-country">Country</FieldLabel>
+      <FieldLabel htmlFor="checkout-country">{labels.countryLabel}</FieldLabel>
       <Select value={value} onValueChange={onValueChange}>
         <SelectTrigger id="checkout-country" {...checkoutFieldAria('checkout-country', errors)}>
-          <SelectValue placeholder="Select a country" />
+          <SelectValue placeholder={labels.countryPlaceholder} />
         </SelectTrigger>
         <SelectContent>
           <SelectGroup>
@@ -48,4 +50,4 @@ export function CheckoutForm1CountryField({
       <CheckoutFieldFeedback id="checkout-country" errors={errors} description={description} />
     </Field>
   )
-}
+}

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

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

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

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

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