feat: port approval status to mrf completion email

opengovsg · Oct 15, 2024 · 0732f38 · 0732f38
1 parent d5d9b80
commit 0732f38
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 104 deletions.
diff --git a/src/app/modules/submission/multirespondent-submission/multirespondent-submission.service.ts b/src/app/modules/submission/multirespondent-submission/multirespondent-submission.service.ts
@@ -240,13 +240,19 @@ const sendMrfOutcomeEmails = ({
           return okAsync(true)
         }
 
+        const formQuestionAnswers = getQuestionTitleAnswerString({
+          formFields: form.form_fields,
+          responses,
+        })
+
         if (isApproval) {
           return MailService.sendMrfApprovalEmail({
             emails: destinationEmails,
             formId: form._id,
             formTitle: form.title,
             responseId: submissionId,
             isRejected,
+            formQuestionAnswers,
           }).orElse((error) => {
             logger.error({
               message: 'Failed to send approval email',
@@ -265,10 +271,7 @@ const sendMrfOutcomeEmails = ({
           formId: form._id,
           formTitle: form.title,
           responseId: submissionId,
-          formQuestionAnswers: getQuestionTitleAnswerString({
-            formFields: form.form_fields,
-            responses,
-          }),
+          formQuestionAnswers,
         }).orElse((error) => {
           logger.error({
             message: 'Failed to send workflow completion email',

diff --git a/src/app/services/mail/mail.service.ts b/src/app/services/mail/mail.service.ts
@@ -33,11 +33,9 @@ import {
   getAdminEmails,
 } from '../../modules/form/form.utils'
 import { formatAsPercentage } from '../../utils/formatters'
-import MrfApprovalOutcomeEmail, {
-  WorkflowOutcome,
-} from '../../views/templates/MrfApprovalOutcomeEmail'
 import MrfWorkflowCompletionEmail, {
   QuestionAnswer,
+  WorkflowOutcome,
 } from '../../views/templates/MrfWorkflowCompletionEmail'
 import MrfWorkflowEmail, {
   WorkflowEmailData,
@@ -1138,12 +1136,14 @@ export class MailService {
     formTitle,
     responseId,
     isRejected,
+    formQuestionAnswers,
   }: {
     emails: string[]
     formId: string
     formTitle: string
     responseId: string
     isRejected: boolean
+    formQuestionAnswers: QuestionAnswer[]
   }) => {
     const outcome = isRejected
       ? WorkflowOutcome.NOT_APPROVED
@@ -1152,9 +1152,10 @@ export class MailService {
       formTitle,
       responseId: responseId.toString(),
       outcome,
+      formQuestionAnswers,
     }
 
-    const html = render(MrfApprovalOutcomeEmail(htmlData))
+    const html = render(MrfWorkflowCompletionEmail(htmlData))
 
     const mail: MailOptions = {
       to: emails,

diff --git a/src/app/views/templates/MrfApprovalOutcomeEmail.tsx b/src/app/views/templates/MrfApprovalOutcomeEmail.tsx
diff --git a/src/app/views/templates/MrfWorkflowCompletionEmail.tsx b/src/app/views/templates/MrfWorkflowCompletionEmail.tsx
@@ -16,10 +16,16 @@ import {
   containerStyle,
   headingTextStyle,
   mainStyle,
+  outcomeTextStyle,
   sectionStyle,
   titleTextStyle,
 } from './styles'
 
+export enum WorkflowOutcome {
+  APPROVED = 'Approved', 
+  NOT_APPROVED = 'Not approved' 
+}  
+
 export type QuestionAnswer = {
   question: string, 
   answer: string 
@@ -29,13 +35,15 @@ export type WorkflowEmailData = {
   formTitle: string
   responseId: string
   formQuestionAnswers: QuestionAnswer[]
+  outcome?: WorkflowOutcome | undefined 
 }
 
 export const MrfWorkflowCompletionEmail = ({
   // Defaults are provided only for testing purposes in react-email-preview.
   formTitle = 'Test form title',
   responseId = '64303c45828035f732088a41', 
-  formQuestionAnswers = []
+  formQuestionAnswers = [], 
+  outcome
 }: WorkflowEmailData): JSX.Element => {
   return (
     <Html>
@@ -45,8 +53,18 @@ export const MrfWorkflowCompletionEmail = ({
             <Section style={sectionStyle}>
               <Img style={{height: '1.5rem', marginBottom: '2.5rem'}} src={FORMSG_LOGO_URL} alt="FormSG" />
               <Heading style={headingTextStyle}>
-                {formTitle} has been completed by all respondents.
+                {
+                  outcome 
+                    ? `The outcome for ${formTitle}` 
+                    : `${formTitle} has been completed by all respondents.` 
+                }
               </Heading>
+              {
+                outcome ? <>
+                  <Text style={{...outcomeTextStyle, marginTop: '2.5rem', marginBottom: '0.25rem'}}>Outcome</Text>
+                  <Text style={{...outcomeTextStyle, fontWeight: 400, marginTop: '0.25rem', color: '#474747'}}>{outcome}</Text>
+                </> : null 
+              }
               <Hr style={{marginTop: '2.5rem', marginBottom: '2.5rem'}}/>
               <Heading style={{...headingTextStyle, marginBottom: '2.5rem'}}>
                 Responses for {formTitle} 

diff --git a/src/app/views/templates/styles.ts b/src/app/views/templates/styles.ts
@@ -60,8 +60,6 @@ export const linkStyle: NonNullable<LinkProps['style']> = {
 const textStyles = {
   'body-1': {
     fontStyle: 'normal',
-    fontFamily:
-      "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
     fontWeight: 400,
     fontSize: '1rem',
     lineHeight: '1.5rem',
@@ -70,13 +68,18 @@ const textStyles = {
   },
   h4: {
     fontWeight: 500,
-    fontFamily:
-      "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
     fontSize: '1.125rem',
     lineHeight: '1.5rem',
     letterSpacing: '-0.014em',
     fontFeatureSettings: "'tnum' on, 'lnum' on, 'cv05' on",
   },
+  h5: {
+    fontWeight: 600,
+    fontSize: '1.25rem',
+    lineHeight: '1.75rem',
+    letterSpacing: '-0.014em',
+    fontFeatureSettings: "'tnum' on, 'lnum' on, 'cv05' on",
+  },
 }
 
 export const mainStyle = {
@@ -104,6 +107,11 @@ export const headingTextStyle: NonNullable<LinkProps['style']> = {
   fontSize: '1.5rem',
 }
 
+export const outcomeTextStyle: NonNullable<LinkProps['style']> = {
+  ...textStyles['h5'],
+  color: '#000000',
+}
+
 export const titleTextStyle: NonNullable<LinkProps['style']> = {
   ...textStyles['body-1'],
   color: '#000000',