fix: re-render on booker (#12058)

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

@@ -1,6 +1,5 @@
 import { m } from "framer-motion";
 import dynamic from "next/dynamic";
-import { useEffect } from "react";
 import { shallow } from "zustand/shallow";
 
 import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
@@ -38,13 +37,6 @@ export const EventMeta = () => {
   const isEmbed = useIsEmbed();
   const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
 
-  useEffect(() => {
-    if (!selectedDuration && event?.length) {
-      setSelectedDuration(event.length);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [event?.length, selectedDuration]);
-
   if (hideEventTypeDetails) {
     return null;
   }

packages/features/bookings/components/AvailableTimes.tsx

@@ -11,6 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, SkeletonText } from "@calcom/ui";
 
 import { useBookerStore } from "../Booker/store";
+import { useEvent } from "../Booker/utils/event";
 import { getQueryParam } from "../Booker/utils/query-param";
 import { useTimePreferences } from "../lib";
 import { useCheckOverlapWithOverlay } from "../lib/useCheckOverlapWithOverlay";
@@ -51,9 +52,9 @@ const SlotItem = ({
   const overlayCalendarToggled =
     getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
   const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
-  const selectedDuration = useBookerStore((state) => state.selectedDuration);
   const bookingData = useBookerStore((state) => state.bookingData);
   const layout = useBookerStore((state) => state.layout);
+  const { data: event } = useEvent();
   const hasTimeSlots = !!seatsPerTimeSlot;
   const computedDateWithUsersTimezone = dayjs.utc(slot.time).tz(timezone);
 
@@ -67,11 +68,12 @@ const SlotItem = ({
 
   const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;
 
-  const { isOverlapping, overlappingTimeEnd, overlappingTimeStart } = useCheckOverlapWithOverlay(
+  const { isOverlapping, overlappingTimeEnd, overlappingTimeStart } = useCheckOverlapWithOverlay({
-    computedDateWithUsersTimezone,
+    start: computedDateWithUsersTimezone,
-    selectedDuration,
+    selectedDuration: event?.length ?? 0,
-    offset
+    offset,
-  );
+  });
+
   const [overlapConfirm, setOverlapConfirm] = useState(false);
 
   const onButtonClick = useCallback(() => {

packages/features/bookings/lib/useCheckOverlapWithOverlay.tsx

@@ -9,7 +9,15 @@ function getCurrentTime(date: Date) {
   return `${hours}:${minutes}`;
 }
 
-export function useCheckOverlapWithOverlay(start: Dayjs, selectedDuration: number | null, offset: number) {
+export function useCheckOverlapWithOverlay({
+  start,
+  selectedDuration,
+  offset,
+}: {
+  start: Dayjs;
+  selectedDuration: number | null;
+  offset: number;
+}) {
   const overlayBusyDates = useOverlayCalendarStore((state) => state.overlayBusyDates);
 
   let overlappingTimeStart: string | null = null;