fix: BookerEmbed atom localStorage issues (#17611)

packages/features/bookings/Booker/components/LargeCalendar.tsx

@@ -30,7 +30,7 @@ export const LargeCalendar = ({
   const selectedEventDuration = useBookerStore((state) => state.selectedDuration);
   const overlayEvents = useOverlayCalendarStore((state) => state.overlayBusyDates);
   const displayOverlay =
-    getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
+    getQueryParam("overlayCalendar") === "true" || localStorage?.getItem("overlayCalendarSwitchDefault");
 
   const eventDuration = selectedEventDuration || event?.data?.length || 30;
 

packages/features/bookings/Booker/types.ts

@@ -153,5 +153,5 @@ export type CustomClassNames = {
     availableTimeSlotsTimeFormatToggle?: string;
     availableTimes?: string;
   };
-  atomsWrapper: string;
+  atomsWrapper?: string;
 };

packages/features/bookings/components/AvailableTimes.tsx

@@ -64,7 +64,7 @@ const SlotItem = ({
   const { t } = useLocale();
 
   const overlayCalendarToggled =
-    getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
+    getQueryParam("overlayCalendar") === "true" || localStorage?.getItem("overlayCalendarSwitchDefault");
   const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
   const bookingData = useBookerStore((state) => state.bookingData);
   const layout = useBookerStore((state) => state.layout);

packages/platform/atoms/booker-embed/BookerEmbed.tsx

@@ -11,6 +11,7 @@ export const BookerEmbed = (
   return (
     <CalProvider
       clientId={import.meta.env.VITE_BOOKER_EMBED_OAUTH_CLIENT_ID}
+      isEmbed={true}
       options={{
         apiUrl: import.meta.env.VITE_BOOKER_EMBED_API_URL,
       }}>

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -361,9 +361,9 @@ export const BookerPlatformWrapper = (
     (state: boolean) => {
       setIsOverlayCalendarEnabled(state);
       if (state) {
-        localStorage.setItem("overlayCalendarSwitchDefault", "true");
+        localStorage?.setItem("overlayCalendarSwitchDefault", "true");
       } else {
-        localStorage.removeItem("overlayCalendarSwitchDefault");
+        localStorage?.removeItem("overlayCalendarSwitchDefault");
       }
     },
     [setIsOverlayCalendarEnabled]
@@ -394,7 +394,7 @@ export const BookerPlatformWrapper = (
 
   useEffect(() => {
     if (isOverlayCalendarEnabled && view === "MONTH_VIEW") {
-      localStorage.removeItem("overlayCalendarSwitchDefault");
+      localStorage?.removeItem("overlayCalendarSwitchDefault");
     }
     setIsOverlayCalendarEnabled(Boolean(localStorage?.getItem?.("overlayCalendarSwitchDefault")));
   }, [view, isOverlayCalendarEnabled]);

packages/platform/atoms/cal-provider/BaseCalProvider.tsx

@@ -39,6 +39,7 @@ export function BaseCalProvider({
   language = EN,
   organizationId,
   onTimezoneChange,
+  isEmbed,
 }: CalProviderProps) {
   const [error, setError] = useState<string>("");
   const [stateOrgId, setOrganizationId] = useState<number>(0);
@@ -63,6 +64,7 @@ export function BaseCalProvider({
   useTimezone(getTimezoneChangeHandler());
 
   const { isInit } = useOAuthClient({
+    isEmbed,
     clientId,
     apiUrl: options.apiUrl,
     refreshUrl: options.refreshUrl,

packages/platform/atoms/cal-provider/CalProvider.tsx

@@ -72,6 +72,7 @@ export type CalProviderProps = {
   onTimezoneChange?: () => void;
   version?: API_VERSIONS_ENUM;
   organizationId?: number;
+  isEmbed?: boolean;
 } & i18nProps;
 
 /**
@@ -99,6 +100,7 @@ export function CalProvider({
   onTimezoneChange,
   version = VERSION_2024_06_14,
   organizationId,
+  isEmbed = false,
 }: CalProviderProps) {
   useEffect(() => {
     http.setVersionHeader(version);
@@ -113,6 +115,7 @@ export function CalProvider({
   return (
     <QueryClientProvider client={queryClient}>
       <BaseCalProvider
+        isEmbed={isEmbed}
         autoUpdateTimezone={autoUpdateTimezone}
         onTimezoneChange={onTimezoneChange}
         clientId={clientId}

packages/platform/atoms/hooks/useOAuthClient.ts

@@ -8,13 +8,21 @@ import type { ApiResponse } from "@calcom/platform-types";
 import http from "../lib/http";
 
 export interface useOAuthClientProps {
+  isEmbed?: boolean;
   clientId: string;
   apiUrl?: string;
   refreshUrl?: string;
   onError: (error: string) => void;
   onSuccess: (data: { client: string; organizationId: number; name: string }) => void;
 }
-export const useOAuthClient = ({ clientId, apiUrl, refreshUrl, onError, onSuccess }: useOAuthClientProps) => {
+export const useOAuthClient = ({
+  isEmbed,
+  clientId,
+  apiUrl,
+  refreshUrl,
+  onError,
+  onSuccess,
+}: useOAuthClientProps) => {
   const prevClientId = usePrevious(clientId);
   const [isInit, setIsInit] = useState<boolean>(false);
   useEffect(() => {
@@ -28,7 +36,7 @@ export const useOAuthClient = ({ clientId, apiUrl, refreshUrl, onError, onSucces
   }, [apiUrl, refreshUrl]);
 
   useEffect(() => {
-    if (clientId && http.getUrl() && prevClientId !== clientId) {
+    if (!isEmbed && clientId && http.getUrl() && prevClientId !== clientId) {
       try {
         http
           .get<ApiResponse<{ client: string; organizationId: number; name: string }>>(`/provider/${clientId}`)
@@ -47,7 +55,7 @@ export const useOAuthClient = ({ clientId, apiUrl, refreshUrl, onError, onSucces
         console.error(err);
       }
     }
-  }, [clientId, onError, prevClientId, onSuccess]);
+  }, [isEmbed, clientId, onError, prevClientId, onSuccess]);
 
   return { isInit };
 };