shadcn.io is not affiliated with official shadcn/ui
Welcome Back Reactivate Subscription Billing Block for Solid
A welcome-back page where you choose what returns after cancelling (the plan, extra seats, priority support, a custom domain) and one sentence works out the monthly price, the day it resumes, that nothing is charged today and the days of access that remain.
Installation
Overview
Let a customer who cancelled come back on their own terms, with this reactivation page for Solid with Ark UI. It is a whole screen with the page's rails and one band across it, and a centred column holds the product's mark, a "Welcome back" heading and a sentence. Four Checkboxes in a Field set list what comes back with its price: the plan, extra seats, an add-on that ended and a custom domain. One sentence follows the ticks ("Resumes at $74.00 a month from 23 Oct. Nothing is charged today. 8 days of access remain.") and a Shine Button, the only colored control, reactivates. The result replaces the form in the same space, with a list of what came back and a link on. For apps whose customers cancel and return: reading, learning, music and productivity.
FAQ
How do I fill it from my billing provider?
CHOICES lists what the cancelled subscription held, each with an id, a name, a note and a monthly price in cents; START lists which are ticked when the page opens. ACCESS_ENDS and AS_OF are ISO dates and the days remaining are their difference in UTC. The price in the sentence is the sum of the ticked rows, so it can never disagree with the list. Replace the constants with the cancelled subscription's items and wire reactivate to the call that resumes it.
What if the plan is not ticked?
The add-ons ride on the plan. Pressing Reactivate with the plan unticked shows a line under the sentence ("Seats and add-ons need the Pro plan. Tick it too.") and moves focus to the plan's checkbox; with nothing ticked it asks for the plan. The same rule belongs on your server.
How are the checkboxes wired?
checked and onCheckedChange, and sits in a FieldLabel so the whole row is the target.A ticked box is solid foreground, not the primary color, so Reactivate stays the one colored control.What stays local in the demo, and how do I wire it?
Reactivate shows the result in the page and says "Reactivated in this demo. Nothing was charged." No account is resumed and no card is touched. Undo in this demo brings the form back with your ticks. In your app, call your billing provider in reactivate, keep the form on screen with the provider's reason if it refuses, and open the library only once the server confirms.
Where does focus go?
Nowhere on load. After Reactivate succeeds, focus moves to the result's heading, which is read at once, and the form is hidden and made inert in the same space so the page does not change height. Undo returns focus to the plan's checkbox. A polite status line reports each result.