Stylist Booking 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 a call to your booking system: stylistId, openingIndex, name and phone hold everything the visitor chose. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.

Each stylist's openings are fixed example data in STYLISTS: a number of days from today and a time. The weekday on each chip is worked out from today once the page is in the browser, so no date is written into the file and the server's render never goes stale; before that the chip shows only the time. In production, build openings from your calendar for the next few days.

The three cells are one radio group, so arrow keys move between the stylists. The chips are buttons that report whether they are pressed. Choosing a chip picks its stylist as well; choosing another stylist clears an opening that belongs to the first. If the visitor submits without an opening, the message under the cells says which choice is missing and focus moves to the first chip.

The stylist's name and specialty are the radio's label. The radio takes an id and a label with htmlFor beside it, so clicking the avatar or the text selects it.

No. +1 (415) 555-0171 is in the 555-0100 to 555-0199 range set aside for fiction. Replace PHONE and PHONE_HREF at the top of the file with yours. The number keeps its order in a right-to-left layout.

Below md the cells stack, one stylist per row, each with its chips wrapping under the name. The form starts right under the header, the appointment line follows the cells, and the submit button goes full width, so nothing scrolls sideways at 320 pixels. The header and the cells fade up once on load; with reduced motion they simply appear.