Cancel Retention Billing Block for React

ACCOUNT at the top of the file holds the plan name, its monthly price in cents and paidThrough, the last day of what's paid for, as an ISO date. DISCOUNT holds the offer's percent and months. REASONS lists the choices, each with the offer it leads to, discount or pause. The reduced price, the saving and the day the full price returns are worked out from these, in whole cents. OUTCOMES holds the text of each ending. Wire the buttons that finish the flow to your discount, pause and cancel calls in finish.

By the reason. Price, a missing feature and switching to another app lead to the discount; not using it enough and taking a break lead to the pause. Change the offer of any reason in REASONS, or add a third offer type by adding a branch to the offer step. The offer never blocks the way out: "No thanks, continue" goes straight to the last step, and Back returns to change the reason.

Nothing takes focus on load. After the person moves, with Continue, Back, a step in the list or one of the finishing buttons, focus goes to the new heading and a polite live region says "Step 2 of 3: Offer" or the outcome's title. The heading is focusable by script only, so it isn't an extra tab stop. The step list is a single tab stop with arrow keys, and steps ahead of the furthest one reached are disabled.

Yes, from the confirmation: "Undo cancellation" replaces the outcome with "You're staying", moves focus to its heading, and tells you the next payment and its date. Wire it to your call that removes the scheduled cancellation. The flow itself never deletes anything: the last step says access runs to the paid-through date and that data is kept for 90 days.

"Keep my plan" on the first step and "Back to billing" on the confirmations are links to your billing settings. Each is a Button with render set to an a element and nativeButton={false}. Only one button is the primary at a time: Continue on the first step, the Shine Button offer on the second, and the cancel button on the third.

The section starts with an h2 and each step is an h3. The reasons are a radio group named by the step's heading, and arrow keys move between them without advancing, since only Continue does. The textarea has its own label and is optional. The dates sit in time elements inside description lists, so each is read with its label.