Manage Subscription Dialog Block for React

So you can see it without a click. On load the sheet is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Manage subscription button opens the real Sheet, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same SubscriptionFields and SubscriptionFoot components and share the block's state, so a plan chosen in the copy is there in the real sheet. In your app keep the Sheet and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

One small function, periodOf, takes the plan, the cycle and the seats and returns cents: the plan's monthly price, plus each seat past the ones it includes on Team, times 10 for a yearly cycle (ten months for twelve). Every figure on screen comes from it, so the foot, the sentence under the heading and the card behind the sheet always agree. It doesn't prorate: a change that takes effect mid-period needs an invoice preview from your billing provider, which you show in the same foot instead of the local sum.

Solo and Studio are a single seat, so the row says so and has no control; Team includes three seats and charges for each one after that, up to 25. What you type is kept between those limits, and the text is read the same in an Arabic page, where the number field prints Arabic-Indic digits. The field and the row keep their size when the plan changes, so nothing under them moves.

Everything. The prices and the Visa line are typed in the file (a real app takes cards with its payment provider's hosted fields, never in fields of its own), and Save changes only updates the plan card and the page's sentence and says, in the polite status, that nothing was charged. In your app send the draft to your billing API, show its result in the foot, and update the card from what it returns. There is no cancel here and no retention offer: those belong in a cancel flow of their own. Changes you don't save are dropped: Discard puts the controls back to what is saved and says so, and so do the close button and Escape. Save changes with nothing changed doesn't close anything: it says "No changes to save." Both buttons are always on screen and quiet when there is nothing to do, so the foot never changes size.

Yes. The real sheet is named by its title and described by its sentence, focus starts on the plan select and stays inside until it closes, and Escape and the close button return focus to Manage subscription. Each row's control is named by its label, the select and the segments by aria-labelledby. What is said while the sheet is open is said again inside it, because a modal hides the page's own status. The trigger is passed to SheetTrigger through render, and the sheet is controlled with open and onOpenChange.

The end edge, in either direction: the sheet's sides are physical, so the block reads the page's direction when it opens and picks the matching edge. On a phone the copy shown on load docks to the foot of the page as a bottom sheet with its actions pinned, and the real sheet takes the full width.