Finish react email migration

jackcrane · jackcrane · commit f74fcf81e9bc · 2025-01-25T13:12:12.000-06:00
diff --git a/api/package.json b/api/package.json
@@ -7,10 +7,10 @@
   "scripts": {
     "test": "./scripts/run-integration.sh",
     "bore": "bore local 3000 --to bore.pub",
-    "start": "node index.js",
-    "dev": "nodemon index.js",
-    "email:export": "cd ../react-email && yarn export",
-    "email:dev": "cd ../react-email && yarn dev",
+    "start": "node --import tsx index.js",
+    "dev": "nodemon --import tsx index.js",
+    "email:export": "cd ./react-email && yarn export",
+    "email:dev": "cd ./react-email && yarn dev",
     "coverage": "yarn test --coverage",
     "lint": "eslint ."
   },
diff --git a/api/react-email/emails/forgot-password.jsx b/api/react-email/emails/forgot-password.jsx
@@ -49,7 +49,7 @@ const styles = {
   },
 };
 
-export const WelcomeEmail = ({ name, token }) => (
+export const ForgotPasswordEmail = ({ name, token }) => (
   <Html>
     <Head>
       <Font
@@ -105,12 +105,9 @@ export const WelcomeEmail = ({ name, token }) => (
   </Html>
 );
 
-WelcomeEmail.PreviewProps = {
+ForgotPasswordEmail.PreviewProps = {
   name: "Jack Crane",
-  email: "jack@jackcrane.rocks",
-  ip: "127.0.0.1",
-  regionName: "California",
-  city: "San Francisco",
+  token: "1234567890",
 };
 
-export default WelcomeEmail;
+export default ForgotPasswordEmail;
diff --git a/api/react-email/emails/login.jsx b/api/react-email/emails/login.jsx
@@ -49,7 +49,7 @@ const styles = {
   },
 };
 
-export const WelcomeEmail = ({ name, city, regionName, ip }) => (
+export const LoginEmail = ({ name, city, regionName, ip }) => (
   <Html>
     <Head>
       <Font
@@ -104,12 +104,12 @@ export const WelcomeEmail = ({ name, city, regionName, ip }) => (
   </Html>
 );
 
-WelcomeEmail.PreviewProps = {
+LoginEmail.PreviewProps = {
   name: "Jack Crane",
   email: "jack@jackcrane.rocks",
   ip: "127.0.0.1",
   regionName: "California",
   city: "San Francisco",
 };
 
-export default WelcomeEmail;
+export default LoginEmail;
diff --git a/api/react-email/emails/welcome.jsx b/api/react-email/emails/welcome.jsx
@@ -48,7 +48,7 @@ const styles = {
   },
 };
 
-export const WelcomeEmail = ({ name, email }) => (
+export const WelcomeEmail = ({ name, token }) => (
   <Html>
     <Head>
       <Font
@@ -96,7 +96,7 @@ export const WelcomeEmail = ({ name, email }) => (
           </Text>
           <Button
             as="a"
-            href="https://snowcap.jackcrane.rocks/api/auth/verify?token={{token}}"
+            href={`https://snowcap.jackcrane.rocks/api/auth/verify?token=${token}`}
             style={styles.button}
           >
             Confirm Email
@@ -116,7 +116,7 @@ export const WelcomeEmail = ({ name, email }) => (
 
 WelcomeEmail.PreviewProps = {
   name: "Jack Crane",
-  email: "jack@jackcrane.rocks",
+  token: "token",
 };
 
 export default WelcomeEmail;
diff --git a/api/routes/auth/login.js b/api/routes/auth/login.js
@@ -4,13 +4,10 @@ import jwt from "jsonwebtoken";
 import dotenv from "dotenv";
 import bcrypt from "bcrypt";
 import { sendEmail } from "#postmark";
-import Handlebars from "handlebars";
-import { readFileSync } from "fs";
 import { getGeolocation } from "#geolocation";
 import { forceTestError } from "#forceError";
-
-const welcomeEmail = readFileSync("./react-email/complete/login.hbs", "utf8");
-const template = Handlebars.compile(welcomeEmail);
+import LoginEmail from "#emails/login.jsx";
+import { render } from "@react-email/render";
 
 dotenv.config();
 
@@ -63,7 +60,9 @@ export const post = async (req, res) => {
         From: "Snowcap Support <snowcap@jackcrane.rocks>",
         To: email,
         Subject: "New login to Snowcap",
-        HtmlBody: template({ name: user.name, city, regionName, ip }),
+        HtmlBody: render(
+          LoginEmail.LoginEmail({ name: user.name, city, regionName, ip })
+        ),
         userId: user.id,
       });
     }
diff --git a/api/routes/auth/register.js b/api/routes/auth/register.js
@@ -3,12 +3,9 @@ import { z } from "zod";
 import { prisma } from "#prisma";
 import { LogType } from "@prisma/client";
 import { sendEmail } from "#postmark";
-import Handlebars from "handlebars";
-import { readFileSync } from "fs";
 import { forceTestError } from "#forceError";
-
-const welcomeEmail = readFileSync("./react-email/complete/welcome.hbs", "utf8");
-const template = Handlebars.compile(welcomeEmail);
+import WelcomeEmail from "#emails/welcome.jsx";
+import { render } from "@react-email/render";
 
 export const post = async (req, res) => {
   try {
@@ -71,7 +68,12 @@ export const post = async (req, res) => {
       From: "Snowcap Support <snowcap@jackcrane.rocks>",
       To: email,
       Subject: "Welcome to Snowcap",
-      HtmlBody: template({ name: user.name, token: emailVerificaton.id }),
+      HtmlBody: render(
+        WelcomeEmail.WelcomeEmail({
+          name: user.name,
+          token: emailVerificaton.id,
+        })
+      ),
       userId: user.id,
     });
 
diff --git a/api/routes/auth/reset-password.js b/api/routes/auth/reset-password.js
@@ -1,15 +1,11 @@
 import { sendEmail } from "#postmark";
 import { prisma } from "#prisma";
 import { LogType } from "@prisma/client";
-import Handlebars from "handlebars";
-import { readFileSync } from "fs";
 import { z } from "zod";
 import bcrypt from "bcrypt";
 import { forceTestError } from "#forceError";
-
-const template = Handlebars.compile(
-  readFileSync("./react-email/complete/forgot-password.hbs", "utf8")
-);
+import ForgotPasswordEmail from "#emails/forgot-password.jsx";
+import { render } from "@react-email/render";
 
 export const put = async (req, res) => {
   try {
@@ -50,7 +46,12 @@ export const put = async (req, res) => {
       From: "Snowcap Support <snowcap@jackcrane.rocks>",
       To: email,
       Subject: "Password Reset",
-      HtmlBody: template({ name: user.name, token: passwordResetToken.id }),
+      HtmlBody: render(
+        ForgotPasswordEmail.ForgotPasswordEmail({
+          name: user.name,
+          token: passwordResetToken.id,
+        })
+      ),
       userId: user.id,
     });
 
