fix: Scrolling to timeslot issue on Safari with inline-embeds (calcom#22547)

* Add playground

* Fix scroll issue on safari

Author: hariombalhara

packages/embeds/embed-core/index.html

@@ -399,7 +399,16 @@ <h4 style="width: 30%">On the right side you can book a team meeting =></h4>
       </div>
     </div>
     <div class="inline-embed-container" id="cal-booking-place-hideEventTypeDetails">
-      <h3><a href="?only=hideEventTypeDetails">Hide EventType Details Test</a></h3>
+      <h3><a href="?only=ns:hideEventTypeDetails">Hide EventType Details Test</a></h3>
+      <div class="place"></div>
+    </div>
+
+    <div class="inline-embed-container" style="width: 500px; overflow-y: scroll;" id="cal-booking-place-windowScrollToTimeslot">
+      <h3><a href="?only=ns:windowScrollToTimeslot">Scroll to Timeslot Test - Selecting a date would scroll the window to the timeslot</a></h3>
+      <div class="place"></div>
+    </div>
+    <div class="inline-embed-container" style="height: 500px; width: 500px; overflow-y: scroll;" id="cal-booking-place-containerScrollToTimeslot">
+      <h3><a href="?only=ns:containerScrollToTimeslot">Container Scroll Test - Selecting a date would scroll the element to the timeslot</a></h3>
       <div class="place"></div>
     </div>
     <div class="inline-embed-container" id="cal-booking-place-conflicting-theme">

packages/embeds/embed-core/playground/lib/playground.ts

@@ -288,7 +288,7 @@ if (only === "all" || only === "inline-routing-form") {
   ]);
 }
 
-if (only === "all" || only === "hideEventTypeDetails") {
+if (only === "all" || only === "ns:hideEventTypeDetails") {
   const identifier = "hideEventTypeDetails";
   Cal("init", identifier, {
     debug: true,
@@ -693,6 +693,40 @@ if (only === "all" || only === "ns:routingFormWithoutPrerender") {
   });
 }
 
+if (only === "all" || only === "ns:containerScrollToTimeslot") {
+  Cal("init", "containerScrollToTimeslot", {
+    debug: true,
+    origin,
+  });
+  Cal.ns.containerScrollToTimeslot("inline", {
+    elementOrSelector: "#cal-booking-place-containerScrollToTimeslot .place",
+    calLink: "free/30min",
+    config: {
+      iframeAttrs: {
+        id: "cal-booking-place-containerScrollToTimeslot-iframe",
+      },
+      "flag.coep": "true",
+    },
+  });
+}
+
+if (only === "all" || only === "ns:windowScrollToTimeslot") {
+  Cal("init", "windowScrollToTimeslot", {
+    debug: true,
+    origin,
+  });
+  Cal.ns.windowScrollToTimeslot("inline", {
+    elementOrSelector: "#cal-booking-place-windowScrollToTimeslot .place",
+    calLink: "free/30min",
+    config: {
+      iframeAttrs: {
+        id: "cal-booking-place-windowScrollToTimeslot-iframe",
+      },
+      "flag.coep": "true",
+    },
+  });
+}
+
 // Keep it at the bottom as it works on the API defined above for various cases
 (function ensureScrolledToCorrectIframe() {
   // Reset the hash so that we can scroll to correct iframe

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

@@ -1,6 +1,6 @@
 import { EmbedElement } from "../EmbedElement";
+import { getErrorString } from "../lib/utils";
 import loaderCss from "../loader.css?inline";
-import { getErrorString } from "../utils";
 import inlineHtml, { getSkeletonData } from "./inlineHtml";
 
 export class Inline extends EmbedElement {

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

@@ -1,6 +1,6 @@
 import { EmbedElement } from "../EmbedElement";
+import { getErrorString } from "../lib/utils";
 import loaderCss from "../loader.css";
-import { getErrorString } from "../utils";
 import modalBoxHtml, { getSkeletonData } from "./ModalBoxHtml";
 
 export class ModalBox extends EmbedElement {

packages/embeds/embed-core/src/__tests__/utils.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { generateDataAttributes, isSameBookingLink } from "../utils";
+import { generateDataAttributes, isSameBookingLink } from "../lib/utils";
 
 describe("generateDataAttributes", () => {
   it("should handle PascalCase property names correctly", () => {

packages/embeds/embed-core/src/embed-iframe/lib/embedStore.ts

@@ -1,3 +1,4 @@
+import { isParamValuePresentInUrlSearchParams } from "../../lib/utils";
 import type {
   EmbedThemeConfig,
   UiConfig,
@@ -6,7 +7,6 @@ import type {
   SetStyles,
   setNonStylesConfig,
 } from "../../types";
-import { isParamValuePresentInUrlSearchParams } from "../../utils";
 import { runAsap } from "./utils";
 
 export const enum EMBED_IFRAME_STATE {

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

@@ -10,19 +10,21 @@ import {
 } from "./constants";
 import type { InterfaceWithParent, interfaceWithParent } from "./embed-iframe";
 import css from "./embed.css";
-import { SdkActionManager } from "./sdk-action-manager";
-import type { EventData, EventDataMap } from "./sdk-action-manager";
-import tailwindCss from "./tailwindCss";
-import type { UiConfig, EmbedPageType, PrefillAndIframeAttrsConfig, ModalPrerenderOptions } from "./types";
-import { getMaxHeightForModal } from "./ui-utils";
+import { getScrollableAncestor } from "./lib/domUtils";
+import { getScrollByDistanceHandler } from "./lib/eventHandlers/scrollByDistanceEventHandler";
 import {
   fromEntriesWithDuplicateKeys,
   isRouterPath,
   generateDataAttributes,
   getConfigProp,
   isSameBookingLink,
   buildConfigWithPrerenderRelatedFields,
-} from "./utils";
+} from "./lib/utils";
+import { SdkActionManager } from "./sdk-action-manager";
+import type { EventData, EventDataMap } from "./sdk-action-manager";
+import tailwindCss from "./tailwindCss";
+import type { UiConfig, EmbedPageType, PrefillAndIframeAttrsConfig, ModalPrerenderOptions } from "./types";
+import { getMaxHeightForModal } from "./ui-utils";
 
 // Exporting for consumption by @calcom/embed-core user
 export type { EmbedEvent } from "./sdk-action-manager";
@@ -472,6 +474,8 @@ export class Cal {
       }
     });
 
+    this.actionManager.on("__scrollByDistance", getScrollByDistanceHandler(this));
+
     this.actionManager.on("linkReady", () => {
       if (this.isPrerendering) {
         // Ensure that we don't mark embed as loaded if it's prerendering otherwise prerendered embed could show-up without any user action
@@ -500,6 +504,20 @@ export class Cal {
     });
   }
 
+  scrollByDistance(distanceInPixels: number): void {
+    if (!this.iframe) {
+      return;
+    }
+    // We compute scrollable ancestor on demand here and not when the iframe is created because because we need to see if the ancestor has scrollable content at that time
+    const scrollContainer = getScrollableAncestor(this.iframe);
+    if (!scrollContainer) {
+      return;
+    }
+    const newScrollTop = scrollContainer.scrollTop + distanceInPixels;
+
+    scrollContainer.scrollTo({ top: newScrollTop, behavior: "smooth" });
+  }
+
   private filterParams(params: Record<string, unknown>): Record<string, unknown> {
     return Object.fromEntries(Object.entries(params).filter(([key, value]) => !excludeParam(key, value)));
   }