import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps } from "next/document"; import Script from "next/script"; import { getDirFromLang } from "@calcom/lib/i18n"; type Props = Record & DocumentProps; function toRunBeforeReactOnClient() { const calEmbedMode = typeof new URL(document.URL).searchParams.get("embed") === "string"; /* Iframe Name */ window.name.includes("cal-embed"); window.isEmbed = () => { // Once an embed mode always an embed mode return calEmbedMode; }; window.resetEmbedStatus = () => { try { // eslint-disable-next-line @calcom/eslint/avoid-web-storage window.sessionStorage.removeItem("calEmbedMode"); } catch (e) {} }; window.getEmbedTheme = () => { const url = new URL(document.URL); return url.searchParams.get("theme") as "dark" | "light"; }; window.getEmbedNamespace = () => { const url = new URL(document.URL); const namespace = url.searchParams.get("embed"); return namespace; }; window.isPageOptimizedForEmbed = () => { // Those pages are considered optimized, which know at backend that they are rendering for embed. // Such pages can be shown straightaway without a loader for a better embed experience return location.pathname.includes("forms/"); }; } class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const isEmbed = ctx.asPath?.includes("/embed") || ctx.asPath?.includes("embedType="); const initialProps = await Document.getInitialProps(ctx); return { isEmbed, ...initialProps }; } render() { const { locale } = this.props.__NEXT_DATA__; const dir = getDirFromLang(locale); return ( {/* Define isEmbed here so that it can be shared with App(embed-iframe) as well as the following code to change background and hide body Persist the embed mode in sessionStorage because query param might get lost during browsing. */}