Build / Organisms

BookingCelebration

organism
play-fn

The moment a meeting is booked.

The confirmation is on screen in the first frame — headline, caption and recap all present, nothing revealed on a timer. Booking is finished by the time this renders, so anything that withholds the outcome is describing work that is not happening; a staged reveal reads as confirming rather than confirmed, on the one screen where that misread is expensive.

The confetti is decoration laid over a complete screen, marked aria-hidden and holding no state. It pops once and it is gone. Turning it off removes pieces from a finished design rather than skipping to the end of one.

import { BookingCelebration } from '@meetcard/deck'

Example

<BookingCelebration caption="A calendar invite is on its way to ben@meetcard.com." summary={<BookingSummary items={items} />} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

The confirmation, with the confetti popping over it.

Default

Source

const Default = () => <div style={{ maxWidth: 420 }}>
    <BookingCelebration caption="A calendar invite is on its way to ben@meetcard.com." />
</div>;

Without the confetti — what skipAnimation and prefers-reduced-motion both render. The pieces are the only difference from Default: the confirmation underneath is the same screen, not a static substitute.

No Confetti

Source

const NoConfetti = () => <div style={{ maxWidth: 420 }}>
    <BookingCelebration
        caption="A calendar invite is on its way to ben@meetcard.com."
        skipAnimation />
</div>;

With the recap of what was actually booked, as the flow shows it.

With Summary

Source

const WithSummary = () => <div style={{ maxWidth: 420 }}>
    <BookingCelebration
        caption="A calendar invite is on its way to ben@meetcard.com."
        skipAnimation
        summary={<BookingSummary items={summaryItems} />} />
</div>;

A custom headline, for surfaces that book something other than a meeting.

Custom Headline

Source

const CustomHeadline = () => <div style={{ maxWidth: 420 }}>
    <BookingCelebration
        caption="We’ll text you if anything changes."
        skipAnimation
        headline="Your table is held." />
</div>;

The booking is done before this renders, so the outcome is readable immediately and the live region carries it — no working message, and nothing to wait for.

Announces The Outcome

Source

const AnnouncesTheOutcome = () => <div style={{ maxWidth: 420 }}>
    <BookingCelebration caption="A calendar invite is on its way to ben@meetcard.com." />
</div>;

The confetti is decoration: none of it reaches the accessibility tree.

Confetti Is Decorative

Source

const ConfettiIsDecorative = () => <div style={{ maxWidth: 420 }}>
    <BookingCelebration caption="A calendar invite is on its way to ben@meetcard.com." />
</div>;

Props

Prop	Type	Default	Description
`caption`	`ReactNode`	—	The line under it — usually where the invite went.
`headline`	`ReactNode`	`'You’re booked.'`	Headline on the confirmation. Defaults to “You’re booked.”
`skipAnimation`	`boolean`	`false`	Render the confirmation without the confetti. The screen is otherwise identical; `prefers-reduced-motion` does the same thing in the stylesheet, whatever this is set to.
`summary`	`ReactNode`	—	Read-only recap of what was booked.

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.