Email Preferences Settings Block for React

Edit TOPICS. Each topic has an id, a name, a one-line hint and its choices, the frequencies the menu offers, each with the average emails a month it sends (perMonth, which can be a fraction for a quarterly survey). SAVED is what the subscriber has stored when the page opens: the topics that are on, the frequency chosen for each, and whether digest mode is on. ADDRESS is the address the preferences are for, and DIGEST names the topic that digest mode folds the others into. The email volume is worked out from those, so it is never typed.

It sends the topics that are on inside the weekly digest's one email instead of on their own schedule. While it is on, their menus read "In the digest" and are disabled, and the sentence counts only the digest. It needs the weekly digest switched on, so with the digest off the switch is disabled and says why, and nothing is folded into an email that will not be sent.

It switches every row off and disables it, in place, so the page keeps its shape, and it says "You are unsubscribed from everything" in the status line. Focus moves to the main button, which now reads Resubscribe. Pressing it turns the rows back on exactly as they were, with the frequencies and digest mode you had, since the choices are kept and only shown as off. Real unsubscribes should be one click with no sign-in, which is why the button needs no confirmation, and the way back is always on the page.

Nothing leaves the page: no email is sent and nothing is stored, and the status line says "in this demo" after each action. The block keeps the saved choices and the ones being edited, counts what differs and says so when you save ("Saved 2 changes in this demo"). To make it real, identify the subscriber from a signed token in the footer link, send the choices to your API in the submit handler and update the saved copy from the response, showing a failure in the same status line.

Each topic stays one line: the switch, the name and the frequency menu, with the one-line description kept for screen readers only to leave room. The Shine Button is pinned to the bottom of the screen while the topics scroll behind it, so it is always in reach, and it settles in its place at the end of the form. The page is full height and centred on a tall screen, and starts at the top on a short one.

Every switch is named for its topic and described by its hint, and every menu is a native select named "How often: Tips", so it works with a screen reader, a keyboard and the phone's own picker. The status line is a polite live region present from the start: it speaks the new email volume after each change and the result after Save or Unsubscribe. The email address is kept in its own left-to-right run inside the sentence in right-to-left languages.