OrderConfirmation

The page a buyer lands on after placing an order.

import { OrderConfirmation } from "@evolve-storefront/feature-order/order-confirmation";

Renders inside OrderProvider.

Design notes

Pure presentation, and it never fetches: orderPlace hands back the whole Order, so the caller already has everything on this page. A thin reference would have bought an immediate second query on the one page where a spinner is least welcome.

Finished is not the same as paid. Pay on account reaches this page owing its full amount, so the lead copy branches — see OrderConfirmationHeader.

children is an addition rather than a replacement here, unlike every other root in this package: a merchant putting FAQ content on the confirmation page wants it alongside the standard blocks, and making children replace them would mean re-composing four parts to add one. Compose the parts directly for a page that really is arranged differently.

Preview

PaidOpen in Storybook ↗

Usage

children is an addition here, not a replacement — unlike every other root in this package. A merchant putting FAQ content on the confirmation page wants it alongside the standard blocks, and making children replace them would mean re-composing four parts to add one.

<OrderConfirmation order={order}>
  <FaqBlock entries={cms.confirmationFaq} />
</OrderConfirmation>;

Props

Prop	Type	Description
order	Order	The order that was just placed. orderPlace returns it whole; a page reached from a payment return reads it with readOrderConfirmation.
vatDisplay?	VatDisplay	Net vs gross presentation. Defaults to gross.
dispatchWindow?	ReactNode	Already-phrased dispatch promise, e.g. "Ships within two working days".
carrier?	string	The carrier, where the project knows it before dispatch.
contact?	ReactNode	How to reach customer service — a link the app renders.
action?	ReactNode	A page-level action, rendered under the order number rather than after the blocks — "view this order in your history" is the one a signed-in buyer wants. More Separate from children because placement is the whole difference: children lands past the summary and the questions block, three sections from the number the action refers to.
accountOffer?	ReactNode	An offer to create an account, below the header: for a guest order, feature-auth's RegisterFromOrderForm. Nothing renders without it.
children?	ReactNode	CMS-driven content for this page: an FAQ block, a promotion, a survey. Rendered after the standard blocks, so a merchant can add to the page without ejecting it.
renderItem?	OrderLineItemRenderer<Order["lineItems"][number]>	Replace the line rows. The item type is derived from order.
headingLevel?	HeadingLevel	Heading level for the page title. Defaults to 1.

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to OrderConfirmation to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-order/order-confirmation.

OrderConfirmationHeader"Thank you", the order number, and a line that is true about the money.

Finished is not the same as paid. Only PAID says the payment arrived, and only CREDIT_OWED, an order on credit terms, is told to expect an invoice. Every other unpaid state, a payment still in flight included, gets a line that names no payment method.

Prop	Type	Description
order	Pick<Order, "orderNumber" | "paymentState" | "createdAt">
action?	ReactNode	A page-level action, rendered directly under the order number — most often "view this order in your history". The app supplies it, because only the app knows its own routes. More It belongs here rather than in the root's children, which lands three sections down the page, past the summary and the questions block.
headingLevel?	HeadingLevel	Heading level for the page title. Defaults to 1 — this is a page's own heading.

Any other props go to the root element, like on a plain HTML element.

OrderConfirmationNextWhat happens next, in the order it happens.

Everything here is a promise about the future, so every part of it is either the project's to state (the dispatch window, the carrier) or read from the order (the confirmation email, the delivery address). Nothing is invented: a package that defaulted a dispatch window would be committing a merchant to a delivery date.

Track & Trace and the invoice are described rather than linked, because at confirmation time there is no delivery yet — Order.deliveries fills in on shipment, and OrderDetailDeliveries is what renders it then.

Prop	Type	Description
order	Pick<Order, "customerEmail" | "shippingAddress" | "billingAddress">
dispatchWindow?	ReactNode	When the order is expected to leave the warehouse, already phrased — "within two working days". Only the project knows its own fulfilment promise, and a package that guessed one would be making a commitment on its behalf.
carrier?	string	The carrier, where the project knows it before dispatch. A plain string rather than a node: it goes inside a sentence, and an ICU placeholder takes a value, not markup.
headingLevel?	HeadingLevel

Any other props go to the root element, like on a plain HTML element.

OrderConfirmationQuestionsWhere to go with a question, and the answer to the commonest one: a change goes through customer service, because the order cannot be edited here.

Saying so is the point of the block. A buyer who spots a wrong address will hunt for an edit control, and the honest answer — talk to us — is cheaper for both sides than a hunt that ends in nothing. orderRevise is not offered: on a placed order that is the resume page's job.

Prop	Type	Description
contact?	ReactNode	The way to reach customer service — a link, rendered by the app because no URL enters this package. Omit it and only the "no longer changeable" line renders, which is still worth saying.
headingLevel?	HeadingLevel

Any other props go to the root element, like on a plain HTML element.