From 0187b0ad74b71fbeaef0625ef81d3d5af036b29c Mon Sep 17 00:00:00 2001 From: Marc Seitz <4049052+mfts@users.noreply.github.com> Date: Thu, 19 Dec 2024 15:19:05 +0100 Subject: [PATCH] feat(demo): "Year in Review" email template (#1832) Co-authored-by: gabriel miranda --- .../papermark-year-in-review.tsx | 231 ++++++++++++++++++ .../get-emails-directory-metadata.spec.ts | 1 + pnpm-lock.yaml | 77 +++--- 3 files changed, 260 insertions(+), 49 deletions(-) create mode 100644 apps/demo/emails/notifications/papermark-year-in-review.tsx diff --git a/apps/demo/emails/notifications/papermark-year-in-review.tsx b/apps/demo/emails/notifications/papermark-year-in-review.tsx new file mode 100644 index 0000000000..2a06b30558 --- /dev/null +++ b/apps/demo/emails/notifications/papermark-year-in-review.tsx @@ -0,0 +1,231 @@ +import { + Body, + Column, + Container, + Head, + Heading, + Hr, + Html, + Link, + Preview, + Row, + Section, + Tailwind, + Text, +} from "@react-email/components"; + +interface PapermarkYearInReviewEmailProps { + year?: number; + minutesSpentOnDocs?: number; + uploadedDocuments?: number; + sharedLinks?: number; + receivedViews?: number; + topDocumentName?: string; + topDocumentViews?: number; + mostActiveMonth?: string; + mostActiveMonthViews?: number; + sharerPercentile?: number; + viewingLocations?: string[]; +} + +export default function PapermarkYearInReviewEmail({ + year, + minutesSpentOnDocs, + uploadedDocuments, + sharedLinks, + receivedViews, + topDocumentName, + topDocumentViews, + mostActiveMonth, + mostActiveMonthViews, + sharerPercentile, + viewingLocations = [], +}: PapermarkYearInReviewEmailProps) { + return ( + + + See your stats from 2024 + + + +
+ + Papermark + + + {year} in review + + + Your Year with Papermark + + + What a year it's been! Let's take a look at how + you've used Papermark to share your important documents. + + + Share your stats + +
+ +
+ + Viewers spent + + + {minutesSpentOnDocs} + + + minutes on your documents + + + That's a lot of engagement! Your documents are resonating + with your visitors. + + +
+ + Your activity + + + + + You uploaded + + + {uploadedDocuments} + + documents + + + + You shared + + + {sharedLinks} + + links + + + + You received + + + {receivedViews} + + views + + +
+ +
+ + Your top document + + + "{topDocumentName}" + + + {topDocumentViews} views + + + This document really caught your visitor's attention! + +
+ +
+ + Your most active month + + + {mostActiveMonth} + + + with {mostActiveMonthViews} views + + + {mostActiveMonth} was your busiest month. What did you share + that got so much attention? + + +
+ + You're in the top + + + {sharerPercentile}% + + + of sharers on Papermark + + + You're one of our most active users. Thank you for sharing + with Papermark! + +
+ +
+ + Your documents were viewed from + + + + {viewingLocations.map((location, index) => ( + + {location} + + ))} + + + + Your documents get attention from all over the world! + +
+ +
+ + We're excited to support you next year!
+ Happy Holidays from the Papermark team :) + + + Share your stats + + + Go to your dashboard + +
+ + + + + ); +} + +PapermarkYearInReviewEmail.PreviewProps = { + year: 2024, + minutesSpentOnDocs: 1234, + uploadedDocuments: 25, + sharedLinks: 50, + receivedViews: 500, + topDocumentName: "Q4 Financial Report", + topDocumentViews: 150, + mostActiveMonth: "September", + mostActiveMonthViews: 200, + sharerPercentile: 95, + viewingLocations: ["United States", "United Kingdom", "Germany", "Japan"], +} satisfies PapermarkYearInReviewEmailProps; diff --git a/packages/react-email/src/actions/get-emails-directory-metadata.spec.ts b/packages/react-email/src/actions/get-emails-directory-metadata.spec.ts index f26e9863d5..051d14fc93 100644 --- a/packages/react-email/src/actions/get-emails-directory-metadata.spec.ts +++ b/packages/react-email/src/actions/get-emails-directory-metadata.spec.ts @@ -44,6 +44,7 @@ test('getEmailsDirectoryMetadata on demo emails', async () => { relativePath: 'notifications', emailFilenames: [ 'github-access-token', + 'papermark-year-in-review', 'vercel-invite-user', 'yelp-recent-login', ], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ddb2cf8a2f..6b3aa93ba5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -277,11 +277,11 @@ importers: specifier: workspace:0.0.31 version: link:../../packages/components react: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028 + specifier: ^19 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + specifier: ^19 + version: 19.0.0(react@19.0.0) devDependencies: eslint-config-custom: specifier: workspace:* @@ -302,11 +302,11 @@ importers: specifier: ^2.0.0 version: 2.3.0 react: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028 + specifier: ^19 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + specifier: ^19 + version: 19.0.0(react@19.0.0) devDependencies: eslint-config-custom: specifier: workspace:* @@ -327,11 +327,11 @@ importers: specifier: 6.9.9 version: 6.9.9 react: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028 + specifier: ^19 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + specifier: ^19 + version: 19.0.0(react@19.0.0) devDependencies: '@types/nodemailer': specifier: 6.4.15 @@ -355,11 +355,11 @@ importers: specifier: workspace:0.0.31 version: link:../../packages/components react: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028 + specifier: ^19 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + specifier: ^19 + version: 19.0.0(react@19.0.0) devDependencies: eslint-config-custom: specifier: workspace:* @@ -380,11 +380,11 @@ importers: specifier: 3.0.14 version: 3.0.14 react: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028 + specifier: ^19 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + specifier: ^19 + version: 19.0.0(react@19.0.0) devDependencies: eslint-config-custom: specifier: workspace:* @@ -473,11 +473,11 @@ importers: specifier: 1.4.0 version: 1.4.0 react: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028 + specifier: ^19 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + specifier: ^19 + version: 19.0.0(react@19.0.0) devDependencies: eslint-config-custom: specifier: workspace:* @@ -498,11 +498,11 @@ importers: specifier: 7.7.0 version: 7.7.0 react: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028 + specifier: ^19 + version: 19.0.0 react-dom: - specifier: 19.0.0-rc-02c0e824-20241028 - version: 19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028) + specifier: ^19 + version: 19.0.0(react@19.0.0) devDependencies: eslint-config-custom: specifier: workspace:* @@ -6746,11 +6746,6 @@ packages: peerDependencies: react: ^19.0.0 - react-dom@19.0.0-rc-02c0e824-20241028: - resolution: {integrity: sha512-LrZf3DfHL6Fs07wwlUCHrzFTCMM19yA99MvJpfLokN4I2nBAZvREGZjZAn8VPiSfN72+i9j1eL4wB8gC695F3Q==} - peerDependencies: - react: 19.0.0-rc-02c0e824-20241028 - react-email@2.1.7-canary.2: resolution: {integrity: sha512-Ry5AMBzQ4itpnuCPrR1mDVdLh/G4u0Svs2ZJfW6ssKUFccYwdRxlaq8uHGRde/tdsirhxup+n/aFcXPW1Cq60A==} engines: {node: '>=18.0.0'} @@ -6821,10 +6816,6 @@ packages: resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==} engines: {node: '>=0.10.0'} - react@19.0.0-rc-02c0e824-20241028: - resolution: {integrity: sha512-GbZ7hpPHQMiEu53BqEaPQVM/4GG4hARo+mqEEnx4rYporDvNvUjutiAFxYFSbu6sgHwcr7LeFv8htEOwALVA2A==} - engines: {node: '>=0.10.0'} - read-cache@1.0.0: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} @@ -6985,9 +6976,6 @@ packages: scheduler@0.25.0: resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==} - scheduler@0.25.0-rc-02c0e824-20241028: - resolution: {integrity: sha512-GysnKjmMSaWcwsKTLzeJO0IhU3EyIiC0ivJKE6yDNLqt3IMxDByx8b6lSNXRNdN+ULUY0WLLjSPaZ0LuU/GnTg==} - schema-utils@3.3.0: resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==} engines: {node: '>= 10.13.0'} @@ -14269,11 +14257,6 @@ snapshots: react: 19.0.0 scheduler: 0.25.0 - react-dom@19.0.0-rc-02c0e824-20241028(react@19.0.0-rc-02c0e824-20241028): - dependencies: - react: 19.0.0-rc-02c0e824-20241028 - scheduler: 0.25.0-rc-02c0e824-20241028 - react-email@2.1.7-canary.2(@emotion/is-prop-valid@0.8.8)(@swc/helpers@0.5.13)(eslint@8.50.0): dependencies: '@babel/core': 7.24.5 @@ -14418,8 +14401,6 @@ snapshots: react@19.0.0: {} - react@19.0.0-rc-02c0e824-20241028: {} - read-cache@1.0.0: dependencies: pify: 2.3.0 @@ -14633,8 +14614,6 @@ snapshots: scheduler@0.25.0: {} - scheduler@0.25.0-rc-02c0e824-20241028: {} - schema-utils@3.3.0: dependencies: '@types/json-schema': 7.0.15