ORV2-4849 - FE: Update: Only SA can complete an amending permit application that results in a refund (#2108)

Co-authored-by: GlenAOT <160973940+GlenAOT@users.noreply.github.com>
Co-authored-by: praju-aot <praveen.raju@aot-technologies.com>

Author: glen-aot

frontend/src/common/authentication/PermissionMatrix.ts

@@ -138,6 +138,9 @@ const MANAGE_PERMITS = {
     allowedBCeIDRoles: ALL_BCeID_ROLES,
     allowedIDIRRoles: [PC, SA, CTPO],
   },
+  PROCESS_AMENDMENT_REFUND: {
+    allowedIDIRRoles: [SA],
+  },
   /**
    * Expired Permits tab
    */

frontend/src/features/permits/pages/Amend/components/AmendPermitReview.tsx

@@ -36,6 +36,8 @@ import { ApplicationFormData } from "../../../types/application";
 import { deserializeApplicationResponse } from "../../../helpers/serialize/deserializeApplication";
 import { isAxiosError } from "axios";
 import { PERMIT_ACTION_ORIGINS } from "../../../../idir/search/types/types";
+import { usePermissionMatrix } from "../../../../../common/authentication/PermissionMatrix";
+import { AuthorizationRequiredModal } from "./modal/AuthorizationRequiredModal";
 
 export const AmendPermitReview = () => {
   const navigate = useNavigate();
@@ -89,6 +91,21 @@ export const AmendPermitReview = () => {
   const [allConfirmed, setAllConfirmed] = useState(false);
   const [hasAttemptedSubmission, setHasAttemptedSubmission] = useState(false);
 
+  const canProcessAmendmentRefund = usePermissionMatrix({
+    permissionMatrixKeys: {
+      permissionMatrixFeatureKey: "MANAGE_PERMITS",
+      permissionMatrixFunctionKey: "PROCESS_AMENDMENT_REFUND",
+    },
+  });
+
+  const [showAuthorizationRequiredModal, setShowAuthorizationRequiredModal] =
+    useState<boolean>(false);
+
+  const handleCloseAuthorizationRequiredModal = () => {
+    setShowAuthorizationRequiredModal(false);
+    goHome();
+  };
+
   const onSubmit = async () => {
     setHasAttemptedSubmission(true);
     if (!allConfirmed) return;
@@ -115,7 +132,12 @@ export const AmendPermitReview = () => {
 
     if (savedApplication) {
       setAmendmentApplication(savedApplication);
-      next();
+
+      if (canProcessAmendmentRefund) {
+        next();
+      } else {
+        setShowAuthorizationRequiredModal(true);
+      }
     } else {
       navigate(ERROR_ROUTES.UNEXPECTED);
     }
@@ -315,6 +337,13 @@ export const AmendPermitReview = () => {
           <ReviewReason reason={amendmentApplication.comment} />
         ) : null}
       </PermitReview>
+
+      <AuthorizationRequiredModal
+        isOpen={showAuthorizationRequiredModal}
+        onCancel={() => setShowAuthorizationRequiredModal(false)}
+        onConfirm={handleCloseAuthorizationRequiredModal}
+        permitNumber={permit?.permitNumber}
+      />
     </div>
   );
 };

frontend/src/features/permits/pages/Amend/components/modal/AuthorizationRequiredModal.scss

@@ -0,0 +1,70 @@
+@import "../../../../../../themes/orbcStyles";
+
+.authorization-required-modal {
+  & &__container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header, &__subheader {
+    padding: 2rem 1.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid $bc-border-grey;
+  }
+  
+  &__header, .header {
+    background-color: $bc-background-light-grey;
+    &__text {
+      font-weight: bold;
+      font-size: 1.5rem;
+      margin: 0;  
+    }
+  }
+
+  &__banner {
+    .bc-gov-alertbanner {
+      width: auto;
+      border-radius: 0;
+      border-top: none;
+      border-color: $bc-border-grey;
+    }
+  }
+
+  &__subheader, .subheader {
+    &__text {
+      font-weight: bold;
+      font-size: 1.25rem;
+      margin: 0;
+    }
+  }
+
+  &__body {
+    padding: 1.5rem;
+  }
+
+  &__text {
+    font-size: 1rem;
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    gap: 1.5rem;
+  }
+
+  &__button {
+    border: 2px solid $bc-background-light-grey;
+    box-shadow: none;
+    
+    &:hover {
+      background-color: $bc-background-light-grey;
+      border-color: $bc-text-box-border-grey;
+      box-shadow: none;
+    }
+  }
+}

frontend/src/features/permits/pages/Amend/components/modal/AuthorizationRequiredModal.tsx

@@ -0,0 +1,68 @@
+import { Button, Dialog } from "@mui/material";
+import "./AuthorizationRequiredModal.scss";
+import { SuccessBcGovBanner } from "../../../../../../common/components/banners/SuccessBcGovBanner";
+import { Nullable } from "../../../../../../common/types/common";
+
+export const AuthorizationRequiredModal = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+  permitNumber,
+}: {
+  /**
+   * Boolean to control the open and close state of Dialog box.
+   */
+  isOpen: boolean;
+  /**
+   * A callback function on clicking cancel button.
+   * @returns void
+   */
+  onCancel: () => void;
+  onConfirm: () => void;
+  permitNumber: Nullable<string>;
+}) => {
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={onCancel}
+      className="authorization-required-modal"
+      PaperProps={{
+        className: "authorization-required-modal__container",
+      }}
+    >
+      <div className="authorization-required-modal__header header">
+        <h2 className="header__text">Authorization Required</h2>
+      </div>
+      <div className="authorization-required-modal__banner">
+        <SuccessBcGovBanner
+          className="authorization-required-modal__banner"
+          msg="Your changes have been saved"
+        />
+      </div>
+      <div className="authorization-required-modal__subheader subheader">
+        <h2 className="subheader__text">Amending Permit #: {permitNumber}</h2>
+      </div>
+
+      <div className="authorization-required-modal__body">
+        <p className="authorization-required-modal__text">
+          This amendment results in a refund.
+          <br></br>
+          <br></br>
+          Note the Amending Permit # and inform authorized staff to process the
+          refund.
+        </p>
+      </div>
+
+      <div className="authorization-required-modal__footer">
+        <Button
+          className="authorization-required-modal__button"
+          variant="contained"
+          color="secondary"
+          onClick={onConfirm}
+        >
+          Exit
+        </Button>
+      </div>
+    </Dialog>
+  );
+};

vehicles/src/modules/permit-application-payment/payment/payment.controller.ts

@@ -97,11 +97,7 @@ export class PaymentController {
     type: ReadTransactionDto,
   })
   @Permissions({
-    allowedIdirRoles: [
-      IDIRUserRole.PPC_CLERK,
-      IDIRUserRole.SYSTEM_ADMINISTRATOR,
-      IDIRUserRole.CTPO,
-    ],
+    allowedIdirRoles: [IDIRUserRole.SYSTEM_ADMINISTRATOR],
   })
   @Post('refund')
   async createRefundTransactionDetails(