Skip to content

Commerce

Post purchase confirmation modal

PostPurchaseConfirmationModal — exported from the library at `src/components/checkout/PostPurchaseConfirmationModal.tsx`. Awaiting a written description.
Available
Ports as-is

Examples

Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Post purchase confirmation modal

Rendered live from Storybook

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

PropTypeDefaultDescription
scenario*PostPurchaseScenario—Undocumented — add TSDoc to the prop in the library.
products*CheckoutLineItem[]—What was bought. Sorted highest-price-first; the top row is the buyer's.
buyerEmail*string—Undocumented — add TSDoc to the prop in the library.
buyerNamestring—Display name. Falls back to "You".
currencystring"AUD"ISO code passed to `Intl.NumberFormat`. Fixed locale, so output is stable.
existingTierNamestring—The tier the buyer already holds — used by `"upgrade"`.
onClose*() => void—Undocumented — add TSDoc to the prop in the library.
openbooleantrueRenders nothing when false. The app mounted this conditionally from the page; as a prop the modal can be toggled from a story's controls.
initialUpgradeChoicePostPurchaseUpgradeChoice"upgrade"Upgrade radio selection on first render.
upgradeChoicePostPurchaseUpgradeChoice—Fully controlled upgrade selection — pins each branch as a static story.
onUpgradeChoiceChange(choice: PostPurchaseUpgradeChoice) => void—Undocumented — add TSDoc to the prop in the library.
initialAssignmentsRecord<string, string>{}Seeds the per-seat assignee fields, keyed by `"{productId}-{index}"`.
initialAssigneestring""Seeds the single assignee field in the upgrade scenario's "assign" branch.
lockBodyScrollbooleanfalseSets `document.body.style.overflow = "hidden"` while mounted. Off by default: a story should not reach out and freeze the docs page around it.
disablePortalbooleanfalseRender in place instead of portalling to `document.body`. The portal exists so page stacking contexts can't clip the overlay; a docs page wants it in flow.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source
src/components/checkout/PostPurchaseConfirmationModal.tsx
Portability
Copies across unchanged — only the utils import path moves.