chore: Consolidate prefetching logic within useTimesForSchedule and add tests

packages/features/bookings/Booker/utils/event.ts

@@ -59,35 +59,40 @@ export const useEvent = (props?: { fromRedirectOfNonOrgLink?: boolean; disabled?
  * this way the multi day view will show data of both months.
  */
 export const useScheduleForEvent = ({
-  prefetchNextMonth,
   username,
   eventSlug,
   eventId,
   month,
   duration,
-  monthCount,
   dayCount,
   selectedDate,
   orgSlug,
   teamMemberEmail,
   isTeamEvent,
   useApiV2 = true,
+  bookerLayout,
 }: {
-  prefetchNextMonth?: boolean;
   username?: string | null;
   eventSlug?: string | null;
   eventId?: number | null;
   month?: string | null;
   duration?: number | null;
-  monthCount?: number;
   dayCount?: number | null;
   selectedDate?: string | null;
   orgSlug?: string;
   teamMemberEmail?: string | null;
   fromRedirectOfNonOrgLink?: boolean;
   isTeamEvent?: boolean;
   useApiV2?: boolean;
-} = {}) => {
+  /**
+   * Required when prefetching is needed
+   */
+  bookerLayout?: {
+    layout: string;
+    extraDays: number;
+    columnViewExtraDays: { current: number };
+  };
+}) => {
   const { timezone } = useBookerTime();
   const [usernameFromStore, eventSlugFromStore, monthFromStore, durationFromStore] = useBookerStoreContext(
     (state) => [state.username, state.eventSlug, state.month, state.selectedDuration],
@@ -103,8 +108,6 @@ export const useScheduleForEvent = ({
     eventId,
     timezone,
     selectedDate,
-    prefetchNextMonth,
-    monthCount,
     dayCount,
     rescheduleUid,
     month: monthFromStore ?? month,
@@ -113,6 +116,7 @@ export const useScheduleForEvent = ({
     orgSlug,
     teamMemberEmail,
     useApiV2: useApiV2,
+    bookerLayout,
   });
 
   return {

packages/features/schedules/lib/use-schedule/useSchedule.ts

@@ -4,10 +4,10 @@ import { updateEmbedBookerState } from "@calcom/embed-core/src/embed-iframe";
 import { sdkActionManager } from "@calcom/embed-core/src/sdk-event";
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { isBookingDryRun } from "@calcom/features/bookings/Booker/utils/isBookingDryRun";
+import { getUsernameList } from "@calcom/features/eventtypes/lib/defaultEvents";
 import { useTimesForSchedule } from "@calcom/features/schedules/lib/use-schedule/useTimesForSchedule";
 import { getRoutedTeamMemberIdsFromSearchParams } from "@calcom/lib/bookings/getRoutedTeamMemberIdsFromSearchParams";
 import { PUBLIC_QUERY_AVAILABLE_SLOTS_INTERVAL_SECONDS } from "@calcom/lib/constants";
-import { getUsernameList } from "@calcom/features/eventtypes/lib/defaultEvents";
 import { trpc } from "@calcom/trpc/react";
 
 import { useApiV2AvailableSlots } from "./useApiV2AvailableSlots";
@@ -19,16 +19,22 @@ export type UseScheduleWithCacheArgs = {
   month?: string | null;
   timezone?: string | null;
   selectedDate?: string | null;
-  prefetchNextMonth?: boolean;
   duration?: number | null;
-  monthCount?: number | null;
   dayCount?: number | null;
   rescheduleUid?: string | null;
   isTeamEvent?: boolean;
   orgSlug?: string;
   teamMemberEmail?: string | null;
   useApiV2?: boolean;
   enabled?: boolean;
+  /***
+   * Required when prefetching is needed
+   */
+  bookerLayout?: {
+    layout: string;
+    extraDays: number;
+    columnViewExtraDays: { current: number };
+  };
 };
 
 const getAvailabilityLoadedEventPayload = ({
@@ -51,25 +57,23 @@ export const useSchedule = ({
   eventSlug,
   eventId,
   selectedDate,
-  prefetchNextMonth,
   duration,
-  monthCount,
   dayCount,
   rescheduleUid,
   isTeamEvent,
   orgSlug,
   teamMemberEmail,
   useApiV2 = false,
   enabled: enabledProp = true,
+  bookerLayout,
 }: UseScheduleWithCacheArgs) => {
   const bookerState = useBookerStore((state) => state.state);
 
   const [startTime, endTime] = useTimesForSchedule({
     month,
-    monthCount,
     dayCount,
-    prefetchNextMonth,
     selectedDate,
+    bookerLayout,
   });
   const searchParams = useSearchParams();
   const routedTeamMemberIds = searchParams
@@ -99,7 +103,9 @@ export const useSchedule = ({
     startTime,
     // if `prefetchNextMonth` is true, two months are fetched at once.
     endTime,
-    timeZone: timezone!,
+    // We use a placeholder value that is there to keep TS happy, but still invalid to tell us that it shouldn't actually be passed in request(and wouldn't because enabled is false if timezone is nullish)
+    // TODO: Better approach here is to use `skipToken` from react-query which requires an upgrade of react-query
+    timeZone: timezone ?? "PLACEHOLDER_TIMEZONE",
     duration: duration ? `${duration}` : undefined,
     rescheduleUid,
     orgSlug,