From ab2648173801942d0274ca6b9cce4c64ddbd63a1 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Fri, 26 Apr 2024 20:07:27 +0530
Subject: [PATCH] fix child element click popup (#14749)

---
 packages/embeds/embed-core/index.html         | 13 +++++---
 packages/embeds/embed-core/playground.ts      |  5 +++
 .../playwright/tests/action-based.e2e.ts      | 15 +++++++++
 packages/embeds/embed-core/src/embed.ts       | 32 +++++++++++++++----
 4 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index b757cd5080..862a9886e4 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -272,10 +272,15 @@
       <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"column_view"}' data-cal-link="pro/paid">
         Book Paid Event - column view
       </button>
-      <!-- <div>
-        <h2>Embed for Pages behind authentication</h2>
-        <button data-cal-namespace="upcomingBookings" data-cal-config='{"theme":"dark"}' data-cal-link="bookings/upcoming">Show Upcoming Bookings</button>
-      </div> -->
+
+      <a style="display: block;" data-cal-namespace="childElementTarget" href="javascript:void(0)" data-cal-link="free/30min">
+        I am Anchor
+        <b>[I am Bold inside anchor]</b>
+        <span>
+          I am span inside anchor
+        </span>
+      </a>
+     
     </div>
     
     <h2>Inline Embed Examples</h2>
diff --git a/packages/embeds/embed-core/playground.ts b/packages/embeds/embed-core/playground.ts
index 4538dcdd35..3f481352de 100644
--- a/packages/embeds/embed-core/playground.ts
+++ b/packages/embeds/embed-core/playground.ts
@@ -361,6 +361,11 @@ Cal("init", "popupPaidEvent", {
   origin: "http://localhost:3000",
 });
 
+Cal("init", "childElementTarget", {
+  debug: true,
+  origin: "http://localhost:3000",
+});
+
 Cal("init", "floatingButton", {
   debug: true,
   origin: "http://localhost:3000",
diff --git a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
index 1d6106a1ab..4e9464a3c2 100644
--- a/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
+++ b/packages/embeds/embed-core/playwright/tests/action-based.e2e.ts
@@ -266,6 +266,21 @@ test.describe("Popup Tests", () => {
       pathname: calLink,
     });
   });
+
+  test("should open on clicking child element", async ({ page, embeds }) => {
+    await deleteAllBookingsByEmail("embed-user@example.com");
+    const calNamespace = "childElementTarget";
+    const configuredLink = "/free/30min";
+    await embeds.gotoPlayground({ calNamespace, url: "/" });
+
+    await page.click(`[data-cal-namespace="${calNamespace}"] b`);
+
+    const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: configuredLink });
+
+    await expect(embedIframe).toBeEmbedCalLink(calNamespace, embeds.getActionFiredDetails, {
+      pathname: configuredLink,
+    });
+  });
 });
 
 async function expectPrerenderedIframe({
diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts
index bb9bd88fac..806bcc8b42 100644
--- a/packages/embeds/embed-core/src/embed.ts
+++ b/packages/embeds/embed-core/src/embed.ts
@@ -864,17 +864,16 @@ window.addEventListener("message", (e) => {
 
 document.addEventListener("click", (e) => {
   const targetEl = e.target;
-  if (!(targetEl instanceof HTMLElement)) {
-    return;
-  }
-  const path = targetEl.dataset.calLink;
+
+  const calLinkEl = getCalLinkEl(targetEl);
+  const path = calLinkEl?.dataset?.calLink;
   if (!path) {
     return;
   }
 
-  const namespace = targetEl.dataset.calNamespace;
-  const configString = targetEl.dataset.calConfig || "";
-  const calOrigin = targetEl.dataset.calOrigin || "";
+  const namespace = calLinkEl.dataset.calNamespace;
+  const configString = calLinkEl.dataset.calConfig || "";
+  const calOrigin = calLinkEl.dataset.calOrigin || "";
   let config;
   try {
     config = JSON.parse(configString);
@@ -897,6 +896,25 @@ document.addEventListener("click", (e) => {
     config,
     calOrigin,
   });
+
+  function getCalLinkEl(target: EventTarget | null) {
+    let calLinkEl;
+    if (!(target instanceof HTMLElement)) {
+      return null;
+    }
+    if (target?.dataset.calLink) {
+      calLinkEl = target;
+    } else {
+      // If the element clicked is a child of the cal-link element, then return the cal-link element
+      calLinkEl = Array.from(document.querySelectorAll("[data-cal-link]")).find((el) => el.contains(target));
+    }
+
+    if (!(calLinkEl instanceof HTMLElement)) {
+      return null;
+    }
+
+    return calLinkEl;
+  }
 });
 
 let currentColorScheme: string | null = null;