From e2c4cc7ad2736028547837848a58e86f9b7e8eb3 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Wed, 17 Jan 2024 10:33:30 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Remove=20use=20of=20contex?=
 =?UTF-8?q?t=20from=20email=20package=20(#981)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/utils/emails.ts                     |  1 +
 packages/emails/src/send-email.tsx               | 16 ++++++++--------
 .../src/templates/components/email-context.tsx   | 16 +---------------
 .../src/templates/components/email-layout.tsx    |  6 ++++--
 .../templates/components/notification-email.tsx  |  7 +++++--
 .../templates/components/styled-components.tsx   |  6 +++---
 packages/emails/src/templates/finalized-host.tsx |  5 ++++-
 .../src/templates/finalized-participant.tsx      |  5 ++++-
 packages/emails/src/templates/login.tsx          | 12 +++++++-----
 packages/emails/src/templates/new-comment.tsx    |  2 ++
 .../templates/new-participant-confirmation.tsx   | 10 +++++++---
 .../emails/src/templates/new-participant.tsx     |  2 ++
 packages/emails/src/templates/new-poll.tsx       |  7 +++++--
 packages/emails/src/templates/register.tsx       |  8 ++++++--
 14 files changed, 59 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/utils/emails.ts b/apps/web/src/utils/emails.ts
index 504043f7af6..ebed1f8f311 100644
--- a/apps/web/src/utils/emails.ts
+++ b/apps/web/src/utils/emails.ts
@@ -21,5 +21,6 @@ export const emailClient = new EmailClient({
   context: {
     logoUrl: absoluteUrl("/logo.png"),
     baseUrl: absoluteUrl(""),
+    domain: absoluteUrl("").replace(/(^\w+:|^)\/\//, ""),
   },
 });
diff --git a/packages/emails/src/send-email.tsx b/packages/emails/src/send-email.tsx
index 5f8de65a847..510fd1eb1a9 100644
--- a/packages/emails/src/send-email.tsx
+++ b/packages/emails/src/send-email.tsx
@@ -13,8 +13,9 @@ type Templates = typeof templates;
 
 type TemplateName = keyof typeof templates;
 
-type TemplateProps<T extends TemplateName> = React.ComponentProps<
-  TemplateComponent<T>
+type TemplateProps<T extends TemplateName> = Omit<
+  React.ComponentProps<TemplateComponent<T>>,
+  "ctx"
 >;
 type TemplateComponent<T extends TemplateName> = Templates[T];
 
@@ -79,12 +80,11 @@ export class EmailClient {
   ) {
     const Template = templates[templateName] as TemplateComponent<T>;
     const html = render(
-      <EmailContext.Provider value={this.config.context}>
-        <Template
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          {...(options.props as any)}
-        />
-      </EmailContext.Provider>,
+      <Template
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        {...(options.props as any)}
+        ctx={this.config.context}
+      />,
     );
 
     try {
diff --git a/packages/emails/src/templates/components/email-context.tsx b/packages/emails/src/templates/components/email-context.tsx
index 48026adc457..dd285c5459b 100644
--- a/packages/emails/src/templates/components/email-context.tsx
+++ b/packages/emails/src/templates/components/email-context.tsx
@@ -1,19 +1,5 @@
-import React from "react";
-
 export type EmailContext = {
   logoUrl: string;
   baseUrl: string;
-};
-
-export const EmailContext = React.createContext<EmailContext>({
-  logoUrl: "/static/logo.png",
-  baseUrl: "",
-});
-
-export const useEmailContext = () => {
-  const context = React.useContext(EmailContext);
-  return {
-    ...context,
-    domain: context.baseUrl.replace(/(^\w+:|^)\/\//, ""),
-  };
+  domain: string;
 };
diff --git a/packages/emails/src/templates/components/email-layout.tsx b/packages/emails/src/templates/components/email-layout.tsx
index 80088b885e3..2af37023232 100644
--- a/packages/emails/src/templates/components/email-layout.tsx
+++ b/packages/emails/src/templates/components/email-layout.tsx
@@ -8,13 +8,14 @@ import {
   Preview,
 } from "@react-email/components";
 
-import { useEmailContext } from "./email-context";
+import { EmailContext } from "./email-context";
 import { fontFamily, Section, Text } from "./styled-components";
 
 export interface EmailLayoutProps {
   preview: string;
   recipientName: string;
   footNote?: React.ReactNode;
+  ctx: EmailContext;
 }
 
 const containerStyles = {
@@ -42,8 +43,9 @@ export const EmailLayout = ({
   recipientName = "Guest",
   children,
   footNote,
+  ctx,
 }: React.PropsWithChildren<EmailLayoutProps>) => {
-  const { logoUrl, baseUrl } = useEmailContext();
+  const { logoUrl, baseUrl } = ctx;
   return (
     <Html>
       <Head />
diff --git a/packages/emails/src/templates/components/notification-email.tsx b/packages/emails/src/templates/components/notification-email.tsx
index 83399f06c3f..ecb54450a62 100644
--- a/packages/emails/src/templates/components/notification-email.tsx
+++ b/packages/emails/src/templates/components/notification-email.tsx
@@ -1,4 +1,4 @@
-import { useEmailContext } from "./email-context";
+import { EmailContext } from "./email-context";
 import { EmailLayout } from "./email-layout";
 import { Button, Link, Text } from "./styled-components";
 
@@ -7,6 +7,7 @@ export interface NotificationBaseProps {
   title: string;
   pollUrl: string;
   disableNotificationsUrl: string;
+  ctx: EmailContext;
 }
 
 export interface NotificationEmailProps extends NotificationBaseProps {
@@ -19,10 +20,12 @@ export const NotificationEmail = ({
   disableNotificationsUrl,
   preview,
   children,
+  ctx,
 }: React.PropsWithChildren<NotificationEmailProps>) => {
-  const { domain } = useEmailContext();
+  const { domain } = ctx;
   return (
     <EmailLayout
+      ctx={ctx}
       recipientName={name}
       footNote={
         <>
diff --git a/packages/emails/src/templates/components/styled-components.tsx b/packages/emails/src/templates/components/styled-components.tsx
index 4e7da529f7d..427de35b3f7 100644
--- a/packages/emails/src/templates/components/styled-components.tsx
+++ b/packages/emails/src/templates/components/styled-components.tsx
@@ -10,7 +10,7 @@ import {
   TextProps,
 } from "@react-email/components";
 
-import { useEmailContext } from "./email-context";
+import { EmailContext } from "./email-context";
 
 export const borderColor = "#E2E8F0";
 export const Text = (
@@ -32,8 +32,8 @@ export const Text = (
   );
 };
 
-export const Domain = () => {
-  const { baseUrl, domain } = useEmailContext();
+export const Domain = ({ ctx }: { ctx: EmailContext }) => {
+  const { baseUrl, domain } = ctx;
   return <Link href={baseUrl}>{domain}</Link>;
 };
 
diff --git a/packages/emails/src/templates/finalized-host.tsx b/packages/emails/src/templates/finalized-host.tsx
index 0c7f2ae6fbc..82412355a88 100644
--- a/packages/emails/src/templates/finalized-host.tsx
+++ b/packages/emails/src/templates/finalized-host.tsx
@@ -1,5 +1,6 @@
 import { Column, Row, Section } from "@react-email/components";
 
+import { EmailContext } from "./components/email-context";
 import { EmailLayout } from "./components/email-layout";
 import { borderColor, Button, Text } from "./components/styled-components";
 
@@ -13,6 +14,7 @@ export interface FinalizeHostEmailProps {
   location: string | null;
   pollUrl: string;
   attendees: string[];
+  ctx: EmailContext;
 }
 
 export const FinalizeHostEmail = ({
@@ -23,9 +25,10 @@ export const FinalizeHostEmail = ({
   dow = "Fri",
   date = "Friday, 12th June 2020",
   time = "6:00 PM to 11:00 PM BST",
+  ctx,
 }: FinalizeHostEmailProps) => {
   return (
-    <EmailLayout recipientName={name} preview="Final date booked!">
+    <EmailLayout ctx={ctx} recipientName={name} preview="Final date booked!">
       <Text>
         <strong>{title}</strong> has been booked for:
       </Text>
diff --git a/packages/emails/src/templates/finalized-participant.tsx b/packages/emails/src/templates/finalized-participant.tsx
index 0598fb05a74..5dc1efba640 100644
--- a/packages/emails/src/templates/finalized-participant.tsx
+++ b/packages/emails/src/templates/finalized-participant.tsx
@@ -1,5 +1,6 @@
 import { Column, Row, Section } from "@react-email/components";
 
+import { EmailContext } from "./components/email-context";
 import { EmailLayout } from "./components/email-layout";
 import { borderColor, Button, Text } from "./components/styled-components";
 
@@ -14,6 +15,7 @@ export interface FinalizeParticipantEmailProps {
   location: string | null;
   pollUrl: string;
   attendees: string[];
+  ctx: EmailContext;
 }
 
 export const FinalizeParticipantEmail = ({
@@ -25,9 +27,10 @@ export const FinalizeParticipantEmail = ({
   dow = "Fri",
   date = "Friday, 12th June 2020",
   time = "6:00 PM to 11:00 PM BST",
+  ctx,
 }: FinalizeParticipantEmailProps) => {
   return (
-    <EmailLayout recipientName={name} preview="Final date booked!">
+    <EmailLayout ctx={ctx} recipientName={name} preview="Final date booked!">
       <Text>
         <strong>{hostName}</strong> has booked <strong>{title}</strong> for the
         following date:
diff --git a/packages/emails/src/templates/login.tsx b/packages/emails/src/templates/login.tsx
index 7fdfa80416a..b59d1f9952f 100644
--- a/packages/emails/src/templates/login.tsx
+++ b/packages/emails/src/templates/login.tsx
@@ -1,4 +1,4 @@
-import { useEmailContext } from "./components/email-context";
+import { EmailContext } from "./components/email-context";
 import { EmailLayout } from "./components/email-layout";
 import {
   Button,
@@ -13,21 +13,23 @@ interface LoginEmailProps {
   name: string;
   code: string;
   magicLink: string;
+  ctx: EmailContext;
 }
 
 export const LoginEmail = ({
   name = "Guest",
   code = "123456",
   magicLink = "https://rallly.co",
+  ctx,
 }: LoginEmailProps) => {
-  const { domain } = useEmailContext();
   return (
     <EmailLayout
+      ctx={ctx}
       footNote={
         <>
           You&apos;re receiving this email because a request was made to login
-          to <Domain />. If this wasn&apos;t you, let us know by replying to
-          this email.
+          to <Domain ctx={ctx} />. If this wasn&apos;t you, let us know by
+          replying to this email.
         </>
       }
       recipientName={name}
@@ -40,7 +42,7 @@ export const LoginEmail = ({
         <Heading>Option 1: Magic Link</Heading>
         <Text>Click this magic link to log in on this device.</Text>
         <Button href={magicLink} id="magicLink">
-          Log in to {domain}
+          Log in to {ctx.domain}
         </Button>
         <Text light={true}>This link will expire in 15 minutes.</Text>
       </Card>
diff --git a/packages/emails/src/templates/new-comment.tsx b/packages/emails/src/templates/new-comment.tsx
index c1bed0493e2..94a065ea65d 100644
--- a/packages/emails/src/templates/new-comment.tsx
+++ b/packages/emails/src/templates/new-comment.tsx
@@ -13,9 +13,11 @@ export const NewCommentEmail = ({
   authorName = "Someone",
   pollUrl = "https://rallly.co",
   disableNotificationsUrl = "https://rallly.co",
+  ctx,
 }: NewCommentEmailProps) => {
   return (
     <NotificationEmail
+      ctx={ctx}
       name={name}
       title={title}
       pollUrl={pollUrl}
diff --git a/packages/emails/src/templates/new-participant-confirmation.tsx b/packages/emails/src/templates/new-participant-confirmation.tsx
index 3d4a2d199f3..6a1268c3905 100644
--- a/packages/emails/src/templates/new-participant-confirmation.tsx
+++ b/packages/emails/src/templates/new-participant-confirmation.tsx
@@ -1,4 +1,4 @@
-import { useEmailContext } from "./components/email-context";
+import { EmailContext } from "./components/email-context";
 import { EmailLayout } from "./components/email-layout";
 import { Button, Domain, Section, Text } from "./components/styled-components";
 
@@ -6,19 +6,23 @@ interface NewParticipantConfirmationEmailProps {
   name: string;
   title: string;
   editSubmissionUrl: string;
+  ctx: EmailContext;
 }
 export const NewParticipantConfirmationEmail = ({
   title = "Untitled Poll",
   name = "John",
   editSubmissionUrl = "https://rallly.co",
+  ctx,
 }: NewParticipantConfirmationEmailProps) => {
-  const { domain } = useEmailContext();
+  const { domain } = ctx;
   return (
     <EmailLayout
+      ctx={ctx}
       footNote={
         <>
           You are receiving this email because a response was submitted on{" "}
-          <Domain />. If this wasn&apos;t you, please ignore this email.
+          <Domain ctx={ctx} />. If this wasn&apos;t you, please ignore this
+          email.
         </>
       }
       recipientName={name}
diff --git a/packages/emails/src/templates/new-participant.tsx b/packages/emails/src/templates/new-participant.tsx
index a7b927997da..28de72241f5 100644
--- a/packages/emails/src/templates/new-participant.tsx
+++ b/packages/emails/src/templates/new-participant.tsx
@@ -13,9 +13,11 @@ export const NewParticipantEmail = ({
   participantName = "Someone",
   pollUrl = "https://rallly.co",
   disableNotificationsUrl = "https://rallly.co",
+  ctx,
 }: NewParticipantEmailProps) => {
   return (
     <NotificationEmail
+      ctx={ctx}
       name={name}
       title={title}
       pollUrl={pollUrl}
diff --git a/packages/emails/src/templates/new-poll.tsx b/packages/emails/src/templates/new-poll.tsx
index 6f8bbfed78a..9753835643c 100644
--- a/packages/emails/src/templates/new-poll.tsx
+++ b/packages/emails/src/templates/new-poll.tsx
@@ -1,4 +1,4 @@
-import { useEmailContext } from "./components/email-context";
+import { EmailContext } from "./components/email-context";
 import { EmailLayout } from "./components/email-layout";
 import { Button, Card, Link, Text } from "./components/styled-components";
 
@@ -7,6 +7,7 @@ export interface NewPollEmailProps {
   name: string;
   adminLink: string;
   participantLink: string;
+  ctx: EmailContext;
 }
 
 const ShareLink = ({
@@ -37,10 +38,12 @@ export const NewPollEmail = ({
   name = "John",
   adminLink = "https://rallly.co/admin/abcdefg123",
   participantLink = "https://rallly.co/invite/wxyz9876",
+  ctx,
 }: NewPollEmailProps) => {
-  const { baseUrl, domain } = useEmailContext();
+  const { baseUrl, domain } = ctx;
   return (
     <EmailLayout
+      ctx={ctx}
       footNote={
         <>
           You are receiving this email because a new poll was created with this
diff --git a/packages/emails/src/templates/register.tsx b/packages/emails/src/templates/register.tsx
index 9e1ddfb67ba..d0495bb3018 100644
--- a/packages/emails/src/templates/register.tsx
+++ b/packages/emails/src/templates/register.tsx
@@ -1,3 +1,4 @@
+import { EmailContext } from "./components/email-context";
 import { EmailLayout } from "./components/email-layout";
 import {
   Domain,
@@ -9,19 +10,22 @@ import {
 interface RegisterEmailProps {
   name: string;
   code: string;
+  ctx: EmailContext;
 }
 
 export const RegisterEmail = ({
   name = "John",
   code = "123456",
+  ctx,
 }: RegisterEmailProps) => {
   return (
     <EmailLayout
+      ctx={ctx}
       footNote={
         <>
           You&apos;re receiving this email because a request was made to
-          register an account on <Domain />. If this wasn&apos;t you, please
-          ignore this email.
+          register an account on <Domain ctx={ctx} />. If this wasn&apos;t you,
+          please ignore this email.
         </>
       }
       recipientName={name}