Merge pull request #24 from tinloof/tin-2223-integrate-resend-emails

Tin 2223 integrate resend emails
tinloof · Oct 18, 2024 · d8e0c0e · d8e0c0e
2 parents 8a79e89 + 3747188
commit d8e0c0e
Show file tree

Hide file tree

Showing 17 changed files with 1,013 additions and 6 deletions.
diff --git a/backend/data/templates/components/button.tsx b/backend/data/templates/components/button.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@react-email/components";
+import React from "react";
+
+export function CtaButton({ href, label }: { href: string; label: string }) {
+  return (
+    <Button
+      className="text-center my-6 border-[1.5px] border-black mx-auto w-full rounded-full py-[6px] text-accent text-[32px] leading-[150%]"
+      style={{
+        border: "1.5px solid",
+      }}
+      href={href}
+    >
+      {label}
+    </Button>
+  );
+}
diff --git a/backend/data/templates/components/cart.tsx b/backend/data/templates/components/cart.tsx
@@ -0,0 +1,115 @@
+import { Column, Hr, Row, Section, Text } from "@react-email/components";
+import React from "react";
+import { BodySmall, BodyXSmall } from "./style";
+
+export default function Cart({
+  orderNumber,
+  checkout,
+}: {
+  date?: string;
+  orderNumber: string;
+  checkout?: {
+    Subtotal: string;
+    discount: string;
+    shipping: string;
+    taxes: string;
+    total: string;
+  };
+}) {
+  return (
+    <Section className="mb-10">
+      <Section className="mb-4">
+        <Text className="w-fit uppercase leading-[110%]" style={BodySmall}>
+          Order summary {orderNumber}
+        </Text>
+      </Section>
+      <CartLine />
+      <CartLine />
+      {checkout && (
+        <Section className="max-w-[365px]" align="right">
+          <CheckoutLine title="Subtotal" price={checkout.Subtotal} />
+          <CheckoutLine
+            title="Order discount"
+            subtitle="ORDER5 (-$5.00)"
+            price={checkout.discount}
+          />
+          <CheckoutLine
+            title="Shipping"
+            subtitle="FREESHIPPING (-$0.00)"
+            price={checkout.shipping}
+          />
+          <CheckoutLine title="Taxes" price={checkout.taxes} />
+          <Hr className="h-px bg-accent mb-4" />
+          <CheckoutLine title="Total" price={checkout.total} />
+        </Section>
+      )}
+    </Section>
+  );
+}
+
+function CartLine() {
+  return (
+    <Section className="mb-3">
+      <Row>
+        <Column className="mx-0 w-[100px] h-[100px]  ">
+          <Section className="w-fit ">
+            {/* <Img
+                    src={`${baseUrl}/static/emails/product.png`}
+              width="100"
+              height="100px"
+              alt="Product image"
+              className=""
+            /> */}
+            <Section className="h-[100px] w-[100px] bg-accent"></Section>
+          </Section>
+        </Column>
+        <Column className="pl-2 align-top ">
+          <Text className="w-full font-bold leading-[130%]" style={BodySmall}>
+            Two chip chocolate chip cookie
+          </Text>
+          <Text
+            className="w-full text-inactive leading-[120%]"
+            style={BodySmall}
+          >
+            4-Pack
+          </Text>
+        </Column>
+        <Column align="right" className="align-top">
+          <Text className="font-bold leading-[140%]" style={BodySmall}>
+            $20.00
+          </Text>
+        </Column>
+      </Row>
+    </Section>
+  );
+}
+
+function CheckoutLine({
+  title,
+  subtitle,
+  price,
+}: {
+  title: string;
+  subtitle?: string;
+  price: string;
+}) {
+  return (
+    <Row className="mb-3">
+      <Column className="w-full">
+        <Text className="font-bold leading-[150%] mb-1" style={BodySmall}>
+          {title}
+        </Text>
+        {subtitle && (
+          <Text className="leading-[150%]" style={BodyXSmall}>
+            {subtitle}
+          </Text>
+        )}
+      </Column>
+      <Column className="align-right w-fit whitespace-nowrap align-top">
+        <Text className="font-bold leading-[150%]" style={BodySmall}>
+          {price}
+        </Text>
+      </Column>
+    </Row>
+  );
+}
diff --git a/backend/data/templates/components/email-body.tsx b/backend/data/templates/components/email-body.tsx
@@ -0,0 +1,33 @@
+import { Text } from "@react-email/components";
+import React from "react";
+import { Body } from "./style";
+
+interface EmailBodyProps {
+  firstName?: string;
+  paragraphs: string[];
+  signature?: boolean;
+}
+
+export default function EmailBody({
+  firstName,
+  paragraphs,
+  signature,
+}: EmailBodyProps) {
+  return (
+    <Text className="mb-[50px]" style={Body}>
+      Hi {firstName}, <br />
+      {paragraphs.map((paragraph, index) => (
+        <span key={index}>
+          {paragraph}
+          <br /> <br />
+        </span>
+      ))}
+      {signature && (
+        <>
+          Warm regards,
+          <br /> The Munchies Team
+        </>
+      )}
+    </Text>
+  );
+}
diff --git a/backend/data/templates/components/footer.tsx b/backend/data/templates/components/footer.tsx
@@ -0,0 +1,59 @@
+import {
+  Column,
+  Link,
+  Row,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+import React from "react";
+
+const getYear = () => {
+  const date = new Date();
+  return date.getFullYear();
+};
+export default function Footer() {
+  const year = getYear();
+
+  return (
+    <Section className="bg-accent text-background">
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: {
+                background: "#FFF6E6",
+                accent: "#FF5227",
+              },
+            },
+          },
+        }}
+      >
+        <Section className="mx-auto my-10 w-fit text-background ">
+          <Row>
+            <Column className="pr-10" align="center">
+              <Link href="/" className="text-background">
+                INSTAGRAM
+              </Link>
+            </Column>
+
+            <Column className="pr-10" align="center">
+              <Link href="/" className="text-background">
+                FACEBOOK
+              </Link>
+            </Column>
+            <Column className="pr-0" align="center">
+              <Link href="/" className="text-background">
+                LINKEDIN
+              </Link>
+            </Column>
+          </Row>
+        </Section>
+
+        <Section className=" text-center">
+          <Text className="mb-5">© {year} MUNCHIES</Text>
+        </Section>
+      </Tailwind>
+    </Section>
+  );
+}
diff --git a/backend/data/templates/components/layout.tsx b/backend/data/templates/components/layout.tsx
@@ -0,0 +1,44 @@
+import {
+  Container,
+  Head,
+  Preview,
+  Section,
+  Tailwind,
+} from "@react-email/components";
+import React from "react";
+import Footer from "./footer";
+import { Global } from "./style";
+
+export default function Layout({
+  children,
+  preview,
+}: {
+  children: React.ReactNode;
+  preview: string;
+}) {
+  return (
+    <Section>
+      <Head />
+      <Preview>{preview}</Preview>
+      <Tailwind
+        config={{
+          theme: {
+            extend: {
+              colors: {
+                background: "#FFF6E6",
+                accent: "#FF5227",
+              },
+            },
+          },
+        }}
+      >
+        <Section className="bg-background" style={Global}>
+          <Container className="bg-background h-full w-full  max-w-[640px]">
+            <Section className=" text-accent">{children}</Section>
+            <Footer />
+          </Container>
+        </Section>
+      </Tailwind>
+    </Section>
+  );
+}
diff --git a/backend/data/templates/components/products-list.tsx b/backend/data/templates/components/products-list.tsx
@@ -0,0 +1,59 @@
+import { Column, Row, Section, Text } from "@react-email/components";
+import React from "react";
+import { CtaButton } from "./button";
+import { BodySmall, TitleSmall } from "./style";
+
+export default function ProductsList() {
+  return (
+    <Section className="mt-12">
+      <Text style={TitleSmall} className="">
+        Freshly baked
+      </Text>
+      <Section className="mb-6 mt-2">
+        <Row>
+          <Column className=" pr-2 align-top">
+            <Section className="w-full">
+              {/* <Img
+                src={`${baseUrl}/static/emails/product.png`}
+                alt="Brand Your"
+                className="w-full max-w-[279px]"
+              /> */}
+              <Section className="w-full h-auto aspect-square bg-accent rounded-lg">
+                s
+              </Section>
+            </Section>
+            <Section className="mt-2">
+              <Text style={BodySmall} className="mt-2  text-center">
+                Two chip chocolate chip
+              </Text>
+              <Text style={BodySmall} className="mt-1  text-center">
+                from $29.00
+              </Text>
+            </Section>
+          </Column>
+          <Column className=" pr-2 align-top">
+            <Section className="w-full">
+              {/* <Img
+                src={`${baseUrl}/static/emails/product.png`}
+                alt="Brand Your"
+                className="w-full max-w-[279px]"
+              /> */}
+              <Section className="w-full h-auto aspect-square bg-accent rounded-lg">
+                s
+              </Section>
+            </Section>
+            <Section className="mt-2">
+              <Text style={BodySmall} className="  text-center">
+                Two chip chocolate chip
+              </Text>
+              <Text style={BodySmall} className="pt-1  text-center">
+                from $29.00
+              </Text>
+            </Section>
+          </Column>
+        </Row>
+      </Section>
+      <CtaButton href={"/"} label="Shop now" />
+    </Section>
+  );
+}
diff --git a/backend/data/templates/components/shipping-address.tsx b/backend/data/templates/components/shipping-address.tsx
@@ -0,0 +1,59 @@
+import { Column, Row, Section, Text } from "@react-email/components";
+import React from "react";
+
+type Address = {
+  name: string;
+  company: string;
+  street: string;
+  city: string;
+  country: string;
+};
+export default function CustomerInformation({
+  method,
+  ShippingAddress,
+  BillingAddress,
+}: {
+  method: string;
+  ShippingAddress: Address;
+  BillingAddress: Address;
+}) {
+  return (
+    <Section>
+      <Text className="mb-4 font-bold">Customer information</Text>
+      <Row className="mb-8">
+        <Column>
+          <Text className="mb-2 font-bold">Shipping address</Text>
+          <Text>
+            {ShippingAddress.name}
+            <br />
+            {ShippingAddress.company}
+            <br />
+            {ShippingAddress.street}
+            <br />
+            {ShippingAddress.city}
+            <br />
+            {ShippingAddress.country}
+            <br />
+          </Text>
+        </Column>
+        <Column>
+          <Text className="mb-2 font-bold">Billing address</Text>
+          <Text>
+            {BillingAddress.name}
+            <br />
+            {BillingAddress.company}
+            <br />
+            {BillingAddress.street}
+            <br />
+            {BillingAddress.city}
+            <br />
+            {BillingAddress.country}
+            <br />
+          </Text>
+        </Column>
+      </Row>
+      <Text className="mb-2 font-bold">Shipping method</Text>
+      <Text>{method}</Text>
+    </Section>
+  );
+}