diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts index a4d72bf32c..709d855200 100644 --- a/packages/embeds/embed-core/src/embed-iframe.ts +++ b/packages/embeds/embed-core/src/embed-iframe.ts @@ -508,7 +508,10 @@ function keepParentInformedAboutDimensionChanges() { }); } -if (isBrowser) { +function main() { + if (!isBrowser) { + return; + } log("Embed SDK loaded", { isEmbed: window?.isEmbed?.() || false }); const url = new URL(document.URL); embedStore.theme = window?.getEmbedTheme?.(); @@ -523,6 +526,9 @@ if (isBrowser) { // If embed link is opened in top, and not in iframe. Let the page be visible. if (top === window) { unhideBody(); + // We would want to avoid a situation where Cal.com embeds cal.com and then embed-iframe is in the top as well. In such case, we would want to avoid infinite loop of events being passed. + log("Embed SDK Skipped as we are in top"); + return; } window.addEventListener("message", (e) => { @@ -618,3 +624,5 @@ function connectPreloadedEmbed({ url }: { url: URL }) { const isPrerendering = () => { return new URL(document.URL).searchParams.get("prerender") === "true"; }; + +main(); diff --git a/packages/embeds/embed-core/src/sdk-action-manager.ts b/packages/embeds/embed-core/src/sdk-action-manager.ts index 90172b1761..95d82aecf4 100644 --- a/packages/embeds/embed-core/src/sdk-action-manager.ts +++ b/packages/embeds/embed-core/src/sdk-action-manager.ts @@ -60,6 +60,7 @@ export type EventDataMap = { actionType: "customPageMessage" | "externalRedirectUrl" | "eventTypeRedirectUrl"; actionValue: string; }; + navigatedToBooker: Record; "*": Record; __routeChanged: Record; __windowLoadComplete: Record; diff --git a/packages/platform/atoms/booker/BookerWebWrapper.tsx b/packages/platform/atoms/booker/BookerWebWrapper.tsx index b8dc486d1a..ba1fb17e91 100644 --- a/packages/platform/atoms/booker/BookerWebWrapper.tsx +++ b/packages/platform/atoms/booker/BookerWebWrapper.tsx @@ -1,10 +1,11 @@ import { useSession } from "next-auth/react"; import { useSearchParams } from "next/navigation"; import { usePathname, useRouter } from "next/navigation"; -import { useMemo, useCallback } from "react"; +import { useMemo, useCallback, useEffect } from "react"; import { shallow } from "zustand/shallow"; import dayjs from "@calcom/dayjs"; +import { sdkActionManager } from "@calcom/embed-core/embed-iframe"; import type { BookerProps } from "@calcom/features/bookings/Booker"; import { Booker as BookerComponent } from "@calcom/features/bookings/Booker"; import { useBookerLayout } from "@calcom/features/bookings/Booker/components/hooks/useBookerLayout"; @@ -39,6 +40,10 @@ export const BookerWebWrapper = (props: BookerWebWrapperAtomProps) => { typeof window !== "undefined" ? new URLSearchParams(window.location.search).get("bookingUid") : null; const date = dayjs(selectedDate).format("YYYY-MM-DD"); + useEffect(() => { + sdkActionManager?.fire("navigatedToBooker", {}); + }, []); + useInitializeBookerStore({ ...props, eventId: event?.data?.id,