ORV2-2760 - FE: Staff Reject Application in the Queue (#1650)

Co-authored-by: GlenAOT <[email protected]>

frontend/src/features/permits/components/permit-list/ApplicationsInReviewRowOptions.tsx

@@ -1,12 +1,14 @@
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { OnRouteBCTableRowActions } from "../../../../common/components/table/OnRouteBCTableRowActions";
 import { ApplicationInReviewModal } from "./ApplicationInReviewModal";
 import { useNavigate } from "react-router-dom";
 import { ERROR_ROUTES } from "../../../../routes/constants";
 import {
   useInvalidateApplicationsInQueue,
-  useWithdrawApplicationInQueueMutation,
+  useUpdateApplicationInQueueStatus,
 } from "../../../queue/hooks/hooks";
+import { CASE_ACTIVITY_TYPES } from "../../../queue/types/CaseActivityType";
+import { SnackBarContext } from "../../../../App";
 
 const PERMIT_ACTION_OPTION_TYPES = {
   WITHDRAW_APPLICATION: "withdrawApplication",
@@ -61,29 +63,48 @@ export const ApplicationsInReviewRowOptions = ({
   };
 
   const {
-    mutateAsync: withdrawApplication,
-    isError: isWithdrawApplicationError,
-    error: withdrawApplicationError,
-  } = useWithdrawApplicationInQueueMutation();
+    mutateAsync: updateApplication,
+    data: updateApplicationResponse,
+    isError: isUpdateApplicationError,
+    error: updateApplicationError,
+  } = useUpdateApplicationInQueueStatus();
 
   useEffect(() => {
-    if (isWithdrawApplicationError) {
+    if (isUpdateApplicationError) {
       // if the application has already been withdrawn by another user
-      if (withdrawApplicationError.response?.status === 422) {
+      if (updateApplicationError.response?.status === 422) {
         return setIsAIRModalOpen(true);
       }
       // handle all other errors
       navigate(ERROR_ROUTES.UNEXPECTED);
     }
-  }, [isWithdrawApplicationError, withdrawApplicationError]);
+  }, [isUpdateApplicationError, updateApplicationError]);
+
+  const isSuccess = (status?: number) => status === 201;
+  const { setSnackBar } = useContext(SnackBarContext);
+
+  useEffect(() => {
+    if (isSuccess(updateApplicationResponse?.status)) {
+      setSnackBar({
+        showSnackbar: true,
+        setShowSnackbar: () => true,
+        message: "Withdrawn to Applications in Progress",
+        alertType: "info",
+      });
+      invalidate();
+    }
+  }, [updateApplicationResponse]);
 
   /**
    * Action handler upon a select event.
    * @param selectedOption The option that was selected.
    */
   const onSelectOptionCallback = async (selectedOption: string) => {
     if (selectedOption === PERMIT_ACTION_OPTION_TYPES.WITHDRAW_APPLICATION) {
-      await withdrawApplication(permitId);
+      await updateApplication({
+        applicationId: permitId,
+        caseActivityType: CASE_ACTIVITY_TYPES.WITHDRAWN,
+      });
     }
   };
 

frontend/src/features/permits/pages/Application/components/review/PermitReview.tsx

@@ -1,28 +1,27 @@
 import { Box } from "@mui/material";
 import { Dayjs } from "dayjs";
-
-import "./PermitReview.scss";
 import { WarningBcGovBanner } from "../../../../../../common/components/banners/WarningBcGovBanner";
-import { ApplicationDetails } from "../../../../components/form/ApplicationDetails";
-import { ReviewContactDetails } from "./ReviewContactDetails";
-import { ReviewPermitDetails } from "./ReviewPermitDetails";
-import { ReviewVehicleInfo } from "./ReviewVehicleInfo";
-import { ReviewFeeSummary } from "./ReviewFeeSummary";
-import { ReviewActions } from "./ReviewActions";
+import { Nullable } from "../../../../../../common/types/common";
 import { CompanyProfile } from "../../../../../manageProfile/types/manageProfile";
 import { VehicleSubType } from "../../../../../manageVehicles/types/Vehicle";
-import { PermitType } from "../../../../types/PermitType";
-import { Nullable } from "../../../../../../common/types/common";
-import { PermitContactDetails } from "../../../../types/PermitContactDetails";
-import { PermitVehicleDetails } from "../../../../types/PermitVehicleDetails";
+import { ApplicationDetails } from "../../../../components/form/ApplicationDetails";
 import { Application } from "../../../../types/application";
 import { PermitCondition } from "../../../../types/PermitCondition";
-import { ReviewPermitLOAs } from "./ReviewPermitLOAs";
+import { PermitContactDetails } from "../../../../types/PermitContactDetails";
 import { PermitLOA } from "../../../../types/PermitLOA";
 import {
   PERMIT_REVIEW_CONTEXTS,
   PermitReviewContext,
 } from "../../../../types/PermitReviewContext";
+import { PermitType } from "../../../../types/PermitType";
+import { PermitVehicleDetails } from "../../../../types/PermitVehicleDetails";
+import "./PermitReview.scss";
+import { ReviewActions } from "./ReviewActions";
+import { ReviewContactDetails } from "./ReviewContactDetails";
+import { ReviewFeeSummary } from "./ReviewFeeSummary";
+import { ReviewPermitDetails } from "./ReviewPermitDetails";
+import { ReviewPermitLOAs } from "./ReviewPermitLOAs";
+import { ReviewVehicleInfo } from "./ReviewVehicleInfo";
 
 interface PermitReviewProps {
   reviewContext: PermitReviewContext;
@@ -50,10 +49,9 @@ interface PermitReviewProps {
   onEdit: () => void;
   onContinue?: () => Promise<void>;
   onAddToCart?: () => Promise<void>;
-  onApprove?: () => Promise<void>;
-  approveApplicationMutationPending?: boolean;
-  onReject?: () => Promise<void>;
-  rejectApplicationMutationPending?: boolean;
+  handleApproveButton?: () => Promise<void>;
+  updateApplicationMutationPending?: boolean;
+  handleRejectButton?: () => void;
   showChangedFields?: boolean;
   oldFields?: Nullable<Partial<Application>>;
   calculatedFee: string;
@@ -86,9 +84,7 @@ export const PermitReview = (props: PermitReviewProps) => {
           oldFields={props.oldFields?.permitData?.contactDetails}
         />
 
-        <ReviewPermitLOAs
-          loas={props.loas}
-        />
+        <ReviewPermitLOAs loas={props.loas} />
 
         <ReviewPermitDetails
           startDate={props.permitStartDate}
@@ -121,20 +117,17 @@ export const PermitReview = (props: PermitReviewProps) => {
         {props.children}
 
         <ReviewActions
+          reviewContext={props.reviewContext}
           onEdit={props.onEdit}
           continueBtnText={props.continueBtnText}
           onContinue={props.onContinue}
           hasToCartButton={props.reviewContext === PERMIT_REVIEW_CONTEXTS.APPLY}
           onAddToCart={props.onAddToCart}
-          onApprove={props.onApprove}
-          approveApplicationMutationPending={
-            props.approveApplicationMutationPending
-          }
-          onReject={props.onReject}
-          rejectApplicationMutationPending={
-            props.rejectApplicationMutationPending
+          disableApproveAndRejectButtons={
+            props.updateApplicationMutationPending
           }
-          reviewContext={props.reviewContext}
+          handleApproveButton={props.handleApproveButton}
+          handleRejectButton={props.handleRejectButton}
         />
       </Box>
     </Box>

frontend/src/features/permits/pages/Application/components/review/ReviewActions.tsx

@@ -1,34 +1,32 @@
-import { Box, Button } from "@mui/material";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPencil } from "@fortawesome/free-solid-svg-icons";
-import "./ReviewActions.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Box, Button } from "@mui/material";
 import {
   PERMIT_REVIEW_CONTEXTS,
   PermitReviewContext,
 } from "../../../../types/PermitReviewContext";
+import "./ReviewActions.scss";
 
 export const ReviewActions = ({
+  reviewContext,
   onEdit,
   continueBtnText,
   onContinue,
   hasToCartButton,
   onAddToCart,
-  onApprove,
-  approveApplicationMutationPending,
-  onReject,
-  rejectApplicationMutationPending,
-  reviewContext,
+  disableApproveAndRejectButtons,
+  handleApproveButton,
+  handleRejectButton,
 }: {
+  reviewContext: PermitReviewContext;
   onEdit: () => void;
   continueBtnText?: string;
   onContinue?: () => Promise<void>;
   hasToCartButton: boolean;
   onAddToCart?: () => Promise<void>;
-  onApprove?: () => Promise<void>;
-  approveApplicationMutationPending?: boolean;
-  onReject?: () => Promise<void>;
-  rejectApplicationMutationPending?: boolean;
-  reviewContext: PermitReviewContext;
+  disableApproveAndRejectButtons?: boolean;
+  handleApproveButton?: () => Promise<void>;
+  handleRejectButton?: () => void;
 }) => {
   return (
     <Box className="review-actions">
@@ -80,35 +78,34 @@ export const ReviewActions = ({
         </Button>
       ) : null}
 
-      {onReject ? (
-        <Button
-          className="review-actions__btn review-actions__btn--reject"
-          key="reject-button"
-          aria-label="Reject"
-          variant="contained"
-          color="error"
-          data-testid="reject-btn"
-          onClick={onReject}
-          disabled={rejectApplicationMutationPending}
-        >
-          Reject
-        </Button>
-      ) : null}
-
-      {onApprove ? (
-        <Button
-          className="review-actions__btn review-actions__btn--approve"
-          key="approve-button"
-          aria-label="Approve"
-          variant="contained"
-          color="primary"
-          data-testid="approve-btn"
-          onClick={onApprove}
-          disabled={approveApplicationMutationPending}
-        >
-          Approve
-        </Button>
-      ) : null}
+      {reviewContext === PERMIT_REVIEW_CONTEXTS.QUEUE && (
+        <>
+          <Button
+            className="review-actions__btn review-actions__btn--reject"
+            key="reject-button"
+            aria-label="Reject"
+            variant="contained"
+            color="error"
+            data-testid="reject-btn"
+            onClick={handleRejectButton}
+            disabled={disableApproveAndRejectButtons}
+          >
+            Reject
+          </Button>
+          <Button
+            className="review-actions__btn review-actions__btn--approve"
+            key="approve-button"
+            aria-label="Approve"
+            variant="contained"
+            color="primary"
+            data-testid="approve-btn"
+            onClick={handleApproveButton}
+            disabled={disableApproveAndRejectButtons}
+          >
+            Approve
+          </Button>
+        </>
+      )}
     </Box>
   );
 };

frontend/src/features/queue/apiManager/queueAPI.ts

@@ -27,7 +27,7 @@ export const getApplicationsInQueue = async (
     {
       applicationsInQueueOnly: true,
       getStaffQueue,
-    }, 
+    },
     companyId,
   );
 };
@@ -82,7 +82,7 @@ export const updateApplicationQueueStatus = async ({
 
   // Conditionally include the comment property if it is given as an argument and not an empty string
   if (comment && comment.trim() !== "") {
-    data.comment = [comment];
+    data.comment = comment;
   }
 
   const response = await httpPOSTRequest(