Email template resend

karlosvas · Jan 19, 2025 · cb0deae · cb0deae
1 parent 8ebc165
commit cb0deae
Showing 1 changed file with 38 additions and 7 deletions.
diff --git a/server/lib/resend/resend.ts b/server/lib/resend/resend.ts
@@ -16,7 +16,18 @@ export async function submitNote(note: NoteType) {
       to: [admin],
       subject: note.subject,
       html: `
-    <p>The user <strong>${note.username}</strong> with email ${note.email_user} sent you this message:</p><br /><p>${note.note}</p>`,
+      <html>
+      <body style="font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 20px;">
+        <div style="background-color: #fff; padding: 20px; max-width: 1000px; margin: 20px auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
+          <h1 style="text-align: center; color: #2a8cff;">TheFuentSpanishHouse</h1>
+          <h3 style="text-align: center; color: #2a8cff;">New Message from ${note.username}</h2>
+          <p style="font-size: 16px; line-height: 1.6;">The user <strong style="color: #2a8cff;">${note.username}</strong> with email <strong style="color: #2a8cff;">${note.email_user}</strong> sent you the following message:</p>
+          <p style="font-size: 16px; line-height: 1.6; background-color: #f9f9f9; padding: 10px; border-left: 4px solid #2a8cff; margin-top: 10px;">${note.note}</p>
+          <p style="font-size: 14px; color: #777; text-align: center; margin-top: 30px;">Thank you for your attention.</p>
+        </div>
+      </body>
+      </html>
+      `,
       headers: {
         'Reply-To': note.email_user,
       },
@@ -33,9 +44,18 @@ export async function submitEmailStudent(newstudent: SubscriberType) {
     return await resend.emails.send({
       from: 'no-reply@thefluentspanishhouse.com',
       to: [admin],
-      subject: `New student on TheFluentSpanishHouse ${newstudent.name} ${newstudent.lastname}`,
-      html: `<p>The user <b>${newstudent.name} ${newstudent.lastname}</b> wants to be a new student:</p><br />
-    <p>He wants to sign up for <b>${newstudent.class}<b/><p/>`,
+      subject: `The Fluent Spanish House: New Student ${newstudent.name} ${newstudent.lastname}`,
+      html: `<html>
+        <body style="font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 20px;">
+          <div style="background-color: #fff; padding: 20px; max-width: 1000px; margin: 20px auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
+            <h1 style="text-align: center; color: #2a8cff;">TheFuentSpanishHouse</h1>
+            <h3 style="text-align: center; color: #2a8cff;">New Student Request</h3>
+            <p style="font-size: 16px; line-height: 1.6;">The user <b style="color: #2a8cff;">${newstudent.name} ${newstudent.lastname}</b> with email <b style="color: #2a8cff;">${newstudent.email}</b> wants to be a new student:</p>
+            <p style="font-size: 16px; line-height: 1.6;">They would like to sign up for <b style="color: #2a8cff;">${newstudent.class}</b>.</p>
+            <p style="font-size: 14px; color: #777; text-align: center; margin-top: 30px;">Thank you for your attention.</p>
+          </div>
+        </body>
+      </html>`,
     });
   } catch (error) {
     console.error('Error sending email', error);
@@ -50,9 +70,20 @@ export async function submitEmailComment(note: NoteType, originUrl: string) {
       from: `no-reply@thefluentspanishhouse.com`,
       to: [admin],
       subject: note.subject,
-      html: `<p>The user <strong>${note.username} ${note.email_user}</strong> says:</p><br>
-      <p>${note.note}</p><br />
-      <p>From the post: ${originUrl}</p><br />User: ${note.email_user}`,
+      html: `<html>
+        <body style="font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; margin: 0; padding: 20px;">
+          <div style="background-color: #fff; padding: 20px; max-width: 1000px; margin: 20px auto; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
+               <h1 style="text-align: center; color: #2a8cff;">TheFuentSpanishHouse</h1>
+            <h3 style="text-align: center; color: #2a8cff;">New Message from ${note.username}</h3>
+            <p style="font-size: 16px; line-height: 1.6;">The user <strong style="color: #2a8cff;">${note.username} ${note.email_user}</strong> says:</p>
+            <p style="font-size: 16px; line-height: 1.6; background-color: #f9f9f9; padding: 10px; border-left: 4px solid #2a8cff; margin-top: 10px;">${note.note}</p>
+            <p style="font-size: 16px; line-height: 1.6; margin-top: 20px;">From the post: <a href="${originUrl}" style="color: #2a8cff;" target="_blank">${originUrl}</a></p>
+            <p style="font-size: 14px; color: #777; text-align: center; margin-top: 30px;">User: <strong style="color: #2a8cff;">${note.email_user}</strong></p>
+            <p style="font-size: 14px; color: #777; text-align: center;">Thank you for your attention.</p>
+          </div>
+        </body>
+      </html>
+      `,
     });
   } catch (error) {
     console.error('Error sending email', error);