Fix user time format not respected and booking dates not localized on emails (#7682)

* Localized booking date

* re add space

* Add locale per format call due to lambda dayjs instance share between users

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/emails/src/components/WhenInfo.tsx

@@ -1,8 +1,9 @@
-import { TFunction } from "next-i18next";
+import type { TFunction } from "next-i18next";
 import { RRule } from "rrule";
 
 import dayjs from "@calcom/dayjs";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
+import { TimeFormat } from "@calcom/lib/timeFormat";
 import type { CalendarEvent, Person } from "@calcom/types/Calendar";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 
@@ -30,13 +31,15 @@ export function getRecurringWhen({
 
 export function WhenInfo(props: { calEvent: CalendarEvent; timeZone: string; t: TFunction }) {
   const { timeZone, t, calEvent: { recurringEvent } = {} } = props;
+  const timeFormat = props.calEvent.organizer.timeFormat || TimeFormat.TWELVE_HOUR;
+  const locale = props.calEvent.organizer.language.locale;
 
   function getRecipientStart(format: string) {
-    return dayjs(props.calEvent.startTime).tz(timeZone).format(format);
+    return dayjs(props.calEvent.startTime).tz(timeZone).locale(locale).format(format);
   }
 
   function getRecipientEnd(format: string) {
-    return dayjs(props.calEvent.endTime).tz(timeZone).format(format);
+    return dayjs(props.calEvent.endTime).tz(timeZone).locale(locale).format(format);
   }
 
   const recurringInfo = getRecurringWhen({
@@ -54,8 +57,7 @@ export function WhenInfo(props: { calEvent: CalendarEvent; timeZone: string; t:
         description={
           <>
             {recurringEvent?.count ? `${t("starting")} ` : ""}
-            {t(getRecipientStart("dddd").toLowerCase())}, {t(getRecipientStart("MMMM").toLowerCase())}{" "}
-            {getRecipientStart("D, YYYY | h:mma")} - {getRecipientEnd("h:mma")}{" "}
+            {getRecipientStart(`dddd, LL | ${timeFormat}`)} - {getRecipientEnd(timeFormat)}{" "}
             <span style={{ color: "#4B5563" }}>({timeZone})</span>
           </>
         }

packages/features/bookings/lib/handleNewBooking.ts

@@ -47,6 +47,7 @@ import { checkBookingLimits, checkDurationLimits, getLuckyUser } from "@calcom/l
 import { getTranslation } from "@calcom/lib/server/i18n";
 import { slugify } from "@calcom/lib/slugify";
 import { updateWebUser as syncServicesUpdateWebUser } from "@calcom/lib/sync/SyncServiceManager";
+import { TimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { userSelect } from "@calcom/prisma";
 import type { bookingCreateSchemaLegacyPropsForApi } from "@calcom/prisma/zod-utils";
 import {
@@ -741,6 +742,7 @@ async function handler(
       email: organizerUser.email || "Email-less",
       timeZone: organizerUser.timeZone,
       language: { translate: tOrganizer, locale: organizerUser.locale ?? "en" },
+      timeFormat: organizerUser.timeFormat === 24 ? TimeFormat.TWENTY_FOUR_HOUR : TimeFormat.TWELVE_HOUR,
     },
     responses: "calEventResponses" in reqBody ? reqBody.calEventResponses : null,
     userFieldsResponses: calEventUserFieldsResponses,

packages/lib/defaultEvents.ts

@@ -47,6 +47,7 @@ const user: User = {
   brandColor: "#797979",
   darkBrandColor: "#efefef",
   allowDynamicBooking: true,
+  timeFormat: 12,
 };
 
 const customInputs: CustomInputSchema[] = [];

packages/prisma/selects/user.ts

@@ -10,6 +10,7 @@ export const availabilityUserSelect = Prisma.validator<Prisma.UserSelect>()({
   username: true,
   endTime: true,
   selectedCalendars: true,
+  timeFormat: true,
   schedules: {
     select: {
       availability: true,

packages/types/Calendar.d.ts

@@ -5,6 +5,7 @@ import type { Time } from "ical.js";
 import type { TFunction } from "next-i18next";
 
 import type { Calendar } from "@calcom/features/calendars/weeklyview";
+import type { TimeFormat } from "@calcom/lib/timeFormat";
 import type { Frequency } from "@calcom/prisma/zod-utils";
 
 import type { Ensure } from "./utils";
@@ -26,6 +27,7 @@ export type Person = {
   id?: number;
   bookingId?: number;
   locale?: string;
+  timeFormat?: TimeFormat;
 };
 
 export type TeamMember = {