shadcn.io is not affiliated with official shadcn/ui
Store Credit Storefront Block for React
A store-credit page for a bicycle shop: three credit lots with expiry-based status, three sample orders, a Use my credit switch, and an allocation spent earliest expiry first with a bar of what credit covers and what you pay.
Installation
Overview
Show a shopper exactly how their credit would be spent, with this store-credit page for React with Base UI. A header names the page and says what Cartwheel & Co is. A hairline frame with a plus mark on each corner holds a Toggle Group of three sample orders and a Switch, Use my credit on this order; a table of three credit lots with the amount, a status worked out from a fixed date (expires in 12 days, active until a date, or expired and not spendable) and, when the switch is on, what each lot pays toward the order; and a bar of what credit covers against what the shopper pays, with the two figures in words. Lots are spent soonest expiry first, an expired lot is skipped, and the shares always add up to the credit used. It's built from Toggle Group, Switch, Badge and Guides, with a CSS entrance only. For a credit balance page, a returns-credit explainer or a shop's account area.
FAQ
How is the credit shared between lots?
The lots that have not expired are sorted by expiry date and each pays the smaller of its amount and what the order still needs. The shares are whole cents and add up to the credit used, which never exceeds the order total.
How do I use my own lots?
Edit LOTS (an amount in cents, an ISO expiry date and a name) and ORDERS, the sample totals in cents. The status text, the Not spendable badge and the allocation are derived from the dates and the fixed AS_OF.
How does a lot show it is about to expire?
A lot within thirty days says "Expires in N days"; further out it says "Active until" the date; one past its date says "Expired" with a Not spendable badge and is skipped by the allocation.
What stays local, and how do I wire it to a real order?
Applying credit only changes the page, and the status line says nothing was spent. To wire it, read the lots from your credit ledger, send the chosen allocation with the order and let your server decide what to redeem.