fix: browser back button not working

packages/features/bookings/Booker/Booker.tsx

@@ -140,6 +140,10 @@ const BookerComponent = ({
     return setBookerState("booking");
   }, [event, selectedDate, selectedTimeslot, setBookerState]);
 
+  const slot = getQueryParam("slot");
+  useEffect(() => {
+    setSelectedTimeslot(slot || null);
+  }, [slot, setSelectedTimeslot]);
   const EventBooker = useMemo(() => {
     return bookerState === "booking" ? (
       <BookEventForm

packages/features/bookings/Booker/store.ts

@@ -309,7 +309,7 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
       });
       updateQueryParam("month", month);
       updateQueryParam("date", selectedDate ?? "");
-      updateQueryParam("slot", selectedTimeslot ?? "");
+      updateQueryParam("slot", selectedTimeslot ?? "", false);
     }
     //removeQueryParam("layout");
   },
@@ -332,7 +332,7 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
   selectedTimeslot: getQueryParam("slot") || null,
   setSelectedTimeslot: (selectedTimeslot: string | null) => {
     set({ selectedTimeslot });
-    updateQueryParam("slot", selectedTimeslot ?? "");
+    updateQueryParam("slot", selectedTimeslot ?? "", false);
   },
   formValues: {},
   setFormValues: (formValues: Record<string, any>) => {

packages/features/bookings/Booker/utils/query-param.ts

@@ -1,14 +1,20 @@
-export const updateQueryParam = (param: string, value: string | number) => {
+export const updateQueryParam = (param: string, value: string | number, shouldReplace = true) => {
   if (typeof window === "undefined") return;
 
   const url = new URL(window.location.href);
+  if (url.searchParams.get(param) === value) return;
+
   if (value === "" || value === "null") {
-    url.searchParams.delete(param);
+    removeQueryParam(param, shouldReplace);
+    return;
   } else {
     url.searchParams.set(param, `${value}`);
   }
-
-  window.history.pushState({}, "", url.href);
+  if (shouldReplace) {
+    window.history.replaceState({ ...window.history.state, as: url.href }, "", url.href);
+  } else {
+    window.history.pushState({ ...window.history.state, as: url.href }, "", url.href);
+  }
 };
 
 export const getQueryParam = (param: string) => {
@@ -17,10 +23,16 @@ export const getQueryParam = (param: string) => {
   return new URLSearchParams(window.location.search).get(param);
 };
 
-export const removeQueryParam = (param: string) => {
+export const removeQueryParam = (param: string, shouldReplace = true) => {
   if (typeof window === "undefined") return;
 
   const url = new URL(window.location.href);
+  if (!url.searchParams.get(param)) return;
+
   url.searchParams.delete(param);
-  window.history.pushState({}, "", url.href);
+  if (shouldReplace) {
+    window.history.replaceState({ ...window.history.state, as: url.href }, "", url.href);
+  } else {
+    window.history.pushState({ ...window.history.state, as: url.href }, "", url.href);
+  }
 };

packages/features/calendars/DatePicker.tsx

@@ -235,7 +235,9 @@ const Days = ({
       // If selected date not available in the month, select the first available date of the month
       props.onChange(firstAvailableDateOfTheMonth);
     }
-
+    if (isSelectedDateAvailable) {
+      props.onChange(dayjs(selected));
+    }
     if (!firstAvailableDateOfTheMonth) {
       props.onChange(null);
     }