Session picker Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds, then shows the confirmation. Replace that timer in submit with your own call. The request is the session ids, the room, the optional dietary ids, the name and the email. The total is worked out in the page from SESSIONS, ROOMS, NIGHTS and DAY_RATE; it is an example, not a charge.

One Toggle Group holds every session, and a row can be on or off. The day is written on the row. Open places are capacity minus the seats already taken, and the bar fills by seats taken. A session with no open places is disabled and badged Full. At least one session is required; the message sits under the list and focus moves there.

Shared is $180 a night and Private is $340, each times three nights, plus any extra on a chosen session (Breath studio $40, Hearth cooking $55; the others say Included). Commuter has no lodging: $95 times the number of distinct days among the chosen sessions. With no session chosen, a commuter total stays at $0 and the line says to pick a session to price the days. The total is a status region from the start, so a change can be announced. The caption says the rates are examples.

The form has noValidate. On submit, problems checks that a session is chosen, that a name is present, and that the email has an @ and a domain. Dietary notes are optional and never block sending. Each problem appears under its control with an icon, and focus moves to the first one. Choosing a session, or typing, clears that message. Shared is the room to start, so the room always has a value.

It thanks the visitor by first name and repeats the room, the number of sessions, the example total, and, when any were ticked, how many dietary notes. It's a status region that takes focus, and "Plan another stay" clears the sessions and the fields and puts focus on the sessions heading. The one-business-day reply stays under the button.

Below lg the columns stack: the sessions, then the rooms, the total, the dietary notes and the fields. Dietary notes go two by two. The submit button goes full width, and under 360 pixels the contact labels shrink to their icons. The header fades up once; with reduced motion it simply appears. stay@hushpine.example and +1 (555) 010-0184 are fictional.