fix child element click popup (#14749)

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>

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",

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({

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;