shadcn.io is not affiliated with official shadcn/ui
Loyalty Points Checkout Block for Solid
A points step for a bakery order: a balance of 4,820 points and a native slider in steps of 100, limited to half the order with a 500-point minimum, a drawn bar of what points cover, and the credit, points remaining, amount to pay and points earned worked out.
Installation
Overview
Let people spend their points within the rules, with this loyalty points checkout for Solid with Ark UI. A compact header from Eastry, a bakery with a points card, sits over a hairline frame with a plus mark on each corner. The first band shows the balance (4,820 points, Hearth tier) as the headline figure beside how many points are in use, a drawn bar that splits the $32.00 order into the part points cover and the part still due by card, and a slider for the points to use. The slider is a native range input in steps of 100, so the arrow keys, Home and End work, and it stops at 1,600 because points may pay for half the order at most. The rules are typed and stated when they bite: 100 points are worth $1, at least 500 must be used or no credit is applied, and half of the order is the most. A second band lists the order and, beside it, the credit, the points remaining, what you pay and the 4 points per dollar you will earn on the part paid in money. The only Shine Button is labelled with the choice ("Use 1,000 points"). It's built from Shine Button and Guides, with a CSS entrance only. For points cards, stamp cards and any shop that lets people spend what they have earned.
FAQ
What are the rules, and where do I change them?
They are constants at the top of the file: STEP (100), MIN_USE (500), POINT_CENTS (one point is one cent), EARN_RATE (4 points per whole dollar paid in money) and BALANCE. The slider's end, maxOf, is half the order in whole steps, within the balance. The line under the slider shows the rule that applies right now: the minimum while you are between 100 and 400, the half-order cap at the end, and the plain rule otherwise.
What happens between 100 and 400 points?
The slider moves there, but no credit is applied: "Using" stays at 0, the sums show the full price by card, the button reads "Continue without points" and the line under the slider says that the minimum is 500. Nothing jumps when you cross 500, because the slider's position is the only state and the rest is worked out from it.
Why does earning go down when I spend points?
Because points are earned on what you pay in money, and spending points means paying less in money: at 4 points per dollar, $32.00 by card earns 128 points and $16.00 earns 64. All figures are whole cents and whole points, and the earned points are rounded down to whole dollars paid.
How accessible is the slider?
It is a native range input with a visible label, and aria-valuetext says what the value means ("1,000 points, $10.00 off", or "below the minimum, no credit"), so a screen reader reads the effect and not just a number. The bar is decoration with the same facts in the figure's name and in the list beside it, and the polite status line only speaks after you press the button.
Does it work right to left?
Yes. The bar and every amount keep their own direction inside a right-to-left page, counts sit in isolated spans, and the hairline cells and the foot use logical sides.
What stays local in the demo, and how do I wire it up?
Everything: the balance and the order are typed, and pressing the button only says what would have been used. In your app read the balance and the earning rules from your loyalty service, place a hold for the points when the order is created, release it if the order fails, and send the same figures the page showed so the customer is charged what they saw.