Why This Matters
The Add-ons section is where Tickets Only guests on the “No Extra Bundle” path can turn a show ticket into a fuller experience. Guests who arrive for a birthday, anniversary, or date night can pre-order extras that require kitchen and bar prep time — champagne on arrival, a birthday dessert, a romantic table setup. Surfacing these options at the point of booking gives the operations team a reliable signal to prepare ahead, while giving guests a more convenient way to plan their evening. It is entirely optional; a guest can skip it and continue to Guest Details.How It Works
The Add-ons section appears after Menu Review when the guest selects “No Extra Bundle” on the Tickets Only path and add-on offers exist for the selected event. This is the fourth option in the Ticket Only tab — after the three bundle tiers, the guest can choose to skip bundle inclusions entirely and instead build their experience a la carte through add-ons. If the guest selects any of the three bundles, they proceed through Menu Review and then directly to Guest Details — add-ons are not shown because their bundle inclusions already cover the available fulfillments. Add-ons are hidden for Dinner Show and VIP bookings, which include their fulfillments as part of the pack. Accordion sections by category — Add-ons are grouped into collapsible accordion panels, one per category. Each panel is collapsed by default so the page does not overwhelm the guest with a long list. Opening a panel reveals all available add-ons in that category as check cards. The categories follow a fixed display order: Food, Beverage, Dessert, Cocktail, Wine, Beer, Service, Upgrade. Check cards with quantity picker — Each add-on renders as a check card showing its name, description, price, and a ”+” quantity control once selected. The card has three interactive states:- Unselected — the card is clickable and shows only name, description, and price.
- Selected — a gold checkmark replaces the empty checkbox, and a plus/minus quantity control appears so the guest can order for more than one person.
- Locked — when an add-on is included as part of a bundle, the card is non-interactive, shows a lock icon, and displays “Included” instead of quantity controls.
Key Concepts
Per-person vs per-party pricing — Add-on prices are displayed per unit (per person, per bottle, per serving). The total for each add-on line isunit price x quantity, computed by the backend pricing engine. The frontend displays the unit price label and lets the guest use the quantity picker to adjust.
Addon visibility rules — The current booking flow treats add-ons as a Tickets Only fallback path. They are shown only when selectedType === TicketsOnly, no ticket-only bundle is selected, no five-guest table hold is selected, and at least one add-on offer exists for the selected event. Future refactoring should model add-ons as offers whose conditions are based on booking path, selected offer state, and event eligibility.
Locked add-ons — When a bundle or table offer includes a fulfillment that is also sold as an individual add-on, that add-on appears in the list in a locked state. The guest cannot uncheck it because it is already covered by their bundle. Locked add-ons display a lock icon and “Included” label.
Occasion highlights — The isHighlighted flag on each add-on is set based on the occasion the guest selected. A Birthday occasion flags birthday-themed add-ons; a Date Night occasion flags romantic add-ons. The highlighted add-ons are visually distinguished and their category accordion is pre-opened so the guest sees the relevant options immediately.
Addon line items — Selected add-on quantities are stored in selectedAddonQuantities. The actual line items (id, name, quantity, unit price, line total) are derived from the backend estimate response’s itemized array. This keeps frontend pricing in sync with backend computation — the frontend never recalculates addon totals independently.
Addon Categories
The accordion panels appear in this fixed order for every show:| Category | Typical Items |
|---|---|
| Food | Sharing platters, side dishes |
| Beverage | Soft drinks, juices, water |
| Dessert | Birthday cake, celebratory sweets |
| Cocktail | Pre-mixed cocktails, mocktails |
| Wine | Wine bottles, wine pairings |
| Beer | Local and imported beer options |
| Service | Gratuity, front-of-house setup |
| Upgrade | Priority seating, VIP arrangements |
Technical Details
The Add-ons section is driven by three derived context values:| Field | Type | Description |
|---|---|---|
currentAddOns | CatalogAddonItemWithHighlight[] | null | The full list of available add-ons for the current show and date, filtered by visibility rules |
addonCardSections | Array<{ type, label, addOns: AddonCardModel[] }> | Add-ons grouped by category, with each card enriched with isSelected, isLocked, isHighlighted, and quantity state |
addonLineItems | AddonLineItem[] | Selected add-ons as line items, derived from backend estimate itemized rows — this is the source of truth for pricing |
currentAddOns is null when the add-ons section should not be shown. It is populated only when: selectedType === TicketsOnly AND no bundle selected AND no five-guest table offer selected AND at least one add-on exists for the event. Switching to Dinner Show, VIP, or selecting a bundle hides the section entirely.
Occasion highlight logic — addon.isHighlighted is set by the backend based on the occasion stored in context. The occasionLabel and occasionPreparationMessage fields render the highlighted banner above the accordion when an occasion is active.
Locked addon state — lockedAddonIds is a Set<string> populated when a bundle includes a fulfillment that is also a standalone add-on. The AddonCheckCard component uses isLocked to prevent toggle interactions and display the lock icon.
See also: Fulfillment concept — how add-ons map to fulfillment items for kitchen and bar prep. Fulfillment items list — the full add-on catalogue with costs and prices. Offer concept — how offers are composed of fulfillments.