fix: reschedule issue when limited booking is enabled in the event settings. (calcom#23717)

* fix

* fix fix

* cleanup

* Update useBookings.ts

* Update store.ts

---------

Co-authored-by: Kartik Saini <41051387+kart1ka@users.noreply.github.com>
Co-authored-by: Devanshu Sharma <devanshusharma658@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

Author: 4 people

packages/features/bookings/Booker/__tests__/test-utils.tsx

@@ -51,6 +51,7 @@ const createMockStore = (initialState?: Partial<BookerStore>): StoreApi<BookerSt
     bookingUid: null,
     bookingData: null,
     setBookingData: vi.fn(),
+    setRescheduleUid: vi.fn(),
     initialize: vi.fn(),
     formValues: {},
     setFormValues: vi.fn(),

packages/features/bookings/Booker/components/hooks/useBookings.ts

@@ -3,13 +3,13 @@
 import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useRef, useState, useEffect } from "react";
+import { shallow } from "zustand/shallow";
 
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { useHandleBookEvent } from "@calcom/atoms/hooks/bookings/useHandleBookEvent";
 import dayjs from "@calcom/dayjs";
 import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
-import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { updateQueryParam, getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
 import { createBooking, createRecurringBooking, createInstantBooking } from "@calcom/features/bookings/lib";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
@@ -177,9 +177,15 @@ export const useBookings = ({
   const eventTypeId = useBookerStoreContext((state) => state.eventId);
   const isInstantMeeting = useBookerStoreContext((state) => state.isInstantMeeting);
 
-  const rescheduleUid = useBookerStoreContext((state) => state.rescheduleUid);
+  const [rescheduleUid, setRescheduleUid] = useBookerStoreContext(
+    (state) => [state.rescheduleUid, state.setRescheduleUid],
+    shallow
+  );
   const rescheduledBy = useBookerStoreContext((state) => state.rescheduledBy);
-  const bookingData = useBookerStoreContext((state) => state.bookingData);
+  const [bookingData, setBookingData] = useBookerStoreContext(
+    (state) => [state.bookingData, state.setBookingData],
+    shallow
+  );
   const timeslot = useBookerStoreContext((state) => state.selectedTimeslot);
   const { t } = useLocale();
   const bookingSuccessRedirect = useBookingSuccessRedirect();
@@ -383,16 +389,12 @@ export const useBookings = ({
       };
 
       if (error.message === ErrorCode.BookerLimitExceededReschedule && error.data?.rescheduleUid) {
-        useBookerStore.setState({
-          rescheduleUid: error.data?.rescheduleUid,
-        });
-        useBookerStore.setState({
-          bookingData: {
-            uid: error.data?.rescheduleUid,
-            startTime: error.data?.startTime,
-            attendees: error.data?.attendees,
-          } as unknown as GetBookingType,
-        });
+        setRescheduleUid(error.data?.rescheduleUid);
+        setBookingData({
+          uid: error.data?.rescheduleUid,
+          startTime: error.data?.startTime,
+          attendees: error.data?.attendees,
+        } as unknown as GetBookingType);
       }
     },
   });

packages/features/bookings/Booker/store.ts

@@ -138,6 +138,7 @@ export type BookerStore = {
    * object is something that's fetched server side.
    */
   rescheduleUid: string | null;
+  setRescheduleUid: (rescheduleUid: string | null) => void;
   rescheduledBy: string | null;
   bookingUid: string | null;
   bookingData: GetBookingType | null;
@@ -415,6 +416,9 @@ export const createBookerStore = () =>
     setBookingData: (bookingData: GetBookingType | null | undefined) => {
       set({ bookingData: bookingData ?? null });
     },
+    setRescheduleUid: (rescheduleUid: string | null) => {
+      set({ rescheduleUid });
+    },
     recurringEventCount: null,
     setRecurringEventCount: (recurringEventCount: number | null) => set({ recurringEventCount }),
     occurenceCount: null,