shadcn.io is not affiliated with official shadcn/ui
Bulk Order Checkout Block for Radix UI
A wholesale order by the case: three flour and grain products with case steppers, units and price per unit worked out from the case, a meter against a $250 minimum, and a pallet delivery switch from 10 cases that replaces parcel freight and shows what it saves.
Installation
Overview
Take a trade order in cases and show what it comes to, with this bulk order for React with Radix UI. A compact header from Merriweather Mills, a mill that sells flour and grains by the case, sits over a hairline frame with a plus mark on each corner. A figure holds a Progress meter against the $250.00 minimum order and a sentence that says how much is missing. Three products each have a drawn thumbnail, the case ("Case of 12 bags, 1 kg each", $38.40) and a case stepper, with the units, the price of one unit and the line total beside it, all worked out in whole cents from the case. From 10 cases a Switch for Pallet delivery replaces the per-case parcel freight with one typed pallet price and the sentence under it says what that saves; under 10 cases it is off and says why. The totals follow, and Continue with 14 cases, the only Shine Button, names the case count and stays aria-disabled under the minimum. For wholesale, catering and any shop that sells in cases.
FAQ
How are units and the price of one worked out?
Each product has a case size and a case price in cents. Units are the cases times the size and the price of one unit is the case price divided by the size; the sample cases divide evenly. Line totals are cases times the case price, so there is no rounding to explain.
What does the minimum order cover?
The goods only, not freight: percentOf fills the meter from the goods total against MINIMUM (25,000 cents). Under it the button is aria-disabled and pressing it answers with how much is missing; it is not removed or greyed out, so it can still be reached and explained.
When can I choose a pallet, and what happens below 10 cases?
From PALLET_FROM cases. The switch is disabled below that and the sentence under it says "Pallet delivery starts at 10 cases. You have 8." If you drop below the line while the pallet is on, it switches off and the status line says so. The saving is the parcel freight (a typed amount per case) minus the pallet price, shown as "would save" while it is off and "saves" while it is on.
What changes on a phone?
Each product is a card: the stepper drops under the name, and the units, price of one and line total sit in three columns under it. The meter stays at the top and the foot with the button stays pinned to the bottom of the screen.
Where is tax?
Not here: the totals say "Total before tax" and the foot says prices exclude tax. A real wholesale checkout takes tax from your tax service once the delivery address is known, as the tax calculator block does.
What stays local in the demo, and how do I wire it up?
Everything: the products, case prices, the minimum and the freight rates are typed constants and nothing is ordered. In your app load the account's trade prices and rules from your API, send the case quantities on Continue and let the response confirm freight and tax.