Fix: email encoding bug (#7490)

* fix: existing decode Uri

* feat: unescape characters in base email

* fix: encoding in booking page

apps/web/components/booking/BookingListItem.tsx

@@ -223,6 +223,8 @@ function BookingListItem(booking: BookingItemProps) {
   };
   const showRecordingsButtons =
     (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
+
+  const title = decodeURIComponent(booking.title);
   return (
     <>
       <RescheduleDialog
@@ -355,12 +357,12 @@ function BookingListItem(booking: BookingItemProps) {
 
           <div className="cursor-pointer py-4">
             <div
-              title={booking.title}
+              title={title}
               className={classNames(
                 "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
-              {booking.title}
+              {title}
               <span> </span>
 
               {!!booking?.eventType?.price && !booking.paid && (

packages/emails/templates/_base-email.ts

@@ -1,4 +1,5 @@
 import nodemailer from "nodemailer";
+import { z } from "zod";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
@@ -34,10 +35,18 @@ export default class BaseEmail {
       console.log("Skipped Sending Email as NEXT_PUBLIC_IS_E2E==1");
       return new Promise((r) => r("Skipped sendEmail for E2E"));
     }
+
+    const payload = this.getNodeMailerPayload();
+    const parseSubject = z.string().safeParse(payload?.subject);
+    const payloadWithUnEscapedSubject = {
+      ...payload,
+      ...(parseSubject.success && { subject: decodeURIComponent(parseSubject.data) }),
+    };
+
     new Promise((resolve, reject) =>
       nodemailer
         .createTransport(this.getMailerOptions().transport)
-        .sendMail(this.getNodeMailerPayload(), (_err, info) => {
+        .sendMail(payloadWithUnEscapedSubject, (_err, info) => {
           if (_err) {
             const err = getErrorFromUnknown(_err);
             this.printNodeMailerError(err);

packages/emails/templates/attendee-scheduled-email.ts

@@ -78,7 +78,7 @@ export default class AttendeeScheduledEmail extends BaseEmail {
       to: `${this.attendee.name} <${this.attendee.email}>`,
       from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
       replyTo: [...this.calEvent.attendees.map(({ email }) => email), this.calEvent.organizer.email],
-      subject: decodeURIComponent(`${this.calEvent.title}`),
+      subject: `${this.calEvent.title}`,
       html: renderEmail("AttendeeScheduledEmail", {
         calEvent: this.calEvent,
         attendee: this.attendee,

packages/emails/templates/organizer-scheduled-email.ts

@@ -76,9 +76,7 @@ export default class OrganizerScheduledEmail extends BaseEmail {
       },
       from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
-      subject: decodeURIComponent(
-        `${this.newSeat ? this.t("new_attendee") + ":" : ""} ${this.calEvent.title}`
-      ),
+      subject: `${this.newSeat ? this.t("new_attendee") + ":" : ""} ${this.calEvent.title}`,
       html: renderEmail("OrganizerScheduledEmail", {
         calEvent: this.calEvent,
         attendee: this.calEvent.organizer,