💵 Add ability to accept payments (#722)

This commit is contained in:
Luke Vella 2023-07-05 14:46:30 +01:00 committed by GitHub
parent 1c7c8c7678
commit 2ccf705a2c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 2021 additions and 604 deletions

View file

@ -1,4 +1,5 @@
export * from "./templates/finalized-host";
export * from "./templates/finalized-participant";
export * from "./templates/login";
export * from "./templates/new-comment";
export * from "./templates/new-participant";

View file

@ -13,6 +13,7 @@ import {
import { getDomain } from "./utils";
export const borderColor = "#E2E8F0";
export const Text = (
props: TextProps & { light?: boolean; small?: boolean },
) => {

View file

@ -1,8 +1,13 @@
import { Column, Row, Section } from "@react-email/components";
import { EmailLayout } from "./components/email-layout";
import { Button, Card, Text } from "./components/styled-components";
import { borderColor, Button, Text } from "./components/styled-components";
export interface FinalizeHostEmailProps {
date: string;
day: string;
dow: string;
time: string;
name: string;
title: string;
location: string | null;
@ -14,17 +19,54 @@ export const FinalizeHostEmail = ({
name = "Guest",
title = "Untitled Poll",
pollUrl = "https://rallly.co",
date = "Friday, 12th June 2020 at 12:00pm",
day = "12",
dow = "Fri",
date = "Friday, 12th June 2020",
time = "6:00 PM to 11:00 PM BST",
}: FinalizeHostEmailProps) => {
return (
<EmailLayout recipientName={name} preview="Final date booked!">
<Text>
Well done for finding a date for <strong>{title}</strong>!
<strong>{title}</strong> has been booked for:
</Text>
<Text>Your date has been booked for:</Text>
<Card>
<Text style={{ fontWeight: "bold", textAlign: "center" }}>{date}</Text>
</Card>
<Section>
<Row>
<Column style={{ width: 48 }}>
<Section
style={{
borderRadius: 5,
margin: 0,
width: 48,
height: 48,
textAlign: "center",
border: `1px solid ${borderColor}`,
}}
>
<Text
style={{ margin: "0 0 4px 0", fontSize: 10, lineHeight: 1 }}
>
{dow}
</Text>
<Text
style={{
fontSize: 20,
lineHeight: 1,
fontWeight: "bold",
margin: 0,
}}
>
{day}
</Text>
</Section>
</Column>
<Column style={{ paddingLeft: 16 }} align="left">
<Text style={{ margin: 0, fontWeight: "bold" }}>{date}</Text>
<Text light={true} style={{ margin: 0 }}>
{time}
</Text>
</Column>
</Row>
</Section>
<Text>
We&apos;ve notified participants and send them calendar invites.
</Text>

View file

@ -1,48 +1,76 @@
import { EmailLayout } from "./components/email-layout";
import { Button, Card, Text } from "./components/styled-components";
import { Column, Row, Section } from "@react-email/components";
export interface FinalizeHostEmailProps {
import { EmailLayout } from "./components/email-layout";
import { borderColor, Button, Text } from "./components/styled-components";
export interface FinalizeParticipantEmailProps {
date: string;
day: string;
dow: string;
time: string;
name: string;
title: string;
hostName: string;
location: string | null;
pollUrl: string;
attendees: string[];
}
export const FinalizeHostEmail = ({
export const FinalizeParticipantEmail = ({
name = "Guest",
title = "Untitled Poll",
location,
hostName = "Host",
pollUrl = "https://rallly.co",
attendees = ["Luke", "Leia", "Han"],
date = "Friday, 12th June 2020 at 12:00pm",
}: FinalizeHostEmailProps) => {
day = "12",
dow = "Fri",
date = "Friday, 12th June 2020",
time = "6:00 PM to 11:00 PM BST",
}: FinalizeParticipantEmailProps) => {
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>
<strong>{hostName}</strong> has booked <strong>{title}</strong> for the
following date:
</Text>
<Section>
<Row>
<Column style={{ width: 48 }}>
<Section
style={{
borderRadius: 5,
margin: 0,
width: 48,
height: 48,
textAlign: "center",
border: `1px solid ${borderColor}`,
}}
>
<Text
style={{ margin: "0 0 4px 0", fontSize: 10, lineHeight: 1 }}
>
{dow}
</Text>
<Text
style={{
fontSize: 20,
lineHeight: 1,
fontWeight: "bold",
margin: 0,
}}
>
{day}
</Text>
</Section>
</Column>
<Column style={{ paddingLeft: 16 }} align="left">
<Text style={{ margin: 0, fontWeight: "bold" }}>{date}</Text>
<Text light={true} style={{ margin: 0 }}>
{time}
</Text>
</Column>
</Row>
</Section>
<Text>Please find attached a calendar invite for this event.</Text>
<Text>
<Button href={pollUrl}>View Event</Button>
</Text>
@ -50,4 +78,4 @@ export const FinalizeHostEmail = ({
);
};
export default FinalizeHostEmail;
export default FinalizeParticipantEmail;