From c027c4779ee77edbef413e0478ebfc94302d273d Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <maximilian@kaske.org>
Date: Fri, 3 Jan 2025 14:20:12 +0100
Subject: [PATCH] chore: add react-email templates

---
 .../status-page/[domain]/subscribe/route.ts   |   2 +
 .../src/schema/status_reports/validation.ts   |   1 +
 packages/emails/emails/_components/footer.tsx |  20 +++
 packages/emails/emails/_components/layout.tsx |  28 +++
 packages/emails/emails/_components/styles.ts  |  42 +++++
 packages/emails/emails/alert.tsx              |  28 +--
 packages/emails/emails/followup.tsx           |   1 +
 packages/emails/emails/monitor-alert.tsx      | 162 ++++++++++++++++++
 packages/emails/emails/page-subscription.tsx  |  70 ++++++++
 packages/emails/emails/status-report.tsx      | 119 +++++++++++++
 packages/emails/emails/subscribe.tsx          |  25 ++-
 packages/emails/emails/team-invitation.tsx    |  61 +++++++
 packages/emails/emails/welcome.tsx            |   1 +
 packages/emails/src/client.tsx                | 112 ++++++++++++
 packages/emails/src/index.ts                  |   3 +-
 15 files changed, 653 insertions(+), 22 deletions(-)
 create mode 100644 packages/emails/emails/_components/footer.tsx
 create mode 100644 packages/emails/emails/_components/layout.tsx
 create mode 100644 packages/emails/emails/_components/styles.ts
 create mode 100644 packages/emails/emails/monitor-alert.tsx
 create mode 100644 packages/emails/emails/page-subscription.tsx
 create mode 100644 packages/emails/emails/status-report.tsx
 create mode 100644 packages/emails/emails/team-invitation.tsx

diff --git a/apps/web/src/app/status-page/[domain]/subscribe/route.ts b/apps/web/src/app/status-page/[domain]/subscribe/route.ts
index 05af15259..bf551d766 100644
--- a/apps/web/src/app/status-page/[domain]/subscribe/route.ts
+++ b/apps/web/src/app/status-page/[domain]/subscribe/route.ts
@@ -5,6 +5,8 @@ import { db } from "@openstatus/db/src/db";
 import { page, pageSubscriber } from "@openstatus/db/src/schema";
 import { SubscribeEmail, sendEmail } from "@openstatus/emails";
 
+// TODO: use trpc route
+
 export async function POST(
   req: Request,
   props: { params: Promise<{ domain: string }> },
diff --git a/packages/db/src/schema/status_reports/validation.ts b/packages/db/src/schema/status_reports/validation.ts
index 048bcc5fb..4fd6325cb 100644
--- a/packages/db/src/schema/status_reports/validation.ts
+++ b/packages/db/src/schema/status_reports/validation.ts
@@ -52,3 +52,4 @@ export type InsertStatusReportUpdate = z.infer<
   typeof insertStatusReportUpdateSchema
 >;
 export type StatusReportUpdate = z.infer<typeof selectStatusReportUpdateSchema>;
+export type StatusReportStatus = z.infer<typeof statusReportStatusSchema>;
diff --git a/packages/emails/emails/_components/footer.tsx b/packages/emails/emails/_components/footer.tsx
new file mode 100644
index 000000000..46b5b511d
--- /dev/null
+++ b/packages/emails/emails/_components/footer.tsx
@@ -0,0 +1,20 @@
+import { Link, Section, Text } from "@react-email/components";
+import { styles } from "./styles";
+
+export function Footer() {
+  return (
+    <Section style={{ textAlign: "center" }}>
+      <Text>
+        <Link style={styles.link} href="https://openstatus.dev">
+          Home Page
+        </Link>{" "}
+        ・{" "}
+        <Link style={styles.link} href="mailto:ping@openstatus.dev">
+          Contact Support
+        </Link>
+      </Text>
+
+      <Text>OpenStatus ・ 122 Rue Amelot ・ 75011 Paris, France</Text>
+    </Section>
+  );
+}
diff --git a/packages/emails/emails/_components/layout.tsx b/packages/emails/emails/_components/layout.tsx
new file mode 100644
index 000000000..7c978e871
--- /dev/null
+++ b/packages/emails/emails/_components/layout.tsx
@@ -0,0 +1,28 @@
+import { Container, Img, Link, Section } from "@react-email/components";
+import { Footer } from "./footer";
+import { styles } from "./styles";
+
+interface LayoutProps {
+  children?: React.ReactNode;
+  img?: {
+    src: string;
+    alt: string;
+  };
+}
+
+const defaultImg = {
+  src: "https://openstatus.dev/assets/logos/OpenStatus.png",
+  alt: "OpenStatus",
+};
+
+export function Layout({ children, img = defaultImg }: LayoutProps) {
+  return (
+    <Container style={styles.container}>
+      <Link href="https://openstatus.dev">
+        <Img src={img.src} width="36" height="36" alt={img.alt} />
+      </Link>
+      <Section style={styles.section}>{children}</Section>
+      <Footer />
+    </Container>
+  );
+}
diff --git a/packages/emails/emails/_components/styles.ts b/packages/emails/emails/_components/styles.ts
new file mode 100644
index 000000000..21d4708d0
--- /dev/null
+++ b/packages/emails/emails/_components/styles.ts
@@ -0,0 +1,42 @@
+export const colors = {
+  success: "#51b363",
+  danger: "#ec6041",
+  warning: "#ffd60a",
+  info: "#3d9eff",
+};
+
+export const styles = {
+  main: {
+    backgroundColor: "#ffffff",
+    color: "#24292e",
+    fontFamily:
+      '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+  },
+  container: {
+    maxWidth: "480px",
+    margin: "0 auto",
+    padding: "20px 0 48px",
+  },
+  section: {
+    padding: "24px",
+    margin: "24px 0",
+    border: "solid 1px #dedede",
+    borderRadius: "5px",
+  },
+  button: {
+    backgroundColor: "#24292e",
+    color: "#ffffff",
+    padding: "8px 16px",
+    borderRadius: "6px",
+  },
+  link: {
+    textDecoration: "underline",
+    color: colors.info,
+  },
+  bold: {
+    fontWeight: "bold",
+  },
+  row: {
+    borderTop: "1px solid #dedede",
+  },
+} satisfies Record<string, React.CSSProperties>;
diff --git a/packages/emails/emails/alert.tsx b/packages/emails/emails/alert.tsx
index e2e0cea49..f331cc775 100644
--- a/packages/emails/emails/alert.tsx
+++ b/packages/emails/emails/alert.tsx
@@ -13,38 +13,37 @@ import {
   Section,
   Text,
 } from "@react-email/components";
-import { z } from "zod";
 
-export const EmailDataSchema = z.object({
-  monitorName: z.string(),
-  monitorUrl: z.string().url(),
-  recipientName: z.string(),
-});
+interface AlertProps {
+  monitorName: string;
+  monitorUrl: string;
+  recipientName: string;
+}
 
-const Alert = ({ data }: { data: z.infer<typeof EmailDataSchema> }) => {
+const Alert = ({ monitorName, monitorUrl, recipientName }: AlertProps) => {
   return (
     <Html>
       <Head>
         <title>New incident detected 🚨</title>
-        <Preview>New incident detected : {data.monitorName} 🚨</Preview>
+        <Preview>New incident detected : {monitorName} 🚨</Preview>
         <Body className="mx-auto my-auto bg-white font-sans">
           <Container className="mx-auto my-[40px] w-[465px] rounded border border-[#eaeaea] border-solid p-[20px]">
             <Heading className="mx-0 my-[30px] p-0 text-center font-normal text-[24px] text-black">
               New incident detected!
             </Heading>
             <Text className="text-[14px] text-black leading-[24px]">
-              Hello {data.recipientName}, <br />
+              Hello {recipientName}, <br />
               We have detected a new incident.
             </Text>
 
             <Section className="my-[30px] rounded border border-gray-200 border-solid bg-gray-100 p-2">
               <Row>
                 <Column className="text-lg">Monitor</Column>
-                <Column>{data.monitorName}</Column>
+                <Column>{monitorName}</Column>
               </Row>
               <Row className="mt-2">
                 <Column className="text-lg">URL</Column>
-                <Column>{data.monitorUrl}</Column>
+                <Column>{monitorUrl}</Column>
               </Row>
             </Section>
 
@@ -63,4 +62,11 @@ const Alert = ({ data }: { data: z.infer<typeof EmailDataSchema> }) => {
   );
 };
 
+Alert.PreviewProps = {
+  monitorName: "My Monitor",
+  monitorUrl: "https://www.example.com",
+  recipientName: "John Doe",
+} satisfies AlertProps;
+
 export { Alert };
+export default Alert;
diff --git a/packages/emails/emails/followup.tsx b/packages/emails/emails/followup.tsx
index 5bbd0de85..760ac47b4 100644
--- a/packages/emails/emails/followup.tsx
+++ b/packages/emails/emails/followup.tsx
@@ -37,3 +37,4 @@ const FollowUpEmail = () => {
 };
 
 export { FollowUpEmail };
+export default FollowUpEmail;
diff --git a/packages/emails/emails/monitor-alert.tsx b/packages/emails/emails/monitor-alert.tsx
new file mode 100644
index 000000000..646dbd4e0
--- /dev/null
+++ b/packages/emails/emails/monitor-alert.tsx
@@ -0,0 +1,162 @@
+/** @jsxImportSource react */
+
+import {
+  Body,
+  Button,
+  CodeInline,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Img,
+  Preview,
+  Row,
+  Text,
+} from "@react-email/components";
+import { Layout } from "./_components/layout";
+import { colors, styles } from "./_components/styles";
+
+export interface MonitorAlertProps {
+  type: "degraded" | "up" | "down";
+  name?: string;
+  url?: string;
+  method?: string;
+  status?: string;
+  latency?: string;
+  location?: string;
+  timestamp?: string;
+}
+
+function getIcon(type: MonitorAlertProps["type"]): {
+  src: string;
+  color: string;
+} {
+  switch (type) {
+    case "up":
+      return {
+        src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZWNrIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4=",
+        color: colors.success,
+      };
+    case "down":
+      return {
+        src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXgiPjxwYXRoIGQ9Ik0xOCA2IDYgMTgiLz48cGF0aCBkPSJtNiA2IDEyIDEyIi8+PC9zdmc+",
+        color: colors.danger,
+      };
+    case "degraded":
+      return {
+        src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXRyaWFuZ2xlLWFsZXJ0Ij48cGF0aCBkPSJtMjEuNzMgMTgtOC0xNGEyIDIgMCAwIDAtMy40OCAwbC04IDE0QTIgMiAwIDAgMCA0IDIxaDE2YTIgMiAwIDAgMCAxLjczLTMiLz48cGF0aCBkPSJNMTIgOXY0Ii8+PHBhdGggZD0iTTEyIDE3aC4wMSIvPjwvc3ZnPg==",
+        color: colors.warning,
+      };
+  }
+}
+
+export const MonitorAlertEmail = (props: MonitorAlertProps) => (
+  <Html>
+    <Head />
+    <Preview>
+      A fine-grained personal access token has been added to your account
+    </Preview>
+    <Body style={styles.main}>
+      <Layout>
+        <Container
+          style={{
+            backgroundColor: getIcon(props.type).color,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "40px",
+            height: "40px",
+            borderRadius: "50%",
+          }}
+        >
+          <Img src={getIcon(props.type).src} width="24" height="24" />
+        </Container>
+        <Row>
+          <Column>
+            <Heading as="h4">{props.name}</Heading>
+          </Column>
+          <Column style={{ textAlign: "right" }}>
+            <Text
+              style={{
+                color: getIcon(props.type).color,
+                textTransform: "uppercase",
+              }}
+            >
+              {props.type}
+            </Text>
+          </Column>
+        </Row>
+        <Row style={styles.row}>
+          <Column>
+            <Text style={styles.bold}>Request</Text>
+          </Column>
+          <Column
+            style={{
+              textAlign: "right",
+              flexWrap: "wrap",
+              wordWrap: "break-word",
+              maxWidth: "300px",
+            }}
+          >
+            <Text>
+              <CodeInline>{props.method}</CodeInline> {props.url}
+            </Text>
+          </Column>
+        </Row>
+        <Row style={styles.row}>
+          <Column>
+            <Text style={styles.bold}>Status</Text>
+          </Column>
+          <Column style={{ textAlign: "right" }}>
+            <Text>{props.status}</Text>
+          </Column>
+        </Row>
+        <Row style={styles.row}>
+          <Column>
+            <Text style={styles.bold}>Latency</Text>
+          </Column>
+          <Column style={{ textAlign: "right" }}>
+            <Text>{props.latency}</Text>
+          </Column>
+        </Row>
+        <Row style={styles.row}>
+          <Column>
+            <Text style={styles.bold}>Location</Text>
+          </Column>
+          <Column style={{ textAlign: "right" }}>
+            <Text>{props.location}</Text>
+          </Column>
+        </Row>
+        <Row style={styles.row}>
+          <Column>
+            <Text style={styles.bold}>Timestamp</Text>
+          </Column>
+          <Column style={{ textAlign: "right" }}>
+            <Text>{props.timestamp}</Text>
+          </Column>
+        </Row>
+        <Row style={styles.row}>
+          <Column>
+            <Text style={{ textAlign: "center" }}>
+              <Button style={styles.button}>View details</Button>
+            </Text>
+          </Column>
+        </Row>
+      </Layout>
+    </Body>
+  </Html>
+);
+
+MonitorAlertEmail.PreviewProps = {
+  type: "down",
+  name: "Ping Pong",
+  url: "https://openstatus.dev/ping",
+  method: "GET",
+  status: "200",
+  latency: "300ms",
+  location: "San Francisco",
+  timestamp: "2021-10-13T17:29:00Z",
+} satisfies MonitorAlertProps;
+
+export default MonitorAlertEmail;
diff --git a/packages/emails/emails/page-subscription.tsx b/packages/emails/emails/page-subscription.tsx
new file mode 100644
index 000000000..6452efeea
--- /dev/null
+++ b/packages/emails/emails/page-subscription.tsx
@@ -0,0 +1,70 @@
+/** @jsxImportSource react */
+
+import {
+  Body,
+  Head,
+  Heading,
+  Html,
+  Link,
+  Preview,
+  Text,
+} from "@react-email/components";
+import { Layout } from "./_components/layout";
+import { styles } from "./_components/styles";
+
+export interface PageSubscriptionProps {
+  token: string;
+  page: string;
+  domain: string;
+  img?: {
+    src: string;
+    alt: string;
+  };
+}
+
+const PageSubscriptionEmail = ({
+  token,
+  page,
+  domain,
+  img,
+}: PageSubscriptionProps) => {
+  return (
+    <Html>
+      <Head />
+      <Preview>Confirm your subscription to "{page}" Status Page</Preview>
+      <Body style={styles.main}>
+        <Layout img={img}>
+          <Heading as="h3">
+            Confirm your subscription to "{page}" Status Page
+          </Heading>
+          <Text>
+            You are receiving this email because you subscribed to receive
+            updates from "{page}" Status Page.
+          </Text>
+          <Text>
+            To confirm your subscription, please click the link below. The link
+            is valid for 7 days. If you believe this is a mistake, please ignore
+            this email.
+          </Text>
+          <Text>
+            <Link
+              style={styles.link}
+              href={`https://${domain}.openstatus.dev/verify/${token}`}
+            >
+              Confirm subscription
+            </Link>
+          </Text>
+        </Layout>
+      </Body>
+    </Html>
+  );
+};
+
+PageSubscriptionEmail.PreviewProps = {
+  token: "token",
+  page: "OpenStatus",
+  domain: "slug",
+} satisfies PageSubscriptionProps;
+
+export { PageSubscriptionEmail };
+export default PageSubscriptionEmail;
diff --git a/packages/emails/emails/status-report.tsx b/packages/emails/emails/status-report.tsx
new file mode 100644
index 000000000..d90bd5abe
--- /dev/null
+++ b/packages/emails/emails/status-report.tsx
@@ -0,0 +1,119 @@
+/** @jsxImportSource react */
+
+import {
+  Body,
+  Column,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Row,
+  Text,
+} from "@react-email/components";
+import { Layout } from "./_components/layout";
+import { colors, styles } from "./_components/styles";
+
+export interface StatusReportProps {
+  pageTitle: string;
+  status: "investigating" | "identified" | "monitoring" | "resolved";
+  date: string;
+  message: string;
+  reportTitle: string;
+  monitors: string[]; // array of monitor names
+}
+
+function getStatusColor(status: string) {
+  switch (status) {
+    case "investigating":
+      return colors.danger;
+    case "identified":
+      return colors.warning;
+    case "resolved":
+      return colors.success;
+    case "monitoring":
+      return colors.info;
+    default:
+      return colors.success;
+  }
+}
+
+function StatusReportEmail({
+  status,
+  date,
+  message,
+  reportTitle,
+  pageTitle,
+  monitors,
+}: StatusReportProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>There are new updates on "{pageTitle}" page</Preview>
+      <Body style={styles.main}>
+        <Layout>
+          <Row>
+            <Column>
+              <Heading as="h3">{pageTitle}</Heading>
+            </Column>
+            <Column style={{ textAlign: "right" }}>
+              <Text
+                style={{
+                  color: getStatusColor(status),
+                  textTransform: "uppercase",
+                }}
+              >
+                {status}
+              </Text>
+            </Column>
+          </Row>
+          <Row style={styles.row}>
+            <Column>
+              <Text style={styles.bold}>Title</Text>
+            </Column>
+            <Column style={{ textAlign: "right" }}>
+              <Text>{reportTitle}</Text>
+            </Column>
+          </Row>
+          <Row style={styles.row}>
+            <Column>
+              <Text style={styles.bold}>Date</Text>
+            </Column>
+            <Column style={{ textAlign: "right" }}>
+              <Text>{date}</Text>
+            </Column>
+          </Row>
+          <Row style={styles.row}>
+            <Column>
+              <Text style={styles.bold}>Affected</Text>
+            </Column>
+            <Column style={{ textAlign: "right" }}>
+              <Text style={{ flexWrap: "wrap", wordWrap: "break-word" }}>
+                {monitors.join(", ")}
+              </Text>
+            </Column>
+          </Row>
+          <Row style={styles.row}>
+            <Column>
+              <Text>{message}</Text>
+            </Column>
+          </Row>
+        </Layout>
+      </Body>
+    </Html>
+  );
+}
+
+// TODO: add unsubscribe link!
+
+StatusReportEmail.PreviewProps = {
+  pageTitle: "OpenStatus Status",
+  reportTitle: "API Unavaible",
+  status: "investigating",
+  date: "2021-07-19",
+  message:
+    "The API is down, including the webhook. We are actively investigating the issue and will provide updates as soon as possible.",
+  monitors: ["OpenStatus API", "OpenStatus Webhook"],
+};
+
+export { StatusReportEmail };
+export default StatusReportEmail;
diff --git a/packages/emails/emails/subscribe.tsx b/packages/emails/emails/subscribe.tsx
index 994817f61..248d663b1 100644
--- a/packages/emails/emails/subscribe.tsx
+++ b/packages/emails/emails/subscribe.tsx
@@ -2,22 +2,20 @@
 
 import { Body, Head, Html, Link, Preview } from "@react-email/components";
 
-export const SubscribeEmail = ({
-  token,
-  page,
-  domain,
-}: {
+interface SubscribeProps {
   token: string;
   page: string;
   domain: string;
-}) => {
+}
+
+const SubscribeEmail = ({ token, page, domain }: SubscribeProps) => {
   return (
     <Html>
       <Head>
-        <title>Confirm your subscription to {page} Status Page</title>
-        <Preview>Confirm your subscription to {page} Status Page</Preview>
+        <title>Confirm your subscription to "{page}" Status Page</title>
+        <Preview>Confirm your subscription to "{page}" Status Page</Preview>
         <Body>
-          <p>Confirm your subscription to {page} Status Page</p>
+          <p>Confirm your subscription to "{page}" Status Page</p>
           <p>
             You are receiving this email because you subscribed to receive
             updates from {page} Status Page.
@@ -38,3 +36,12 @@ export const SubscribeEmail = ({
     </Html>
   );
 };
+
+SubscribeEmail.PreviewProps = {
+  token: "token",
+  page: "OpenStatus",
+  domain: "slug",
+} satisfies SubscribeProps;
+
+export { SubscribeEmail };
+export default SubscribeEmail;
diff --git a/packages/emails/emails/team-invitation.tsx b/packages/emails/emails/team-invitation.tsx
new file mode 100644
index 000000000..14b8c518b
--- /dev/null
+++ b/packages/emails/emails/team-invitation.tsx
@@ -0,0 +1,61 @@
+/** @jsxImportSource react */
+
+import {
+  Body,
+  Head,
+  Heading,
+  Html,
+  Link,
+  Preview,
+  Text,
+} from "@react-email/components";
+import { Layout } from "./_components/layout";
+import { styles } from "./_components/styles";
+
+export interface TeamInvitationProps {
+  invitedBy: string; // email address
+  workspaceName?: string;
+  token: string;
+}
+
+const TeamInvitationEmail = ({
+  token,
+  workspaceName,
+  invitedBy,
+}: TeamInvitationProps) => {
+  return (
+    <Html>
+      <Head />
+      <Preview>You have been invited to join OpenStatus.dev</Preview>
+      <Body style={styles.main}>
+        <Layout>
+          <Heading as="h3">
+            You have been invited to join{" "}
+            {`"${workspaceName}" workspace` || "OpenStatus.dev"} by {invitedBy}
+          </Heading>
+          <Text>
+            Click here to access the workspace:{" "}
+            <Link
+              style={styles.link}
+              href={`https://openstatus.dev/app/invite?token=${token}`}
+            >
+              accept invitation
+            </Link>
+          </Text>
+          <Text>
+            If you don't have an account yet, it will require you to create one.
+          </Text>
+        </Layout>
+      </Body>
+    </Html>
+  );
+};
+
+TeamInvitationEmail.PreviewProps = {
+  token: "token",
+  workspaceName: "OpenStatus",
+  invitedBy: "max@openstatus.dev",
+} satisfies TeamInvitationProps;
+
+export { TeamInvitationEmail };
+export default TeamInvitationEmail;
diff --git a/packages/emails/emails/welcome.tsx b/packages/emails/emails/welcome.tsx
index 86a95acc9..21c394207 100644
--- a/packages/emails/emails/welcome.tsx
+++ b/packages/emails/emails/welcome.tsx
@@ -58,3 +58,4 @@ const WelcomeEmail = () => {
 };
 
 export { WelcomeEmail };
+export default WelcomeEmail;
diff --git a/packages/emails/src/client.tsx b/packages/emails/src/client.tsx
index efd2fbdfb..7d66da167 100644
--- a/packages/emails/src/client.tsx
+++ b/packages/emails/src/client.tsx
@@ -3,6 +3,22 @@
 import { render } from "@react-email/render";
 import { Resend } from "resend";
 import { FollowUpEmail } from "../emails/followup";
+import {
+  MonitorAlertEmail,
+  type MonitorAlertProps,
+} from "../emails/monitor-alert";
+import {
+  PageSubscriptionEmail,
+  type PageSubscriptionProps,
+} from "../emails/page-subscription";
+import {
+  StatusReportEmail,
+  type StatusReportProps,
+} from "../emails/status-report";
+import {
+  TeamInvitationEmail,
+  type TeamInvitationProps,
+} from "../emails/team-invitation";
 
 export class EmailClient {
   public readonly client: Resend;
@@ -33,4 +49,100 @@ export class EmailClient {
       console.error(`Error sending follow up email to ${req.to}: ${err}`);
     }
   }
+
+  public async sendStatusReportUpdate(req: StatusReportProps & { to: string }) {
+    if (process.env.NODE_ENV === "development") return;
+
+    try {
+      const html = await render(<StatusReportEmail {...req} />);
+      const result = await this.client.emails.send({
+        from: `${req.pageTitle} <notifications@openstatus.dev>`,
+        subject: req.reportTitle,
+        to: req.to,
+        html,
+      });
+
+      if (!result.error) {
+        console.log(`Sent status report update email to ${req.to}`);
+        return;
+      }
+
+      throw result.error;
+    } catch (err) {
+      console.error(
+        `Error sending status report update email to ${req.to}: ${err}`,
+      );
+    }
+  }
+
+  public async sendTeamInvitation(req: TeamInvitationProps & { to: string }) {
+    if (process.env.NODE_ENV === "development") return;
+
+    try {
+      const html = await render(<TeamInvitationEmail {...req} />);
+      const result = await this.client.emails.send({
+        from: `${req.workspaceName ?? "OpenStatus"} <notifications@openstatus.dev>`,
+        subject: `You've been invited to join ${req.workspaceName ?? "OpenStatus"}`,
+        to: req.to,
+        html,
+      });
+
+      if (!result.error) {
+        console.log(`Sent team invitation email to ${req.to}`);
+        return;
+      }
+
+      throw result.error;
+    } catch (err) {
+      console.error(`Error sending team invitation email to ${req.to}: ${err}`);
+    }
+  }
+
+  public async sendMonitorAlert(req: MonitorAlertProps & { to: string }) {
+    if (process.env.NODE_ENV === "development") return;
+
+    try {
+      const html = await render(<MonitorAlertEmail {...req} />);
+      const result = await this.client.emails.send({
+        from: "OpenStatus <notifications@openstatus.dev>",
+        subject: `${req.name}: ${req.type.toUpperCase()}`,
+        to: req.to,
+        html,
+      });
+
+      if (!result.error) {
+        console.log(`Sent monitor alert email to ${req.to}`);
+        return;
+      }
+
+      throw result.error;
+    } catch (err) {
+      console.error(`Error sending monitor alert to ${req.to}: ${err}`);
+    }
+  }
+
+  public async sendPageSubscription(
+    req: PageSubscriptionProps & { to: string },
+  ) {
+    if (process.env.NODE_ENV === "development") return;
+
+    try {
+      const html = await render(<PageSubscriptionEmail {...req} />);
+      const result = await this.client.emails.send({
+        from: `${req.page} <notifications@openstatus.dev>`,
+        subject: "Status page subscription",
+        to: req.to,
+        html,
+      });
+
+      if (!result.error) {
+        console.log(`Sent page subscription email to ${req.to}`);
+        return;
+      }
+
+      throw result.error;
+    } catch (err) {
+      console.error(`Error sending page subscription to ${req.to}: ${err}`);
+    }
+  }
 }
diff --git a/packages/emails/src/index.ts b/packages/emails/src/index.ts
index a5b53c875..c92555187 100644
--- a/packages/emails/src/index.ts
+++ b/packages/emails/src/index.ts
@@ -1,4 +1,4 @@
-import { Alert, EmailDataSchema } from "../emails/alert";
+import { Alert } from "../emails/alert";
 import { FollowUpEmail } from "../emails/followup";
 import { SubscribeEmail } from "../emails/subscribe";
 import { WelcomeEmail } from "../emails/welcome";
@@ -8,7 +8,6 @@ export {
   WelcomeEmail,
   validateEmailNotDisposable,
   Alert,
-  EmailDataSchema,
   SubscribeEmail,
   FollowUpEmail,
 };
-- 
2.51.2