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 ( <> - + { 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((set) => ({ @@ -12,4 +16,12 @@ export const useOverlayCalendarStore = create((set) => ({ setOverlayBusyDates: (busyDates: EventBusyDate[]) => { set({ overlayBusyDates: busyDates }); }, + calendarSettingsOverlayModal: false, + setCalendarSettingsOverlayModal: (value: boolean) => { + set({ calendarSettingsOverlayModal: value }); + }, + continueWithProviderModal: false, + setContinueWithProviderModal: (value: boolean) => { + set({ continueWithProviderModal: value }); + }, }));