Merge branch 'test-rook-AH-4671' of https://github.com/bcgov/foi-flow …

…into test-rook-AH-4671
bcgov · Nov 29, 2023 · 3dcf894 · 3dcf894
2 parents 7b0755e + 4d624c5
commit 3dcf894
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 64 deletions.
diff --git a/forms-flow-web/src/components/FOI/FOIRequest/FOIRequest.js b/forms-flow-web/src/components/FOI/FOIRequest/FOIRequest.js
@@ -258,7 +258,7 @@ const FOIRequest = React.memo(({ userDetail }) => {
   const [redactedSections, setRedactedSections] = useState("");
   const [isMCFPersonal, setIsMCFPersonal] = useState(bcgovcode.replaceAll('"', '') == "MCF" && requestDetails.requestType == FOI_COMPONENT_CONSTANTS.REQUEST_TYPE_PERSONAL);
   const {oipcData, addOIPC, removeOIPC, updateOIPC} = useOIPCHook();
-  const [showOIPCDetails, setShowOIPCDetails] = useState(requestDetails.isoipcreview);
+  const [showOIPCDetails, setShowOIPCDetails] = useState(requestDetails.oipcData?.length > 0);
 
   useEffect(() => {
     if (window.location.href.indexOf("comments") > -1) {
@@ -649,6 +649,18 @@ const FOIRequest = React.memo(({ userDetail }) => {
     setAssignedToValue(value);
   };
 
+  const oipcSectionRef = React.useRef(null);
+  const handleOipcReviewFlagChange = (isSelected) => {
+    setShowOIPCDetails(isSelected);
+    oipcSectionRef.current.scrollIntoView();
+    //timeout to allow react state to update after setState call
+    if (isSelected) {
+      setTimeout(() => {
+        oipcSectionRef.current.scrollIntoView();
+      }, (10));
+    }
+  }
+
   //handle email validation
   const [validation, setValidation] = React.useState({});
   const handleEmailValidation = (validationObj) => {
@@ -1122,6 +1134,8 @@ const FOIRequest = React.memo(({ userDetail }) => {
                         userDetail={userDetail}
                         disableInput={disableInput}
                         isAddRequest={isAddRequest}
+                        handleOipcReviewFlagChange={handleOipcReviewFlagChange}
+                        showOipcReviewFlag={requestState.toLowerCase() !== StateEnum.intakeinprogress.name.toLowerCase()}
                       />
                       {(isAddRequest ||
                         requestState === StateEnum.unopened.name) && (
@@ -1237,6 +1251,7 @@ const FOIRequest = React.memo(({ userDetail }) => {
                           divisions={requestDetails.divisions}
                         />
                       )}
+                      <div ref={oipcSectionRef}></div>
                       {showOIPCDetails && requestState && requestState.toLowerCase() !== StateEnum.intakeinprogress.name.toLowerCase() && (
                         <OIPCDetails 
                           oipcData={oipcData}

diff --git a/forms-flow-web/src/components/FOI/FOIRequest/FOIRequestHeader/index.js b/forms-flow-web/src/components/FOI/FOIRequest/FOIRequestHeader/index.js
@@ -49,6 +49,8 @@ const FOIRequestHeader = React.memo(
     userDetail,
     disableInput,
     isAddRequest,
+    handleOipcReviewFlagChange,
+    showOipcReviewFlag
   }) => {
     /**
      *  Header of Review request in the UI
@@ -287,11 +289,14 @@ const FOIRequestHeader = React.memo(
             type="oipcreview"
             requestDetails={requestDetails}
             isActive={requestDetails.isoipcreview}
+            handleSelect={handleOipcReviewFlagChange}
+            showFlag={showOipcReviewFlag}
           />
           <RequestFlag
             type="phasedrelease"
             requestDetails={requestDetails}
             isActive={requestDetails.isphasedrelease}
+            handleSelect={handleOipcReviewFlagChange}
           />
         </div>
         <div className="col-lg-6">

diff --git a/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/MinistryReview.js b/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/MinistryReview.js
@@ -62,6 +62,8 @@ import { UnsavedModal } from "../../customComponents";
 import { DISABLE_GATHERINGRECORDS_TAB } from "../../../../constants/constants";
 import _ from "lodash";
 import { MinistryNeedsScanning } from "../../../../constants/FOI/enum";
+import OIPCDetails from "../OIPCDetails/Index";
+import useOIPCHook from "../OIPCDetails/oipcHook";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -108,6 +110,8 @@ const MinistryReview = React.memo(({ userDetail }) => {
 
   const [_currentrequestStatus, setcurrentrequestStatus] = React.useState("");
   const [_tabStatus, settabStatus] = React.useState(requestState);
+  const {oipcData, addOIPC, removeOIPC, updateOIPC} = useOIPCHook();
+  const [showOIPCDetails, setShowOIPCDetails] = useState(requestDetails.oipcData?.length > 0);
   //gets the request detail from the store
   const IsDivisionalCoordinator = () => {
     return userDetail?.role?.includes("DivisionalCoordinator");
@@ -582,6 +586,18 @@ const MinistryReview = React.memo(({ userDetail }) => {
     (state) => state.foiRequests.showEventQueue
   );
 
+  const oipcSectionRef = React.useRef(null);
+  const handleOipcReviewFlagChange = (isSelected) => {
+    setShowOIPCDetails(isSelected);
+    oipcSectionRef.current.scrollIntoView();
+    //timeout to allow react state to update after setState call
+    if (isSelected) {
+      setTimeout(() => {
+        oipcSectionRef.current.scrollIntoView();
+      }, (10));
+    }
+  }
+
   return !isLoading &&
     requestDetails &&
     Object.keys(requestDetails).length !== 0 &&
@@ -752,6 +768,7 @@ const MinistryReview = React.memo(({ userDetail }) => {
                             setSaveMinistryRequestObject
                           }
                           ministryAssigneeValue={ministryAssignedToValue}
+                          handleOipcReviewFlagChange={handleOipcReviewFlagChange}
                         />
                         <ApplicantDetails requestDetails={requestDetails} />
                         <ChildDetails requestDetails={requestDetails} />
@@ -767,6 +784,15 @@ const MinistryReview = React.memo(({ userDetail }) => {
                         />
                         {divisionsBox}
                         {/* <RequestNotes /> */}
+                        <div ref={oipcSectionRef}></div>
+                        {showOIPCDetails && requestState && requestState.toLowerCase() !== StateEnum.intakeinprogress.name.toLowerCase() && (
+                          <OIPCDetails 
+                            oipcData={oipcData}
+                            updateOIPC={updateOIPC}
+                            addOIPC={addOIPC}
+                            removeOIPC={removeOIPC}
+                          />
+                        )}
                         <BottomButtonGroup
                           requestState={requestState}
                           stateChanged={stateChanged}

diff --git a/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/RequestHeader.js b/forms-flow-web/src/components/FOI/FOIRequest/MinistryReview/RequestHeader.js
@@ -20,7 +20,8 @@ const RequestHeader = React.memo(({
     userDetail,
     handleMinistryAssignedToValue,
     setSaveMinistryRequestObject,
-    ministryAssigneeValue
+    ministryAssigneeValue,
+    handleOipcReviewFlagChange
 }) => {
     const { requestId, ministryId } = useParams();
     const _requestDetails = requestDetails;
@@ -108,11 +109,13 @@ const RequestHeader = React.memo(({
               type="oipcreview"
               requestDetails={requestDetails}
               isActive={requestDetails.isoipcreview}
+              handleSelect={handleOipcReviewFlagChange}
             />
             <RequestFlag
               type="phasedrelease"
               requestDetails={requestDetails}
               isActive={requestDetails.isphasedrelease}
+              handleSelect={() => console.log('selected')}
             />
         </div>
       );

diff --git a/forms-flow-web/src/components/FOI/customComponents/RequestFlag.js b/forms-flow-web/src/components/FOI/customComponents/RequestFlag.js
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import "./requestflag.scss";
-
 import OutlinedInput from "@material-ui/core/OutlinedInput";
 import MenuItem from "@material-ui/core/MenuItem";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -15,17 +14,12 @@ import CloseIcon from "@material-ui/icons/Close";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@mui/material/TextField";
 import { useParams } from "react-router-dom";
-import { saveRequestDetails } from "../../../apiManager/services/FOI/foiRequestServices";
-import { toast } from "react-toastify";
 import { useDispatch } from "react-redux";
-import {
-  fetchFOIRequestDetailsWrapper,
-} from "../../../apiManager/services/FOI/foiRequestServices";
 
 //Types are:
 //oipcreview
 //phasedrelease
-const RequestFlag = ({ isActive, type, requestDetails }) => {
+const RequestFlag = ({ isActive, type, handleSelect, showFlag = true }) => {
   const [isSelected, setIsSelected] = useState(isActive || false);
   const [modalOpen, setModalOpen] = useState(false);
   const [modalHeading, setModalHeading] = useState("");
@@ -133,7 +127,12 @@ const RequestFlag = ({ isActive, type, requestDetails }) => {
   }
 
   const handleValueChange = (e) => {
-    setModalOpen(true);
+    setIsSelected(e.target.value);
+    if (type == "oipcreview" && !isActive) {
+        handleSelect(e.target.value)
+    } else {
+        setModalOpen(true);
+    }
 
     if (e.target.value == true) {
       setModalHeading(modalHeadingActive);
@@ -144,7 +143,6 @@ const RequestFlag = ({ isActive, type, requestDetails }) => {
       setModalMessage(modalMessageInactive);
       setModalDescription(modalDescriptionInactive);
     }
-    setIsSelected(e.target.value);
   };
 
   const handleClose = () => {
@@ -154,61 +152,10 @@ const RequestFlag = ({ isActive, type, requestDetails }) => {
 
   const handleSave = (e) => {
     setModalOpen(false);
-    saveOipcReviewStatus();
-  };
-
-  const saveOipcReviewStatus = () => {
-    let updatedRequestDetails;
-    if (type == "oipcreview") {
-        updatedRequestDetails = {
-            ...requestDetails,
-            isoipcreview: isSelected,
-        };
-    } else if (type == "phasedrelease") {
-        updatedRequestDetails = {
-            ...requestDetails,
-            isphasedrelease: isSelected,
-        };
-    }
-    //dispatch loader
-    dispatch(
-      saveRequestDetails(
-        updatedRequestDetails,
-        -2, //not an add request
-        requestId,
-        ministryId,
-        (err, res) => {
-          if (!err) {
-            toast.success("The OIPC review status has been successfully updated.", {
-              position: "top-right",
-              autoClose: 3000,
-              hideProgressBar: true,
-              closeOnClick: true,
-              pauseOnHover: true,
-              draggable: true,
-              progress: undefined,
-            });
-            dispatch(fetchFOIRequestDetailsWrapper(requestId, ministryId));
-          } else {
-            toast.error(
-              "Temporarily unable to update the OIPC review status. Please try again in a few minutes.",
-              {
-                position: "top-right",
-                autoClose: 3000,
-                hideProgressBar: true,
-                closeOnClick: true,
-                pauseOnHover: true,
-                draggable: true,
-                progress: undefined,
-              }
-            );
-            setIsSelected(isActive || false);
-          }
-        }
-      )
-    );
+    handleSelect(isSelected);
   };
 
+  if (!showFlag) return <></>;
   return (
     <>
       <div className="request-flag">