Commerce

Checkout summary panel

CheckoutSummaryPanel — exported from the library at `src/components/checkout/CheckoutSummaryPanel.tsx`. Awaiting a written description.

Open in Storybook

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.

Checkout summary panel

Rendered live from Storybook

Open

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.

Prop	Type	Default	Description
`link`*	`CheckoutSummaryLink`	—	What is being bought and who is selling it.
`onReset`	`() => void`	—	Fires when the buyer taps the space branding.
`enableDiscountCodes`	`boolean`	`false`	Shows the promo-code control above the breakdown.
`onTotalChange`	`(total: number) => void`	—	Quantities and promo codes are owned here, so the payable total is only known here. Reported up for whatever sizes the wallet sheet.
`isMobile`	`boolean`	`false`	Renders the mobile tree (branding row on top, Details accordion) instead of the desktop one. The app read `useIsMobile()`, which returns `false` on the first render and cannot be pinned — as a prop, both trees are renderable.
`promoCodes`	`Record<string, CheckoutPromoCode>`	`{}`	The redeemable codes. The app kept this table inline; as a prop a story can offer a different set, or none, without a fork.
`initialAppliedCodes`	`string[]`	—	Codes already redeemed on first render. Replaces the app's effect that read `?discountCode=` off `window.location` — the design system never reads the URL, and a story that did would not be static.
`initialPromoInputOpen`	`boolean`	`false`	Opens the promo input on first render, so the entry state is a story.
`initialPromoCode`	`string`	`""`	Seeds the promo field, e.g. to show the invalid-code message alongside it.
`initialPromoError`	`string`	`""`	Message under the promo field on first render.
`autoFocusPromoInput`	`boolean`	`false`	Focus the promo field when it opens. Off by default so a docs page full of stories does not fight over the caret.
`initialMobileExpanded`	`boolean`	`false`	Mobile Details accordion open on first render.
`initialDescriptionExpanded`	`boolean`	`false`	Description already unclamped on first render.
`initialEditingProductId`	`string \| null`	`null`	Id of the line item whose quantity dialog is open on first render — the editable ("empty") cart's stepper. Lets the overlay be a static story.
`initialEditingMultiProductId`	`string \| null`	`null`	Same, for the prefilled multi-item cart's stepper (a dialog on desktop, a bottom sheet on mobile).
`className`	`string`	—	Undocumented — add TSDoc to the prop in the library.

Reference

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

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