Activity Booking Sidebar
Step-by-step booking sidebar for a single activity. Progressively reveals product option → date (7-day strip + full calendar) → time slot → ticket mix → Book CTA. Manages its own progressive state and emits a complete selection on book.
core/activity-booking-sidebarInstallation
1 · Add registry to components.json
2 · Install component
Examples
Default
Full sidebar with product options, availability strip, slots, and ticket mix.
Activity booking flow
Side-by-side activity card + booking sidebar. Use this as the visual reference for activity detail pages.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
activityTitlereq | string | — | Activity name shown in the sidebar header. |
basePrice | Money | — | Base price displayed before ticket selection. |
productOptions | ProductOption[] | — | Product variants (e.g. Private / Shared). |
selectedOptionId | string | — | Selected product option ID. |
onOptionChange | (optionId: string) => void | — | Called when product option changes. |
availability | AvailabilityDate[] | — | 7-day availability data for the date strip. |
selectedDate | string | — | Selected date (ISO). |
onDateChange | (date: string) => void | — | Called when the date changes. |
slots | TimeSlot[] | — | Time slots for the selected date. |
slotsLoading | boolean | — | Shows slot loading skeleton. |
selectedSlotId | string | — | Selected slot ID. |
onSlotChange | (slotId: string) => void | — | Called when slot changes. |
ticketTypes | TicketType[] | — | Available ticket types. |
tickets | TicketSelection[] | — | Current ticket mix. |
onTicketsChange | (tickets: TicketSelection[]) => void | — | Called when ticket quantities change. |
onBook | (selection: { optionId?, date?, slotId?, tickets }) => void | — | Called when the user clicks Book. |
ctaLabel | string | "Book now" | Book button label. |
loading | boolean | false | Shows a loading skeleton. |