Skip to content

Commit

Permalink
feat: Extract email template into separate component (#103)
Browse files Browse the repository at this point in the history
  • Loading branch information
RudraPatel2003 authored Jan 22, 2025
1 parent eace8dd commit 034aeb3
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 621 deletions.
121 changes: 13 additions & 108 deletions src/components/emails/EmailVerificationEmail.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 (
<Html>
<Head />
<Preview>Verify your SCF email address</Preview>
<Body style={main}>
<Container style={container}>
<Section style={box}>
<Img
src={imgurLogoImageUrl}
width="128"
height="128"
alt="St. Christopher Truckers Relief Fund"
style={image}
/>
<Text style={paragraph}>
Please click on the link below to verify your email address.
</Text>
<Button style={button} href={`${baseUrl}/verify-email/${token}`}>
Verify Email Address
</Button>
<Text style={paragraph}>
If you have any questions or concerns, please 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>
<SCFEmail
type="text-and-button"
previewText={preview}
text={text}
buttonText={buttonText}
buttonUrl={buttonUrl}
/>
);
}

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",
};
94 changes: 5 additions & 89 deletions src/components/emails/PasswordChangedEmail.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -20,79 +7,8 @@ type PasswordChangedEmailProps = {
export default function PasswordChangedEmail({
firstName,
}: PasswordChangedEmailProps) {
return (
<Html>
<Head />
<Preview>Your SCF password was changed</Preview>
<Body style={main}>
<Container style={container}>
<Section style={box}>
<Img
src={imgurLogoImageUrl}
width="128"
height="128"
alt="St. Christopher Truckers Relief Fund"
style={image}
/>
<Text style={paragraph}>
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{" "}
<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 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 <SCFEmail type="text-only" previewText={preview} text={text} />;
}
100 changes: 8 additions & 92 deletions src/components/emails/RejectionEmail.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -22,82 +9,11 @@ export default function RejectionEmail({
programName,
rejectReason,
}: RejectionEmailProps) {
return (
<Html>
<Head />
<Preview>Your SCF Program Application Has Been Rejected</Preview>
<Body style={main}>
<Container style={container}>
<Section style={box}>
<Img
src={imgurLogoImageUrl}
width="128"
height="128"
alt="St. Christopher Truckers Relief Fund"
style={image}
/>
<Text style={paragraph}>
Your SCF Program Application for {programName} has been rejected.
</Text>
<Text style={paragraph}>Reason: {rejectReason}</Text>
<Text style={paragraph}>
If you have any questions or concerns, please 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 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 <SCFEmail type="text-only" previewText={previewText} text={text} />;
}
Loading

0 comments on commit 034aeb3

Please sign in to comment.