Fix: locale and time format in attendee email (#8941)

* feat: add locale prop

* feat: add locale prop

* feat: add locale prop

* fix: time format

packages/emails/src/components/WhenInfo.tsx

@@ -5,7 +5,7 @@ import dayjs from "@calcom/dayjs";
 // TODO: Use browser locale, implement Intl in Dayjs maybe?
 import "@calcom/dayjs/locales";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { TimeFormat } from "@calcom/lib/timeFormat";
+import type { TimeFormat } from "@calcom/lib/timeFormat";
 import type { CalendarEvent, Person } from "@calcom/types/Calendar";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 
@@ -31,10 +31,14 @@ export function getRecurringWhen({
   return "";
 }
 
-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;
+export function WhenInfo(props: {
+  calEvent: CalendarEvent;
+  timeZone: string;
+  t: TFunction;
+  locale: string;
+  timeFormat: TimeFormat;
+}) {
+  const { timeZone, t, calEvent: { recurringEvent } = {}, locale, timeFormat } = props;
 
   function getRecipientStart(format: string) {
     return dayjs(props.calEvent.startTime).tz(timeZone).locale(locale).format(format);

packages/emails/src/templates/AttendeeScheduledEmail.tsx

@@ -9,6 +9,12 @@ export const AttendeeScheduledEmail = (
   } & Partial<React.ComponentProps<typeof BaseScheduledEmail>>
 ) => {
   return (
-    <BaseScheduledEmail timeZone={props.attendee.timeZone} t={props.attendee.language.translate} {...props} />
+    <BaseScheduledEmail
+      locale={props.attendee.language.locale}
+      timeZone={props.attendee.timeZone}
+      t={props.attendee.language.translate}
+      timeFormat={props.attendee?.timeFormat}
+      {...props}
+    />
   );
 };

packages/emails/src/templates/BaseScheduledEmail.tsx

@@ -1,6 +1,7 @@
 import type { TFunction } from "next-i18next";
 
 import dayjs from "@calcom/dayjs";
+import { TimeFormat } from "@calcom/lib/timeFormat";
 import type { CalendarEvent, Person } from "@calcom/types/Calendar";
 
 import {
@@ -21,9 +22,13 @@ export const BaseScheduledEmail = (
     timeZone: string;
     includeAppsStatus?: boolean;
     t: TFunction;
+    locale: string;
+    timeFormat: TimeFormat | undefined;
   } & Partial<React.ComponentProps<typeof BaseEmailHtml>>
 ) => {
-  const { t, timeZone } = props;
+  const { t, timeZone, locale, timeFormat: timeFormat_ } = props;
+
+  const timeFormat = timeFormat_ ?? TimeFormat.TWELVE_HOUR;
 
   function getRecipientStart(format: string) {
     return dayjs(props.calEvent.startTime).tz(timeZone).format(format);
@@ -73,7 +78,7 @@ export const BaseScheduledEmail = (
       )}
       <Info label={t("rejection_reason")} description={props.calEvent.rejectionReason} withSpacer />
       <Info label={t("what")} description={props.calEvent.title} withSpacer />
-      <WhenInfo calEvent={props.calEvent} t={t} timeZone={timeZone} />
+      <WhenInfo timeFormat={timeFormat} calEvent={props.calEvent} t={t} timeZone={timeZone} locale={locale} />
       <WhoInfo calEvent={props.calEvent} t={t} />
       <LocationInfo calEvent={props.calEvent} t={t} />
       <Info label={t("description")} description={props.calEvent.description} withSpacer formatted />

packages/emails/src/templates/BrokenIntegrationEmail.tsx

@@ -1,4 +1,4 @@
-import { TFunction } from "next-i18next";
+import type { TFunction } from "next-i18next";
 import { Trans } from "react-i18next";
 
 import { AppStoreLocationType } from "@calcom/app-store/locations";
@@ -56,6 +56,8 @@ export const BrokenIntegrationEmail = (
 ) => {
   const { calEvent, type } = props;
   const t = calEvent.organizer.language.translate;
+  const locale = calEvent.organizer.language.locale;
+  const timeFormat = calEvent.organizer?.timeFormat;
 
   if (type === "video") {
     let location = calEvent.location ? getEnumKeyByEnumValue(AppStoreLocationType, calEvent.location) : " ";
@@ -70,6 +72,8 @@ export const BrokenIntegrationEmail = (
       <BaseScheduledEmail
         timeZone={calEvent.organizer.timeZone}
         t={t}
+        timeFormat={timeFormat}
+        locale={locale}
         subject={t("broken_integration")}
         title={t("problem_adding_video_link")}
         subtitle={<BrokenVideoIntegration location={location} eventTypeId={calEvent.eventTypeId} t={t} />}
@@ -94,6 +98,8 @@ export const BrokenIntegrationEmail = (
       <BaseScheduledEmail
         timeZone={calEvent.organizer.timeZone}
         t={t}
+        timeFormat={timeFormat}
+        locale={locale}
         subject={t("broken_integration")}
         title={t("problem_updating_calendar")}
         subtitle={<BrokenCalendarIntegration calendar={calendar} eventTypeId={calEvent.eventTypeId} t={t} />}
@@ -107,6 +113,8 @@ export const BrokenIntegrationEmail = (
     <BaseScheduledEmail
       timeZone={calEvent.organizer.timeZone}
       t={t}
+      timeFormat={timeFormat}
+      locale={locale}
       subject={t("broken_integration")}
       title={t("problem_updating_calendar")}
       headerType="xCircle"

packages/emails/src/templates/NoShowFeeChargedEmail.tsx

@@ -10,13 +10,17 @@ export const NoShowFeeChargedEmail = (
 ) => {
   const { calEvent } = props;
   const t = props.attendee.language.translate;
+  const locale = props.attendee.language.locale;
+  const timeFormat = props.attendee?.timeFormat;
 
   if (!calEvent.paymentInfo?.amount) throw new Error("No payment info");
 
   return (
     <BaseScheduledEmail
+      locale={locale}
       title={t("no_show_fee_charged_text_body")}
       headerType="calendarCircle"
+      timeFormat={timeFormat}
       subtitle={
         <>
           {t("no_show_fee_charged_subtitle", {

packages/emails/src/templates/OrganizerScheduledEmail.tsx

@@ -29,13 +29,18 @@ export const OrganizerScheduledEmail = (
   }
 
   const t = props.teamMember?.language.translate || props.calEvent.organizer.language.translate;
+  const locale = props.teamMember?.language.locale || props.calEvent.organizer.language.locale;
+  const timeFormat = props.teamMember?.timeFormat || props.calEvent.organizer?.timeFormat;
+
   return (
     <BaseScheduledEmail
+      locale={locale}
       timeZone={props.teamMember?.timeZone || props.calEvent.organizer.timeZone}
       t={t}
       subject={t(subject)}
       title={t(title)}
       includeAppsStatus
+      timeFormat={timeFormat}
       subtitle={
         <>
           {props.attendeeCancelled