fix: switching between months leads to incorrect autoselect first available date (#10366)

Co-authored-by: Hariom Balhara <[email protected]>

Author: MehulZR

packages/features/bookings/Booker/components/DatePicker.tsx

@@ -24,13 +24,8 @@ export const DatePicker = () => {
   return (
     <DatePickerComponent
       isLoading={schedule.isLoading}
-      onChange={(date: Dayjs) => {
-        setSelectedDate(date.format("YYYY-MM-DD"));
-      }}
-      onMonthChange={(date: Dayjs) => {
-        setMonth(date.format("YYYY-MM"));
-        setSelectedDate(date.format("YYYY-MM-DD"));
-      }}
+      onChange={(date) => setSelectedDate(date ? date.format("YYYY-MM-DD") : date)}
+      onMonthChange={(date) => setMonth(date.format("YYYY-MM"))}
       includedDates={nonEmptyScheduleDays}
       locale={i18n.language}
       browsingDate={month ? dayjs(month) : undefined}

packages/features/bookings/Booker/store.ts

@@ -160,7 +160,8 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
     updateQueryParam("date", selectedDate ?? "");
 
     // Setting month make sure small calendar in fullscreen layouts also updates.
-    if (newSelection.month() !== currentSelection.month()) {
+    // If selectedDate is null, prevents setting month to Invalid-Date
+    if (selectedDate && newSelection.month() !== currentSelection.month() ) {
       set({ month: newSelection.format("YYYY-MM") });
       updateQueryParam("month", newSelection.format("YYYY-MM"));
     }
@@ -193,7 +194,6 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
   setMonth: (month: string | null) => {
     set({ month, selectedTimeslot: null });
     updateQueryParam("month", month ?? "");
-    get().setSelectedDate(null);
   },
   isTeamEvent: false,
   seatedEventData: {

packages/features/calendars/DatePicker.tsx

@@ -16,7 +16,7 @@ export type DatePickerProps = {
   /** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   /** Fires whenever a selected date is changed. */
-  onChange: (date: Dayjs) => void;
+  onChange: (date: Dayjs | null) => void;
   /** Fires when the month is changed. */
   onMonthChange?: (date: Dayjs) => void;
   /** which date or dates are currently selected (not tracked from here) */
@@ -30,7 +30,7 @@ export type DatePickerProps = {
   /** Defaults to [], which dates are not bookable. Array of valid dates like: ["2022-04-23", "2022-04-24"] */
   excludedDates?: string[];
   /** defaults to all, which dates are bookable (inverse of excludedDates) */
-  includedDates?: string[];
+  includedDates?: string[] | null;
   /** allows adding classes to the container */
   className?: string;
   /** Shows a small loading spinner next to the month name */
@@ -121,7 +121,7 @@ const Days = ({
   // Create placeholder elements for empty days in first week
   const weekdayOfFirst = browsingDate.date(1).day();
   const currentDate = minDate.utcOffset(browsingDate.utcOffset());
-  const availableDates = (includedDates: string[] | undefined) => {
+  const availableDates = (includedDates: string[] | undefined | null) => {
     const dates = [];
     const lastDateOfMonth = browsingDate.date(daysInMonth(browsingDate));
     for (
@@ -148,6 +148,21 @@ const Days = ({
     days.push(date);
   }
 
+  const daysToRenderForTheMonth = days.map((day) => {
+    if (!day) return { day: null, disabled: true };
+    return {
+      day: day,
+      disabled:
+        (includedDates && !includedDates.includes(yyyymmdd(day))) || excludedDates.includes(yyyymmdd(day)),
+    };
+  });
+
+  useHandleInitialDateSelection({
+    daysToRenderForTheMonth,
+    selected,
+    onChange: props.onChange,
+  });
+
   const [selectedDatesAndTimes] = useBookerStore((state) => [state.selectedDatesAndTimes], shallow);
 
   const isActive = (day: dayjs.Dayjs) => {
@@ -177,7 +192,7 @@ const Days = ({
 
   return (
     <>
-      {days.map((day, idx) => (
+      {daysToRenderForTheMonth.map(({ day, disabled }, idx) => (
         <div key={day === null ? `e-${idx}` : `day-${day.format()}`} className="relative w-full pt-[100%]">
           {day === null ? (
             <div key={`e-${idx}`} />
@@ -194,10 +209,7 @@ const Days = ({
               onClick={() => {
                 props.onChange(day);
               }}
-              disabled={
-                (includedDates && !includedDates.includes(yyyymmdd(day))) ||
-                excludedDates.includes(yyyymmdd(day))
-              }
+              disabled={disabled}
               active={isActive(day)}
             />
           )}
@@ -293,4 +305,41 @@ const DatePicker = ({
   );
 };
 
+/**
+ * Takes care of selecting a valid date in the month if the selected date is not available in the month
+ */
+const useHandleInitialDateSelection = ({
+  daysToRenderForTheMonth,
+  selected,
+  onChange,
+}: {
+  daysToRenderForTheMonth: { day: Dayjs | null; disabled: boolean }[];
+  selected: Dayjs | Dayjs[] | null | undefined;
+  onChange: (date: Dayjs | null) => void;
+}) => {
+  // Let's not do something for now in case of multiple selected dates as behaviour is unclear and it's not needed at the moment
+  if (selected instanceof Array) {
+    return;
+  }
+  const firstAvailableDateOfTheMonth = daysToRenderForTheMonth.find((day) => !day.disabled)?.day;
+
+  const isSelectedDateAvailable = selected
+    ? daysToRenderForTheMonth.some(({ day, disabled }) => {
+        if (day && yyyymmdd(day) === yyyymmdd(selected) && !disabled) return true;
+      })
+    : false;
+
+  if (firstAvailableDateOfTheMonth) {
+    // If selected date not available in the month, select the first available date of the month
+    if (!isSelectedDateAvailable) {
+      onChange(firstAvailableDateOfTheMonth);
+    }
+  } else {
+    // No date is available and if we were asked to select something inform that it couldn't be selected. This would actually help in not showing the timeslots section(with No Time Available) when no date in the month is available
+    if (selected) {
+      onChange(null);
+    }
+  }
+};
+
 export default DatePicker;

packages/features/embed/Embed.tsx

@@ -229,10 +229,8 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
             <div className="text-default text-sm">{t("select_date")}</div>
             <DatePicker
               isLoading={schedule.isLoading}
-              onChange={(date: Dayjs) => {
-                setSelectedDate(date.format("YYYY-MM-DD"));
-              }}
-              onMonthChange={(date: Dayjs) => {
+              onChange={(date) => setSelectedDate(date ? date.format("YYYY-MM-DD") : date)}
+              onMonthChange={(date) => {
                 setMonth(date.format("YYYY-MM"));
                 setSelectedDate(date.format("YYYY-MM-DD"));
               }}

packages/features/schedules/components/DateOverrideInputDialog.tsx

@@ -51,7 +51,11 @@ const DateOverrideForm = ({
 
   const [selectedDates, setSelectedDates] = useState<Dayjs[]>(value ? [dayjs.utc(value[0].start)] : []);
 
-  const onDateChange = (newDate: Dayjs) => {
+  const onDateChange = (newDate: Dayjs | null) => {
+    // If no date is selected, do nothing
+    if (!newDate) {
+      return;
+    }
     // If clicking on a selected date unselect it
     if (selectedDates.some((date) => yyyymmdd(date) === yyyymmdd(newDate))) {
       setSelectedDates(selectedDates.filter((date) => yyyymmdd(date) !== yyyymmdd(newDate)));

packages/features/schedules/lib/use-schedule/useNonEmptyScheduleDays.ts

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import type { Slots } from "../use-schedule";
 
 export const getNonEmptyScheduleDays = (slots?: Slots) => {
-  if (typeof slots === "undefined") return [];
+  if (typeof slots === "undefined") return null;
   return Object.keys(slots).filter((day) => slots[day].length > 0);
 };