From 98a3508b8f53674cda9aab2b2842a86f472efc59 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Fri, 5 May 2023 16:55:54 +0100
Subject: [PATCH] CAL-1552: Add newline in front of time for selected timeslot
 in booker meta. (#8669)

---
 .../bookings/Booker/components/EventMeta.tsx  | 30 +++++++--------
 .../features/bookings/Booker/utils/dates.ts   | 18 ---------
 .../features/bookings/Booker/utils/dates.tsx  | 38 +++++++++++++++++++
 3 files changed, 53 insertions(+), 33 deletions(-)
 delete mode 100644 packages/features/bookings/Booker/utils/dates.ts
 create mode 100644 packages/features/bookings/Booker/utils/dates.tsx

diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
index 59b9dd35e3..4b896df51e 100644
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/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} />
diff --git a/packages/features/bookings/Booker/utils/dates.ts b/packages/features/bookings/Booker/utils/dates.ts
deleted file mode 100644
index 7306119b08..0000000000
--- a/packages/features/bookings/Booker/utils/dates.ts
+++ /dev/null
@@ -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)}` : ``
-  }`;
-};
diff --git a/packages/features/bookings/Booker/utils/dates.tsx b/packages/features/bookings/Booker/utils/dates.tsx
new file mode 100644
index 0000000000..7584c1add8
--- /dev/null
+++ b/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}
+    </>
+  );
+};