fix: correct language is used when booking with a modal + location icon visible in booker when using light mode (#14280)

* fix small frontend issues with Booker

This commit fixes the following:
- The "location" icon is now visible in light move when using the "in person (Organizer Address)" option

- The language in which the date and length is shown in modals now corresponds to the language of the creator of the calendar (before this is was always in english)

- If the text is too large for the modal, they will adapt into a collumn

-

* correct small mistakes

* chore: getDurationFormatted

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit222001@gmail.com>

packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx

@@ -1,12 +1,14 @@
 import type { ReactNode } from "react";
+import React from "react";
 
 import { useIsPlatform, useGetEventTypeById } from "@calcom/atoms/monorepo";
-import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge, Dialog, DialogContent } from "@calcom/ui";
 
+import { getDurationFormatted } from "../../../components/event-meta/Duration";
 import { useTimePreferences } from "../../../lib";
 import { useBookerStore } from "../../store";
+import { FromTime } from "../../utils/dates";
 import { useEvent } from "../../utils/event";
 
 const BookEventFormWrapper = ({ children, onCancel }: { onCancel: () => void; children: ReactNode }) => {
@@ -42,10 +44,9 @@ export const BookEventFormWrapperComponent = ({
   child: ReactNode;
   eventLength?: number;
 }) => {
-  const { t } = useLocale();
+  const { i18n, t } = useLocale();
   const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
   const selectedDuration = useBookerStore((state) => state.selectedDuration);
-  const parsedSelectedTimeslot = dayjs(selectedTimeslot);
   const { timeFormat, timezone } = useTimePreferences();
   if (!selectedTimeslot) {
     return null;
@@ -53,15 +54,18 @@ export const BookEventFormWrapperComponent = ({
   return (
     <>
       <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
-      <div className="my-4 flex space-x-2 rounded-md leading-none">
+      <div className="my-4 flex flex-wrap gap-2 rounded-md leading-none">
         <Badge variant="grayWithoutHover" startIcon="calendar" size="lg">
-          <span>
-            {parsedSelectedTimeslot.format("LL")} {parsedSelectedTimeslot.tz(timezone).format(timeFormat)}
-          </span>
+          <FromTime
+            date={selectedTimeslot}
+            timeFormat={timeFormat}
+            timeZone={timezone}
+            language={i18n.language}
+          />
         </Badge>
         {(selectedDuration || eventLength) && (
           <Badge variant="grayWithoutHover" startIcon="clock" size="lg">
-            <span>{selectedDuration || eventLength}</span>
+            <span>{getDurationFormatted(selectedDuration || eventLength, t)}</span>
           </Badge>
         )}
       </div>

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

@@ -8,6 +8,31 @@ interface EventFromToTime {
   language: string;
 }
 
+interface EventFromTime {
+  date: string;
+  timeFormat: TimeFormat;
+  timeZone: string;
+  language: string;
+}
+
+export const formatEventFromTime = ({ date, timeFormat, timeZone, language }: EventFromTime) => {
+  const startDate = new Date(date);
+  const formattedDate = new Intl.DateTimeFormat(language, {
+    timeZone,
+    dateStyle: "full",
+  }).format(startDate);
+
+  const formattedTime = new Intl.DateTimeFormat(language, {
+    timeZone,
+    timeStyle: "short",
+    hour12: timeFormat === TimeFormat.TWELVE_HOUR ? true : false,
+  })
+    .format(startDate)
+    .toLowerCase();
+
+  return { date: formattedDate, time: formattedTime };
+};
+
 export const formatEventFromToTime = ({
   date,
   duration,
@@ -46,3 +71,12 @@ export const FromToTime = (props: EventFromToTime) => {
     </>
   );
 };
+
+export const FromTime = (props: EventFromTime) => {
+  const formatted = formatEventFromTime(props);
+  return (
+    <>
+      {formatted.date}, {formatted.time}
+    </>
+  );
+};

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

@@ -28,7 +28,7 @@ function RenderIcon({
   return (
     <img
       src={eventLocationType.iconUrl}
-      className={classNames(invertLogoOnDark(eventLocationType?.iconUrl, true), "me-[10px] h-4 w-4")}
+      className={classNames(invertLogoOnDark(eventLocationType?.iconUrl, false), "me-[10px] h-4 w-4")}
       alt={`${eventLocationType.label} icon`}
     />
   );

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

@@ -9,7 +9,9 @@ import { Badge } from "@calcom/ui";
 import type { PublicEvent } from "../../types";
 
 /** Render X mins as X hours or X hours Y mins instead of in minutes once >= 60 minutes */
-const getDurationFormatted = (mins: number, t: TFunction) => {
+export const getDurationFormatted = (mins: number | undefined, t: TFunction) => {
+  if (!mins) return null;
+
   const hours = Math.floor(mins / 60);
   mins %= 60;
   // format minutes string