refactor email templates to include plain text rendering (#125)

mwickett · Feb 9, 2025 · 9322961 · 9322961
1 parent 1bd7a09
commit 9322961
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@react-email/components": "^0.0.32",
     "@react-email/html": "^0.0.11",
+    "@react-email/render": "^1.0.4",
     "@react-email/section": "^0.0.16",
     "@react-email/text": "^0.0.11",
     "@sentry/nextjs": "^8.35.0",

diff --git a/src/components/email/friend-request-template.tsx b/src/components/email/friend-request-template.tsx
@@ -9,14 +9,15 @@ import {
   Button,
   Hr,
 } from "@react-email/components";
+import { render } from "@react-email/render";
 import * as React from "react";
 
 interface FriendRequestEmailProps {
   username: string;
   fromUsername: string;
 }
 
-export const FriendRequestEmail = ({
+const FriendRequestEmailTemplate = ({
   username,
   fromUsername,
 }: FriendRequestEmailProps) => {
@@ -115,3 +116,15 @@ const footer = {
   fontSize: "14px",
   lineHeight: "24px",
 };
+
+export const FriendRequestEmail = (props: FriendRequestEmailProps) => {
+  const component = <FriendRequestEmailTemplate {...props} />;
+  const text = render(component, {
+    plainText: true,
+  });
+
+  return {
+    component,
+    text,
+  };
+};
diff --git a/src/components/email/game-complete-template.tsx b/src/components/email/game-complete-template.tsx
@@ -9,6 +9,8 @@ import {
   Section,
   Heading,
 } from "@react-email/components";
+import { render } from "@react-email/render";
+import * as React from "react";
 
 interface GameCompleteEmailProps {
   username: string;
@@ -17,7 +19,7 @@ interface GameCompleteEmailProps {
   gameId: string;
 }
 
-export const GameCompleteEmail = ({
+const GameCompleteEmailTemplate = ({
   username,
   winnerUsername,
   isWinner,
@@ -47,10 +49,7 @@ export const GameCompleteEmail = ({
             <Text style={text}>
               Want to see the final scores? Check out the game details:
             </Text>
-            <Link
-              href={`${process.env.NEXT_PUBLIC_APP_URL}/games/${gameId}`}
-              style={button}
-            >
+            <Link href={`https://blitzer.fun/games/${gameId}`} style={button}>
               View Game Details
             </Link>
             <Text style={text}>
@@ -111,3 +110,15 @@ const h1 = {
   padding: "0",
   textAlign: "center" as const,
 };
+
+export const GameCompleteEmail = (props: GameCompleteEmailProps) => {
+  const component = <GameCompleteEmailTemplate {...props} />;
+  const text = render(component, {
+    plainText: true,
+  });
+
+  return {
+    component,
+    text,
+  };
+};
diff --git a/src/components/email/welcome-template.tsx b/src/components/email/welcome-template.tsx
@@ -9,14 +9,15 @@ import {
   Button,
   Hr,
 } from "@react-email/components";
+import { render } from "@react-email/render";
 import * as React from "react";
 
 interface WelcomeEmailProps {
   username: string;
 }
 
-export const WelcomeEmail = ({ username }: WelcomeEmailProps) => {
-  const previewText = `Welcome to Blitzer - Let&apos;s start scoring!`;
+const WelcomeEmailTemplate = ({ username }: WelcomeEmailProps) => {
+  const previewText = `Welcome to Blitzer - Let's start scoring!`;
 
   return (
     <Html>
@@ -42,8 +43,7 @@ export const WelcomeEmail = ({ username }: WelcomeEmailProps) => {
             </Section>
             <Hr style={hr} />
             <Text style={footer}>
-              If you have any questions, just reply to this email - we&apos;re
-              always happy to help.
+              This inbox isn&apos;t monitored, replies won&apos;t be read.
             </Text>
           </Section>
         </Container>
@@ -112,3 +112,15 @@ const footer = {
   fontSize: "14px",
   lineHeight: "24px",
 };
+
+export const WelcomeEmail = (props: WelcomeEmailProps) => {
+  const component = <WelcomeEmailTemplate {...props} />;
+  const text = render(component, {
+    plainText: true,
+  });
+
+  return {
+    component,
+    text,
+  };
+};
diff --git a/src/server/email.ts b/src/server/email.ts
@@ -21,7 +21,8 @@ export async function sendWelcomeEmail(params: {
       from: sender,
       to: [params.email],
       subject: "Welcome to Blitzer!",
-      react: WelcomeEmail({ username: params.username }),
+      react: WelcomeEmail({ username: params.username }).component,
+      text: await WelcomeEmail({ username: params.username }).text,
     });
 
     if (error) {
@@ -58,7 +59,13 @@ export async function sendGameCompleteEmail(params: {
         winnerUsername: params.winnerUsername,
         isWinner: params.isWinner,
         gameId: params.gameId,
-      }),
+      }).component,
+      text: await GameCompleteEmail({
+        username: params.username,
+        winnerUsername: params.winnerUsername,
+        isWinner: params.isWinner,
+        gameId: params.gameId,
+      }).text,
     });
 
     if (error) {
@@ -89,7 +96,11 @@ export async function sendFriendRequestEmail(params: {
       react: FriendRequestEmail({
         username: params.username,
         fromUsername: params.fromUsername,
-      }),
+      }).component,
+      text: await FriendRequestEmail({
+        username: params.username,
+        fromUsername: params.fromUsername,
+      }).text,
     });
 
     if (error) {