shadcn.io is not affiliated with official shadcn/ui
Checkout Storefront Block for Radix UI
An order split into two parcels, one in stock and one on backorder, each with its ship date and shipping charge, and a switch that merges them into one parcel on the later date with one charge and a derived summary.
Installation
Overview
Say plainly when an order ships in pieces, with this checkout summary for React with Radix UI. A header names the shop, Hobson & Flatt, and says what the block is. A hairline frame with a plus mark on each corner holds an order of three pieces where two are in stock and one is on backorder: parcel 1 (the shelf unit and the desk lamp) ships Wed 14 Oct and parcel 2 (the armchair) ships Tue 3 Nov, each as its own hairline cell with its state, its date, its pieces and its shipping charge. A Switch reads "Ship everything together on Tue 3 Nov": turning it on merges the two into one parcel on the later date with one shipping charge, the larger of the two, and the summary, the heading and the status line say what changed and how much it saves. Both views sit in one grid cell, so the panel never changes height. Place order is the one Shine Button. It's built from Switch, Shine Button and Guides, with a CSS entrance only. For furniture and other made-to-order shops, backorders or any order that can ship in pieces.
FAQ
How do I fill it with my own order?
Edit PIECES (each with an id, a name, a variant, a price in whole cents and a kind for its drawing) and FIRST and SECOND, the parcels: their pieces, the ISO ships date, the charge for shipping that parcel on its own and a state line. The merged view is derived from them: all pieces, the latest date and the largest charge.
How is the merged shipping charge worked out?
It is the larger of the two parcels' charges, since one heavier parcel replaces both. The summary shows the pieces' subtotal, the shipping for the parcel count shown and the total, all in whole cents, and the line under the switch says what turning it on saves. If your carriers price a combined parcel differently, change chargeOf and nothing else.
Why doesn't the panel jump when I turn the switch?
The split view and the merged view are stacked in one grid cell, and the one that is not shown is invisible, inert and hidden from assistive technology. The cell is as tall as the taller view, so the totals, the switch and the Place order button stay where they are.
What stays local, and how do I wire it to a real order?
Nothing is ordered or charged: Place order says "No order is placed in this demo". To wire it up, load the parcels from your order API, send the switch's value with the order, and replace place with the call that creates it. Dates are fixed ISO strings written in UTC, so they read the same on the server and in every time zone.
Is it accessible?
The switch is named for what it does and the status line, a polite live region present from the start, announces the new parcel count, date and shipping. Dates are in time elements, prices are written out, the hidden view is removed from the accessibility tree and the drawings are hidden from assistive technology. The switch is drawn in the foreground colour, so nothing competes with Place order.