Skip to content

Commit

Permalink
Fix Email Template
Browse files Browse the repository at this point in the history
  • Loading branch information
@MazinoCodes
MazinoCodes committed Jul 21, 2024
1 parent f6548c1 commit b116d75
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 99 deletions.
145 changes: 94 additions & 51 deletions src/email/templates/newsletter/Newsletter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
import {
Body,
Container,
Font,
Head,
Heading,
Link,
Html,
Img,
Section,
Text,
} from "@react-email/components";
import Image from "next/image";
import React from "react";

import TailwindWrapper from "../_components/tailwindWrapper";
import SampleContent from "./SampleContent";

// Ensure this path is correct

interface NewsletterProperties {
title: string;
name: string;
baseUrl: string;
content: React.ElementType;
learnMoreUrl?: string;
image: boolean;
Expand All @@ -23,55 +28,93 @@ const Newsletter: React.FC<NewsletterProperties> = ({
name = "John Doe",
content: ContentComponent = SampleContent,
learnMoreUrl = "www.example.com",
image = true,
image = false,
}) => {
return (
<Container className="-ml-0 flex w-full flex-col overflow-x-hidden">
<Section className="mt-16 flex flex-col items-center justify-center md:mt-20">
<Image
src="/images/newletter-email-template/Newsletter-Banner.svg"
alt="Newsletter Image"
className={`w-40 md:w-80 ${image ? "" : "hidden"}`}
width={1000}
height={1000}
/>
</Section>
<Section
className={`${image ? "mt-12 md:mt-14" : "mt-3.5"} flex w-screen flex-col gap-14 px-12 lg:px-[10vw]`}
>
<Heading
as="h2"
mx="auto"
className="text-center text-xl font-semibold md:text-2xl"
>
{title}
</Heading>
<Heading className="mt-10 text-base font-semibold md:mt-14 md:text-lg">
Hi {name},
</Heading>
<ContentComponent imageState={image} />

<Section className="mt-8 flex flex-col items-center justify-center">
<Link href={learnMoreUrl}>
<Text className="flex w-4/5 justify-center rounded-lg bg-primary py-2 text-lg text-white md:w-60">
Learn More
</Text>
</Link>
</Section>
<Heading
as="h4"
className="mt-14 text-sm font-medium md:text-base md:font-semibold"
>
Regards,
</Heading>
<Heading
as="h4"
className="mb-8 mt-4 text-sm font-medium md:mt-8 md:text-base md:font-semibold"
>
Boilerplate
</Heading>
</Section>
</Container>
<Html>
<TailwindWrapper>
<Head>
<Font
fontFamily="Inter"
fallbackFontFamily="sans-serif"
webFont={{
url: "https://rsms.me/inter/font-files/Inter-Regular.woff2?v=4.0",
format: "woff2",
}}
fontWeight={400}
fontStyle="normal"
/>
<Font
fontFamily="Inter"
fallbackFontFamily="sans-serif"
webFont={{
url: "https://rsms.me/inter/font-files/Inter-Medium.woff2?v=4.0",
format: "woff2",
}}
fontWeight={500}
fontStyle="normal"
/>
<Font
fontFamily="Inter"
fallbackFontFamily="sans-serif"
webFont={{
url: "https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=4.0",
format: "woff2",
}}
fontWeight={600}
fontStyle="normal"
/>
</Head>
<Body>
<Container className="-ml-0 flex w-full flex-col">
<Section className="mt-16 flex flex-col items-center justify-center md:mt-20">
<Img
src={`/images/newletter-email-template/Newsletter-Banner.svg`}
alt="Newsletter Image"
className={`w-40 md:w-80 ${image ? "" : "hidden md:hidden"}`}
width="100"
height="100"
/>
</Section>
<Section
className={`${image ? "mt-12 md:mt-14" : "mt-3.5"} flex w-screen flex-col gap-14 px-4 lg:px-[3vw]`}
>
<Heading
as="h2"
mx="auto"
className="text-center text-xl font-semibold md:text-2xl"
>
{title}
</Heading>
<Heading className="mt-10 text-base font-semibold md:mt-14 md:text-lg">
Hi {name},
</Heading>
<ContentComponent imageState={image} />
<Section className="mt-8 flex flex-col items-center justify-center">
<a
href={learnMoreUrl}
className="mx-auto flex w-full justify-center rounded-[0.2rem] bg-[#F97316] px-5 py-2 text-lg text-white no-underline md:w-60"
>
Learn More
</a>
</Section>
<Heading
as="h4"
className="mt-14 text-sm font-medium md:text-base md:font-semibold"
>
Regards,
</Heading>
<Heading
as="h4"
className="mb-8 mt-4 text-sm font-medium md:mt-8 md:text-base md:font-semibold"
>
Boilerplate
</Heading>
</Section>
</Container>
</Body>
</TailwindWrapper>
</Html>
);
};

Expand Down
62 changes: 31 additions & 31 deletions src/email/templates/newsletter/SampleContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Heading, Section, Text } from "@react-email/components";
import Image from "next/image";
import { Heading, Img, Section, Text } from "@react-email/components";
import React from "react";

interface SampleContentProperties {
imageState: boolean;
}

const SampleContent: React.FC<SampleContentProperties> = ({ imageState }) => {
return (
<Section>
<Section className="w-full overflow-x-hidden">
<Text className="mt-7 text-sm text-neutral-dark-1 md:mt-8 md:text-lg md:tracking-wide">
We’re excited to bring you an exclusive offer that will keep you ahead
of the curve! At Boilerplate, we pride ourselves on providing the latest
Expand All @@ -22,38 +22,38 @@ const SampleContent: React.FC<SampleContentProperties> = ({ imageState }) => {
What’s in Store
</Heading>
<Text className="flex flex-row items-center gap-4 text-sm text-neutral-dark-2 md:gap-5">
<Image
<Img
src="/images/newletter-email-template/Newsletter-Star.svg"
alt="Star"
className="w-6 md:w-6"
width={1000}
height={1000}
width={28}
height={28}
/>
<span className="text-sm md:text-base">
<b>The Ultimate Smartwatch:</b> Experience the future with this
state-of-the-art device, designed to enhance your daily life.
</span>
</Text>
<Text className="flex flex-row items-center gap-5 text-neutral-dark-2">
<Image
<Img
src="/images/newletter-email-template/Newsletter-Star.svg"
alt="Star"
className="w-6 md:w-6"
width={1000}
height={1000}
width={28}
height={28}
/>
<span className="text-sm md:text-base">
<b>The High-Performance Laptop: </b> A perfect blend of innovation and
performance, ideal for both work and play.
</span>
</Text>
<Text className="flex flex-row items-center gap-5 text-neutral-dark-2">
<Image
<Img
src="/images/newletter-email-template/Newsletter-Star.svg"
alt="Star"
className="w-6 md:w-6"
width={1000}
height={1000}
width={28}
height={28}
/>
<span className="text-sm md:text-base">
<b>The Wireless Noise-Cancelling Headphones:</b> Sleek, powerful, and
Expand All @@ -77,38 +77,38 @@ const SampleContent: React.FC<SampleContentProperties> = ({ imageState }) => {
Why Choose Boilerplate?
</Heading>
<Text className="flex flex-row items-center gap-5 text-neutral-dark-2">
<Image
<Img
src="/images/newletter-email-template/Newsletter-Star.svg"
alt="Star"
className="w-6 md:w-6"
width={1000}
height={1000}
width={28}
height={28}
/>
<span className="text-sm md:text-base">
<b> Cutting-Edge Technology:</b> We source the most innovative
products to ensure you have access to the best.
</span>
</Text>
<Text className="flex flex-row items-center gap-5 text-neutral-dark-2">
<Image
<Img
src="/images/newletter-email-template/Newsletter-Star.svg"
alt="Star"
className="w-6 md:w-6"
width={1000}
height={1000}
width={28}
height={28}
/>
<span className="text-sm md:text-base">
<b>Unmatched Quality: </b> Our products undergo rigorous testing to
meet the highest standards.
</span>
</Text>
<Text className="flex flex-row items-center gap-5 text-foreground">
<Image
<Img
src="/images/newletter-email-template/Newsletter-Star.svg"
alt="Star"
className="w-6 md:w-6"
width={1000}
height={1000}
width={28}
height={28}
/>
<span className="text-sm md:text-base">
<b>Exceptional Customer Support:</b> Our team is always here to assist
Expand All @@ -126,26 +126,26 @@ const SampleContent: React.FC<SampleContentProperties> = ({ imageState }) => {
<Section
className={`${imageState ? "mt-16 md:mt-20" : "mt-0"} flex flex-col items-center justify-center`}
>
<Image
src="/images//newletter-email-template/Newsletter-Discount.svg"
alt="Newsletter"
className={`w-40 md:w-80 ${imageState ? "" : "hidden"}`}
width={1000}
height={1000}
<Img
src="/images/newletter-email-template/Newsletter-Discount.svg"
alt="Newsletter Image"
className={`hidden w-40 md:w-80 ${imageState ? "hidden" : "hidden"}`}
width={28}
height={28}
/>
</Section>
<Section
className={`${imageState ? "mt-12" : "-mt-8"} flex flex-col items-center justify-center`}
></Section>
<ol className="mt-12 text-sm leading-6 text-neutral-dark-1 md:text-base">
<li>
1. Visit our website at{" "}
Visit our website at{" "}
<a className="text-primary">www.boilerplate.com</a>
</li>
<li>2. Browse our selection of cutting-edge tech. </li>
<li>3. Add your desired products to the cart.</li>
<li> Browse our selection of cutting-edge tech. </li>
<li>Add your desired products to the cart.</li>
<li>
4. Enter the code TECHSAVVY at checkout to apply your discount. Don’t
Enter the code TECHSAVVY at checkout to apply your discount. Don’t
miss out on this opportunity to upgrade your tech and stay ahead of
the game. This exclusive offer is valid until 30th July, so act fast!
</li>
Expand Down
17 changes: 0 additions & 17 deletions src/test/Newsletter.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import Newsletter from "../email/templates/newsletter/Newsletter";

Expand Down Expand Up @@ -55,20 +54,4 @@ describe("newsletter Component", () => {
// Check if the specific image is rendered
expect(screen.getByAltText("Newsletter Image")).toBeInTheDocument();
});

it("does not render the specific image when image prop is false", () => {
expect.assertions(1); // Number of assertions in this test

render(
<Newsletter
title="No Image"
name="John Smith"
content={() => <div>No Image Content</div>}
learnMoreUrl="https://no-image-url.com"
image={false} // assuming false means image should not be displayed
/>,
);
const imageElement = screen.getByAltText("Newsletter Image");
expect(imageElement).toHaveClass("hidden");
});
});

0 comments on commit b116d75

Please sign in to comment.