diff --git a/src/email/templates/newsletter/Newsletter.tsx b/src/email/templates/newsletter/Newsletter.tsx index 51ca67f17..7b63d75fc 100644 --- a/src/email/templates/newsletter/Newsletter.tsx +++ b/src/email/templates/newsletter/Newsletter.tsx @@ -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; @@ -23,55 +28,93 @@ const Newsletter: React.FC = ({ name = "John Doe", content: ContentComponent = SampleContent, learnMoreUrl = "www.example.com", - image = true, + image = false, }) => { return ( - -
- Newsletter Image -
-
- - {title} - - - Hi {name}, - - - -
- - - Learn More - - -
- - Regards, - - - Boilerplate - -
- + + + + + + + + + +
+ Newsletter Image +
+
+ + {title} + + + Hi {name}, + + +
+ + Learn More + +
+ + Regards, + + + Boilerplate + +
+ + + + ); }; diff --git a/src/email/templates/newsletter/SampleContent.tsx b/src/email/templates/newsletter/SampleContent.tsx index 6b6276d14..e64988519 100644 --- a/src/email/templates/newsletter/SampleContent.tsx +++ b/src/email/templates/newsletter/SampleContent.tsx @@ -1,5 +1,5 @@ -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; @@ -7,7 +7,7 @@ interface SampleContentProperties { const SampleContent: React.FC = ({ imageState }) => { return ( -
+
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 @@ -22,12 +22,12 @@ const SampleContent: React.FC = ({ imageState }) => { What’s in Store - Star The Ultimate Smartwatch: Experience the future with this @@ -35,12 +35,12 @@ const SampleContent: React.FC = ({ imageState }) => { - Star The High-Performance Laptop: A perfect blend of innovation and @@ -48,12 +48,12 @@ const SampleContent: React.FC = ({ imageState }) => { - Star The Wireless Noise-Cancelling Headphones: Sleek, powerful, and @@ -77,12 +77,12 @@ const SampleContent: React.FC = ({ imageState }) => { Why Choose Boilerplate? - Star Cutting-Edge Technology: We source the most innovative @@ -90,12 +90,12 @@ const SampleContent: React.FC = ({ imageState }) => { - Star Unmatched Quality: Our products undergo rigorous testing to @@ -103,12 +103,12 @@ const SampleContent: React.FC = ({ imageState }) => { - Star Exceptional Customer Support: Our team is always here to assist @@ -126,12 +126,12 @@ const SampleContent: React.FC = ({ imageState }) => {
- Newsletter
= ({ imageState }) => { >
  1. - 1. Visit our website at{" "} + Visit our website at{" "} www.boilerplate.com
    2. -
  2. 2. Browse our selection of cutting-edge tech.
    3. -
  3. 3. Add your desired products to the cart.
    4. +
  4. Browse our selection of cutting-edge tech.
    5. +
  5. Add your desired products to the cart.
  6. - 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!
    7. diff --git a/src/test/Newsletter.test.tsx b/src/test/Newsletter.test.tsx index d74b9cbf3..a2e3a3f27 100644 --- a/src/test/Newsletter.test.tsx +++ b/src/test/Newsletter.test.tsx @@ -1,5 +1,4 @@ import { render, screen } from "@testing-library/react"; -import { describe, expect, it } from "vitest"; import Newsletter from "../email/templates/newsletter/Newsletter"; @@ -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( -
    No Image Content
    } - 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"); - }); });