#1611 added deny rr to dropdown

Author: jessicayzhao

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 reimbursement request with the given id
+ */
+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,
@@ -260,6 +261,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
+ */
+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 {
@@ -32,6 +37,7 @@ import {
 import {
   imagePreviewUrl,
   isReimbursementRequestAdvisorApproved,
+  isReimbursementRequestReimbursed,
   isReimbursementRequestSaboSubmitted
 } from '../../../utils/reimbursement-request.utils';
 import { routes } from '../../../utils/routes';
@@ -51,11 +57,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 = () => {
@@ -69,6 +77,16 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
     }
   };
 
+  const handleDeny = () => {
+    try {
+      denyReimbursementRequest();
+    } catch (e: unknown) {
+      if (e instanceof Error) {
+        toast.error(e.message, 3000);
+      }
+    }
+  };
+
   const handleMarkDelivered = () => {
     try {
       markDelivered();
@@ -95,6 +113,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}
@@ -219,6 +252,12 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
       onClick: () => setShowSubmitToSaboModal(true),
       icon: <CheckIcon />,
       disabled: !user.isFinance || isReimbursementRequestSaboSubmitted(reimbursementRequest)
+    },
+    {
+      title: 'Deny',
+      onClick: () => setShowDenyModal(true),
+      icon: <CloseIcon />,
+      disabled: !user.isFinance || isReimbursementRequestReimbursed(reimbursementRequest)
     }
   ];
 
@@ -234,6 +273,7 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
       headerRight={<ActionsMenu buttons={buttons} />}
     >
       <DeleteModal />
+      <DenyModal />
       <MarkDeliveredModal />
       <SubmitToSaboModal
         open={showSubmitToSaboModal}

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

@@ -81,6 +81,12 @@ export const isReimbursementRequestSaboSubmitted = (reimbursementRequest: Reimbu
     .includes(ReimbursementStatusType.SABO_SUBMITTED);
 };
 
+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

@@ -99,6 +99,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`;
@@ -184,6 +185,7 @@ export const apiUrls = {
   financeDeleteReimbursement,
   financeMarkAsDelivered,
   financeApproveReimbursementRequest,
+  financeDenyReimbursementRequest,
   financeGetPendingAdvisorList,
   financeSendPendingAdvisorList,
   financeEditExpenseType,