Passer au contenu principal

WillCallPicker

Planned

Will-call ticket pickup selector — choose pickup location, date, and time slot. Shows ID requirements. Critical UX pattern: will-call pickup.

Categorymolecules
Sourcepatterns/molecules/willcallpicker.html
AI HintPlanned molecule — no React component exists yet (not exported from the barrel). Will-call (box-office) pickup location selector for the ticket-delivery step: a radiogroup of WillCallLocation options (name, hours, address, ID requirements) with controlled selection via selectedLocation/onSelect; only the location choice is specced — the pickup date + time-slot composition (DatePicker + TimePicker, NOT DateRangePicker) is future scope. NOT a SelectionCard preset (SelectionCard is the post-pickup confirmation display) nor a Listbox (all options visible, radiogroup semantics). Data prerequisite: no structured pickup-location source exists yet — event delivery_config.pickup is a boolean + free-text pickup_comment; a pickup-options endpoint is required before adoption.

Will-call pickup location selector for box-office ticket collection. Status: planned — no React component yet; this page documents the intended contract. Composes: RadioGroup (location choice) + DatePicker + TimePicker (pickup date/time) — NOT DateRangePicker.

WillCallPicker

Form & Choice — Family 3

Radiogroup of will-call pickup locations (name, hours, address, ID requirements). Only the location choice is specced; the pickup date + time-slot composition (DatePicker + TimePicker) is future scope.

Design reference mock — not a rendered component. The top picker is interactive; the second shows the selected state.

Status

Planned molecule — the React component is not yet implemented. Nothing is exported from the DS barrel; the render above is a design reference mock typed to the planned interface, not the component.

Composes: RadioGroup (location choice) + DatePicker + TimePicker (pickup date/time) — NOT DateRangePicker. Only the location choice is specced today; the date + time-slot props are future scope.

Planned API

Sketch of the intended contract. Until the component ships, this is not importable code.

interface WillCallPickerProps {
  locations: WillCallLocation[];
  selectedLocation?: string;
  onSelect: (locationId: string) => void;
}

// WillCallLocation (canonical shape — to be defined in shared-types):
// { id: string; name: string; hours?: string; address?: string; idRequirements?: string }

// Sketch — WillCallPicker is planned and NOT exported from the barrel yet.
<WillCallPicker
  locations={pickupLocations}
  selectedLocation={selectedLocation}
  onSelect={(locationId) => setSelectedLocation(locationId)}
/>

When to use

  • Checkout ticket-delivery step when the customer chooses will-call pickup.
  • Post-purchase ticket-delivery page (change pickup location before the event).
  • Any box-office pickup flow that must surface hours and ID requirements per location.

Accessibility

Planned contract (no implementation exists to audit yet): the list root exposes role="radiogroup" (patterns.ts ariaRole) with a group label; each option exposes aria-label with the location name and hours (patterns.ts assertion, WCAG 4.1.2), reflects state via aria-checked, and keeps a 44×44px tap target (--ep-tap-min) per WCAG 2.5.5; keyboard navigation follows the WAI-ARIA APG radio-group pattern (arrows move + check, single tab stop).

Props

Prop
Type
Default
Description
locations*
WillCallLocation[]
—

Available will-call pickup locations with hours and ID requirements. Must have at least 1 item (NASA Rule 5).

selectedLocation
string
—

Currently selected location id (controlled).

onSelect*
(locationId: string) => void
—

Fires when the user picks a location.

Props

Preview

WillCallPicker

Prop
Type
Required
Default
Description
locations
WillCallLocation[]
Required
—

Available will-call pickup locations (id, name, hours, address, ID requirements) rendered as a radiogroup; must have at least 1 item (NASA Rule 5). Caller supplies translated content.

selectedLocation
string
Optional
—

Currently selected location id (controlled); omit when nothing is selected.

onSelect
(locationId: string) => void
Required
—

Fires when the user picks a location; receives the selected location's id.

Quick use:<WillCallPicker />

Accessibility

ARIA roleradiogroup

Type

1 rule

NASA Rule 5

locations must have at least 1 item

ARIA

1 rule

WCAG 4.1.2

Each location must have aria-label with name and hours

Usage

Import

tsxSnippet
import { WillCallPicker } from "@epasslive/design-system"

Example 1

tsxSnippet
<WillCallPicker locations={pickupLocations} selectedLocation={selectedLocation} onSelect={handleSelect} />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules

Design System v4.1.0 | ePassLive