Legacy Contact Account Block for React

Edit START_CONTACT, STOPS (a label, the number of months and a short word for the ruler), ASKS and NEVER. consequenceOf turns the stop and the typed last sign-in AS_OF into the sentence, with GRACE_DAYS between the email to the owner and the notice to the contact. Change AS_OF to the owner's real last sign-in when you wire it up; the dates are worked out from it, never the clock.

Its value is a place on the track, not a number of months: each stop has a name, which is what assistive technology reads ("12 months"). Arrow keys move one stop and the sentence under it is rewritten with the new dates, in a box tall enough for the longest one, so nothing below moves.

It opens a dialog with the contact's name, email and relationship. Each field is checked in words and focus goes to the first problem. A new contact starts as "Not confirmed yet", the sentence says no one is told until they confirm, and the replacement is part of the draft: Discard puts the old contact back. Escape or Cancel closes the dialog and focus returns to Replace.

Everything. Saving keeps the draft in this page only, and the test notice is queued only in words: nothing is emailed. To make it real, call your endpoints in save, replace and testNotice, send the contact an email that asks them to confirm, and tell them only when they have. Keep the list of what they can never do true on your server.

Because a legacy contact is a promise to the account's owner. The list is typed in NEVER and is meant to be edited to match what your product really enforces; the boxes above it are the only things the contact may ask for, and asking is all they can do.

The boxes are named for what they allow with their hints linked, the slider is named and reads its stop, the email is masked in text, and the foot is a polite live region present from the start. The cells stack on a phone, the contact and the slider first, and the foot with Save stays pinned to the bottom of the screen.