Booking Unavailable Error Block for React

Nothing is booked. The button waits a moment, then a polite status line says the time was held in this demo with the therapist's name, and Release frees it again. The waitlist is the same: it checks the email, marks the button "On the waitlist" and says that no email will be sent. To make it real, send the chosen slot from book and the email from join to your booking service, and take the free times from it.

From the ISO dates in DAYS and TAKEN, formatted in UTC with Intl.DateTimeFormat, so "Fri 13 Nov" can't disagree with its date and reads the same on the server and in every time zone. Times are typed clock text. In your app, build the days from your booking service and show the clinic's own time zone.

The times are one single-choice toggle group split into days by headings: Tab reaches it, the arrow keys move from one time to the next across the days, and one time is always chosen, so the button always has something to book. Each time is named with its day ("09:30, Fri 13 Nov") for a screen reader.

The page is aligned to the top, not the middle, and the email field opens at the foot of its column, so everything above it stays where it was. The switch keeps its place and focus; its label says which time it is for.

Here it is the page a visitor lands on when their choice is no longer there: it says what happened and gives the way forward first. In your app, send a conflict status from the booking call when a slot is taken, and keep this page's wording the same whether the slot went a second ago or a day ago.

The heading and the struck time come first, then the times and the button, and the waitlist is last. The two halves stack with a rule between them, and the button is on the first screen.