feat: create template using react-email

keyshade-xyz · Oct 8, 2024 · 05cfe56 · 05cfe56
1 parent f71846e
commit 05cfe56
Show file tree

Hide file tree

Showing 5 changed files with 553 additions and 4 deletions.
diff --git a/apps/api/package.json b/apps/api/package.json
@@ -33,6 +33,8 @@
     "@nestjs/schedule": "^4.0.1",
     "@nestjs/swagger": "^7.3.0",
     "@nestjs/websockets": "^10.3.7",
+    "@react-email/components": "^0.0.25",
+    "@react-email/preview": "0.0.11",
     "@socket.io/redis-adapter": "^8.3.0",
     "@supabase/supabase-js": "^2.39.6",
     "class-transformer": "^0.5.1",
@@ -50,7 +52,6 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "reflect-metadata": "^0.2.2",
     "@nestjs/cli": "^10.0.0",
     "@nestjs/schematics": "^10.0.0",
     "@nestjs/testing": "^10.0.0",
@@ -67,6 +68,7 @@
     "jest-mock-extended": "^3.0.5",
     "prettier": "^3.0.0",
     "prisma": "5.19.1",
+    "reflect-metadata": "^0.2.2",
     "source-map-support": "^0.5.21",
     "supertest": "^6.3.3",
     "ts-jest": "^29.1.0",

diff --git a/apps/api/src/mail/emails/workspace-removal.tsx b/apps/api/src/mail/emails/workspace-removal.tsx
@@ -0,0 +1,146 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Text
+} from '@react-email/components'
+import * as React from 'react'
+
+interface WorkspaceRemovalEmailProps {
+  workspaceName: string
+  removedOn: string
+}
+
+export const WorkspaceRemovalEmail = ({
+  workspaceName,
+  removedOn
+}: WorkspaceRemovalEmailProps) => {
+  return (
+    <Html>
+      <Head />
+      <Preview>Removal from Workspace</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={content}>
+            <Heading style={h1}>Removal from Workspace</Heading>
+            <Text style={text}>Dear User,</Text>
+            <Text style={text}>
+              We hope this email finds you well. We are writing to inform you
+              that your access to the following workspace has been removed:
+            </Text>
+            <Section style={workspaceDetails}>
+              <Text style={workspaceInfo}>
+                <strong>Workspace Name:</strong> {workspaceName}
+              </Text>
+              <Text style={workspaceInfo}>
+                <strong>Removed On:</strong> {removedOn}
+              </Text>
+            </Section>
+            <Text style={text}>
+              If you believe this action was taken in error or have any
+              questions regarding this change, please contact your project
+              administrator or our support team.
+            </Text>
+            <Text style={text}>
+              We appreciate your understanding and thank you for your
+              contributions to the project.
+            </Text>
+            <Text style={text}>
+              Cheers,
+              <br />
+              Team Keyshade
+            </Text>
+          </Section>
+          <Section style={footer}>
+            <Text style={footerText}>
+              This is an automated message. Please do not reply to this email.
+            </Text>
+            <Text style={footerText}>
+              Read our{' '}
+              <Link href="https://www.keyshade.xyz/privacy" style={link}>
+                Privacy Policy
+              </Link>{' '}
+              and{' '}
+              <Link
+                href="https://www.keyshade.xyz/terms_and_condition"
+                style={link}
+              >
+                Terms and Conditions
+              </Link>{' '}
+              for more information on how we manage your data and services.
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  )
+}
+
+export default WorkspaceRemovalEmail
+
+const main = {
+  fontFamily: "'Segoe UI', 'Roboto', sans-serif",
+  lineHeight: '1.6',
+  color: '#04050a',
+  backgroundColor: '#fafafa',
+  margin: '0',
+  padding: '20px'
+}
+
+const container = {
+  maxWidth: '600px',
+  margin: '0 auto',
+  backgroundColor: '#fff',
+  borderRadius: '5px',
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.05)'
+}
+
+const content = {
+  padding: '40px'
+}
+
+const h1 = {
+  color: '#000',
+  marginBottom: '20px',
+  fontSize: '24px',
+  fontWeight: '600'
+}
+
+const text = {
+  marginBottom: '15px',
+  color: '#666'
+}
+
+const workspaceDetails = {
+  width: '100%',
+  backgroundColor: '#fafafa',
+  borderRadius: '5px',
+  marginBottom: '20px',
+  padding: '18px'
+}
+
+const workspaceInfo = {
+  marginBottom: '5px'
+}
+
+const footer = {
+  borderTop: '1px solid #eaeaea',
+  padding: '20px 40px'
+}
+
+const footerText = {
+  fontSize: '12px',
+  color: '#999',
+  textAlign: 'center' as const,
+  marginBottom: '5px'
+}
+
+const link = {
+  color: '#000',
+  textDecoration: 'underline'
+}
diff --git a/apps/api/tsconfig.json b/apps/api/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "module": "NodeNext",
     "declaration": true,
     "removeComments": true,

diff --git a/package.json b/package.json
@@ -166,6 +166,8 @@
   },
   "dependencies": {
     "@keyshade/api-client": "workspace:*",
+    "@react-email/components": "^0.0.25",
+    "@react-email/preview": "0.0.11",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^12.0.0",
     "@semantic-release/git": "^10.0.1",