3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-17 00:15:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Luke Vella 2024-01-17 10:33:30 +07:00 • committed by GitHub
parent 668a4b5798
commit e2c4cc7ad2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 59 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/emails/src/send-email.tsx
View file

@ -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 {

16
packages/emails/src/templates/components/email-context.tsx
View file

@ -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;
};

6
packages/emails/src/templates/components/email-layout.tsx
View file

@ -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 />

7
packages/emails/src/templates/components/notification-email.tsx
View file

@ -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={
<>

6
packages/emails/src/templates/components/styled-components.tsx
View file

@ -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>;
};

5
packages/emails/src/templates/finalized-host.tsx
View file

@ -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>

5
packages/emails/src/templates/finalized-participant.tsx
View file

@ -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:

12
packages/emails/src/templates/login.tsx
View file

@ -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>

2
packages/emails/src/templates/new-comment.tsx
View file

@ -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}

10
packages/emails/src/templates/new-participant-confirmation.tsx
View file

@ -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}

2
packages/emails/src/templates/new-participant.tsx
View file

@ -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}

7
packages/emails/src/templates/new-poll.tsx
View file

@ -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

8
packages/emails/src/templates/register.tsx
View file

@ -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}