Account Deletion Settings Block for React

Edit KINDS: each kind has a name, a noun, a count, the fates its menu offers (delete, anonymise, or transfer- followed by a member's id) and, for a kind that can't be chosen, the words for its rule in keep. HEIRS lists the people data can be handed to, START is what is chosen when the page opens and GRACE_DAYS is the wait. The sentence is built from those lists, and the deletion day from AS_OF, a fixed day, so the page reads the same every time.

The account's email, typed exactly, capitals included. The destructive button waits quietly until it matches; pressed early it says Type the email exactly as shown and moves focus to the field. Cancel has focus when the dialog opens, Escape and an outside click behave as in any alert dialog (Escape closes it, an outside click doesn't), and Keep my account leaves everything as it was. The dialog repeats the one-sentence summary so the last look at what goes is in front of the confirmation.

The menus become plain words (so nobody edits choices that are already queued), the sentence under the heading gives the day, and the Shine Button's place is taken by Cancel deletion, which puts everything back as it was. The page keeps its height, and focus moves to the new button a moment after the dialog closes. A real product would keep the account working until that day and email a reminder; this demo has no clock.

Everything. Nothing is deleted, anonymised, transferred or emailed, and the page says so. To make it real, send choices from schedule to your server, let it hold the 14 days and run the work at the end, and keep the rules there: invoices are kept whatever the page says, and a transfer needs the other person's acceptance.

Tab runs through each kind's menu (named for its data, for example What happens to your budgets), then the one button and the link out. The table has a caption and row headers; on a phone the same facts are a list. The confirmation is an alert dialog with focus on Cancel, and a polite line under the field says whether the email matches. A status line announces the scheduled or cancelled result.

Each kind is a card with its name and count on one line and the menu under it. The sentence follows, and the Schedule deletion button stays pinned to the bottom of the screen with the way out under it, so the primary is on the first screen.