ppr reporter reimbursement confirmation (#163)

backend/emails/emails.js

@@ -223,7 +223,26 @@ const sendEmailPPRPurchasedAndReceiptsSubmittedToCoordinator = async (ppr) => {
         getMainMessageHTML(
             `Item ${ppr.codename} has been purchased and receipts have been submitted! Please review the expense claim form and reimburse the reporter out of WATonomous' cash account.`
         ) +
-        (await getUPRTicketInfoHTML(ppr)) +
+        (await getPPRTicketInfoHTML(ppr)) +
+        getTicketLinkHTML(ppr.path)
+    const To = await getEmailToSection(ppr.reporter_id, [
+        EMAIL_RECIPIENTS.finance,
+        EMAIL_RECIPIENTS.coordinator,
+    ])
+    await sendEmail({
+        Subject,
+        HTMLPart,
+        To,
+    })
+}
+
+const sendEmailPPRReimbursedToReporter = async (ppr) => {
+    const Subject = `[Reimbursed] ${ppr.codename}`
+    const HTMLPart =
+        getMainMessageHTML(
+            `Your Personal Purchase Request has been reimbursed! Please visit the ticket link below to confirm your reimbursement has been received.`
+        ) +
+        (await getPPRTicketInfoHTML(ppr)) +
         getTicketLinkHTML(ppr.path)
     const To = await getEmailToSection(ppr.reporter_id, [
         EMAIL_RECIPIENTS.finance,
@@ -564,6 +583,7 @@ module.exports = {
     sendEmailPPRApprovedToReporter,
     sendEmailPPRCreatedToApprovers,
     sendEmailPPRPurchasedAndReceiptsSubmittedToCoordinator,
+    sendEmailPPRReimbursedToReporter,
     PurchaseRequestInvalidated,
     PersonalPurchaseApproved,
     UWFinancePurchaseApproved,

backend/service/personalpurchases.service.js

@@ -8,6 +8,7 @@ const {
     sendEmailPPRCreatedToApprovers,
     sendEmailPPRApprovedToReporter,
     sendEmailPPRPurchasedAndReceiptsSubmittedToCoordinator,
+    sendEmailPPRReimbursedToReporter,
 } = require('../emails/emails')
 
 const getAllPersonalPurchases = () => {
@@ -36,9 +37,11 @@ const updatePersonalPurchase = async (id, body) => {
     const newPurchaseTicket = PersonalPurchase.findByIdAndUpdate(id, body, {
         new: true,
     })
+    const annotatedPPR = await getPersonalPurchase(id)
     if (body?.status === 'PURCHASED_AND_RECEIPTS_SUBMITTED') {
-        const annotatedPPR = await getPersonalPurchase(id)
         sendEmailPPRPurchasedAndReceiptsSubmittedToCoordinator(annotatedPPR)
+    } else if (body?.status === 'REPORTER_REIMBURSE_CONFIRMATION') {
+        sendEmailPPRReimbursedToReporter(annotatedPPR)
     }
     return newPurchaseTicket
 }

frontend/src/components/TicketContent/PPRAdminContentTable.js

@@ -1,10 +1,51 @@
 import { Button, Center, Heading, VStack } from '@chakra-ui/react'
 import React from 'react'
-import { useRecoilValue } from 'recoil'
-import { currentTicketState } from '../../state/atoms'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { allTicketsState, currentTicketState } from '../../state/atoms'
+import { axiosPreset } from '../../axiosConfig'
+import { TICKET_ENDPOINTS } from '../../constants'
+import { getAllTickets } from '../../utils/globalSetters'
 
 const PPRAdminContentTable = () => {
     const currentTicket = useRecoilValue(currentTicketState)
+    const setAllTickets = useSetRecoilState(allTicketsState)
+    const handleUpdateStatus = async (nextStatus) => {
+        const payload = {
+            status: nextStatus,
+        }
+        await axiosPreset.patch(
+            `${TICKET_ENDPOINTS.PPR}/${currentTicket._id}`,
+            payload
+        )
+        await getAllTickets(setAllTickets)
+    }
+    const getTransitionBody = () => {
+        switch (currentTicket.status) {
+            case 'PURCHASED_AND_RECEIPTS_SUBMITTED':
+                return getPurchasedAndReceiptsSubmittedBody()
+            default:
+                return (
+                    <>
+                        <h1>No Current Actions Available</h1>
+                    </>
+                )
+        }
+    }
+    const getPurchasedAndReceiptsSubmittedBody = () => {
+        return (
+            <Center pb="7px">
+                <Button
+                    colorScheme="blue"
+                    size="sm"
+                    onClick={() =>
+                        handleUpdateStatus('REPORTER_REIMBURSE_CONFIRMATION')
+                    }
+                >
+                    Confirm Reporter Reimbursed
+                </Button>
+            </Center>
+        )
+    }
     return (
         <VStack
             border="1px solid black"
@@ -13,21 +54,7 @@ const PPRAdminContentTable = () => {
             mb="30px"
         >
             <Heading size="md">Admin View</Heading>
-            {
-                <Center pb="7px">
-                    <Button
-                        colorScheme="blue"
-                        size="sm"
-                        disabled={
-                            currentTicket?.po_number?.length +
-                                currentTicket?.requisition_number?.length ===
-                            0
-                        }
-                    >
-                        Transition Status
-                    </Button>
-                </Center>
-            }
+            <Center pb="7px">{getTransitionBody()}</Center>
         </VStack>
     )
 }

frontend/src/components/TicketContent/PPRReporterTable.js

@@ -9,9 +9,9 @@ import { getAllTickets } from '../../utils/globalSetters'
 const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
     const setAllTickets = useSetRecoilState(allTicketsState)
 
-    const transitionToPurchasedAndReceiptsSubmitted = async () => {
+    const transitionStatus = async (status) => {
         const payload = {
-            status: 'PURCHASED_AND_RECEIPTS_SUBMITTED',
+            status: status,
         }
         await axiosPreset.patch(
             `${TICKET_ENDPOINTS.PPR}/${currentTicket._id}`,
@@ -20,6 +20,59 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
         await getAllTickets(setAllTickets)
     }
 
+    const getPurchasedAndRequestReimbursementBody = () => {
+        return (
+            <Tooltip
+                hasArrow
+                label="Please upload at least one supporting document before requesting reimbursement."
+                isDisabled={supportingDocuments.length !== 0}
+            >
+                <Button
+                    colorScheme="blue"
+                    size="sm"
+                    mr="20px"
+                    onClick={() => {
+                        transitionStatus('PURCHASED_AND_RECEIPTS_SUBMITTED')
+                    }}
+                    disabled={supportingDocuments.length === 0}
+                >
+                    Confirm Item(s) Purchased and Request Reimbursement
+                </Button>
+            </Tooltip>
+        )
+    }
+
+    const getReimbursementConfirmationBody = () => {
+        return (
+            <Button
+                colorScheme="blue"
+                size="sm"
+                mr="20px"
+                onClick={() => {
+                    transitionStatus('REPORTER_REIMBURSED')
+                }}
+                disabled={supportingDocuments.length === 0}
+            >
+                Confirm Item(s) have been Reimbursed
+            </Button>
+        )
+    }
+
+    const getTransitionBody = () => {
+        switch (currentTicket.status) {
+            case 'READY_TO_BUY':
+                return getPurchasedAndRequestReimbursementBody()
+            case 'REPORTER_REIMBURSE_CONFIRMATION':
+                return getReimbursementConfirmationBody()
+            default:
+                return (
+                    <>
+                        <h1>No Current Actions Available</h1>
+                    </>
+                )
+        }
+    }
+
     return (
         <VStack
             border="1px solid black"
@@ -28,23 +81,7 @@ const PPRReporterTable = ({ currentTicket, supportingDocuments }) => {
             mb="30px"
         >
             <Heading size="md">Reporter View</Heading>
-            <Center pb="7px">
-                <Tooltip
-                    hasArrow
-                    label="Please upload at least one supporting document before requesting reimbursement."
-                    isDisabled={supportingDocuments.length !== 0}
-                >
-                    <Button
-                        colorScheme="blue"
-                        size="sm"
-                        mr="20px"
-                        onClick={transitionToPurchasedAndReceiptsSubmitted}
-                        disabled={supportingDocuments.length === 0}
-                    >
-                        Confirm Item(s) Purchased and Request Reimbursement
-                    </Button>
-                </Tooltip>
-            </Center>
+            <Center pb="7px">{getTransitionBody()}</Center>
         </VStack>
     )
 }

frontend/src/pages/Dashboard.js

@@ -184,13 +184,12 @@ const Dashboard = () => {
                 return (
                     <>
                         {auth.isAdmin && <PPRAdminContentTable />}
-                        {isReporter() &&
-                            currentTicket.status === 'READY_TO_BUY' && (
-                                <PPRReporterTable
-                                    supportingDocuments={supportingDocuments}
-                                    currentTicket={currentTicket}
-                                />
-                            )}
+                        {isReporter() && (
+                            <PPRReporterTable
+                                supportingDocuments={supportingDocuments}
+                                currentTicket={currentTicket}
+                            />
+                        )}
                         <PPRContentTable />
                     </>
                 )