Skip to content

Commit cbdffe0

Browse files
LermatroidLermatroid
committed
Add emails package
1 parent afc38b5 commit cbdffe0

File tree

6 files changed

+470
-1671
lines changed

6 files changed

+470
-1671
lines changed

‎apps/web/package.json

-2
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"@radix-ui/react-select": "^1.2.2",
2727
"@radix-ui/react-slot": "^1.0.2",
2828
"@radix-ui/react-switch": "^1.0.3",
29-
"@react-email/components": "^0.0.21",
3029
"@t3-oss/env-nextjs": "^0.10.1",
3130
"@tanstack/react-query": "^5.51.11",
3231
"@tanstack/react-table": "^8.19.3",
@@ -75,7 +74,6 @@
7574
"react-confetti": "^6.1.0",
7675
"react-dom": "18.3.1",
7776
"react-dropzone": "^14.2.3",
78-
"react-email": "^2.1.5",
7977
"react-fast-marquee": "^1.6.5",
8078
"react-hook-form": "7.52.1",
8179
"react-loader-spinner": "^6.1.6",

‎apps/web/src/emails/RegistrationSuccessEmail.tsx

-114
This file was deleted.

‎packages/email/emails/test.tsx

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import {
2+
Body,
3+
Button,
4+
Column,
5+
Container,
6+
Head,
7+
Heading,
8+
Hr,
9+
Html,
10+
Img,
11+
Link,
12+
Preview,
13+
Row,
14+
Section,
15+
Tailwind,
16+
Text,
17+
} from "@react-email/components";
18+
import * as React from "react";
19+
20+
interface VercelInviteUserEmailProps {
21+
username?: string;
22+
userImage?: string;
23+
invitedByUsername?: string;
24+
invitedByEmail?: string;
25+
teamName?: string;
26+
teamImage?: string;
27+
inviteLink?: string;
28+
inviteFromIp?: string;
29+
inviteFromLocation?: string;
30+
}
31+
32+
const baseUrl = process.env.VERCEL_URL
33+
? `https://${process.env.VERCEL_URL}`
34+
: "";
35+
36+
export const VercelInviteUserEmail = ({
37+
username = "zenorocha",
38+
userImage = `${baseUrl}/static/vercel-user.png`,
39+
invitedByUsername = "bukinoshita",
40+
invitedByEmail = "[email protected]",
41+
teamName = "My Project",
42+
teamImage = `${baseUrl}/static/vercel-team.png`,
43+
inviteLink = "https://vercel.com/teams/invite/foo",
44+
inviteFromIp = "204.13.186.218",
45+
inviteFromLocation = "São Paulo, Brazil",
46+
}: VercelInviteUserEmailProps) => {
47+
const previewText = `Join ${invitedByUsername} on Vercel`;
48+
49+
return (
50+
<Html>
51+
<Head />
52+
<Preview>{previewText}</Preview>
53+
<Tailwind>
54+
<Body className="mx-auto my-auto bg-white font-sans">
55+
<Container className="mx-auto my-[40px] w-[465px] rounded border border-solid border-[#eaeaea] p-[20px]">
56+
<Section className="mt-[32px]">
57+
<Img
58+
src={`${baseUrl}/static/vercel-logo.png`}
59+
width="40"
60+
height="37"
61+
alt="Vercel"
62+
className="mx-auto my-0"
63+
/>
64+
</Section>
65+
<Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
66+
Join <strong>{teamName}</strong> on{" "}
67+
<strong>Vercel</strong>
68+
</Heading>
69+
<Text className="text-[14px] leading-[24px] text-black">
70+
Hello {username},
71+
</Text>
72+
<Text className="text-[14px] leading-[24px] text-black">
73+
<strong>bukinoshita</strong> (
74+
<Link
75+
href={`mailto:${invitedByEmail}`}
76+
className="text-blue-600 no-underline"
77+
>
78+
{invitedByEmail}
79+
</Link>
80+
) has invited you to the <strong>{teamName}</strong>{" "}
81+
team on <strong>Vercel</strong>.
82+
</Text>
83+
<Section>
84+
<Row>
85+
<Column align="right">
86+
<Img
87+
className="rounded-full"
88+
src={userImage}
89+
width="64"
90+
height="64"
91+
/>
92+
</Column>
93+
<Column align="center">
94+
<Img
95+
src={`${baseUrl}/static/vercel-arrow.png`}
96+
width="12"
97+
height="9"
98+
alt="invited you to"
99+
/>
100+
</Column>
101+
<Column align="left">
102+
<Img
103+
className="rounded-full"
104+
src={teamImage}
105+
width="64"
106+
height="64"
107+
/>
108+
</Column>
109+
</Row>
110+
</Section>
111+
<Section className="mb-[32px] mt-[32px] text-center">
112+
<Button
113+
className="rounded bg-[#000000] px-4 py-3 text-center text-[12px] font-semibold text-white no-underline"
114+
href={inviteLink}
115+
>
116+
Join the team
117+
</Button>
118+
</Section>
119+
<Text className="text-[14px] leading-[24px] text-black">
120+
or copy and paste this URL into your browser:{" "}
121+
<Link
122+
href={inviteLink}
123+
className="text-blue-600 no-underline"
124+
>
125+
{inviteLink}
126+
</Link>
127+
</Text>
128+
<Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
129+
<Text className="text-[12px] leading-[24px] text-[#666666]">
130+
This invitation was intended for{" "}
131+
<span className="text-black">{username} </span>.This
132+
invite was sent from{" "}
133+
<span className="text-black">{inviteFromIp}</span>{" "}
134+
located in{" "}
135+
<span className="text-black">
136+
{inviteFromLocation}
137+
</span>
138+
. If you were not expecting this invitation, you can
139+
ignore this email. If you are concerned about your
140+
account's safety, please reply to this email to get
141+
in touch with us.
142+
</Text>
143+
</Container>
144+
</Body>
145+
</Tailwind>
146+
</Html>
147+
);
148+
};
149+
150+
export default VercelInviteUserEmail;

‎packages/email/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "email",
3+
"version": "1.0.0",
4+
"description": "",
5+
"scripts": {
6+
"dev": "email dev -p 3001",
7+
"export": "email export"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"dependencies": {
13+
"@react-email/components": "^0.0.25",
14+
"@types/node": "20.14.11",
15+
"@types/react": "18.3.3",
16+
"react": "18.3.1",
17+
"react-email": "^3.0.1"
18+
}
19+
}

‎packages/email/tsconfig.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"esModuleInterop": true,
4+
"forceConsistentCasingInFileNames": true,
5+
"isolatedModules": true,
6+
"moduleResolution": "node",
7+
"preserveWatchOutput": true,
8+
"skipLibCheck": true,
9+
"noEmit": true,
10+
"strict": true,
11+
"jsx": "react-jsx"
12+
},
13+
"exclude": [
14+
"node_modules"
15+
]
16+
}

0 commit comments

Comments
 (0)