feat: (Overlay) Persist toggle option (#11961)

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;

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,64 +17,24 @@ import { OverlayCalendarSettingsModal } from "../OverlayCalendar/OverlayCalendar
 import { useLocalSet } from "../hooks/useLocalSet";
 import { useOverlayCalendarStore } from "./store";
 
-export function OverlayCalendarContainer() {
-  const { t } = useLocale();
-  const isEmbed = useIsEmbed();
-  const [continueWithProvider, setContinueWithProvider] = useState(false);
-  const [calendarSettingsOverlay, setCalendarSettingsOverlay] = useState(false);
-  const { data: session } = useSession();
-  const setOverlayBusyDates = useOverlayCalendarStore((state) => state.setOverlayBusyDates);
+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 selectedDate = useBookerStore((state) => state.selectedDate);
+  const searchParams = useSearchParams();
+  const { data: session } = useSession();
   const router = useRouter();
   const pathname = usePathname();
-  const searchParams = useSearchParams();
-  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]);
+  const switchEnabled = enabled;
 
   // Toggle query param for overlay calendar
   const toggleOverlayCalendarQueryParam = useCallback(
@@ -82,8 +42,10 @@ export function OverlayCalendarContainer() {
       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();
@@ -98,18 +60,13 @@ export function OverlayCalendarContainer() {
    * show the continue modal so they can login / create an account
    */
   useEffect(() => {
-    if (!session && overlayCalendarQueryParam === "true") {
+    if (!session && switchEnabled) {
       toggleOverlayCalendarQueryParam(false);
       setContinueWithProvider(true);
     }
-  }, [session, overlayCalendarQueryParam, toggleOverlayCalendarQueryParam]);
-
-  if (isEmbed) {
-    return null;
-  }
+  }, [session, switchEnabled, setContinueWithProvider, toggleOverlayCalendarQueryParam]);
 
   return (
-    <>
     <div
       className={classNames(
         "hidden gap-2",
@@ -118,7 +75,7 @@ export function OverlayCalendarContainer() {
       <div className="flex items-center gap-2 pr-2">
         <Switch
           data-testid="overlay-calendar-switch"
-            checked={overlayCalendarQueryParam === "true"}
+          checked={switchEnabled}
           id="overlayCalendar"
           onCheckedChange={(state) => {
             if (!session) {
@@ -147,6 +104,77 @@ export function OverlayCalendarContainer() {
         />
       )}
     </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
         open={continueWithProvider}
         onClose={(val) => {

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);