fix: prevent HTML encoding in names

Author: Anshumancanrock

packages/emails/src/templates/AttendeeRequestEmail.tsx

@@ -15,7 +15,7 @@ export const AttendeeRequestEmail = (props: React.ComponentProps<typeof Attendee
             props.calEvent.recurringEvent?.count
               ? "user_needs_to_confirm_or_reject_booking_recurring"
               : "user_needs_to_confirm_or_reject_booking",
-            { user: props.calEvent.organizer.name }
+            { user: props.calEvent.organizer.name, interpolation: { escapeValue: false } }
           )}
         </>
       }

packages/emails/src/templates/AttendeeWasRequestedToRescheduleEmail.tsx

@@ -13,6 +13,7 @@ export const AttendeeWasRequestedToRescheduleEmail = (
         <>
           {t("request_reschedule_subtitle", {
             organizer: props.calEvent.organizer.name,
+            interpolation: { escapeValue: false },
           })}
         </>
       }

packages/emails/src/templates/BaseScheduledEmail.tsx

@@ -48,6 +48,7 @@ export const BaseScheduledEmail = (
     date: `${getRecipientStart("h:mma")} - ${getRecipientEnd("h:mma")}, ${t(
       getRecipientStart("dddd").toLowerCase()
     )}, ${t(getRecipientStart("MMMM").toLowerCase())} ${getRecipientStart("D, YYYY")}`,
+    interpolation: { escapeValue: false },
   });
 
   let rescheduledBy = props.calEvent.rescheduledBy;

packages/emails/src/templates/CreditBalanceLimitReachedEmail.tsx

@@ -26,15 +26,15 @@ export const CreditBalanceLimitReachedEmail = (
 
   if (team) {
     return (
-      <V2BaseEmailHtml subject={user.t("action_required_out_of_credits", { teamName: team.name })}>
+      <V2BaseEmailHtml subject={user.t("action_required_out_of_credits", { teamName: team.name, interpolation: { escapeValue: false } })}>
         <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-          <> {user.t("hi_user_name", { name: user.name })},</>
+          <> {user.t("hi_user_name", { name: user.name, interpolation: { escapeValue: false } })},</>
         </p>
         <p style={{ fontWeight: 400, lineHeight: "24px", marginBottom: "20px" }}>
           <>
             {isCalAi
-              ? user.t("cal_ai_credit_limit_reached_message", { teamName: team.name })
-              : user.t("credit_limit_reached_message", { teamName: team.name })}
+              ? user.t("cal_ai_credit_limit_reached_message", { teamName: team.name, interpolation: { escapeValue: false } })
+              : user.t("credit_limit_reached_message", { teamName: team.name, interpolation: { escapeValue: false } })}
           </>
         </p>
         <div style={{ textAlign: "center", marginTop: "24px" }}>
@@ -51,7 +51,7 @@ export const CreditBalanceLimitReachedEmail = (
   return (
     <V2BaseEmailHtml subject={user.t("action_required_user_out_of_credits")}>
       <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-        <> {user.t("hi_user_name", { name: user.name })},</>
+        <> {user.t("hi_user_name", { name: user.name, interpolation: { escapeValue: false } })},</>
       </p>
       <p style={{ fontWeight: 400, lineHeight: "24px", marginBottom: "20px" }}>
         <>

packages/emails/src/templates/CreditBalanceLowWarningEmail.tsx

@@ -27,15 +27,15 @@ export const CreditBalanceLowWarningEmail = (
 
   if (team) {
     return (
-      <V2BaseEmailHtml subject={user.t("team_credits_low_warning", { teamName: team.name })}>
+      <V2BaseEmailHtml subject={user.t("team_credits_low_warning", { teamName: team.name, interpolation: { escapeValue: false } })}>
         <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-          <> {user.t("hi_user_name", { name: user.name })},</>
+          <> {user.t("hi_user_name", { name: user.name, interpolation: { escapeValue: false } })},</>
         </p>
         <p style={{ fontWeight: 400, lineHeight: "24px", marginBottom: "20px" }}>
           <>
             {isCalAi
-              ? user.t("cal_ai_low_credits_warning_message", { teamName: team.name })
-              : user.t("low_credits_warning_message", { teamName: team.name })}
+              ? user.t("cal_ai_low_credits_warning_message", { teamName: team.name, interpolation: { escapeValue: false } })
+              : user.t("low_credits_warning_message", { teamName: team.name, interpolation: { escapeValue: false } })}
           </>
         </p>
         <p
@@ -60,7 +60,7 @@ export const CreditBalanceLowWarningEmail = (
   return (
     <V2BaseEmailHtml subject={user.t("user_credits_low_warning")}>
       <p style={{ fontWeight: 400, lineHeight: "24px" }}>
-        <> {user.t("hi_user_name", { name: user.name })},</>
+        <> {user.t("hi_user_name", { name: user.name, interpolation: { escapeValue: false } })},</>
       </p>
       <p style={{ fontWeight: 400, lineHeight: "24px", marginBottom: "20px" }}>
         <>

packages/emails/src/templates/OrganizerPaymentRefundFailedEmail.tsx

@@ -16,6 +16,7 @@ export const OrganizerPaymentRefundFailedEmail = (
         <>
           {t("check_with_provider_and_user", {
             user: props.calEvent.attendees[0].name,
+            interpolation: { escapeValue: false },
           })}
         </>
       }>

packages/emails/src/templates/OrganizerRequestedToRescheduleEmail.tsx

@@ -6,11 +6,13 @@ export const OrganizerRequestedToRescheduleEmail = (
   <OrganizerScheduledEmail
     title={props.calEvent.organizer.language.translate("request_reschedule_title_organizer", {
       attendee: props.calEvent.attendees[0].name,
+      interpolation: { escapeValue: false },
     })}
     subtitle={
       <>
         {props.calEvent.organizer.language.translate("request_reschedule_subtitle_organizer", {
           attendee: props.calEvent.attendees[0].name,
+          interpolation: { escapeValue: false },
         })}
       </>
     }

packages/emails/src/templates/OrganizerScheduledEmail.tsx

@@ -55,7 +55,10 @@ export const OrganizerScheduledEmail = (
         ) : (
           <>
             {props.attendeeCancelled
-              ? t("attendee_no_longer_attending_subtitle", { name: props.attendee.name })
+              ? t("attendee_no_longer_attending_subtitle", {
+                  name: props.attendee.name,
+                  interpolation: { escapeValue: false },
+                })
               : ""}
           </>
         )