mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-11 13:37:33 +02:00
✨ Send recovery url to users with expired checkout sessions (#1555)
This commit is contained in:
parent
5437b91c10
commit
9fdd5f3ea3
13 changed files with 341 additions and 23 deletions
|
@ -7,7 +7,7 @@ i18nInstance.init({
|
|||
});
|
||||
|
||||
export const previewEmailContext: EmailContext = {
|
||||
logoUrl: "https://rallly-public.s3.amazonaws.com/images/rallly-logo-mark.png",
|
||||
logoUrl: "https://d39ixtfgglw55o.cloudfront.net/images/rallly-logo-mark.png",
|
||||
baseUrl: "https://rallly.co",
|
||||
domain: "rallly.co",
|
||||
supportEmail: "support@rallly.co",
|
||||
|
|
|
@ -15,6 +15,7 @@ import { darkTextColor, fontFamily, Link, Text } from "./styled-components";
|
|||
export interface EmailLayoutProps {
|
||||
preview: string;
|
||||
ctx: EmailContext;
|
||||
poweredBy?: boolean;
|
||||
}
|
||||
|
||||
const containerStyles = {
|
||||
|
@ -30,6 +31,7 @@ export const EmailLayout = ({
|
|||
preview,
|
||||
children,
|
||||
ctx,
|
||||
poweredBy = true,
|
||||
}: React.PropsWithChildren<EmailLayoutProps>) => {
|
||||
const { logoUrl } = ctx;
|
||||
return (
|
||||
|
@ -48,23 +50,25 @@ export const EmailLayout = ({
|
|||
alt="Rallly Logo"
|
||||
/>
|
||||
{children}
|
||||
<Section style={{ marginTop: 32 }}>
|
||||
<Text light={true}>
|
||||
<Trans
|
||||
i18n={ctx.i18n}
|
||||
t={ctx.t}
|
||||
i18nKey="common_poweredBy"
|
||||
ns="emails"
|
||||
defaults="Powered by <a>{{domain}}</a>"
|
||||
values={{ domain: "rallly.co" }}
|
||||
components={{
|
||||
a: (
|
||||
<Link href="https://rallly.co?utm_source=email&utm_medium=transactional" />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</Section>
|
||||
{poweredBy ? (
|
||||
<Section>
|
||||
<Text light={true}>
|
||||
<Trans
|
||||
i18n={ctx.i18n}
|
||||
t={ctx.t}
|
||||
i18nKey="common_poweredBy"
|
||||
ns="emails"
|
||||
defaults="Powered by <a>{{domain}}</a>"
|
||||
values={{ domain: "rallly.co" }}
|
||||
components={{
|
||||
a: (
|
||||
<Link href="https://rallly.co?utm_source=email&utm_medium=transactional" />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</Section>
|
||||
) : null}
|
||||
</Container>
|
||||
</Body>
|
||||
</Html>
|
||||
|
|
|
@ -16,6 +16,7 @@ import type { EmailContext } from "../types";
|
|||
export const lightTextColor = "#4B5563";
|
||||
export const darkTextColor = "#1F2937";
|
||||
export const borderColor = "#E2E8F0";
|
||||
|
||||
export const Text = (
|
||||
props: TextProps & { light?: boolean; small?: boolean },
|
||||
) => {
|
||||
|
@ -48,14 +49,15 @@ export const Button = (props: React.ComponentProps<typeof UnstyledButton>) => {
|
|||
style={{
|
||||
backgroundColor: "#4F46E5",
|
||||
borderRadius: "4px",
|
||||
padding: "12px 14px",
|
||||
padding: "14px",
|
||||
fontFamily,
|
||||
boxSizing: "border-box",
|
||||
display: "block",
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
textAlign: "center",
|
||||
fontSize: "16px",
|
||||
fontSize: "14px",
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
}}
|
||||
/>
|
||||
|
@ -150,6 +152,36 @@ export const Card = (props: SectionProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
export const Signature = () => {
|
||||
return (
|
||||
<Section>
|
||||
<UnstyledText
|
||||
style={{
|
||||
fontSize: 16,
|
||||
margin: 0,
|
||||
fontWeight: "bold",
|
||||
color: darkTextColor,
|
||||
fontFamily,
|
||||
}}
|
||||
>
|
||||
Luke Vella
|
||||
</UnstyledText>
|
||||
<UnstyledText
|
||||
style={{ fontSize: 16, margin: 0, color: lightTextColor, fontFamily }}
|
||||
>
|
||||
Founder
|
||||
</UnstyledText>
|
||||
<img
|
||||
src="https://d39ixtfgglw55o.cloudfront.net/images/luke.jpg"
|
||||
alt="Luke Vella"
|
||||
style={{ borderRadius: "50%", marginTop: 16 }}
|
||||
width={48}
|
||||
height={48}
|
||||
/>
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
|
||||
export const trackingWide = {
|
||||
letterSpacing: 2,
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue