@thorprovider/blocks 0.1.3 → 2.0.0

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

@@ -6,32 +6,35 @@ 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 {
-  CheckoutForm1ChangeHandler,
-  CheckoutForm1CountryOption,
-  CheckoutForm1FieldDescriptions,
-  CheckoutForm1FieldErrors,
-  CheckoutForm1FormData,
-  CheckoutForm1ShippingOption,
-} from './checkout-form-1'
-import { CheckoutForm1CountryField } from './checkout-form-1-country-field'
+  CheckoutChangeHandler,
+  CheckoutCountryOption,
+  CheckoutFieldDescriptions,
+  CheckoutValuesFieldErrors,
+  CheckoutLabels,
+  CheckoutShippingOption,
+  CheckoutValues,
+} from './checkout'
 
-export interface CheckoutForm1ShippingStepProps {
-  formData: CheckoutForm1FormData
-  onChange: CheckoutForm1ChangeHandler
-  countries?: CheckoutForm1CountryOption[]
-  shippingOptions?: CheckoutForm1ShippingOption[]
+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?: CheckoutForm1FieldErrors
-  fieldDescriptions?: CheckoutForm1FieldDescriptions
+  fieldErrors?: CheckoutValuesFieldErrors
+  fieldDescriptions?: CheckoutFieldDescriptions
 }
 
-export function CheckoutForm1ShippingStep({
-  formData,
+export function CheckoutShippingStep({
+  values,
   onChange,
+  labels,
   countries,
   shippingOptions,
   selectedShippingOptionId,
@@ -39,15 +42,15 @@ export function CheckoutForm1ShippingStep({
   formatMoney: formatMoneyProp,
   fieldErrors,
   fieldDescriptions,
-}: CheckoutForm1ShippingStepProps) {
+}: CheckoutShippingStepProps) {
   return (
-    <FieldGroup className="grid gap-4">
+    <FieldGroup className="grid grid-cols-1 gap-4">
       <Field data-invalid={!!fieldErrors?.address?.length}>
-        <FieldLabel htmlFor="checkout-address">Street address</FieldLabel>
+        <FieldLabel htmlFor="checkout-address">{labels.addressLabel}</FieldLabel>
         <Input
           id="checkout-address"
-          placeholder="123 Main St"
-          value={formData.address}
+          autoComplete="street-address"
+          value={values.address}
           onChange={(e) => onChange('address', e.target.value)}
           {...checkoutFieldAria('checkout-address', fieldErrors?.address)}
         />
@@ -57,13 +60,14 @@ export function CheckoutForm1ShippingStep({
           description={fieldDescriptions?.address}
         />
       </Field>
-      <div className="grid gap-4 md:grid-cols-2">
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <Field data-invalid={!!fieldErrors?.city?.length}>
-          <FieldLabel htmlFor="checkout-city">City</FieldLabel>
+          <FieldLabel htmlFor="checkout-city">{labels.cityLabel}</FieldLabel>
           <Input
             id="checkout-city"
-            placeholder="San Francisco"
-            value={formData.city}
+            autoComplete="address-level2"
+            value={values.city}
             onChange={(e) => onChange('city', e.target.value)}
             {...checkoutFieldAria('checkout-city', fieldErrors?.city)}
           />
@@ -74,11 +78,11 @@ export function CheckoutForm1ShippingStep({
           />
         </Field>
         <Field data-invalid={!!fieldErrors?.state?.length}>
-          <FieldLabel htmlFor="checkout-state">State / Province</FieldLabel>
+          <FieldLabel htmlFor="checkout-state">{labels.stateLabel}</FieldLabel>
           <Input
             id="checkout-state"
-            placeholder="CA"
-            value={formData.state}
+            autoComplete="address-level1"
+            value={values.state}
             onChange={(e) => onChange('state', e.target.value)}
             {...checkoutFieldAria('checkout-state', fieldErrors?.state)}
           />
@@ -89,13 +93,14 @@ export function CheckoutForm1ShippingStep({
           />
         </Field>
       </div>
-      <div className="grid gap-4 md:grid-cols-2">
+
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <Field data-invalid={!!fieldErrors?.zipCode?.length}>
-          <FieldLabel htmlFor="checkout-zip">ZIP / Postal code</FieldLabel>
+          <FieldLabel htmlFor="checkout-zip">{labels.zipCodeLabel}</FieldLabel>
           <Input
             id="checkout-zip"
-            placeholder="94103"
-            value={formData.zipCode}
+            autoComplete="postal-code"
+            value={values.zipCode}
             onChange={(e) => onChange('zipCode', e.target.value)}
             {...checkoutFieldAria('checkout-zip', fieldErrors?.zipCode)}
           />
@@ -105,32 +110,49 @@ export function CheckoutForm1ShippingStep({
             description={fieldDescriptions?.zipCode}
           />
         </Field>
-        {countries && countries.length > 0 && (
-          <CheckoutForm1CountryField
+        {countries && countries.length > 0 ? (
+          <CheckoutCountryField
+            labels={labels}
             countries={countries}
-            value={formData.country}
+            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>Shipping method</FieldLegend>
+          <FieldLegend>{labels.shippingMethodLegend}</FieldLegend>
           <RadioGroup
             value={selectedShippingOptionId ?? ''}
             onValueChange={(value) => value && onSelectShippingOption?.(String(value))}
-            className="grid gap-3"
+            className="grid grid-cols-1 gap-3"
           >
             {shippingOptions.map((option) => (
               <Field
                 key={option.id}
                 orientation="horizontal"
-                className="justify-between rounded-lg border p-4"
+                className="flex-wrap items-start justify-between gap-3 rounded-lg border p-4"
               >
-                <FieldContent>
+                <FieldContent className="min-w-0">
                   <FieldLabel htmlFor={`shipping-${option.id}`} className="flex flex-col gap-0.5">
                     <span>{option.name}</span>
                     {option.description ? (
@@ -142,7 +164,9 @@ export function CheckoutForm1ShippingStep({
                 </FieldContent>
                 <div className="flex items-center gap-3">
                   {isAvailableMoney(option.price) ? (
-                    <span className="text-sm tabular-nums">{formatMoney(option.price, formatMoneyProp)}</span>
+                    <span className="text-sm tabular-nums">
+                      {formatMoney(option.price, formatMoneyProp)}
+                    </span>
                   ) : null}
                   <RadioGroupItem value={option.id} id={`shipping-${option.id}`} />
                 </div>

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

@@ -0,0 +1,478 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { Checkout, type CheckoutProps, type CheckoutValues } from './checkout'
+
+;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
+
+// jsdom lacks browser APIs some shadcn/ui primitives probe on mount.
+if (!window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+}
+
+const usd = (amount: string) => ({ amount, currencyCode: 'USD' })
+
+const formatMoney = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+const emptyValues = (): CheckoutValues => ({
+  email: '',
+  firstName: '',
+  lastName: '',
+  phone: '',
+  address: '',
+  city: '',
+  state: '',
+  zipCode: '',
+  country: '',
+  paymentMethod: '',
+  saveInfo: false,
+  newsletter: false,
+  promoCode: '',
+})
+
+const values: CheckoutValues = {
+  ...emptyValues(),
+  email: 'shopper@example.com',
+  firstName: 'Ada',
+  lastName: 'Lovelace',
+  address: '1 Analytical Way',
+  city: 'London',
+  state: 'LDN',
+  zipCode: 'EC1A',
+  country: 'GB',
+  paymentMethod: 'pp_system_default',
+}
+
+const summary = {
+  items: [
+    { id: 'line_1', name: 'Drill', quantity: 2, lineTotal: usd('90.00'), unitPrice: usd('45.00') },
+    { id: 'line_2', name: 'Battery', quantity: 1, lineTotal: usd('20.00') },
+  ],
+  totals: {
+    subtotal: usd('110.00'),
+    discount: usd('10.00'),
+    tax: usd('8.00'),
+    shipping: usd('5.00'),
+    total: usd('113.00'),
+  },
+}
+
+const baseProps = (): CheckoutProps => ({
+  presentation: 'stepper',
+  values: emptyValues(),
+  onChange: () => {},
+  formatMoney,
+})
+
+const renderMarkup = (props: Partial<CheckoutProps> = {}) =>
+  renderToStaticMarkup(<Checkout {...baseProps()} {...props} />)
+
+describe('Checkout — authoritative totals', () => {
+  it('renders supplied backend totals verbatim, even when they look inconsistent', () => {
+    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary })
+    expect(html).toContain('USD 110.00')
+    expect(html).toContain('USD 10.00')
+    expect(html).toContain('USD 8.00')
+    expect(html).toContain('USD 5.00')
+    expect(html).toContain('USD 113.00')
+  })
+
+  it('never fabricates a zero for an absent or malformed required total', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      orderSummary: {
+        items: summary.items,
+        totals: { subtotal: usd(''), total: usd('abc') },
+      },
+    })
+    expect(html).toContain('Totals are unavailable')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('preserves a legitimate zero total', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      orderSummary: {
+        items: summary.items,
+        totals: { subtotal: usd('0'), total: usd('0') },
+      },
+    })
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Totals are unavailable')
+  })
+
+  it('renders the controlled pending state without amounts', () => {
+    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary, totalsState: 'pending' })
+    expect(html).toContain('Updating totals')
+    expect(html).not.toContain('USD 113.00')
+  })
+
+  it('renders the controlled error state with the retry action', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      orderSummary: { items: summary.items },
+      totalsState: 'error',
+      onRetryTotals: () => {},
+    })
+    expect(html).toContain('We could not update the order totals')
+    expect(html).toContain('Retry')
+  })
+
+  it('renders no total row when the host supplies no totals and no retry action', () => {
+    const html = renderMarkup({ presentation: 'single-page', orderSummary: { items: summary.items } })
+    expect(html).toContain('Totals are unavailable')
+    expect(html).not.toContain('USD 0')
+  })
+})
+
+describe('Checkout — payment methods are data and carry no raw card input', () => {
+  const methods = [
+    {
+      id: 'pp_card',
+      name: 'Card',
+      type: 'card' as const,
+      isEnabled: true,
+      requiresSetup: false,
+      description: 'Pay by card',
+    },
+    {
+      id: 'pp_disabled',
+      name: 'Legacy transfer',
+      type: 'bank_transfer' as const,
+      isEnabled: false,
+      requiresSetup: false,
+      description: 'Not available in this region',
+    },
+  ]
+
+  it('renders one option per supplied method and the selected description', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      paymentMethods: methods,
+      values: { ...values, paymentMethod: 'pp_card' },
+    })
+    expect(html).toContain('Card')
+    expect(html).toContain('Pay by card')
+    expect(html).toContain('Legacy transfer')
+  })
+
+  it('renders no card number, expiry, CVV or cardholder input even for a card method', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      paymentMethods: methods,
+      values: { ...values, paymentMethod: 'pp_card' },
+    })
+    expect(html).not.toContain('checkout-card-number')
+    expect(html).not.toContain('checkout-expiry')
+    expect(html).not.toContain('checkout-cvv')
+    expect(html).not.toContain('checkout-card-name')
+    expect(html).not.toContain('CVV')
+  })
+
+  it('renders an empty state and keeps the rest of the checkout usable', () => {
+    const html = renderMarkup({ presentation: 'single-page', paymentMethods: [] })
+    expect(html).toContain('No payment methods are available for this region')
+    expect(html).toContain('Contact information')
+  })
+})
+
+describe('Checkout — truthful content and omitted unhandled controls', () => {
+  it('omits the promotional control when the host supplies no handler', () => {
+    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary })
+    expect(html).not.toContain('checkout-promo-code')
+  })
+
+  it('renders the promotional control when the host wires a handler', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      orderSummary: summary,
+      onApplyPromo: () => {},
+    })
+    expect(html).toContain('checkout-promo-code')
+  })
+
+  it('omits consents the host did not wire and renders them when labelled', () => {
+    const withoutConsents = renderMarkup({ presentation: 'single-page' })
+    expect(withoutConsents).not.toContain('checkout-save-info')
+    expect(withoutConsents).not.toContain('checkout-newsletter')
+
+    const withConsents = renderMarkup({
+      presentation: 'single-page',
+      labels: { saveInfoLabel: 'Save my details', newsletterLabel: 'Send me offers' },
+    })
+    expect(withConsents).toContain('checkout-save-info')
+    expect(withConsents).toContain('checkout-newsletter')
+  })
+
+  it('omits absent images and keys duplicate names by backend identity', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      orderSummary: {
+        items: [
+          { id: 'line_1', name: 'Cable', quantity: 1, lineTotal: usd('5.00') },
+          { id: 'line_2', name: 'Cable', quantity: 2, lineTotal: usd('10.00') },
+        ],
+        totals: { subtotal: usd('15.00'), total: usd('15.00') },
+      },
+    })
+    expect(html).not.toContain('src=""')
+    expect(html.match(/Cable/g)?.length).toBe(2)
+    expect(html).not.toContain('Free shipping')
+  })
+})
+
+describe('Checkout — bounded presentations', () => {
+  it('renders only the active step in the stepper presentation', () => {
+    const html = renderMarkup({ presentation: 'stepper' })
+    expect(html).toContain('Contact information')
+    expect(html).not.toContain('Shipping address')
+    expect(html).toContain('Checkout progress')
+  })
+
+  it('renders every section in the single-page presentation with the summary first in DOM order', () => {
+    const html = renderMarkup({ presentation: 'single-page', orderSummary: summary })
+    expect(html).toContain('Contact information')
+    expect(html).toContain('Shipping address')
+    expect(html).toContain('Payment')
+    expect(html.indexOf('Order summary')).toBeLessThan(html.indexOf('Contact information'))
+  })
+
+  it('appends the review step when the review option is enabled', () => {
+    const withoutReview = renderMarkup({ presentation: 'stepper' })
+    expect(withoutReview).not.toContain('Review your order')
+
+    const withReview = renderMarkup({ presentation: 'stepper', showReviewStep: true, values })
+    expect(withReview).toContain('Review')
+  })
+
+  it('renders all supplied review values in the single-page review section', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      showReviewStep: true,
+      values,
+      paymentMethods: [
+        { id: 'pp_system_default', name: 'Manual TEST', type: 'cash_on_delivery', isEnabled: true, requiresSetup: false },
+      ],
+    })
+    expect(html).toContain('shopper@example.com')
+    expect(html).toContain('1 Analytical Way')
+    expect(html).toContain('Manual TEST')
+  })
+})
+
+describe('Checkout — copy and formatting', () => {
+  it('renders supplied labels instead of the defaults', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      labels: {
+        title: 'Finalizar compra',
+        emailLabel: 'Correo',
+        contactHeading: 'Datos de contacto',
+        completeOrderLabel: 'Confirmar pedido',
+      },
+    })
+    expect(html).toContain('Finalizar compra')
+    expect(html).toContain('Correo')
+    expect(html).toContain('Datos de contacto')
+    expect(html).toContain('Confirmar pedido')
+    expect(html).not.toContain('Contact information')
+  })
+
+  it('formats amounts through the supplied formatter without a hardcoded symbol', () => {
+    const html = renderMarkup({
+      presentation: 'single-page',
+      orderSummary: summary,
+      formatMoney: (money) => `${money.currencyCode} ${money.amount}`,
+    })
+    expect(html).toContain('USD 110.00')
+    expect(html).not.toContain('$110')
+  })
+})
+
+describe('Checkout — interactions', () => {
+  let container: HTMLElement
+  let root: Root
+  let user: ReturnType<typeof userEvent.setup>
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    user = userEvent.setup()
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  const mount = (props: Partial<CheckoutProps> = {}) => {
+    act(() => {
+      root.render(<Checkout {...baseProps()} {...props} />)
+    })
+  }
+
+  const heading = () => container.querySelector('h2')?.textContent
+  const continueButton = () =>
+    Array.from(container.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Continue'),
+    )!
+  const submitButton = () =>
+    Array.from(container.querySelectorAll('button')).find((button) => {
+      const text = button.textContent ?? ''
+      return text.includes('Place order') || text.includes('Placing order')
+    })!
+
+  it('does not pre-select a country, shipping option or payment method', () => {
+    mount({
+      presentation: 'single-page',
+      countries: [{ value: 'GB', label: 'United Kingdom' }],
+      shippingOptions: [{ id: 'sm_std', name: 'Standard', price: usd('5.00') }],
+      paymentMethods: [
+        { id: 'pp_card', name: 'Card', type: 'card', isEnabled: true, requiresSetup: false },
+      ],
+    })
+    const radios = Array.from(container.querySelectorAll('[role="radio"]'))
+    expect(radios.length).toBe(2)
+    expect(radios.every((radio) => radio.getAttribute('aria-checked') !== 'true')).toBe(true)
+    expect(container.querySelector('#checkout-country')?.textContent).toContain('Select a country')
+  })
+
+  it('reports every edit with its field and value in both presentations', async () => {
+    for (const presentation of ['stepper', 'single-page'] as const) {
+      const onChange = vi.fn()
+      mount({ presentation, onChange })
+      await user.type(container.querySelector('#checkout-email')!, 'a')
+      expect(onChange).toHaveBeenCalledWith('email', 'a')
+      act(() => root.unmount())
+      root = createRoot(container)
+    }
+  })
+
+  it('gates advancing on the injected validation and reports the step as a notification', async () => {
+    const onStepChange = vi.fn()
+    const validateStep = vi.fn(() => false)
+    mount({ onStepChange, validateStep })
+    await user.click(continueButton())
+    expect(heading()).toBe('Contact information')
+    expect(onStepChange).not.toHaveBeenCalled()
+
+    const validateAll = vi.fn(() => true)
+    mount({ onStepChange, validateStep: validateAll })
+    await user.click(continueButton())
+    expect(heading()).toBe('Shipping address')
+    expect(onStepChange).toHaveBeenCalledWith('shipping')
+  })
+
+  it('advances without a validation provider and moves focus to the step heading', async () => {
+    mount()
+    await user.click(continueButton())
+    expect(heading()).toBe('Shipping address')
+    expect(document.activeElement).toBe(container.querySelector('h2'))
+  })
+
+  it('marks the active step with aria-current', async () => {
+    mount({ showReviewStep: true })
+    await user.click(continueButton())
+    const current = container.querySelector('[aria-current="step"]')
+    expect(current?.textContent).toContain('Shipping')
+  })
+
+  it('requires every applicable step before reporting a submission', async () => {
+    const onSubmit = vi.fn()
+    mount({ validateStep: (step) => step !== 'payment', onSubmit })
+    await user.click(continueButton())
+    await user.click(continueButton())
+    expect(heading()).toBe('Payment')
+    await user.click(submitButton())
+    expect(onSubmit).not.toHaveBeenCalled()
+
+    mount({ validateStep: () => true, onSubmit, values })
+    await user.click(continueButton())
+    await user.click(continueButton())
+    await user.click(submitButton())
+    expect(onSubmit).toHaveBeenCalledWith(values)
+    expect(container.textContent).not.toMatch(/thank you|order confirmed|success/i)
+  })
+
+  it('blocks repeat activation while a submission is pending', async () => {
+    const onSubmit = vi.fn()
+    mount({ presentation: 'single-page', submitting: true, onSubmit })
+    const button = submitButton()
+    expect((button as HTMLButtonElement).disabled).toBe(true)
+    await user.click(button)
+    expect(onSubmit).not.toHaveBeenCalled()
+  })
+
+  it('surfaces a failed submission with recovery while keeping the entered values', async () => {
+    const onRetrySubmit = vi.fn()
+    mount({ presentation: 'single-page', values, submitError: 'Payment was declined', onRetrySubmit })
+    expect(container.querySelector('[role="alert"]')?.textContent).toContain('Payment was declined')
+    const retry = Array.from(container.querySelectorAll('button')).find((button) =>
+      button.textContent?.includes('Try again'),
+    )!
+    await user.click(retry)
+    expect(onRetrySubmit).toHaveBeenCalledTimes(1)
+    expect((container.querySelector('#checkout-email') as HTMLInputElement).value).toBe(
+      'shopper@example.com',
+    )
+  })
+
+  it('does not select a method the host marked unavailable', async () => {
+    const onChange = vi.fn()
+    mount({
+      presentation: 'single-page',
+      onChange,
+      paymentMethods: [
+        { id: 'pp_disabled', name: 'Legacy transfer', type: 'bank_transfer', isEnabled: false, requiresSetup: false },
+      ],
+    })
+    const radio = container.querySelector('#payment-pp_disabled') as HTMLButtonElement
+    expect(radio.disabled).toBe(true)
+    await user.click(radio)
+    expect(onChange).not.toHaveBeenCalledWith('paymentMethod', 'pp_disabled')
+  })
+
+  it('is fully keyboard reachable in document order', async () => {
+    mount({ presentation: 'single-page' })
+    const order: string[] = []
+    for (let step = 0; step < 30; step += 1) {
+      await user.tab()
+      const active = document.activeElement as HTMLElement | null
+      if (!active || active === document.body) break
+      order.push(active.id || active.getAttribute('role') || active.tagName)
+      if (active.textContent?.includes('Place order')) break
+    }
+    const email = order.indexOf('checkout-email')
+    const address = order.indexOf('checkout-address')
+    const submit = order.findIndex((entry) => entry === 'BUTTON' || entry.includes('Place order'))
+    expect(email).toBeGreaterThanOrEqual(0)
+    expect(address).toBeGreaterThan(email)
+    expect(submit).toBeGreaterThan(address)
+    expect(order.filter((entry) => entry.startsWith('checkout-')).length).toBeGreaterThanOrEqual(9)
+  })
+
+  it('selects a shipping option through the host callback', async () => {
+    const onSelectShippingOption = vi.fn()
+    mount({
+      presentation: 'single-page',
+      onSelectShippingOption,
+      shippingOptions: [{ id: 'sm_exp', name: 'Express', price: usd('15.00') }],
+    })
+    await user.click(container.querySelector('#shipping-sm_exp')!)
+    expect(onSelectShippingOption).toHaveBeenCalledWith('sm_exp')
+  })
+})