Upgrade Plan Dialog Block for React

So you can see it without a click. On load the dialog 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 Upgrade button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same UpgradeFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Edit LIMITS: each has a label, the before text for the plan you are on, the after text for the next one, and a tag, the word shown beside a changed limit (more or new). The table has three columns on every screen, with the tag moving under the value on a phone, and each value is an isolated run of text so it reads right in a right-to-left page. The arrow in an After cell mirrors there. Nothing here is a struck-through price: the dialog shows the new limits, not a discount.

Only the Scale head: $119 a month billed monthly, or $99 a month billed yearly, with a line saying what yearly saves. Your own plan's price stays as it is. What an upgrade costs part-way through a billing period (proration) isn't shown here, because that belongs on a billing page: ask your provider for an invoice preview and show it in the same dialog if you need it.

Everything. Upgrading changes the meter and the sentence behind the dialog and says, in the polite status, that nothing was upgraded or charged. The header's button becomes Start over, which puts the page back on Team to try the other cycle. In your app send the plan and the cycle to your server, wait for its answer, and update the meter from what the plan really allows.

Yes. The real dialog is named by its title and described by its sentence, focus starts on the yearly switch and stays inside until it closes, and Escape, Not now and the close button return focus to Upgrade. The table has a caption, column headers and row headers, and the switch is named by aria-label. The trigger is passed to DialogTrigger through render, and the dialog is controlled with open and onOpenChange.

The copy shown on load docks to the foot of the page as a bottom sheet with its buttons pinned, and the two plan heads stay side by side with the arrow between them. The table keeps its three columns at 320 pixels, which is why the tags sit under the values. The real dialog keeps the Dialog's own phone layout, a sheet stuck to the bottom of the screen.