mirror of
https://github.com/lukevella/rallly.git
synced 2025-06-05 04:02:21 +02:00
♻️ Update react-email package (#1001)
This commit is contained in:
Luke Vella
GitHub
parent
317244ef28
commit
7e213b0b4c
24 changed files with 2493 additions and 1913 deletions
|
|
@ -39,19 +39,10 @@
|
|||
"devDependencies": {
|
||||
"@next/bundle-analyzer": "^12.3.4",
|
||||
"@rallly/tsconfig": "*",
|
||||
"@types/accept-language-parser": "^1.5.3",
|
||||
"@types/color-hash": "^1.0.2",
|
||||
"@types/lodash": "^4.14.178",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-big-calendar": "^0.31.0",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react-linkify": "^1.0.1",
|
||||
"@types/smoothscroll-polyfill": "^0.3.1",
|
||||
"cheerio": "^1.0.0-rc.12",
|
||||
"cross-env": "^7.0.3",
|
||||
"i18next-scanner": "^4.2.0",
|
||||
"i18next-scanner-typescript": "^1.1.1",
|
||||
"smtp-tester": "^2.0.1",
|
||||
"wait-on": "^6.0.1"
|
||||
"i18next-scanner-typescript": "^1.1.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,7 +68,8 @@
|
|||
"react-hook-form-persist": "^3.0.0",
|
||||
"react-hot-toast": "^2.4.0",
|
||||
"react-i18next": "^12.1.4",
|
||||
"react-linkify": "^1.0.0-alpha",
|
||||
"linkifyjs": "^4.1.3",
|
||||
"linkify-react": "^4.1.3",
|
||||
"react-remove-scroll": "^2.5.6",
|
||||
"react-use": "^17.4.0",
|
||||
"smoothscroll-polyfill": "^0.4.4",
|
||||
|
|
@ -83,10 +84,7 @@
|
|||
"@types/accept-language-parser": "^1.5.3",
|
||||
"@types/color-hash": "^1.0.2",
|
||||
"@types/lodash": "^4.14.178",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-big-calendar": "^0.31.0",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"@types/react-linkify": "^1.0.1",
|
||||
"@types/react-big-calendar": "^1.8.8",
|
||||
"@types/smoothscroll-polyfill": "^0.3.1",
|
||||
"cheerio": "^1.0.0-rc.12",
|
||||
"cross-env": "^7.0.3",
|
||||
|
|
|
|||
|
|
@ -2,62 +2,66 @@ import { AnimatePresence, m } from "framer-motion";
|
|||
import Cookies from "js-cookie";
|
||||
import Link from "next/link";
|
||||
import * as React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { createPortal } from "react-dom";
|
||||
|
||||
import { getPortal } from "@/utils/selectors";
|
||||
|
||||
import CookiesIllustration from "./cookie-consent/cookies.svg";
|
||||
|
||||
const CookieConsentPopover: React.FunctionComponent = () => {
|
||||
const CookieConsentPopover = () => {
|
||||
const [visible, setVisible] = React.useState(true);
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<AnimatePresence>
|
||||
{visible ? (
|
||||
<m.div
|
||||
variants={{
|
||||
enter: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: "spring", delay: 2, duration: 1 },
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: 10,
|
||||
transition: { duration: 0.1 },
|
||||
},
|
||||
}}
|
||||
initial={{ opacity: 0, y: 100 }}
|
||||
animate="enter"
|
||||
exit="exit"
|
||||
className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
|
||||
>
|
||||
<CookiesIllustration className="absolute -top-6" />
|
||||
<div className="mb-3">
|
||||
Your privacy is important to us. We only use cookies to improve the
|
||||
browsing experience on this website.
|
||||
</div>
|
||||
<div className="flex items-center space-x-6">
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="hover:text-primary-600 text-gray-500"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
|
||||
setVisible(false);
|
||||
return (
|
||||
<>
|
||||
{createPortal(
|
||||
<AnimatePresence>
|
||||
{visible ? (
|
||||
<m.div
|
||||
variants={{
|
||||
enter: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { type: "spring", delay: 2, duration: 1 },
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
y: 10,
|
||||
transition: { duration: 0.1 },
|
||||
},
|
||||
}}
|
||||
className="bg-primary-600 hover:bg-primary-600/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1 font-semibold text-white shadow-sm transition-all focus:ring-2"
|
||||
initial={{ opacity: 0, y: 100 }}
|
||||
animate="enter"
|
||||
exit="exit"
|
||||
className="fixed bottom-8 right-8 z-50 w-60 rounded-lg bg-white p-4 pt-8 text-sm shadow-lg"
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</m.div>
|
||||
) : null}
|
||||
</AnimatePresence>,
|
||||
getPortal(),
|
||||
<CookiesIllustration className="absolute -top-6" />
|
||||
<div className="mb-3">
|
||||
Your privacy is important to us. We only use cookies to improve
|
||||
the browsing experience on this website.
|
||||
</div>
|
||||
<div className="flex items-center space-x-6">
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
className="hover:text-primary-600 text-gray-500"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => {
|
||||
Cookies.set("rallly_cookie_consent", "1", { expires: 365 });
|
||||
setVisible(false);
|
||||
}}
|
||||
className="bg-primary-600 hover:bg-primary-600/90 focus:ring-primary-200 active:bg-primary-600/90 grow rounded-md px-5 py-1 font-semibold text-white shadow-sm transition-all focus:ring-2"
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
</m.div>
|
||||
) : null}
|
||||
</AnimatePresence>,
|
||||
getPortal(),
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import "./rbc-overrides.css";
|
|||
import dayjs from "dayjs";
|
||||
import { XIcon } from "lucide-react";
|
||||
import React from "react";
|
||||
import { Calendar } from "react-big-calendar";
|
||||
import { Calendar, CalendarProps } from "react-big-calendar";
|
||||
import { createBreakpoint } from "react-use";
|
||||
|
||||
import { getDuration } from "../../../utils/date-time-utils";
|
||||
|
|
@ -17,6 +17,12 @@ const localizer = dayjsLocalizer(dayjs);
|
|||
|
||||
const useDevice = createBreakpoint({ desktop: 720, mobile: 360 });
|
||||
|
||||
/**
|
||||
* Not sure what's wrong with the type definitions for react-big-calendar but it's not working properly.
|
||||
* This is a temporary fix that overrides their types which ideally we wouldn't have to do.
|
||||
*/
|
||||
const CalendarTempFix = Calendar as React.ComponentType<CalendarProps>;
|
||||
|
||||
const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
|
||||
options,
|
||||
onNavigate,
|
||||
|
|
@ -36,7 +42,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
|
|||
|
||||
return (
|
||||
<div className="relative flex h-[600px]">
|
||||
<Calendar
|
||||
<CalendarTempFix
|
||||
className="absolute inset-0"
|
||||
events={options.map((option) => {
|
||||
if (option.type === "date") {
|
||||
|
|
@ -61,6 +67,7 @@ const WeekCalendar: React.FunctionComponent<DateTimePickerProps> = ({
|
|||
(option) =>
|
||||
!(
|
||||
option.type === "timeSlot" &&
|
||||
event.start &&
|
||||
option.start === formatDateWithoutTz(event.start) &&
|
||||
event.end &&
|
||||
option.end === formatDateWithoutTz(event.end)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
|
||||
import Linkify from "linkify-react";
|
||||
import Link from "next/link";
|
||||
import * as React from "react";
|
||||
import ReactLinkify from "react-linkify";
|
||||
|
||||
export const truncateLink = (href: string, text: string, key: number) => {
|
||||
const textWithoutProtocol = text.replace(/^https?:\/\//i, "");
|
||||
|
|
@ -45,11 +45,21 @@ export const truncateLink = (href: string, text: string, key: number) => {
|
|||
}
|
||||
};
|
||||
|
||||
const TruncatedLinkify: React.FunctionComponent<{
|
||||
children?: React.ReactNode;
|
||||
}> = ({ children }) => {
|
||||
const TruncatedLinkify = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<ReactLinkify componentDecorator={truncateLink}>{children}</ReactLinkify>
|
||||
<Linkify
|
||||
options={{
|
||||
render: ({ attributes, content }) => {
|
||||
return truncateLink(
|
||||
attributes.href,
|
||||
content,
|
||||
attributes.key as number,
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Linkify>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,8 @@
|
|||
"zod": "^3.22.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.48",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"dotenv-cli": "^7.1.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^3.2.4",
|
||||
|
|
|
|||
|
|
@ -10,20 +10,19 @@
|
|||
"main": "./src/index.ts",
|
||||
"types": "./src/index.ts",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-ses": "^3.292.0",
|
||||
"@aws-sdk/credential-provider-node": "^3.292.0",
|
||||
"@react-email/components": "0.0.2",
|
||||
"@react-email/render": "0.0.6",
|
||||
"clsx": "^1.2.1",
|
||||
"nodemailer": "^6.9.1",
|
||||
"@aws-sdk/client-ses": "^3.501.0",
|
||||
"@aws-sdk/credential-provider-node": "^3.501.0",
|
||||
"@react-email/components": "^0.0.14",
|
||||
"@react-email/render": "^0.0.12",
|
||||
"nodemailer": "^6.9.8",
|
||||
"preview-email": "^3.0.19",
|
||||
"react-email": "^1.9.1"
|
||||
"react-email": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rallly/tailwind-config": "*",
|
||||
"@rallly/tsconfig": "*",
|
||||
"@rallly/utils": "*",
|
||||
"@types/nodemailer": "^6.4.7",
|
||||
"@types/preview-email": "^3.0.1"
|
||||
"@types/nodemailer": "^6.4.14",
|
||||
"@types/preview-email": "^3.0.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import previewEmail from "preview-email";
|
|||
import React from "react";
|
||||
|
||||
import * as templates from "./templates";
|
||||
import { EmailContext } from "./templates/components/email-context";
|
||||
import { EmailContext } from "./templates/_components/email-context";
|
||||
|
||||
type Templates = typeof templates;
|
||||
|
||||
|
|
|
|||
11
packages/emails/src/templates/_components/email-context.tsx
Normal file
11
packages/emails/src/templates/_components/email-context.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export type EmailContext = {
|
||||
logoUrl: string;
|
||||
baseUrl: string;
|
||||
domain: string;
|
||||
};
|
||||
|
||||
export const defaultEmailContext = {
|
||||
logoUrl: "https://rallly.co/logo.png",
|
||||
baseUrl: "https://rallly.co",
|
||||
domain: "rallly.co",
|
||||
};
|
||||
90
packages/emails/src/templates/_components/email-layout.tsx
Normal file
90
packages/emails/src/templates/_components/email-layout.tsx
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import {
|
||||
Body,
|
||||
Container,
|
||||
Head,
|
||||
Html,
|
||||
Img,
|
||||
Link,
|
||||
Preview,
|
||||
Tailwind,
|
||||
} from "@react-email/components";
|
||||
|
||||
import { EmailContext } from "./email-context";
|
||||
import { Section, Text } from "./styled-components";
|
||||
|
||||
export interface EmailLayoutProps {
|
||||
preview: string;
|
||||
recipientName: string;
|
||||
footNote?: React.ReactNode;
|
||||
ctx: EmailContext;
|
||||
}
|
||||
|
||||
const sectionStyles = {
|
||||
marginTop: "16px",
|
||||
marginBottom: "16px",
|
||||
};
|
||||
|
||||
export const EmailLayout = ({
|
||||
preview,
|
||||
recipientName = "Guest",
|
||||
children,
|
||||
footNote,
|
||||
ctx,
|
||||
}: React.PropsWithChildren<EmailLayoutProps>) => {
|
||||
const { logoUrl, baseUrl } = ctx;
|
||||
return (
|
||||
<Tailwind>
|
||||
<Html>
|
||||
<Head />
|
||||
<Preview>{preview}</Preview>
|
||||
<Body className="bg-gray-50 py-5">
|
||||
<Container className="w-full rounded-md border border-solid border-gray-200 bg-white p-4">
|
||||
<Img src={logoUrl} alt="Rallly" width={128} />
|
||||
<Section style={sectionStyles}>
|
||||
<Text>Hi {recipientName},</Text>
|
||||
{children}
|
||||
</Section>
|
||||
{footNote ? (
|
||||
<Section className="border-t border-solid border-gray-200">
|
||||
<Text className="text-sm text-gray-500">{footNote}</Text>
|
||||
</Section>
|
||||
) : null}
|
||||
<Section className="my-0 font-sans text-sm text-gray-500">
|
||||
<Link className="text-gray-500" href={baseUrl}>
|
||||
Home
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link
|
||||
className="text-gray-500"
|
||||
href="https://twitter.com/ralllyco"
|
||||
>
|
||||
Twitter
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link
|
||||
className="text-gray-500"
|
||||
href="https://github.com/lukevella/rallly"
|
||||
>
|
||||
Github
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link
|
||||
className="text-gray-500"
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
|
||||
>
|
||||
Donate
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link
|
||||
className="text-gray-500"
|
||||
href={`mailto:${process.env["SUPPORT_EMAIL"]}`}
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</Section>
|
||||
</Container>
|
||||
</Body>
|
||||
</Html>
|
||||
</Tailwind>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
import {
|
||||
Button as UnstyledButton,
|
||||
ButtonProps,
|
||||
Heading as UnstyledHeading,
|
||||
Link as UnstyledLink,
|
||||
LinkProps,
|
||||
|
|
@ -37,7 +36,7 @@ export const Domain = ({ ctx }: { ctx: EmailContext }) => {
|
|||
return <Link href={baseUrl}>{domain}</Link>;
|
||||
};
|
||||
|
||||
export const Button = (props: ButtonProps) => {
|
||||
export const Button = (props: React.ComponentProps<typeof UnstyledButton>) => {
|
||||
return (
|
||||
<UnstyledButton
|
||||
{...props}
|
||||
|
|
@ -79,14 +78,9 @@ export const Heading = (
|
|||
<UnstyledHeading
|
||||
{...props}
|
||||
as={as}
|
||||
className="font-sans font-bold text-gray-900"
|
||||
style={{
|
||||
marginTop: "16px",
|
||||
marginBottom: "8px",
|
||||
letterSpacing: "-0.75px",
|
||||
fontFamily: "sans-serif",
|
||||
fontWeight: "bold",
|
||||
fontSize: fontSize[as],
|
||||
color: "#1E293B",
|
||||
...props.style,
|
||||
}}
|
||||
/>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export type EmailContext = {
|
||||
logoUrl: string;
|
||||
baseUrl: string;
|
||||
domain: string;
|
||||
};
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import {
|
||||
Body,
|
||||
Container,
|
||||
Head,
|
||||
Html,
|
||||
Img,
|
||||
Link,
|
||||
Preview,
|
||||
} from "@react-email/components";
|
||||
|
||||
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 = {
|
||||
maxWidth: "600px",
|
||||
margin: "0 auto",
|
||||
background: "white",
|
||||
fontFamily,
|
||||
padding: 16,
|
||||
border: "1px solid #E2E8F0",
|
||||
borderRadius: 5,
|
||||
};
|
||||
|
||||
const sectionStyles = {
|
||||
marginTop: "16px",
|
||||
marginBottom: "16px",
|
||||
};
|
||||
|
||||
const linkStyles = {
|
||||
color: "#64748B",
|
||||
marginRight: "8px",
|
||||
};
|
||||
|
||||
export const EmailLayout = ({
|
||||
preview,
|
||||
recipientName = "Guest",
|
||||
children,
|
||||
footNote,
|
||||
ctx,
|
||||
}: React.PropsWithChildren<EmailLayoutProps>) => {
|
||||
const { logoUrl, baseUrl } = ctx;
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<Preview>{preview}</Preview>
|
||||
<Body style={{ backgroundColor: "#F3F4F6", padding: "16px" }}>
|
||||
<Container style={containerStyles}>
|
||||
<Img src={logoUrl} alt="Rallly" width={128} />
|
||||
<Section style={sectionStyles}>
|
||||
<Text>Hi {recipientName},</Text>
|
||||
{children}
|
||||
{footNote ? (
|
||||
<Text
|
||||
style={{
|
||||
color: "#64748B",
|
||||
fontFamily,
|
||||
paddingTop: 16,
|
||||
marginTop: 32,
|
||||
borderTop: "1px solid #e2e8f0",
|
||||
}}
|
||||
>
|
||||
{footNote}
|
||||
</Text>
|
||||
) : null}
|
||||
</Section>
|
||||
<Section style={{ ...sectionStyles, fontSize: 14, marginBottom: 0 }}>
|
||||
<Link style={linkStyles} href={baseUrl}>
|
||||
Home
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link style={linkStyles} href="https://twitter.com/ralllyco">
|
||||
Twitter
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link style={linkStyles} href="https://github.com/lukevella/rallly">
|
||||
Github
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link
|
||||
style={linkStyles}
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
|
||||
>
|
||||
Donate
|
||||
</Link>
|
||||
<span> • </span>
|
||||
<Link
|
||||
style={linkStyles}
|
||||
href={`mailto:${process.env["SUPPORT_EMAIL"]}`}
|
||||
>
|
||||
Contact
|
||||
</Link>
|
||||
</Section>
|
||||
</Container>
|
||||
</Body>
|
||||
</Html>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
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";
|
||||
import { defaultEmailContext, EmailContext } from "./_components/email-context";
|
||||
import { EmailLayout } from "./_components/email-layout";
|
||||
import { borderColor, Button, Text } from "./_components/styled-components";
|
||||
|
||||
export interface FinalizeHostEmailProps {
|
||||
date: string;
|
||||
|
|
@ -25,7 +25,7 @@ export const FinalizeHostEmail = ({
|
|||
dow = "Fri",
|
||||
date = "Friday, 12th June 2020",
|
||||
time = "6:00 PM to 11:00 PM BST",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: FinalizeHostEmailProps) => {
|
||||
return (
|
||||
<EmailLayout ctx={ctx} recipientName={name} preview="Final date booked!">
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
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";
|
||||
import { defaultEmailContext, EmailContext } from "./_components/email-context";
|
||||
import { EmailLayout } from "./_components/email-layout";
|
||||
import { borderColor, Button, Text } from "./_components/styled-components";
|
||||
|
||||
export interface FinalizeParticipantEmailProps {
|
||||
date: string;
|
||||
|
|
@ -27,7 +27,7 @@ export const FinalizeParticipantEmail = ({
|
|||
dow = "Fri",
|
||||
date = "Friday, 12th June 2020",
|
||||
time = "6:00 PM to 11:00 PM BST",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: FinalizeParticipantEmailProps) => {
|
||||
return (
|
||||
<EmailLayout ctx={ctx} recipientName={name} preview="Final date booked!">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { EmailContext } from "./components/email-context";
|
||||
import { EmailLayout } from "./components/email-layout";
|
||||
import { defaultEmailContext, EmailContext } from "./_components/email-context";
|
||||
import { EmailLayout } from "./_components/email-layout";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
|
|
@ -7,7 +7,7 @@ import {
|
|||
Heading,
|
||||
Text,
|
||||
trackingWide,
|
||||
} from "./components/styled-components";
|
||||
} from "./_components/styled-components";
|
||||
|
||||
interface LoginEmailProps {
|
||||
name: string;
|
||||
|
|
@ -20,7 +20,7 @@ export const LoginEmail = ({
|
|||
name = "Guest",
|
||||
code = "123456",
|
||||
magicLink = "https://rallly.co",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: LoginEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { defaultEmailContext } from "./_components/email-context";
|
||||
import NotificationEmail, {
|
||||
NotificationBaseProps,
|
||||
} from "./components/notification-email";
|
||||
import { Text } from "./components/styled-components";
|
||||
} from "./_components/notification-email";
|
||||
import { Text } from "./_components/styled-components";
|
||||
|
||||
export interface NewCommentEmailProps extends NotificationBaseProps {
|
||||
authorName: string;
|
||||
|
|
@ -13,7 +14,7 @@ export const NewCommentEmail = ({
|
|||
authorName = "Someone",
|
||||
pollUrl = "https://rallly.co",
|
||||
disableNotificationsUrl = "https://rallly.co",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: NewCommentEmailProps) => {
|
||||
return (
|
||||
<NotificationEmail
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { EmailContext } from "./components/email-context";
|
||||
import { EmailLayout } from "./components/email-layout";
|
||||
import { Button, Domain, Section, Text } from "./components/styled-components";
|
||||
import { defaultEmailContext, EmailContext } from "./_components/email-context";
|
||||
import { EmailLayout } from "./_components/email-layout";
|
||||
import { Button, Domain, Section, Text } from "./_components/styled-components";
|
||||
|
||||
interface NewParticipantConfirmationEmailProps {
|
||||
name: string;
|
||||
|
|
@ -12,7 +12,7 @@ export const NewParticipantConfirmationEmail = ({
|
|||
title = "Untitled Poll",
|
||||
name = "John",
|
||||
editSubmissionUrl = "https://rallly.co",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: NewParticipantConfirmationEmailProps) => {
|
||||
const { domain } = ctx;
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { defaultEmailContext } from "./_components/email-context";
|
||||
import NotificationEmail, {
|
||||
NotificationBaseProps,
|
||||
} from "./components/notification-email";
|
||||
import { Text } from "./components/styled-components";
|
||||
} from "./_components/notification-email";
|
||||
import { Text } from "./_components/styled-components";
|
||||
|
||||
export interface NewParticipantEmailProps extends NotificationBaseProps {
|
||||
participantName: string;
|
||||
|
|
@ -13,7 +14,7 @@ export const NewParticipantEmail = ({
|
|||
participantName = "Someone",
|
||||
pollUrl = "https://rallly.co",
|
||||
disableNotificationsUrl = "https://rallly.co",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: NewParticipantEmailProps) => {
|
||||
return (
|
||||
<NotificationEmail
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { EmailContext } from "./components/email-context";
|
||||
import { EmailLayout } from "./components/email-layout";
|
||||
import { Button, Card, Link, Text } from "./components/styled-components";
|
||||
import { defaultEmailContext, EmailContext } from "./_components/email-context";
|
||||
import { EmailLayout } from "./_components/email-layout";
|
||||
import { Button, Card, Link, Text } from "./_components/styled-components";
|
||||
|
||||
export interface NewPollEmailProps {
|
||||
title: string;
|
||||
|
|
@ -38,7 +38,7 @@ export const NewPollEmail = ({
|
|||
name = "John",
|
||||
adminLink = "https://rallly.co/admin/abcdefg123",
|
||||
participantLink = "https://rallly.co/invite/wxyz9876",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: NewPollEmailProps) => {
|
||||
const { baseUrl, domain } = ctx;
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { EmailContext } from "./components/email-context";
|
||||
import { EmailLayout } from "./components/email-layout";
|
||||
import { defaultEmailContext, EmailContext } from "./_components/email-context";
|
||||
import { EmailLayout } from "./_components/email-layout";
|
||||
import {
|
||||
Domain,
|
||||
Heading,
|
||||
Text,
|
||||
trackingWide,
|
||||
} from "./components/styled-components";
|
||||
} from "./_components/styled-components";
|
||||
|
||||
interface RegisterEmailProps {
|
||||
name: string;
|
||||
|
|
@ -16,7 +16,7 @@ interface RegisterEmailProps {
|
|||
export const RegisterEmail = ({
|
||||
name = "John",
|
||||
code = "123456",
|
||||
ctx,
|
||||
ctx = defaultEmailContext,
|
||||
}: RegisterEmailProps) => {
|
||||
return (
|
||||
<EmailLayout
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
Loading…
Add table
Add a link
Reference in a new issue