Merge pull request #1708 from Northeastern-Electric-Racing/#1611-deny-reimbursement-request-frontend

#1611 Deny Reimbursement Request Frontent

Author: RChandler234

src/backend/src/services/reimbursement-requests.services.ts

@@ -694,6 +694,10 @@ export default class ReimbursementRequestService {
       throw new HttpException(400, 'This reimbursement request has already been approved');
     }
 
+    if (reimbursementRequest.reimbursementStatuses.some((status) => status.type === ReimbursementStatusType.DENIED)) {
+      throw new HttpException(400, 'This reimbursement request has already been denied');
+    }
+
     const reimbursementStatus = await prisma.reimbursement_Status.create({
       data: {
         type: ReimbursementStatusType.SABO_SUBMITTED,

src/frontend/src/apis/finance.api.ts

@@ -158,6 +158,16 @@ export const approveReimbursementRequest = (id: string) => {
   return axios.post(apiUrls.financeApproveReimbursementRequest(id));
 };
 
+/**
+ * Deny Reimbursement Request
+ *
+ * @param id of the reimbursement request being denied by finance
+ * @returns the denied reimbursement status
+ */
+export const denyReimbursementRequest = (id: string) => {
+  return axios.post(apiUrls.financeDenyReimbursementRequest(id));
+};
+
 /**
  * Downloads a given fileId from google drive into a blob
  *

src/frontend/src/hooks/finance.hooks.ts

@@ -7,6 +7,7 @@ import {
   approveReimbursementRequest,
   createReimbursementRequest,
   deleteReimbursementRequest,
+  denyReimbursementRequest,
   downloadBlobsToPdf,
   downloadGoogleImage,
   editReimbursementRequest,
@@ -262,6 +263,28 @@ export const useApproveReimbursementRequest = (id: string) => {
   );
 };
 
+/**
+ * Custom react hook to deny a reimbursement request for the finance team
+ *
+ * @param id id of the reimbursement request to deny
+ * @returns the denied reimbursement request status
+ */
+export const useDenyReimbursementRequest = (id: string) => {
+  const queryClient = useQueryClient();
+  return useMutation<ReimbursementStatus, Error>(
+    ['reimbursement-requests', 'edit'],
+    async () => {
+      const { data } = await denyReimbursementRequest(id);
+      return data;
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['reimbursement-requests', id]);
+      }
+    }
+  );
+};
+
 /**
  * Custom react hook to download images from google drive into a pdf
  *

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/ReimbursementRequestDetailsView.tsx

@@ -6,6 +6,7 @@
 import { expenseTypePipe } from '../../../utils/pipes';
 import { Edit } from '@mui/icons-material';
 import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 import ConfirmationNumberIcon from '@mui/icons-material/ConfirmationNumber';
 import DeleteIcon from '@mui/icons-material/Delete';
 import LocalShippingIcon from '@mui/icons-material/LocalShipping';
@@ -18,7 +19,11 @@ import ActionsMenu, { ButtonInfo } from '../../../components/ActionsMenu';
 import NERModal from '../../../components/NERModal';
 import PageLayout from '../../../components/PageLayout';
 import VerticalDetailDisplay from '../../../components/VerticalDetailDisplay';
-import { useDeleteReimbursementRequest, useMarkReimbursementRequestAsDelivered } from '../../../hooks/finance.hooks';
+import {
+  useDeleteReimbursementRequest,
+  useDenyReimbursementRequest,
+  useMarkReimbursementRequestAsDelivered
+} from '../../../hooks/finance.hooks';
 import { useToast } from '../../../hooks/toasts.hooks';
 import { useCurrentUser } from '../../../hooks/users.hooks';
 import {
@@ -33,7 +38,9 @@ import {
   imageDownloadUrl,
   imageFileUrl,
   isReimbursementRequestAdvisorApproved,
-  isReimbursementRequestSaboSubmitted
+  isReimbursementRequestReimbursed,
+  isReimbursementRequestSaboSubmitted,
+  isReimbursementRequestDenied
 } from '../../../utils/reimbursement-request.utils';
 import { routes } from '../../../utils/routes';
 import AddSABONumberModal from './AddSABONumberModal';
@@ -53,11 +60,13 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
   const [addSaboNumberModalShow, setAddSaboNumberModalShow] = useState<boolean>(false);
   const toast = useToast();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [showDenyModal, setShowDenyModal] = useState(false);
   const [showMarkDelivered, setShowMarkDelivered] = useState(false);
   const [showSubmitToSaboModal, setShowSubmitToSaboModal] = useState(false);
   const { mutateAsync: deleteReimbursementRequest } = useDeleteReimbursementRequest(
     reimbursementRequest.reimbursementRequestId
   );
+  const { mutateAsync: denyReimbursementRequest } = useDenyReimbursementRequest(reimbursementRequest.reimbursementRequestId);
   const { mutateAsync: markDelivered } = useMarkReimbursementRequestAsDelivered(reimbursementRequest.reimbursementRequestId);
 
   const handleDelete = () => {
@@ -71,6 +80,17 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
     }
   };
 
+  const handleDeny = () => {
+    try {
+      denyReimbursementRequest();
+      setShowDenyModal(false);
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        toast.error(e.message, 3000);
+      }
+    }
+  };
+
   const handleMarkDelivered = () => {
     try {
       markDelivered();
@@ -97,6 +117,21 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
     );
   };
 
+  const DenyModal = () => {
+    return (
+      <NERModal
+        open={showDenyModal}
+        onHide={() => setShowDenyModal(false)}
+        title="Warning!"
+        cancelText="No"
+        submitText="Yes"
+        onSubmit={handleDeny}
+      >
+        <Typography>Are you sure you want to deny this reimbursement request?</Typography>
+      </NERModal>
+    );
+  };
+
   const MarkDeliveredModal = () => (
     <NERModal
       open={showMarkDelivered}
@@ -225,13 +260,29 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
       title: 'Approve',
       onClick: () => setShowSubmitToSaboModal(true),
       icon: <CheckIcon />,
-      disabled: !user.isFinance || isReimbursementRequestSaboSubmitted(reimbursementRequest)
+      disabled:
+        !user.isFinance ||
+        isReimbursementRequestSaboSubmitted(reimbursementRequest) ||
+        isReimbursementRequestDenied(reimbursementRequest)
+    },
+    {
+      title: 'Deny',
+      onClick: () => setShowDenyModal(true),
+      icon: <CloseIcon />,
+      disabled:
+        !user.isFinance ||
+        isReimbursementRequestReimbursed(reimbursementRequest) ||
+        isReimbursementRequestDenied(reimbursementRequest)
     }
   ];
 
   return (
     <PageLayout
-      title={`${fullNamePipe(reimbursementRequest.recipient)}'s Reimbursement Request`}
+      title={`${
+        isReimbursementRequestDenied(reimbursementRequest)
+          ? `${fullNamePipe(reimbursementRequest.recipient)}'s Reimbursement Request - Denied`
+          : `${fullNamePipe(reimbursementRequest.recipient)}'s Reimbursement Request`
+      }`}
       previousPages={[
         {
           name: 'Finance',
@@ -241,6 +292,7 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
       headerRight={<ActionsMenu buttons={buttons} />}
     >
       <DeleteModal />
+      <DenyModal />
       <MarkDeliveredModal />
       <SubmitToSaboModal
         open={showSubmitToSaboModal}

src/frontend/src/utils/reimbursement-request.utils.ts

@@ -86,6 +86,16 @@ export const isReimbursementRequestSaboSubmitted = (reimbursementRequest: Reimbu
     .includes(ReimbursementStatusType.SABO_SUBMITTED);
 };
 
+export const isReimbursementRequestDenied = (reimbursementRequest: ReimbursementRequest) => {
+  return reimbursementRequest.reimbursementStatuses.map((status) => status.type).includes(ReimbursementStatusType.DENIED);
+};
+
+export const isReimbursementRequestReimbursed = (reimbursementRequest: ReimbursementRequest) => {
+  return reimbursementRequest.reimbursementStatuses
+    .map((status) => status.type)
+    .includes(ReimbursementStatusType.REIMBURSED);
+};
+
 export const getReimbursementRequestDateSubmittedToSabo = (reimbursementRequest: ReimbursementRequest) => {
   const saboStatus = reimbursementRequest.reimbursementStatuses.find(
     (status) => status.type === ReimbursementStatusType.SABO_SUBMITTED

src/frontend/src/utils/urls.ts

@@ -101,6 +101,7 @@ const financeSetSaboNumber = (id: string) => `${financeEndpoints()}/${id}/set-sa
 const financeDeleteReimbursement = (id: string) => `${financeEndpoints()}/${id}/delete`;
 const financeMarkAsDelivered = (id: string) => `${financeEndpoints()}/${id}/delivered`;
 const financeApproveReimbursementRequest = (id: string) => `${financeEndpoints()}/${id}/approve`;
+const financeDenyReimbursementRequest = (id: string) => `${financeEndpoints()}/${id}/deny`;
 const financeGetPendingAdvisorList = () => `${financeEndpoints()}/pending-advisor/list`;
 const financeSendPendingAdvisorList = () => `${financeEndpoints()}/pending-advisor/send`;
 const financeEditExpenseType = (expenseId: string) => `${financeEndpoints()}/${expenseId}/expense-types/edit`;
@@ -204,6 +205,7 @@ export const apiUrls = {
   financeDeleteReimbursement,
   financeMarkAsDelivered,
   financeApproveReimbursementRequest,
+  financeDenyReimbursementRequest,
   financeGetPendingAdvisorList,
   financeSendPendingAdvisorList,
   financeEditExpenseType,