feat: Made Initial component for WelcomeEmail (#21)

Co-authored-by: Rudra Patel <patelrudra2003@gmail.com>
hack4impact-utk · Oct 22, 2024 · 6095265 · 6095265
1 parent 3af9eb1
commit 6095265
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 15 deletions.
diff --git a/src/app/icons/logo.png b/src/app/icons/logo.png
diff --git a/src/components/emails/WelcomeEmail.tsx b/src/components/emails/WelcomeEmail.tsx
@@ -0,0 +1,126 @@
+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;
+
+type WelcomeEmailProps = {
+  firstName: string;
+  programName: string;
+};
+
+export default function WelcomeEmail({
+  firstName,
+  programName,
+}: WelcomeEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>
+        You&apos;ve been accepted into St. Christopher Truckers Relief Fund!
+      </Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={box}>
+            {/* React Email Img */}
+            <Img
+              src={imgurLogoImageUrl}
+              width="128"
+              height="128"
+              alt="St. Christopher Truckers Relief Fund"
+              style={image}
+            />
+            <Text style={paragraph}>
+              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.
+            </Text>
+            <Button style={button} href={`${baseUrl}/`}>
+              View your SCF Dashboard
+            </Button>
+            <Text style={paragraph}>
+              If you have any questions or concerns, please don&apos;t hesitate
+              to reach out to us at our{" "}
+              <Link style={anchor} href="https://truckersfund.org/contact-us">
+                contact page.
+              </Link>
+            </Text>
+            <Hr style={hr} />
+            <Text style={footer}>
+              St. Christopher Truckers Relief Fund, Phone: (865) 202-9428
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+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: "#656ee8",
+  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/server/api/emails/actions.ts b/src/server/api/emails/actions.ts
diff --git a/src/server/api/emails/actions.tsx b/src/server/api/emails/actions.tsx
@@ -0,0 +1,24 @@
+"use server";
+
+import { render } from "@react-email/components";
+
+import WelcomeEmail from "@/components/emails/WelcomeEmail";
+import sendEmail from "@/server/api/emails/helpers";
+
+export async function sendPasswordResetEmail(recipient_email: string) {
+  const html = `<p>Hello ${recipient_email}</p>`;
+
+  await sendEmail(recipient_email, "Please reset your password", html);
+}
+
+export async function sendWelcomeEmail(
+  recipient_email: string,
+  firstName: string,
+  programName: string,
+) {
+  const html = await render(
+    <WelcomeEmail firstName={firstName} programName={programName} />,
+  );
+
+  await sendEmail(recipient_email, "Welcome to SCF", html);
+}
diff --git a/src/utils/constants/imgurLogoImageUrl.ts b/src/utils/constants/imgurLogoImageUrl.ts
@@ -0,0 +1,3 @@
+const imgurLogoImageUrl = "https://i.imgur.com/HGGrF1w.png";
+
+export default imgurLogoImageUrl;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const imgurLogoImageUrl = "https://i.imgur.com/HGGrF1w.png";

		export default imgurLogoImageUrl;