From 47739a76367e63c3570d0e8ab71a2098df70c90b Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Tue, 25 Jul 2023 15:28:47 +0530
Subject: [PATCH] Fix booker top margin embed (#10357)

---
 apps/web/pages/[user]/[type].tsx              | 19 +++++++++++----
 apps/web/pages/d/[link]/[slug].tsx            | 17 +++++++++++---
 apps/web/pages/team/[slug]/[type].tsx         | 10 ++++----
 .../playwright/tests/embed-pages.e2e.ts       | 23 +++++++++++--------
 packages/features/bookings/Booker/Booker.tsx  |  4 +---
 .../Booker/utils/getBookerWrapperClasses.ts   |  6 +++++
 6 files changed, 53 insertions(+), 26 deletions(-)
 create mode 100644 packages/features/bookings/Booker/utils/getBookerWrapperClasses.ts

diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx
index 99d16a0018..67b3ac9485 100644
--- a/apps/web/pages/[user]/[type].tsx
+++ b/apps/web/pages/[user]/[type].tsx
@@ -2,25 +2,34 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { classNames } from "@calcom/lib";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import PageWrapper from "@components/PageWrapper";
 
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
-export default function Type({ slug, user, booking, away, isBrandingHidden, rescheduleUid, org }: PageProps) {
-  const isEmbed = typeof window !== "undefined" && window?.isEmbed?.();
+export default function Type({
+  slug,
+  user,
+  isEmbed,
+  booking,
+  away,
+  isBrandingHidden,
+  rescheduleUid,
+  org,
+}: PageProps) {
   return (
-    <main className={classNames("flex h-full items-center justify-center", !isEmbed && "min-h-[100dvh]")}>
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
         username={user}
         eventSlug={slug}
diff --git a/apps/web/pages/d/[link]/[slug].tsx b/apps/web/pages/d/[link]/[slug].tsx
index 192d87eefb..5f6dff1d7a 100644
--- a/apps/web/pages/d/[link]/[slug].tsx
+++ b/apps/web/pages/d/[link]/[slug].tsx
@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
@@ -10,14 +11,24 @@ import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import PageWrapper from "@components/PageWrapper";
 
-type PageProps = inferSSRProps<typeof getServerSideProps>;
+type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
-export default function Type({ slug, user, booking, away, isBrandingHidden, isTeamEvent, org }: PageProps) {
+export default function Type({
+  slug,
+  isEmbed,
+  user,
+  booking,
+  away,
+  isBrandingHidden,
+  isTeamEvent,
+  org,
+}: PageProps) {
   return (
-    <main className="flex h-full min-h-[100dvh] items-center justify-center">
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
         username={user}
         eventSlug={slug}
diff --git a/apps/web/pages/team/[slug]/[type].tsx b/apps/web/pages/team/[slug]/[type].tsx
index 5d79f837a6..870291ecc7 100644
--- a/apps/web/pages/team/[slug]/[type].tsx
+++ b/apps/web/pages/team/[slug]/[type].tsx
@@ -2,24 +2,24 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
 import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { classNames } from "@calcom/lib";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
+import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import PageWrapper from "@components/PageWrapper";
 
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
-export default function Type({ slug, user, booking, away, isBrandingHidden, org }: PageProps) {
-  const isEmbed = typeof window !== "undefined" && window?.isEmbed?.();
+export default function Type({ slug, user, booking, away, isEmbed, isBrandingHidden, org }: PageProps) {
   return (
-    <main className={classNames("flex h-full items-center justify-center", !isEmbed && "min-h-[100dvh]")}>
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
         username={user}
         eventSlug={slug}
diff --git a/packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts b/packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts
index b543f4a859..d7de332a52 100644
--- a/packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts
+++ b/packages/embeds/embed-core/playwright/tests/embed-pages.e2e.ts
@@ -6,17 +6,20 @@ test.describe("Embed Pages", () => {
   test("Event Type Page: should not have margin top on embed page", async ({ page }) => {
     await page.goto("http://localhost:3000/free/30min/embed");
     // Checks the margin from top by checking the distance between the div inside main from the viewport
-    const marginFromTop = await page.evaluate(() => {
-      const mainElement = document.querySelector("main");
-      const divElement = mainElement?.querySelector("div");
+    const marginFromTop = await page.evaluate(async () => {
+      return await new Promise((resolve) => {
+        (function tryGettingBoundingRect() {
+          const mainElement = document.querySelector(".main");
 
-      if (mainElement && divElement) {
-        // This returns the distance of the div element from the viewport
-        const divRect = divElement.getBoundingClientRect();
-        return divRect.top;
-      }
-
-      return null;
+          if (mainElement) {
+            // This returns the distance of the div element from the viewport
+            const mainElBoundingRect = mainElement.getBoundingClientRect();
+            resolve(mainElBoundingRect.top);
+          } else {
+            setTimeout(tryGettingBoundingRect, 500);
+          }
+        })();
+      });
     });
 
     expect(marginFromTop).toBe(0);
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 051d03169d..cf9d30fb16 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -183,9 +183,7 @@ const BookerComponent = ({
             (layout === BookerLayouts.MONTH_VIEW || isEmbed) && "border-subtle rounded-md border",
             !isEmbed && "sm:transition-[width] sm:duration-300",
             isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-booker sm:border-booker-width",
-            !isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-subtle",
-            // We don't want any margins for Embed. Any margin needed should be added by Embed user.
-            layout === BookerLayouts.MONTH_VIEW && isEmbed && "mt-0"
+            !isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-subtle"
           )}>
           <AnimatePresence>
             <BookerSection
diff --git a/packages/features/bookings/Booker/utils/getBookerWrapperClasses.ts b/packages/features/bookings/Booker/utils/getBookerWrapperClasses.ts
new file mode 100644
index 0000000000..fe3e20afb0
--- /dev/null
+++ b/packages/features/bookings/Booker/utils/getBookerWrapperClasses.ts
@@ -0,0 +1,6 @@
+import { classNames } from "@calcom/lib";
+
+export function getBookerWrapperClasses({ isEmbed }: { isEmbed: boolean }) {
+  // We don't want any margins for Embed. Any margin needed should be added by Embed user.
+  return classNames("flex h-full items-center justify-center", !isEmbed && "min-h-[100dvh]");
+}