From d043de77249a2155bfaf983fe135b030ce6895ff Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Fri, 20 Oct 2023 15:02:08 +0100
Subject: [PATCH] fix: overlay calendar modal (#12021)

---
 .../OverlayCalendarContainer.tsx              | 34 ++++++++++---------
 .../components/OverlayCalendar/store.ts       | 12 +++++++
 2 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx
index f0a521cea0..a4e52447f5 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx
@@ -1,6 +1,7 @@
 import { useSession } from "next-auth/react";
 import { useSearchParams, useRouter, usePathname } from "next/navigation";
-import { useState, useCallback, useEffect } from "react";
+import { useCallback, useEffect } from "react";
+import { shallow } from "zustand/shallow";
 
 import dayjs from "@calcom/dayjs";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
@@ -18,17 +19,15 @@ import { useLocalSet } from "../hooks/useLocalSet";
 import { useOverlayCalendarStore } from "./store";
 
 interface OverlayCalendarSwitchProps {
-  setContinueWithProvider: (val: boolean) => void;
-  setCalendarSettingsOverlay: (val: boolean) => void;
   enabled?: boolean;
 }
 
-function OverlayCalendarSwitch({
-  setCalendarSettingsOverlay,
-  setContinueWithProvider,
-  enabled,
-}: OverlayCalendarSwitchProps) {
+function OverlayCalendarSwitch({ enabled }: OverlayCalendarSwitchProps) {
   const { t } = useLocale();
+  const setContinueWithProvider = useOverlayCalendarStore((state) => state.setContinueWithProviderModal);
+  const setCalendarSettingsOverlay = useOverlayCalendarStore(
+    (state) => state.setCalendarSettingsOverlayModal
+  );
   const layout = useBookerStore((state) => state.layout);
   const searchParams = useSearchParams();
   const { data: session } = useSession();
@@ -110,9 +109,16 @@ function OverlayCalendarSwitch({
 export function OverlayCalendarContainer() {
   const isEmbed = useIsEmbed();
   const searchParams = useSearchParams();
-  const [continueWithProvider, setContinueWithProvider] = useState(false);
-  const [calendarSettingsOverlay, setCalendarSettingsOverlay] = useState(false);
-  const { data: session } = useSession();
+  const [continueWithProvider, setContinueWithProvider] = useOverlayCalendarStore(
+    (state) => [state.continueWithProviderModal, state.setContinueWithProviderModal],
+    shallow
+  );
+  const [calendarSettingsOverlay, setCalendarSettingsOverlay] = useOverlayCalendarStore(
+    (state) => [state.calendarSettingsOverlayModal, state.setCalendarSettingsOverlayModal],
+    shallow
+  );
+
+  const { data: session, status: sessionStatus } = useSession();
   const setOverlayBusyDates = useOverlayCalendarStore((state) => state.setOverlayBusyDates);
   const switchEnabled =
     searchParams.get("overlayCalendar") === "true" ||
@@ -170,11 +176,7 @@ export function OverlayCalendarContainer() {
 
   return (
     <>
-      <OverlayCalendarSwitch
-        setCalendarSettingsOverlay={setCalendarSettingsOverlay}
-        setContinueWithProvider={setContinueWithProvider}
-        enabled={switchEnabled}
-      />
+      <OverlayCalendarSwitch enabled={switchEnabled} />
       <OverlayCalendarContinueModal
         open={continueWithProvider}
         onClose={(val) => {
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/store.ts b/packages/features/bookings/Booker/components/OverlayCalendar/store.ts
index 1d9fd90b55..9187e90595 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/store.ts
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/store.ts
@@ -5,6 +5,10 @@ import type { EventBusyDate } from "@calcom/types/Calendar";
 interface IOverlayCalendarStore {
   overlayBusyDates: EventBusyDate[] | undefined;
   setOverlayBusyDates: (busyDates: EventBusyDate[]) => void;
+  continueWithProviderModal: boolean;
+  setContinueWithProviderModal: (value: boolean) => void;
+  calendarSettingsOverlayModal: boolean;
+  setCalendarSettingsOverlayModal: (value: boolean) => void;
 }
 
 export const useOverlayCalendarStore = create<IOverlayCalendarStore>((set) => ({
@@ -12,4 +16,12 @@ export const useOverlayCalendarStore = create<IOverlayCalendarStore>((set) => ({
   setOverlayBusyDates: (busyDates: EventBusyDate[]) => {
     set({ overlayBusyDates: busyDates });
   },
+  calendarSettingsOverlayModal: false,
+  setCalendarSettingsOverlayModal: (value: boolean) => {
+    set({ calendarSettingsOverlayModal: value });
+  },
+  continueWithProviderModal: false,
+  setContinueWithProviderModal: (value: boolean) => {
+    set({ continueWithProviderModal: value });
+  },
 }));