feat: (Overlay) Persist toggle option (#11961)
This commit is contained in:
parent
0c92fbe11d
commit
0b46f61a23
|
@ -19,7 +19,8 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
|
||||||
const schedule = useScheduleForEvent({
|
const schedule = useScheduleForEvent({
|
||||||
prefetchNextMonth: !!extraDays && dayjs(date).month() !== dayjs(date).add(extraDays, "day").month(),
|
prefetchNextMonth: !!extraDays && dayjs(date).month() !== dayjs(date).add(extraDays, "day").month(),
|
||||||
});
|
});
|
||||||
const displayOverlay = getQueryParam("overlayCalendar") === "true";
|
const displayOverlay =
|
||||||
|
getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
|
||||||
|
|
||||||
const event = useEvent();
|
const event = useEvent();
|
||||||
const eventDuration = selectedEventDuration || event?.data?.length || 30;
|
const eventDuration = selectedEventDuration || event?.data?.length || 30;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { useSession } from "next-auth/react";
|
import { useSession } from "next-auth/react";
|
||||||
import { useRouter, useSearchParams, usePathname } from "next/navigation";
|
import { useSearchParams, useRouter, usePathname } from "next/navigation";
|
||||||
import { useState, useCallback, useEffect } from "react";
|
import { useState, useCallback, useEffect } from "react";
|
||||||
|
|
||||||
import dayjs from "@calcom/dayjs";
|
import dayjs from "@calcom/dayjs";
|
||||||
|
@ -17,64 +17,24 @@ import { OverlayCalendarSettingsModal } from "../OverlayCalendar/OverlayCalendar
|
||||||
import { useLocalSet } from "../hooks/useLocalSet";
|
import { useLocalSet } from "../hooks/useLocalSet";
|
||||||
import { useOverlayCalendarStore } from "./store";
|
import { useOverlayCalendarStore } from "./store";
|
||||||
|
|
||||||
export function OverlayCalendarContainer() {
|
interface OverlayCalendarSwitchProps {
|
||||||
const { t } = useLocale();
|
setContinueWithProvider: (val: boolean) => void;
|
||||||
const isEmbed = useIsEmbed();
|
setCalendarSettingsOverlay: (val: boolean) => void;
|
||||||
const [continueWithProvider, setContinueWithProvider] = useState(false);
|
enabled?: boolean;
|
||||||
const [calendarSettingsOverlay, setCalendarSettingsOverlay] = useState(false);
|
}
|
||||||
const { data: session } = useSession();
|
|
||||||
const setOverlayBusyDates = useOverlayCalendarStore((state) => state.setOverlayBusyDates);
|
|
||||||
|
|
||||||
|
function OverlayCalendarSwitch({
|
||||||
|
setCalendarSettingsOverlay,
|
||||||
|
setContinueWithProvider,
|
||||||
|
enabled,
|
||||||
|
}: OverlayCalendarSwitchProps) {
|
||||||
|
const { t } = useLocale();
|
||||||
const layout = useBookerStore((state) => state.layout);
|
const layout = useBookerStore((state) => state.layout);
|
||||||
const selectedDate = useBookerStore((state) => state.selectedDate);
|
const searchParams = useSearchParams();
|
||||||
|
const { data: session } = useSession();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const searchParams = useSearchParams();
|
const switchEnabled = enabled;
|
||||||
const { timezone } = useTimePreferences();
|
|
||||||
|
|
||||||
// Move this to a hook
|
|
||||||
const { set, clearSet } = useLocalSet<{
|
|
||||||
credentialId: number;
|
|
||||||
externalId: string;
|
|
||||||
}>("toggledConnectedCalendars", []);
|
|
||||||
const overlayCalendarQueryParam = searchParams.get("overlayCalendar");
|
|
||||||
|
|
||||||
const { data: overlayBusyDates } = trpc.viewer.availability.calendarOverlay.useQuery(
|
|
||||||
{
|
|
||||||
loggedInUsersTz: timezone || "Europe/London",
|
|
||||||
dateFrom: selectedDate,
|
|
||||||
dateTo: selectedDate,
|
|
||||||
calendarsToLoad: Array.from(set).map((item) => ({
|
|
||||||
credentialId: item.credentialId,
|
|
||||||
externalId: item.externalId,
|
|
||||||
})),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
enabled: !!session && set.size > 0 && overlayCalendarQueryParam === "true",
|
|
||||||
onError: () => {
|
|
||||||
clearSet();
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (overlayBusyDates) {
|
|
||||||
const nowDate = dayjs();
|
|
||||||
const usersTimezoneDate = nowDate.tz(timezone);
|
|
||||||
|
|
||||||
const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;
|
|
||||||
|
|
||||||
const offsettedArray = overlayBusyDates.map((item) => {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
start: dayjs(item.start).add(offset, "hours").toDate(),
|
|
||||||
end: dayjs(item.end).add(offset, "hours").toDate(),
|
|
||||||
};
|
|
||||||
});
|
|
||||||
setOverlayBusyDates(offsettedArray);
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [overlayBusyDates]);
|
|
||||||
|
|
||||||
// Toggle query param for overlay calendar
|
// Toggle query param for overlay calendar
|
||||||
const toggleOverlayCalendarQueryParam = useCallback(
|
const toggleOverlayCalendarQueryParam = useCallback(
|
||||||
|
@ -82,8 +42,10 @@ export function OverlayCalendarContainer() {
|
||||||
const current = new URLSearchParams(Array.from(searchParams.entries()));
|
const current = new URLSearchParams(Array.from(searchParams.entries()));
|
||||||
if (state) {
|
if (state) {
|
||||||
current.set("overlayCalendar", "true");
|
current.set("overlayCalendar", "true");
|
||||||
|
localStorage.setItem("overlayCalendarSwitchDefault", "true");
|
||||||
} else {
|
} else {
|
||||||
current.delete("overlayCalendar");
|
current.delete("overlayCalendar");
|
||||||
|
localStorage.removeItem("overlayCalendarSwitchDefault");
|
||||||
}
|
}
|
||||||
// cast to string
|
// cast to string
|
||||||
const value = current.toString();
|
const value = current.toString();
|
||||||
|
@ -98,18 +60,13 @@ export function OverlayCalendarContainer() {
|
||||||
* show the continue modal so they can login / create an account
|
* show the continue modal so they can login / create an account
|
||||||
*/
|
*/
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!session && overlayCalendarQueryParam === "true") {
|
if (!session && switchEnabled) {
|
||||||
toggleOverlayCalendarQueryParam(false);
|
toggleOverlayCalendarQueryParam(false);
|
||||||
setContinueWithProvider(true);
|
setContinueWithProvider(true);
|
||||||
}
|
}
|
||||||
}, [session, overlayCalendarQueryParam, toggleOverlayCalendarQueryParam]);
|
}, [session, switchEnabled, setContinueWithProvider, toggleOverlayCalendarQueryParam]);
|
||||||
|
|
||||||
if (isEmbed) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"hidden gap-2",
|
"hidden gap-2",
|
||||||
|
@ -118,7 +75,7 @@ export function OverlayCalendarContainer() {
|
||||||
<div className="flex items-center gap-2 pr-2">
|
<div className="flex items-center gap-2 pr-2">
|
||||||
<Switch
|
<Switch
|
||||||
data-testid="overlay-calendar-switch"
|
data-testid="overlay-calendar-switch"
|
||||||
checked={overlayCalendarQueryParam === "true"}
|
checked={switchEnabled}
|
||||||
id="overlayCalendar"
|
id="overlayCalendar"
|
||||||
onCheckedChange={(state) => {
|
onCheckedChange={(state) => {
|
||||||
if (!session) {
|
if (!session) {
|
||||||
|
@ -147,6 +104,77 @@ export function OverlayCalendarContainer() {
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function OverlayCalendarContainer() {
|
||||||
|
const isEmbed = useIsEmbed();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const [continueWithProvider, setContinueWithProvider] = useState(false);
|
||||||
|
const [calendarSettingsOverlay, setCalendarSettingsOverlay] = useState(false);
|
||||||
|
const { data: session } = useSession();
|
||||||
|
const setOverlayBusyDates = useOverlayCalendarStore((state) => state.setOverlayBusyDates);
|
||||||
|
const switchEnabled =
|
||||||
|
searchParams.get("overlayCalendar") === "true" ||
|
||||||
|
localStorage.getItem("overlayCalendarSwitchDefault") === "true";
|
||||||
|
|
||||||
|
const selectedDate = useBookerStore((state) => state.selectedDate);
|
||||||
|
const { timezone } = useTimePreferences();
|
||||||
|
|
||||||
|
// Move this to a hook
|
||||||
|
const { set, clearSet } = useLocalSet<{
|
||||||
|
credentialId: number;
|
||||||
|
externalId: string;
|
||||||
|
}>("toggledConnectedCalendars", []);
|
||||||
|
|
||||||
|
const { data: overlayBusyDates } = trpc.viewer.availability.calendarOverlay.useQuery(
|
||||||
|
{
|
||||||
|
loggedInUsersTz: timezone || "Europe/London",
|
||||||
|
dateFrom: selectedDate,
|
||||||
|
dateTo: selectedDate,
|
||||||
|
calendarsToLoad: Array.from(set).map((item) => ({
|
||||||
|
credentialId: item.credentialId,
|
||||||
|
externalId: item.externalId,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enabled: !!session && set.size > 0 && switchEnabled,
|
||||||
|
onError: () => {
|
||||||
|
clearSet();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (overlayBusyDates) {
|
||||||
|
const nowDate = dayjs();
|
||||||
|
const usersTimezoneDate = nowDate.tz(timezone);
|
||||||
|
|
||||||
|
const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;
|
||||||
|
|
||||||
|
const offsettedArray = overlayBusyDates.map((item) => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
start: dayjs(item.start).add(offset, "hours").toDate(),
|
||||||
|
end: dayjs(item.end).add(offset, "hours").toDate(),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setOverlayBusyDates(offsettedArray);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [overlayBusyDates]);
|
||||||
|
|
||||||
|
if (isEmbed) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<OverlayCalendarSwitch
|
||||||
|
setCalendarSettingsOverlay={setCalendarSettingsOverlay}
|
||||||
|
setContinueWithProvider={setContinueWithProvider}
|
||||||
|
enabled={switchEnabled}
|
||||||
|
/>
|
||||||
<OverlayCalendarContinueModal
|
<OverlayCalendarContinueModal
|
||||||
open={continueWithProvider}
|
open={continueWithProvider}
|
||||||
onClose={(val) => {
|
onClose={(val) => {
|
||||||
|
|
|
@ -48,7 +48,8 @@ const SlotItem = ({
|
||||||
}) => {
|
}) => {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
|
|
||||||
const overlayCalendarToggled = getQueryParam("overlayCalendar") === "true";
|
const overlayCalendarToggled =
|
||||||
|
getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
|
||||||
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
|
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
|
||||||
const selectedDuration = useBookerStore((state) => state.selectedDuration);
|
const selectedDuration = useBookerStore((state) => state.selectedDuration);
|
||||||
const bookingData = useBookerStore((state) => state.bookingData);
|
const bookingData = useBookerStore((state) => state.bookingData);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user