Skip to content

Commit 4ee4d1d

Browse files
mftsgabrielmfern
mfts
and
gabrielmfern
authored
feat(demo): "Year in Review" email template (#1832)
Co-authored-by: gabriel miranda <[email protected]>
1 parent d26cc4b commit 4ee4d1d

File tree

3 files changed

+260
-49
lines changed

3 files changed

+260
-49
lines changed

‎apps/demo/emails/notifications/papermark-year-in-review.tsx

+231
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
import {
2+
Body,
3+
Column,
4+
Container,
5+
Head,
6+
Heading,
7+
Hr,
8+
Html,
9+
Link,
10+
Preview,
11+
Row,
12+
Section,
13+
Tailwind,
14+
Text,
15+
} from "@react-email/components";
16+
17+
interface PapermarkYearInReviewEmailProps {
18+
year?: number;
19+
minutesSpentOnDocs?: number;
20+
uploadedDocuments?: number;
21+
sharedLinks?: number;
22+
receivedViews?: number;
23+
topDocumentName?: string;
24+
topDocumentViews?: number;
25+
mostActiveMonth?: string;
26+
mostActiveMonthViews?: number;
27+
sharerPercentile?: number;
28+
viewingLocations?: string[];
29+
}
30+
31+
export default function PapermarkYearInReviewEmail({
32+
year,
33+
minutesSpentOnDocs,
34+
uploadedDocuments,
35+
sharedLinks,
36+
receivedViews,
37+
topDocumentName,
38+
topDocumentViews,
39+
mostActiveMonth,
40+
mostActiveMonthViews,
41+
sharerPercentile,
42+
viewingLocations = [],
43+
}: PapermarkYearInReviewEmailProps) {
44+
return (
45+
<Html>
46+
<Head />
47+
<Preview>See your stats from 2024</Preview>
48+
<Tailwind>
49+
<Body className="bg-white font-sans">
50+
<Container className="mx-auto w-full max-w-[600px] p-0">
51+
<Section className="p-8 text-center">
52+
<Text className="mx-0 mb-8 mt-4 p-0 text-center text-2xl font-normal">
53+
<span className="font-bold tracking-tighter">Papermark</span>
54+
</Text>
55+
<Text className="text-sm font-normal uppercase tracking-wider">
56+
{year} in review
57+
</Text>
58+
<Heading className="my-4 text-4xl font-medium leading-tight">
59+
Your Year with Papermark
60+
</Heading>
61+
<Text className="mb-8 text-lg leading-8">
62+
What a year it&apos;s been! Let&apos;s take a look at how
63+
you&apos;ve used Papermark to share your important documents.
64+
</Text>
65+
<Link
66+
href="#"
67+
className="inline-flex items-center rounded-full bg-gray-900 px-12 py-4 text-center text-sm font-bold text-white no-underline"
68+
>
69+
Share your stats
70+
</Link>
71+
</Section>
72+
73+
<Section className="my-6 rounded-2xl bg-[#fb7a00]/10 bg-[radial-gradient(circle_at_bottom_right,#fb7a00_0%,transparent_60%)] p-8 text-center">
74+
<Heading className="m-0 text-3xl font-medium text-[#a63b00]">
75+
Viewers spent
76+
</Heading>
77+
<Text className="my-4 text-7xl font-bold leading-none text-gray-900">
78+
{minutesSpentOnDocs}
79+
</Text>
80+
<Text className="mb-4 text-3xl font-medium text-gray-900">
81+
minutes on your documents
82+
</Text>
83+
<Text className="text-sm leading-5 text-gray-900">
84+
That&apos;s a lot of engagement! Your documents are resonating
85+
with your visitors.
86+
</Text>
87+
88+
<Hr className="mt-6" style={{ borderColor: "#fb7a00" }} />
89+
<Heading className="pt-5 text-xs font-medium uppercase tracking-wider text-gray-900">
90+
Your activity
91+
</Heading>
92+
<Row className="mt-5">
93+
<Column className="w-1/3 text-center">
94+
<Text className="text-sm font-medium text-[#a63b00]">
95+
You uploaded
96+
</Text>
97+
<Text className="my-1 text-4xl font-bold text-gray-900">
98+
{uploadedDocuments}
99+
</Text>
100+
<Text className="text-2xl text-gray-900">documents</Text>
101+
</Column>
102+
<Column className="w-1/3 text-center">
103+
<Text className="text-sm font-medium text-[#a63b00]">
104+
You shared
105+
</Text>
106+
<Text className="my-1 text-4xl font-bold text-gray-900">
107+
{sharedLinks}
108+
</Text>
109+
<Text className="text-2xl text-gray-900">links</Text>
110+
</Column>
111+
<Column className="w-1/3 text-center">
112+
<Text className="text-sm font-medium text-[#a63b00]">
113+
You received
114+
</Text>
115+
<Text className="my-1 text-4xl font-bold text-gray-900">
116+
{receivedViews}
117+
</Text>
118+
<Text className="text-2xl text-gray-900">views</Text>
119+
</Column>
120+
</Row>
121+
</Section>
122+
123+
<Section className="my-6 rounded-2xl bg-[#4b5563]/10 bg-[radial-gradient(circle_at_bottom_right,#4b5563_0%,transparent_60%)] p-8 text-center">
124+
<Heading className="m-0 text-3xl font-medium text-gray-800">
125+
Your top document
126+
</Heading>
127+
<Text className="my-4 text-2xl font-bold leading-none text-gray-900">
128+
&quot;{topDocumentName}&quot;
129+
</Text>
130+
<Text className="mb-4 text-5xl font-medium text-gray-900">
131+
{topDocumentViews} views
132+
</Text>
133+
<Text className="text-sm leading-5 text-gray-900">
134+
This document really caught your visitor&apos;s attention!
135+
</Text>
136+
</Section>
137+
138+
<Section className="my-6 rounded-2xl bg-[#e4c5a0]/10 bg-[radial-gradient(circle_at_bottom_right,#e4c5a0_0%,transparent_60%)] p-8 text-center">
139+
<Heading className="m-0 text-3xl font-medium text-[#9c7b4a]">
140+
Your most active month
141+
</Heading>
142+
<Text className="my-4 text-5xl font-bold leading-none text-gray-900">
143+
{mostActiveMonth}
144+
</Text>
145+
<Text className="mb-4 text-3xl font-medium text-gray-900">
146+
with {mostActiveMonthViews} views
147+
</Text>
148+
<Text className="text-sm leading-5 text-gray-900">
149+
{mostActiveMonth} was your busiest month. What did you share
150+
that got so much attention?
151+
</Text>
152+
153+
<Hr className="mt-6" style={{ borderColor: "#e4c5a0" }} />
154+
<Heading className="pt-5 text-xs font-medium uppercase tracking-wider text-gray-900">
155+
You&apos;re in the top
156+
</Heading>
157+
<Text className="my-4 text-7xl font-bold leading-none text-gray-900">
158+
{sharerPercentile}%
159+
</Text>
160+
<Text className="mb-4 text-xl font-medium text-gray-900">
161+
of sharers on Papermark
162+
</Text>
163+
<Text className="text-sm leading-5 text-gray-900">
164+
You&apos;re one of our most active users. Thank you for sharing
165+
with Papermark!
166+
</Text>
167+
</Section>
168+
169+
<Section className="my-6 rounded-2xl bg-[#10b981]/10 bg-[radial-gradient(circle_at_bottom_right,#10b981_0%,transparent_60%)] p-8 text-center">
170+
<Heading className="m-0 text-3xl font-medium text-[#065f46]">
171+
Your documents were viewed from
172+
</Heading>
173+
<Row className="mt-4">
174+
<Column>
175+
{viewingLocations.map((location, index) => (
176+
<Text
177+
key={index}
178+
className="rounded-full bg-[#10b981] px-3 py-1 text-sm font-medium text-white"
179+
style={{
180+
margin: "4px 4px",
181+
display: "inline-block",
182+
}}
183+
>
184+
{location}
185+
</Text>
186+
))}
187+
</Column>
188+
</Row>
189+
<Text className="mt-4 text-sm leading-5 text-[#065f46]">
190+
Your documents get attention from all over the world!
191+
</Text>
192+
</Section>
193+
194+
<Section className="pb-6 text-center">
195+
<Text className="text-xl leading-8 text-gray-900">
196+
We&apos;re excited to support you next year! <br />
197+
Happy Holidays from the Papermark team :)
198+
</Text>
199+
<Link
200+
href="#"
201+
className="mt-4 inline-flex items-center rounded-full bg-gray-900 px-12 py-4 text-center text-sm font-bold text-white no-underline"
202+
>
203+
Share your stats
204+
</Link>
205+
<Link
206+
href="https://app.papermark.io/documents"
207+
className="mt-4 block items-center text-center text-sm font-bold text-gray-900 no-underline"
208+
>
209+
Go to your dashboard
210+
</Link>
211+
</Section>
212+
</Container>
213+
</Body>
214+
</Tailwind>
215+
</Html>
216+
);
217+
}
218+
219+
PapermarkYearInReviewEmail.PreviewProps = {
220+
year: 2024,
221+
minutesSpentOnDocs: 1234,
222+
uploadedDocuments: 25,
223+
sharedLinks: 50,
224+
receivedViews: 500,
225+
topDocumentName: "Q4 Financial Report",
226+
topDocumentViews: 150,
227+
mostActiveMonth: "September",
228+
mostActiveMonthViews: 200,
229+
sharerPercentile: 95,
230+
viewingLocations: ["United States", "United Kingdom", "Germany", "Japan"],
231+
} satisfies PapermarkYearInReviewEmailProps;

‎packages/react-email/src/actions/get-emails-directory-metadata.spec.ts

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ test('getEmailsDirectoryMetadata on demo emails', async () => {
4444
relativePath: 'notifications',
4545
emailFilenames: [
4646
'github-access-token',
47+
'papermark-year-in-review',
4748
'vercel-invite-user',
4849
'yelp-recent-login',
4950
],

0 commit comments

Comments
 (0)