fix: Flicker b/w Dark and Light theme (#16042)

calcom · Sep 4, 2024 · e81cc38 · e81cc38
1 parent a0c55e7
commit e81cc38
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 57 deletions.
diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
@@ -575,15 +575,23 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
 
   const [isEmbedCustomizationOpen, setIsEmbedCustomizationOpen] = useState(true);
   const [isBookingCustomizationOpen, setIsBookingCustomizationOpen] = useState(true);
+  const defaultConfig = {
+    layout: BookerLayouts.MONTH_VIEW,
+  };
   const [previewState, setPreviewState] = useState<PreviewState>({
     inline: {
       width: "100%",
       height: "100%",
-    },
+      config: defaultConfig,
+    } as PreviewState["inline"],
     theme: Theme.auto,
-    layout: BookerLayouts.MONTH_VIEW,
-    floatingPopup: {},
-    elementClick: {},
+    layout: defaultConfig.layout,
+    floatingPopup: {
+      config: defaultConfig,
+    } as PreviewState["floatingPopup"],
+    elementClick: {
+      config: defaultConfig,
+    } as PreviewState["elementClick"],
     hideEventTypeDetails: false,
     palette: {
       brandColor: "#000000",
@@ -707,11 +715,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
 
   const FloatingPopupPositionOptions = [
     {
-      value: "bottom-right",
+      value: "bottom-right" as const,
       label: "Bottom right",
     },
     {
-      value: "bottom-left",
+      value: "bottom-left" as const,
       label: "Bottom left",
     },
   ];
@@ -941,6 +949,27 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                             setPreviewState((previewState) => {
                               return {
                                 ...previewState,
+                                inline: {
+                                  ...previewState.inline,
+                                  config: {
+                                    ...(previewState.inline.config ?? {}),
+                                    theme: option.value,
+                                  },
+                                },
+                                floatingPopup: {
+                                  ...previewState.floatingPopup,
+                                  config: {
+                                    ...(previewState.floatingPopup.config ?? {}),
+                                    theme: option.value,
+                                  },
+                                },
+                                elementClick: {
+                                  ...previewState.elementClick,
+                                  config: {
+                                    ...(previewState.elementClick.config ?? {}),
+                                    theme: option.value,
+                                  },
+                                },
                                 theme: option.value,
                               };
                             });
@@ -1005,6 +1034,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                               return {
                                 ...previewState,
                                 floatingPopup: {
+                                  ...previewState.floatingPopup,
                                   config,
                                 },
                                 layout: option.value,

diff --git a/packages/features/embed/lib/EmbedCodes.tsx b/packages/features/embed/lib/EmbedCodes.tsx
@@ -23,12 +23,12 @@ export const Codes = {
     }: {
       calLink: string;
       uiInstructionCode: string;
-      previewState: PreviewState;
+      previewState: PreviewState["inline"];
       embedCalOrigin: string;
       namespace: string;
     }) => {
-      const width = getDimension(previewState.inline.width);
-      const height = getDimension(previewState.inline.height);
+      const width = getDimension(previewState.width);
+      const height = getDimension(previewState.height);
       const namespaceProp = `${namespace ? `namespace="${namespace}"` : ""}`;
       const argumentForGetCalApi = getArgumentForGetCalApi(namespace);
       return code`
@@ -44,22 +44,31 @@ export const Codes = {
 	return <Cal ${namespaceProp}
 	  calLink="${calLink}"
 	  style={{width:"${width}",height:"${height}",overflow:"scroll"}}
-	  ${previewState.layout ? `config={{layout: '${previewState.layout}'}}` : ""}
+	  config={${JSON.stringify(previewState.config)}}
     ${doWeNeedCalOriginProp(embedCalOrigin) ? `  calOrigin="${embedCalOrigin}"` : ""}
 	  ${IS_SELF_HOSTED ? `embedJsUrl="${embedLibUrl}"` : ""}
 	/>;
   };`;
     },
     "floating-popup": ({
-      floatingButtonArg,
+      calLink,
       uiInstructionCode,
+      previewState,
+      embedCalOrigin,
       namespace,
     }: {
-      floatingButtonArg: string;
+      calLink: string;
+      embedCalOrigin: string;
       uiInstructionCode: string;
       namespace: string;
+      previewState: PreviewState["floatingPopup"];
     }) => {
       const argumentForGetCalApi = getArgumentForGetCalApi(namespace);
+      const floatingButtonArg = JSON.stringify({
+        calLink,
+        ...(doWeNeedCalOriginProp(embedCalOrigin) ? { calOrigin: embedCalOrigin } : null),
+        ...previewState,
+      });
       return code`
   import { getCalApi } from "@calcom/embed-react";
   import { useEffect } from "react";
@@ -82,7 +91,7 @@ export const Codes = {
     }: {
       calLink: string;
       uiInstructionCode: string;
-      previewState: PreviewState;
+      previewState: PreviewState["elementClick"];
       embedCalOrigin: string;
       namespace: string;
     }) => {
@@ -100,9 +109,7 @@ export const Codes = {
 	return <button data-cal-namespace="${namespace}"
 	  data-cal-link="${calLink}"
     ${doWeNeedCalOriginProp(embedCalOrigin) ? `  data-cal-origin="${embedCalOrigin}"` : ""}
-	  ${`data-cal-config='${JSON.stringify({
-      layout: previewState.layout,
-    })}'`}
+	  ${`data-cal-config='${JSON.stringify(previewState.config)}'`}
 	  >Click me</button>;
   };`;
     },
@@ -116,31 +123,37 @@ export const Codes = {
     }: {
       calLink: string;
       uiInstructionCode: string;
-      previewState: PreviewState;
+      previewState: PreviewState["inline"];
       namespace: string;
     }) => {
       return code`${getApiNameForVanillaJsSnippet({ namespace, mainApiName: "Cal" })}("inline", {
-	elementOrSelector:"#my-cal-inline",
-	calLink: "${calLink}",
-	layout: "${previewState.layout}"
+    elementOrSelector:"#my-cal-inline",
+    config: ${JSON.stringify(previewState.config)},
+    calLink: "${calLink}",
   });
 
   ${uiInstructionCode}`;
     },
 
     "floating-popup": ({
-      floatingButtonArg,
+      calLink,
       uiInstructionCode,
+      previewState,
       namespace,
     }: {
-      floatingButtonArg: string;
+      calLink: string;
       uiInstructionCode: string;
+      previewState: PreviewState["floatingPopup"];
       namespace: string;
     }) => {
+      const floatingButtonArg = JSON.stringify({
+        calLink,
+        ...previewState,
+      });
       return code`${getApiNameForVanillaJsSnippet({
         namespace,
         mainApiName: "Cal",
-      })}("floatingButton", ${floatingButtonArg});
+      })}("floatingButton", ${floatingButtonArg}); 
   ${uiInstructionCode}`;
     },
     "element-click": ({
@@ -151,16 +164,14 @@ export const Codes = {
     }: {
       calLink: string;
       uiInstructionCode: string;
-      previewState: PreviewState;
+      previewState: PreviewState["elementClick"];
       namespace: string;
     }) => {
       return code`
   // Important: Please add the following attributes to the element that should trigger the calendar to open upon clicking.
   // \`data-cal-link="${calLink}"\`
   // data-cal-namespace="${namespace}"
-  // \`data-cal-config='${JSON.stringify({
-    layout: previewState.layout,
-  })}'\`
+  // \`data-cal-config='${JSON.stringify(previewState.config)}'\`
 
   ${uiInstructionCode}`;
     },

diff --git a/packages/features/embed/lib/EmbedTabs.tsx b/packages/features/embed/lib/EmbedTabs.tsx
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TextArea } from "@calcom/ui";
 
 import type { EmbedFramework, EmbedType, PreviewState } from "../types";
-import { Codes, doWeNeedCalOriginProp } from "./EmbedCodes";
+import { Codes } from "./EmbedCodes";
 import { embedLibUrl, EMBED_PREVIEW_HTML_URL } from "./constants";
 import { getApiNameForReactSnippet, getApiNameForVanillaJsSnippet } from "./getApiName";
 import { getDimension } from "./getDimension";
@@ -199,32 +199,28 @@ const getEmbedTypeSpecificString = ({
   if (!frameworkCodes[embedType]) {
     throw new Error(`Code not available for framework:${embedFramework} and embedType:${embedType}`);
   }
+
+  const codeGeneratorInput = {
+    calLink,
+    uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
+    embedCalOrigin,
+    namespace,
+  };
+
   if (embedType === "inline") {
     return frameworkCodes[embedType]({
-      calLink,
-      uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
-      previewState,
-      embedCalOrigin,
-      namespace,
+      ...codeGeneratorInput,
+      previewState: previewState.inline,
     });
   } else if (embedType === "floating-popup") {
-    const floatingButtonArg = {
-      calLink,
-      ...(doWeNeedCalOriginProp(embedCalOrigin) ? { calOrigin: embedCalOrigin } : null),
-      ...previewState.floatingPopup,
-    };
     return frameworkCodes[embedType]({
-      namespace,
-      floatingButtonArg: JSON.stringify(floatingButtonArg),
-      uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
+      ...codeGeneratorInput,
+      previewState: previewState.floatingPopup,
     });
   } else if (embedType === "element-click") {
     return frameworkCodes[embedType]({
-      namespace,
-      calLink,
-      uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
-      previewState,
-      embedCalOrigin,
+      ...codeGeneratorInput,
+      previewState: previewState.elementClick,
     });
   }
   return "";

diff --git a/packages/features/embed/types/index.d.ts b/packages/features/embed/types/index.d.ts
@@ -1,20 +1,40 @@
+import type { Brand } from "@calcom/types/utils";
+
 import type { tabs } from "../lib/EmbedTabs";
 import type { useEmbedTypes } from "../lib/hooks";
 
 export type EmbedType = "inline" | "floating-popup" | "element-click" | "email";
+type EmbedConfig = {
+  layout?: BookerLayouts;
+  theme?: Theme;
+};
+
 export type PreviewState = {
-  inline: {
-    width: string;
-    height: string;
-  };
+  inline: Brand<
+    {
+      width: string;
+      height: string;
+      config?: EmbedConfig;
+    },
+    "inline"
+  >;
   theme: Theme;
-  floatingPopup: {
-    config?: {
-      layout: BookerLayouts;
-    };
-    [key: string]: string | boolean | undefined | Record<string, string>;
-  };
-  elementClick: Record<string, string>;
+  floatingPopup: Brand<
+    {
+      config?: EmbedConfig;
+      hideButtonIcon?: boolean;
+      buttonPosition?: "bottom-left" | "bottom-right";
+      buttonColor?: string;
+      buttonTextColor?: string;
+    },
+    "floating-popup"
+  >;
+  elementClick: Brand<
+    {
+      config?: EmbedConfig;
+    },
+    "element-click"
+  >;
   palette: {
     brandColor: string;
   };

diff --git a/packages/types/utils.d.ts b/packages/types/utils.d.ts
@@ -15,3 +15,6 @@ export type ValuesType<T extends ReadonlyArray<unknown> | ArrayLike<unknown> | R
     : T extends object
     ? T[keyof T]
     : never;
+
+declare const brand: unique symbol;
+export type Brand<T, TBrand> = T & { [brand]: TBrand };