fix: duplicate getSchedule call

packages/features/bookings/Booker/Booker.tsx

@@ -13,7 +13,7 @@ import TurnstileCaptcha from "@calcom/features/auth/Turnstile";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import useSkipConfirmStep from "@calcom/features/bookings/Booker/components/hooks/useSkipConfirmStep";
 import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
-import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays";
+import { useNonEmptyScheduleDays } from "@calcom/features/schedules/hooks/useNonEmptyScheduleDays";
 import { scrollIntoViewSmooth } from "@calcom/lib/browser/browser.utils";
 import { PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM } from "@calcom/lib/constants";
 import { CLOUDFLARE_SITE_ID, CLOUDFLARE_USE_TURNSTILE_IN_BOOKER } from "@calcom/lib/constants";

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

@@ -5,22 +5,22 @@ import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/features/booking
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import type { IUseBookingLoadingStates } from "@calcom/features/bookings/Booker/components/hooks/useBookings";
 import type { BookerEvent } from "@calcom/features/bookings/types";
+import { useNonEmptyScheduleDays } from "@calcom/features/schedules/hooks/useNonEmptyScheduleDays";
+import { useSlotsForAvailableDates } from "@calcom/features/schedules/hooks/useSlotsForDate";
 import type { Slot } from "@calcom/features/schedules/lib/use-schedule/types";
-import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays";
-import { useSlotsForAvailableDates } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
 import { PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM } from "@calcom/lib/constants";
 import { localStorage } from "@calcom/lib/webstorage";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import classNames from "@calcom/ui/classNames";
 
 import { AvailableTimesHeader } from "../../components/AvailableTimesHeader";
-import type { useScheduleForEventReturnType } from "../utils/event";
+import type { UseScheduleForEventReturnType } from "../hooks/useScheduleForEvent";
 import { getQueryParam } from "../utils/query-param";
 
 type AvailableTimeSlotsProps = {
   extraDays?: number;
   limitHeight?: boolean;
-  schedule?: useScheduleForEventReturnType;
+  schedule?: UseScheduleForEventReturnType;
   isLoading: boolean;
   seatsPerTimeSlot?: number | null;
   showAvailableSeatsCount?: boolean | null;

packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx

@@ -10,8 +10,8 @@ import { Badge } from "@calcom/ui/components/badge";
 import { DialogContent } from "@calcom/ui/components/dialog";
 
 import { getDurationFormatted } from "../../../components/event-meta/Duration";
+import { useEvent } from "../../hooks/useEvent";
 import { FromTime } from "../../utils/dates";
-import { useEvent } from "../../utils/event";
 import { useBookerTime } from "../hooks/useBookerTime";
 
 const BookEventFormWrapper = ({ children, onCancel }: { onCancel: () => void; children: ReactNode }) => {

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

@@ -5,7 +5,7 @@ import dayjs from "@calcom/dayjs";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import type { DatePickerClassNames } from "@calcom/features/bookings/Booker/types";
 import { DatePicker as DatePickerComponent } from "@calcom/features/calendars/DatePicker";
-import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays";
+import { useNonEmptyScheduleDays } from "@calcom/features/schedules/hooks/useNonEmptyScheduleDays";
 import { weekdayToWeekIndex } from "@calcom/lib/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { User } from "@calcom/prisma/client";
@@ -88,7 +88,7 @@ export const DatePicker = ({
 
   const onMonthChange = (date: Dayjs) => {
     setMonth(date.format("YYYY-MM"));
-    setSelectedDate({ date: date.format("YYYY-MM-DD") });
+    setSelectedDate({ date: date.format("YYYY-MM-DD"), omitUpdatingParams: true });
     setDayCount(null); // Whenever the month is changed, we nullify getting X days
   };
 

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

@@ -8,7 +8,7 @@ import type { CalendarEvent } from "@calcom/features/calendars/weeklyview/types/
 import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state";
 import { localStorage } from "@calcom/lib/webstorage";
 
-import type { useScheduleForEventReturnType } from "../utils/event";
+import type { UseScheduleForEventReturnType } from "../hooks/useScheduleForEvent";
 import { getQueryParam } from "../utils/query-param";
 import { useOverlayCalendarStore } from "./OverlayCalendar/store";
 
@@ -19,7 +19,7 @@ export const LargeCalendar = ({
   event,
 }: {
   extraDays: number;
-  schedule?: useScheduleForEventReturnType["data"];
+  schedule?: UseScheduleForEventReturnType["data"];
   isLoading: boolean;
   event: {
     data?: Pick<BookerEvent, "length"> | null;

packages/features/bookings/Booker/hooks/useEvent.ts

@@ -0,0 +1,42 @@
+import { shallow } from "zustand/shallow";
+
+import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+import { trpc } from "@calcom/trpc/react";
+
+export type useEventReturnType = ReturnType<typeof useEvent>;
+
+/**
+ * Wrapper hook around the trpc query that fetches
+ * the event currently viewed in the booker. It will get
+ * the current event slug and username from the booker store.
+ *
+ * Using this hook means you only need to use one hook, instead
+ * of combining multiple conditional hooks.
+ */
+export const useEvent = (props?: { fromRedirectOfNonOrgLink?: boolean; disabled?: boolean }) => {
+  const [username, eventSlug, isTeamEvent, org] = useBookerStoreContext(
+    (state) => [state.username, state.eventSlug, state.isTeamEvent, state.org],
+    shallow
+  );
+
+  const event = trpc.viewer.public.event.useQuery(
+    {
+      username: username ?? "",
+      eventSlug: eventSlug ?? "",
+      isTeamEvent,
+      org: org ?? null,
+      fromRedirectOfNonOrgLink: props?.fromRedirectOfNonOrgLink,
+    },
+    {
+      refetchOnWindowFocus: false,
+      enabled: !props?.disabled && Boolean(username) && Boolean(eventSlug),
+    }
+  );
+
+  return {
+    data: event?.data,
+    isSuccess: event?.isSuccess,
+    isError: event?.isError,
+    isPending: event?.isPending,
+  };
+};

packages/features/bookings/Booker/utils/event.ts → packages/features/bookings/Booker/hooks/useScheduleForEvent.ts

@@ -1,50 +1,12 @@
 import { shallow } from "zustand/shallow";
 
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
-import { useSchedule } from "@calcom/features/schedules/lib/use-schedule/useSchedule";
+import { useSchedule } from "@calcom/features/schedules/hooks/useSchedule";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
-import { trpc } from "@calcom/trpc/react";
 
 import { useBookerTime } from "../components/hooks/useBookerTime";
 
-export type useEventReturnType = ReturnType<typeof useEvent>;
-export type useScheduleForEventReturnType = ReturnType<typeof useScheduleForEvent>;
-
-/**
- * Wrapper hook around the trpc query that fetches
- * the event currently viewed in the booker. It will get
- * the current event slug and username from the booker store.
- *
- * Using this hook means you only need to use one hook, instead
- * of combining multiple conditional hooks.
- */
-export const useEvent = (props?: { fromRedirectOfNonOrgLink?: boolean; disabled?: boolean }) => {
-  const [username, eventSlug, isTeamEvent, org] = useBookerStoreContext(
-    (state) => [state.username, state.eventSlug, state.isTeamEvent, state.org],
-    shallow
-  );
-
-  const event = trpc.viewer.public.event.useQuery(
-    {
-      username: username ?? "",
-      eventSlug: eventSlug ?? "",
-      isTeamEvent,
-      org: org ?? null,
-      fromRedirectOfNonOrgLink: props?.fromRedirectOfNonOrgLink,
-    },
-    {
-      refetchOnWindowFocus: false,
-      enabled: !props?.disabled && Boolean(username) && Boolean(eventSlug),
-    }
-  );
-
-  return {
-    data: event?.data,
-    isSuccess: event?.isSuccess,
-    isError: event?.isError,
-    isPending: event?.isPending,
-  };
-};
+export type UseScheduleForEventReturnType = ReturnType<typeof useScheduleForEvent>;
 
 /**
  * Gets schedule for the current event and current month.
@@ -54,12 +16,8 @@ export const useEvent = (props?: { fromRedirectOfNonOrgLink?: boolean; disabled?
  * Using this hook means you only need to use one hook, instead
  * of combining multiple conditional hooks.
  *
- * The prefetchNextMonth argument can be used to prefetch two months at once,
- * useful when the user is viewing dates near the end of the month,
- * this way the multi day view will show data of both months.
  */
 export const useScheduleForEvent = ({
-  prefetchNextMonth,
   username,
   eventSlug,
   eventId,
@@ -73,7 +31,6 @@ export const useScheduleForEvent = ({
   isTeamEvent,
   useApiV2 = true,
 }: {
-  prefetchNextMonth?: boolean;
   username?: string | null;
   eventSlug?: string | null;
   eventId?: number | null;
@@ -103,7 +60,6 @@ export const useScheduleForEvent = ({
     eventId,
     timezone,
     selectedDate,
-    prefetchNextMonth,
     monthCount,
     dayCount,
     rescheduleUid,

packages/features/bookings/Booker/types.ts

@@ -7,12 +7,12 @@ import type { UseCalendarsReturnType } from "@calcom/features/bookings/Booker/co
 import type { UseSlotsReturnType } from "@calcom/features/bookings/Booker/components/hooks/useSlots";
 import type { UseVerifyCodeReturnType } from "@calcom/features/bookings/Booker/components/hooks/useVerifyCode";
 import type { UseVerifyEmailReturnType } from "@calcom/features/bookings/Booker/components/hooks/useVerifyEmail";
-import type { useScheduleForEventReturnType } from "@calcom/features/bookings/Booker/utils/event";
 import type { BookerEventQuery } from "@calcom/features/bookings/types";
 import type { IntlSupportedTimeZones } from "@calcom/lib/timeZones";
 import type { BookerLayouts } from "@calcom/prisma/zod-utils";
 
 import type { GetBookingType } from "../lib/get-booking";
+import type { UseScheduleForEventReturnType } from "./hooks/useScheduleForEvent";
 
 export type Timezone = (typeof IntlSupportedTimeZones)[number];
 
@@ -127,7 +127,7 @@ export type WrappedBookerPropsMain = {
   calendars: UseCalendarsReturnType;
   bookerForm: UseBookingFormReturnType;
   event: BookerEventQuery;
-  schedule: useScheduleForEventReturnType;
+  schedule: UseScheduleForEventReturnType;
   bookerLayout: UseBookerLayoutType;
   verifyEmail: UseVerifyEmailReturnType;
   customClassNames?: CustomClassNames;

packages/features/calendars/DatePicker.tsx

@@ -70,8 +70,6 @@ const Day = ({
   away,
   emoji,
   customClassName,
-  showMonthTooltip,
-  isFirstDayOfNextMonth,
   ...props
 }: JSX.IntrinsicElements["button"] & {
   active: boolean;
@@ -82,12 +80,11 @@ const Day = ({
     dayContainer?: string;
     dayActive?: string;
   };
-  showMonthTooltip?: boolean;
-  isFirstDayOfNextMonth?: boolean;
 }) => {
   const { t } = useLocale();
   const enabledDateButtonEmbedStyles = useEmbedStyles("enabledDateButton");
   const disabledDateButtonEmbedStyles = useEmbedStyles("disabledDateButton");
+  const [month] = useBookerStoreContext((state) => [state.month], shallow);
 
   const buttonContent = (
     <button
@@ -123,15 +120,16 @@ const Day = ({
     </button>
   );
 
-  const content = showMonthTooltip ? (
-    <Tooltip content={date.format("MMMM")}>{buttonContent}</Tooltip>
-  ) : (
-    buttonContent
-  );
+  const content =
+    !disabled && month !== date.format("YYYY-MM") ? (
+      <Tooltip content={date.format("MMMM")}>{buttonContent}</Tooltip>
+    ) : (
+      buttonContent
+    );
 
   return (
     <>
-      {isFirstDayOfNextMonth && (
+      {month !== date.format("YYYY-MM") && date.date() === 1 && (
         <div
           className={classNames(
             "absolute top-0 z-10 mx-auto w-fit rounded-full font-semibold uppercase tracking-wide",
@@ -198,7 +196,6 @@ const Days = ({
   const totalDays = daysInMonth(browsingDate);
 
   const showNextMonthDays = isSecondWeekOver && !isCompact;
-
   // Only apply end-of-month logic for main monthly view (not compact sidebar)
   if (showNextMonthDays) {
     const startDay = 8;
@@ -262,7 +259,6 @@ const Days = ({
     const oooInfo = daySlots.find((slot) => slot.away) || null;
 
     const isNextMonth = day.month() !== browsingDate.month();
-    const isFirstDayOfNextMonth = isSecondWeekOver && !isCompact && isNextMonth && day.date() === 1;
 
     const included = includedDates?.includes(dateKey);
     const excluded = excludedDates.includes(dateKey);
@@ -272,27 +268,25 @@ const Days = ({
     const away = isOOOAllDay;
 
     const disabled = away ? !oooInfo?.toUser : isNextMonth ? !hasAvailableSlots : !included || excluded;
-
     return {
       day,
       disabled,
       away,
       emoji: oooInfo?.emoji,
-      isFirstDayOfNextMonth,
     };
   });
 
+  const hasDatesLoaded = Boolean(daysToRenderForTheMonth.find((day) => !day.disabled));
+
   /**
    * Takes care of selecting a valid date in the month if the selected date is not available in the month
    */
-
   const useHandleInitialDateSelection = () => {
     // Let's not do something for now in case of multiple selected dates as behaviour is unclear and it's not needed at the moment
-    if (selected instanceof Array) {
+    if (!hasDatesLoaded || selected instanceof Array) {
       return;
     }
     const firstAvailableDateOfTheMonth = daysToRenderForTheMonth.find((day) => !day.disabled)?.day;
-
     const isSelectedDateAvailable = selected
       ? daysToRenderForTheMonth.some(({ day, disabled }) => {
           if (day && yyyymmdd(day) === yyyymmdd(selected) && !disabled) return true;
@@ -303,20 +297,16 @@ const Days = ({
       // If selected date not available in the month, select the first available date of the month
       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) {
+    } else if (isSelectedDateAvailable) {
       props.onChange(dayjs(selected), true);
     }
-    if (!firstAvailableDateOfTheMonth) {
-      props.onChange(null);
-    }
   };
 
-  useEffect(useHandleInitialDateSelection);
+  useEffect(useHandleInitialDateSelection, [hasDatesLoaded, month]);
 
   return (
     <>
-      {daysToRenderForTheMonth.map(({ day, disabled, away, emoji, isFirstDayOfNextMonth }, idx) => (
+      {daysToRenderForTheMonth.map(({ day, disabled, away, emoji }, idx) => (
         <div key={day === null ? `e-${idx}` : `day-${day.format()}`} className="relative w-full pt-[100%]">
           {day === null ? (
             <div key={`e-${idx}`} />
@@ -342,8 +332,6 @@ const Days = ({
               active={isActive(day)}
               away={away}
               emoji={emoji}
-              showMonthTooltip={showNextMonthDays && !disabled && day.month() !== browsingDate.month()}
-              isFirstDayOfNextMonth={isFirstDayOfNextMonth}
             />
           )}
         </div>
@@ -407,6 +395,7 @@ const DatePicker = ({
       onMonthChange(browsingDate.add(newMonth, "month"));
     }
   };
+
   const month = browsingDate
     ? new Intl.DateTimeFormat(i18n.language, { month: "long" }).format(
         new Date(browsingDate.year(), browsingDate.month())

packages/features/embed/Embed.tsx

@@ -16,14 +16,15 @@ import {
   useInitializeBookerStoreContext,
   useBookerStoreContext,
 } from "@calcom/features/bookings/Booker/BookerStoreProvider";
+import { useEvent } from "@calcom/features/bookings/Booker/hooks/useEvent";
+import { useScheduleForEvent } from "@calcom/features/bookings/Booker/hooks/useScheduleForEvent";
 import { useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
-import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
 import DatePicker from "@calcom/features/calendars/DatePicker";
 import { Dialog } from "@calcom/features/components/controlled-dialog";
 import { TimezoneSelect } from "@calcom/features/components/timezone-select";
+import { useNonEmptyScheduleDays } from "@calcom/features/schedules/hooks/useNonEmptyScheduleDays";
+import { useSlotsForDate } from "@calcom/features/schedules/hooks/useSlotsForDate";
 import type { Slot } from "@calcom/features/schedules/lib/use-schedule/types";
-import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays";
-import { useSlotsForDate } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
 import { APP_NAME, DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
 import { weekdayToWeekIndex } from "@calcom/lib/dayjs";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";

packages/features/schedules/lib/use-schedule/useNonEmptyScheduleDays.ts → packages/features/schedules/hooks/useNonEmptyScheduleDays.ts

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-import type { Slots } from "../use-schedule/types";
+import type { Slots } from "../lib/use-schedule/types";
 
 export const getNonEmptyScheduleDays = (slots?: Slots) => {
   if (typeof slots === "undefined") return [];