shadcn.io is not affiliated with official shadcn/ui
Pro-Rated Calculation Billing Block for Ark UI
A plan change worked out term by term: pick the day on a calendar of the billing cycle and see the credit for unused days, the new plan for the same days, what is due that day and the next invoice, each with its working.
Installation
Overview
Show customers exactly how a mid-cycle plan change is billed, with this proration calculator for React with Ark UI. A hairline frame with a plus mark on each corner holds two cells. The first is a Calendar of the current billing cycle, 12 Oct to 12 Nov, where days before today and the day the cycle ends are closed and the chosen day is solid foreground. The second is a Data List that works the bill out for that day in three lines, each with its derivation under its name: the unused days on the old plan as a credit, the new plan for the same days, and what is due that day, with the next full invoice under them. The amounts roll with Sliding Number as the date moves. A last band holds a status line and the only Shine Button, labelled with the day it will switch on. It's built from Calendar, Data List, Sliding Number, Shine Button and Guides, with a CSS entrance only. For billing settings, plan pickers and any app that prorates.
FAQ
How do I fill it from my billing provider?
The constants at the top of the file hold everything: CYCLE_START and CYCLE_END as ISO dates, AS_OF (the day treated as today), and OLD_PLAN and NEW_PLAN with a name and a monthly price in cents. Replace them with the subscription's current period and the two prices, and set AS_OF from the server's clock. The length of the cycle and the days remaining are derived from the dates, so a 28 or 30 day cycle needs no other change.
How is each line worked out?
In whole cents, one line at a time. The credit is the old plan's monthly price times the days remaining over the days in the cycle, rounded half up; the new plan's charge is worked out the same way; what is due is the charge minus the credit. Each line prints its working ("14 of 31 days at $29.00") so a customer can check it. It is a preview from your own prices: your billing provider computes the real charge, so in production show its upcoming-invoice preview in this layout.
Which days can be chosen, and does the keyboard work?
Any day from today to the day before the cycle ends. Earlier days and the renewal day are unavailable, and the previous and next month buttons move between October and November. The calendar is a grid you move through with the arrow keys, Home, End and Page Up and Page Down, and Enter or Space picks a day.
What stays local, and how do I wire the button?
Pressing Switch on a day only marks that day as scheduled in local state and says so in a polite status message: "Scheduled for 29 Oct in this demo. Nothing was charged." Picking another day clears it. In your app, send the chosen ISO date to your server in schedule, let it change the subscription and issue the prorated invoice, and show its result in the same status line.
What does a screen reader hear?
The cycle and the remaining days are in text under the calendar, the formula is a description list so every amount is read with its label and its working, and the credit is read as minus. Sliding Number keeps the real amount as hidden text and hides the rolling digits, so each figure is read once. The status line is a polite live region present from load.
How does it look on a phone?
The cells stack: the calendar first, then the formula under a ruled band, then the status line and the button in a foot that sticks to the bottom of the screen so the action never scrolls away. From the medium breakpoint the formula sits beside the calendar and the foot is an ordinary band.