Send mailing list emails

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/emails/src/MailingListSubscription.tsx

@@ -0,0 +1,46 @@
+import { Button, Hr, Link, Section, Text } from "@react-email/components";
+import * as React from "react";
+import EmailLayout, {
+  bodyText,
+  button,
+  buttonContainer,
+  footerText,
+} from "./components/EmailLayout";
+
+export const MailingListSubscription = () => {
+  return (
+    <EmailLayout
+      subject={`${"{{.OrganizationName}}"} – Confirm Your Compliance Updates Subscription`}
+    >
+      <Text style={bodyText}>
+        You requested to subscribe to compliance updates from{" "}
+        <strong>{"{{.OrganizationName}}"}</strong>.
+      </Text>
+
+      <Text style={bodyText}>
+        Please click the button below to confirm your subscription.
+      </Text>
+
+      <Section style={buttonContainer}>
+        <Button style={button} href={"{{.ConfirmURL}}"}>
+          Confirm Subscription
+        </Button>
+      </Section>
+
+      <Hr style={{ borderColor: "#ecefec", margin: "8px 0 20px" }} />
+
+      <Text style={{ ...footerText, textAlign: "center" }}>
+        If you did not request this subscription, or no longer want to receive
+        these emails,{" "}
+        <Link
+          href={"{{.UnsubscribeURL}}"}
+          style={{ color: "#374151", textDecoration: "underline", fontWeight: "500" }}
+        >
+          unsubscribe here.
+        </Link>
+      </Text>
+    </EmailLayout>
+  );
+};
+
+export default MailingListSubscription;

packages/emails/src/MailingListUnsubscription.tsx

@@ -0,0 +1,26 @@
+import { Hr, Text } from "@react-email/components";
+import * as React from "react";
+import EmailLayout, { bodyText, footerText } from "./components/EmailLayout";
+
+export const MailingListUnsubscription = () => {
+  return (
+    <EmailLayout
+      subject={`${"{{.OrganizationName}}"} – You've been unsubscribed`}
+    >
+      <Text style={bodyText}>
+        You've been successfully unsubscribed from{" "}
+        <strong>{"{{.OrganizationName}}"}</strong>'s compliance updates. You
+        will no longer receive notifications when new information is published
+        on their compliance page.
+      </Text>
+
+      <Hr style={{ borderColor: "#ecefec", margin: "8px 0 20px" }} />
+
+      <Text style={{ ...footerText, textAlign: "center" }}>
+        This email was sent to confirm your unsubscription request.
+      </Text>
+    </EmailLayout>
+  );
+};
+
+export default MailingListUnsubscription;

packages/emails/src/MailingListUpdates.tsx

@@ -0,0 +1,48 @@
+import { Button, Hr, Link, Section, Text } from "@react-email/components";
+import * as React from "react";
+import EmailLayout, {
+  bodyText,
+  button,
+  buttonContainer,
+  footerText,
+} from "./components/EmailLayout";
+
+export const MailingListUpdates = () => {
+  return (
+    <EmailLayout
+      subject={`${"{{.OrganizationName}}"} – ${"{{.NewsTitle}}"}`}
+    >
+      <Text style={bodyText}>
+        {"{{.OrganizationName}}"} has published a new compliance update.
+      </Text>
+
+      <Text style={{ ...bodyText, fontWeight: "600", fontSize: "18px" }}>
+        {"{{.NewsTitle}}"}
+      </Text>
+
+      <Text style={bodyText}>{"{{.NewsBody}}"}</Text>
+
+      <Section style={buttonContainer}>
+        <Button style={button} href={"{{.CompliancePageURL}}"}>
+          View Compliance Page
+        </Button>
+      </Section>
+
+      <Hr style={{ borderColor: "#ecefec", margin: "8px 0 20px" }} />
+
+      <Text style={{ ...footerText, textAlign: "center" }}>
+        You are receiving this email because you subscribed to compliance
+        updates from <strong>{"{{.OrganizationName}}"}</strong>. To
+        unsubscribe,{" "}
+        <Link
+          href={"{{.UnsubscribeURL}}"}
+          style={{ color: "#374151", textDecoration: "underline", fontWeight: "500" }}
+        >
+          click here.
+        </Link>
+      </Text>
+    </EmailLayout>
+  );
+};
+
+export default MailingListUpdates;