diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index f9d2b21b..cdd91101 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/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"; diff --git a/apps/web/contexts/contractsContext.tsx b/apps/web/contexts/contractsContext.tsx index 29e1cca5..a65682e4 100644 --- a/apps/web/contexts/contractsContext.tsx +++ b/apps/web/contexts/contractsContext.tsx @@ -1,5 +1,7 @@ import { createContext, ReactNode, useContext } from "react"; +import { localStorage } from "@calcom/lib/webstorage"; + type contractsContextType = Record; 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, }; diff --git a/apps/web/lib/clock.ts b/apps/web/lib/clock.ts index 75b5939c..cc3d0b82 100644 --- a/apps/web/lib/clock.ts +++ b/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(); }; diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx index d20a6034..dac4da61 100644 --- a/apps/web/pages/success.tsx +++ b/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"; diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts index 0b945cea..a732731d 100644 --- a/packages/embeds/embed-core/src/embed.ts +++ b/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 = ``; + template.innerHTML = ``; this.inlineEl = template.content.children[0]; (this.inlineEl as unknown as any).__CalAutoScroll = config.__autoScroll; this.inlineEl.appendChild(iframe); diff --git a/packages/lib/webstorage.ts b/packages/lib/webstorage.ts new file mode 100644 index 00000000..50eeadc5 --- /dev/null +++ b/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; + } + }, +};