♻️ Remove use of context from email package (#981)

lukevella · Jan 17, 2024 · e2c4cc7 · e2c4cc7 · vercel · Jan 17, 2024
1 parent 668a4b5
commit e2c4cc7
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 44 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,24 +1,28 @@
-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";
 
 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
@@ -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
@@ -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
@@ -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}