meat: ContactUs nodemailer

app/api/routes/mailTransporter.ts

@@ -10,12 +10,12 @@ export const transporter = nodemailer.createTransport({
   port: 465,
   secure: true,
   auth: {
-    user: "keshawa.vizolelabs.com",
-    pass: process.env.ZOHO_PASS,
+    user: "keshawa@vizolelabs.com",
+    pass: process.env.NEXT_PUBLIC_ZOHO_PASS,
   },
 })
 
 export const mailOptions: MailOptions = {
-  from: "Keshawa Anuhas <keshawa.vizolelabs.com>",
-  to: "Keshawa Anuhas <keshawa.vizolelabs.com>",
+  from: "Keshawa Anuhas <keshawa@vizolelabs.com>",
+  to: "Keshawa Anuhas <keshawa@vizolelabs.com>",
 }

app/api/routes/route.ts

@@ -1,15 +1,30 @@
 import { mailOptions, transporter } from "./mailTransporter"
-
+import { replaceMergeTags, stripHTMLTags } from "app/mail/sliceHtml"
 import { NextResponse } from "next/server"
+import fs from "fs"
+import path from "path"
 
-export async function post(req: any) {
+export async function POST(req: any) {
   const data = await req.json()
+  const htmlFilePath = path.join(process.cwd(), "app/mail", "contactForm.html")
+
+  let htmlContent: string
+  try {
+    htmlContent = fs.readFileSync(htmlFilePath, "utf8")
+  } catch (err) {
+    console.error("Error reading HTML file: ", err)
+    return
+  }
+
+  htmlContent = replaceMergeTags(data, htmlContent)
+  const plainTextContent = stripHTMLTags(htmlContent)
 
   try {
     await transporter.sendMail({
       ...mailOptions,
-      subject: data.subject,
-      text: `Email: ${data.email}\n\n${data.message}`,
+      subject: `Contact Inquiry - VizoleLabs Web`,
+      text: plainTextContent,
+      html: htmlContent,
     })
     return NextResponse.json({ success: true })
   } catch (error: any) {

app/mail/contactForm.html

@@ -0,0 +1,10 @@
+<div style="font-family: sans-serif">
+  <h1>Contact Form Inquiry</h1>
+  <p>You have received the following inquiry:</p>
+  <br />
+  <p>Email: {{ email }}</p>
+  <br />
+  <p>Message:</p>
+  <p>{{ message }}</p>
+  <br />
+</div>

app/mail/sliceHtml.ts

@@ -0,0 +1,32 @@
+export const stripHTMLTags = (htmlString: string): string => {
+  // also replaces <br> tags with new lines
+  return htmlString.replace(/<br>/g, "\n").replace(/<[^>]+>/g, "")
+}
+
+/**
+ * @param data
+ * @param htmlString
+ *  @return The updated HTML string
+ */
+export const replaceMergeTags = (data: Record<string, any>, htmlString: string): string => {
+  Object.keys(data)?.forEach((key: string) => {
+    if (htmlString.includes(`{{ ${key} }}`)) {
+      let val: any = data[key]
+
+      // check if value is an array
+      if (val instanceof Array) {
+        const listElements: string[] = val.map((item: any) => {
+          return `<li>${item}</li>`
+        })
+
+        // create an unordered list in HTML
+        val = `<ul>${listElements.join("")}</ul>`
+      }
+
+      const regexPattern = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, "g")
+      htmlString = htmlString.replace(regexPattern, val)
+    }
+  })
+
+  return htmlString
+}