fix: embed hides floating button (#9165)

* fix: embed - hides floating button on click to prevent overlapping over modal

* revert changes on yarn.lock

* z-index for Modal wasnt highest

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

packages/embeds/embed-core/src/FloatingButton/FloatingButton.ts

@@ -23,6 +23,7 @@ const dataAttributes = [
   "data-button-position",
   "data-button-color",
   "data-button-text-color",
+  "data-toggle-off",
 ] as const;
 
 type DataAttributes = (typeof dataAttributes)[number];
@@ -42,7 +43,7 @@ export class FloatingButton extends HTMLElement {
 
   // Button added here triggers the modal on click. So, it has to have the same data attributes as the modal target as well
   dataset!: DOMStringMap & FloatingButtonDataset & ModalTargetDatasetProps;
-
+  buttonWrapperStyleDisplay!: HTMLElement["style"]["display"];
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   //@ts-ignore
   static get observedAttributes() {
@@ -74,6 +75,13 @@ export class FloatingButton extends HTMLElement {
       buttonWrapperEl.style.backgroundColor = newValue;
     } else if (name === "data-button-text-color") {
       buttonWrapperEl.style.color = newValue;
+    } else if (name === "data-toggle-off") {
+      const off = newValue == "true";
+      if (off) {
+        // When toggling off, back up the original display value so that it can be restored when toggled back on
+        this.buttonWrapperStyleDisplay = buttonWrapperEl.style.display;
+      }
+      buttonWrapperEl.style.display = off ? "none" : this.buttonWrapperStyleDisplay;
     } else {
       console.log("Unknown attribute changed", name, oldValue, newValue);
     }

packages/embeds/embed-core/src/FloatingButton/FloatingButtonHtml.ts

@@ -11,7 +11,7 @@ const getHtml = ({
 }) => {
   // IT IS A REQUIREMENT THAT ALL POSSIBLE CLASSES ARE HERE OTHERWISE TAILWIND WONT GENERATE THE CSS FOR CONDITIONAL CLASSES
   // To not let all these classes apply and visible, keep it hidden initially
-  return `<button class="z-[10000000000] hidden fixed md:bottom-6 bottom-4 md:right-10 right-4 md:left-10 left-4 ${buttonClasses.join(
+  return `<button class="z-[999999999999] hidden fixed md:bottom-6 bottom-4 md:right-10 right-4 md:left-10 left-4 ${buttonClasses.join(
     " "
   )} flex h-16 origin-center bg-red-50 transform cursor-pointer items-center
 rounded-full py-4 px-6 text-base outline-none drop-shadow-md transition focus:outline-none fo

packages/embeds/embed-core/src/ModalBox/ModalBox.ts

@@ -29,8 +29,16 @@ export class ModalBox extends HTMLElement {
     }
   }
 
+  open() {
+    this.show(true);
+    const event = new Event("open");
+    this.dispatchEvent(event);
+  }
+
   close() {
     this.show(false);
+    const event = new Event("close");
+    this.dispatchEvent(event);
   }
 
   getLoaderElement() {
@@ -63,9 +71,9 @@ export class ModalBox extends HTMLElement {
     if (newValue == "loaded") {
       this.getLoaderElement().style.display = "none";
     } else if (newValue === "started") {
-      this.show(true);
+      this.open();
     } else if (newValue == "closed") {
-      this.show(false);
+      this.close();
     } else if (newValue === "failed") {
       this.getLoaderElement().style.display = "none";
       this.getErrorElement().style.display = "inline-block";
@@ -105,7 +113,7 @@ export class ModalBox extends HTMLElement {
     this.attachShadow({ mode: "open" });
     ModalBox.htmlOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-
+    this.open();
     this.assertHasShadowRoot();
     this.shadowRoot.innerHTML = modalHtml;
   }

packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts

@@ -5,7 +5,7 @@ const html = `<style>
   height:100%;
   top:0;
   left:0;
-  z-index:99999999;
+  z-index:999999999999;
   display:block;
   background-color:rgb(5,5,5, 0.8)
 }

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

@@ -10,8 +10,8 @@ import type {
   BookerLayouts,
 } from "./embed-iframe";
 import css from "./embed.css";
-import type { EventData, EventDataMap } from "./sdk-action-manager";
 import { SdkActionManager } from "./sdk-action-manager";
+import type { EventData, EventDataMap } from "./sdk-action-manager";
 import allCss from "./tailwind.generated.css?inline";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -598,10 +598,16 @@ class CalApi {
 
     this.cal.modalBox = template.content.children[0];
     this.cal.modalBox.appendChild(iframe);
+
+    this.handleClose();
+    containerEl.appendChild(template.content);
+  }
+
+  private handleClose() {
+    // A request, to close from the iframe, should close the modal
     this.cal.actionManager.on("__closeIframe", () => {
       this.cal.modalBox.setAttribute("state", "closed");
     });
-    containerEl.appendChild(template.content);
   }
 
   on<T extends keyof EventDataMap>({
@@ -749,6 +755,7 @@ document.addEventListener("click", (e) => {
   if (!path) {
     return;
   }
+
   const modalUniqueId = (targetEl.dataset.uniqueId = targetEl.dataset.uniqueId || String(Date.now()));
   const namespace = targetEl.dataset.calNamespace;
   const configString = targetEl.dataset.calConfig || "";