@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,139 @@
+'use client'
+
+import { useState } from 'react'
+import { Gift, 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 type { CheckoutForm1OrderSummary } from './checkout-form-1'
+
+export interface CheckoutForm1OrderSummaryProps {
+  orderSummary: CheckoutForm1OrderSummary
+}
+
+export function CheckoutForm1OrderSummary({ orderSummary }: CheckoutForm1OrderSummaryProps) {
+  const [promoCode, setPromoCode] = useState('')
+
+  const subtotal = orderSummary.items.reduce(
+    (sum, item) => sum + item.price * item.quantity,
+    0
+  )
+  const total =
+    subtotal +
+    orderSummary.shipping +
+    orderSummary.tax -
+    (orderSummary.discount ?? 0) -
+    (orderSummary.promoDiscount ?? 0)
+
+  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) => (
+            <div key={item.id} className="flex items-center gap-3">
+              <div className="relative">
+                <img
+                  src={item.image || undefined}
+                  alt={item.name}
+                  width={64}
+                  height={64}
+                  className="size-16 rounded-lg object-cover"
+                />
+                <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>
+                <p className="text-sm text-muted-foreground">{item.variant}</p>
+              </div>
+              <p className="text-sm font-medium">${item.price.toFixed(2)}</p>
+            </div>
+          ))}
+        </div>
+
+        <Separator />
+
+        <Field className="gap-2">
+          <FieldLabel>Promo code</FieldLabel>
+          <div className="flex gap-2">
+            <Input
+              placeholder="Enter code"
+              value={promoCode}
+              onChange={(e) => setPromoCode(e.target.value)}
+            />
+            <Button type="button" variant="outline">
+              Apply
+            </Button>
+          </div>
+        </Field>
+
+        <Separator />
+
+        <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">${subtotal.toFixed(2)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-1.5 text-muted-foreground">
+              <Truck className="size-4" />
+              Shipping
+            </span>
+            <span className="font-medium">${orderSummary.shipping.toFixed(2)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">Tax</span>
+            <span className="font-medium">${orderSummary.tax.toFixed(2)}</span>
+          </div>
+          {(orderSummary.discount ?? 0) > 0 && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Discount</span>
+              <span className="font-medium text-destructive">
+                -${(orderSummary.discount ?? 0).toFixed(2)}
+              </span>
+            </div>
+          )}
+          {(orderSummary.promoDiscount ?? 0) > 0 && (
+            <div className="flex items-center justify-between">
+              <span className="text-muted-foreground">Promo discount</span>
+              <span className="font-medium text-success">
+                -${(orderSummary.promoDiscount ?? 0).toFixed(2)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        <Separator />
+
+        <div className="flex items-center justify-between">
+          <span className="font-semibold">Total</span>
+          <span className="font-semibold">${total.toFixed(2)}</span>
+        </div>
+
+        <div className="flex flex-col gap-2 text-sm text-muted-foreground">
+          <span className="flex items-center gap-2">
+            <Shield className="size-4" />
+            SSL encrypted checkout
+          </span>
+          <span className="flex items-center gap-2">
+            <Truck className="size-4" />
+            Free shipping on orders over $75
+          </span>
+          <span className="flex items-center gap-2">
+            <Gift className="size-4" />
+            30-day return policy
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,184 @@
+'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
+  fieldErrors?: CheckoutForm1FieldErrors
+  fieldDescriptions?: CheckoutForm1FieldDescriptions
+}
+
+export function CheckoutForm1PaymentStep({
+  formData,
+  onChange,
+  onCardNumberChange,
+  onExpiryChange,
+  paymentMethods = [],
+  noPaymentMethodsLabel = 'No payment methods are available for this region.',
+  fieldErrors,
+  fieldDescriptions,
+}: CheckoutForm1PaymentStepProps) {
+  const [showCvv, setShowCvv] = useState(false)
+
+  const selectedMethod = paymentMethods.find(method => method.id === formData.paymentMethod)
+  const isCard = selectedMethod?.type === 'card'
+
+  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 && !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 ? (
+        <>
+          <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

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

@@ -0,0 +1,107 @@
+'use client'
+
+import { Field, FieldGroup, FieldLabel } from '../../../ui/field'
+import { Input } from '../../../ui/input'
+import { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'
+import type {
+  CheckoutForm1ChangeHandler,
+  CheckoutForm1CountryOption,
+  CheckoutForm1FieldDescriptions,
+  CheckoutForm1FieldErrors,
+  CheckoutForm1FormData,
+} from './checkout-form-1'
+import { CheckoutForm1CountryField } from './checkout-form-1-country-field'
+
+export interface CheckoutForm1ShippingStepProps {
+  formData: CheckoutForm1FormData
+  onChange: CheckoutForm1ChangeHandler
+  countries?: CheckoutForm1CountryOption[]
+  fieldErrors?: CheckoutForm1FieldErrors
+  fieldDescriptions?: CheckoutForm1FieldDescriptions
+}
+
+export function CheckoutForm1ShippingStep({
+  formData,
+  onChange,
+  countries,
+  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>
+    </FieldGroup>
+  )
+}