Add emails package

acmutsa · Sep 6, 2024 · 6d43551 · 6d43551
1 parent 5354f89
commit 6d43551
Show file tree

Hide file tree

Showing 6 changed files with 469 additions and 1,756 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -26,7 +26,6 @@
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
-    "@react-email/components": "^0.0.21",
     "@t3-oss/env-nextjs": "^0.10.1",
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-table": "^8.19.3",
@@ -75,7 +74,6 @@
     "react-confetti": "^6.1.0",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.3",
-    "react-email": "^2.1.5",
     "react-fast-marquee": "^1.6.5",
     "react-hook-form": "7.52.1",
     "react-loader-spinner": "^6.1.6",

diff --git a/apps/web/src/emails/RegistrationSuccessEmail.tsx b/apps/web/src/emails/RegistrationSuccessEmail.tsx
diff --git a/packages/email/emails/test.tsx b/packages/email/emails/test.tsx
@@ -0,0 +1,150 @@
+import {
+	Body,
+	Button,
+	Column,
+	Container,
+	Head,
+	Heading,
+	Hr,
+	Html,
+	Img,
+	Link,
+	Preview,
+	Row,
+	Section,
+	Tailwind,
+	Text,
+} from "@react-email/components";
+import * as React from "react";
+
+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 = "zenorocha",
+	userImage = `${baseUrl}/static/vercel-user.png`,
+	invitedByUsername = "bukinoshita",
+	invitedByEmail = "[email protected]",
+	teamName = "My Project",
+	teamImage = `${baseUrl}/static/vercel-team.png`,
+	inviteLink = "https://vercel.com/teams/invite/foo",
+	inviteFromIp = "204.13.186.218",
+	inviteFromLocation = "São Paulo, Brazil",
+}: VercelInviteUserEmailProps) => {
+	const previewText = `Join ${invitedByUsername} on Vercel`;
+
+	return (
+		<Html>
+			<Head />
+			<Preview>{previewText}</Preview>
+			<Tailwind>
+				<Body className="mx-auto my-auto bg-white font-sans">
+					<Container className="mx-auto my-[40px] w-[465px] rounded border border-solid border-[#eaeaea] p-[20px]">
+						<Section className="mt-[32px]">
+							<Img
+								src={`${baseUrl}/static/vercel-logo.png`}
+								width="40"
+								height="37"
+								alt="Vercel"
+								className="mx-auto my-0"
+							/>
+						</Section>
+						<Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-normal text-black">
+							Join <strong>{teamName}</strong> on{" "}
+							<strong>Vercel</strong>
+						</Heading>
+						<Text className="text-[14px] leading-[24px] text-black">
+							Hello {username},
+						</Text>
+						<Text className="text-[14px] leading-[24px] text-black">
+							<strong>bukinoshita</strong> (
+							<Link
+								href={`mailto:${invitedByEmail}`}
+								className="text-blue-600 no-underline"
+							>
+								{invitedByEmail}
+							</Link>
+							) has invited you to the <strong>{teamName}</strong>{" "}
+							team on <strong>Vercel</strong>.
+						</Text>
+						<Section>
+							<Row>
+								<Column align="right">
+									<Img
+										className="rounded-full"
+										src={userImage}
+										width="64"
+										height="64"
+									/>
+								</Column>
+								<Column align="center">
+									<Img
+										src={`${baseUrl}/static/vercel-arrow.png`}
+										width="12"
+										height="9"
+										alt="invited you to"
+									/>
+								</Column>
+								<Column align="left">
+									<Img
+										className="rounded-full"
+										src={teamImage}
+										width="64"
+										height="64"
+									/>
+								</Column>
+							</Row>
+						</Section>
+						<Section className="mb-[32px] mt-[32px] text-center">
+							<Button
+								className="rounded bg-[#000000] px-4 py-3 text-center text-[12px] font-semibold text-white no-underline"
+								href={inviteLink}
+							>
+								Join the team
+							</Button>
+						</Section>
+						<Text className="text-[14px] leading-[24px] text-black">
+							or copy and paste this URL into your browser:{" "}
+							<Link
+								href={inviteLink}
+								className="text-blue-600 no-underline"
+							>
+								{inviteLink}
+							</Link>
+						</Text>
+						<Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
+						<Text className="text-[12px] leading-[24px] text-[#666666]">
+							This invitation was intended for{" "}
+							<span className="text-black">{username} </span>.This
+							invite was sent from{" "}
+							<span className="text-black">{inviteFromIp}</span>{" "}
+							located in{" "}
+							<span className="text-black">
+								{inviteFromLocation}
+							</span>
+							. 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.
+						</Text>
+					</Container>
+				</Body>
+			</Tailwind>
+		</Html>
+	);
+};
+
+export default VercelInviteUserEmail;
diff --git a/packages/email/package.json b/packages/email/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "email",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "dev": "email dev -p 3001",
+    "export": "email export"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@react-email/components": "^0.0.25",
+    "@types/node": "20.14.11",
+    "@types/react": "18.3.3",
+    "react": "18.3.1",
+    "react-email": "^3.0.1"
+  }
+}
diff --git a/packages/email/tsconfig.json b/packages/email/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "isolatedModules": true,
+        "moduleResolution": "node",
+        "preserveWatchOutput": true,
+        "skipLibCheck": true,
+        "noEmit": true,
+        "strict": true,
+        "jsx": "react-jsx"
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}