Move-date checklist Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call. details holds the name, email, household and optional note; city and move hold the destination and the arrival day. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a name, an email with an @ and a domain, a destination, a household of 1 to 8, and an arrival day. Each problem appears under its field with an icon, the control is marked invalid, and focus moves to the first one. Typing, or choosing a city or a day, clears that field's message. The checklist is not required.

Six tasks live in TASKS, each with a number of weeks. dueOf walks back that many weeks from the chosen day, on a fixed calendar, and the row shows the date (for example "13 Oct 2026"). Before a day is chosen, the row says how many weeks before the move. A task dated before today (read from the visitor's clock) adds "already due". Marking a box only records that the visitor has done it; the confirmation repeats that count.

Eight cities are the whole list. Choosing one clears the destination's error. The field is a searchable input with a list under it: typing narrows the list, and choosing a city puts its name in the field. If nothing matches it says "No city found."

It thanks the visitor by first name and repeats the city, the household size, the arrival date, and how many of the six tasks were marked done. It's a status region that takes focus when it appears, and "Plan another move" brings back an empty form and puts focus on its heading. The reply time stays in the line under the button, not in the confirmation.

Below lg the hairline grid stacks: the header, then the form, then the checklist and the contact details. Name and email, and destination and household, go one per row below sm, and the submit button goes full width. Under 360 pixels the contact labels shrink to their icons. The header fades up once on load; with reduced motion it simply appears. hello@wayhurst.example and +1 (555) 010-0148 are fictional.