From 583661a15d26395c845cd95712f2bddfe7f0568b Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Mon, 5 Aug 2024 15:01:45 +0530
Subject: [PATCH] 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>
---
 .../bookings/Booker/components/DatePicker.tsx | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

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 (
     <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}