feat: New Booker: Disable dialog form in mobile in embed (calcom#9748)

packages/features/bookings/Booker/Booker.tsx

@@ -20,7 +20,7 @@ import { BookerSection } from "./components/Section";
 import { Away, NotFound } from "./components/Unavailable";
 import { extraDaysConfig, fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
 import { useBookerStore, useInitializeBookerStore } from "./store";
-import type { BookerProps } from "./types";
+import type { BookerLayout, BookerProps } from "./types";
 import { useEvent } from "./utils/event";
 import { validateLayout } from "./utils/layout";
 import { getQueryParam } from "./utils/query-param";
@@ -114,6 +114,21 @@ const BookerComponent = ({
     return <NotFound />;
   }
 
+  // In Embed, a Dialog doesn't look good, we disable it intentionally for the layouts that support showing Form without Dialog(i.e. no-dialog Form)
+  const shouldShowFormInDialogMap: Record<BookerLayout, boolean> = {
+    // mobile supports showing the Form without Dialog
+    mobile: !isEmbed,
+    // We don't show Dialog in month_view currently. Can be easily toggled though as it supports no-dialog Form
+    month_view: false,
+    // week_view doesn't support no-dialog Form
+    // When it's supported, disable it for embed
+    week_view: true,
+    // column_view doesn't support no-dialog Form
+    // When it's supported, disable it for embed
+    column_view: true,
+  };
+
+  const shouldShowFormInDialog = shouldShowFormInDialogMap[layout];
   return (
     <>
       {event.data ? <BookingPageTagManager eventType={event.data} /> : null}
@@ -174,7 +189,7 @@ const BookerComponent = ({
               area="main"
               className="border-subtle sticky top-0 ml-[-1px] h-full p-6 md:w-[var(--booker-main-width)] md:border-l"
               {...fadeInLeft}
-              visible={bookerState === "booking" && layout === BookerLayouts.MONTH_VIEW}>
+              visible={bookerState === "booking" && !shouldShowFormInDialog}>
               <BookEventForm onCancel={() => setSelectedTimeslot(null)} />
             </BookerSection>
 
@@ -232,7 +247,7 @@ const BookerComponent = ({
       </div>
 
       <BookFormAsModal
-        visible={layout !== BookerLayouts.MONTH_VIEW && bookerState === "booking"}
+        visible={bookerState === "booking" && shouldShowFormInDialog}
         onCancel={() => setSelectedTimeslot(null)}
       />
     </>