Skip to content

Commit 6fd64b2

Browse files
hariombalharahariombalhara
authored
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
1 parent 585e367 commit 6fd64b2

File tree

7 files changed

+88
-55
lines changed

7 files changed

+88
-55
lines changed

‎apps/web/pages/_app.tsx‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Head from "next/head";
55
import Script from "next/script";
66

77
import "@calcom/embed-core/src/embed-iframe";
8-
import { useEmbedUiConfig } from "@calcom/embed-core/src/embed-iframe";
98
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
109
import { trpc } from "@calcom/trpc/react";
1110

@@ -28,17 +27,6 @@ const calFont = localFont({
2827
function MyApp(props: AppProps) {
2928
const { Component, pageProps, err, router } = props;
3029
let pageStatus = "200";
31-
const { cssVarsPerTheme } = useEmbedUiConfig();
32-
const cssVarsStyle = [];
33-
if (cssVarsPerTheme) {
34-
for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) {
35-
cssVarsStyle.push(`.${themeName} {`);
36-
for (const [cssVarName, value] of Object.entries(cssVars)) {
37-
cssVarsStyle.push(`--${cssVarName}: ${value};`);
38-
}
39-
cssVarsStyle.push(`}`);
40-
}
41-
}
4230

4331
if (router.pathname === "/404") {
4432
pageStatus = "404";
@@ -76,11 +64,6 @@ function MyApp(props: AppProps) {
7664
}
7765
`}</style>
7866

79-
<style jsx global>
80-
{`
81-
${cssVarsStyle.join("")}
82-
`}
83-
</style>
8467
<Head>
8568
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
8669
</Head>

‎apps/web/pages/_document.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { DocumentContext, DocumentProps } from "next/document";
22
import Document, { Head, Html, Main, NextScript } from "next/document";
3-
import Script from "next/script";
43
import { z } from "zod";
54

65
import { getDirFromLang } from "@calcom/lib/i18n";
@@ -42,7 +41,6 @@ class MyDocument extends Document<Props> {
4241
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
4342
<meta name="msapplication-TileColor" content="#ff0000" />
4443
<meta name="theme-color" content="var(--cal-bg)" />
45-
<Script src="/embed-init-iframe.js" strategy="beforeInteractive" />
4644
</Head>
4745

4846
<body

‎apps/web/public/embed-init-iframe.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎packages/embeds/embed-core/embed-iframe-init.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
export default function EmbedInitIframe() {
2+
if (typeof window === "undefined" || window.isEmbed) {
3+
return;
4+
}
5+
6+
const calEmbedMode = typeof new URL(document.URL).searchParams.get("embed") === "string";
7+
8+
/* Iframe Name */
9+
window.name.includes("cal-embed");
10+
11+
window.isEmbed = () => {
12+
// Once an embed mode always an embed mode
13+
return calEmbedMode;
14+
};
15+
16+
window.resetEmbedStatus = () => {
17+
try {
18+
// eslint-disable-next-line @calcom/eslint/avoid-web-storage
19+
window.sessionStorage.removeItem("calEmbedMode");
20+
} catch (e) {}
21+
};
22+
23+
window.getEmbedTheme = () => {
24+
const url = new URL(document.URL);
25+
return url.searchParams.get("theme") as "light" | "dark" | null;
26+
};
27+
28+
window.getEmbedNamespace = () => {
29+
const url = new URL(document.URL);
30+
const namespace = url.searchParams.get("embed");
31+
return namespace;
32+
};
33+
34+
window.CalEmbed = window.CalEmbed || {};
35+
36+
window.CalEmbed.applyCssVars = (cssVarsPerTheme) => {
37+
const cssVarsStyle = [];
38+
if (cssVarsPerTheme) {
39+
for (const [themeName, cssVars] of Object.entries(cssVarsPerTheme)) {
40+
cssVarsStyle.push(`.${themeName} {`);
41+
for (const [cssVarName, value] of Object.entries(cssVars)) {
42+
cssVarsStyle.push(`--${cssVarName}: ${value};`);
43+
}
44+
cssVarsStyle.push(`}`);
45+
}
46+
}
47+
const style = document.createElement("style");
48+
style.id = "embed-css-vars";
49+
style.innerText = cssVarsStyle.join("\n");
50+
if (document.head.querySelector("#embed-css-vars")) {
51+
return;
52+
}
53+
document.head.appendChild(style);
54+
};
55+
}

‎packages/embeds/embed-core/index.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -174,20 +174,20 @@ <h3><a href="?only=ns:second">[Custom Styling]</a></h3>
174174
If you render booking embed in me, I won't restrict you. The entire page is yours. Content is by
175175
default aligned center
176176
</div>
177+
<button
178+
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'}}})})()">
179+
Change booker border for dark and light themes
180+
</button>
177181
<button
178182
onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
179-
Change <code>eventTypeListItem</code> bg color
183+
Change <code>eventTypeListItem</code> bg color[Deprecated]
180184
</button>
181185
<button onclick="(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()">
182-
Change <code>body</code> bg color
183-
</button>
184-
<button
185-
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'}}})})()">
186-
Change booker border for dark and light themes
186+
Change <code>body</code> bg color[Deprecated]
187187
</button>
188-
<button onclick="(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()">Align left</button>
188+
<button onclick="(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()">Align left[Deprecated]</button>
189189
<button onclick="(function () {Cal.ns.second('ui', {styles:{align:'center'}})})()">
190-
Align Center
190+
Align Center[Deprecated]
191191
</button>
192192
<button
193193
onclick="(function () {Cal.ns.second('ui', {styles:{enabledDateButton: {
@@ -196,7 +196,7 @@ <h3><a href="?only=ns:second">[Custom Styling]</a></h3>
196196
disabledDateButton: {
197197
backgroundColor: generateRandomHexColor(),
198198
},}})})()">
199-
Change 'enabledDateButton` and `disabledDateButton` background Color
199+
Change 'enabledDateButton` and `disabledDateButton` background Color[Deprecated]
200200
</button>
201201
</div>
202202
</div>

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { useRouter } from "next/router";
22
import type { CSSProperties } from "react";
33
import { useState, useEffect } from "react";
44

5+
import embedInit from "@calcom/embed-core/embed-iframe-init";
6+
57
import type { Message } from "./embed";
68
import { sdkActionManager } from "./sdk-event";
79

@@ -40,9 +42,10 @@ declare global {
4042
CalEmbed: {
4143
__logQueue?: unknown[];
4244
embedStore: typeof embedStore;
45+
applyCssVars: (cssVarsPerTheme: UiConfig["cssVarsPerTheme"]) => void;
4346
};
4447
CalComPageStatus: string;
45-
isEmbed: () => boolean;
48+
isEmbed?: () => boolean;
4649
resetEmbedStatus: () => void;
4750
getEmbedNamespace: () => string | null;
4851
getEmbedTheme: () => "dark" | "light" | null;
@@ -303,6 +306,11 @@ const methods = {
303306

304307
// Set the value here so that if setUiConfig state isn't available and later it's defined,it uses this value
305308
embedStore.uiConfig = uiConfig;
309+
310+
if (uiConfig.cssVarsPerTheme) {
311+
window.CalEmbed.applyCssVars(uiConfig.cssVarsPerTheme);
312+
}
313+
306314
if (embedStore.setUiConfig) {
307315
embedStore.setUiConfig(uiConfig);
308316
}
@@ -423,6 +431,8 @@ function keepParentInformedAboutDimensionChanges() {
423431

424432
if (isBrowser) {
425433
log("Embed SDK loaded", { isEmbed: window?.isEmbed?.() || false });
434+
// Exposes certain global variables/fns that are used by the app to get interface with the embed.
435+
embedInit();
426436
const url = new URL(document.URL);
427437
embedStore.theme = (window?.getEmbedTheme?.() || "auto") as UiConfig["theme"];
428438
if (url.searchParams.get("prerender") !== "true" && window?.isEmbed?.()) {

‎packages/embeds/embed-react/inline.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,19 @@ function App() {
2020
action: "*",
2121
callback,
2222
});
23+
24+
api("ui", {
25+
cssVarsPerTheme: {
26+
light: {
27+
"cal-border-booker": "red",
28+
"cal-border-booker-width": "20px",
29+
},
30+
dark: {
31+
"cal-border-booker": "red",
32+
"cal-border-booker-width": "5px",
33+
},
34+
},
35+
});
2336
});
2437
return () => {
2538
api.then((api) => {

0 commit comments

Comments
 (0)