Update emails to profesional templates

Author: joeldevelops

packages/core/deno.json

@@ -4,10 +4,13 @@
   "tasks": {
     "dev": "deno run --env-file=../../.env -A --watch src/index.ts",
     "migrate": "deno run -A src/db/scripts/migrate.ts",
-    "build": "deno compile --allow-all --include src/db/migrations --output ./dist/core ./src/index.ts"
+    "build": "deno compile --allow-all --include src/db/migrations --output ./dist/core ./src/index.ts",
+    "email": "email dev -d src/email/templates"
   },
   "imports": {
     "@oak/oak": "jsr:@oak/oak@^17.1.4",
+    "@react-email/components": "npm:@react-email/components@^0.1.0",
+    "@react-email/render": "npm:@react-email/render@^1.1.2",
     "@sentry/deno": "npm:@sentry/deno@^9.28.1",
     "@std/assert": "jsr:@std/assert@1",
     "@std/expect": "jsr:@std/expect@^1.0.16",
@@ -18,6 +21,9 @@
     "pg": "npm:pg@^8.16.0",
     "pg-pool": "npm:pg-pool@^3.10.0",
     "djwt": "https://deno.land/x/[email protected]/mod.ts",
+    "react": "npm:react@^19.1.0",
+    "react-dom": "npm:react-dom@^19.1.0",
+    "react-email": "npm:react-email@^4.0.16",
     "resend": "npm:resend@^4.5.2",
     "stripe": "npm:stripe@^18.2.1",
     "zod": "npm:zod@^3.24.4"

packages/core/src/email/index.ts

@@ -1,17 +1,25 @@
+import type { ReactNode } from "react";
 import type {
   StripeBillingCycle,
   StripeProduct,
 } from "../db/models/workspace.ts";
 import { Resend } from "resend";
+import { render } from "@react-email/render";
 import settings from "../settings.ts";
 
+import OtpEmail from "./templates/OtpEmail.tsx";
+import WelcomeEmail from "./templates/WelcomeEmail.tsx";
+import InvitationEmail from "./templates/InvitationEmail.tsx";
+import UpgradeEmail from "./templates/UpgradeEmail.tsx";
+import DowngradeEmail from "./templates/DowngradeEmail.tsx";
+
 export type SendEmail = (options: {
   to: string[];
   cc?: string[];
   bcc?: string[];
   subject: string;
   text: string;
-  html?: string;
+  react?: ReactNode;
 }) => Promise<void>;
 
 const resend = new Resend(settings.EMAIL.RESEND_API_KEY);
@@ -22,7 +30,7 @@ const sendEmailWithResend: SendEmail = async (options: {
   bcc?: string[];
   subject: string;
   text: string;
-  html?: string;
+  react?: ReactNode;
 }) => {
   const response = await resend.emails.send({
     from: `${settings.EMAIL.FROM_EMAIL} <${settings.EMAIL.FROM_EMAIL}>`,
@@ -31,7 +39,7 @@ const sendEmailWithResend: SendEmail = async (options: {
     bcc: options.bcc,
     subject: options.subject,
     text: options.text,
-    html: options.html,
+    react: options.react,
   });
 
   if (response.error) {
@@ -46,7 +54,7 @@ const sendEmailWithConsole: SendEmail = async (options: {
   bcc?: string[];
   subject: string;
   text: string;
-  html?: string;
+  react?: ReactNode;
 }) => {
   console.info(`Sending email to ${options.to}: ${options.subject}`);
   console.info(options.text);
@@ -60,52 +68,35 @@ function getSendEmail() {
   return sendEmailWithResend;
 }
 
-export function sendOtpEmail(email: string, otp: string) {
+export async function sendOtpEmail(email: string, otp: string) {
+  const emailPlainText = await render(OtpEmail({ otp }), {
+    plainText: true,
+  });
+
   const sendEmail = getSendEmail();
   sendEmail({
     to: [email],
     subject: "Your One-Time Password (OTP)",
-    text: `Hi there,
-
-You've requested a one-time password to access your account. Please use the code below to complete your authentication:
-
-**${otp}**
-
-This code is valid for a limited time and can only be used once. For your security, please do not share this code with anyone.
-
-If you didn't request this code, please ignore this email or contact our support team if you have concerns about your account security.
-
-Best regards,
-The Team`,
+    text: emailPlainText,
+    react: OtpEmail({ otp }),
   });
 }
 
-export function sendWelcomeEmail(email: string) {
+export async function sendWelcomeEmail(email: string) {
+  const emailPlainText = await render(WelcomeEmail(), {
+    plainText: true,
+  });
+
   const sendEmail = getSendEmail();
   sendEmail({
     to: [email],
     subject: "Welcome to our platform!",
-    text: `Hi there,
-
-Welcome to our platform! We're thrilled to have you join our community.
-
-Your account has been successfully created and you're all set to get started. Here's what you can do next:
-
-• Explore the dashboard and familiarize yourself with the interface
-• Set up your profile and preferences
-• Create your first workspace or join an existing one
-• Invite team members to collaborate with you
-
-If you have any questions or need assistance getting started, our support team is here to help. Don't hesitate to reach out!
-
-We're excited to see what you'll accomplish with our platform.
-
-Best regards,
-The Team`,
+    text: emailPlainText,
+    react: WelcomeEmail(),
   });
 }
 
-export function sendInvitationEmail(
+export async function sendInvitationEmail(
   email: string,
   workspaceName: string,
   invitationUuid: string,
@@ -118,27 +109,28 @@ export function sendInvitationEmail(
 
   const invitationLink = `${returnUrl}?${searchParams.toString()}`;
 
+  const emailPlainText = await render(
+    InvitationEmail({
+      workspaceName,
+      invitationLink,
+    }),
+    {
+      plainText: true,
+    },
+  );
+
   sendEmail({
     to: [email],
     subject: `Invitation to join ${workspaceName}`,
-    text: `Hi there,
-
-You've been invited to join "${workspaceName}"!
-
-We're excited to have you as part of our team. To get started, simply click the link below to accept your invitation and set up your account:
-
-${invitationLink}
-
-This invitation link is unique to you and will expire after a certain period for security reasons. If you have any questions or need assistance, please don't hesitate to reach out to your team administrator.
-
-We look forward to collaborating with you!
-
-Best regards,
-The Team`,
+    text: emailPlainText,
+    react: InvitationEmail({
+      workspaceName,
+      invitationLink,
+    }),
   });
 }
 
-export function sendSubscriptionUpgradedEmail(
+export async function sendSubscriptionUpgradedEmail(
   payload: {
     email: string;
     workspaceName: string;
@@ -152,31 +144,23 @@ export function sendSubscriptionUpgradedEmail(
     };
   },
 ) {
+  const emailPlainText = await render(
+    UpgradeEmail(payload),
+    {
+      plainText: true,
+    },
+  );
+
   const sendEmail = getSendEmail();
   sendEmail({
     to: [payload.email],
     subject: "Subscription upgraded",
-    text: `Hi there,
-
-Your subscription for workspace "${payload.workspaceName}" has been successfully upgraded!
-
-Previous subscription: ${payload.oldSubscription.product} (${
-      payload.oldSubscription.billingCycle ?? "Custom billing cycle"
-    })
-New subscription: ${payload.newSubscription.product} (${
-      payload.newSubscription.billingCycle ?? "Custom billing cycle"
-    })
-
-This change is effective immediately, and you now have access to all the features included in your new subscription.
-
-If you have any questions about your upgraded subscription, please don't hesitate to contact our support team.
-
-Best regards,
-The Team`,
+    text: emailPlainText,
+    react: UpgradeEmail(payload),
   });
 }
 
-export function sendSubscriptionDowngradedEmail(
+export async function sendSubscriptionDowngradedEmail(
   payload: {
     email: string;
     workspaceName: string;
@@ -191,27 +175,18 @@ export function sendSubscriptionDowngradedEmail(
     newSubscriptionDate: string;
   },
 ) {
+  const emailPlainText = await render(
+    DowngradeEmail(payload),
+    {
+      plainText: true,
+    },
+  );
+
   const sendEmail = getSendEmail();
   sendEmail({
     to: [payload.email],
     subject: "Subscription downgraded",
-    text: `Hi there,
-
-Your subscription for workspace "${payload.workspaceName}" has been scheduled for downgrade.
-
-Current subscription: ${payload.oldSubscription.product} (${
-      payload.oldSubscription.billingCycle ?? "Custom billing cycle"
-    })
-New subscription: ${payload.newSubscription.product} (${
-      payload.newSubscription.billingCycle ?? "Custom billing cycle"
-    })
-Effective date: ${payload.newSubscriptionDate}
-
-Your current subscription will remain active until the end of your billing period, and the new subscription will take effect on ${payload.newSubscriptionDate}.
-
-If you have any questions, please don't hesitate to contact our support team.
-
-Best regards,
-The Team`,
+    text: emailPlainText,
+    react: DowngradeEmail(payload),
   });
 }

packages/core/src/email/templates/DowngradeEmail.tsx

@@ -0,0 +1,84 @@
+import { Heading, Section, Text } from "@react-email/components";
+import { baseTemplate } from "./base.tsx";
+import { headingStyle } from "./styles.tsx";
+import type {
+  StripeBillingCycle,
+  StripeProduct,
+} from "../../db/models/workspace.ts";
+
+type DowngradeEmailProps = {
+  email: string;
+  workspaceName: string;
+  oldSubscription: {
+    product: StripeProduct;
+    billingCycle: StripeBillingCycle | null;
+  };
+  newSubscription: {
+    product: StripeProduct;
+    billingCycle: StripeBillingCycle | null;
+  };
+  newSubscriptionDate: string;
+};
+
+const DowngradeEmail = (props: DowngradeEmailProps) => {
+  const previewText = "Confirmation of your subscription downgrade | NanoAPI";
+  return baseTemplate(
+    previewText,
+    <>
+      <Section>
+        <Heading as="h2" style={headingStyle}>
+          We are sorry to see you go
+        </Heading>
+        <Text>
+          Your subscription for workspace {props.workspaceName}{" "}
+          has been scheduled for downgrade.
+        </Text>
+      </Section>
+      <Section>
+        <Text
+          style={{ textAlign: "center", fontSize: "20px", fontWeight: "bold" }}
+        >
+          Previous subscription: {props.oldSubscription.product}{" "}
+          ({props.oldSubscription.billingCycle ?? "Custom billing cycle"})
+        </Text>
+        <Text
+          style={{ textAlign: "center", fontSize: "20px", fontWeight: "bold" }}
+        >
+          New subscription: {props.newSubscription.product}{" "}
+          ({props.newSubscription.billingCycle ?? "Custom billing cycle"})
+        </Text>
+        <Text style={{ textAlign: "center", fontWeight: "bold" }}>
+          Effective date: {props.newSubscriptionDate}
+        </Text>
+      </Section>
+      <Section>
+        <Text>
+          Your current subscription will remain active until the end of your
+          billing period, and the new subscription will take effect on{" "}
+          {props.newSubscriptionDate}.
+        </Text>
+        <Text>
+          If you have any questions, please don't hesitate to contact our
+          support team.
+        </Text>
+        <Text>Best regards - Team Nano</Text>
+      </Section>
+    </>,
+  );
+};
+
+DowngradeEmail.PreviewProps = {
+  email: "[email protected]",
+  workspaceName: "My Workspace",
+  oldSubscription: {
+    product: "Pro Plan",
+    billingCycle: "Yearly",
+  },
+  newSubscription: {
+    product: "Basic Plan",
+    billingCycle: "Monthly",
+  },
+  newSubscriptionDate: "2023-10-01",
+};
+
+export default DowngradeEmail;