fix: Embed Issues: Logo causing scroll, Logo text color, mobile view with layout configuration (#9826)

* Fixes scroll and logo text color

* Add a month_view scenario

* Fix false alarm in logs when namespace is empty string

* In mobile view, we only support mobile layout

* Check for embed mode

packages/embeds/embed-core/index.html

@@ -255,8 +255,12 @@
       <i>Note that one of the embeds would stay in loading state as they are using the same namespace and it is not supported to have more than 1 embeds using same namespace</i>
       </div>
     </div>
+    <div class="inline-embed-container" id="cal-booking-place-monthView">
+      <h3><a href="?only=ns:monthView">Test Month View</a></h3>
+      <div class="place" style="width: 100%"></div>
+    </div>
     <div class="inline-embed-container" id="cal-booking-place-weekView">
-      <h3><a href="?only=ns:weekView">Test Weekly View</a></h3>
+      <h3><a href="?only=ns:weekView">Test Week View</a></h3>
       <div class="place" style="width: 100%"></div>
     </div>
     <div class="inline-embed-container" id="cal-booking-place-columnView">

packages/embeds/embed-core/playground.ts

@@ -345,6 +345,34 @@ if (only === "all" || only == "ns:floatingButton") {
   });
 }
 
+if (only === "all" || only == "ns:monthView") {
+  // Create a namespace "second". It can be accessed as Cal.ns.second with the exact same API as Cal
+  Cal("init", "monthView", {
+    debug: true,
+    origin: "http://localhost:3000",
+  });
+
+  Cal.ns.monthView(
+    "inline",
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    {
+      elementOrSelector: "#cal-booking-place-monthView .place",
+      calLink: "pro/paid",
+      config: {
+        iframeAttrs: {
+          id: "cal-booking-place-monthView-iframe",
+        },
+        layout: "month_view",
+      },
+    }
+  );
+  Cal.ns.monthView("on", {
+    action: "*",
+    callback,
+  });
+}
+
 if (only === "all" || only == "ns:weekView") {
   // Create a namespace "second". It can be accessed as Cal.ns.second with the exact same API as Cal
   Cal("init", "weekView", {

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

@@ -257,7 +257,7 @@ function getNamespace() {
     return embedStore.namespace;
   }
   if (isBrowser) {
-    const namespace = window?.getEmbedNamespace?.() || null;
+    const namespace = window?.getEmbedNamespace?.() ?? null;
     embedStore.namespace = namespace;
     return namespace;
   }

packages/features/bookings/Booker/Booker.tsx

@@ -5,7 +5,7 @@ import StickyBox from "react-sticky-box";
 import { shallow } from "zustand/shallow";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
-import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { useEmbedType, useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils";
@@ -48,10 +48,14 @@ const BookerComponent = ({
   const [_layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow);
 
   const isEmbed = useIsEmbed();
+  const embedType = useEmbedType();
+  // Floating Button and Element Click both are modal and thus have dark background
+  const hasDarkBackground = isEmbed && embedType !== "inline";
   const embedUiConfig = useEmbedUiConfig();
 
   // In Embed we give preference to embed configuration for the layout.If that's not set, we use the App configuration for the event layout
-  const layout = isEmbed ? validateLayout(embedUiConfig.layout) || _layout : _layout;
+  // But if it's mobile view, there is only one layout supported which is 'mobile'
+  const layout = isEmbed ? (isMobile ? "mobile" : validateLayout(embedUiConfig.layout) || _layout) : _layout;
 
   const [bookerState, setBookerState] = useBookerStore((state) => [state.state, state.setState], shallow);
   const selectedDate = useBookerStore((state) => state.selectedDate);
@@ -133,14 +137,14 @@ const BookerComponent = ({
       {event.data ? <BookingPageTagManager eventType={event.data} /> : null}
       <div
         className={classNames(
+          // In a popup embed, if someone clicks outside the main(having main class or main tag), it closes the embed
+          "main",
           "text-default flex min-h-full w-full flex-col items-center",
           layout === BookerLayouts.MONTH_VIEW ? "overflow-visible" : "overflow-clip"
         )}>
         <div
           ref={animationScope}
           className={classNames(
-            // In a popup embed, if someone clicks outside the main(having main class or main tag), it closes the embed
-            "main",
             // Sets booker size css variables for the size of all the columns.
             ...getBookerSizeClassNames(layout, bookerState, hideEventTypeDetails),
             "bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
@@ -241,6 +245,7 @@ const BookerComponent = ({
           key="logo"
           className={classNames(
             "mb-6 mt-auto pt-6 [&_img]:h-[15px]",
+            hasDarkBackground ? "dark" : "",
             layout === BookerLayouts.MONTH_VIEW ? "block" : "hidden"
           )}>
           {!hideBranding ? <PoweredBy logoOnly /> : null}