diff --git a/packages/features/bookings/Booker/components/LargeCalendar.tsx b/packages/features/bookings/Booker/components/LargeCalendar.tsx
index 86fd16996a..f71dfe113e 100644
--- a/packages/features/bookings/Booker/components/LargeCalendar.tsx
+++ b/packages/features/bookings/Booker/components/LargeCalendar.tsx
@@ -19,7 +19,8 @@ export const LargeCalendar = ({ extraDays }: { extraDays: number }) => {
const schedule = useScheduleForEvent({
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 eventDuration = selectedEventDuration || event?.data?.length || 30;
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx
index a44543f67c..f0a521cea0 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContainer.tsx
@@ -1,5 +1,5 @@
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 dayjs from "@calcom/dayjs";
@@ -17,19 +17,108 @@ import { OverlayCalendarSettingsModal } from "../OverlayCalendar/OverlayCalendar
import { useLocalSet } from "../hooks/useLocalSet";
import { useOverlayCalendarStore } from "./store";
-export function OverlayCalendarContainer() {
+interface OverlayCalendarSwitchProps {
+ setContinueWithProvider: (val: boolean) => void;
+ setCalendarSettingsOverlay: (val: boolean) => void;
+ enabled?: boolean;
+}
+
+function OverlayCalendarSwitch({
+ setCalendarSettingsOverlay,
+ setContinueWithProvider,
+ enabled,
+}: OverlayCalendarSwitchProps) {
const { t } = useLocale();
+ const layout = useBookerStore((state) => state.layout);
+ const searchParams = useSearchParams();
+ const { data: session } = useSession();
+ const router = useRouter();
+ const pathname = usePathname();
+ const switchEnabled = enabled;
+
+ // Toggle query param for overlay calendar
+ const toggleOverlayCalendarQueryParam = useCallback(
+ (state: boolean) => {
+ const current = new URLSearchParams(Array.from(searchParams.entries()));
+ if (state) {
+ current.set("overlayCalendar", "true");
+ localStorage.setItem("overlayCalendarSwitchDefault", "true");
+ } else {
+ current.delete("overlayCalendar");
+ localStorage.removeItem("overlayCalendarSwitchDefault");
+ }
+ // cast to string
+ const value = current.toString();
+ const query = value ? `?${value}` : "";
+ router.push(`${pathname}${query}`);
+ },
+ [searchParams, pathname, router]
+ );
+
+ /**
+ * If a user is not logged in and the overlay calendar query param is true,
+ * show the continue modal so they can login / create an account
+ */
+ useEffect(() => {
+ if (!session && switchEnabled) {
+ toggleOverlayCalendarQueryParam(false);
+ setContinueWithProvider(true);
+ }
+ }, [session, switchEnabled, setContinueWithProvider, toggleOverlayCalendarQueryParam]);
+
+ return (
+
+
+ {
+ if (!session) {
+ setContinueWithProvider(state);
+ } else {
+ toggleOverlayCalendarQueryParam(state);
+ }
+ }}
+ />
+
+
+ {session && (
+
+ );
+}
+
+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 layout = useBookerStore((state) => state.layout);
const selectedDate = useBookerStore((state) => state.selectedDate);
- const router = useRouter();
- const pathname = usePathname();
- const searchParams = useSearchParams();
const { timezone } = useTimePreferences();
// Move this to a hook
@@ -37,7 +126,6 @@ export function OverlayCalendarContainer() {
credentialId: number;
externalId: string;
}>("toggledConnectedCalendars", []);
- const overlayCalendarQueryParam = searchParams.get("overlayCalendar");
const { data: overlayBusyDates } = trpc.viewer.availability.calendarOverlay.useQuery(
{
@@ -50,7 +138,7 @@ export function OverlayCalendarContainer() {
})),
},
{
- enabled: !!session && set.size > 0 && overlayCalendarQueryParam === "true",
+ enabled: !!session && set.size > 0 && switchEnabled,
onError: () => {
clearSet();
},
@@ -76,77 +164,17 @@ export function OverlayCalendarContainer() {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [overlayBusyDates]);
- // Toggle query param for overlay calendar
- const toggleOverlayCalendarQueryParam = useCallback(
- (state: boolean) => {
- const current = new URLSearchParams(Array.from(searchParams.entries()));
- if (state) {
- current.set("overlayCalendar", "true");
- } else {
- current.delete("overlayCalendar");
- }
- // cast to string
- const value = current.toString();
- const query = value ? `?${value}` : "";
- router.push(`${pathname}${query}`);
- },
- [searchParams, pathname, router]
- );
-
- /**
- * If a user is not logged in and the overlay calendar query param is true,
- * show the continue modal so they can login / create an account
- */
- useEffect(() => {
- if (!session && overlayCalendarQueryParam === "true") {
- toggleOverlayCalendarQueryParam(false);
- setContinueWithProvider(true);
- }
- }, [session, overlayCalendarQueryParam, toggleOverlayCalendarQueryParam]);
-
if (isEmbed) {
return null;
}
return (
<>
-
-
- {
- if (!session) {
- setContinueWithProvider(state);
- } else {
- toggleOverlayCalendarQueryParam(state);
- }
- }}
- />
-
-
- {session && (
-
+
{
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index e46e020a6e..509056d5a3 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -48,7 +48,8 @@ const SlotItem = ({
}) => {
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 selectedDuration = useBookerStore((state) => state.selectedDuration);
const bookingData = useBookerStore((state) => state.bookingData);