CAL-1553: Show dates for multi occurence event instead of input to change occurences, during booking step. Also make form less wide and meta a bit wider during booker step (in small view only), so form looks better and dates fit on a single line for the multiple occurences. When split over multiple lines they would otherwise take up a lot of unneccesary space. (#8834)

packages/features/bookings/Booker/Booker.tsx

@@ -19,7 +19,7 @@ import { EventMeta } from "./components/EventMeta";
 import { LargeCalendar } from "./components/LargeCalendar";
 import { LargeViewHeader } from "./components/LargeViewHeader";
 import { BookerSection } from "./components/Section";
-import { fadeInLeft, useBookerResizeAnimation } from "./config";
+import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
 import { useBookerStore, useInitializeBookerStore } from "./store";
 import type { BookerLayout, BookerProps } from "./types";
 import { useEvent } from "./utils/event";
@@ -128,11 +128,8 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book
         <div
           ref={animationScope}
           className={classNames(
-            // Size settings are abstracted on their own lines purely for readbility.
-            "[--booker-main-width:480px] [--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px]",
-            layout === "small_calendar" && "[--booker-meta-width:240px] lg:[--booker-meta-width:280px]",
-            layout !== "small_calendar" && "[--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
-            // Other styles
+            // Sets booker size css variables for the size of all the columns.
+            ...getBookerSizeClassNames(layout, bookerState),
             "bg-muted grid max-w-full auto-rows-fr items-start overflow-clip dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
             layout === "small_calendar" && "border-subtle rounded-md border"
           )}>

packages/features/bookings/Booker/config.ts

@@ -90,6 +90,28 @@ export const resizeAnimationConfig: ResizeAnimationConfig = {
   },
 };
 
+export const getBookerSizeClassNames = (layout: BookerLayout, bookerState: BookerState) => {
+  return [
+    // Size settings are abstracted on their own lines purely for readbility.
+    // General sizes, used always
+    "[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px]",
+    // Small calendar defaults
+    layout === "small_calendar" && "[--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 === "small_calendar" &&
+      bookerState === "booking" &&
+      "[--booker-main-width:420px] lg:[--booker-meta-width:340px]",
+    // Smaller meta when not in booking view.
+    layout === "small_calendar" &&
+      bookerState !== "booking" &&
+      "[--booker-main-width:480px] lg:[--booker-meta-width:280px]",
+    // Fullscreen view settings.
+    layout !== "small_calendar" &&
+      "[--booker-main-width:480px] [--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
+  ];
+};
+
 /**
  * This hook returns a ref that should be set on the booker element.
  * Based on that ref this hook animates the size of the booker element with framer motion.

packages/features/bookings/components/event-meta/Occurences.tsx

@@ -2,17 +2,23 @@ import { useEffect } from "react";
 
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { parseRecurringDates } from "@calcom/lib/parse-dates";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
+import { Tooltip } from "@calcom/ui";
 import { Input } from "@calcom/ui";
 
+import { useTimePreferences } from "../../lib";
 import type { PublicEvent } from "../../types";
 
 export const EventOccurences = ({ event }: { event: PublicEvent }) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const [setRecurringEventCount, recurringEventCount] = useBookerStore((state) => [
     state.setRecurringEventCount,
     state.recurringEventCount,
   ]);
+  const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
+  const bookerState = useBookerStore((state) => state.state);
+  const { timezone, timeFormat } = useTimePreferences();
 
   // Set initial value in booker store.
   useEffect(() => {
@@ -22,6 +28,32 @@ export const EventOccurences = ({ event }: { event: PublicEvent }) => {
 
   if (!event.recurringEvent) return null;
 
+  if (bookerState === "booking" && recurringEventCount && selectedTimeslot) {
+    const [recurringStrings] = parseRecurringDates(
+      {
+        startDate: selectedTimeslot,
+        timeZone: timezone,
+        recurringEvent: event.recurringEvent,
+        recurringCount: recurringEventCount,
+        selectedTimeFormat: timeFormat,
+      },
+      i18n.language
+    );
+    return (
+      <>
+        {recurringStrings.slice(0, 5).map((timeFormatted, key) => (
+          <p key={key}>{timeFormatted}</p>
+        ))}
+        <Tooltip
+          content={recurringStrings.slice(5).map((timeFormatted, key) => (
+            <p key={key}>{timeFormatted}</p>
+          ))}>
+          <p className=" text-sm">+ {t("plus_more", { count: recurringStrings.length - 5 })}</p>
+        </Tooltip>
+      </>
+    );
+  }
+
   return (
     <>
       {getRecurringFreq({ t, recurringEvent: event.recurringEvent })}