shadcn.io is not affiliated with official shadcn/ui
Loyalty Points Summary Billing Block for React Aria
See how long the next loyalty tier takes at your own monthly bill: points earned per invoice line at typed rates, a what-if of adding an add-on or going yearly, and the derived tier date that moves with it.
Installation
Overview
Turn a rewards balance into a plan, with this loyalty summary for React with React Aria. A compact header shows today's points. Inside a hairline frame with a plus mark on each corner, a Progress bar shows the points toward the next tier and what the tier gives. A ruled list shows what each invoice line earns, the studio plan, seats, add-ons, metered usage and an audit logs add-on that is not on the plan yet, each with its price, its points for each dollar and the points it adds, closing on the monthly total. A Toggle Group of three what-ifs, as is, add audit logs and go yearly, re-derives the points and a Data List says how many points are still needed, how long it takes and the invoice date the tier arrives on. The only Shine Button names the chosen change and applies it. For apps with a rewards or loyalty programme tied to spend.
FAQ
How do I fill it from my rewards system?
The constants at the top hold POINTS_NOW, the TIER (its threshold, name and benefit), the invoice day and the first invoice month, the EARNERS list of invoice lines with a monthly price and a points rate per dollar, and the extra AUDIT line. The monthly total, the number of invoices needed and the tier date are all computed from them.
How is the tier date worked out?
It divides the points still needed by the monthly points, rounds up to whole invoices, and counts that many invoices from the next one, each on the same day of the month. Going yearly is treated as one invoice that brings twelve months of points on its first day, so the tier arrives on the next invoice. Dates come from fixed values, not the clock, so the page reads the same on every load.
What stays local?
Pressing the button writes "added in this demo" in the status region; no points are awarded and no add-on is billed. To make it real, call your billing system to add the add-on or switch the interval, then refresh the points balance from your rewards service.
Why is the button sometimes inactive?
On "As is" there is nothing to apply, so the button is marked unavailable rather than hidden and pressing it says why in the status line. After a change is applied it is unavailable again until you pick another. Because it is not disabled, it stays in the tab order and can be read by a screen reader.
What does a screen reader hear?
The what-if group is named by its "Try a change" heading and each option is a toggle with a visible name. The progress bar is decoration with the figures beside it as text, and every number sits in its own element so it is not split. Changes are announced in a polite status region.