Cancellation Runway Success Block for React

Nothing was cancelled or reactivated. The account, the reason and every date are typed or worked out from AS_OF, PERIOD_START and ACCESS_ENDS, and Reactivate only changes this page, saying so in a polite status line ("Plan reactivated in this demo. Nothing was changed or charged."). To wire it, post to your reactivation endpoint from reactivate, then build the period and the reason from what your billing API returns for the cancelled subscription.

From the dates. The days to go are the whole days, counted in UTC, between the typed AS_OF and the last day of access; the period length is the days between its first day and that last day, and the ring is filled to that share (63%). Nothing reads the clock, so the page says the same on the server and on every visitor's device. The ring is drawn with the catalog Circular Progress and hidden from assistive technology; the caption beside it says the same thing in words.

The page turns in place into "Cadencerun Pro is active again": both states sit in one grid cell, so the page keeps its height and the centred heading doesn't move. Focus moves to the new heading, the ring now counts down to the renewal, the list shows the next charge, and the primary becomes a link back into the app, with a quiet button to cancel again so the demo can be repeated. The state that isn't showing is invisible and inert.

Yes, it uses what the browser offers. The Download Trigger builds a small JSON file from the typed account details and saves it as a sample, named so, and the status line says it holds no real runs. In your app, build the file from the account's real export.

The primary in the reactivated state is a Shine Button used as a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}.

The column keeps its order, the ring and the quote stay and the two buttons stack, the primary first and full width, pinned to the bottom of the screen so it stays in reach; from the small breakpoint up they sit side by side in the flow. The quoted reason is cut to two lines on a phone.