Merge pull request #283 from midday-ai/feature/invoice-emails

Invoice Emails
midday-ai · Oct 23, 2024 · 61b0063 · 61b0063
2 parents 1cc7f4a + 6acfa39
commit 61b0063
Show file tree

Hide file tree

Showing 8 changed files with 402 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;