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..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, - '../../../../apps/demo/emails/notifications/vercel-invite-user.tsx', - ), + path.resolve(__dirname, './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; 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();