Verified Addresses Account Block for React

Edit START (each address has a street, city, postal code, a country and the ISO day it was verified, or nothing) and COUNTRIES, whose hint is the sentence a bad code gets. codeProblem holds the rule per country: five digits for the US and Germany, a pattern for the UK; add a branch and a regular expression for each country you serve. Days are fixed ISO values with AS_OF as today, never the clock.

In this demo the code is printed in the band, because no postcard is mailed: "In this demo the code is 482 913." Resend moves to the next typed code and says so. The six digits check themselves on the sixth one, typed or pasted with spaces and all, and Enter checks a short entry and says how many digits are missing. A wrong code clears the field and keeps focus in it. To make it real, mail a code from your server in make and resend and check it on the server in verify; never ship the code to the page.

Everything. Making an address primary, verifying, adding and removing change this page's state and say so in the foot; nothing is mailed or stored and a reload starts again. Undo walks back the last change, which a real server can't always do.

Remove opens an alert dialog that says what stops (shipping and billing to it) and that the code would be needed again. Focus starts on Keep it, Escape closes it and focus returns to the button. The primary address cannot be removed: the button answers in the status line with what to do first. After you confirm, focus goes to the next row's Remove button.

The band holds an unseen copy of its form's boxes, so it keeps the same height whether it says "choose an address" or shows the code field. The list also holds its height while the rows change, and the form's problem lines are always there.

The rows are a real list, every button says which address it is for ("Make Studio primary"), the code field is named "Postcard code" and its problem is linked to it, and the foot is a polite live region present from the start. Addresses keep their reading order in a right-to-left page. On a phone the actions sit under each address, the form's fields stack and the foot with Undo stays pinned to the bottom of the screen.