Account Setup Checklist Success Block for React

Nothing was created or sent: the page confirms an account that already exists. Resend email, Save and Choose a source only change this page and say so in the line under the checklist ("Resent to jules@example.com in this demo. Nothing was sent."). Copy link is the exception, because the browser really does it: it writes a sample link to the clipboard. To wire it, read each task's state from your account, call your own endpoints from resend and saveName, and point the primary at the app.

The checklist is a single-open accordion that can't be fully closed, and every open task is as tall as the tallest one, so choosing another never changes the page's height. Tab moves between the task headings; this base's accordion has no arrow-key movement.

Save checks the name (two letters or more) and, when it's wrong, shows the problem under the field in a slot that is always there, so nothing moves, and puts focus back in the field. A good name ticks the task, the count reads 2 of 5 done and the bar grows. Saving the same name again says so instead of pretending it changed.

From the tasks themselves. A task is done when its state says so (the account always, the workspace once it has a saved name), the count is worked out from that list and the bar is the same share, so adding a task to TASKS changes both. The state is a mark and the word "Done" or "To do", never a color alone.

The primary is a link to your own route. It's a Shine Button with render set to an a element and nativeButton={false}. It sits right under the opening sentence, so it is on the first screen on a phone as well.

The heading, the sentence and the button come first, then the plan and the day side by side, then the checklist full width; each open task's control is a full-height button or field. The account's address is hidden in the list on a phone (it appears again in the verification task).