Sales Call Scheduler Pricing Block for React

From the visitor's browser, in an effect after the page loads: the next five working days after today, and the zone name from Intl.DateTimeFormat. Before that, grey cells hold the strip's and the grid's size, so nothing shifts and the static page never shows a past date. Times are written in 12-hour English; change the labels in SLOTS and the formats in nextDays for your locale.

Replace slotsOn with the open slots your calendar service returns for the chosen day, and fill book with the request that creates the booking. Send the day's id, the slot's id and the visitor's zone name (zone), and let your server convert the time with the zone, since the slots here are the visitor's local times. Show the confirmation once the server accepts the booking, and keep the form with an error message if the slot was just taken.

Yes. The days and the times are two groups of native radio buttons, each in a fieldset with a legend, so Tab reaches the selected one and the arrow keys move and select; the selected chip and the focused chip are visibly different. The email field has a visible label, is required and is an email input with autocomplete. Once the call is booked, focus moves to the "You're booked" heading, so screen readers read the confirmation at once; Pick another time brings the form back and moves focus to its heading. Focus never moves on its own when the page loads.

The form and the confirmation sit in the same grid cell, so the cell is always as tall as the form. When the call is booked, the form stays in place but is hidden and made inert, so it can't be focused or read, and the confirmation fades in over it. Under reduced motion it appears without the fade.

From the lg breakpoint the pitch and the scheduler sit side by side. Below it the order is the headline, the scheduler, then the three steps, so the button is reached within a screen and a half. The five days stay in one row at 320 pixels, and the time slots go from four to three columns, wrapping onto as many rows as they need.

Use a scheduler when the next step is a call and buyers expect to pick the time: it removes the back-and-forth emails and shows that someone is ready to talk. Use a form when sales needs to qualify requests first or route them by size, and let the form's answers decide who calls.