Cancel Subscription Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the page: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Cancel plan button opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Keep plan, and the copy stays closed until a reload. Both show the same ExitFields component and share the block's state, so what you chose in the copy is there in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Every pane sits in one grid cell and only the one for the chosen reason shows, so the alert never changes height and Tab never reaches a hidden field. Too expensive offers $4 a month for three months, and its button takes the offer and closes; not using it enough offers a pause of one, two or three months, with the resume date in the line under the select; a missing feature asks what is missing and goes on; switching offers a real export first; another reason offers nothing and says so. A quiet "No thanks, continue" skips the offer. The offers and the dates come from typed constants and AS_OF, never from the clock.

Yes. Download export is a Download Trigger that saves archivale-export.json, built in the browser from typed sample folders, and a polite message says it holds sample data. In your app point it at an endpoint that streams the person's real export, and say how long it takes if it is slow. It sits before the last step because a person who is leaving should be able to take their files with them first.

Because it ends something. On the last step the forward button becomes the catalog Button in its destructive variant, with its text mixed toward the foreground colour so it keeps its contrast on the tint in both themes, and the block has no Shine Button on that step. Keep plan stays the safe, focused choice, Back returns a step, and clicking outside never closes the alert. Nothing is cancelled here: the drawn plan card says "Ends Nov 14, 2026 (cancelled in this demo)" and the header button becomes Restore plan.

The real alert is named by its title and described by its sentence, and it opens with focus on Keep plan, so a stray Enter backs out. Each step puts focus on its first control and a polite message says which step you are on; Enter in a field does what the forward button does. Escape and Keep plan close it and return focus to Cancel plan. Keep plan is the focus target through initialFocus. After a confirmed choice the button that opened the alert is gone, so about 300 ms later focus moves to Restore plan.

All of it. No plan is cancelled, paused or charged: the choice updates the drawn plan card and says in a polite message that nothing was cancelled or charged, and Restore plan puts it back. In your app send the reason and the choice to your billing provider in submit, show its answer in the alert before you close it, and keep the reason for your own churn report; end the plan at the period's end, as the last step promises, not at once.