diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx index fa07508125..e1b3be2f5f 100644 --- a/packages/features/bookings/Booker/components/DatePicker.tsx +++ b/packages/features/bookings/Booker/components/DatePicker.tsx @@ -38,6 +38,33 @@ export const DatePicker = ({ shallow ); const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots); + const browsingDate = month ? dayjs(month) : dayjs().startOf("month"); + + const onMonthChange = (date: Dayjs) => { + setMonth(date.format("YYYY-MM")); + setSelectedDate(date.format("YYYY-MM-DD")); + setDayCount(null); // Whenever the month is changed, we nullify getting X days + }; + + const moveToNextMonthOnNoAvailability = () => { + const currentMonth = dayjs().startOf("month").format("YYYY-MM"); + const browsingMonth = browsingDate.format("YYYY-MM"); + + // Insufficient data case + if (!schedule?.data?.slots) { + return; + } + + // Not meeting the criteria to move to next month + // Has to be currentMonth and it must have all days unbookable + if (currentMonth != browsingMonth || nonEmptyScheduleDays.length) { + return; + } + + onMonthChange(browsingDate.add(1, "month")); + }; + + moveToNextMonthOnNoAvailability(); return ( { setSelectedDate(date === null ? date : date.format("YYYY-MM-DD")); }} - onMonthChange={(date: Dayjs) => { - setMonth(date.format("YYYY-MM")); - setSelectedDate(date.format("YYYY-MM-DD")); - setDayCount(null); // Whenever the month is changed, we nullify getting X days - }} + onMonthChange={onMonthChange} includedDates={nonEmptyScheduleDays} locale={i18n.language} browsingDate={month ? dayjs(month) : undefined}