From 7f4239ad3c1bd711ef08b4c53ed09d7320e9fe62 Mon Sep 17 00:00:00 2001 From: Joywin Bennis <107112207+joywin2003@users.noreply.github.com> Date: Mon, 16 Sep 2024 23:05:16 +0530 Subject: [PATCH] Refactor: Added a react email template and fix the header issue(__@__ instead of Tedx Sjec) --- src/lib/email-template.tsx | 137 ++++++++++++++++++++++++++++++++----- src/lib/resend-mailer.ts | 2 +- 2 files changed, 120 insertions(+), 19 deletions(-) diff --git a/src/lib/email-template.tsx b/src/lib/email-template.tsx index ddad449..d2f0df4 100644 --- a/src/lib/email-template.tsx +++ b/src/lib/email-template.tsx @@ -1,28 +1,129 @@ import * as React from "react"; -import { Html, Button } from "@react-email/components"; +import { + Body, + Container, + Head, + Html, + Preview, + Section, + Text, + Heading, + Button, +} from "@react-email/components"; + interface EmailTemplateProps { name: string; email: string; OTP: string; } -export const EmailTemplate = ({ - name, - email, - OTP, -}:EmailTemplateProps) => ( +export const EmailTemplate = ({ name, OTP }: EmailTemplateProps) => ( -

Hello {name},

-

Thank you for registering for Tedx 2024.

-

Your One-Time Password (OTP) for email verification is:

-

{OTP}

-

- Please enter this OTP to complete your registration. The OTP is valid for - 10 minutes. -

-

Thank you!

-

- Tedx SJEC Team -

+ + Your OTP for Tedx 2024 Email Verification + + + Tedx SJEC + Hello {name}, + + Thank you for registering for Tedx 2024. + + + Your One-Time Password (OTP) for email verification is: + +
+ {OTP} +
+ + Please enter this OTP to complete your registration. The OTP is valid + for 10 minutes. + +
+ +
+ Thank you! + + Tedx SJEC Team + + + ); + +export default EmailTemplate; + +const main = { + backgroundColor: "#ffffff", + fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", + textAlign: "center" as const, +}; + +const container = { + backgroundColor: "#ffffff", + border: "1px solid #ddd", + borderRadius: "5px", + marginTop: "20px", + width: "480px", + maxWidth: "100%", + margin: "0 auto", + padding: "12% 6%", +}; + +const company = { + fontWeight: "bold", + fontSize: "18px", + textAlign: "center" as const, +}; + +const codeTitle = { + textAlign: "center" as const, +}; + +const codeDescription = { + textAlign: "center" as const, +}; + +const codeContainer = { + background: "rgba(0,0,0,.05)", + borderRadius: "4px", + margin: "16px auto 14px", + verticalAlign: "middle", + width: "280px", + maxWidth: "100%", +}; + +const codeStyle = { + color: "#000", + display: "inline-block", + paddingBottom: "8px", + paddingTop: "8px", + margin: "0 auto", + width: "100%", + textAlign: "center" as const, + letterSpacing: "8px", +}; + +const buttonContainer = { + margin: "27px auto", + width: "auto", +}; + +const button = { + backgroundColor: "red", + borderRadius: "3px", + fontWeight: "600", + color: "#fff", + textAlign: "center" as const, + padding: "12px 24px", + margin: "0 auto", +}; + +const paragraph = { + color: "#444", + letterSpacing: "0", + padding: "0 40px", + margin: "0", + textAlign: "center" as const, +}; diff --git a/src/lib/resend-mailer.ts b/src/lib/resend-mailer.ts index fb65c8c..201c9e5 100644 --- a/src/lib/resend-mailer.ts +++ b/src/lib/resend-mailer.ts @@ -8,7 +8,7 @@ export async function MailUsingResend({ email, name, OTP }: SendEmailType) { console.log(process.env.RESEND_API_KEY); try { const mailOptions: ResendEmailOptions = { - from: "Tedx SJEC ", + from: '"Tedx SJEC" ', to: email, subject: "Tedx SJEC - Your OTP for Email Verification", react: EmailTemplate({