The booking confirmation replaces the entire wizard because a completed flow needs no back button
The BookCall component runs four steps — date, time, details, confirmed. The first three render inside the same return block with conditional sections that show and hide based on the step state. The fourth step does not. When step equals confirmed, the component hits an early return before any of the form JSX. The calendar, the time list, the name and email inputs, the honeypot, the error message, the submit button — none of it renders. The DOM clears and a single div takes its place. The confirmation card uses a rounded-xl container with a border at emerald-500 and thirty percent opacity, a background at emerald-500 and ten percent opacity, and role set to status so a screen reader announces the update as a live region without interrupting focus. The first line reads Call booked in text-lg font-semibold at emerald-400. The second line formats the booking start time using toLocaleDateString with weekday long, day numeric, and month long, followed by at and the time from toLocaleTimeString in 24-hour format, followed by 15 minutes in parentheses. Both formatters use the en-GB locale. A third line says Check your email for the calendar invite. If the Google Calendar API returned a Meet link via the conferenceData entry points array, a Join Google Meet button renders below the text as an anchor element with target blank and rel noopener noreferrer. The button uses the service-btn class so it inherits the accent colour of whichever service page the BookCall sits on. No back button. No restart button. The wizard is done and the UI reflects that. The confirmed step stores the Meet link and the booking start time in separate state variables so the card can render without re-reading the API response. Four steps, one early return, one role attribute, and the form disappears the moment it has done its job.
Comments coming soon
Sign in with TikTok to leave a comment. Coming soon.