fix convertion email to text + some improvements

Author: florianbgt

deno.json

@@ -18,7 +18,8 @@
     "stripe:cli": "docker run --rm -it --env-file=.env stripe/stripe-cli:latest",
     "stripe:forward": "deno task stripe:cli listen --forward-to http://host.docker.internal:4000/billing/webhook",
     "stripe:mock": "docker run --rm -it -p 12111-12112:12111-12112 stripe/stripe-mock:latest",
-    "bucket:mock": "docker run --rm -it -p 4443:4443 fsouza/fake-gcs-server:latest -scheme http -public-host localhost:4443"
+    "bucket:mock": "docker run --rm -it -p 4443:4443 fsouza/fake-gcs-server:latest -scheme http -public-host localhost:4443",
+    "email": "deno task --config ./packages/core/deno.json email"
   },
   "lint": {
     "exclude": [

packages/core/deno.json

@@ -11,13 +11,15 @@
     "@google-cloud/storage": "npm:@google-cloud/storage@^7.16.0",
     "@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",
     "@std/path": "jsr:@std/path@^1.0.9",
+    "@types/html-to-text": "npm:@types/html-to-text@^9.0.4",
     "@types/pg": "npm:@types/pg@^8.15.2",
     "@types/pg-pool": "npm:@types/pg-pool@^2.0.6",
+    "@types/react": "npm:@types/react@^19.1.8",
+    "html-to-text": "npm:html-to-text@^9.0.5",
     "kysely": "npm:kysely@^0.28.2",
     "pg": "npm:pg@^8.16.0",
     "pg-pool": "npm:pg-pool@^3.10.0",
@@ -30,6 +32,8 @@
     "zod": "npm:zod@^3.24.4"
   },
   "compilerOptions": {
-    "jsx": "react"
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "jsxImportSourceTypes": "@types/react"
   }
 }

packages/core/src/api/billing/service.ts

@@ -355,14 +355,12 @@ export class BillingService {
       .where("member.role", "=", ADMIN_ROLE)
       .execute();
 
-    for (const email of emails) {
-      await sendSubscriptionUpgradedEmail({
-        email: email.email,
-        workspaceName: workspace.name,
-        oldSubscription,
-        newSubscription,
-      });
-    }
+    await sendSubscriptionUpgradedEmail({
+      emails: emails.map((e) => e.email),
+      workspaceName: workspace.name,
+      oldSubscription,
+      newSubscription,
+    });
 
     return {};
   }
@@ -494,15 +492,13 @@ export class BillingService {
       ? currentSubscription.cancelAt.toISOString()
       : "unknown";
 
-    for (const email of emails) {
-      await sendSubscriptionDowngradedEmail({
-        email: email.email,
-        workspaceName: workspace.name,
-        oldSubscription,
-        newSubscription,
-        newSubscriptionDate,
-      });
-    }
+    await sendSubscriptionDowngradedEmail({
+      emails: emails.map((e) => e.email),
+      workspaceName: workspace.name,
+      oldSubscription,
+      newSubscription,
+      newSubscriptionDate,
+    });
 
     return {};
   }

packages/core/src/email/index.ts

@@ -1,25 +1,40 @@
-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";
+import type { ReactNode } from "react";
+import { renderToString } from "react-dom/server";
+import { convert } from "html-to-text";
+
+async function getPlainText(react: ReactNode) {
+  const emailText = await renderToString(react);
+  const plainText = convert(emailText, {
+    selectors: [
+      { selector: "img", format: "skip" },
+      { selector: "[data-skip-in-text=true]", format: "skip" },
+      {
+        selector: "a",
+        options: { linkBrackets: false },
+      },
+    ],
+  });
+  return plainText;
+}
 
 export type SendEmail = (options: {
   to: string[];
   cc?: string[];
   bcc?: string[];
   subject: string;
-  text: string;
-  react?: ReactNode;
+  react: ReactNode;
 }) => Promise<void>;
 
 const resend = new Resend(settings.EMAIL.RESEND_API_KEY);
@@ -29,16 +44,17 @@ const sendEmailWithResend: SendEmail = async (options: {
   cc?: string[];
   bcc?: string[];
   subject: string;
-  text: string;
-  react?: ReactNode;
+  react: ReactNode;
 }) => {
+  const emailPlainText = await getPlainText(options.react);
+
   const response = await resend.emails.send({
     from: `${settings.EMAIL.FROM_EMAIL} <${settings.EMAIL.FROM_EMAIL}>`,
     to: options.to,
     cc: options.cc,
     bcc: options.bcc,
     subject: options.subject,
-    text: options.text,
+    text: emailPlainText,
     react: options.react,
   });
 
@@ -47,51 +63,40 @@ const sendEmailWithResend: SendEmail = async (options: {
   }
 };
 
-// deno-lint-ignore require-await
 const sendEmailWithConsole: SendEmail = async (options: {
   to: string[];
   cc?: string[];
   bcc?: string[];
   subject: string;
-  text: string;
-  react?: ReactNode;
+  react: ReactNode;
 }) => {
+  const emailPlainText = await getPlainText(options.react);
+
   console.info(`Sending email to ${options.to}: ${options.subject}`);
-  console.info(options.text);
+  console.info(emailPlainText);
 };
 
 function getSendEmail() {
   if (settings.EMAIL.USE_CONSOLE) {
     return sendEmailWithConsole;
   }
-
   return sendEmailWithResend;
 }
 
 export async function sendOtpEmail(email: string, otp: string) {
-  const emailPlainText = await render(OtpEmail({ otp }), {
-    plainText: true,
-  });
-
   const sendEmail = getSendEmail();
-  sendEmail({
+  await sendEmail({
     to: [email],
     subject: "Your One-Time Password (OTP)",
-    text: emailPlainText,
     react: OtpEmail({ otp }),
   });
 }
 
 export async function sendWelcomeEmail(email: string) {
-  const emailPlainText = await render(WelcomeEmail(), {
-    plainText: true,
-  });
-
   const sendEmail = getSendEmail();
-  sendEmail({
+  await sendEmail({
     to: [email],
     subject: "Welcome to our platform!",
-    text: emailPlainText,
     react: WelcomeEmail(),
   });
 }
@@ -109,20 +114,9 @@ export async function sendInvitationEmail(
 
   const invitationLink = `${returnUrl}?${searchParams.toString()}`;
 
-  const emailPlainText = await render(
-    InvitationEmail({
-      workspaceName,
-      invitationLink,
-    }),
-    {
-      plainText: true,
-    },
-  );
-
-  sendEmail({
+  await sendEmail({
     to: [email],
     subject: `Invitation to join ${workspaceName}`,
-    text: emailPlainText,
     react: InvitationEmail({
       workspaceName,
       invitationLink,
@@ -132,7 +126,7 @@ export async function sendInvitationEmail(
 
 export async function sendSubscriptionUpgradedEmail(
   payload: {
-    email: string;
+    emails: string[];
     workspaceName: string;
     oldSubscription: {
       product: StripeProduct;
@@ -144,25 +138,17 @@ export async function sendSubscriptionUpgradedEmail(
     };
   },
 ) {
-  const emailPlainText = await render(
-    UpgradeEmail(payload),
-    {
-      plainText: true,
-    },
-  );
-
   const sendEmail = getSendEmail();
-  sendEmail({
-    to: [payload.email],
+  await sendEmail({
+    to: payload.emails,
     subject: "Subscription upgraded",
-    text: emailPlainText,
     react: UpgradeEmail(payload),
   });
 }
 
 export async function sendSubscriptionDowngradedEmail(
   payload: {
-    email: string;
+    emails: string[];
     workspaceName: string;
     oldSubscription: {
       product: StripeProduct;
@@ -175,18 +161,10 @@ export async function sendSubscriptionDowngradedEmail(
     newSubscriptionDate: string;
   },
 ) {
-  const emailPlainText = await render(
-    DowngradeEmail(payload),
-    {
-      plainText: true,
-    },
-  );
-
   const sendEmail = getSendEmail();
-  sendEmail({
-    to: [payload.email],
+  await sendEmail({
+    to: payload.emails,
     subject: "Subscription downgraded",
-    text: emailPlainText,
     react: DowngradeEmail(payload),
   });
 }

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

@@ -1,7 +1,3 @@
-/** @jsx React.createElement */
-/** @jsxFrag React.Fragment */
-// deno-lint-ignore verbatim-module-syntax
-import React from "react";
 import { Heading, Section, Text } from "@react-email/components";
 import { baseTemplate } from "./base.tsx";
 import { headingStyle } from "./styles.tsx";
@@ -10,8 +6,8 @@ import type {
   StripeProduct,
 } from "../../db/models/workspace.ts";
 
-type DowngradeEmailProps = {
-  email: string;
+const DowngradeEmail = (props: {
+  emails: string[];
   workspaceName: string;
   oldSubscription: {
     product: StripeProduct;
@@ -22,9 +18,7 @@ type DowngradeEmailProps = {
     billingCycle: StripeBillingCycle | null;
   };
   newSubscriptionDate: string;
-};
-
-const DowngradeEmail = (props: DowngradeEmailProps) => {
+}) => {
   const previewText = "Confirmation of your subscription downgrade | NanoAPI";
   return baseTemplate(
     previewText,
@@ -72,7 +66,7 @@ const DowngradeEmail = (props: DowngradeEmailProps) => {
 };
 
 DowngradeEmail.PreviewProps = {
-  email: "test@nanoapi.io",
+  emails: ["test@nanoapi.io"],
   workspaceName: "My Workspace",
   oldSubscription: {
     product: "Pro Plan",

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

@@ -1,27 +1,18 @@
-/** @jsx React.createElement */
-/** @jsxFrag React.Fragment */
-// deno-lint-ignore verbatim-module-syntax
-import React from "react";
 import { Button, Heading, Section, Text } from "@react-email/components";
 import { baseTemplate } from "./base.tsx";
 import { headingStyle } from "./styles.tsx";
 
-type InvitationEmailProps = {
+const InvitationEmail = (props: {
   workspaceName: string;
   invitationLink: string;
-};
-
-const InvitationEmail = ({
-  workspaceName,
-  invitationLink,
-}: InvitationEmailProps) => {
-  const previewText = `Invitation to join "${workspaceName}" on NanoAPI`;
+}) => {
+  const previewText = `Invitation to join "${props.workspaceName}" on NanoAPI`;
   return baseTemplate(
     previewText,
     <>
       <Section>
         <Heading as="h2" style={headingStyle}>
-          You have been invited to join "{workspaceName}"
+          You have been invited to join "{props.workspaceName}"
         </Heading>
         <Text>
           We're excited to have you as part of our team. To get started, simply
@@ -33,7 +24,7 @@ const InvitationEmail = ({
         style={{ display: "flex", justifyContent: "center", padding: 20 }}
       >
         <Button
-          href={invitationLink}
+          href={props.invitationLink}
           style={{
             boxSizing: "border-box",
             padding: 12,