From a8c03262c2db4d4e35d198a765b69191ab0f5d0c Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 24 Oct 2023 20:15:17 +0100
Subject: [PATCH] fix: re-render on booker (#12058)

---
 .../bookings/Booker/components/EventMeta.tsx       |  8 --------
 .../bookings/components/AvailableTimes.tsx         | 14 ++++++++------
 .../bookings/lib/useCheckOverlapWithOverlay.tsx    | 10 +++++++++-
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
index 6a6fb5ee78..83bcfc6312 100644
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/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;
   }
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index 509056d5a3..1daa55e284 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/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(
-    computedDateWithUsersTimezone,
-    selectedDuration,
-    offset
-  );
+  const { isOverlapping, overlappingTimeEnd, overlappingTimeStart } = useCheckOverlapWithOverlay({
+    start: computedDateWithUsersTimezone,
+    selectedDuration: event?.length ?? 0,
+    offset,
+  });
+
   const [overlapConfirm, setOverlapConfirm] = useState(false);
 
   const onButtonClick = useCallback(() => {
diff --git a/packages/features/bookings/lib/useCheckOverlapWithOverlay.tsx b/packages/features/bookings/lib/useCheckOverlapWithOverlay.tsx
index a1a3020da8..ba994ee7f7 100644
--- a/packages/features/bookings/lib/useCheckOverlapWithOverlay.tsx
+++ b/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;