feat: 10243 Update templates with designs from ANZ (#10245)

* Update templates with designs from ANZ * Fix issue with missing padding round email content Update to attempt to address recipient by first name * Fix lint errors * Fixed missed linting error * Tweak * small refactor * small refactor * adds tests --------- Co-authored-by: Will McVay <[email protected]>
reapit · Dec 7, 2023 · 5de9aee · 5de9aee
1 parent 831d714
commit 5de9aee
Show file tree

Hide file tree

Showing 6 changed files with 142 additions and 101 deletions.
diff --git a/packages/cognito-custom-mail-lambda/src/mailer/__tests__/utils.test.ts b/packages/cognito-custom-mail-lambda/src/mailer/__tests__/utils.test.ts
@@ -0,0 +1,19 @@
+import { tryGetFirstName } from '../utils'
+
+describe('tryGetFirstName', () => {
+  it('should return the input if the input length is less than 2', () => {
+    expect(tryGetFirstName('A')).toBe('A')
+  })
+
+  it('should return the first part of the name if the name has less than 3 parts', () => {
+    expect(tryGetFirstName('John Doe')).toBe('John')
+  })
+
+  it('should return the second part of the name if the first part is a title', () => {
+    expect(tryGetFirstName('Mr John Doe')).toBe('John')
+  })
+
+  it('should return the first part of the name if the first part is not a title', () => {
+    expect(tryGetFirstName('John Mr Doe')).toBe('John')
+  })
+})
diff --git a/packages/cognito-custom-mail-lambda/src/mailer/custom-mailer.ts b/packages/cognito-custom-mail-lambda/src/mailer/custom-mailer.ts
@@ -4,6 +4,7 @@ import confirmRegistrationTemplate from './templates/confirm-registration.html'
 import adminUserInviteTemplate from './templates/admin-user-invite.html'
 import { UserModel } from '@reapit/foundations-ts-definitions'
 import * as oldTemplates from './templates/old-templates'
+import { tryGetFirstName } from './utils'
 
 const confirmRegistrationUrl = `${process.env.MARKET_PLACE_URL}/login`
 const resetPasswordUrl = `${process.env.MARKET_PLACE_URL}/reset-password`
@@ -52,7 +53,7 @@ export const customMailer: CognitoUserPoolTriggerHandler = async (event, _contex
       event.response.emailSubject = 'Reapit Connect - Forgotten Password'
       const obj = {
         verificationCode: event.request.codeParameter as string,
-        userName: event.request.userAttributes.name,
+        userName: tryGetFirstName(event.request.userAttributes.name),
         url: resetPasswordUrl,
       }
       event.response.emailMessage = useOldTemplates
@@ -65,7 +66,7 @@ export const customMailer: CognitoUserPoolTriggerHandler = async (event, _contex
       event.response.emailSubject = 'Welcome to Reapit Connect'
       const obj = {
         url: await getConfirmRegistrationUrl(event.request.userAttributes.email),
-        userName: event.request.userAttributes.name,
+        userName: tryGetFirstName(event.request.userAttributes.name),
       }
       event.response.emailMessage = useOldTemplates
         ? oldTemplates.confirmRegistrationTemplate(obj)
@@ -76,8 +77,8 @@ export const customMailer: CognitoUserPoolTriggerHandler = async (event, _contex
     case 'CustomMessage_AdminCreateUser': {
       event.response.emailSubject = 'Welcome to Reapit Connect'
       const obj = {
-        name: event.request.userAttributes.name,
-        userName: event.request.userAttributes.name,
+        name: tryGetFirstName(event.request.userAttributes.name),
+        userName: tryGetFirstName(event.request.userAttributes.name),
         url: await getConfirmRegistrationUrl(event.request.userAttributes.email),
         verificationCode: event.request.codeParameter as string,
       }

diff --git a/packages/cognito-custom-mail-lambda/src/mailer/templates/admin-user-invite.mjml b/packages/cognito-custom-mail-lambda/src/mailer/templates/admin-user-invite.mjml
@@ -1,51 +1,51 @@
-<mjml
-  lang="en"
->
+<mjml>
   <mj-head>
-    <mj-font name="arial"
-      href="https://fonts.googleapis.com/css?family=arial" />
+    <mj-font name="Inter" href="https://fonts.googleapis.com/css2?family=Inter" />
 
     <mj-attributes>
-      <mj-class name="body-text" font-size="14px" color="#646464" font-family="arial" align="center" font-weight="400" />
-      <mj-class name="title" font-size="20px" font-size="20px" color="#000" align="center" font-weight="900" />
-      <mj-all font-family="arial"/>
-      <mj-button background-color="#4E56EA" href="#" text-transform="uppercase" />
+      <mj-class name="strapline-text" font-size="32px" align="center" font-weight="600" font-family="Inter,Arial" line-height="40px" />
+      <mj-class name="body-text" font-size="18px" align="center" font-weight="400" font-family="Inter,Arial" line-height="24px" />
+      <mj-class name="footer-text" font-size="12px" align="center" font-weight="400" font-family="Inter,Arial" line-height="16px" />
+      <mj-class name="light-footer-text" font-size="12px" align="center" font-weight="400" font-family="Inter,Arial" line-height="16px" color="#607890" />
+      <mj-class name="credentials-panel" border="1px solid #D8DEE4" border-radius="8px" padding="10px" width="50%" />
+      <mj-class name="login-button" background-color="#4E56EA" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="white">
-    <mj-section>
-      <mj-column vertical-align="middle">
-        <mj-image width="200px" src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/logo-reapit-2023.png" alt="Reapit Logo" />
-      </mj-column>
-      <mj-column vertical-align="middle">
-        <mj-image src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/reapit-connect-2023.png" alt="Reapit Connect Logo"/>
+  <mj-body background-color="#F2F4F6">
+    <mj-section></mj-section>
+    <mj-section background-color="#fff">
+      <mj-column>
+        <mj-image width="250px" src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/reapit_logo_connect_2023.jpg"></mj-image>
+        <mj-text mj-class="strapline-text">One login for your Reapit platform.</mj-text>
+        <mj-text mj-class="body-text">Welcome to Reapit Connect, {name}.</mj-text>
+        <mj-text mj-class="body-text">You now have the power to access all Reapit products and services with a single login.</mj-text>
+        <mj-text mj-class="body-text">In order to get started, we’ll need you to sign in with your username and the temporary password provided here. You’ll be asked to reset the password for security purposes.</mj-text>
       </mj-column>
     </mj-section>
-    <mj-section>
-      <mj-column>
-        <mj-text mj-class="title">
-          Welcome to Reapit Connect
+    <mj-section background-color="#FFF">
+      <mj-column mj-class="credentials-panel">
+        <mj-text align="center" font-family="Inter,Arial">
+          <b>Username:</b> {username}
         </mj-text>
 
-        <mj-text mj-class="body-text">Hi {name},</mj-text>
-        <mj-text mj-class="body-text">Welcome to Reapit Connect.</mj-text>
-        <mj-text mj-class="body-text">Reapit Connect is our single sign on solution which allows you to seamlessly access products and services provided by Reapit Ltd.</mj-text>
-        <mj-text mj-class="body-text">Please see below your userName and temporary password. When you click the login link, you will be re-directed to a screen where you will be asked to change your password.</mj-text>
-        <mj-text mj-class="body-text"><strong>User Name: {username}</strong></mj-text>
-        <mj-text mj-class="body-text"><strong>Temporary Password: {####}</strong></mj-text>
-        <mj-button href={url}>login</mj-button>
-        <mj-text mj-class="body-text">When you have successfully changed your temporary password, you will then be presented with a list of products and services available to you.</mj-text>
-        <mj-text mj-class="body-text">Please do not reply to this email as this mailbox is not monitored. If you are having an issue or if you have a question about Reapit Connect, please reach out to your help or service desk for support.</mj-text>
-        <mj-text mj-class="body-text">Best Regards,</mj-text>
-        <mj-text mj-class="body-text">Reapit Team</mj-text>
+        <mj-text align="center" font-family="Inter,Arial">
+          <b>Password:</b> {####}
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <mj-section background-color="#FFF">
+      <mj-column>
+        <mj-button mj-class="login-button" href={url}>Login to Reapit Connect</mj-button>
+    </mj-section>
+    <mj-section background-color="#FFF">
+      <mj-column>
+        <mj-text mj-class="footer-text">Please note that this is an automatically generated email, replies will not be answered. If you have any questions or concerns, kindly contact support.</mj-text>
       </mj-column>
     </mj-section>
     <mj-section>
       <mj-column>
-        <mj-spacer>
-        </mj-spacer>
-        <mj-text mj-class="body-text">www.reapit.com</mj-text>
+        <mj-text mj-class="light-footer-text">Copyright &copy; Reapit Ltd. All rights reserved.</mj-text>
       </mj-column>
     </mj-section>
   </mj-body>
-</mjml>
+</mjml>
diff --git a/packages/cognito-custom-mail-lambda/src/mailer/templates/confirm-registration.mjml b/packages/cognito-custom-mail-lambda/src/mailer/templates/confirm-registration.mjml
@@ -1,47 +1,39 @@
-<mjml
-  lang="en"
->
+<mjml>
   <mj-head>
-    <mj-font name="arial"
-      href="https://fonts.googleapis.com/css?family=arial" />
+    <mj-font name="Inter" href="https://fonts.googleapis.com/css2?family=Inter" />
 
     <mj-attributes>
-      <mj-class name="body-text" font-size="14px" color="#646464" font-family="arial" align="center" font-weight="400" />
-      <mj-class name="title" font-size="20px" font-size="20px" color="#000" align="center" font-weight="900" />
-      <mj-all font-family="arial"/>
-      <mj-button background-color="#4E56EA" href="#" text-transform="uppercase" />
+      <mj-class name="strapline-text" font-size="32px" align="center" font-weight="600" font-family="Inter,Arial" line-height="40px" />
+      <mj-class name="body-text" font-size="18px" align="center" font-weight="400" font-family="Inter,Arial" line-height="24px" />
+      <mj-class name="footer-text" font-size="12px" align="center" font-weight="400" font-family="Inter,Arial" line-height="16px" />
+      <mj-class name="light-footer-text" font-size="12px" align="center" font-weight="400" font-family="Inter,Arial" line-height="16px" color="#607890" />
+      <mj-class name="login-button" background-color="#4E56EA" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="white">
-    <mj-section>
-      <mj-column vertical-align="middle">
-        <mj-image width="200px" src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/logo-reapit-2023.png" alt="Reapit Logo" />
-      </mj-column>
-      <mj-column vertical-align="middle">
-        <mj-image src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/reapit-connect-2023.png" alt="Reapit Connect Logo"/>
+  <mj-body background-color="#F2F4F6">
+    <mj-section></mj-section>
+    <mj-section background-color="#fff">
+      <mj-column>
+        <mj-image width="250px" src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/reapit_logo_connect_2023.jpg"></mj-image>
+        <mj-text mj-class="strapline-text">One login for your Reapit platform.</mj-text>
+        <mj-text mj-class="body-text">Welcome to Reapit Connect, {name}.</mj-text>
+        <mj-text mj-class="body-text">You now have the power to access all Reapit products and services with a single login.</mj-text>
+        <mj-text mj-class="body-text">In order to get started, we’ll need you to verify your account by clicking the link below. You’ll be asked to reset the password for security purposes.</mj-text>
       </mj-column>
     </mj-section>
-    <mj-section>
+    <mj-section background-color="#FFF">
+      <mj-column>
+        <mj-button mj-class="login-button" href="{url}?userName={userName}&verificationCode={####}">Verify your account</mj-button>
+    </mj-section>
+    <mj-section background-color="#FFF">
       <mj-column>
-        <mj-text mj-class="title">
-          Welcome to Reapit Connect
-        </mj-text>
-        <mj-text mj-class="body-text">Welcome to Reapit Connect.</mj-text>
-        <mj-text mj-class="body-text">Reapit Connect is our single sign on solution which allows you to seamlessly access products and services provided by Reapit Ltd.</mj-text>
-        <mj-text mj-class="body-text">Please see below your username and verification code. When you click the verification link, you will be re-directed to a screen where you will be asked to change your password.</mj-text>
-        <mj-button href="{url}?userName={userName}&verificationCode={####}">VERIFY ACCOUNT</mj-button>
-        <mj-text mj-class="body-text">Once your account has been verified, you will be redirected to the login page.</mj-text>
-        <mj-text mj-class="body-text">Please do not reply to this email as this mailbox is not monitored. If you are having an issue or if you have a question about Reapit Connect, please reach out to your help or service desk for support.</mj-text>
-        <mj-text mj-class="body-text">Best Regards,</mj-text>
-        <mj-text mj-class="body-text">Reapit Team</mj-text>
+        <mj-text mj-class="footer-text">Please note that this is an automatically generated email, replies will not be answered. If you have any questions or concerns, kindly contact support.</mj-text>
       </mj-column>
     </mj-section>
     <mj-section>
       <mj-column>
-        <mj-spacer>
-        </mj-spacer>
-        <mj-text mj-class="body-text">www.reapit.com</mj-text>
+        <mj-text mj-class="light-footer-text">Copyright &copy; Reapit Ltd. All rights reserved.</mj-text>
       </mj-column>
     </mj-section>
   </mj-body>
-</mjml>
+</mjml>
diff --git a/packages/cognito-custom-mail-lambda/src/mailer/templates/forgot-password.mjml b/packages/cognito-custom-mail-lambda/src/mailer/templates/forgot-password.mjml
@@ -1,46 +1,41 @@
-<mjml
-  lang="en"
->
+<mjml>
   <mj-head>
-    <mj-font name="arial"
-      href="https://fonts.googleapis.com/css?family=arial" />
+    <mj-font name="Inter" href="https://fonts.googleapis.com/css2?family=Inter" />
 
     <mj-attributes>
-      <mj-class name="body-text" font-size="14px" color="#646464" font-family="arial" align="center" font-weight="400" />
-      <mj-class name="title" font-size="20px" font-size="20px" color="#000" align="center" font-weight="900" />
-      <mj-all font-family="arial"/>
-      <mj-button background-color="#4E56EA" href="#" text-transform="uppercase" />
+      <mj-class name="strapline-text" font-size="32px" align="center" font-weight="600" font-family="Inter,Arial" line-height="40px" />
+      <mj-class name="body-text" font-size="18px" align="center" font-weight="400" font-family="Inter,Arial" line-height="24px" />
+      <mj-class name="footer-text" font-size="12px" align="center" font-weight="400" font-family="Inter,Arial" line-height="16px" />
+      <mj-class name="light-footer-text" font-size="12px" align="center" font-weight="400" font-family="Inter,Arial" line-height="16px" color="#607890" />
+      <mj-class name="login-button" background-color="#4E56EA" />
+      <mj-class name="credentials-panel" border="1px solid #D8DEE4" border-radius="8px" padding="10px" width="50%" />
     </mj-attributes>
   </mj-head>
-  <mj-body background-color="white">
-    <mj-section>
-      <mj-column vertical-align="middle">
-        <mj-image width="200px" src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/logo-reapit-2023.png" alt="Reapit Logo" />
+  <mj-body background-color="#F2F4F6">
+    <mj-section background-color="#fff">
+      <mj-column>
+        <mj-image width="250px" src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/reapit_logo_connect_2023.jpg"></mj-image>
+        <mj-text mj-class="strapline-text">One login for your Reapit platform.</mj-text>
+        <mj-text mj-class="body-text">Hi {userName}</mj-text>
+        <mj-text mj-class="body-text">Forgot your password? No problem, it happens to everyone. Please use the code below to reset your password.</mj-text>
       </mj-column>
-      <mj-column vertical-align="middle">
-        <mj-image src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/reapit-connect-2023.png" alt="Reapit Connect Logo"/>
+    </mj-section>
+   <mj-section background-color="#FFF">
+      <mj-column mj-class="credentials-panel">
+        <mj-text align="center" font-family="Inter,Arial">
+          <b>Verification Code:</b> {####}
+        </mj-text>
       </mj-column>
     </mj-section>
-    <mj-section>
+    <mj-section background-color="#FFF">
       <mj-column>
-        <mj-text mj-class="title">
-          Reapit Connect - Forgotten Password
-        </mj-text>
-        <mj-text mj-class="body-text">Hi {userName}</mj-text>
-        <mj-text mj-class="body-text">We have received a request to reset your Reapit Connect password.</mj-text>
-        <mj-text mj-class="body-text">Here is your single use verification code: <strong>{####}</strong></mj-text>
-        <mj-text mj-class="body-text">If you did not make this request, please ignore this email.</mj-text>
-        <mj-text mj-class="body-text">Please do not reply to this email as this mailbox is not monitored. If you are having an issue or if you have a question about Reapit Connect, please reach out to your help or service desk for support.</mj-text>
-        <mj-text mj-class="body-text">Best Regards,</mj-text>
-        <mj-text mj-class="body-text">Reapit Team</mj-text>
+        <mj-text mj-class="footer-text">Please note that this is an automatically generated email, replies will not be answered. If you have any questions or concerns, kindly contact support.</mj-text>
       </mj-column>
     </mj-section>
     <mj-section>
       <mj-column>
-        <mj-spacer>
-        </mj-spacer>
-        <mj-text mj-class="body-text">www.reapit.com</mj-text>
+        <mj-text mj-class="light-footer-text">Copyright &copy; Reapit Ltd. All rights reserved.</mj-text>
       </mj-column>
     </mj-section>
   </mj-body>
-</mjml>
+</mjml>
diff --git a/packages/cognito-custom-mail-lambda/src/mailer/utils.ts b/packages/cognito-custom-mail-lambda/src/mailer/utils.ts
@@ -0,0 +1,34 @@
+const titles: string[] = [
+  'Mr',
+  'Mrs',
+  'Dr',
+  'Doctor',
+  'Master',
+  'Miss',
+  'Ms',
+  'Sir',
+  'Mdm',
+  'Madam',
+  'Dame',
+  'Lord',
+  'Lady',
+  'Esq',
+  'Prof',
+  'Professor',
+]
+
+export const tryGetFirstName = (input: string = '') => {
+  const trimmed = input.trim()
+
+  if (trimmed.length < 2) {
+    return input
+  }
+
+  const nameParts: string[] = trimmed.split(' ')
+
+  if (nameParts.length < 3) {
+    return nameParts[0]
+  }
+
+  return titles.includes(nameParts[0]) ? nameParts[1] : nameParts[0]
+}