From 6fd64b22099a5860945e55a13e6e7da7973d0aad Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Tue, 18 Apr 2023 18:23:46 +0530
Subject: [PATCH] Fix: cssVars API not working correctly on Booker Timeslot
 selection page (#8296)

* Use a method out of react scope to set CSS vars as that doesnt need react

* Refactor
---
 apps/web/pages/_app.tsx                       | 17 ------
 apps/web/pages/_document.tsx                  |  2 -
 apps/web/public/embed-init-iframe.js          | 26 ---------
 .../embeds/embed-core/embed-iframe-init.ts    | 55 +++++++++++++++++++
 packages/embeds/embed-core/index.html         | 20 +++----
 .../embeds/embed-core/src/embed-iframe.ts     | 12 +++-
 packages/embeds/embed-react/inline.tsx        | 13 +++++
 7 files changed, 89 insertions(+), 56 deletions(-)
 delete mode 100644 apps/web/public/embed-init-iframe.js
 create mode 100644 packages/embeds/embed-core/embed-iframe-init.ts

diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 231c005abe..9caa8a48b6 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -5,7 +5,6 @@ import Head from "next/head";
 import Script from "next/script";
 
 import "@calcom/embed-core/src/embed-iframe";
-import { useEmbedUiConfig } from "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { trpc } from "@calcom/trpc/react";
 
@@ -28,17 +27,6 @@ const calFont = localFont({
 function MyApp(props: AppProps) {
   const { Component, pageProps, err, router } = props;
   let pageStatus = "200";
-  const { cssVarsPerTheme } = useEmbedUiConfig();
-  const cssVarsStyle = [];
-  if (cssVarsPerTheme) {
-    for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) {
-      cssVarsStyle.push(`.${themeName} {`);
-      for (const [cssVarName, value] of Object.entries(cssVars)) {
-        cssVarsStyle.push(`--${cssVarName}: ${value};`);
-      }
-      cssVarsStyle.push(`}`);
-    }
-  }
 
   if (router.pathname === "/404") {
     pageStatus = "404";
@@ -76,11 +64,6 @@ function MyApp(props: AppProps) {
         }
       `}</style>
 
-      <style jsx global>
-        {`
-          ${cssVarsStyle.join("")}
-        `}
-      </style>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </Head>
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index 715ec084a0..aae5340cb4 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -1,6 +1,5 @@
 import type { DocumentContext, DocumentProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
-import Script from "next/script";
 import { z } from "zod";
 
 import { getDirFromLang } from "@calcom/lib/i18n";
@@ -42,7 +41,6 @@ class MyDocument extends Document<Props> {
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" content="var(--cal-bg)" />
-          <Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
         </Head>
 
         <body
diff --git a/apps/web/public/embed-init-iframe.js b/apps/web/public/embed-init-iframe.js
deleted file mode 100644
index 73d5778714..0000000000
--- a/apps/web/public/embed-init-iframe.js
+++ /dev/null
@@ -1,26 +0,0 @@
-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");
-};
-
-window.getEmbedNamespace = () => {
-  const url = new URL(document.URL);
-  const namespace = url.searchParams.get("embed");
-  return namespace;
-};
diff --git a/packages/embeds/embed-core/embed-iframe-init.ts b/packages/embeds/embed-core/embed-iframe-init.ts
new file mode 100644
index 0000000000..e5b0d3d89d
--- /dev/null
+++ b/packages/embeds/embed-core/embed-iframe-init.ts
@@ -0,0 +1,55 @@
+export default function EmbedInitIframe() {
+  if (typeof window === "undefined" || window.isEmbed) {
+    return;
+  }
+
+  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 "light" | "dark" | null;
+  };
+
+  window.getEmbedNamespace = () => {
+    const url = new URL(document.URL);
+    const namespace = url.searchParams.get("embed");
+    return namespace;
+  };
+
+  window.CalEmbed = window.CalEmbed || {};
+
+  window.CalEmbed.applyCssVars = (cssVarsPerTheme) => {
+    const cssVarsStyle = [];
+    if (cssVarsPerTheme) {
+      for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) {
+        cssVarsStyle.push(`.${themeName} {`);
+        for (const [cssVarName, value] of Object.entries(cssVars)) {
+          cssVarsStyle.push(`--${cssVarName}: ${value};`);
+        }
+        cssVarsStyle.push(`}`);
+      }
+    }
+    const style = document.createElement("style");
+    style.id = "embed-css-vars";
+    style.innerText = cssVarsStyle.join("\n");
+    if (document.head.querySelector("#embed-css-vars")) {
+      return;
+    }
+    document.head.appendChild(style);
+  };
+}
diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index f05ebfed0e..03b560959d 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -174,20 +174,20 @@
             If you render booking embed in me, I won't restrict you. The entire page is yours. Content is by
             default aligned center
           </div>
-          <button
-            onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
-            Change <code>eventTypeListItem</code> bg color
-          </button>
-          <button onclick="(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()">
-            Change <code>body</code> bg color
-          </button>
           <button
             onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-border-booker':'green', 'cal-border-booker-width':'20px'},dark:{'cal-border-booker':'red', 'cal-border-booker-width':'5px'}}})})()">
             Change booker border for dark and light themes
           </button>
-          <button onclick="(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()">Align left</button>
+          <button
+            onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
+            Change <code>eventTypeListItem</code> bg color[Deprecated]
+          </button>
+          <button onclick="(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()">
+            Change <code>body</code> bg color[Deprecated]
+          </button>
+          <button onclick="(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()">Align left[Deprecated]</button>
           <button onclick="(function () {Cal.ns.second('ui', {styles:{align:'center'}})})()">
-            Align Center
+            Align Center[Deprecated]
           </button>
           <button
             onclick="(function () {Cal.ns.second('ui', {styles:{enabledDateButton: {
@@ -196,7 +196,7 @@
           disabledDateButton: {
             backgroundColor: generateRandomHexColor(),
           },}})})()">
-            Change 'enabledDateButton` and `disabledDateButton` background Color
+            Change 'enabledDateButton` and `disabledDateButton` background Color[Deprecated]
           </button>
         </div>
       </div>
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 4102b54631..8f09414430 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -2,6 +2,8 @@ import { useRouter } from "next/router";
 import type { CSSProperties } from "react";
 import { useState, useEffect } from "react";
 
+import embedInit from "@calcom/embed-core/embed-iframe-init";
+
 import type { Message } from "./embed";
 import { sdkActionManager } from "./sdk-event";
 
@@ -40,9 +42,10 @@ declare global {
     CalEmbed: {
       __logQueue?: unknown[];
       embedStore: typeof embedStore;
+      applyCssVars: (cssVarsPerTheme: UiConfig["cssVarsPerTheme"]) => void;
     };
     CalComPageStatus: string;
-    isEmbed: () => boolean;
+    isEmbed?: () => boolean;
     resetEmbedStatus: () => void;
     getEmbedNamespace: () => string | null;
     getEmbedTheme: () => "dark" | "light" | null;
@@ -303,6 +306,11 @@ const methods = {
 
     // Set the value here so that if setUiConfig state isn't available and later it's defined,it uses this value
     embedStore.uiConfig = uiConfig;
+
+    if (uiConfig.cssVarsPerTheme) {
+      window.CalEmbed.applyCssVars(uiConfig.cssVarsPerTheme);
+    }
+
     if (embedStore.setUiConfig) {
       embedStore.setUiConfig(uiConfig);
     }
@@ -423,6 +431,8 @@ function keepParentInformedAboutDimensionChanges() {
 
 if (isBrowser) {
   log("Embed SDK loaded", { isEmbed: window?.isEmbed?.() || false });
+  // Exposes certain global variables/fns that are used by the app to get interface with the embed.
+  embedInit();
   const url = new URL(document.URL);
   embedStore.theme = (window?.getEmbedTheme?.() || "auto") as UiConfig["theme"];
   if (url.searchParams.get("prerender") !== "true" && window?.isEmbed?.()) {
diff --git a/packages/embeds/embed-react/inline.tsx b/packages/embeds/embed-react/inline.tsx
index 666d8c6c70..32e08cb9b7 100644
--- a/packages/embeds/embed-react/inline.tsx
+++ b/packages/embeds/embed-react/inline.tsx
@@ -20,6 +20,19 @@ function App() {
         action: "*",
         callback,
       });
+
+      api("ui", {
+        cssVarsPerTheme: {
+          light: {
+            "cal-border-booker": "red",
+            "cal-border-booker-width": "20px",
+          },
+          dark: {
+            "cal-border-booker": "red",
+            "cal-border-booker-width": "5px",
+          },
+        },
+      });
     });
     return () => {
       api.then((api) => {