maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: overlay calendar modal (#12021)

This commit is contained in:
sean-brydon 2023-10-20 15:02:08 +01:00 committed by GitHub
parent be1517facd
commit d043de7724
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx
View File

@ -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) => {

12
packages/features/bookings/Booker/components/OverlayCalendar/store.ts
View File

@ -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 });
},
}));