fix: update verificationRequest -> verificationToken in several files

apps/api

@@ -1 +1 @@
-Subproject commit 378cbf8f3a67ea7877296f1da02edb2b6e3efbce
+Subproject commit 63e0ca33e95583a5e2aae69195af052fd0d9aef8

apps/web/pages/api/teams/[team]/invite.ts

@@ -76,7 +76,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     const token: string = randomBytes(32).toString("hex");
 
-    await prisma.verificationRequest.create({
+    await prisma.verificationToken.create({
       data: {
         identifier: usernameOrEmail,
         token,

apps/web/pages/auth/signup.tsx

@@ -100,14 +100,14 @@ export default function Signup({ email }: Props) {
                 />
                 <EmailField
                   {...register("email")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="focus:outline-none mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 shadow-sm focus:border-black focus:ring-black sm:text-sm"
                 />
                 <PasswordField
                   labelProps={{
                     className: "block text-sm font-medium text-gray-700",
                   }}
                   {...register("password")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="focus:outline-none mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:ring-black sm:text-sm"
                 />
                 <PasswordField
                   label={t("confirm_password")}
@@ -118,7 +118,7 @@ export default function Signup({ email }: Props) {
                     validate: (value) =>
                       value === methods.watch("password") || (t("error_password_mismatch") as string),
                   })}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="focus:outline-none mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:ring-black sm:text-sm"
                 />
               </div>
               <div className="flex space-x-2 rtl:space-x-reverse">
@@ -152,14 +152,14 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
       notFound: true,
     };
   }
-  const verificationRequest = await prisma.verificationRequest.findUnique({
+  const verificationToken = await prisma.verificationToken.findUnique({
     where: {
       token,
     },
   });
 
-  // for now, disable if no verificationRequestToken given or token expired
-  if (!verificationRequest || verificationRequest.expires < new Date()) {
+  // for now, disable if no verificationTokenToken given or token expired
+  if (!verificationToken || verificationToken.expires < new Date()) {
     return {
       notFound: true,
     };
@@ -169,7 +169,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     where: {
       AND: [
         {
-          email: verificationRequest.identifier,
+          email: verificationToken.identifier,
         },
         {
           emailVerified: {
@@ -193,7 +193,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     props: {
       isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED,
       isSAMLLoginEnabled,
-      email: verificationRequest.identifier,
+      email: verificationToken.identifier,
       trpcState: ssr.dehydrate(),
     },
   };

apps/web/playwright/auth/auth-index.test.ts

@@ -35,7 +35,7 @@ test.describe("Can signup from a team invite", async () => {
     // Wait for the invite to be sent
     await page.waitForSelector(`[data-testid="member-email"][data-email="${testUser.email}"]`);
 
-    const tokenObj = await prisma.verificationRequest.findFirst({
+    const tokenObj = await prisma.verificationToken.findFirst({
       where: { identifier: testUser.email },
       select: { token: true },
     });
@@ -49,7 +49,7 @@ test.describe("Can signup from a team invite", async () => {
       where: { email: testUser.email },
     });
     // Delete verification request
-    await prisma.verificationRequest.delete({
+    await prisma.verificationToken.delete({
       where: { token },
     });
   });

apps/web/server/routers/viewer/teams.tsx

@@ -245,7 +245,7 @@ export const viewerTeamsRouter = createProtectedRouter()
 
         const token: string = randomBytes(32).toString("hex");
 
-        await ctx.prisma.verificationRequest.create({
+        await ctx.prisma.verificationToken.create({
           data: {
             identifier: input.usernameOrEmail,
             token,

apps/website

@@ -1 +1 @@
-Subproject commit e2b55ccca5dbc40f8212426ad720074b61aad92a
+Subproject commit b5405cc3c58b8f84ba3d91f307ac2145fe6430c6

packages/lib/CalEventParser.ts

@@ -0,0 +1,114 @@
+import { Person } from "ics";
+import short from "short-uuid";
+import { v5 as uuidv5 } from "uuid";
+
+import { BASE_URL } from "@calcom/lib/config/constants";
+import { getIntegrationName } from "@calcom/lib/integrations";
+
+import { CalendarEvent } from "./integrations/calendar/interfaces/Calendar";
+
+const translator = short();
+
+// The odd indentation in this file is necessary because otherwise the leading tabs will be applied into the event description.
+
+export const getWhat = (calEvent: CalendarEvent) => {
+  return `
+${calEvent.organizer.language.translate("what")}:
+${calEvent.type}
+  `;
+};
+
+export const getWhen = (calEvent: CalendarEvent) => {
+  return `
+${calEvent.organizer.language.translate("invitee_timezone")}:
+${calEvent.attendees[0].timeZone}
+  `;
+};
+
+export const getWho = (calEvent: CalendarEvent) => {
+  const attendees = calEvent.attendees
+    .map((attendee) => {
+      return `
+${attendee?.name || calEvent.organizer.language.translate("guest")}
+${attendee.email}
+      `;
+    })
+    .join("");
+
+  const organizer = `
+${calEvent.organizer.name} - ${calEvent.organizer.language.translate("organizer")}
+${calEvent.organizer.email}
+  `;
+
+  return `
+${calEvent.organizer.language.translate("who")}:
+${organizer + attendees}
+  `;
+};
+
+export const getAdditionalNotes = (calEvent: CalendarEvent) => {
+  return `
+${calEvent.organizer.language.translate("additional_notes")}:
+${calEvent.description}
+  `;
+};
+
+export const getLocation = (calEvent: CalendarEvent) => {
+  let providerName = calEvent.location ? getIntegrationName(calEvent.location) : "";
+
+  if (calEvent.location && calEvent.location.includes("integrations:")) {
+    const location = calEvent.location.split(":")[1];
+    providerName = location[0].toUpperCase() + location.slice(1);
+  }
+
+  if (calEvent.videoCallData) {
+    return calEvent.videoCallData.url;
+  }
+
+  if (calEvent.additionInformation?.hangoutLink) {
+    return calEvent.additionInformation.hangoutLink;
+  }
+
+  return providerName || calEvent.location || "";
+};
+
+export const getManageLink = (calEvent: CalendarEvent) => {
+  return `
+${calEvent.organizer.language.translate("need_to_reschedule_or_cancel")}
+${getCancelLink(calEvent)}
+  `;
+};
+
+export const getUid = (calEvent: CalendarEvent): string => {
+  return calEvent.uid ?? translator.fromUUID(uuidv5(JSON.stringify(calEvent), uuidv5.URL));
+};
+
+export const getCancelLink = (calEvent: CalendarEvent): string => {
+  return BASE_URL + "/cancel/" + getUid(calEvent);
+};
+
+export const getRichDescription = (calEvent: CalendarEvent, attendee?: Person) => {
+  // Only the original attendee can make changes to the event
+  // Guests cannot
+
+  if (attendee && attendee === calEvent.attendees[0]) {
+    return `
+${getWhat(calEvent)}
+${getWhen(calEvent)}
+${getWho(calEvent)}
+${calEvent.organizer.language.translate("where")}:
+${getLocation(calEvent)}
+${getAdditionalNotes(calEvent)}
+  `.trim();
+  }
+
+  return `
+${getWhat(calEvent)}
+${getWhen(calEvent)}
+${getWho(calEvent)}
+${calEvent.organizer.language.translate("where")}:
+${getLocation(calEvent)}
+${getAdditionalNotes(calEvent)}
+${getManageLink(calEvent)}
+  `.trim();
+};

packages/lib/config/constants.ts

@@ -0,0 +1,6 @@
+export const BASE_URL = process.env.BASE_URL || `https://${process.env.VERCEL_URL}`;
+export const WEBSITE_URL = process.env.NEXT_PUBLIC_APP_URL || "https://cal.com";
+export const IS_PRODUCTION = process.env.NODE_ENV === "production";
+export const TRIAL_LIMIT_DAYS = 14;
+export const HOSTED_CAL_FEATURES = process.env.HOSTED_CAL_FEATURES || BASE_URL === "https://app.cal.com";
+export const NEXT_PUBLIC_BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || `https://${process.env.VERCEL_URL}`;

packages/lib/config/next-seo.config.ts

@@ -0,0 +1,28 @@
+import { DefaultSeoProps } from "next-seo";
+
+import { HeadSeoProps } from "@components/seo/head-seo";
+
+const seoImages = {
+  default: "https://cal.com/og-image.png",
+  ogImage: "https://og-image-one-pi.vercel.app/",
+};
+
+export const getSeoImage = (key: keyof typeof seoImages): string => {
+  return seoImages[key];
+};
+
+export const seoConfig: {
+  headSeo: Required<Pick<HeadSeoProps, "siteName">>;
+  defaultNextSeo: DefaultSeoProps;
+} = {
+  headSeo: {
+    siteName: "Cal.com",
+  },
+  defaultNextSeo: {
+    twitter: {
+      handle: "@calcom",
+      site: "@calcom",
+      cardType: "summary_large_image",
+    },
+  },
+} as const;

packages/lib/default-cookies.ts

@@ -0,0 +1,73 @@
+import { CookiesOptions } from "next-auth";
+
+// Must use relative import because it's used by cypress
+import { isENVDev } from "./env";
+
+/**
+ * Copy from 'https://github.com/nextauthjs/next-auth/blob/227ff2259f/src/core/lib/cookie.ts' as we can't import it directly
+ *
+ * Use secure cookies if the site uses HTTPS
+ * This being conditional allows cookies to work non-HTTPS development URLs
+ * Honour secure cookie option, which sets 'secure' and also adds '__Secure-'
+ * prefix, but enable them by default if the site URL is HTTPS; but not for
+ * non-HTTPS URLs like http://localhost which are used in development).
+ * For more on prefixes see https://googlechrome.github.io/samples/cookie-prefixes/
+ *
+ */
+
+export function defaultCookies(useSecureCookies: boolean): CookiesOptions {
+  const cookiePrefix = useSecureCookies ? "__Secure-" : "";
+  // To enable cookies on widgets,
+  // https://stackoverflow.com/questions/45094712/iframe-not-reading-cookies-in-chrome
+  // But we need to set it as `lax` in development
+  const sameSite = isENVDev ? "lax" : "none";
+  return {
+    sessionToken: {
+      name: `${cookiePrefix}next-auth.session-token`,
+      options: {
+        httpOnly: true,
+
+        sameSite,
+        path: "/",
+        secure: useSecureCookies,
+      },
+    },
+    callbackUrl: {
+      name: `${cookiePrefix}next-auth.callback-url`,
+      options: {
+        sameSite,
+        path: "/",
+        secure: useSecureCookies,
+      },
+    },
+    csrfToken: {
+      // Default to __Host- for CSRF token for additional protection if using useSecureCookies
+      // NB: The `__Host-` prefix is stricter than the `__Secure-` prefix.
+      name: `${useSecureCookies ? "__Host-" : ""}next-auth.csrf-token`,
+      options: {
+        httpOnly: true,
+        sameSite,
+        path: "/",
+        secure: useSecureCookies,
+      },
+    },
+    pkceCodeVerifier: {
+      name: `${cookiePrefix}next-auth.pkce.code_verifier`,
+      options: {
+        httpOnly: true,
+        sameSite,
+        path: "/",
+        secure: useSecureCookies,
+      },
+    },
+    state: {
+      name: `${cookiePrefix}next-auth.state`,
+      options: {
+        httpOnly: true,
+        sameSite,
+        path: "/",
+        secure: useSecureCookies,
+      },
+    },
+  };
+}

packages/lib/emails/email-manager.ts

@@ -0,0 +1,209 @@
+import AttendeeAwaitingPaymentEmail from "@calcom/lib/emails/templates/attendee-awaiting-payment-email";
+import AttendeeCancelledEmail from "@calcom/lib/emails/templates/attendee-cancelled-email";
+import AttendeeDeclinedEmail from "@calcom/lib/emails/templates/attendee-declined-email";
+import AttendeeRequestEmail from "@calcom/lib/emails/templates/attendee-request-email";
+import AttendeeRescheduledEmail from "@calcom/lib/emails/templates/attendee-rescheduled-email";
+import AttendeeScheduledEmail from "@calcom/lib/emails/templates/attendee-scheduled-email";
+import ForgotPasswordEmail, { PasswordReset } from "@calcom/lib/emails/templates/forgot-password-email";
+import OrganizerCancelledEmail from "@calcom/lib/emails/templates/organizer-cancelled-email";
+import OrganizerPaymentRefundFailedEmail from "@calcom/lib/emails/templates/organizer-payment-refund-failed-email";
+import OrganizerRequestEmail from "@calcom/lib/emails/templates/organizer-request-email";
+import OrganizerRequestReminderEmail from "@calcom/lib/emails/templates/organizer-request-reminder-email";
+import OrganizerRescheduledEmail from "@calcom/lib/emails/templates/organizer-rescheduled-email";
+import OrganizerScheduledEmail from "@calcom/lib/emails/templates/organizer-scheduled-email";
+import TeamInviteEmail, { TeamInvite } from "@calcom/lib/emails/templates/team-invite-email";
+import { CalendarEvent, Person } from "@calcom/lib/integrations/calendar/interfaces/Calendar";
+
+export const sendScheduledEmails = async (calEvent: CalendarEvent) => {
+  const emailsToSend: Promise<unknown>[] = [];
+
+  emailsToSend.push(
+    ...calEvent.attendees.map((attendee) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const scheduledEmail = new AttendeeScheduledEmail(calEvent, attendee);
+          resolve(scheduledEmail.sendEmail());
+        } catch (e) {
+          reject(console.error("AttendeeRescheduledEmail.sendEmail failed", e));
+        }
+      });
+    })
+  );
+
+  emailsToSend.push(
+    new Promise((resolve, reject) => {
+      try {
+        const scheduledEmail = new OrganizerScheduledEmail(calEvent);
+        resolve(scheduledEmail.sendEmail());
+      } catch (e) {
+        reject(console.error("OrganizerScheduledEmail.sendEmail failed", e));
+      }
+    })
+  );
+
+  await Promise.all(emailsToSend);
+};
+
+export const sendRescheduledEmails = async (calEvent: CalendarEvent) => {
+  const emailsToSend: Promise<unknown>[] = [];
+
+  emailsToSend.push(
+    ...calEvent.attendees.map((attendee) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const scheduledEmail = new AttendeeRescheduledEmail(calEvent, attendee);
+          resolve(scheduledEmail.sendEmail());
+        } catch (e) {
+          reject(console.error("AttendeeRescheduledEmail.sendEmail failed", e));
+        }
+      });
+    })
+  );
+
+  emailsToSend.push(
+    new Promise((resolve, reject) => {
+      try {
+        const scheduledEmail = new OrganizerRescheduledEmail(calEvent);
+        resolve(scheduledEmail.sendEmail());
+      } catch (e) {
+        reject(console.error("OrganizerScheduledEmail.sendEmail failed", e));
+      }
+    })
+  );
+
+  await Promise.all(emailsToSend);
+};
+
+export const sendOrganizerRequestEmail = async (calEvent: CalendarEvent) => {
+  await new Promise((resolve, reject) => {
+    try {
+      const organizerRequestEmail = new OrganizerRequestEmail(calEvent);
+      resolve(organizerRequestEmail.sendEmail());
+    } catch (e) {
+      reject(console.error("OrganizerRequestEmail.sendEmail failed", e));
+    }
+  });
+};
+
+export const sendAttendeeRequestEmail = async (calEvent: CalendarEvent, attendee: Person) => {
+  await new Promise((resolve, reject) => {
+    try {
+      const attendeeRequestEmail = new AttendeeRequestEmail(calEvent, attendee);
+      resolve(attendeeRequestEmail.sendEmail());
+    } catch (e) {
+      reject(console.error("AttendRequestEmail.sendEmail failed", e));
+    }
+  });
+};
+
+export const sendDeclinedEmails = async (calEvent: CalendarEvent) => {
+  const emailsToSend: Promise<unknown>[] = [];
+
+  emailsToSend.push(
+    ...calEvent.attendees.map((attendee) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const declinedEmail = new AttendeeDeclinedEmail(calEvent, attendee);
+          resolve(declinedEmail.sendEmail());
+        } catch (e) {
+          reject(console.error("AttendeeRescheduledEmail.sendEmail failed", e));
+        }
+      });
+    })
+  );
+
+  await Promise.all(emailsToSend);
+};
+
+export const sendCancelledEmails = async (calEvent: CalendarEvent) => {
+  const emailsToSend: Promise<unknown>[] = [];
+
+  emailsToSend.push(
+    ...calEvent.attendees.map((attendee) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const scheduledEmail = new AttendeeCancelledEmail(calEvent, attendee);
+          resolve(scheduledEmail.sendEmail());
+        } catch (e) {
+          reject(console.error("AttendeeCancelledEmail.sendEmail failed", e));
+        }
+      });
+    })
+  );
+
+  emailsToSend.push(
+    new Promise((resolve, reject) => {
+      try {
+        const scheduledEmail = new OrganizerCancelledEmail(calEvent);
+        resolve(scheduledEmail.sendEmail());
+      } catch (e) {
+        reject(console.error("OrganizerCancelledEmail.sendEmail failed", e));
+      }
+    })
+  );
+
+  await Promise.all(emailsToSend);
+};
+
+export const sendOrganizerRequestReminderEmail = async (calEvent: CalendarEvent) => {
+  await new Promise((resolve, reject) => {
+    try {
+      const organizerRequestReminderEmail = new OrganizerRequestReminderEmail(calEvent);
+      resolve(organizerRequestReminderEmail.sendEmail());
+    } catch (e) {
+      reject(console.error("OrganizerRequestReminderEmail.sendEmail failed", e));
+    }
+  });
+};
+
+export const sendAwaitingPaymentEmail = async (calEvent: CalendarEvent) => {
+  const emailsToSend: Promise<unknown>[] = [];
+
+  emailsToSend.push(
+    ...calEvent.attendees.map((attendee) => {
+      return new Promise((resolve, reject) => {
+        try {
+          const paymentEmail = new AttendeeAwaitingPaymentEmail(calEvent, attendee);
+          resolve(paymentEmail.sendEmail());
+        } catch (e) {
+          reject(console.error("AttendeeAwaitingPaymentEmail.sendEmail failed", e));
+        }
+      });
+    })
+  );
+
+  await Promise.all(emailsToSend);
+};
+
+export const sendOrganizerPaymentRefundFailedEmail = async (calEvent: CalendarEvent) => {
+  await new Promise((resolve, reject) => {
+    try {
+      const paymentRefundFailedEmail = new OrganizerPaymentRefundFailedEmail(calEvent);
+      resolve(paymentRefundFailedEmail.sendEmail());
+    } catch (e) {
+      reject(console.error("OrganizerPaymentRefundFailedEmail.sendEmail failed", e));
+    }
+  });
+};
+
+export const sendPasswordResetEmail = async (passwordResetEvent: PasswordReset) => {
+  await new Promise((resolve, reject) => {
+    try {
+      const passwordResetEmail = new ForgotPasswordEmail(passwordResetEvent);
+      resolve(passwordResetEmail.sendEmail());
+    } catch (e) {
+      reject(console.error("OrganizerPaymentRefundFailedEmail.sendEmail failed", e));
+    }
+  });
+};
+
+export const sendTeamInviteEmail = async (teamInviteEvent: TeamInvite) => {
+  await new Promise((resolve, reject) => {
+    try {
+      const teamInviteEmail = new TeamInviteEmail(teamInviteEvent);
+      resolve(teamInviteEmail.sendEmail());
+    } catch (e) {
+      reject(console.error("TeamInviteEmail.sendEmail failed", e));
+    }
+  });
+};

packages/lib/emails/templates/attendee-awaiting-payment-email.ts

@@ -0,0 +1,169 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import AttendeeScheduledEmail from "./attendee-scheduled-email";
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+  linkIcon,
+} from "./common";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class AttendeeAwaitingPaymentEmail extends AttendeeScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      to: `${this.attendee.name} <${this.attendee.email}>`,
+      from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
+      replyTo: this.calEvent.organizer.email,
+      subject: `${this.attendee.language.translate("awaiting_payment_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.team?.name || this.calEvent.organizer.name,
+        date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+          "h:mma"
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("dddd").toLowerCase()
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("MMMM").toLowerCase()
+        )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.attendee.language.translate("meeting_awaiting_payment")}
+${this.attendee.language.translate("emailed_you_and_any_other_attendees")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.attendee.language.translate("awaiting_payment_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.team?.name || this.calEvent.organizer.name,
+      date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+        "h:mma"
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("dddd").toLowerCase()
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("MMMM").toLowerCase()
+      )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("calendarCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.attendee.language.translate("meeting_awaiting_payment"),
+          this.attendee.language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                              ${this.getManageLink()}
+                            </table>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"></div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getManageLink(): string {
+    const manageText = this.attendee.language.translate("pay_now");
+
+    if (this.calEvent.paymentInfo) {
+      return `
+      <tr>
+        <td align="center" bgcolor="#292929" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#292929;" valign="middle">
+          <p style="display:inline-block;background:#292929;color:#ffffff;font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;">
+            <a style="color: #FFFFFF; text-decoration: none;" href="${
+              this.calEvent.paymentInfo.link
+            }" target="_blank">${manageText} <img src="${linkIcon()}" width="12px"></img></a>
+          </p>
+        </td>
+      </tr>
+      `;
+    }
+
+    return "";
+  }
+}

packages/lib/emails/templates/attendee-cancelled-email.ts

@@ -0,0 +1,140 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import AttendeeScheduledEmail from "./attendee-scheduled-email";
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+} from "./common";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class AttendeeCancelledEmail extends AttendeeScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      to: `${this.attendee.name} <${this.attendee.email}>`,
+      from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
+      replyTo: this.calEvent.organizer.email,
+      subject: `${this.attendee.language.translate("event_cancelled_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.team?.name || this.calEvent.organizer.name,
+        date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+          "h:mma"
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("dddd").toLowerCase()
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("MMMM").toLowerCase()
+        )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.attendee.language.translate("event_request_cancelled")}
+${this.attendee.language.translate("emailed_you_and_any_other_attendees")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+${this.calEvent.cancellationReason && this.getCancellationReason()}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.attendee.language.translate("event_cancelled_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.team?.name || this.calEvent.organizer.name,
+      date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+        "h:mma"
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("dddd").toLowerCase()
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("MMMM").toLowerCase()
+      )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("xCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.attendee.language.translate("event_request_cancelled"),
+          this.attendee.language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                              ${this.calEvent.cancellationReason && this.getCancellationReason()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getCancellationReason(): string {
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.attendee.language.translate("cancellation_reason")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.cancellationReason}</p>
+    </div>`;
+  }
+}

packages/lib/emails/templates/attendee-declined-email.ts

@@ -0,0 +1,131 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import AttendeeScheduledEmail from "./attendee-scheduled-email";
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+} from "./common";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class AttendeeDeclinedEmail extends AttendeeScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      to: `${this.attendee.name} <${this.attendee.email}>`,
+      from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
+      replyTo: this.calEvent.organizer.email,
+      subject: `${this.attendee.language.translate("event_declined_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.team?.name || this.calEvent.organizer.name,
+        date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+          "h:mma"
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("dddd").toLowerCase()
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("MMMM").toLowerCase()
+        )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.attendee.language.translate("event_request_declined")}
+${this.attendee.language.translate("emailed_you_and_any_other_attendees")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+${this.getRejectionReason()}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.attendee.language.translate("event_declined_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.team?.name || this.calEvent.organizer.name,
+      date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+        "h:mma"
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("dddd").toLowerCase()
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("MMMM").toLowerCase()
+      )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("xCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.attendee.language.translate("event_request_declined"),
+          this.attendee.language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                              ${this.getRejectionReason()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+}

packages/lib/emails/templates/attendee-request-email.ts

@@ -0,0 +1,134 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import AttendeeScheduledEmail from "./attendee-scheduled-email";
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+} from "./common";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class AttendeeRequestEmail extends AttendeeScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    const toAddresses = [this.calEvent.attendees[0].email];
+    if (this.calEvent.team) {
+      this.calEvent.team.members.forEach((member) => {
+        const memberAttendee = this.calEvent.attendees.find((attendee) => attendee.name === member);
+        if (memberAttendee) {
+          toAddresses.push(memberAttendee.email);
+        }
+      });
+    }
+
+    return {
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      to: toAddresses.join(","),
+      subject: `${this.calEvent.organizer.language.translate("booking_submitted_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+        date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getInviteeStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getInviteeStart().format("MMMM").toLowerCase()
+        )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.attendees[0].language.translate("booking_submitted", {
+  name: this.calEvent.attendees[0].name,
+})}
+${this.calEvent.attendees[0].language.translate("user_needs_to_confirm_or_reject_booking", {
+  user: this.calEvent.organizer.name,
+})}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.attendees[0].language.translate("booking_submitted_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.attendees[0].name,
+      date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.attendees[0].language.translate(
+        this.getInviteeStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.attendees[0].language.translate(
+        this.getInviteeStart().format("MMMM").toLowerCase()
+      )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("calendarCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.calEvent.organizer.language.translate("booking_submitted"),
+          this.calEvent.organizer.language.translate("user_needs_to_confirm_or_reject_booking", {
+            user: this.calEvent.attendees[0].name,
+          })
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+}

packages/lib/emails/templates/attendee-rescheduled-email.ts

@@ -0,0 +1,164 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import { getCancelLink } from "@calcom/lib/CalEventParser";
+
+import AttendeeScheduledEmail from "./attendee-scheduled-email";
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+} from "./common";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class AttendeeRescheduledEmail extends AttendeeScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      icalEvent: {
+        filename: "event.ics",
+        content: this.getiCalEventAsString(),
+      },
+      to: `${this.attendee.name} <${this.attendee.email}>`,
+      from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
+      replyTo: this.calEvent.organizer.email,
+      subject: `${this.attendee.language.translate("rescheduled_event_type_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.team?.name || this.calEvent.organizer.name,
+        date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+          "h:mma"
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("dddd").toLowerCase()
+        )}, ${this.attendee.language.translate(
+          this.getInviteeStart().format("MMMM").toLowerCase()
+        )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    // Only the original attendee can make changes to the event
+    // Guests cannot
+    if (this.attendee === this.calEvent.attendees[0]) {
+      return `
+  ${this.attendee.language.translate("event_has_been_rescheduled")}
+  ${this.attendee.language.translate("emailed_you_and_any_other_attendees")}
+  ${this.getWhat()}
+  ${this.getWhen()}
+  ${this.getLocation()}
+  ${this.getAdditionalNotes()}
+  ${this.attendee.language.translate("need_to_reschedule_or_cancel")}
+  ${getCancelLink(this.calEvent)}
+  `.replace(/(<([^>]+)>)/gi, "");
+    }
+
+    return `
+${this.attendee.language.translate("event_has_been_rescheduled")}
+${this.attendee.language.translate("emailed_you_and_any_other_attendees")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.attendee.language.translate("rescheduled_event_type_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.team?.name || this.calEvent.organizer.name,
+      date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+        "h:mma"
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("dddd").toLowerCase()
+      )}, ${this.attendee.language.translate(
+        this.getInviteeStart().format("MMMM").toLowerCase()
+      )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("calendarCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.attendee.language.translate("event_has_been_rescheduled"),
+          this.attendee.language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:0px;text-align:left;color:#3E3E3E;">
+                              ${this.getManageLink()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+}

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

@@ -0,0 +1,401 @@
+import dayjs, { Dayjs } from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+import { createEvent, DateArray } from "ics";
+import nodemailer from "nodemailer";
+
+import { getCancelLink, getRichDescription } from "@calcom/lib/CalEventParser";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { getIntegrationName } from "@calcom/lib/integrations";
+import { CalendarEvent, Person } from "@calcom/lib/integrations/calendar/interfaces/Calendar";
+import { serverConfig } from "@calcom/lib/serverConfig";
+
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+  linkIcon,
+} from "./common";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class AttendeeScheduledEmail {
+  calEvent: CalendarEvent;
+  attendee: Person;
+
+  constructor(calEvent: CalendarEvent, attendee: Person) {
+    this.calEvent = calEvent;
+    this.attendee = attendee;
+  }
+
+  public sendEmail() {
+    new Promise((resolve, reject) =>
+      nodemailer
+        .createTransport(this.getMailerOptions().transport)
+        .sendMail(this.getNodeMailerPayload(), (_err, info) => {
+          if (_err) {
+            const err = getErrorFromUnknown(_err);
+            this.printNodeMailerError(err);
+            reject(err);
+          } else {
+            resolve(info);
+          }
+        })
+    ).catch((e) => console.error("sendEmail", e));
+    return new Promise((resolve) => resolve("send mail async"));
+  }
+
+  protected getiCalEventAsString(): string | undefined {
+    const icsEvent = createEvent({
+      start: dayjs(this.calEvent.startTime)
+        .utc()
+        .toArray()
+        .slice(0, 6)
+        .map((v, i) => (i === 1 ? v + 1 : v)) as DateArray,
+      startInputType: "utc",
+      productId: "calendso/ics",
+      title: this.calEvent.attendees[0].language.translate("ics_event_title", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+      }),
+      description: this.getTextBody(),
+      duration: { minutes: dayjs(this.calEvent.endTime).diff(dayjs(this.calEvent.startTime), "minute") },
+      organizer: { name: this.calEvent.organizer.name, email: this.calEvent.organizer.email },
+      attendees: this.calEvent.attendees.map((attendee: Person) => ({
+        name: attendee.name,
+        email: attendee.email,
+      })),
+      status: "CONFIRMED",
+    });
+    if (icsEvent.error) {
+      throw icsEvent.error;
+    }
+    return icsEvent.value;
+  }
+
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      icalEvent: {
+        filename: "event.ics",
+        content: this.getiCalEventAsString(),
+      },
+      to: `${this.attendee.name} <${this.attendee.email}>`,
+      from: `${this.calEvent.organizer.name} <${this.getMailerOptions().from}>`,
+      replyTo: this.calEvent.organizer.email,
+      subject: `${this.calEvent.attendees[0].language.translate("confirmed_event_type_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.team?.name || this.calEvent.organizer.name,
+        date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.attendees[0].language.translate(
+          this.getInviteeStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.attendees[0].language.translate(
+          this.getInviteeStart().format("MMMM").toLowerCase()
+        )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getMailerOptions() {
+    return {
+      transport: serverConfig.transport,
+      from: serverConfig.from,
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.attendees[0].language.translate("your_event_has_been_scheduled")}
+${this.calEvent.attendees[0].language.translate("emailed_you_and_any_other_attendees")}
+
+${getRichDescription(this.calEvent)}
+`.trim();
+  }
+
+  protected printNodeMailerError(error: Error): void {
+    console.error("SEND_BOOKING_CONFIRMATION_ERROR", this.attendee.email, error);
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.attendees[0].language.translate("confirmed_event_type_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.team?.name || this.calEvent.organizer.name,
+      date: `${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.attendees[0].language.translate(
+        this.getInviteeStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.attendees[0].language.translate(
+        this.getInviteeStart().format("MMMM").toLowerCase()
+      )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("checkCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.calEvent.attendees[0].language.translate("your_event_has_been_scheduled"),
+          this.calEvent.attendees[0].language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:0px;text-align:left;color:#3E3E3E;">
+                              ${this.getManageLink()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getManageLink(): string {
+    // Only the original attendee can make changes to the event
+    // Guests cannot
+    if (this.attendee === this.calEvent.attendees[0]) {
+      const manageText = this.calEvent.attendees[0].language.translate("manage_this_event");
+      return `<p>${this.calEvent.attendees[0].language.translate(
+        "need_to_reschedule_or_cancel"
+      )}</p><p style="font-weight: 400; line-height: 24px;"><a href="${getCancelLink(
+        this.calEvent
+      )}" style="color: #3E3E3E;" alt="${manageText}">${manageText}</a></p>`;
+    }
+
+    return "";
+  }
+
+  protected getWhat(): string {
+    return `
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("what")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.type}</p>
+    </div>`;
+  }
+
+  protected getWhen(): string {
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("when")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">
+      ${this.calEvent.attendees[0].language.translate(
+        this.getInviteeStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.attendees[0].language.translate(
+      this.getInviteeStart().format("MMMM").toLowerCase()
+    )} ${this.getInviteeStart().format("D")}, ${this.getInviteeStart().format(
+      "YYYY"
+    )} | ${this.getInviteeStart().format("h:mma")} - ${this.getInviteeEnd().format(
+      "h:mma"
+    )} <span style="color: #888888">(${this.getTimezone()})</span>
+      </p>
+    </div>`;
+  }
+
+  protected getWho(): string {
+    const attendees = this.calEvent.attendees
+      .map((attendee) => {
+        return `<div style="color: #494949; font-weight: 400; line-height: 24px;">${
+          attendee?.name || `${this.calEvent.attendees[0].language.translate("guest")}`
+        } <span style="color: #888888"><a href="mailto:${attendee.email}" style="color: #888888;">${
+          attendee.email
+        }</a></span></div>`;
+      })
+      .join("");
+
+    const organizer = `<div style="color: #494949; font-weight: 400; line-height: 24px;">${
+      this.calEvent.organizer.name
+    } - ${this.calEvent.attendees[0].language.translate(
+      "organizer"
+    )} <span style="color: #888888"><a href="mailto:${
+      this.calEvent.organizer.email
+    }" style="color: #888888;">${this.calEvent.organizer.email}</a></span></div>`;
+
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("who")}</p>
+      ${organizer + attendees}
+    </div>`;
+  }
+
+  protected getAdditionalNotes(): string {
+    if (!this.calEvent.description) return "";
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("additional_notes")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px; white-space: pre-wrap;">${
+        this.calEvent.description
+      }</p>
+    </div>
+    `;
+  }
+
+  protected getRejectionReason(): string {
+    if (!this.calEvent.rejectionReason) return "";
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("rejection_reason")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.rejectionReason}</p>
+    </div>`;
+  }
+
+  protected getLocation(): string {
+    let providerName = this.calEvent.location ? getIntegrationName(this.calEvent.location) : "";
+
+    if (this.calEvent.location && this.calEvent.location.includes("integrations:")) {
+      const location = this.calEvent.location.split(":")[1];
+      providerName = location[0].toUpperCase() + location.slice(1);
+    }
+
+    if (this.calEvent.videoCallData) {
+      const meetingId = this.calEvent.videoCallData.id;
+      const meetingPassword = this.calEvent.videoCallData.password;
+      const meetingUrl = this.calEvent.videoCallData.url;
+
+      return `
+      <p style="height: 6px"></p>
+      <div style="line-height: 6px;">
+        <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("where")}</p>
+        <p style="color: #494949; font-weight: 400; line-height: 24px;">${providerName} ${
+        meetingUrl &&
+        `<a href="${meetingUrl}" target="_blank" alt="${this.calEvent.attendees[0].language.translate(
+          "meeting_url"
+        )}"><img src="${linkIcon()}" width="12px"></img></a>`
+      }</p>
+        ${
+          meetingId &&
+          `<div style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.attendees[0].language.translate(
+            "meeting_id"
+          )}: <span>${meetingId}</span></div>`
+        }
+        ${
+          meetingPassword &&
+          `<div style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.attendees[0].language.translate(
+            "meeting_password"
+          )}: <span>${meetingPassword}</span></div>`
+        }
+        ${
+          meetingUrl &&
+          `<div style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.attendees[0].language.translate(
+            "meeting_url"
+          )}: <a href="${meetingUrl}" alt="${this.calEvent.attendees[0].language.translate(
+            "meeting_url"
+          )}" style="color: #3E3E3E" target="_blank">${meetingUrl}</a></div>`
+        }
+      </div>
+      `;
+    }
+
+    if (this.calEvent.additionInformation?.hangoutLink) {
+      const hangoutLink: string = this.calEvent.additionInformation.hangoutLink;
+
+      return `
+      <p style="height: 6px"></p>
+      <div style="line-height: 6px;">
+        <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("where")}</p>
+        <p style="color: #494949; font-weight: 400; line-height: 24px;">${providerName} ${
+        hangoutLink &&
+        `<a href="${hangoutLink}" target="_blank" alt="${this.calEvent.attendees[0].language.translate(
+          "meeting_url"
+        )}"><img src="${linkIcon()}" width="12px"></img></a>`
+      }</p>
+        <div style="color: #494949; font-weight: 400; line-height: 24px;"><a href="${hangoutLink}" alt="${this.calEvent.attendees[0].language.translate(
+        "meeting_url"
+      )}" style="color: #3E3E3E" target="_blank">${hangoutLink}</a></div>
+      </div>
+      `;
+    }
+
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("where")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">${
+        providerName || this.calEvent.location
+      }</p>
+    </div>
+    `;
+  }
+
+  protected getTimezone(): string {
+    // Timezone is based on the first attendee in the attendee list
+    // as the first attendee is the one who created the booking
+    return this.calEvent.attendees[0].timeZone;
+  }
+
+  protected getInviteeStart(): Dayjs {
+    return dayjs(this.calEvent.startTime).tz(this.getTimezone());
+  }
+
+  protected getInviteeEnd(): Dayjs {
+    return dayjs(this.calEvent.endTime).tz(this.getTimezone());
+  }
+}

packages/lib/emails/templates/common/body-logo.ts

@@ -0,0 +1,44 @@
+import { IS_PRODUCTION, BASE_URL } from "@calcom/lib/config/constants";
+
+export const emailBodyLogo = (): string => {
+  const image = IS_PRODUCTION
+    ? BASE_URL + "/emails/CalLogo@2x.png"
+    : "https://app.cal.com/emails/CalLogo@2x.png";
+
+  return `
+  <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+  <div style="margin:0px auto;max-width:600px;">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+      <tbody>
+        <tr>
+          <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
+            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
+            <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                <tbody>
+                  <tr>
+                    <td align="center" style="font-size:0px;padding:10px 25px;padding-top:32px;word-break:break-word;">
+                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                        <tbody>
+                          <tr>
+                            <td style="width:89px;">
+                              <a href="${BASE_URL}" target="_blank">
+                                <img height="19" src="${image}" style="border:0;display:block;outline:none;text-decoration:none;height:19px;width:100%;font-size:13px;" width="89" />
+                              </a>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <!--[if mso | IE]></td></tr></table><![endif]-->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  `;
+};

packages/lib/emails/templates/common/head.ts

@@ -0,0 +1,91 @@
+export const emailHead = (headerContent: string): string => {
+  return `
+  <head>
+    <title>${headerContent}</title>
+    <!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!--<![endif]-->
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style type="text/css">
+      #outlook a {
+        padding: 0;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+
+      table,
+      td {
+        border-collapse: collapse;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+      }
+
+      img {
+        border: 0;
+        height: auto;
+        line-height: 100%;
+        outline: none;
+        text-decoration: none;
+        -ms-interpolation-mode: bicubic;
+      }
+
+      p {
+        display: block;
+        margin: 13px 0;
+      }
+    </style>
+    <!--[if mso]>
+          <noscript>
+          <xml>
+          <o:OfficeDocumentSettings>
+            <o:AllowPNG/>
+            <o:PixelsPerInch>96</o:PixelsPerInch>
+          </o:OfficeDocumentSettings>
+          </xml>
+          </noscript>
+          <![endif]-->
+    <!--[if lte mso 11]>
+          <style type="text/css">
+            .mj-outlook-group-fix { width:100% !important; }
+          </style>
+          <![endif]-->
+    <!--[if !mso]><!-->
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
+    <style type="text/css">
+      @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
+    </style>
+    <!--<![endif]-->
+    <style type="text/css">
+      @media only screen and (min-width:480px) {
+        .mj-column-per-100 {
+          width: 100% !important;
+          max-width: 100%;
+        }
+      }
+    </style>
+    <style media="screen and (min-width:480px)">
+      .moz-text-html .mj-column-per-100 {
+        width: 100% !important;
+        max-width: 100%;
+      }
+    </style>
+    <style type="text/css">
+      @media only screen and (max-width:480px) {
+        table.mj-full-width-mobile {
+          width: 100% !important;
+        }
+
+        td.mj-full-width-mobile {
+          width: auto !important;
+        }
+      }
+    </style>
+  </head>
+  `;
+};

packages/lib/emails/templates/common/index.ts

@@ -0,0 +1,6 @@
+export { emailHead } from "./head";
+export { emailSchedulingBodyHeader } from "./scheduling-body-head";
+export { emailBodyLogo } from "./body-logo";
+export { emailScheduledBodyHeaderContent } from "./scheduling-body-head-content";
+export { emailSchedulingBodyDivider } from "./scheduling-body-divider";
+export { linkIcon } from "./link-icon";

packages/lib/emails/templates/common/link-icon.ts

@@ -0,0 +1,5 @@
+import { IS_PRODUCTION, BASE_URL } from "@calcom/lib/config/constants";
+
+export const linkIcon = (): string => {
+  return IS_PRODUCTION ? BASE_URL + "/emails/linkIcon.png" : "https://app.cal.com/emails/linkIcon.png";
+};

packages/lib/emails/templates/common/scheduling-body-divider.ts

@@ -0,0 +1,31 @@
+export const emailSchedulingBodyDivider = (): string => {
+  return `
+  <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+  <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+      <tbody>
+        <tr>
+          <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:15px 0px 0 0px;text-align:center;">
+            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+            <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                <tbody>
+                  <tr>
+                    <td align="center" style="font-size:0px;padding:10px 25px;padding-bottom:15px;word-break:break-word;">
+                      <p style="border-top:solid 1px #E1E1E1;font-size:1px;margin:0px auto;width:100%;">
+                      </p>
+                      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" style="border-top:solid 1px #E1E1E1;font-size:1px;margin:0px auto;width:548px;" role="presentation" width="548px" ><tr><td style="height:0;line-height:0;"> &nbsp;
+</td></tr></table><![endif]-->
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <!--[if mso | IE]></td></tr></table><![endif]-->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  `;
+};

packages/lib/emails/templates/common/scheduling-body-head-content.ts

@@ -0,0 +1,33 @@
+export const emailScheduledBodyHeaderContent = (title: string, subtitle: string): string => {
+  return `
+  <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+  <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+      <tbody>
+        <tr>
+          <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+            <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                <tbody>
+                  <tr>
+                    <td align="center" style="font-size:0px;padding:10px 25px;padding-top:24px;padding-bottom:0px;word-break:break-word;">
+                      <div style="font-family:Roboto, Helvetica, sans-serif;font-size:24px;font-weight:700;line-height:24px;text-align:center;color:#292929;">${title}</div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                      <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:center;color:#494949;">${subtitle}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <!--[if mso | IE]></td></tr></table><![endif]-->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  `;
+};

packages/lib/emails/templates/common/scheduling-body-head.ts

@@ -0,0 +1,71 @@
+import { IS_PRODUCTION, BASE_URL } from "@calcom/lib/config/constants";
+
+export type BodyHeadType = "checkCircle" | "xCircle" | "calendarCircle";
+
+export const getHeadImage = (headerType: BodyHeadType): string => {
+  switch (headerType) {
+    case "checkCircle":
+      return IS_PRODUCTION
+        ? BASE_URL + "/emails/checkCircle@2x.png"
+        : "https://app.cal.com/emails/checkCircle@2x.png";
+    case "xCircle":
+      return IS_PRODUCTION
+        ? BASE_URL + "/emails/xCircle@2x.png"
+        : "https://app.cal.com/emails/xCircle@2x.png";
+    case "calendarCircle":
+      return IS_PRODUCTION
+        ? BASE_URL + "/emails/calendarCircle@2x.png"
+        : "https://app.cal.com/emails/calendarCircle@2x.png";
+  }
+};
+
+export const emailSchedulingBodyHeader = (headerType: BodyHeadType): string => {
+  const image = getHeadImage(headerType);
+
+  return `
+  <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+  <div style="margin:0px auto;max-width:600px;">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+      <tbody>
+        <tr>
+          <td style="direction:ltr;font-size:0px;padding:0px;padding-top:40px;text-align:center;">
+            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+  <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+      <tbody>
+        <tr>
+          <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;border-top:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:30px 20px 0 20px;text-align:center;">
+            <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:558px;" ><![endif]-->
+            <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+              <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                <tbody>
+                  <tr>
+                    <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
+                        <tbody>
+                          <tr>
+                            <td style="width:64px;">
+                              <img height="64" src="${image}" style="border:0;display:block;outline:none;text-decoration:none;height:64px;width:100%;font-size:13px;" width="64" />
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <!--[if mso | IE]></td></tr></table><![endif]-->
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  `;
+};

packages/lib/emails/templates/forgot-password-email.ts

@@ -0,0 +1,217 @@
+import { TFunction } from "next-i18next";
+import nodemailer from "nodemailer";
+
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { serverConfig } from "@calcom/lib/serverConfig";
+
+import { emailHead, linkIcon, emailBodyLogo } from "./common";
+
+export type PasswordReset = {
+  language: TFunction;
+  user: {
+    name?: string | null;
+    email: string;
+  };
+  resetLink: string;
+};
+
+export const PASSWORD_RESET_EXPIRY_HOURS = 6;
+
+export default class ForgotPasswordEmail {
+  passwordEvent: PasswordReset;
+
+  constructor(passwordEvent: PasswordReset) {
+    this.passwordEvent = passwordEvent;
+  }
+
+  public sendEmail() {
+    new Promise((resolve, reject) =>
+      nodemailer
+        .createTransport(this.getMailerOptions().transport)
+        .sendMail(this.getNodeMailerPayload(), (_err, info) => {
+          if (_err) {
+            const err = getErrorFromUnknown(_err);
+            this.printNodeMailerError(err);
+            reject(err);
+          } else {
+            resolve(info);
+          }
+        })
+    ).catch((e) => console.error("sendEmail", e));
+    return new Promise((resolve) => resolve("send mail async"));
+  }
+
+  protected getMailerOptions() {
+    return {
+      transport: serverConfig.transport,
+      from: serverConfig.from,
+    };
+  }
+
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      to: `${this.passwordEvent.user.name} <${this.passwordEvent.user.email}>`,
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      subject: this.passwordEvent.language("reset_password_subject"),
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected printNodeMailerError(error: Error): void {
+    console.error("SEND_PASSWORD_RESET_EMAIL_ERROR", this.passwordEvent.user.email, error);
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.passwordEvent.language("reset_password_subject")}
+${this.passwordEvent.language("hi_user_name", { user: this.passwordEvent.user.name })},
+${this.passwordEvent.language("someone_requested_password_reset")}
+${this.passwordEvent.language("change_password")}: ${this.passwordEvent.resetLink}
+${this.passwordEvent.language("password_reset_instructions")}
+${this.passwordEvent.language("have_any_questions")} ${this.passwordEvent.language(
+      "contact_our_support_team"
+    )}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.passwordEvent.language("reset_password_subject");
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+            <tbody>
+              <tr>
+                <td style="direction:ltr;font-size:0px;padding:0px;padding-top:40px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;border-top:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:30px 20px 0 20px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              <div style="line-height: 6px;">
+                                <p>${this.passwordEvent.language("hi_user_name", {
+                                  user: this.passwordEvent.user.name,
+                                })},</p>
+                                <p style="font-weight: 400; line-height: 24px;">${this.passwordEvent.language(
+                                  "someone_requested_password_reset"
+                                )}</p>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="left" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                              <tr>
+                                <td align="center" bgcolor="#292929" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#292929;" valign="middle">
+                                  <p style="display:inline-block;background:#292929;color:#292929;font-family:Roboto, Helvetica, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;">
+                                    <a href="${
+                                      this.passwordEvent.resetLink
+                                    }" target="_blank" style="color: #FFFFFF; text-decoration: none">${this.passwordEvent.language(
+      "change_password"
+    )} <img src="${linkIcon()}" width="12px"></img></a>
+                                  </p>
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              <div style="line-height: 6px;">
+                                <p style="font-weight: 400; line-height: 24px;">${this.passwordEvent.language(
+                                  "password_reset_instructions"
+                                )}</p>
+                              </div>
+                              <p style="height: 6px"></p>
+                              <div style="line-height: 6px;">
+                                <p style="font-weight: 400; line-height: 24px;">${this.passwordEvent.language(
+                                  "have_any_questions"
+                                )} <a href="mailto:support@cal.com" style="color: #3E3E3E" target="_blank">${this.passwordEvent.language(
+      "contact_our_support_team"
+    )}</a></p>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+}

packages/lib/emails/templates/organizer-cancelled-email.ts

@@ -0,0 +1,148 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+} from "./common";
+import OrganizerScheduledEmail from "./organizer-scheduled-email";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class OrganizerCancelledEmail extends OrganizerScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    const toAddresses = [this.calEvent.organizer.email];
+    if (this.calEvent.team) {
+      this.calEvent.team.members.forEach((member) => {
+        const memberAttendee = this.calEvent.attendees.find((attendee) => attendee.name === member);
+        if (memberAttendee) {
+          toAddresses.push(memberAttendee.email);
+        }
+      });
+    }
+
+    return {
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      to: toAddresses.join(","),
+      subject: `${this.calEvent.organizer.language.translate("event_cancelled_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+        date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("MMMM").toLowerCase()
+        )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.organizer.language.translate("event_request_cancelled")}
+${this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+${this.calEvent.cancellationReason && this.getCancellationReason()}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.organizer.language.translate("event_cancelled_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.attendees[0].name,
+      date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("MMMM").toLowerCase()
+      )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("xCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.calEvent.organizer.language.translate("event_request_cancelled"),
+          this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                              ${this.calEvent.cancellationReason && this.getCancellationReason()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getCancellationReason(): string {
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.organizer.language.translate("cancellation_reason")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.cancellationReason}</p>
+    </div>`;
+  }
+}

packages/lib/emails/templates/organizer-payment-refund-failed-email.ts

@@ -0,0 +1,203 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import { emailHead, emailSchedulingBodyHeader, emailBodyLogo, emailSchedulingBodyDivider } from "./common";
+import OrganizerScheduledEmail from "./organizer-scheduled-email";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class OrganizerPaymentRefundFailedEmail extends OrganizerScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    const toAddresses = [this.calEvent.organizer.email];
+    if (this.calEvent.team) {
+      this.calEvent.team.members.forEach((member) => {
+        const memberAttendee = this.calEvent.attendees.find((attendee) => attendee.name === member);
+        if (memberAttendee) {
+          toAddresses.push(memberAttendee.email);
+        }
+      });
+    }
+
+    return {
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      to: toAddresses.join(","),
+      subject: `${this.calEvent.organizer.language.translate("refund_failed_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+        date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("MMMM").toLowerCase()
+        )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.organizer.language.translate("a_refund_failed")}
+${this.calEvent.organizer.language.translate("check_with_provider_and_user", {
+  user: this.calEvent.attendees[0].name,
+})}
+${
+  this.calEvent.paymentInfo &&
+  this.calEvent.organizer.language.translate("error_message", {
+    errorMessage: this.calEvent.paymentInfo.reason,
+  })
+}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.organizer.language.translate("refund_failed_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.attendees[0].name,
+      date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("MMMM").toLowerCase()
+      )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("xCircle")}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="center" style="font-size:0px;padding:10px 25px;padding-top:24px;padding-bottom:0px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:24px;font-weight:700;line-height:24px;text-align:center;color:#292929;">${this.calEvent.organizer.language.translate(
+                              "a_refund_failed"
+                            )}</div>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:center;color:#494949;">${this.calEvent.organizer.language.translate(
+                              "check_with_provider_and_user",
+                              { user: this.calEvent.attendees[0].name }
+                            )}</div>
+                          </td>
+                        </tr>
+                        ${this.getRefundInformation()}
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getRefundInformation(): string {
+    const paymentInfo = this.calEvent.paymentInfo;
+    let refundInformation = "";
+
+    if (paymentInfo) {
+      if (paymentInfo.reason) {
+        refundInformation = `
+        <tr>
+          <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:center;color:#494949;">${this.calEvent.organizer.language.translate(
+              "error_message",
+              { errorMessage: paymentInfo.reason }
+            )}</div>
+          </td>
+        </tr>
+        `;
+      }
+
+      if (paymentInfo.id) {
+        refundInformation += `
+        <tr>
+          <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:center;color:#494949;">Payment ${paymentInfo.id}</div>
+          </td>
+        </tr>
+        `;
+      }
+    }
+
+    return refundInformation;
+  }
+}

packages/lib/emails/templates/organizer-request-email.ts

@@ -0,0 +1,173 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+  linkIcon,
+} from "./common";
+import OrganizerScheduledEmail from "./organizer-scheduled-email";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class OrganizerRequestEmail extends OrganizerScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    const toAddresses = [this.calEvent.organizer.email];
+    if (this.calEvent.team) {
+      this.calEvent.team.members.forEach((member) => {
+        const memberAttendee = this.calEvent.attendees.find((attendee) => attendee.name === member);
+        if (memberAttendee) {
+          toAddresses.push(memberAttendee.email);
+        }
+      });
+    }
+
+    return {
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      to: toAddresses.join(","),
+      subject: `${this.calEvent.organizer.language.translate("event_awaiting_approval_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+        date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("MMMM").toLowerCase()
+        )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.organizer.language.translate("event_awaiting_approval")}
+${this.calEvent.organizer.language.translate("someone_requested_an_event")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+${this.calEvent.organizer.language.translate("confirm_or_reject_request")}
+${process.env.BASE_URL} + "/bookings/upcoming"
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.organizer.language.translate("event_awaiting_approval_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.attendees[0].name,
+      date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("MMMM").toLowerCase()
+      )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("calendarCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.calEvent.organizer.language.translate("event_awaiting_approval"),
+          this.calEvent.organizer.language.translate("someone_requested_an_event")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                              <tr>
+                                <td align="center" bgcolor="#292929" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#292929;" valign="middle">
+                                  <p style="display:inline-block;background:#292929;color:#ffffff;font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;">
+                                    ${this.getManageLink()}
+                                  </p>
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"></div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getManageLink(): string {
+    const manageText = this.calEvent.organizer.language.translate("confirm_or_reject_request");
+    const manageLink = process.env.BASE_URL + "/bookings/upcoming";
+    return `<a style="color: #FFFFFF; text-decoration: none;" href="${manageLink}" target="_blank">${manageText} <img src="${linkIcon()}" width="12px"></img></a>`;
+  }
+}

packages/lib/emails/templates/organizer-request-reminder-email.ts

@@ -0,0 +1,172 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+  linkIcon,
+} from "./common";
+import OrganizerScheduledEmail from "./organizer-scheduled-email";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class OrganizerRequestReminderEmail extends OrganizerScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    const toAddresses = [this.calEvent.organizer.email];
+    if (this.calEvent.team) {
+      this.calEvent.team.members.forEach((member) => {
+        const memberAttendee = this.calEvent.attendees.find((attendee) => attendee.name === member);
+        if (memberAttendee) {
+          toAddresses.push(memberAttendee.email);
+        }
+      });
+    }
+
+    return {
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      to: toAddresses.join(","),
+      subject: `${this.calEvent.organizer.language.translate("event_awaiting_approval_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+        date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("MMMM").toLowerCase()
+        )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.organizer.language.translate("event_still_awaiting_approval")}
+${this.calEvent.organizer.language.translate("someone_requested_an_event")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+${this.calEvent.organizer.language.translate("confirm_or_reject_request")}
+${process.env.BASE_URL} + "/bookings/upcoming"
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.organizer.language.translate("event_awaiting_approval_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.attendees[0].name,
+      date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("MMMM").toLowerCase()
+      )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("calendarCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.calEvent.organizer.language.translate("event_still_awaiting_approval"),
+          this.calEvent.organizer.language.translate("someone_requested_an_event")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                              <tr>
+                                <td align="center" bgcolor="#292929" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#292929;" valign="middle">
+                                  <p style="display:inline-block;background:#292929;color:#ffffff;font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;">
+                                    ${this.getManageLink()}
+                                  </p>
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;"></div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getManageLink(): string {
+    const manageText = this.calEvent.organizer.language.translate("confirm_or_reject_request");
+    const manageLink = process.env.BASE_URL + "/bookings/upcoming";
+    return `<a style="color: #FFFFFF; text-decoration: none;" href="${manageLink}" target="_blank">${manageText} <img src="${linkIcon()}" width="12px"></img></a>`;
+  }
+}

packages/lib/emails/templates/organizer-rescheduled-email.ts

@@ -0,0 +1,160 @@
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
+import { getCancelLink } from "@calcom/lib/CalEventParser";
+
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+} from "./common";
+import OrganizerScheduledEmail from "./organizer-scheduled-email";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class OrganizerRescheduledEmail extends OrganizerScheduledEmail {
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    const toAddresses = [this.calEvent.organizer.email];
+    if (this.calEvent.team) {
+      this.calEvent.team.members.forEach((member) => {
+        const memberAttendee = this.calEvent.attendees.find((attendee) => attendee.name === member);
+        if (memberAttendee) {
+          toAddresses.push(memberAttendee.email);
+        }
+      });
+    }
+
+    return {
+      icalEvent: {
+        filename: "event.ics",
+        content: this.getiCalEventAsString(),
+      },
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      to: toAddresses.join(","),
+      subject: `${this.calEvent.organizer.language.translate("rescheduled_event_type_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+        date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("MMMM").toLowerCase()
+        )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.organizer.language.translate("event_has_been_rescheduled")}
+${this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")}
+${this.getWhat()}
+${this.getWhen()}
+${this.getLocation()}
+${this.getAdditionalNotes()}
+${this.calEvent.organizer.language.translate("need_to_reschedule_or_cancel")}
+${getCancelLink(this.calEvent)}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.organizer.language.translate("rescheduled_event_type_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.attendees[0].name,
+      date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("MMMM").toLowerCase()
+      )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("calendarCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.calEvent.organizer.language.translate("event_has_been_rescheduled"),
+          this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:0px;text-align:left;color:#3E3E3E;">
+                              ${this.getManageLink()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+}

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

@@ -0,0 +1,390 @@
+import dayjs, { Dayjs } from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+import { createEvent, DateArray, Person } from "ics";
+import nodemailer from "nodemailer";
+
+import { getCancelLink, getRichDescription } from "@calcom/lib/CalEventParser";
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { getIntegrationName } from "@calcom/lib/integrations";
+import { CalendarEvent } from "@calcom/lib/integrations/calendar/interfaces/Calendar";
+import { serverConfig } from "@calcom/lib/serverConfig";
+
+import {
+  emailHead,
+  emailSchedulingBodyHeader,
+  emailBodyLogo,
+  emailScheduledBodyHeaderContent,
+  emailSchedulingBodyDivider,
+  linkIcon,
+} from "./common";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
+dayjs.extend(toArray);
+
+export default class OrganizerScheduledEmail {
+  calEvent: CalendarEvent;
+
+  constructor(calEvent: CalendarEvent) {
+    this.calEvent = calEvent;
+  }
+
+  public sendEmail() {
+    new Promise((resolve, reject) =>
+      nodemailer
+        .createTransport(this.getMailerOptions().transport)
+        .sendMail(this.getNodeMailerPayload(), (_err, info) => {
+          if (_err) {
+            const err = getErrorFromUnknown(_err);
+            this.printNodeMailerError(err);
+            reject(err);
+          } else {
+            resolve(info);
+          }
+        })
+    ).catch((e) => console.error("sendEmail", e));
+    return new Promise((resolve) => resolve("send mail async"));
+  }
+
+  protected getiCalEventAsString(): string | undefined {
+    const icsEvent = createEvent({
+      start: dayjs(this.calEvent.startTime)
+        .utc()
+        .toArray()
+        .slice(0, 6)
+        .map((v, i) => (i === 1 ? v + 1 : v)) as DateArray,
+      startInputType: "utc",
+      productId: "calendso/ics",
+      title: this.calEvent.organizer.language.translate("ics_event_title", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+      }),
+      description: this.getTextBody(),
+      duration: { minutes: dayjs(this.calEvent.endTime).diff(dayjs(this.calEvent.startTime), "minute") },
+      organizer: { name: this.calEvent.organizer.name, email: this.calEvent.organizer.email },
+      attendees: this.calEvent.attendees.map((attendee: Person) => ({
+        name: attendee.name,
+        email: attendee.email,
+      })),
+      status: "CONFIRMED",
+    });
+    if (icsEvent.error) {
+      throw icsEvent.error;
+    }
+    return icsEvent.value;
+  }
+
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    const toAddresses = [this.calEvent.organizer.email];
+    if (this.calEvent.team) {
+      this.calEvent.team.members.forEach((member) => {
+        const memberAttendee = this.calEvent.attendees.find((attendee) => attendee.name === member);
+        if (memberAttendee) {
+          toAddresses.push(memberAttendee.email);
+        }
+      });
+    }
+
+    return {
+      icalEvent: {
+        filename: "event.ics",
+        content: this.getiCalEventAsString(),
+      },
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      to: toAddresses.join(","),
+      subject: `${this.calEvent.organizer.language.translate("confirmed_event_type_subject", {
+        eventType: this.calEvent.type,
+        name: this.calEvent.attendees[0].name,
+        date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+          "h:mma"
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("dddd").toLowerCase()
+        )}, ${this.calEvent.organizer.language.translate(
+          this.getOrganizerStart().format("MMMM").toLowerCase()
+        )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+      })}`,
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected getMailerOptions() {
+    return {
+      transport: serverConfig.transport,
+      from: serverConfig.from,
+    };
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.calEvent.organizer.language.translate("new_event_scheduled")}
+${this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")}
+
+${getRichDescription(this.calEvent)}
+`.trim();
+  }
+
+  protected printNodeMailerError(error: Error): void {
+    console.error("SEND_BOOKING_CONFIRMATION_ERROR", this.calEvent.organizer.email, error);
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.calEvent.organizer.language.translate("confirmed_event_type_subject", {
+      eventType: this.calEvent.type,
+      name: this.calEvent.attendees[0].name,
+      date: `${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+        "h:mma"
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("MMMM").toLowerCase()
+      )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format("YYYY")}`,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailSchedulingBodyHeader("checkCircle")}
+        ${emailScheduledBodyHeaderContent(
+          this.calEvent.organizer.language.translate("new_event_scheduled"),
+          this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")
+        )}
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              ${this.getWhat()}
+                              ${this.getWhen()}
+                              ${this.getWho()}
+                              ${this.getLocation()}
+                              ${this.getAdditionalNotes()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailSchedulingBodyDivider()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:0px;text-align:left;color:#3E3E3E;">
+                              ${this.getManageLink()}
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+
+  protected getManageLink(): string {
+    const manageText = this.calEvent.organizer.language.translate("manage_this_event");
+    return `<p>${this.calEvent.organizer.language.translate(
+      "need_to_reschedule_or_cancel"
+    )}</p><p style="font-weight: 400; line-height: 24px;"><a href="${getCancelLink(
+      this.calEvent
+    )}" style="color: #3E3E3E;" alt="${manageText}">${manageText}</a></p>`;
+  }
+
+  protected getWhat(): string {
+    return `
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.organizer.language.translate("what")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.type}</p>
+    </div>`;
+  }
+
+  protected getWhen(): string {
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.organizer.language.translate("when")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">
+      ${this.calEvent.organizer.language.translate(
+        this.getOrganizerStart().format("dddd").toLowerCase()
+      )}, ${this.calEvent.organizer.language.translate(
+      this.getOrganizerStart().format("MMMM").toLowerCase()
+    )} ${this.getOrganizerStart().format("D")}, ${this.getOrganizerStart().format(
+      "YYYY"
+    )} | ${this.getOrganizerStart().format("h:mma")} - ${this.getOrganizerEnd().format(
+      "h:mma"
+    )} <span style="color: #888888">(${this.getTimezone()})</span>
+      </p>
+    </div>`;
+  }
+
+  protected getWho(): string {
+    const attendees = this.calEvent.attendees
+      .map((attendee) => {
+        return `<div style="color: #494949; font-weight: 400; line-height: 24px;">${
+          attendee?.name || `${this.calEvent.organizer.language.translate("guest")}`
+        } <span style="color: #888888"><a href="mailto:${attendee.email}" style="color: #888888;">${
+          attendee.email
+        }</a></span></div>`;
+      })
+      .join("");
+
+    const organizer = `<div style="color: #494949; font-weight: 400; line-height: 24px;">${
+      this.calEvent.organizer.name
+    } - ${this.calEvent.organizer.language.translate(
+      "organizer"
+    )} <span style="color: #888888"><a href="mailto:${
+      this.calEvent.organizer.email
+    }" style="color: #888888;">${this.calEvent.organizer.email}</a></span></div>`;
+
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.organizer.language.translate("who")}</p>
+      ${organizer + attendees}
+    </div>`;
+  }
+
+  protected getAdditionalNotes(): string {
+    if (!this.calEvent.description) return "";
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.organizer.language.translate("additional_notes")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px; white-space: pre-wrap;">${
+        this.calEvent.description
+      }</p>
+    </div>
+    `;
+  }
+
+  protected getLocation(): string {
+    let providerName = this.calEvent.location ? getIntegrationName(this.calEvent.location) : "";
+
+    if (this.calEvent.location && this.calEvent.location.includes("integrations:")) {
+      const location = this.calEvent.location.split(":")[1];
+      providerName = location[0].toUpperCase() + location.slice(1);
+    }
+
+    if (this.calEvent.videoCallData) {
+      const meetingId = this.calEvent.videoCallData.id;
+      const meetingPassword = this.calEvent.videoCallData.password;
+      const meetingUrl = this.calEvent.videoCallData.url;
+
+      return `
+      <p style="height: 6px"></p>
+      <div style="line-height: 6px;">
+        <p style="color: #494949;">${this.calEvent.organizer.language.translate("where")}</p>
+        <p style="color: #494949; font-weight: 400; line-height: 24px;">${providerName} ${
+        meetingUrl &&
+        `<a href="${meetingUrl}" target="_blank" alt="${this.calEvent.organizer.language.translate(
+          "meeting_url"
+        )}"><img src="${linkIcon()}" width="12px"></img></a>`
+      }</p>
+        ${
+          meetingId &&
+          `<div style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.organizer.language.translate(
+            "meeting_id"
+          )}: <span>${meetingId}</span></div>`
+        }
+        ${
+          meetingPassword &&
+          `<div style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.organizer.language.translate(
+            "meeting_password"
+          )}: <span>${meetingPassword}</span></div>`
+        }
+        ${
+          meetingUrl &&
+          `<div style="color: #494949; font-weight: 400; line-height: 24px;">${this.calEvent.organizer.language.translate(
+            "meeting_url"
+          )}: <a href="${meetingUrl}" alt="${this.calEvent.organizer.language.translate(
+            "meeting_url"
+          )}" style="color: #3E3E3E" target="_blank">${meetingUrl}</a></div>`
+        }
+      </div>
+      `;
+    }
+
+    if (this.calEvent.additionInformation?.hangoutLink) {
+      const hangoutLink: string = this.calEvent.additionInformation.hangoutLink;
+
+      return `
+      <p style="height: 6px"></p>
+      <div style="line-height: 6px;">
+        <p style="color: #494949;">${this.calEvent.organizer.language.translate("where")}</p>
+        <p style="color: #494949; font-weight: 400; line-height: 24px;">${providerName} ${
+        hangoutLink &&
+        `<a href="${hangoutLink}" target="_blank" alt="${this.calEvent.organizer.language.translate(
+          "meeting_url"
+        )}"><img src="${linkIcon()}" width="12px"></img></a>`
+      }</p>
+        <div style="color: #494949; font-weight: 400; line-height: 24px;"><a href="${hangoutLink}" alt="${this.calEvent.organizer.language.translate(
+        "meeting_url"
+      )}" style="color: #3E3E3E" target="_blank">${hangoutLink}</a></div>
+      </div>
+      `;
+    }
+
+    return `
+    <p style="height: 6px"></p>
+    <div style="line-height: 6px;">
+      <p style="color: #494949;">${this.calEvent.organizer.language.translate("where")}</p>
+      <p style="color: #494949; font-weight: 400; line-height: 24px;">${
+        providerName || this.calEvent.location
+      }</p>
+    </div>
+    `;
+  }
+
+  protected getTimezone(): string {
+    return this.calEvent.organizer.timeZone;
+  }
+
+  protected getOrganizerStart(): Dayjs {
+    return dayjs(this.calEvent.startTime).tz(this.getTimezone());
+  }
+
+  protected getOrganizerEnd(): Dayjs {
+    return dayjs(this.calEvent.endTime).tz(this.getTimezone());
+  }
+}

packages/lib/emails/templates/team-invite-email.ts

@@ -0,0 +1,207 @@
+import { TFunction } from "next-i18next";
+import nodemailer from "nodemailer";
+
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { serverConfig } from "@calcom/lib/serverConfig";
+
+import { emailHead, linkIcon, emailBodyLogo } from "./common";
+
+export type TeamInvite = {
+  language: TFunction;
+  from: string;
+  to: string;
+  teamName: string;
+  joinLink: string;
+};
+
+export default class TeamInviteEmail {
+  teamInviteEvent: TeamInvite;
+
+  constructor(teamInviteEvent: TeamInvite) {
+    this.teamInviteEvent = teamInviteEvent;
+  }
+
+  public sendEmail() {
+    new Promise((resolve, reject) =>
+      nodemailer
+        .createTransport(this.getMailerOptions().transport)
+        .sendMail(this.getNodeMailerPayload(), (_err, info) => {
+          if (_err) {
+            const err = getErrorFromUnknown(_err);
+            this.printNodeMailerError(err);
+            reject(err);
+          } else {
+            resolve(info);
+          }
+        })
+    ).catch((e) => console.error("sendEmail", e));
+    return new Promise((resolve) => resolve("send mail async"));
+  }
+
+  protected getMailerOptions() {
+    return {
+      transport: serverConfig.transport,
+      from: serverConfig.from,
+    };
+  }
+
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      to: this.teamInviteEvent.to,
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      subject: this.teamInviteEvent.language("user_invited_you", {
+        user: this.teamInviteEvent.from,
+        team: this.teamInviteEvent.teamName,
+      }),
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected printNodeMailerError(error: Error): void {
+    console.error("SEND_TEAM_INVITE_EMAIL_ERROR", this.teamInviteEvent.to, error);
+  }
+
+  protected getTextBody(): string {
+    return "";
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.teamInviteEvent.language("user_invited_you", {
+      user: this.teamInviteEvent.from,
+      team: this.teamInviteEvent.teamName,
+    });
+
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+            <tbody>
+              <tr>
+                <td style="direction:ltr;font-size:0px;padding:0px;padding-top:40px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;border-top:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:30px 20px 0 20px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              <div style="line-height: 6px;">
+                                <p>${this.teamInviteEvent.language("user_invited_you", {
+                                  user: this.teamInviteEvent.from,
+                                  team: this.teamInviteEvent.teamName,
+                                })}!</p>
+                                <p style="font-weight: 400; line-height: 24px;">${this.teamInviteEvent.language(
+                                  "calcom_explained"
+                                )}</p>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="left" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                              <tr>
+                                <td align="center" bgcolor="#292929" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#292929;" valign="middle">
+                                  <p style="display:inline-block;background:#292929;color:#292929;font-family:Roboto, Helvetica, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;">
+                                    <a href="${
+                                      this.teamInviteEvent.joinLink
+                                    }" target="_blank" style="color: #FFFFFF; text-decoration: none">${this.teamInviteEvent.language(
+      "accept_invitation"
+    )} <img src="${linkIcon()}" width="12px"></img></a>
+                                  </p>
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              <div style="line-height: 6px;">
+                                <p style="font-weight: 400; line-height: 24px;">${this.teamInviteEvent.language(
+                                  "have_any_questions"
+                                )} <a href="mailto:support@cal.com" style="color: #3E3E3E" target="_blank">${this.teamInviteEvent.language(
+      "contact_our_support_team"
+    )}</a></p>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+}

packages/lib/emails/templates/verification-login-email.ts

@@ -0,0 +1,217 @@
+import { TFunction } from "next-i18next";
+import nodemailer from "nodemailer";
+
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+import { serverConfig } from "@calcom/lib/serverConfig";
+
+import { emailHead, linkIcon, emailBodyLogo } from "./common";
+
+export type PasswordReset = {
+  language: TFunction;
+  user: {
+    name?: string | null;
+    email: string;
+  };
+  resetLink: string;
+};
+
+export const PASSWORD_RESET_EXPIRY_HOURS = 6;
+
+export default class ForgotPasswordEmail {
+  passwordEvent: PasswordReset;
+
+  constructor(passwordEvent: PasswordReset) {
+    this.passwordEvent = passwordEvent;
+  }
+
+  public sendEmail() {
+    new Promise((resolve, reject) =>
+      nodemailer
+        .createTransport(this.getMailerOptions().transport)
+        .sendMail(this.getNodeMailerPayload(), (_err, info) => {
+          if (_err) {
+            const err = getErrorFromUnknown(_err);
+            this.printNodeMailerError(err);
+            reject(err);
+          } else {
+            resolve(info);
+          }
+        })
+    ).catch((e) => console.error("sendEmail", e));
+    return new Promise((resolve) => resolve("send mail async"));
+  }
+
+  protected getMailerOptions() {
+    return {
+      transport: serverConfig.transport,
+      from: serverConfig.from,
+    };
+  }
+
+  protected getNodeMailerPayload(): Record<string, unknown> {
+    return {
+      to: `${this.passwordEvent.user.name} <${this.passwordEvent.user.email}>`,
+      from: `Cal.com <${this.getMailerOptions().from}>`,
+      subject: this.passwordEvent.language("reset_password_subject"),
+      html: this.getHtmlBody(),
+      text: this.getTextBody(),
+    };
+  }
+
+  protected printNodeMailerError(error: Error): void {
+    console.error("SEND_PASSWORD_RESET_EMAIL_ERROR", this.passwordEvent.user.email, error);
+  }
+
+  protected getTextBody(): string {
+    return `
+${this.passwordEvent.language("reset_password_subject")}
+${this.passwordEvent.language("hi_user_name", { user: this.passwordEvent.user.name })},
+${this.passwordEvent.language("someone_requested_password_reset")}
+${this.passwordEvent.language("change_password")}: ${this.passwordEvent.resetLink}
+${this.passwordEvent.language("password_reset_instructions")}
+${this.passwordEvent.language("have_any_questions")} ${this.passwordEvent.language(
+      "contact_our_support_team"
+    )}
+`.replace(/(<([^>]+)>)/gi, "");
+  }
+
+  protected getHtmlBody(): string {
+    const headerContent = this.passwordEvent.language("reset_password_subject");
+    return `
+    <!doctype html>
+    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
+    ${emailHead(headerContent)}
+    <body style="word-spacing:normal;background-color:#F5F5F5;">
+      <div style="background-color:#F5F5F5;">
+        ${emailBodyLogo()}
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
+            <tbody>
+              <tr>
+                <td style="direction:ltr;font-size:0px;padding:0px;padding-top:40px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;border-top:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:30px 20px 0 20px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              <div style="line-height: 6px;">
+                                <p>${this.passwordEvent.language("hi_user_name", {
+                                  user: this.passwordEvent.user.name,
+                                })},</p>
+                                <p style="font-weight: 400; line-height: 24px;">${this.passwordEvent.language(
+                                  "someone_requested_password_reset"
+                                )}</p>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td align="left" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;line-height:100%;">
+                              <tr>
+                                <td align="center" bgcolor="#292929" role="presentation" style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#292929;" valign="middle">
+                                  <p style="display:inline-block;background:#292929;color:#292929;font-family:Roboto, Helvetica, sans-serif;font-size:13px;font-weight:normal;line-height:120%;margin:0;text-decoration:none;text-transform:none;padding:10px 25px;mso-padding-alt:0px;border-radius:3px;">
+                                    <a href="${
+                                      this.passwordEvent.resetLink
+                                    }" target="_blank" style="color: #FFFFFF; text-decoration: none">${this.passwordEvent.language(
+      "change_password"
+    )} <img src="${linkIcon()}" width="12px"></img></a>
+                                  </p>
+                                </td>
+                              </tr>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
+                  <div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
+                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
+                            <div style="font-family:Roboto, Helvetica, sans-serif;font-size:16px;font-weight:500;line-height:1;text-align:left;color:#3E3E3E;">
+                              <div style="line-height: 6px;">
+                                <p style="font-weight: 400; line-height: 24px;">${this.passwordEvent.language(
+                                  "password_reset_instructions"
+                                )}</p>
+                              </div>
+                              <p style="height: 6px"></p>
+                              <div style="line-height: 6px;">
+                                <p style="font-weight: 400; line-height: 24px;">${this.passwordEvent.language(
+                                  "have_any_questions"
+                                )} <a href="mailto:support@cal.com" style="color: #3E3E3E" target="_blank">${this.passwordEvent.language(
+      "contact_our_support_team"
+    )}</a></p>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                  <!--[if mso | IE]></td></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
+        <div style="background:#FFFFFF;background-color:#FFFFFF;margin:0px auto;max-width:600px;">
+          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#FFFFFF;background-color:#FFFFFF;width:100%;">
+            <tbody>
+              <tr>
+                <td style="border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;direction:ltr;font-size:0px;padding:0px;text-align:center;">
+                  <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr></tr></table><![endif]-->
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <!--[if mso | IE]></td></tr></table><![endif]-->
+      </div>
+    </body>
+    </html>
+    `;
+  }
+}

packages/lib/env.ts

@@ -0,0 +1,2 @@
+export const isENVProd = process.env.NODE_ENV === "production";
+export const isENVDev = process.env.NODE_ENV === "development";

packages/lib/errors.ts

@@ -0,0 +1,11 @@
+export function getErrorFromUnknown(cause: unknown): Error & { statusCode?: number; code?: string } {
+  if (cause instanceof Error) {
+    return cause;
+  }
+  if (typeof cause === "string") {
+    // @ts-expect-error https://github.com/tc39/proposal-error-cause
+    return new Error(cause, { cause });
+  }
+
+  return new Error(`Unhandled error of type '${typeof cause}''`);
+}

packages/lib/integrations.ts

@@ -0,0 +1,34 @@
+export function getIntegrationName(name: string) {
+  switch (name) {
+    case "google_calendar":
+      return "Google Calendar";
+    case "office365_calendar":
+      return "Office 365 Calendar";
+    case "zoom_video":
+      return "Zoom";
+    case "caldav_calendar":
+      return "CalDav Server";
+    case "stripe_payment":
+      return "Stripe";
+    case "apple_calendar":
+      return "Apple Calendar";
+    case "daily_video":
+      return "Daily";
+    case "jitsi_video":
+      return "Jitsi Meet";
+    case "huddle01_video":
+      return "Huddle01";
+    case "tandem_video":
+      return "Tandem";
+  }
+}
+
+export function getIntegrationType(name: string): string {
+  if (name.endsWith("_calendar")) {
+    return "Calendar";
+  }
+  if (name.endsWith("_payment")) {
+    return "Payment";
+  }
+  return "Unknown";
+}

packages/lib/integrations/calendar/constants/formats.ts

@@ -0,0 +1 @@
+export const TIMEZONE_FORMAT = "YYYY-MM-DDTHH:mm:ss[Z]";

packages/lib/integrations/calendar/constants/generals.ts

@@ -0,0 +1,10 @@
+export const CALDAV_CALENDAR_TYPE = "caldav";
+
+export const APPLE_CALENDAR_URL = "https://caldav.icloud.com";
+
+export const CALENDAR_INTEGRATIONS_TYPES = {
+  apple: "apple_calendar",
+  caldav: "caldav_calendar",
+  google: "google_calendar",
+  office365: "office365_calendar",
+};

packages/lib/integrations/calendar/constants/types.ts

@@ -0,0 +1,57 @@
+import dayjs from "dayjs";
+import ICAL from "ical.js";
+
+import AppleCalendarService from "../services/AppleCalendarService";
+import CalDavCalendarService from "../services/CalDavCalendarService";
+import GoogleCalendarService from "../services/GoogleCalendarService";
+import Office365CalendarService from "../services/Office365CalendarService";
+
+export type EventBusyDate = Record<"start" | "end", Date | string>;
+
+export type CalendarServiceType =
+  | typeof AppleCalendarService
+  | typeof CalDavCalendarService
+  | typeof GoogleCalendarService
+  | typeof Office365CalendarService;
+
+export type NewCalendarEventType = {
+  uid: string;
+  id: string;
+  type: string;
+  password: string;
+  url: string;
+  additionalInfo: Record<string, any>;
+};
+
+export type CalendarEventType = {
+  uid: string;
+  etag: string;
+  /** This is the actual caldav event url, not the location url. */
+  url: string;
+  summary: string;
+  description: string;
+  location: string;
+  sequence: number;
+  startDate: Date | dayjs.Dayjs;
+  endDate: Date | dayjs.Dayjs;
+  duration: {
+    weeks: number;
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    isNegative: boolean;
+  };
+  organizer: string;
+  attendees: any[][];
+  recurrenceId: ICAL.Time;
+  timezone: any;
+};
+
+export type BatchResponse = {
+  responses: SubResponse[];
+};
+
+export type SubResponse = {
+  body: { value: { start: { dateTime: string }; end: { dateTime: string } }[] };
+};

packages/lib/integrations/calendar/interfaces/Calendar.ts

@@ -0,0 +1,80 @@
+import { DestinationCalendar, SelectedCalendar } from "@prisma/client";
+import { TFunction } from "next-i18next";
+
+import { PaymentInfo } from "@calcom/web/ee/lib/stripe/server";
+import type { Event } from "@calcom/web/lib/events/EventManager";
+import { Ensure } from "@calcom/web/lib/types/utils";
+import { VideoCallData } from "@calcom/web/lib/videoClient";
+
+import { NewCalendarEventType } from "../constants/types";
+import { ConferenceData } from "./GoogleCalendar";
+
+export type Person = {
+  name: string;
+  email: string;
+  timeZone: string;
+  language: { translate: TFunction; locale: string };
+};
+
+export interface EntryPoint {
+  entryPointType?: string;
+  uri?: string;
+  label?: string;
+  pin?: string;
+  accessCode?: string;
+  meetingCode?: string;
+  passcode?: string;
+  password?: string;
+}
+
+export interface AdditionInformation {
+  conferenceData?: ConferenceData;
+  entryPoints?: EntryPoint[];
+  hangoutLink?: string;
+}
+
+export interface CalendarEvent {
+  type: string;
+  title: string;
+  startTime: string;
+  endTime: string;
+  description?: string | null;
+  team?: {
+    name: string;
+    members: string[];
+  };
+  location?: string | null;
+  organizer: Person;
+  attendees: Person[];
+  conferenceData?: ConferenceData;
+  additionInformation?: AdditionInformation;
+  uid?: string | null;
+  videoCallData?: VideoCallData;
+  paymentInfo?: PaymentInfo | null;
+  destinationCalendar?: DestinationCalendar | null;
+  cancellationReason?: string | null;
+  rejectionReason?: string | null;
+}
+
+export interface IntegrationCalendar extends Ensure<Partial<SelectedCalendar>, "externalId"> {
+  primary?: boolean;
+  name?: string;
+}
+
+type EventBusyDate = Record<"start" | "end", Date | string>;
+
+export interface Calendar {
+  createEvent(event: CalendarEvent): Promise<NewCalendarEventType>;
+
+  updateEvent(uid: string, event: CalendarEvent): Promise<Event | Event[]>;
+
+  deleteEvent(uid: string, event: CalendarEvent): Promise<unknown>;
+
+  getAvailability(
+    dateFrom: string,
+    dateTo: string,
+    selectedCalendars: IntegrationCalendar[]
+  ): Promise<EventBusyDate[]>;
+
+  listCalendars(event?: CalendarEvent): Promise<IntegrationCalendar[]>;
+}

packages/lib/integrations/calendar/interfaces/GoogleCalendar.ts

@@ -0,0 +1,5 @@
+import { calendar_v3 } from "googleapis";
+
+export interface ConferenceData {
+  createRequest?: calendar_v3.Schema$CreateConferenceRequest;
+}

packages/lib/integrations/calendar/interfaces/Office365Calendar.ts

@@ -0,0 +1,10 @@
+export type BufferedBusyTime = {
+  start: string;
+  end: string;
+};
+
+export type O365AuthCredentials = {
+  expiry_date: number;
+  access_token: string;
+  refresh_token: string;
+};

packages/lib/integrations/calendar/utils/CalendarUtils.ts

@@ -0,0 +1,16 @@
+import dayjs from "dayjs";
+import { Attendee, DateArray, DurationObject, Person } from "ics";
+
+export const convertDate = (date: string): DateArray =>
+  dayjs(date)
+    .utc()
+    .toArray()
+    .slice(0, 6)
+    .map((v, i) => (i === 1 ? v + 1 : v)) as DateArray;
+
+export const getDuration = (start: string, end: string): DurationObject => ({
+  minutes: dayjs(end).diff(dayjs(start), "minute"),
+});
+
+export const getAttendees = (attendees: Person[]): Attendee[] =>
+  attendees.map(({ email, name }) => ({ name, email, partstat: "NEEDS-ACTION" }));

packages/lib/integrations/getIntegrations.ts

@@ -0,0 +1,164 @@
+import { Prisma } from "@prisma/client";
+import _ from "lodash";
+
+import { validJson } from "@calcom/web/lib/jsonUtils";
+
+const credentialData = Prisma.validator<Prisma.CredentialArgs>()({
+  select: { id: true, type: true },
+});
+
+type CredentialData = Prisma.CredentialGetPayload<typeof credentialData>;
+
+export type Integration = {
+  installed: boolean;
+  type:
+    | "google_calendar"
+    | "office365_calendar"
+    | "zoom_video"
+    | "daily_video"
+    | "tandem_video"
+    | "caldav_calendar"
+    | "apple_calendar"
+    | "stripe_payment"
+    | "jitsi_video"
+    | "huddle01_video"
+    | "metamask_web3";
+  title: string;
+  imageSrc: string;
+  description: string;
+  variant: "calendar" | "conferencing" | "payment" | "web3";
+};
+
+export const ALL_INTEGRATIONS = [
+  {
+    installed: !!(process.env.GOOGLE_API_CREDENTIALS && validJson(process.env.GOOGLE_API_CREDENTIALS)),
+    type: "google_calendar",
+    title: "Google Calendar",
+    imageSrc: "integrations/google-calendar.svg",
+    description: "For personal and business calendars",
+    variant: "calendar",
+  },
+  {
+    installed: !!(process.env.MS_GRAPH_CLIENT_ID && process.env.MS_GRAPH_CLIENT_SECRET),
+    type: "office365_calendar",
+    title: "Office 365 / Outlook.com Calendar",
+    imageSrc: "integrations/outlook.svg",
+    description: "For personal and business calendars",
+    variant: "calendar",
+  },
+  {
+    installed: !!(process.env.ZOOM_CLIENT_ID && process.env.ZOOM_CLIENT_SECRET),
+    type: "zoom_video",
+    title: "Zoom",
+    imageSrc: "integrations/zoom.svg",
+    description: "Video Conferencing",
+    variant: "conferencing",
+  },
+  {
+    installed: !!process.env.DAILY_API_KEY,
+    type: "daily_video",
+    title: "Daily.co Video",
+    imageSrc: "integrations/daily.svg",
+    description: "Video Conferencing",
+    variant: "conferencing",
+  },
+  {
+    installed: true,
+    type: "jitsi_video",
+    title: "Jitsi Meet",
+    imageSrc: "integrations/jitsi.svg",
+    description: "Video Conferencing",
+    variant: "conferencing",
+  },
+  {
+    installed: true,
+    type: "huddle01_video",
+    title: "Huddle01",
+    imageSrc: "integrations/huddle.svg",
+    description: "Video Conferencing",
+    variant: "conferencing",
+  },
+  {
+    installed: !!(process.env.TANDEM_CLIENT_ID && process.env.TANDEM_CLIENT_SECRET),
+    type: "tandem_video",
+    title: "Tandem Video",
+    imageSrc: "integrations/tandem.svg",
+    description: "Virtual Office | Video Conferencing",
+    variant: "conferencing",
+  },
+  {
+    installed: true,
+    type: "caldav_calendar",
+    title: "CalDav Server",
+    imageSrc: "integrations/caldav.svg",
+    description: "For personal and business calendars",
+    variant: "calendar",
+  },
+  {
+    installed: true,
+    type: "apple_calendar",
+    title: "Apple Calendar",
+    imageSrc: "integrations/apple-calendar.svg",
+    description: "For personal and business calendars",
+    variant: "calendar",
+  },
+  {
+    installed: !!(
+      process.env.STRIPE_CLIENT_ID &&
+      process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY &&
+      process.env.STRIPE_PRIVATE_KEY
+    ),
+    type: "stripe_payment",
+    title: "Stripe",
+    imageSrc: "integrations/stripe.svg",
+    description: "Collect payments",
+    variant: "payment",
+  },
+  {
+    installed: true,
+    type: "metamask_web3",
+    title: "Metamask",
+    imageSrc: "integrations/apple-calendar.svg",
+    description: "For personal and business calendars",
+    variant: "web3",
+  },
+] as Integration[];
+
+function getIntegrations(userCredentials: CredentialData[]) {
+  const integrations = ALL_INTEGRATIONS.map((integration) => {
+    const credentials = userCredentials
+      .filter((credential) => credential.type === integration.type)
+      .map((credential) => _.pick(credential, ["id", "type"])); // ensure we don't leak `key` to frontend
+
+    const credential: typeof credentials[number] | null = credentials[0] || null;
+    return {
+      ...integration,
+      /**
+       * @deprecated use `credentials`
+       */
+      credential,
+      credentials,
+    };
+  });
+
+  return integrations;
+}
+
+export type IntegrationMeta = ReturnType<typeof getIntegrations>;
+
+export function hasIntegration(integrations: IntegrationMeta, type: string): boolean {
+  return !!integrations.find(
+    (i) =>
+      i.type === type &&
+      !!i.installed &&
+      (type === "daily_video" ||
+        type === "jitsi_video" ||
+        type === "huddle01_video" ||
+        i.credentials.length > 0)
+  );
+}
+export function hasIntegrationInstalled(type: Integration["type"]): boolean {
+  return ALL_INTEGRATIONS.some((i) => i.type === type && !!i.installed);
+}
+
+export default getIntegrations;

packages/lib/serverConfig.ts

@@ -0,0 +1,34 @@
+import SendmailTransport from "nodemailer/lib/sendmail-transport";
+import SMTPConnection from "nodemailer/lib/smtp-connection";
+
+function detectTransport(): SendmailTransport.Options | SMTPConnection.Options | string {
+  if (process.env.EMAIL_SERVER) {
+    return process.env.EMAIL_SERVER;
+  }
+
+  if (process.env.EMAIL_SERVER_HOST) {
+    const port = parseInt(process.env.EMAIL_SERVER_PORT!);
+    const transport = {
+      host: process.env.EMAIL_SERVER_HOST,
+      port,
+      auth: {
+        user: process.env.EMAIL_SERVER_USER,
+        pass: process.env.EMAIL_SERVER_PASSWORD,
+      },
+      secure: port === 465,
+    };
+
+    return transport;
+  }
+
+  return {
+    sendmail: true,
+    newline: "unix",
+    path: "/usr/sbin/sendmail",
+  };
+}
+
+export const serverConfig = {
+  transport: detectTransport(),
+  from: process.env.EMAIL_FROM,
+};

packages/prisma/migrations/20220306023650_renames_verification_request_to_verification_token/migration.sql

@@ -0,0 +1,68 @@
+/*
+  Warnings:
+
+  - You are about to drop the `VerificationRequest` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropTable
+DROP TABLE "VerificationRequest";
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+    "id" SERIAL NOT NULL,
+    "identifier" TEXT NOT NULL,
+    "token" TEXT NOT NULL,
+    "expires" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("id")
+);
+
+-- Should we instead of droping and creating rename the table (and indices if apply) if it exists instead?
+-- ALTER TABLE IF EXISTS "VerificationRequest" RENAME TO "VerificationToken";
+-- I think there's no need because we were'nt using the table anyway.
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
+
+
+-- I think this can be safely ignored from prisma migrate dev output
+-- -- RenameIndex
+-- ALTER INDEX "Booking.uid_unique" RENAME TO "Booking_uid_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "DailyEventReference_bookingId_unique" RENAME TO "DailyEventReference_bookingId_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "DestinationCalendar.bookingId_unique" RENAME TO "DestinationCalendar_bookingId_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "DestinationCalendar.eventTypeId_unique" RENAME TO "DestinationCalendar_eventTypeId_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "DestinationCalendar.userId_unique" RENAME TO "DestinationCalendar_userId_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "EventType.userId_slug_unique" RENAME TO "EventType_userId_slug_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "Payment.externalId_unique" RENAME TO "Payment_externalId_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "Payment.uid_unique" RENAME TO "Payment_uid_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "Team.slug_unique" RENAME TO "Team_slug_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "Webhook.id_unique" RENAME TO "Webhook_id_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "users.email_unique" RENAME TO "users_email_key";
+
+-- -- RenameIndex
+-- ALTER INDEX "users.username_unique" RENAME TO "users_username_key";

packages/prisma/schema.prisma

@@ -180,7 +180,7 @@ model Membership {
   @@id([userId, teamId])
 }
 
-model VerificationRequest {
+model VerificationToken {
   id         Int      @id @default(autoincrement())
   identifier String
   token      String   @unique