From 1f08bc5a4f3d7a9c4fe318b6aa01e8e02a530acd Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 10 Oct 2024 18:09:53 +0530
Subject: [PATCH] fix: DatePicker not showing up in mobile mode when
 hideEventTypeDetails is true (#17037)

---
 packages/embeds/embed-core/playground.ts     |  6 +++---
 packages/features/bookings/Booker/Booker.tsx | 12 ++++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/embeds/embed-core/playground.ts b/packages/embeds/embed-core/playground.ts
index 35f4d855f9..35af9372fd 100644
--- 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
index bdd2eb10c9..2af7953dde 100644
--- 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)] ${