fix: DatePicker not showing up in mobile mode when hideEventTypeDetai…

…ls is true (#17037)
calcom · Oct 10, 2024 · 1f08bc5 · 1f08bc5
1 parent 5594e5c
commit 1f08bc5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/packages/embeds/embed-core/playground.ts b/packages/embeds/embed-core/playground.ts
@@ -474,7 +474,7 @@ if (only === "all" || only == "ns:monthView") {
     //@ts-ignore
     {
       elementOrSelector: "#cal-booking-place-monthView .place",
-      calLink: "pro/paid",
+      calLink: "free/30min",
       config: {
         iframeAttrs: {
           id: "cal-booking-place-monthView-iframe",
@@ -499,7 +499,7 @@ if (only === "all" || only == "ns:weekView") {
     //@ts-ignore
     {
       elementOrSelector: "#cal-booking-place-weekView .place",
-      calLink: "pro/paid",
+      calLink: "free/30min",
       config: {
         iframeAttrs: {
           id: "cal-booking-place-weekView-iframe",
@@ -528,7 +528,7 @@ if (only === "all" || only == "ns:columnView") {
     //@ts-ignore
     {
       elementOrSelector: "#cal-booking-place-columnView .place",
-      calLink: "pro/paid",
+      calLink: "free/30min",
       config: {
         iframeAttrs: {
           id: "cal-booking-place-columnView-iframe",

diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
@@ -259,6 +259,8 @@ const BookerComponent = ({
     return null;
   }
 
+  const shouldShowMeta = !hideEventTypeDetails;
+
   return (
     <>
       {event.data && !isPlatform ? <BookingPageTagManager eventType={event.data} /> : <></>}
@@ -327,7 +329,7 @@ const BookerComponent = ({
                 )}
               </BookerSection>
             )}
-            {!hideEventTypeDetails && (
+            {shouldShowMeta && (
               <StickyOnDesktop key="meta" className={classNames("relative z-10 flex [grid-area:meta]")}>
                 <BookerSection
                   area="meta"
@@ -375,7 +377,13 @@ const BookerComponent = ({
             <BookerSection
               key="datepicker"
               area="main"
-              visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW}
+              visible={
+                bookerState !== "booking" &&
+                (layout === BookerLayouts.MONTH_VIEW ||
+                  // Meta possibly can show DatePicker but if meta is not shown, then DatePicker must be shown here
+                  // FIXME: We need proper state management for this(depending on layout and bookerState)
+                  !shouldShowMeta)
+              }
               {...fadeInLeft}
               initial="visible"
               className={`ml-[-1px] h-full flex-shrink px-5 py-3 lg:w-[var(--booker-main-width)] ${