fix(react-email): fix email lib

anteqkois · Jul 21, 2024 · dc201fb · dc201fb
1 parent 6de54b6
commit dc201fb
Show file tree

Hide file tree

Showing 10 changed files with 802 additions and 520 deletions.
diff --git a/libs/react-email/constants/veriables.ts b/libs/react-email/constants/veriables.ts
@@ -2,7 +2,7 @@ export const colors = {
   primary: 'hsl(262.1 83.3% 57.8%)',
 }
 
+export const IS_EMAIL_PREVIEW = process.env?.['DEV_EMAIL'] ?? false
 export const frontendUrl = process.env['FRONTEND_HOST']
-if (!frontendUrl) throw new Error('Missing FRONTEND_HOST env')
 
-export const IS_EMAIL_PREVIEW = process.env?.['DEV_EMAIL'] ?? false
+if (!frontendUrl && !IS_EMAIL_PREVIEW) throw new Error('Missing FRONTEND_HOST env')
diff --git a/libs/react-email/emails/email-verification.tsx b/libs/react-email/emails/email-verification.tsx
@@ -57,6 +57,8 @@ export const VerificationEmail = (props: Props) => {
   )
 }
 
+export default VerificationEmail
+
 const main = {
   backgroundColor: '#f6f9fc',
   fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',

diff --git a/libs/react-email/emails/offert-company.tsx b/libs/react-email/emails/offert-company.tsx
@@ -0,0 +1,133 @@
+import { Body, Button, Container, Head, Hr, Html, Link, Preview, Section, Text } from '@react-email/components'
+import React from 'react'
+import { IS_EMAIL_PREVIEW, colors, frontendUrl } from '../constants/veriables'
+
+interface Props {
+  verificationCode: string
+}
+const defaaultProps: Props = {
+  verificationCode: 'Ver1F1CaT10n',
+}
+
+export const VerificationEmail = (props: Props) => {
+  const { verificationCode } = IS_EMAIL_PREVIEW ? defaaultProps : props
+
+  return (
+    <Html>
+      <Head />
+      <Preview>You're now ready to start adventure with Linkerry!</Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Section style={box}>
+            {/* <Img src={`${baseUrl}/static/stripe-logo.png`} width="49" height="21" alt="Stripe" /> */}
+            <Text style={brandName}>Linkerry</Text>
+            <Hr style={hr} />
+            <Text style={paragraph}>Thank you for registering and choosing our product.</Text>
+            <Text style={paragraph}>The Linkerry team will try to satisfy each of its clients as much as possible, also you.</Text>
+            <Text style={paragraph}>Now, you should verify your email using this code:</Text>
+
+            <Section style={codeBox}>
+              <Text style={confirmationCodeText}>{verificationCode}</Text>
+            </Section>
+
+            <Button style={button} href={`${frontendUrl}/app/dashboard`}>
+              Verify Email
+            </Button>
+            <Hr style={hr} />
+            <Text style={paragraph}>
+              If you have any problems or questions, please contact us via e-mail{' '}
+              <Link style={anchor} href="mailto:[email protected]">
+                [email protected]
+              </Link>
+              {/* <Link style={anchor} href="mailto:[email protected]">
+                [email protected]
+              </Link> */}
+              , live chat or{' '}
+              <Link style={anchor} href="https://web.telegram.org/k/#@anteqkois">
+                Telegram
+              </Link>
+            </Text>
+            <Text style={paragraph}>— The Linkerry team</Text>
+            <Hr style={hr} />
+            {/* <Text style={footer}>Linkerry, 354 Oyster Point Blvd, South San Francisco, CA 94080</Text> */}
+          </Section>
+        </Container>
+      </Body>
+    </Html>
+  )
+}
+
+export default VerificationEmail
+
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily: '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+}
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  padding: '20px 0 48px',
+  marginBottom: '64px',
+}
+
+const box = {
+  padding: '0 48px',
+}
+
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0',
+}
+
+const paragraph = {
+  color: '#525f7f',
+
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const,
+}
+
+const brandName = {
+  color: colors.primary,
+  fontWeight: 'bolder',
+  fontSize: '48px',
+  lineHeight: '36px',
+  textAlign: 'left' as const,
+}
+
+const anchor = {
+  color: '#556cd6',
+}
+
+const button = {
+  backgroundColor: colors.primary,
+  borderRadius: '5px',
+  color: '#fff',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  textDecoration: 'none',
+  textAlign: 'center' as const,
+  display: 'block',
+  width: '100%',
+  padding: '10px',
+}
+
+const footer = {
+  color: '#8898aa',
+  fontSize: '12px',
+  lineHeight: '16px',
+}
+
+const codeBox = {
+  background: 'rgb(245, 244, 245)',
+  borderRadius: '10px',
+  marginBottom: '30px',
+  padding: '20px 10px',
+}
+
+const confirmationCodeText = {
+  fontSize: '30px',
+  textAlign: 'center' as const,
+  verticalAlign: 'middle',
+}
diff --git a/libs/react-email/package.json b/libs/react-email/package.json
@@ -2,7 +2,7 @@
   "name": "@linkerry/react-email",
   "version": "0.0.1",
   "scripts": {
-    "dev": "DEV_EMAIL=true email dev"
+    "dev": "DEV_EMAIL=true email dev -d ./emails"
   },
   "dependencies": {
     "tslib": "^2.3.0"

diff --git a/libs/react-email/project.json b/libs/react-email/project.json
@@ -14,6 +14,12 @@
         "tsConfig": "libs/react-email/tsconfig.lib.json",
         "assets": ["libs/react-email/*.md"]
       }
+    },
+    "serve": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "dev"
+      }
     }
   }
 }
diff --git a/libs/react-email/tsconfig.json b/libs/react-email/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "jsx": "react",
     "allowJs": false,
-    "module": "commonjs",
+    "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,

diff --git a/libs/react-email/tsconfig.lib.json b/libs/react-email/tsconfig.lib.json
@@ -1,11 +1,11 @@
 {
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "jsx": "react",
-    "outDir": "../../dist/out-tsc",
-    "declaration": true,
-    "types": ["node"]
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"jsx": "react",
+		"outDir": "../../dist/out-tsc",
+		"declaration": true,
+		"types": ["node"]
+	},
+	"include": ["**/*.ts", "index.ts"],
+	"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
 }
diff --git a/package.json b/package.json
@@ -73,8 +73,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@react-email/components": "^0.0.16",
-    "@react-email/render": "^0.0.12",
+    "@react-email/render": "^0.0.16",
     "@react-hookz/web": "^24.0.4",
     "@tanstack/react-query": "^5.32.0",
     "@tanstack/react-table": "^8.16.0",
@@ -115,11 +114,10 @@
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "pnpm": "8.6.12",
-    "preview-email": "^3.0.19",
+    "preview-email": "^3.0.20",
     "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "18.2.0",
-    "react-email": "^2.1.1",
     "react-hook-form": "^7.51.3",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
@@ -161,6 +159,7 @@
     "@nx/web": "18.3.4",
     "@nx/webpack": "18.3.4",
     "@nx/workspace": "18.3.4",
+    "@react-email/components": "0.0.19",
     "@swc-node/register": "~1.8.0",
     "@swc/core": "~1.3.107",
     "@swc/helpers": "~0.5.11",
@@ -200,6 +199,7 @@
     "nx": "18.3.4",
     "postcss": "8.4.21",
     "prettier": "^2.8.8",
+    "react-email": "2.1.4",
     "tailwindcss": "3.2.7",
     "ts-jest": "^29.1.2",
     "ts-node": "10.9.1",