fix: Hide EventTypeDetails when configured (calcom#9633)

barathraju-43 · Jun 21, 2023 · 5acb3a0 · 5acb3a0
1 parent 69c9f69
commit 5acb3a0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useMemo } from "react";
 import StickyBox from "react-sticky-box";
 import { shallow } from "zustand/shallow";
 
+import { useEmbedUiConfig } 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";
@@ -103,6 +104,9 @@ const BookerComponent = ({
     }
   }, [layout]);
 
+  const embedUiConfig = useEmbedUiConfig();
+  const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
+
   if (event.isSuccess && !event.data) {
     return <NotFound />;
   }
@@ -114,7 +118,7 @@ const BookerComponent = ({
           ref={animationScope}
           className={classNames(
             // Sets booker size css variables for the size of all the columns.
-            ...getBookerSizeClassNames(layout, bookerState),
+            ...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",
             layout === BookerLayouts.MONTH_VIEW && "border-subtle rounded-md border",
             !isEmbed && "sm:transition-[width] sm:duration-300",

diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
@@ -1,6 +1,7 @@
 import { m } from "framer-motion";
 import dynamic from "next/dynamic";
 
+import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { EventDetails, EventMembers, EventMetaSkeleton, EventTitle } from "@calcom/features/bookings";
 import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/Details";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
@@ -25,6 +26,13 @@ export const EventMeta = () => {
   const rescheduleBooking = useBookerStore((state) => state.rescheduleBooking);
   const { i18n, t } = useLocale();
   const { data: event, isLoading } = useEvent();
+  const embedUiConfig = useEmbedUiConfig();
+  const isEmbed = useIsEmbed();
+  const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
+
+  if (hideEventTypeDetails) {
+    return null;
+  }
 
   return (
     <div className="relative z-10 p-6">

diff --git a/packages/features/bookings/Booker/config.ts b/packages/features/bookings/Booker/config.ts
@@ -112,25 +112,38 @@ export const resizeAnimationConfig: ResizeAnimationConfig = {
   },
 };
 
-export const getBookerSizeClassNames = (layout: BookerLayout, bookerState: BookerState) => {
+export const getBookerSizeClassNames = (
+  layout: BookerLayout,
+  bookerState: BookerState,
+  hideEventTypeDetails = false
+) => {
+  const getBookerMetaClass = (className: string) => {
+    if (hideEventTypeDetails) {
+      return "";
+    }
+    return className;
+  };
+
   return [
-    // Size settings are abstracted on their own lines purely for readbility.
+    // Size settings are abstracted on their own lines purely for readability.
     // General sizes, used always
     "[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px]",
     // Small calendar defaults
-    layout === BookerLayouts.MONTH_VIEW && "[--booker-meta-width:240px]",
+    layout === BookerLayouts.MONTH_VIEW && getBookerMetaClass("[--booker-meta-width:240px]"),
     // Meta column get's wider in booking view to fit the full date on a single row in case
     // of a multi occurance event. Also makes form less wide, which also looks better.
     layout === BookerLayouts.MONTH_VIEW &&
       bookerState === "booking" &&
-      "[--booker-main-width:420px] lg:[--booker-meta-width:340px]",
+      `[--booker-main-width:420px] ${getBookerMetaClass("lg:[--booker-meta-width:340px]")}`,
     // Smaller meta when not in booking view.
     layout === BookerLayouts.MONTH_VIEW &&
       bookerState !== "booking" &&
-      "[--booker-main-width:480px] lg:[--booker-meta-width:280px]",
+      `[--booker-main-width:480px] ${getBookerMetaClass("lg:[--booker-meta-width:280px]")}`,
     // Fullscreen view settings.
     layout !== BookerLayouts.MONTH_VIEW &&
-      "[--booker-main-width:480px] [--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
+      `[--booker-main-width:480px] [--booker-meta-width:340px] ${getBookerMetaClass(
+        "lg:[--booker-meta-width:424px]"
+      )}`,
   ];
 };