From 6acfa39c61ae54c714681be32c6692b1e277b604 Mon Sep 17 00:00:00 2001
From: Pontus Abrahamsson <pontus@lostisland.co>
Date: Wed, 23 Oct 2024 17:23:43 +0200
Subject: [PATCH] Emails

---
 packages/email/emails/connection-expire.tsx |   2 +-
 packages/email/emails/connection-issue.tsx  |   2 +-
 packages/email/emails/invite.tsx            |   2 +-
 packages/email/emails/invoice-comment.tsx   |  96 ++++++++++++++++++
 packages/email/emails/invoice-overdue.tsx   | 104 ++++++++++++++++++++
 packages/email/emails/invoice-paid.tsx      |  97 ++++++++++++++++++
 packages/email/emails/invoice.tsx           | 101 +++++++++++++++++++
 packages/email/emails/transactions.tsx      |   2 +-
 8 files changed, 402 insertions(+), 4 deletions(-)
 create mode 100644 packages/email/emails/invoice-comment.tsx
 create mode 100644 packages/email/emails/invoice-overdue.tsx
 create mode 100644 packages/email/emails/invoice-paid.tsx
 create mode 100644 packages/email/emails/invoice.tsx

diff --git a/packages/email/emails/connection-expire.tsx b/packages/email/emails/connection-expire.tsx
index f2e255ab43..da2c4f4e15 100644
--- a/packages/email/emails/connection-expire.tsx
+++ b/packages/email/emails/connection-expire.tsx
@@ -93,7 +93,7 @@ export const ConnectionExpireEmail = ({
 
             <Section className="text-center mt-[50px] mb-[50px]">
               <Button
-                className="bg-transparent rounded-md text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
+                className="bg-transparent text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
                 href="https://go.midday.ai/34Xt7XK"
               >
                 Reconnect
diff --git a/packages/email/emails/connection-issue.tsx b/packages/email/emails/connection-issue.tsx
index 56aedd7941..cd60dfe1a9 100644
--- a/packages/email/emails/connection-issue.tsx
+++ b/packages/email/emails/connection-issue.tsx
@@ -89,7 +89,7 @@ export const ConnectionIssueEmail = ({
 
             <Section className="text-center mt-[50px] mb-[50px]">
               <Button
-                className="bg-transparent rounded-md text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
+                className="bg-transparent text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
                 href="https://go.midday.ai/34Xt7XK"
               >
                 Reconnect
diff --git a/packages/email/emails/invite.tsx b/packages/email/emails/invite.tsx
index 2aff1c4677..785178c0bc 100644
--- a/packages/email/emails/invite.tsx
+++ b/packages/email/emails/invite.tsx
@@ -102,7 +102,7 @@ export const InviteEmail = ({
             </Text>
             <Section className="mb-[42px] mt-[32px] text-center">
               <Button
-                className="bg-transparent rounded-md text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
+                className="bg-transparent text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
                 href={inviteLink}
               >
                 {t("invite.join")}
diff --git a/packages/email/emails/invoice-comment.tsx b/packages/email/emails/invoice-comment.tsx
new file mode 100644
index 0000000000..98ac957b60
--- /dev/null
+++ b/packages/email/emails/invoice-comment.tsx
@@ -0,0 +1,96 @@
+import {
+  Body,
+  Button,
+  Container,
+  Font,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+import { Footer } from "../components/footer";
+import { Logo } from "../components/logo";
+
+interface WelcomeProps {
+  invoiceNumber: string;
+  link: string;
+}
+
+const baseUrl =
+  process.env.VERCEL_ENV === "production"
+    ? "https://midday.ai/email"
+    : "http://localhost:3000/email";
+
+export const InvoiceCommentEmail = ({
+  invoiceNumber = "INV-0001",
+  link = "https://app.midday.ai/i/1234567890",
+}: WelcomeProps) => {
+  const text = `New comment on Invoice ${invoiceNumber}`;
+
+  return (
+    <Html>
+      <Tailwind>
+        <head>
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-400-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={400}
+            fontStyle="normal"
+          />
+
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-500-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={500}
+            fontStyle="normal"
+          />
+        </head>
+        <Preview>{text}</Preview>
+
+        <Body className="bg-[#fff] my-auto mx-auto font-sans">
+          <Container
+            className="border-transparent md:border-[#E8E7E1] my-[40px] mx-auto p-[20px] max-w-[600px]"
+            style={{ borderStyle: "solid", borderWidth: 1 }}
+          >
+            <Logo baseUrl={baseUrl} />
+            <Heading className="text-[#121212] text-[21px] font-normal text-center p-0 my-[30px] mx-0">
+              New comment on Invoice <br /> {invoiceNumber}
+            </Heading>
+
+            <br />
+
+            <Text className="text-[#121212]">
+              Check the latest update on your invoice and respond directly by
+              viewing the invoice.
+            </Text>
+
+            <Section className="text-center mt-[50px] mb-[50px]">
+              <Button
+                className="bg-transparent text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
+                href={link}
+              >
+                View invoice
+              </Button>
+            </Section>
+
+            <br />
+
+            <Footer baseUrl={baseUrl} />
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default InvoiceCommentEmail;
diff --git a/packages/email/emails/invoice-overdue.tsx b/packages/email/emails/invoice-overdue.tsx
new file mode 100644
index 0000000000..1a675ca4c0
--- /dev/null
+++ b/packages/email/emails/invoice-overdue.tsx
@@ -0,0 +1,104 @@
+import {
+  Body,
+  Button,
+  Container,
+  Font,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+import { Footer } from "../components/footer";
+import { Logo } from "../components/logo";
+
+interface WelcomeProps {
+  companyName: string;
+  teamName: string;
+  invoiceNumber: string;
+  link: string;
+}
+
+const baseUrl =
+  process.env.VERCEL_ENV === "production"
+    ? "https://midday.ai/email"
+    : "http://localhost:3000/email";
+
+export const InvoiceOverdueEmail = ({
+  companyName = "Customer",
+  teamName = "Midday",
+  invoiceNumber = "INV-0001",
+  link = "https://app.midday.ai/i/1234567890",
+}: WelcomeProps) => {
+  const firstName = companyName.split(" ").at(0);
+  const text = `Invoice ${invoiceNumber} from ${teamName} is Overdue`;
+
+  return (
+    <Html>
+      <Tailwind>
+        <head>
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-400-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={400}
+            fontStyle="normal"
+          />
+
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-500-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={500}
+            fontStyle="normal"
+          />
+        </head>
+        <Preview>{text}</Preview>
+
+        <Body className="bg-[#fff] my-auto mx-auto font-sans">
+          <Container
+            className="border-transparent md:border-[#E8E7E1] my-[40px] mx-auto p-[20px] max-w-[600px]"
+            style={{ borderStyle: "solid", borderWidth: 1 }}
+          >
+            <Logo baseUrl={baseUrl} />
+            <Heading className="text-[#121212] text-[21px] font-normal text-center p-0 my-[30px] mx-0">
+              Invoice {invoiceNumber} <br />
+              from {teamName} is Overdue
+            </Heading>
+
+            <br />
+
+            <span className="font-medium">Hi {firstName},</span>
+            <Text className="text-[#121212]">
+              Please settle your payment as soon as possible to avoid further
+              delay. If anything is unclear, feel free to add a comment by
+              viewing the invoice.
+            </Text>
+
+            <Section className="text-center mt-[50px] mb-[50px]">
+              <Button
+                className="bg-transparent text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
+                href={link}
+              >
+                View invoice
+              </Button>
+            </Section>
+
+            <br />
+
+            <Footer baseUrl={baseUrl} />
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default InvoiceOverdueEmail;
diff --git a/packages/email/emails/invoice-paid.tsx b/packages/email/emails/invoice-paid.tsx
new file mode 100644
index 0000000000..34a9143c51
--- /dev/null
+++ b/packages/email/emails/invoice-paid.tsx
@@ -0,0 +1,97 @@
+import {
+  Body,
+  Button,
+  Container,
+  Font,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+import { Footer } from "../components/footer";
+import { Logo } from "../components/logo";
+
+interface WelcomeProps {
+  invoiceNumber: string;
+  link: string;
+}
+
+const baseUrl =
+  process.env.VERCEL_ENV === "production"
+    ? "https://midday.ai/email"
+    : "http://localhost:3000/email";
+
+export const InvoicePaidEmail = ({
+  invoiceNumber = "INV-0001",
+  link = "https://app.midday.ai/i/1234567890",
+}: WelcomeProps) => {
+  const text = `New comment on Invoice ${invoiceNumber}`;
+
+  return (
+    <Html>
+      <Tailwind>
+        <head>
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-400-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={400}
+            fontStyle="normal"
+          />
+
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-500-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={500}
+            fontStyle="normal"
+          />
+        </head>
+        <Preview>{text}</Preview>
+
+        <Body className="bg-[#fff] my-auto mx-auto font-sans">
+          <Container
+            className="border-transparent md:border-[#E8E7E1] my-[40px] mx-auto p-[20px] max-w-[600px]"
+            style={{ borderStyle: "solid", borderWidth: 1 }}
+          >
+            <Logo baseUrl={baseUrl} />
+            <Heading className="text-[#121212] text-[21px] font-normal text-center p-0 my-[30px] mx-0">
+              Invoice {invoiceNumber} <br /> has been Paid
+            </Heading>
+
+            <br />
+
+            <Text className="text-[#121212]">
+              We’ve received confirmation that your invoice has been
+              successfully settled and it's automatically reconciled against
+              your transaction.
+            </Text>
+
+            <Section className="text-center mt-[50px] mb-[50px]">
+              <Button
+                className="bg-transparent text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
+                href={link}
+              >
+                View invoice
+              </Button>
+            </Section>
+
+            <br />
+
+            <Footer baseUrl={baseUrl} />
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default InvoicePaidEmail;
diff --git a/packages/email/emails/invoice.tsx b/packages/email/emails/invoice.tsx
new file mode 100644
index 0000000000..e4086228c8
--- /dev/null
+++ b/packages/email/emails/invoice.tsx
@@ -0,0 +1,101 @@
+import {
+  Body,
+  Button,
+  Container,
+  Font,
+  Heading,
+  Html,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+import { Footer } from "../components/footer";
+import { Logo } from "../components/logo";
+
+interface WelcomeProps {
+  companyName: string;
+  teamName: string;
+  link: string;
+}
+
+const baseUrl =
+  process.env.VERCEL_ENV === "production"
+    ? "https://midday.ai/email"
+    : "http://localhost:3000/email";
+
+export const InvoiceEmail = ({
+  companyName = "Customer",
+  teamName = "Midday",
+  link = "https://app.midday.ai/i/1234567890",
+}: WelcomeProps) => {
+  const firstName = companyName.split(" ").at(0);
+  const text = `You’ve Received an Invoice from ${teamName}`;
+
+  return (
+    <Html>
+      <Tailwind>
+        <head>
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-400-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={400}
+            fontStyle="normal"
+          />
+
+          <Font
+            fontFamily="Geist"
+            fallbackFontFamily="Helvetica"
+            webFont={{
+              url: "https://cdn.jsdelivr.net/npm/@fontsource/geist-sans@5.0.1/files/geist-sans-latin-500-normal.woff2",
+              format: "woff2",
+            }}
+            fontWeight={500}
+            fontStyle="normal"
+          />
+        </head>
+        <Preview>{text}</Preview>
+
+        <Body className="bg-[#fff] my-auto mx-auto font-sans">
+          <Container
+            className="border-transparent md:border-[#E8E7E1] my-[40px] mx-auto p-[20px] max-w-[600px]"
+            style={{ borderStyle: "solid", borderWidth: 1 }}
+          >
+            <Logo baseUrl={baseUrl} />
+            <Heading className="text-[#121212] text-[21px] font-normal text-center p-0 my-[30px] mx-0">
+              You’ve Received an Invoice <br /> from {teamName}
+            </Heading>
+
+            <br />
+
+            <span className="font-medium">Hi {firstName},</span>
+            <Text className="text-[#121212]">
+              Please review your invoice and make sure to pay it on time. If
+              anything is unclear, feel free to add a comment by viewing the
+              invoice.
+            </Text>
+
+            <Section className="text-center mt-[50px] mb-[50px]">
+              <Button
+                className="bg-transparent text-primary text-[14px] text-[#121212] font-medium no-underline text-center px-6 py-3 border border-solid border-[#121212]"
+                href={link}
+              >
+                View invoice
+              </Button>
+            </Section>
+
+            <br />
+
+            <Footer baseUrl={baseUrl} />
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default InvoiceEmail;
diff --git a/packages/email/emails/transactions.tsx b/packages/email/emails/transactions.tsx
index 0314331149..78007f4689 100644
--- a/packages/email/emails/transactions.tsx
+++ b/packages/email/emails/transactions.tsx
@@ -203,7 +203,7 @@ export const TransactionsEmail = ({
                           </Text>
 
                           {transaction.status === "pending" && (
-                            <div className="flex space-x-1 items-center border rounded-md text-xs py-1 px-2 h-[22px] text-[#878787]">
+                            <div className="flex space-x-1 items-center border text-xs py-1 px-2 h-[22px] text-[#878787]">
                               <span>Pending</span>
                             </div>
                           )}