feat: Default to showing the next month with availability (#15292)

* feat: Default to showing the next month with availability

* update

* Update DatePicker.tsx

* dpdate

* Update DatePicker.tsx

---------

Co-authored-by: Hariom <hariombalhara@gmail.com>

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 (
     <DatePickerComponent
@@ -53,11 +80,7 @@ export const DatePicker = ({
       onChange={(date: Dayjs | null) => {
         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}