mirror of
https://github.com/lukevella/rallly.git
synced 2025-06-04 19:51:51 +02:00
⬆️ v3.0.0 (#704)
This commit is contained in:
Luke Vella
GitHub
parent
735056f25f
commit
c22b3abc4d
385 changed files with 19912 additions and 5250 deletions
|
|
@ -81,6 +81,7 @@ type SendEmailOptions<T extends TemplateName> = {
|
|||
to: string;
|
||||
subject: string;
|
||||
props: TemplateProps<T>;
|
||||
attachments?: Mail.Options["attachments"];
|
||||
};
|
||||
|
||||
export const sendEmail = async <T extends TemplateName>(
|
||||
|
|
@ -93,6 +94,7 @@ export const sendEmail = async <T extends TemplateName>(
|
|||
}
|
||||
|
||||
const Template = templates[templateName] as TemplateComponent<T>;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const html = render(<Template {...(options.props as any)} />);
|
||||
|
||||
try {
|
||||
|
|
@ -105,6 +107,7 @@ export const sendEmail = async <T extends TemplateName>(
|
|||
subject: options.subject,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
html,
|
||||
attachments: options.attachments,
|
||||
});
|
||||
} catch (e) {
|
||||
console.error("Error sending email", templateName, e);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export * from "./templates/finalized-host";
|
||||
export * from "./templates/login";
|
||||
export * from "./templates/new-comment";
|
||||
export * from "./templates/new-participant";
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import {
|
|||
|
||||
import { fontFamily, Section, Text } from "./styled-components";
|
||||
|
||||
interface EmailLayoutProps {
|
||||
export interface EmailLayoutProps {
|
||||
preview: string;
|
||||
recipientName: string;
|
||||
footNote?: React.ReactNode;
|
||||
|
|
@ -23,6 +23,7 @@ const containerStyles = {
|
|||
background: "white",
|
||||
fontFamily,
|
||||
padding: 16,
|
||||
border: "1px solid #E2E8F0",
|
||||
borderRadius: 5,
|
||||
};
|
||||
|
||||
|
|
@ -42,16 +43,15 @@ export const EmailLayout = ({
|
|||
children,
|
||||
footNote,
|
||||
}: React.PropsWithChildren<EmailLayoutProps>) => {
|
||||
const firstName = recipientName.split(" ")[0];
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<Preview>{preview}</Preview>
|
||||
<Body style={{ backgroundColor: "#e5e7eb", padding: "16px" }}>
|
||||
<Body style={{ backgroundColor: "#F3F4F6", padding: "16px" }}>
|
||||
<Container style={containerStyles}>
|
||||
<Img src={absoluteUrl("/logo.png")} alt="Rallly" width={128} />
|
||||
<Section style={sectionStyles}>
|
||||
<Text>Hi {firstName},</Text>
|
||||
<Text>Hi {recipientName},</Text>
|
||||
{children}
|
||||
{footNote ? (
|
||||
<Text
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export const Text = (
|
|||
margin: "16px 0",
|
||||
fontFamily,
|
||||
fontSize: small ? "14px" : "16px",
|
||||
color: light ? "#64748B" : "#374151",
|
||||
color: light ? "#64748B" : "#334155",
|
||||
lineHeight: "1.5",
|
||||
...props.style,
|
||||
}}
|
||||
|
|
@ -44,7 +44,7 @@ export const Button = (props: ButtonProps) => {
|
|||
style={{
|
||||
backgroundColor: "#4F46E5",
|
||||
borderRadius: "4px",
|
||||
padding: "8px 12px",
|
||||
padding: "12px 14px",
|
||||
fontFamily,
|
||||
fontSize: "16px",
|
||||
color: "white",
|
||||
|
|
@ -136,7 +136,7 @@ export const Card = (props: SectionProps) => {
|
|||
{...props}
|
||||
style={{
|
||||
borderRadius: "4px",
|
||||
backgroundColor: "#f3f4f6",
|
||||
backgroundColor: "#F9FAFB",
|
||||
paddingRight: "16px",
|
||||
paddingLeft: "16px",
|
||||
border: "1px solid #E2E8F0",
|
||||
|
|
|
|||
38
packages/emails/src/templates/finalized-host.tsx
Normal file
38
packages/emails/src/templates/finalized-host.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { EmailLayout } from "./components/email-layout";
|
||||
import { Button, Card, Text } from "./components/styled-components";
|
||||
|
||||
export interface FinalizeHostEmailProps {
|
||||
date: string;
|
||||
name: string;
|
||||
title: string;
|
||||
location: string | null;
|
||||
pollUrl: string;
|
||||
attendees: string[];
|
||||
}
|
||||
|
||||
export const FinalizeHostEmail = ({
|
||||
name = "Guest",
|
||||
title = "Untitled Poll",
|
||||
pollUrl = "https://rallly.co",
|
||||
date = "Friday, 12th June 2020 at 12:00pm",
|
||||
}: FinalizeHostEmailProps) => {
|
||||
return (
|
||||
<EmailLayout recipientName={name} preview="Final date booked!">
|
||||
<Text>
|
||||
Well done for finding a date for <strong>{title}</strong>!
|
||||
</Text>
|
||||
<Text>Your date has been booked for:</Text>
|
||||
<Card>
|
||||
<Text style={{ fontWeight: "bold", textAlign: "center" }}>{date}</Text>
|
||||
</Card>
|
||||
<Text>
|
||||
We've notified participants and send them calendar invites.
|
||||
</Text>
|
||||
<Text>
|
||||
<Button href={pollUrl}>View Event</Button>
|
||||
</Text>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default FinalizeHostEmail;
|
||||
53
packages/emails/src/templates/finalized-participant.tsx
Normal file
53
packages/emails/src/templates/finalized-participant.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import { EmailLayout } from "./components/email-layout";
|
||||
import { Button, Card, Text } from "./components/styled-components";
|
||||
|
||||
export interface FinalizeHostEmailProps {
|
||||
date: string;
|
||||
name: string;
|
||||
title: string;
|
||||
location: string | null;
|
||||
pollUrl: string;
|
||||
attendees: string[];
|
||||
}
|
||||
|
||||
export const FinalizeHostEmail = ({
|
||||
name = "Guest",
|
||||
title = "Untitled Poll",
|
||||
location,
|
||||
pollUrl = "https://rallly.co",
|
||||
attendees = ["Luke", "Leia", "Han"],
|
||||
date = "Friday, 12th June 2020 at 12:00pm",
|
||||
}: FinalizeHostEmailProps) => {
|
||||
return (
|
||||
<EmailLayout recipientName={name} preview="Final date booked!">
|
||||
<Text>You poll has been finalized.</Text>
|
||||
<Card>
|
||||
<Text>
|
||||
<strong>Title</strong>
|
||||
<br />
|
||||
{title}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Date</strong>
|
||||
<br />
|
||||
{date}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>Location</strong>
|
||||
<br />
|
||||
{location || "No location specified"}
|
||||
</Text>
|
||||
<Text>
|
||||
<strong>{`${attendees.length} attendees`}</strong>
|
||||
<br />
|
||||
{attendees.join(", ")}
|
||||
</Text>
|
||||
</Card>
|
||||
<Text>
|
||||
<Button href={pollUrl}>View Event</Button>
|
||||
</Text>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default FinalizeHostEmail;
|
||||
|
|
@ -1,11 +1,5 @@
|
|||
import { EmailLayout } from "./components/email-layout";
|
||||
import {
|
||||
Button,
|
||||
Domain,
|
||||
Link,
|
||||
Section,
|
||||
Text,
|
||||
} from "./components/styled-components";
|
||||
import { Button, Domain, Section, Text } from "./components/styled-components";
|
||||
import { getDomain } from "./components/utils";
|
||||
|
||||
interface NewParticipantConfirmationEmailProps {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,7 @@
|
|||
import { absoluteUrl } from "@rallly/utils";
|
||||
|
||||
import { EmailLayout } from "./components/email-layout";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Heading,
|
||||
Link,
|
||||
SubHeadingText,
|
||||
Text,
|
||||
} from "./components/styled-components";
|
||||
import { Button, Card, Link, Text } from "./components/styled-components";
|
||||
import { getDomain } from "./components/utils";
|
||||
|
||||
export interface NewPollEmailProps {
|
||||
|
|
@ -29,7 +22,7 @@ const ShareLink = ({
|
|||
participantLink: string;
|
||||
}>) => {
|
||||
return (
|
||||
<Button
|
||||
<Link
|
||||
href={`mailto:?subject=${encodeURIComponent(
|
||||
`Availability for ${title}`,
|
||||
)}&body=${encodeURIComponent(
|
||||
|
|
@ -37,24 +30,7 @@ const ShareLink = ({
|
|||
)}`}
|
||||
>
|
||||
{children}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
const LinkContainer = (props: { href: string }) => {
|
||||
return (
|
||||
<Text
|
||||
style={{
|
||||
borderRadius: "4px",
|
||||
backgroundColor: "white",
|
||||
padding: "12px",
|
||||
border: "1px solid #E2E8F0",
|
||||
}}
|
||||
>
|
||||
<Link href={props.href} style={{ letterSpacing: 1 }}>
|
||||
{props.href}
|
||||
</Link>
|
||||
</Text>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -62,7 +38,7 @@ export const NewPollEmail = ({
|
|||
title = "Untitled Poll",
|
||||
name = "John",
|
||||
adminLink = "https://rallly.co/admin/abcdefg123",
|
||||
participantLink = "https://rallly.co/p/wxyz9876",
|
||||
participantLink = "https://rallly.co/invite/wxyz9876",
|
||||
}: NewPollEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
|
|
@ -77,26 +53,15 @@ export const NewPollEmail = ({
|
|||
preview="Share your participant link to start collecting responses."
|
||||
>
|
||||
<Text>
|
||||
Your poll for <strong>{title}</strong> is live! Here are two links you
|
||||
will need to manage your poll.
|
||||
Your poll has been successfully created! Here are the details:
|
||||
</Text>
|
||||
<Card>
|
||||
<Heading>Admin link</Heading>
|
||||
<SubHeadingText>
|
||||
Use this link to view results and make changes to your poll.
|
||||
</SubHeadingText>
|
||||
<LinkContainer href={adminLink} />
|
||||
<Text>
|
||||
<Button href={adminLink}>Go to admin page</Button>
|
||||
<strong>Title:</strong> {title}
|
||||
<br />
|
||||
<strong>Invite Link:</strong>{" "}
|
||||
<Link href={participantLink}>{participantLink}</Link>
|
||||
</Text>
|
||||
</Card>
|
||||
<Card>
|
||||
<Heading>Participant link</Heading>
|
||||
<SubHeadingText>
|
||||
Copy this link and share it with your participants to start collecting
|
||||
responses.
|
||||
</SubHeadingText>
|
||||
<LinkContainer href={participantLink} />
|
||||
<Text>
|
||||
<ShareLink
|
||||
title={title}
|
||||
|
|
@ -107,6 +72,18 @@ export const NewPollEmail = ({
|
|||
</ShareLink>
|
||||
</Text>
|
||||
</Card>
|
||||
<Text>
|
||||
To invite participants to your poll, simply share the{" "}
|
||||
<strong>Invite Link</strong> above with them. They'll be able to
|
||||
vote on their preferred meeting times and dates.
|
||||
</Text>
|
||||
<Text>
|
||||
If you need to make any changes to your poll, or if you want to see the
|
||||
results so far, just click on the button below:
|
||||
</Text>
|
||||
<Text>
|
||||
<Button href={adminLink}>Manage Poll →</Button>
|
||||
</Text>
|
||||
</EmailLayout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue