Profile Completion Account Block for React

Edit SECTIONS: each has an id, a title and its items, and each item has a title, a hint, the label of its action and, only if it can apply to someone, the words of its na. START holds the marks the page opens with. The counts, the bars and the percent are worked out from the marks by countOf and percentOf; add or remove an item and every number follows. Keep every section at the same number of items, or the open section changes the panel's height.

It marks the item done in a different word: the tick turns into a bar, the row says "Not applicable: I do not have a phone." and it counts toward the percent, so nobody is nagged for something that cannot apply. Undo puts it back on the list. Items that always apply, such as turning on two-factor, offer no such button. The status line says what changed and the new percent.

It finds the first item still to do, opens its section (closing the other, since one is open at a time) and moves focus to its action button. When nothing is left the button reads "All done" and, if pressed, says in the status line that there is nothing to do. It never completes an item for you.

Everything: pressing an action only marks the item done in this page, and the status line says so. To make it real, make each action take the person to the real setting (or open its dialog), and mark the item only from your server's own state; keep Not applicable as a stored choice so it survives a reload.

The sections are headings that open and close their items, the open one is announced as expanded, each button says which item it is for ("Add a number: Add a phone number"), the bar is named with the percent, and the status line is a polite live region present from the start. Each section's body keeps one height, so opening another never moves the page. On a phone every item stacks its buttons under its words.