Add date/time selection step for appointment booking. - #1098
Conversation
Added booking step 4 date and time selection. Protected /datetime page loads office slots, lets users pick a day and time with the BCDS calendar and radios, and saves the choice in booking context.
chrsamp
left a comment
chrsamp
left a comment
There was a problem hiding this comment.
Hey @veenupunyani, nice implementation here. A few comments below but looking good.
Maybe in a few sprints we can fix the ugly MM/DD/YYYY date format that the API is returning and switch to ISO dates, but that would probably break the Q frontend... I'm not sure why we did that!
There was a problem hiding this comment.
Seeing some package vulnerabilities when I run npm install, can you please run npm audit and update to latest versions to fix, thanks.
There was a problem hiding this comment.
yeah i will do that in upcoming refactor ticket https://citz-sbc.atlassian.net/browse/DEV-81
| <p className="datetime-selected-day" aria-live="polite"> | ||
| {formatDate(activeDay)} | ||
| </p> |
There was a problem hiding this comment.
Can we please move this to be displayed above the time options?
| <RadioGroup | ||
| aria-label={`Available times for ${formatDate(activeDay)}`} | ||
| value={selectedSlotValue} | ||
| onChange={(value) => { | ||
| const slot = activeDaySlots.find( | ||
| ({ startTime, endTime }) => slotValue(startTime, endTime) === value, | ||
| ) | ||
| if (slot) setSelectedSlot({ date: activeDay, ...slot }) | ||
| }} | ||
| > | ||
| {activeDaySlots.map((slot) => { | ||
| const value = slotValue(slot.startTime, slot.endTime) | ||
| return ( | ||
| <Radio key={value} value={value}> | ||
| {formatTimeRange(slot.startTime, slot.endTime)} | ||
| </Radio> | ||
| ) | ||
| })} | ||
| </RadioGroup> |
There was a problem hiding this comment.
Unfortunately, I cannot tab to focus the radio group. The calendar works with keyboard navigation (great!) and once the radio group is focused, I can use the keyboard to change options, but I cannot focus it: focus skips to the Back button after the radio group.
The guidance from the design and accessibility teams on the radio group component is to use it only when there are fewer than 7 options. Might be a good idea (maybe simpler too?) to modify this to use a select/dropdown instead. i.e. https://services.ontario.ca/appointment-booking/step4. The dropdown lists the start times of the appointments. If you wanted to get really fancy you could figure out the duration of the appointment from the Timeslot!
There was a problem hiding this comment.
right, yeah swiched to dropdown
| function persistJson(key: string, value: unknown) { | ||
| if (value) { | ||
| addJsonToSession(key, value) | ||
| } else { | ||
| removeFromSession(key) | ||
| } | ||
| } |
There was a problem hiding this comment.
Nice simple extraction :-)
|
2 participants
PR Summary
Testing Steps