feat: mrf dashboard send reminders

frontend/src/features/admin-form/common/mutations.ts

@@ -31,6 +31,7 @@ import {
 } from '../common/AdminViewFormService'
 import { downloadFormIssue } from '../responses/FeedbackPage/issue/IssueService'
 import { downloadFormReview } from '../responses/FeedbackPage/review/ReviewService'
+import { sendReminderForPendingMrfResponse } from '../responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable/reminders/ReminderService'
 
 import { useCollaboratorWizard } from './components/CollaboratorModal/CollaboratorWizardContext'
 import { permissionsToRole } from './components/CollaboratorModal/utils'
@@ -553,3 +554,45 @@ export const useFormIssueMutations = () => {
 
   return { downloadFormIssueMutation: downloadFormIssuesMutation }
 }
+
+export const useFormRemindersMutations = () => {
+  const toast = useToast({ status: 'success', isClosable: true })
+  const handleError = useCallback(
+    (error: Error) => {
+      toast.closeAll()
+      toast({
+        description: error.message,
+        status: 'danger',
+      })
+    },
+    [toast],
+  )
+
+  const sendReminderForResponseMutation = useMutation(
+    ({
+      formId,
+      submissionId,
+      submissionSecretKey,
+    }: {
+      formId: string
+      submissionId: string
+      submissionSecretKey: string
+    }) => {
+      return sendReminderForPendingMrfResponse({
+        formId,
+        submissionId,
+        submissionSecretKey,
+      })
+    },
+    {
+      onSuccess: () => {
+        toast({
+          description: 'Your reminder has been sent',
+        })
+      },
+      onError: handleError,
+    },
+  )
+
+  return { sendReminderForResponseMutation }
+}

frontend/src/features/admin-form/responses/IndividualResponsePage/mutations.ts

@@ -2,12 +2,9 @@ import { useCallback } from 'react'
 import { useMutation } from 'react-query'
 import FileSaver from 'file-saver'
 
-import { BasicField } from '~shared/types'
-
 import { useToast } from '~hooks/useToast'
 
 import { AttachmentsDownloadMap } from '../ResponsesPage/storage/types'
-import { AugmentedDecryptedResponse } from '../ResponsesPage/storage/utils/augmentDecryptedResponses'
 import {
   downloadAndDecryptAttachment,
   downloadAndDecryptAttachmentsAsZip,

frontend/src/features/admin-form/responses/IndividualResponsePage/queries.ts

@@ -15,18 +15,27 @@ import { useStorageResponsesContext } from '../ResponsesPage/storage'
  * @precondition Must be wrapped in a Router as `useParam` is used.
  */
 export const useIndividualSubmission = () => {
-  const toast = useToast({
-    status: 'danger',
-  })
-
   const { formId, submissionId } = useParams()
-  const { data: { responseMode } = {} } = useAdminForm()
 
   if (!formId || !submissionId) {
     throw new Error('No formId or submissionId provided')
   }
 
+  return useGetIndividualDecryptedSubmission({ formId, submissionId })
+}
+
+export const useGetIndividualDecryptedSubmission = ({
+  formId,
+  submissionId,
+}: {
+  formId: string
+  submissionId: string
+}) => {
+  const toast = useToast({
+    status: 'danger',
+  })
   const { secretKey } = useStorageResponsesContext()
+  const { data: { responseMode } = {} } = useAdminForm()
 
   return useQuery(
     adminFormResponsesKeys.individual(formId, submissionId),

frontend/src/features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable/ResponsesTable.tsx

@@ -31,12 +31,14 @@ import { useAdminForm } from '~features/admin-form/common/queries'
 import { getPendingResponseAtString } from '~features/admin-form/responses/common/utils/mrfSubmissionView'
 import {
   MRF_PENDING_RESPONSE_AT_LABEL,
+  MRF_REMINDERS_LABEL,
   MRF_RESPONSE_TIMESTAMP_LABEL,
   MRF_WORKFLOW_STATUS_LABEL,
 } from '~features/admin-form/responses/constants'
 
 import { useUnlockedResponses } from '../UnlockedResponsesProvider'
 
+import { SendReminderButton } from './SendReminderButton'
 import { getNetAmount } from './utils'
 
 type ResponseColumnData = SubmissionMetadata
@@ -190,9 +192,9 @@ const MRF_RESPONSE_TABLE_COLUMNS: Column<ResponseColumnData>[] = [
   {
     Header: 'Response ID',
     accessor: 'refNo',
-    width: 300,
-    minWidth: 300,
-    maxWidth: 300,
+    width: 240,
+    minWidth: 240,
+    maxWidth: 240,
   },
   {
     Header: MRF_WORKFLOW_STATUS_LABEL,
@@ -213,9 +215,9 @@ const MRF_RESPONSE_TABLE_COLUMNS: Column<ResponseColumnData>[] = [
         return <CompletedBadge />
       }
     },
-    width: 200,
-    minWidth: 180,
-    maxWidth: 220,
+    width: 160,
+    minWidth: 160,
+    maxWidth: 160,
   },
   {
     Header: MRF_PENDING_RESPONSE_AT_LABEL,
@@ -236,9 +238,9 @@ const MRF_RESPONSE_TABLE_COLUMNS: Column<ResponseColumnData>[] = [
         workflowNumTotalSteps,
       })
     },
-    width: 200,
+    width: 180,
     minWidth: 180,
-    maxWidth: 220,
+    maxWidth: 180,
   },
   {
     Header: MRF_RESPONSE_TIMESTAMP_LABEL,
@@ -252,9 +254,24 @@ const MRF_RESPONSE_TABLE_COLUMNS: Column<ResponseColumnData>[] = [
     //         'do MMM yyyy, hh:mm:ss a',
     //       )
     //     : '',
-    width: 250,
-    minWidth: 250,
-    disableResizing: true,
+    width: 240,
+    minWidth: 240,
+    maxWidth: 240,
+  },
+  {
+    Header: MRF_REMINDERS_LABEL,
+    Cell: ({ row }) => {
+      const isPending =
+        row.original.mrf?.workflowStatus === WorkflowStatus.PENDING
+      const hasNextStepRecipientEmails =
+        row.original.mrf?.hasNextStepRecipientEmails
+      const submissionId = row.original.refNo
+      return isPending && hasNextStepRecipientEmails ? (
+        <SendReminderButton submissionId={submissionId} />
+      ) : null
+    },
+    minWidth: 160,
+    width: 160,
   },
 ]
 
@@ -427,6 +444,8 @@ export const ResponsesTable = () => {
                     as="div"
                     {...cell.getCellProps()}
                     key={cell.getCellProps().key}
+                    display="flex"
+                    alignItems="center"
                   >
                     {cell.render('Cell')}
                   </Td>

frontend/src/features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable/SendReminderButton.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { BiBell, BiCheck } from 'react-icons/bi'
+import { useParams } from 'react-router-dom'
+import { Text } from '@chakra-ui/react'
+
+import Button from '~components/Button'
+
+import { useFormRemindersMutations } from '~features/admin-form/common/mutations'
+import { useGetIndividualDecryptedSubmission } from '~features/admin-form/responses/IndividualResponsePage/queries'
+
+export const SendReminderButton = ({
+  submissionId,
+}: {
+  submissionId: string
+}) => {
+  const { formId = '' } = useParams()
+
+  const { sendReminderForResponseMutation } = useFormRemindersMutations()
+
+  const sendReminderForResponse = sendReminderForResponseMutation
+
+  const [isSent, setIsSent] = useState(false)
+
+  const { data: submissionData, isLoading: isLoadingSubmissionData } =
+    useGetIndividualDecryptedSubmission({
+      formId,
+      submissionId,
+    })
+  const submissionSecretKey = submissionData?.submissionSecretKey
+
+  if (!formId) {
+    return null
+  }
+
+  return !isSent ? (
+    <Button
+      isLoading={isLoadingSubmissionData}
+      loadingText={isLoadingSubmissionData ? 'Loading' : 'Sending'}
+      m="0"
+      p="0"
+      variant="clear"
+      leftIcon={<BiBell />}
+      _focus={{}}
+      onClick={(e) => {
+        e.stopPropagation()
+        if (!submissionSecretKey) {
+          return
+        }
+        sendReminderForResponse.mutate({
+          formId,
+          submissionId,
+          submissionSecretKey,
+        })
+        setIsSent(true)
+      }}
+    >
+      <Text textStyle="subhead-2">Send reminder</Text>
+    </Button>
+  ) : (
+    <Button variant="clear" m="0" p="0" leftIcon={<BiCheck />} isDisabled>
+      <Text textStyle="subhead-2">Reminder sent</Text>
+    </Button>
+  )
+}

frontend/src/features/admin-form/responses/ResponsesPage/storage/UnlockedResponses/ResponsesTable/reminders/ReminderService.tsx

@@ -0,0 +1,25 @@
+import { ApiService } from '~services/ApiService'
+
+import { ADMIN_FORM_ENDPOINT } from '~features/admin-form/common/AdminViewFormService'
+
+/**
+ * Trigger a reminder for the pending step.
+ * @param formId the id of the form
+ * @param submissionId the id of the submission to send reminder for
+ */
+export const sendReminderForPendingMrfResponse = async ({
+  formId,
+  submissionId,
+  submissionSecretKey,
+}: {
+  formId: string
+  submissionId: string
+  submissionSecretKey: string
+}): Promise<void> => {
+  return ApiService.post<void>(
+    `${ADMIN_FORM_ENDPOINT}/${formId}/submissions/${submissionId}/remind`,
+    {
+      submissionSecretKey,
+    },
+  ).then(() => {})
+}

frontend/src/features/admin-form/responses/ResponsesPage/storage/utils/CsvRecord.class.test.ts

@@ -2,6 +2,7 @@ import { WorkflowStatus } from '~shared/types'
 
 import {
   MRF_PENDING_RESPONSE_AT_LABEL,
+  MRF_REMINDERS_LABEL,
   MRF_WORKFLOW_STATUS_LABEL,
 } from '~features/admin-form/responses/constants'
 
@@ -26,6 +27,7 @@ describe('CsvRecord', () => {
             workflowCurrentStepNumber: 1,
             workflowNumTotalSteps: 2,
             lastSubmittedAt: '2025-02-17T00:00:00.000Z',
+            hasNextStepRecipientEmails: false,
           },
         )
 
@@ -39,6 +41,9 @@ describe('CsvRecord', () => {
           expect.objectContaining({ question: MRF_WORKFLOW_STATUS_LABEL }),
           expect.objectContaining({ question: MRF_PENDING_RESPONSE_AT_LABEL }),
         ])
+        expect(recordResult).not.toContainEqual(
+          expect.objectContaining({ question: MRF_REMINDERS_LABEL }),
+        )
       })
     })
   })

frontend/src/features/admin-form/responses/ResponsesPage/storage/utils/EncryptedResponseCsvGenerator/EncryptedResponseCsvGenerator.test.ts

@@ -6,15 +6,7 @@ import { SetOptional } from 'type-fest'
 import { WorkflowStatus } from '~shared/types/submission'
 import { answerKey } from '~shared/utils/address'
 
-import {
-  getPendingResponseAtString,
-  MRF_STATUS,
-} from '~features/admin-form/responses/common/utils/mrfSubmissionView'
-import {
-  MRF_PENDING_RESPONSE_AT_LABEL,
-  MRF_RESPONSE_TIMESTAMP_LABEL,
-  MRF_WORKFLOW_STATUS_LABEL,
-} from '~features/admin-form/responses/constants'
+import { MRF_RESPONSE_TIMESTAMP_LABEL } from '~features/admin-form/responses/constants'
 
 import { CsvRecordData, DecryptedSubmissionData } from '../../types'
 import {
@@ -388,6 +380,7 @@ describe('EncryptedResponseCsvGenerator', () => {
             workflowCurrentStepNumber: 2,
             workflowNumTotalSteps: 3,
             lastSubmittedAt: '2024-01-01T00:00:00.000Z',
+            hasNextStepRecipientEmails: false,
           },
         }
         mrfGenerator.addRecord(mockRecord)

frontend/src/features/admin-form/responses/ResponsesPage/storage/worker/decryption.worker.ts

@@ -97,6 +97,8 @@ async function decryptIntoCsv(
               submission.mrfMeta.workflowCurrentStepNumber,
             workflowNumTotalSteps: submission.mrfMeta.workflowNumTotalSteps,
             lastSubmittedAt: submission.mrfMeta.lastSubmittedAt,
+            hasNextStepRecipientEmails:
+              submission.mrfMeta.hasNextStepRecipientEmails,
           }
         : undefined,
     )

frontend/src/features/admin-form/responses/constants.ts

@@ -1,3 +1,4 @@
 export const MRF_RESPONSE_TIMESTAMP_LABEL = 'Response timestamp'
 export const MRF_PENDING_RESPONSE_AT_LABEL = 'Pending response at'
 export const MRF_WORKFLOW_STATUS_LABEL = 'Workflow status'
+export const MRF_REMINDERS_LABEL = 'Reminders'

frontend/src/mocks/msw/handlers/admin-form/form.ts

@@ -601,6 +601,7 @@ const DEFAULT_MULTIRESPONDENT_METADATA = [
         workflowCurrentStepNumber: 1,
         workflowNumTotalSteps: 5,
         workflowStatus: WorkflowStatus.PENDING,
+        hasNextStepRecipientEmails: true,
       },
     },
     {
@@ -611,6 +612,7 @@ const DEFAULT_MULTIRESPONDENT_METADATA = [
         workflowCurrentStepNumber: 3,
         workflowNumTotalSteps: 3,
         workflowStatus: WorkflowStatus.APPROVED,
+        hasNextStepRecipientEmails: true,
       },
     },
     {
@@ -621,6 +623,7 @@ const DEFAULT_MULTIRESPONDENT_METADATA = [
         workflowCurrentStepNumber: 2,
         workflowNumTotalSteps: 3,
         workflowStatus: WorkflowStatus.REJECTED,
+        hasNextStepRecipientEmails: true,
       },
     },
     {
@@ -631,6 +634,7 @@ const DEFAULT_MULTIRESPONDENT_METADATA = [
         workflowCurrentStepNumber: 4,
         workflowNumTotalSteps: 4,
         workflowStatus: WorkflowStatus.COMPLETED,
+        hasNextStepRecipientEmails: true,
       },
     },
     // simulates a submission prior to https://github.com/opengovsg/FormSG/pull/7965
@@ -643,6 +647,7 @@ const DEFAULT_MULTIRESPONDENT_METADATA = [
         workflowCurrentStepNumber: 1,
         workflowNumTotalSteps: 4,
         workflowStatus: undefined,
+        hasNextStepRecipientEmails: true,
       },
     },
   ],

shared/types/form/form.ts

@@ -105,6 +105,7 @@ export enum FormResponseMode {
 
 export interface FormMetadata {
   mfb_text_prompt_count?: number
+  num_mrf_reminder_emails_sent?: number
 }
 
 export type FormPaymentsChannel = {