feat: prevent automatic query parameters when opening booking page (#18132)

- Resolve the user hindrance where the event's booking page should not have search parameters such as date and month in the initial page load
- Contains changes for the fix of issue #18094 as well as it is needed

Co-authored-by: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>

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

@@ -77,8 +77,8 @@ export const DatePicker = ({
       }}
       className={classNames?.datePickerContainer}
       isPending={schedule.isPending}
-      onChange={(date: Dayjs | null) => {
-        setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"));
+      onChange={(date: Dayjs | null, omitUpdatingParams?: boolean) => {
+        setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"), omitUpdatingParams);
       }}
       onMonthChange={onMonthChange}
       includedDates={nonEmptyScheduleDays}

packages/features/bookings/Booker/store.ts

@@ -80,7 +80,7 @@ export type BookerStore = {
    * Date selected by user (exact day). Format is YYYY-MM-DD.
    */
   selectedDate: string | null;
-  setSelectedDate: (date: string | null) => void;
+  setSelectedDate: (date: string | null, omitUpdatingParams?: boolean) => void;
   addToSelectedDate: (days: number) => void;
   /**
    * Multiple Selected Dates and Times
@@ -182,7 +182,7 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
     return set({ layout });
   },
   selectedDate: getQueryParam("date") || null,
-  setSelectedDate: (selectedDate: string | null) => {
+  setSelectedDate: (selectedDate: string | null, omitUpdatingParams = false) => {
     // unset selected date
     if (!selectedDate) {
       removeQueryParam("date");
@@ -192,12 +192,16 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
     const currentSelection = dayjs(get().selectedDate);
     const newSelection = dayjs(selectedDate);
     set({ selectedDate });
-    updateQueryParam("date", selectedDate ?? "");
+    if (!omitUpdatingParams) {
+      updateQueryParam("date", selectedDate ?? "");
+    }
 
     // Setting month make sure small calendar in fullscreen layouts also updates.
     if (newSelection.month() !== currentSelection.month()) {
       set({ month: newSelection.format("YYYY-MM") });
-      updateQueryParam("month", newSelection.format("YYYY-MM"));
+      if (!omitUpdatingParams) {
+        updateQueryParam("month", newSelection.format("YYYY-MM"));
+      }
     }
   },
   selectedDatesAndTimes: null,

packages/features/calendars/DatePicker.tsx

@@ -17,7 +17,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 | null) => void;
+  onChange: (date: Dayjs | null, omitUpdatingParams?: boolean) => void;
   /** Fires when the month is changed. */
   onMonthChange?: (date: Dayjs) => void;
   /** which date or dates are currently selected (not tracked from here) */
@@ -236,10 +236,11 @@ const Days = ({
 
     if (!isSelectedDateAvailable && firstAvailableDateOfTheMonth) {
       // If selected date not available in the month, select the first available date of the month
-      props.onChange(firstAvailableDateOfTheMonth);
+      const shouldOmitUpdatingParams = selected?.isValid() ? false : true; // In case a date is selected and it is not available, then we have to change search params
+      props.onChange(firstAvailableDateOfTheMonth, shouldOmitUpdatingParams);
     }
     if (isSelectedDateAvailable) {
-      props.onChange(dayjs(selected));
+      props.onChange(dayjs(selected), true);
     }
     if (!firstAvailableDateOfTheMonth) {
       props.onChange(null);