WaitlistJoinForm

Status

Planned — React component not yet implemented. This molecule is a catalog entry only; nothing is exported from the barrel yet, so no live preview renders above and the intended API below is not importable today.

Usage

Sold-out event waitlist signup with email + notification preference. Render it when a ticket type is sold out — in the slot where QuickBuyBar would otherwise offer "Buy Now". Not a Newsletter variant: Newsletter is the site-wide marketing list subscription, while this form is event-scoped (eventId), carries an SMS preference, and its onJoin callback returns void — the parent owns the async join, errors, and queue-position display.

// NOT YET EXPORTED — intended API once the component ships (status: planned).
// import { WaitlistJoinForm } from '@epasslive/design-system'

<WaitlistJoinForm
  eventId={event.id}
  onJoin={(email, notifySms) => joinWaitlist(event.id, email, notifySms)}
/>

Props

Accessibility

• Visible label bound to the email input via label htmlFor — never aria-label-only (WCAG 1.3.1 / 4.1.2).
• Validation errors: aria-invalid on the input, error wired via aria-describedby with role="alert" (WCAG 3.3.1).
• Success announced in a role="status" / aria-live="polite" region including the queue position as text — never color or position alone (WCAG 4.1.3).
• aria-busy + disabled submit with a "Joining…" label while the join is in flight.
• Focus order: email → SMS-preference checkbox → submit; focus moves to the success announcement after joining.
• All controls meet the 44×44 tap minimum via --ep-tap-min (WCAG 2.5.5).

Internationalization

No waitlist i18n keys exist yet; the full copy set (email label/placeholder, SMS-preference label, submit/submitting, success + queue position, error variants) needs locale-aware strings. The queue-position sentence is the ordinal trap — EN "You are 42nd in line" vs FR "Vous êtes 42e dans la file" — and must come from a locale-aware ordinal formatter (next-intl select-ordinal or Intl.PluralRules), never string concatenation.