shadcn.io is not affiliated with official shadcn/ui
Referral Credit Checkout Block for Solid
The friend's side of a referral: a prefilled code, three named rules (not your own, first order, a $40.00 minimum) with the shortfall worked out in cents, and a summary that takes $10.00 off and says what the friend gets.
Installation
Overview
Let a friend's code do its work at the till, with this referral credit checkout for Solid with Ark UI. A compact header from Nutkin, a shop for children's clothes, says who sent you and what the offer is. Inside a hairline frame with a plus mark on each corner, a first band lists two order lines with a drawn thumbnail and a quantity stepper from 1 to 9. The second band holds the code: Maya's code is already in the Input because you followed her link, and Use code checks it. The three rules sit under it, each one met, not met or not checked yet, in words and a glyph rather than colour: not your own code, a first order only, and an order of at least $40.00. When the order is short the rule says what to do ("Add $6.00 to use it", worked out from the lines in whole cents), and raising a quantity clears it. A code that passes takes $10.00 off, the summary shows the credit and a line says what Maya gets, and Remove puts the total back. The summary keeps its rows whether or not the code is on, so nothing moves. Continue to payment is the only Shine Button. It's built from Input, Field, Button, Shine Button and Guides, with a CSS entrance only. For referral links, invite codes and any checkout where a code has rules.
FAQ
Which codes work in the demo?
Two, both typed in the file: MAYA-NUT7 is Maya's, so it passes the own-code rule, and SAM-NUT3 is yours, so it fails it ("This is your own code. Share it instead."). Anything else says it is not a code we know, in the code field's own problem line with an icon and words. Codes are normalised as you type (spaces dropped, upper case), so maya-nut7 works. Edit FRIEND_CODE and OWN_CODE to change them.
How are the rules checked?
By three small pure helpers, one per rule, each returning a state and a sentence. Own code compares the typed code with the visitor's own; first order reads PRIOR_ORDERS (0 here, so it passes); the minimum compares the subtotal in cents with MINIMUM and builds the shortfall as the difference. Until a known code is in, all three read "Not checked yet" with a hollow ring. The same helpers decide whether Use code applies, so the list and the result can never disagree.
What if I use the code and then lower the order?
The credit is derived, not stored: it is on only while the code is applied and every rule passes. Lower a quantity under $40.00 and the credit row empties, the total goes back up and the status line says "The code is off: add $6.00 to use it". Raise it again and the credit returns without pressing Use code a second time.
How is the money handled?
Every price is an integer number of cents and usd is the only place cents become text, so $22.00 plus $12.00 less $10.00 is exactly $24.00. The total before shipping and tax is the subtotal minus the credit; shipping and tax come at the next step because they depend on an address.
How do keyboard and screen reader users get the rules?
The rules are a real list under the code field. Each item starts with a visually hidden "Met:", "Not met:" or "Not checked yet:" so the state is spoken, the glyph (a check, a minus or a ring) is hidden from assistive technology, and one polite status line in the foot announces the result of Use code, Remove and every quantity change. A refused press moves focus to the code field.
What stays local, and how do I wire it up?
Everything: the two codes, the order and the credit live in the block's state and nothing is sent, ordered or charged. In your app, send the typed code to your referral endpoint, which returns whether it is valid and why not, show its reasons in the same list, and apply the returned credit to the order on the server. Never trust the browser for the discount.