ORV2-2616 - Fix LOA bugs on FE

frontend/src/features/settings/components/SpecialAuthorizations/NoFeePermits/NoFeePermitsSection.scss

@@ -37,7 +37,7 @@
         }
 
         &__label {
-          color: $disabled-colour;
+          color: $bc-black;
         }
       }
     }

frontend/src/features/settings/pages/SpecialAuthorizations/LOA/LOASteps.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { Button, Step, StepConnector, StepLabel, Stepper } from "@mui/material";
@@ -13,6 +13,7 @@ import { LOABasicInfo } from "./basic/LOABasicInfo";
 import { Nullable } from "../../../../../common/types/common";
 import { LOAFormData, loaDetailToFormData } from "../../../types/LOAFormData";
 import { ERROR_ROUTES } from "../../../../../routes/constants";
+import { SnackBarContext } from "../../../../../App";
 import {
   useCreateLOAMutation,
   useFetchLOADetail,
@@ -36,6 +37,7 @@ export const LOASteps = ({
   ];
 
   const navigate = useNavigate();
+  const { setSnackBar } = useContext(SnackBarContext);
   const { data: loaDetail } = useFetchLOADetail(companyId, loaId);
   const createLOAMutation = useCreateLOAMutation();
   const updateLOAMutation = useUpdateLOAMutation();
@@ -77,7 +79,8 @@ export const LOASteps = ({
 
   const handleFinish = async () => {
     // Handle submitting LOA
-    const res = !loaId ? await createLOAMutation.mutateAsync({
+    const isLOACreation = !loaId;
+    const res = isLOACreation ? await createLOAMutation.mutateAsync({
       companyId,
       data: getValues(),
     }) : await updateLOAMutation.mutateAsync({
@@ -87,6 +90,12 @@ export const LOASteps = ({
     });
 
     if (res.status === 200 || res.status === 201) {
+      setSnackBar({
+        showSnackbar: true,
+        setShowSnackbar: () => true,
+        message: isLOACreation ? `LOA Added` : `LOA Updated`,
+        alertType: isLOACreation ? "success" : "info",
+      });
       onExit();
     } else {
       navigate(ERROR_ROUTES.UNEXPECTED);

frontend/src/features/settings/pages/SpecialAuthorizations/LOA/basic/LOABasicInfo.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Dayjs } from "dayjs";
 import { Checkbox } from "@mui/material";
 import {
@@ -15,6 +16,12 @@ import { Nullable, Optional } from "../../../../../../common/types/common";
 import { UploadedFile } from "../../../../components/SpecialAuthorizations/LOA/upload/UploadedFile";
 import { UploadInput } from "../../../../components/SpecialAuthorizations/LOA/upload/UploadInput";
 import { applyWhenNotNullable } from "../../../../../../common/helpers/util";
+import { DeleteConfirmationDialog } from "../../../../../../common/components/dialog/DeleteConfirmationDialog";
+import {
+  CustomDatePicker,
+  PAST_START_DATE_STATUSES,
+} from "../../../../../../common/components/form/subFormComponents/CustomDatePicker";
+
 import {
   expiryMustBeAfterStart,
   invalidUploadFormat,
@@ -23,7 +30,6 @@ import {
   selectionRequired,
   uploadSizeExceeded,
 } from "../../../../../../common/helpers/validationMessages";
-import { CustomDatePicker, PAST_START_DATE_STATUSES } from "../../../../../../common/components/form/subFormComponents/CustomDatePicker";
 
 const FEATURE = "loa";
 
@@ -106,6 +112,8 @@ export const LOABasicInfo = ({
 }: {
   onRemoveDocument: () => Promise<boolean>;
 }) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
+
   const {
     control,
     formState: { errors },
@@ -126,6 +134,10 @@ export const LOABasicInfo = ({
     "",
   );
 
+  const handleCancelDelete = () => {
+    setShowDeleteDialog(false);
+  };
+
   const selectPermitType = (
     permitType: keyof FieldPathValue<LOAFormData, "permitTypes">,
     selected: boolean,
@@ -169,6 +181,7 @@ export const LOABasicInfo = ({
       setValue("uploadFile", null);
       clearErrors("uploadFile");
     }
+    setShowDeleteDialog(false);
   };
 
   return (
@@ -328,7 +341,7 @@ export const LOABasicInfo = ({
             {fileExists ? (
               <UploadedFile
                 fileName={fileName}
-                onDelete={deleteFile}
+                onDelete={() => setShowDeleteDialog(true)}
               />
             ) : (
               <UploadInput
@@ -363,6 +376,16 @@ export const LOABasicInfo = ({
           className="loa-basic-info__notes"
         />
       </div>
+
+      {showDeleteDialog ? (
+        <DeleteConfirmationDialog
+          showDialog={showDeleteDialog}
+          onCancel={handleCancelDelete}
+          onDelete={deleteFile}
+          itemToDelete="item"
+          confirmationMsg={"Are you sure you want to delete this?"}
+        />
+      ) : null}
     </div>
   );
 };