From 1a0448910bd781c44205b6abac76af6eb1e45d2a Mon Sep 17 00:00:00 2001 From: Hariom Balhara Date: Fri, 30 Aug 2024 01:44:12 +0530 Subject: [PATCH] fix: Flicker b/w Dark and Light theme (#16042) --- packages/features/embed/Embed.tsx | 42 ++++++++++++++--- packages/features/embed/lib/EmbedCodes.tsx | 53 +++++++++++++--------- packages/features/embed/lib/EmbedTabs.tsx | 34 ++++++-------- packages/features/embed/types/index.d.ts | 42 ++++++++++++----- packages/types/utils.d.ts | 3 ++ 5 files changed, 117 insertions(+), 57 deletions(-) diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx index db88234584..60ed2a6ec0 100644 --- 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({ 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 index 07d6f75320..98effd05ad 100644 --- 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 ; };`; }, "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 ; };`; }, @@ -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 index 1f131ba363..9ccc9caf08 100644 --- 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 index e8dda02e0d..3c6c73f9c2 100644 --- 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; - }; - elementClick: Record; + 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 index f599b1b5b2..df028acec7 100644 --- a/packages/types/utils.d.ts +++ b/packages/types/utils.d.ts @@ -15,3 +15,6 @@ export type ValuesType | ArrayLike | R : T extends object ? T[keyof T] : never; + +declare const brand: unique symbol; +export type Brand = T & { [brand]: TBrand };