From 034aeb3b3c3d82666787549574c6c370899a28b7 Mon Sep 17 00:00:00 2001 From: Rudra Patel <85089368+RudraPatel2003@users.noreply.github.com> Date: Wed, 22 Jan 2025 16:03:36 -0500 Subject: [PATCH] feat: Extract email template into separate component (#103) --- .../emails/EmailVerificationEmail.tsx | 121 ++------------- .../emails/PasswordChangedEmail.tsx | 94 +----------- src/components/emails/RejectionEmail.tsx | 100 +------------ src/components/emails/ResetPasswordEmail.tsx | 122 ++-------------- src/components/emails/SCFEmail.tsx | 138 ++++++++++++++++++ src/components/emails/WelcomeEmail.tsx | 125 ++-------------- src/components/emails/ZoomReminderEmail.tsx | 127 ++-------------- 7 files changed, 206 insertions(+), 621 deletions(-) create mode 100644 src/components/emails/SCFEmail.tsx diff --git a/src/components/emails/EmailVerificationEmail.tsx b/src/components/emails/EmailVerificationEmail.tsx index 2f25a10..d9ca38c 100644 --- a/src/components/emails/EmailVerificationEmail.tsx +++ b/src/components/emails/EmailVerificationEmail.tsx @@ -1,20 +1,4 @@ -import { - Body, - Button, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Section, - Text, -} from "@react-email/components"; - -import imgurLogoImageUrl from "@/utils/constants/imgurLogoImageUrl"; - -const baseUrl = process.env.BASE_URL; +import SCFEmail from "./SCFEmail"; type EmailVerifcationEmailProps = { token: string; @@ -23,97 +7,18 @@ type EmailVerifcationEmailProps = { export default function EmailVerificationEmail({ token, }: EmailVerifcationEmailProps) { + const preview = "Verify your SCF email address"; + const text = `Please click on the link below to verify your email address.`; + const buttonText = "Verify Email Address"; + const buttonUrl = `${process.env.BASE_URL}/verify-email/${token}`; + return ( - - - Verify your SCF email address - - -
- St. Christopher Truckers Relief Fund - - Please click on the link below to verify your email address. - - - - If you have any questions or concerns, please reach out to us at - our{" "} - - contact page. - - -
- - St. Christopher Truckers Relief Fund, Phone: (865) 202-9428 - -
- - - + ); } - -const main = { - backgroundColor: "#f6f9fc", - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - padding: "20px 0 48px", - marginBottom: "64px", - marginTop: "64px", -}; - -const box = { - padding: "0 48px", -}; - -const hr = { - borderColor: "#e6ebf1", - margin: "20px 0", -}; - -const paragraph = { - color: "#525f7f", - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, -}; - -const anchor = { - color: "#556cd6", -}; - -const button = { - backgroundColor: "#183766", - borderRadius: "5px", - color: "#fff", - fontSize: "16px", - fontWeight: "bold", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "100%", - padding: "10px", -}; - -const footer = { - color: "#8898aa", - fontSize: "12px", - lineHeight: "16px", -}; - -const image = { - margin: "0 auto", -}; diff --git a/src/components/emails/PasswordChangedEmail.tsx b/src/components/emails/PasswordChangedEmail.tsx index 143fd52..269a71f 100644 --- a/src/components/emails/PasswordChangedEmail.tsx +++ b/src/components/emails/PasswordChangedEmail.tsx @@ -1,17 +1,4 @@ -import { - Body, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Section, - Text, -} from "@react-email/components"; - -import imgurLogoImageUrl from "@/utils/constants/imgurLogoImageUrl"; +import SCFEmail from "./SCFEmail"; type PasswordChangedEmailProps = { firstName: string; @@ -20,79 +7,8 @@ type PasswordChangedEmailProps = { export default function PasswordChangedEmail({ firstName, }: PasswordChangedEmailProps) { - return ( - - - Your SCF password was changed - - -
- St. Christopher Truckers Relief Fund - - Hello {firstName}, your password to the SCF Dashboard has been - changed. If this was you, you can safely disregard this email. If - you have any questions or concerns, please reach out to us at our{" "} - - contact page. - - -
- - St. Christopher Truckers Relief Fund, Phone: (865) 202-9428 - -
- - - - ); -} - -const main = { - backgroundColor: "#f6f9fc", - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - padding: "20px 0 48px", - marginBottom: "64px", - marginTop: "64px", -}; - -const box = { - padding: "0 48px", -}; - -const hr = { - borderColor: "#e6ebf1", - margin: "20px 0", -}; - -const paragraph = { - color: "#525f7f", - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, -}; - -const anchor = { - color: "#556cd6", -}; + const preview = "Your SCF password was changed"; + const text = `Hello ${firstName}, your password to the SCF Dashboard has been changed. If this was you, you can safely disregard this email.`; -const footer = { - color: "#8898aa", - fontSize: "12px", - lineHeight: "16px", -}; - -const image = { - margin: "0 auto", -}; + return ; +} diff --git a/src/components/emails/RejectionEmail.tsx b/src/components/emails/RejectionEmail.tsx index 93759c0..c1ef157 100644 --- a/src/components/emails/RejectionEmail.tsx +++ b/src/components/emails/RejectionEmail.tsx @@ -1,17 +1,4 @@ -import { - Body, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Section, - Text, -} from "@react-email/components"; - -import imgurLogoImageUrl from "@/utils/constants/imgurLogoImageUrl"; +import SCFEmail from "./SCFEmail"; type RejectionEmailProps = { programName: string; @@ -22,82 +9,11 @@ export default function RejectionEmail({ programName, rejectReason, }: RejectionEmailProps) { - return ( - - - Your SCF Program Application Has Been Rejected - - -
- St. Christopher Truckers Relief Fund - - Your SCF Program Application for {programName} has been rejected. - - Reason: {rejectReason} - - If you have any questions or concerns, please reach out to us at - our{" "} - - contact page. - - -
- - St. Christopher Truckers Relief Fund, Phone: (865) 202-9428 - -
- - - - ); -} - -const main = { - backgroundColor: "#f6f9fc", - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - padding: "20px 0 48px", - marginBottom: "64px", - marginTop: "64px", -}; - -const box = { - padding: "0 48px", -}; - -const hr = { - borderColor: "#e6ebf1", - margin: "20px 0", -}; - -const paragraph = { - color: "#525f7f", - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, -}; - -const anchor = { - color: "#556cd6", -}; + const previewText = `Your SCF Program Application Has Been Rejected`; + const text = [ + `Your SCF program application for ${programName} has been rejected.`, + `Reason: ${rejectReason}`, + ]; -const footer = { - color: "#8898aa", - fontSize: "12px", - lineHeight: "16px", -}; - -const image = { - margin: "0 auto", -}; + return ; +} diff --git a/src/components/emails/ResetPasswordEmail.tsx b/src/components/emails/ResetPasswordEmail.tsx index e3138fb..43a2016 100644 --- a/src/components/emails/ResetPasswordEmail.tsx +++ b/src/components/emails/ResetPasswordEmail.tsx @@ -1,118 +1,22 @@ -import { - Body, - Button, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Section, - Text, -} from "@react-email/components"; - -import imgurLogoImageUrl from "@/utils/constants/imgurLogoImageUrl"; - -const baseUrl = process.env.BASE_URL; +import SCFEmail from "./SCFEmail"; type ResetPasswordEmailProps = { token: string; }; export default function ResetPasswordEmail({ token }: ResetPasswordEmailProps) { + const preview = "Reset your SCF password"; + const text = `We have received a request to reset your password. Please click on the link below.`; + const buttonText = "Reset Password"; + const buttonUrl = `${process.env.BASE_URL}/forgot-password/${token}`; + return ( - - - Reset your SCF password - - -
- St. Christopher Truckers Relief Fund - - We have received a request to reset your password. Please click on - the link below. - - - - If you have any questions or concerns, please reach out to us at - our{" "} - - contact page. - - -
- - St. Christopher Truckers Relief Fund, Phone: (865) 202-9428 - -
- - - + ); } - -const main = { - backgroundColor: "#f6f9fc", - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - padding: "20px 0 48px", - marginBottom: "64px", - marginTop: "64px", -}; - -const box = { - padding: "0 48px", -}; - -const hr = { - borderColor: "#e6ebf1", - margin: "20px 0", -}; - -const paragraph = { - color: "#525f7f", - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, -}; - -const anchor = { - color: "#556cd6", -}; - -const button = { - backgroundColor: "#183766", - borderRadius: "5px", - color: "#fff", - fontSize: "16px", - fontWeight: "bold", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "100%", - padding: "10px", -}; - -const footer = { - color: "#8898aa", - fontSize: "12px", - lineHeight: "16px", -}; - -const image = { - margin: "0 auto", -}; diff --git a/src/components/emails/SCFEmail.tsx b/src/components/emails/SCFEmail.tsx new file mode 100644 index 0000000..730b24a --- /dev/null +++ b/src/components/emails/SCFEmail.tsx @@ -0,0 +1,138 @@ +import { + Body, + Button, + Container, + Head, + Hr, + Html, + Img, + Link, + Preview, + Section, + Text, +} from "@react-email/components"; + +import imgurLogoImageUrl from "@/utils/constants/imgurLogoImageUrl"; + +type EmailWithTextProps = { + type: "text-only"; + previewText: string; + text: string | string[]; +}; + +type EmailWithTextAndButtonProps = { + type: "text-and-button"; + previewText: string; + text: string | string[]; + buttonText: string; + buttonUrl: string; +}; + +type SCFEmailProps = EmailWithTextProps | EmailWithTextAndButtonProps; + +export default function SCFEmail(props: SCFEmailProps) { + return ( + + + {props.previewText} + + +
+ St. Christopher Truckers Relief Fund + + {Array.isArray(props.text) ? ( + props.text.map((text, index) => ( + + {text} + + )) + ) : ( + {props.text} + )} + + {props.type === "text-and-button" && ( + + )} + + + If you have any questions or concerns, please reach out to us at + our{" "} + + contact page. + + +
+ + St. Christopher Truckers Relief Fund, Phone: (865) 202-9428 + +
+ + + + ); +} + +const main = { + backgroundColor: "#f6f9fc", + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', +}; + +const container = { + backgroundColor: "#ffffff", + margin: "0 auto", + padding: "20px 0 48px", + marginBottom: "64px", + marginTop: "64px", +}; + +const box = { + padding: "0 48px", +}; + +const hr = { + borderColor: "#e6ebf1", + margin: "20px 0", +}; + +const paragraph = { + color: "#525f7f", + fontSize: "16px", + lineHeight: "24px", + textAlign: "left" as const, +}; + +const anchor = { + color: "#556cd6", +}; + +const button = { + backgroundColor: "#183766", + borderRadius: "5px", + color: "#fff", + fontSize: "16px", + fontWeight: "bold", + textDecoration: "none", + textAlign: "center" as const, + display: "block", + width: "100%", + padding: "10px", +}; + +const footer = { + color: "#8898aa", + fontSize: "12px", + lineHeight: "16px", +}; + +const image = { + margin: "0 auto", +}; diff --git a/src/components/emails/WelcomeEmail.tsx b/src/components/emails/WelcomeEmail.tsx index b8b9b6b..249ff9f 100644 --- a/src/components/emails/WelcomeEmail.tsx +++ b/src/components/emails/WelcomeEmail.tsx @@ -1,20 +1,4 @@ -import { - Body, - Button, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Section, - Text, -} from "@react-email/components"; - -import imgurLogoImageUrl from "@/utils/constants/imgurLogoImageUrl"; - -const baseUrl = process.env.BASE_URL; +import SCFEmail from "./SCFEmail"; type WelcomeEmailProps = { firstName: string; @@ -25,101 +9,18 @@ export default function WelcomeEmail({ firstName, programName, }: WelcomeEmailProps) { + const previewText = `You've been accepted into St. Christopher Truckers Relief Fund!`; + const text = `Hello ${firstName}! We are pleased to inform you that your application for ${programName} has been accepted. Please click on the link below to access your dashboard.`; + const buttonText = "View your SCF Dashboard"; + const buttonUrl = `${process.env.BASE_URL}/`; + return ( - - - - You've been accepted into St. Christopher Truckers Relief Fund! - - - -
- St. Christopher Truckers Relief Fund - - Hello {firstName}! We are pleased to inform you that your - application for {programName} has been accepted. Please click on - the link below to access your dashboard. - - - - If you have any questions or concerns, please reach out to us at - our{" "} - - contact page. - - -
- - St. Christopher Truckers Relief Fund, Phone: (865) 202-9428 - -
- - - + ); } - -const main = { - backgroundColor: "#f6f9fc", - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - padding: "20px 0 48px", - marginBottom: "64px", - marginTop: "64px", -}; - -const box = { - padding: "0 48px", -}; - -const hr = { - borderColor: "#e6ebf1", - margin: "20px 0", -}; - -const paragraph = { - color: "#525f7f", - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, -}; - -const anchor = { - color: "#556cd6", -}; - -const button = { - backgroundColor: "#183766", - borderRadius: "5px", - color: "#fff", - fontSize: "16px", - fontWeight: "bold", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "100%", - padding: "10px", -}; - -const footer = { - color: "#8898aa", - fontSize: "12px", - lineHeight: "16px", -}; - -const image = { - margin: "0 auto", -}; diff --git a/src/components/emails/ZoomReminderEmail.tsx b/src/components/emails/ZoomReminderEmail.tsx index 26fb791..7caf733 100644 --- a/src/components/emails/ZoomReminderEmail.tsx +++ b/src/components/emails/ZoomReminderEmail.tsx @@ -1,120 +1,25 @@ -import { - Body, - Button, - Container, - Head, - Hr, - Html, - Img, - Link, - Preview, - Section, - Text, -} from "@react-email/components"; - -import imgurLogoImageUrl from "@/utils/constants/imgurLogoImageUrl"; +import SCFEmail from "./SCFEmail"; type ZoomReminderEmailProps = { - meetingName?: string; - meetingLink?: string; + meetingName: string; + meetingLink: string; }; export default function ZoomReminderEmail({ - meetingName = "your SCF program", - meetingLink = "https://www.google.com", + meetingName, + meetingLink, }: ZoomReminderEmailProps) { + const preview = `Reminder: You have an upcoming ${meetingName} meeting`; + const text = `Please click the link below to join the zoom call for ${meetingName}.`; + const buttonText = "Join Meeting"; + return ( - - - Reminder: You have an upcoming {meetingName} meeting - - -
- St. Christopher Truckers Relief Fund - - Please click the link below to join the zoom call for{" "} - {meetingName}. - - - - If you have any questions or concerns, please reach out to us at - our{" "} - - contact page. - - -
- - St. Christopher Truckers Relief Fund, Phone: (865) 202-9428 - -
- - - + ); } - -const main = { - backgroundColor: "#f6f9fc", - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - padding: "20px 0 48px", - marginBottom: "64px", - marginTop: "64px", -}; - -const box = { - padding: "0 48px", -}; - -const hr = { - borderColor: "#e6ebf1", - margin: "20px 0", -}; - -const paragraph = { - color: "#525f7f", - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, -}; - -const anchor = { - color: "#556cd6", -}; - -const button = { - backgroundColor: "#183766", - borderRadius: "5px", - color: "#fff", - fontSize: "16px", - fontWeight: "bold", - textDecoration: "none", - textAlign: "center" as const, - display: "block", - width: "100%", - padding: "10px", -}; - -const footer = { - color: "#8898aa", - fontSize: "12px", - lineHeight: "16px", -}; - -const image = { - margin: "0 auto", -};