shadcn.io is not affiliated with official shadcn/ui
Order Confirmation Checkout Block for Vue
A bookshop's confirmation: the order number with a copy button, four dated steps worked out from one typed order date, the books in a disclosure, the ship-to address and Visa ending 4242, and an inline Change address that rewrites the address until a typed cut-off.
Installation
Overview
Tell people what happens next, and give them one chance to fix a mistake, with this order confirmation for Vue with Ark UI. A compact header from Jackdaw Books, an online bookshop, sits over a hairline frame with a plus mark on each corner and a side cell. The main cell shows the order number with a Copy Button, an ordered list of four steps (placed, packed, shipped and arrives) whose dates are counted from one typed order date, so "Arrives Tue 20 Oct to Thu 22 Oct" never depends on the clock, and the three books in a Collapsible with their prices in whole cents. The side cell has the ship-to address, the card as "Visa ending 4242" beside a two-letter tile, and a Change address Button that opens two Fields in the same cell (the cell keeps its height) until a typed cut-off; Save rewrites the address on the page and Cancel leaves it. Track this order is the only Shine Button, a link. For the page after payment, in any shop that ships goods.
FAQ
How are the dates worked out?
PLACED holds the order date as a year, month and day, and each step has a first and last day count after it. dayText builds the weekday and date with Date.UTC and the getUTC… methods, so the result is the same in every time zone and on the server and the client. Packed is one day after the order, shipped two, and the arrival is a range from six to eight days.
How does Change address work?
It swaps the address and its button for two fields (street and number, town and postcode) in the same grid cell, with the hidden view kept in place and inert, so the side cell never changes height. Focus moves to the first field. Save checks that both are filled, says which one is missing in a problem line and in the status line, and otherwise rewrites the address on the page and returns focus to Change address. Cancel leaves it as it was. The cut-off, 14:35 UTC, is typed text: in your app compare it with the server's clock and disable the button after it.
What does the copy button copy?
Only the order number. The button is named "Copy order number JB-48217", its label does not change and the polite status line says "Copied order number JB-48217." once the clipboard accepted it.
Why are the items in a disclosure?
The confirmation is about what happens next, so the books are one tap away rather than in the way. The trigger shows the count and the goods total, the list shows each title with its price and the shipping line, and the closed content is inert so it cannot be tabbed into.
How is the Track this order link built?
asChild around an a element.Point href at your tracking page.What stays local in the demo, and how do I wire it up?
Everything: the order, the dates and the address are typed or kept in the block's state, and the new address is never sent anywhere. In your app, render the order your API returns, send the edited address to it before the cut-off and show a failure in the status line, and send the confirmation email from the server.