[backend] add new email template

packages/server/.env.dev

@@ -28,14 +28,15 @@ APP_SECRET_KEY: "SECRET_1234"
 APP_LOG_LEVEL: "verbose"
 
 #
-# Email (only one of the api provider should be defined)
+# Email
 #
 
-# EMAIL_SENDER: "[email protected]" # This is only needed when SENDGRID_API_KEY is defined
+# EMAIL_SENDER: "[email protected]"
 
+# Only one of the api provider should be defined
 # SENDGRID_API_KEY: "SG.1234567890qwerty"
 
-# MAILGUN_CONFIG: '{username: "api", key: "qwerty12345", url: "https://api.eu.mailgun.net"}'
+# MAILGUN_API_KEY: "qwerty12345"
 # MAILGUN_DOMAIN: "example.com"
 
 #

packages/server/.gitignore

@@ -4,3 +4,5 @@ dist
 
 # Keep environment variables out of version control
 .env
+
+.react-email

packages/server/README.md

@@ -222,6 +222,8 @@ To run the API to develop locally:
 - `yarn workspace server test`: Run tests.
 - `yarn workspace server dev:notify`: Run the notifier `nodemon` and `ts-node`.
 - `yarn workspace server dev:db:reset`: Clear the database data and re-synchronize its schema.
+- `yarn workspace server dev:emails`: Run live development preview for emails.
+- `yarn workspace server dev:mockEmail email [notificationKind]`: Send mock email.
 - `yarn workspace server codegen`: Run `graphql-codegen`.
 - [`yarn workspace server prisma studio`][prisma studio]: Launch an administration GUI for the database.
 - [`yarn workspace server prisma db push`][prisma db:push]: Synchronize `schema.prisma` with the database schema.

packages/server/jest.config.ts

@@ -1,6 +1,7 @@
 import type { Config } from 'jest'
 
 const config: Config = {
+  preset: 'ts-jest',
   setupFiles: ['./test/setup.ts'],
 
   moduleNameMapper: {

packages/server/package.json

@@ -16,7 +16,9 @@
     "dev:db:build": "yarn dev:db && yarn dev:build",
     "dev:api": "yarn nodemon ./src/common/scripts/startApi.ts",
     "dev:notify": "yarn nodemon ./src/notifier/scripts/notify.ts",
+    "dev:mockEmail": "yarn ts-node ./src/notifier/scripts/mockEmail.ts",
     "dev:authtoken": "yarn nodemon ./src/auth/scripts/generateToken.ts",
+    "dev:emails": "email dev --dir ./src/common/email-templates",
     "lint": "yarn lint:prettier --check && yarn lint:eslint --max-warnings=0",
     "lint:eslint": "eslint \"./{src,test}/**/*.ts\"",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:prettier --write --loglevel warn",
@@ -31,6 +33,8 @@
     "@apollo/server-plugin-landing-page-graphql-playground": "^4.0.0",
     "@polkadot/util-crypto": "^11.0.1",
     "@prisma/client": "^4.10.1",
+    "@react-email/components": "^0.0.7",
+    "@react-email/render": "^0.0.7",
     "@sendgrid/mail": "^7.7.0",
     "apollo-server": "^3.11.1",
     "graphql": "^16.6.0",
@@ -42,6 +46,8 @@
     "nexus-prisma": "^1.0.4",
     "node-cron": "^3.0.2",
     "npmlog": "^7.0.1",
+    "react-email": "^1.9.4",
+    "ts-pattern": "^4.3.0",
     "yup": "^0.32.9"
   },
   "devDependencies": {
@@ -70,6 +76,7 @@
     "nodemon": "^2.0.21",
     "prettier": "^2.4.1",
     "prisma": "^4.10.1",
+    "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^3.14.2",
     "tscpaths": "^0.0.9",

packages/server/src/auth/api/auth.ts

@@ -6,7 +6,10 @@ import { verifySignature } from '@/auth/model/signature'
 import { createAuthToken, createEmailToken } from '@/auth/model/token'
 import { Context } from '@/common/api'
 import { PIONEER_URL } from '@/common/config'
-import { configEmailProvider } from '@/common/utils/email'
+import { renderPioneerEmail } from '@/common/email-templates/pioneer-email'
+import { createEmailProvider } from '@/common/utils/email'
+
+const emailProvider = createEmailProvider()
 
 interface SignInArgs {
   memberId: number
@@ -61,10 +64,18 @@ export const signup = mutationField('signup', {
       const token = createEmailToken(pick(args as Required<SignUpArgs>, 'email', 'memberId'))
       const verificationUrl = `${req?.headers.referer ?? PIONEER_URL}/#/?verify-email=${token}`
 
-      await configEmailProvider()({
+      await emailProvider.sendEmail({
         to: args.email,
         subject: 'Confirm your email for Pioneer',
-        text: `Token:${token}\nWith link to :${verificationUrl}`,
+        html: renderPioneerEmail({
+          memberHandle: args.name,
+          summary: 'Confirm your email for Pioneer',
+          text: 'Please use the link below to confirm your email address for Pioneer notifications',
+          button: {
+            label: 'Confirm email',
+            href: verificationUrl,
+          },
+        }),
       })
     }
 

packages/server/src/common/config.ts

@@ -1,5 +1,4 @@
 import { config } from 'dotenv'
-import { pick } from 'lodash'
 import log from 'npmlog'
 
 config()
@@ -12,16 +11,18 @@ const {
   PIONEER_URL = 'https://pioneerapp.xyz',
   STARTING_BLOCK: _STARTING_BLOCK,
   EMAIL_SENDER,
+  SENDGRID_API_KEY,
+  MAILGUN_API_KEY,
   MAILGUN_DOMAIN,
   INITIAL_MEMBERSHIPS: _INITIAL_MEMBERSHIPS,
 } = process.env as { [k: string]: string }
 
 log.level = APP_LOG_LEVEL
 
-const emailProvidersConfig = ['SENDGRID_API_KEY', 'MAILGUN_CONFIG'] as const
-const emailProvider = pick(process.env, emailProvidersConfig)
+const SENDGRID_CONFIG = SENDGRID_API_KEY ? { apiKey: SENDGRID_API_KEY } : null
+const MAILGUN_CONFIG = MAILGUN_API_KEY && MAILGUN_DOMAIN ? { apiKey: MAILGUN_API_KEY, domain: MAILGUN_DOMAIN } : null
 
-export { PORT, APP_SECRET_KEY, QUERY_NODE_ENDPOINT, PIONEER_URL, EMAIL_SENDER, emailProvider, MAILGUN_DOMAIN }
+export { PORT, APP_SECRET_KEY, QUERY_NODE_ENDPOINT, PIONEER_URL, EMAIL_SENDER, SENDGRID_CONFIG, MAILGUN_CONFIG }
 
 export const STARTING_BLOCK = Number(_STARTING_BLOCK ?? 0)
 

packages/server/src/common/email-templates/README.md

@@ -0,0 +1 @@
+To see live previews of emails, use `yarn workspace server dev:emails`.

packages/server/src/common/email-templates/pioneer-email.tsx

@@ -0,0 +1,196 @@
+import { Body } from '@react-email/body'
+import { Button } from '@react-email/button'
+import { Container } from '@react-email/container'
+import { Head } from '@react-email/head'
+import { Heading } from '@react-email/heading'
+import { Html } from '@react-email/html'
+import { Img } from '@react-email/img'
+import { Link } from '@react-email/link'
+import { Preview } from '@react-email/preview'
+import { render } from '@react-email/render'
+import { Section } from '@react-email/section'
+import { Text } from '@react-email/text'
+import * as React from 'react'
+
+import { PIONEER_URL } from '../config'
+
+interface PioneerEmailTemplateProps {
+  memberHandle: string
+  text: string
+  summary: string
+  button: {
+    href: string
+    label: string
+  }
+}
+
+const PioneerEmailTemplate = ({
+  memberHandle = 'bob',
+  text = 'New council election has just started. Follow the link below to announce your candidacy.',
+  summary,
+  // button default value only for email development preview
+  button = {
+    href: `${PIONEER_URL}/#/election`,
+    label: 'See on Pioneer',
+  },
+}: PioneerEmailTemplateProps) => (
+  <Html>
+    <Head />
+    <Preview>{summary}</Preview>
+    <Body style={bodyStyle}>
+      <Container style={containerStyle}>
+        <Section style={logoSectionStyle}>
+          <Img
+            src="https://github.com/Joystream/design/blob/master/logo/pioneer/horizontal/monochromatic/light/cropped/png/[email protected]?raw=true"
+            alt="Pioneer's Logo"
+            style={pioneerLogoStyle}
+          />
+        </Section>
+        <Section style={mainSectionStyle}>
+          <Heading style={h1Style}>Hi {memberHandle},</Heading>
+          <Text style={textStyle}>{text}</Text>
+          {button && (
+            <Button href={button.href} style={ctaStyle} pX={16} pY={12}>
+              {button.label}
+            </Button>
+          )}
+        </Section>
+        <Section style={footerSectionStyle}>
+          <Img
+            src="https://github.com/Joystream/design/blob/master/logo/pioneer/icon/color/light/cropped/png/[email protected]?raw=true"
+            alt="Small Pioneer logo"
+            style={footerLogoStyle}
+          />
+          <Text style={bigLinksStyle}>
+            <Link href={PIONEER_URL} style={bigLinkStyle}>
+              pioneerapp.xyz
+            </Link>
+            <span style={divisorStyle}>|</span>
+            <Link href="https://joystream.org" style={bigLinkStyle}>
+              joystream.org
+            </Link>
+          </Text>
+          <Text style={pioneerLinksStyle}>
+            <Link href={`${PIONEER_URL}/#/election`} style={pioneerLinkStyle}>
+              Council
+            </Link>
+            <Link href={`${PIONEER_URL}/#/proposals/current`} style={middlePioneerLinkStyle}>
+              Proposals
+            </Link>
+            <Link href={`${PIONEER_URL}/#/forum`} style={pioneerLinkStyle}>
+              Forum
+            </Link>
+          </Text>
+          // TODO: include link to notifications settings
+        </Section>
+      </Container>
+    </Body>
+  </Html>
+)
+
+export const renderPioneerEmail = (props: PioneerEmailTemplateProps) => render(PioneerEmailTemplate(props))
+
+const bodyStyle = {
+  backgroundColor: '#ffffff',
+  fontFamily:
+    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+}
+
+const containerStyle = {
+  margin: '0 auto',
+  maxWidth: '600px',
+  border: '1px solid #eee',
+}
+
+const logoSectionStyle: React.CSSProperties = {
+  backgroundColor: '#4038FF',
+  padding: '32px 0',
+}
+
+const pioneerLogoStyle = {
+  margin: '0 auto',
+  width: '194px',
+}
+
+const mainSectionStyle = {
+  padding: '40px 40px',
+}
+
+const h1Style = {
+  color: '#000',
+  fontSize: '24px',
+  lineHeight: '32px',
+  fontWeight: '700',
+  marginTop: '0px',
+  marginBottom: '8px',
+}
+
+const textStyle = {
+  color: '#000',
+  fontSize: '16px',
+  lineHeight: '24px',
+  fontWeight: '400',
+  margin: '0',
+}
+
+const ctaStyle = {
+  backgroundColor: '#4038FF',
+  color: '#fff',
+  fontSize: '14px',
+  lineHeight: '20px',
+  fontWeight: '500',
+  marginTop: '24px',
+  padding: '12px 16px',
+  borderRadius: '2px',
+}
+
+const footerSectionStyle = {
+  backgroundColor: '#000',
+  padding: '24px 16px 20px 16px',
+}
+
+const footerLogoStyle = {
+  margin: '0 auto',
+  width: '24px',
+  marginBottom: '10px',
+}
+
+const bigLinksStyle: React.CSSProperties = {
+  textAlign: 'center',
+  margin: '0',
+  marginBottom: '2px',
+  lineHeight: '20px',
+}
+
+const bigLinkStyle = {
+  fontSize: '14px',
+  lineHeight: '20px',
+  fontWeight: '700',
+  color: '#F9FAFC',
+}
+
+const divisorStyle = {
+  fontSize: '14px',
+  lineHeight: '20px',
+  fontWeight: '700',
+  color: '#5D6B80',
+  margin: '0 8px',
+}
+
+const pioneerLinksStyle: React.CSSProperties = {
+  textAlign: 'center',
+  margin: '0',
+  lineHeight: '14px',
+}
+
+const pioneerLinkStyle = {
+  fontSize: '10px',
+  lineHeight: '14px',
+  fontWeight: '400',
+  color: '#F9FAFC',
+}
+
+const middlePioneerLinkStyle = {
+  ...pioneerLinkStyle,
+  margin: '0 16px',
+}