From 39fdf5a74ee54c29c1530f201acd82920cee6ef4 Mon Sep 17 00:00:00 2001
From: Sanchit Tewari <46245135+sanchitttt@users.noreply.github.com>
Date: Mon, 17 Feb 2025 20:11:00 +0530
Subject: [PATCH] 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>
---
 .../bookings/Booker/components/DatePicker.tsx        |  4 ++--
 packages/features/bookings/Booker/store.ts           | 12 ++++++++----
 packages/features/calendars/DatePicker.tsx           |  7 ++++---
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx
index 54d78ae62f..4eaeac0c2d 100644
--- a/packages/features/bookings/Booker/components/DatePicker.tsx
+++ b/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}
diff --git a/packages/features/bookings/Booker/store.ts b/packages/features/bookings/Booker/store.ts
index 70108203ff..2ed4f11651 100644
--- a/packages/features/bookings/Booker/store.ts
+++ b/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,
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index db788523d1..4588615dad 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/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);