Hotfix: blank page for booking embed in Incognito Chrome (#2700)

* Merge remote-tracking branch 'origin/main' into feat/success-url

* Fix localstorage access

* Fix Comments

* make custom eleemnt explicitly 100% in width to go full width in a flex type parent

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -31,6 +31,7 @@ import {
 import classNames from "@calcom/lib/classNames";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { localStorage } from "@calcom/lib/webstorage";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";

apps/web/contexts/contractsContext.tsx

@@ -1,5 +1,7 @@
 import { createContext, ReactNode, useContext } from "react";
 
+import { localStorage } from "@calcom/lib/webstorage";
+
 type contractsContextType = Record<string, string>;
 
 const contractsContextDefaultValue: contractsContextType = {};
@@ -21,18 +23,17 @@ interface addContractsPayload {
 
 export function ContractsProvider({ children }: Props) {
   const addContract = (payload: addContractsPayload) => {
-    window.localStorage.setItem(
+    localStorage.setItem(
       "contracts",
       JSON.stringify({
-        ...JSON.parse(window.localStorage.getItem("contracts") || "{}"),
+        ...JSON.parse(localStorage.getItem("contracts") || "{}"),
         [payload.address]: payload.signature,
       })
     );
   };
 
   const value = {
-    contracts:
-      typeof window !== "undefined" ? JSON.parse(window.localStorage.getItem("contracts") || "{}") : {},
+    contracts: typeof window !== "undefined" ? JSON.parse(localStorage.getItem("contracts") || "{}") : {},
     addContract,
   };
 

apps/web/lib/clock.ts

@@ -3,6 +3,8 @@ import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
+import { localStorage } from "@calcom/lib/webstorage";
+
 import { isBrowserLocale24h } from "./timeFormat";
 
 dayjs.extend(utc);
@@ -21,11 +23,11 @@ const timeOptions: TimeOptions = {
 const isInitialized = false;
 
 const initClock = () => {
-  if (typeof localStorage === "undefined" || isInitialized) {
+  if (isInitialized) {
     return;
   }
   // This only sets browser locale if there's no preference on localStorage.
-  if (!localStorage || !localStorage.getItem("timeOption.is24hClock")) set24hClock(isBrowserLocale24h());
+  if (!localStorage.getItem("timeOption.is24hClock")) set24hClock(isBrowserLocale24h());
   timeOptions.is24hClock = localStorage.getItem("timeOption.is24hClock") === "true";
   timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess();
 };

apps/web/pages/success.tsx

@@ -24,6 +24,7 @@ import {
 } from "@calcom/embed-core";
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { localStorage } from "@calcom/lib/webstorage";
 import { RecurringEvent } from "@calcom/types/Calendar";
 import Button from "@calcom/ui/Button";
 import { EmailInput } from "@calcom/ui/form/fields";

packages/embeds/embed-core/src/embed.ts

@@ -263,7 +263,7 @@ export class Cal {
       throw new Error("Element not found");
     }
     const template = document.createElement("template");
-    template.innerHTML = `<cal-inline style="max-height:inherit;height:inherit;min-height:inherit;display:flex;position:relative;flex-wrap:wrap"></cal-inline>`;
+    template.innerHTML = `<cal-inline style="max-height:inherit;height:inherit;min-height:inherit;display:flex;position:relative;flex-wrap:wrap;width:100%"></cal-inline>`;
     this.inlineEl = template.content.children[0];
     (this.inlineEl as unknown as any).__CalAutoScroll = config.__autoScroll;
     this.inlineEl.appendChild(iframe);

packages/lib/webstorage.ts

@@ -0,0 +1,22 @@
+// TODO: In case of an embed if localStorage is not available(third party), use localStorage of parent(first party) that contains the iframe.
+export const localStorage = {
+  getItem(key: string) {
+    try {
+      return window.localStorage.getItem(key);
+    } catch (e) {
+      // In case storage is restricted. Possible reasons
+      // 1. Third Party Context in Chrome Incognito mode.
+      return null;
+    }
+  },
+  setItem(key: string, value: string) {
+    try {
+      window.localStorage.setItem(key, value);
+    } catch (e) {
+      // In case storage is restricted. Possible reasons
+      // 1. Third Party Context in Chrome Incognito mode.
+      // 2. Storage limit reached
+      return;
+    }
+  },
+};