Booking Confirmation is a compact display widget that composes Badge, Timeline, and Button to present a confirmed booking summary with a calendar-add CTA. It is the end-state companion to the Meeting Scheduler (#55) and Availability Picker (#54), giving users a clear confirmation of their scheduled meeting or appointment. The widget is intentionally small in scope (size S) and focused on display rather than interaction.
Goals
Deliver a <BookingConfirmation> component that displays booking details in a confirmation card.
Compose Badge, Timeline, and Button primitives.
Include an “Add to Calendar” CTA that generates a downloadable .ics file or fires a callback.
Ship Storybook stories with realistic booking data.
Non-Goals
Booking modification or cancellation (separate action flows).
Date, time, duration, title, and optional organizer/attendee info
Calendar CTA
”Add to Calendar” button generating .ics content or firing callback
Stories
Storybook stories for confirmed, pending, cancelled states
Out of Scope
Area
Reason
Booking modification
Separate action flow
Cancellation
Separate action flow
Email sending
Application-layer concern
Multi-booking list
This is a single-booking confirmation card
Calendar API integration
.ics file is the portable standard; deeper integration is app-level
Users and Pain Points
User Groups
User
Description
Needs
Developers
Engineers building booking/scheduling features
A ready-made confirmation display widget
Designers
Design-system consumers
Consistent confirmation card UX
End Users
People who booked a meeting or appointment
Clear confirmation of what was booked and when
Pain Points
User
Pain Point
Impact
Developers
Building confirmation displays from scratch with badge, timeline, and calendar-add logic
Repeated boilerplate
End Users
Unclear confirmation UIs that do not show all booking details or offer calendar integration
Missed meetings due to forgotten bookings
Definitions
Term
Definition
Booking Confirmation
A display widget showing the details of a confirmed appointment or meeting
Status Badge
A styled label indicating the booking status (Confirmed, Pending, Cancelled)
Calendar Add CTA
A button that allows the user to add the booking to their calendar
ICS File
An iCalendar standard file that can be imported into calendar applications
Current State
Existing Behavior
The design system provides Badge for status labels, Timeline for event sequences, and Button for actions. There is no booking-confirmation widget that assembles these into a cohesive display.
Current Limitations
No booking-confirmation pattern or component.
No .ics file generation utility.
Timeline exists but is not applied to booking event sequences.
Existing Workarounds
Developers build custom confirmation cards with manual badge and detail layout.
Calendar-add functionality requires external libraries or manual .ics string construction.
Proposed Solution
Summary
Introduce <BookingConfirmation> that accepts booking details (date, time, duration, title, status, organizer, attendees) and renders them in a card with a status badge, a mini timeline, detail rows, and an “Add to Calendar” button. The calendar button either generates and downloads a .ics file or calls a custom onAddToCalendar callback.
Key Capabilities
Status badge with color-coded tone (success for confirmed, warning for pending, destructive for cancelled).
Booking details: date, time, duration, title, optional organizer and attendee names.
Mini timeline showing booking lifecycle (Requested -> Confirmed -> Upcoming/Completed).
Users see a confirmation card with a “Confirmed” badge at the top, followed by booking details (date, time, duration, title). A small timeline shows the booking progression. At the bottom, an “Add to Calendar” button downloads an .ics file. Optional secondary action buttons appear below.
Developer Experience
<BookingConfirmation
status="confirmed"
title="Product Demo"
date="2026-06-15"
time="14:00"
duration={60}
organizer="Alice Chen"
onAddToCalendar={()=>downloadIcs(bookingData)}
/>
Requirements
ID
Requirement
Priority
Notes
FR-001
BookingConfirmation displays booking details in a card
Must
-
FR-002
Status badge shows with appropriate tone coloring
Must
-
FR-003
Timeline shows booking lifecycle
Should
-
FR-004
”Add to Calendar” CTA is present
Must
-
FR-005
.ics generation utility is provided
Should
Built-in or callback
Priority Definitions
Priority
Meaning
Must
Required for this feature to ship.
Should
Important, but can be deferred if needed.
Could
Nice to have. Not required for initial release.
Functional Requirements
ID
Requirement
User Benefit
Priority
FUNC-001
status prop accepts "confirmed" | "pending" | "cancelled" and renders a color-coded Badge
Clear booking status
Must
FUNC-002
date, time, and duration render as formatted detail rows
Booking specifics at a glance
Must
FUNC-003
title renders as a heading within the card
Meeting context
Must
FUNC-004
organizer and attendees render when provided
Participant information
Should
FUNC-005
Timeline renders 2-3 steps based on status (Requested, Confirmed, Upcoming/Completed, or Cancelled)
Booking lifecycle context
Should
FUNC-006
”Add to Calendar” button fires onAddToCalendar callback or auto-generates .ics download
Calendar integration
Must
FUNC-007
Auto .ics generation creates valid iCalendar content from booking props