shadcn.io is not affiliated with official shadcn/ui
Subscription Swap Preview Billing Block for Vue
A year-ahead cost of swapping plans: pick the target in a toggle and see a figure of the next 12 invoices, staying against swapping, the difference over a year, what is due today and the next invoice.
Installation
Overview
Let customers see what a plan swap costs over a year before they make it, with this swap preview for Vue with Ark UI. A compact header names the current plan and holds a Toggle Group of the plans to swap to; the chosen one is solid foreground. Inside a hairline frame with a plus mark on each corner, a hand-built figure draws the cumulative cost over the next 12 invoices on one scale: staying on the current plan as a dotted line, swapping as a solid line that starts from the one-off pro-rated difference. A headline above it states the result in words ("Over a year: $640.32 more" or "less"), and a legend under it gives both totals. A Data List holds what is due today, or the credit if the new plan is cheaper, and the next invoice; the only Shine Button confirms. It's built from Toggle Group, Data List, Shine Button and Guides, with an SVG figure and a CSS entrance only. For plan settings and upgrade or downgrade flows.
FAQ
How do I fill it with my plans?
Edit the constants at the top: CURRENT is the plan the account is on, TARGETS lists the plans it could swap to, each with an id, a name and a monthly price in cents, and AS_OF, CYCLE_START and CYCLE_END give the date and the billing cycle the pro-rated difference is worked out from. Everything on the page, including the figure's scale, derives from those.
What exactly does the figure draw?
Two lines over invoices 0 to 12. Staying is the current price times the number of invoices. Swapping is the pro-rated difference due today, the new plan's days remaining minus the old plan's unused days, rounded half up in cents, plus the new price for each invoice. The headline is the gap between the two lines at invoice 12. It ignores tax, discounts and later price changes, so treat it as a preview and use your billing provider's upcoming-invoice preview for the real charge.
Is the figure accessible?
The drawing is hidden from assistive technology and the same facts are in text: the headline, the legend with both totals, and a table of the cumulative cost after each of the 13 points, available to screen readers inside the figure. The lines differ by style as well as position, dotted against solid, so they do not rely on colour.
What does Confirm swap do?
It marks the swap as kept in local state and says so in a polite status message: nothing is scheduled or charged. Choosing another plan clears it. In your app send the chosen plan id to your server in confirm, let it change the subscription at the right moment, and show its result in the status line.