CAL-1552: Add newline in front of time for selected timeslot in booker meta. (#8669)

packages/features/bookings/Booker/components/EventMeta.tsx

@@ -9,7 +9,7 @@ import { Calendar, Globe } from "@calcom/ui/components/icon";
 
 import { fadeInUp } from "../config";
 import { useBookerStore } from "../store";
-import { formatEventFromToTime } from "../utils/dates";
+import { FromToTime } from "../utils/dates";
 import { useEvent } from "../utils/event";
 
 const TimezoneSelect = dynamic(() => import("@calcom/ui").then((mod) => mod.TimezoneSelect), {
@@ -42,25 +42,25 @@ export const EventMeta = () => {
                 {t("former_time")}
                 <br />
                 <span className="line-through" data-testid="former_time_p">
-                  {formatEventFromToTime(
-                    rescheduleBooking.startTime.toString(),
-                    null,
-                    timeFormat,
-                    timezone,
-                    i18n.language
-                  )}
+                  <FromToTime
+                    date={rescheduleBooking.startTime.toString()}
+                    duration={null}
+                    timeFormat={timeFormat}
+                    timeZone={timezone}
+                    language={i18n.language}
+                  />
                 </span>
               </EventMetaBlock>
             )}
             {selectedTimeslot && (
               <EventMetaBlock icon={Calendar}>
-                {formatEventFromToTime(
-                  selectedTimeslot,
-                  selectedDuration,
-                  timeFormat,
-                  timezone,
-                  i18n.language
-                )}
+                <FromToTime
+                  date={selectedTimeslot}
+                  duration={selectedDuration || event.length}
+                  timeFormat={timeFormat}
+                  timeZone={timezone}
+                  language={i18n.language}
+                />
               </EventMetaBlock>
             )}
             <EventDetails event={event} />

packages/features/bookings/Booker/utils/dates.ts

@@ -1,18 +0,0 @@
-import dayjs from "@calcom/dayjs";
-import type { TimeFormat } from "@calcom/lib/timeFormat";
-
-export const formatEventFromToTime = (
-  date: string,
-  duration: number | null,
-  timeFormat: TimeFormat,
-  timeZone: string,
-  language: string
-) => {
-  const start = dayjs(date).tz(timeZone);
-  const end = duration ? start.add(duration, "minute") : null;
-  return `${start.format("dddd")}, ${start
-    .toDate()
-    .toLocaleDateString(language, { dateStyle: "long" })} ${start.format(timeFormat)} ${
-    end ? `– ${end.format(timeFormat)}` : ``
-  }`;
-};

packages/features/bookings/Booker/utils/dates.tsx

@@ -0,0 +1,38 @@
+import dayjs from "@calcom/dayjs";
+import type { TimeFormat } from "@calcom/lib/timeFormat";
+
+interface EventFromToTime {
+  date: string;
+  duration: number | null;
+  timeFormat: TimeFormat;
+  timeZone: string;
+  language: string;
+}
+
+export const formatEventFromToTime = ({
+  date,
+  duration,
+  timeFormat,
+  timeZone,
+  language,
+}: EventFromToTime) => {
+  const start = dayjs(date).tz(timeZone);
+  const end = duration ? start.add(duration, "minute") : null;
+  const formattedDate = `${start.format("dddd")}, ${start
+    .toDate()
+    .toLocaleDateString(language, { dateStyle: "long" })}`;
+  const formattedTime = `${start.format(timeFormat)} ${end ? `– ${end.format(timeFormat)}` : ``}`;
+
+  return { date: formattedDate, time: formattedTime };
+};
+
+export const FromToTime = (props: EventFromToTime) => {
+  const formatted = formatEventFromToTime(props);
+  return (
+    <>
+      {formatted.date}
+      <br />
+      {formatted.time}
+    </>
+  );
+};