From 98e95bcadedb04dfee2a7d48ca917b8932063d77 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 3 Oct 2025 09:54:31 -0300 Subject: [PATCH 1/3] use local version of vercel invite user for preview server --- .../src/utils/get-email-component.spec.ts | 2 +- .../src/utils/testing/vercel-invite-user.tsx | 160 ++++++++++++++++++ 2 files changed, 161 insertions(+), 1 deletion(-) create mode 100644 packages/preview-server/src/utils/testing/vercel-invite-user.tsx diff --git a/packages/preview-server/src/utils/get-email-component.spec.ts b/packages/preview-server/src/utils/get-email-component.spec.ts index 233ee57b94..b6db748b21 100644 --- a/packages/preview-server/src/utils/get-email-component.spec.ts +++ b/packages/preview-server/src/utils/get-email-component.spec.ts @@ -19,7 +19,7 @@ describe('getEmailComponent()', () => { const result = await getEmailComponent( path.resolve( __dirname, - '../../../../apps/demo/emails/notifications/vercel-invite-user.tsx', + './testing/vercel-invite-user.tsx', ), path.resolve(__dirname, '../../jsx-runtime'), ); diff --git a/packages/preview-server/src/utils/testing/vercel-invite-user.tsx b/packages/preview-server/src/utils/testing/vercel-invite-user.tsx new file mode 100644 index 0000000000..4e5877b5c6 --- /dev/null +++ b/packages/preview-server/src/utils/testing/vercel-invite-user.tsx @@ -0,0 +1,160 @@ +import { + Body, + Button, + Column, + Container, + Head, + Heading, + Hr, + Html, + Img, + Link, + Preview, + pixelBasedPreset, + Row, + Section, + Tailwind, + Text, +} from '@react-email/components'; + +interface VercelInviteUserEmailProps { + username?: string; + userImage?: string; + invitedByUsername?: string; + invitedByEmail?: string; + teamName?: string; + teamImage?: string; + inviteLink?: string; + inviteFromIp?: string; + inviteFromLocation?: string; +} + +const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ''; + +export const VercelInviteUserEmail = ({ + username, + userImage, + invitedByUsername, + invitedByEmail, + teamName, + teamImage, + inviteLink, + inviteFromIp, + inviteFromLocation, +}: VercelInviteUserEmailProps) => { + const previewText = `Join ${invitedByUsername} on Vercel`; + + return ( + + + + + {previewText} + +
+ Vercel Logo +
+ + Join {teamName} on Vercel + + + Hello {username}, + + + {invitedByUsername} ( + + {invitedByEmail} + + ) has invited you to the {teamName} team on{' '} + Vercel. + +
+ + + {`${username}'s + + + Arrow indicating invitation + + + {`${teamName} + + +
+
+ +
+ + or copy and paste this URL into your browser:{' '} + + {inviteLink} + + +
+ + This invitation was intended for{' '} + {username}. This invite was + sent from {inviteFromIp}{' '} + located in{' '} + {inviteFromLocation}. If you + were not expecting this invitation, you can ignore this email. If + you are concerned about your account's safety, please reply to + this email to get in touch with us. + + + + + + ); +}; + +VercelInviteUserEmail.PreviewProps = { + username: 'alanturing', + userImage: `${baseUrl}/static/vercel-user.png`, + invitedByUsername: 'Alan', + invitedByEmail: 'alan.turing@example.com', + teamName: 'Enigma', + teamImage: `${baseUrl}/static/vercel-team.png`, + inviteLink: 'https://vercel.com', + inviteFromIp: '204.13.186.218', + inviteFromLocation: 'São Paulo, Brazil', +} as VercelInviteUserEmailProps; + +export default VercelInviteUserEmail; From 65b6b38a5b5578ae0787139df51c1443502502f7 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 3 Oct 2025 09:56:41 -0300 Subject: [PATCH 2/3] use local copy to test export --- .../testing/emails/vercel-invite-user.tsx | 160 ++++++++++++++++++ .../src/commands/testing/export.spec.ts | 7 +- 2 files changed, 162 insertions(+), 5 deletions(-) create mode 100644 packages/react-email/src/commands/testing/emails/vercel-invite-user.tsx diff --git a/packages/react-email/src/commands/testing/emails/vercel-invite-user.tsx b/packages/react-email/src/commands/testing/emails/vercel-invite-user.tsx new file mode 100644 index 0000000000..4e5877b5c6 --- /dev/null +++ b/packages/react-email/src/commands/testing/emails/vercel-invite-user.tsx @@ -0,0 +1,160 @@ +import { + Body, + Button, + Column, + Container, + Head, + Heading, + Hr, + Html, + Img, + Link, + Preview, + pixelBasedPreset, + Row, + Section, + Tailwind, + Text, +} from '@react-email/components'; + +interface VercelInviteUserEmailProps { + username?: string; + userImage?: string; + invitedByUsername?: string; + invitedByEmail?: string; + teamName?: string; + teamImage?: string; + inviteLink?: string; + inviteFromIp?: string; + inviteFromLocation?: string; +} + +const baseUrl = process.env.VERCEL_URL + ? `https://${process.env.VERCEL_URL}` + : ''; + +export const VercelInviteUserEmail = ({ + username, + userImage, + invitedByUsername, + invitedByEmail, + teamName, + teamImage, + inviteLink, + inviteFromIp, + inviteFromLocation, +}: VercelInviteUserEmailProps) => { + const previewText = `Join ${invitedByUsername} on Vercel`; + + return ( + + + + + {previewText} + +
+ Vercel Logo +
+ + Join {teamName} on Vercel + + + Hello {username}, + + + {invitedByUsername} ( + + {invitedByEmail} + + ) has invited you to the {teamName} team on{' '} + Vercel. + +
+ + + {`${username}'s + + + Arrow indicating invitation + + + {`${teamName} + + +
+
+ +
+ + or copy and paste this URL into your browser:{' '} + + {inviteLink} + + +
+ + This invitation was intended for{' '} + {username}. This invite was + sent from {inviteFromIp}{' '} + located in{' '} + {inviteFromLocation}. If you + were not expecting this invitation, you can ignore this email. If + you are concerned about your account's safety, please reply to + this email to get in touch with us. + + + + + + ); +}; + +VercelInviteUserEmail.PreviewProps = { + username: 'alanturing', + userImage: `${baseUrl}/static/vercel-user.png`, + invitedByUsername: 'Alan', + invitedByEmail: 'alan.turing@example.com', + teamName: 'Enigma', + teamImage: `${baseUrl}/static/vercel-team.png`, + inviteLink: 'https://vercel.com', + inviteFromIp: '204.13.186.218', + inviteFromLocation: 'São Paulo, Brazil', +} as VercelInviteUserEmailProps; + +export default VercelInviteUserEmail; diff --git a/packages/react-email/src/commands/testing/export.spec.ts b/packages/react-email/src/commands/testing/export.spec.ts index 98a2731696..0f688b30ab 100644 --- a/packages/react-email/src/commands/testing/export.spec.ts +++ b/packages/react-email/src/commands/testing/export.spec.ts @@ -3,10 +3,7 @@ import path from 'node:path'; import { exportTemplates } from '../export.js'; test('email export', { retry: 3 }, async () => { - const pathToEmailsDirectory = path.resolve( - __dirname, - '../../../../../apps/demo/emails', - ); + const pathToEmailsDirectory = path.resolve(__dirname, './emails'); const pathToDumpMarkup = path.resolve(__dirname, './out'); await exportTemplates(pathToDumpMarkup, pathToEmailsDirectory, { silent: true, @@ -16,7 +13,7 @@ test('email export', { retry: 3 }, async () => { expect(fs.existsSync(pathToDumpMarkup)).toBe(true); expect( await fs.promises.readFile( - path.resolve(pathToDumpMarkup, './notifications/vercel-invite-user.html'), + path.resolve(pathToDumpMarkup, './vercel-invite-user.html'), 'utf8', ), ).toMatchSnapshot(); From 4b33f86e557b8d134f6bfda24ce140d4ef0b2349 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 3 Oct 2025 09:59:12 -0300 Subject: [PATCH 3/3] lint --- .../preview-server/src/utils/get-email-component.spec.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/preview-server/src/utils/get-email-component.spec.ts b/packages/preview-server/src/utils/get-email-component.spec.ts index b6db748b21..24e5e7af31 100644 --- a/packages/preview-server/src/utils/get-email-component.spec.ts +++ b/packages/preview-server/src/utils/get-email-component.spec.ts @@ -17,10 +17,7 @@ describe('getEmailComponent()', () => { test('with a demo email template', async () => { const result = await getEmailComponent( - path.resolve( - __dirname, - './testing/vercel-invite-user.tsx', - ), + path.resolve(__dirname, './testing/vercel-invite-user.tsx'), path.resolve(__dirname, '../../jsx-runtime'), );