From 7e136f8e6433a8a750c82aae7a3eaf77bceb85d2 Mon Sep 17 00:00:00 2001
From: Henry Oforeh <henry.oforeh@aot-technologies.com>
Date: Mon, 22 Jan 2024 11:19:25 -0700
Subject: [PATCH] [MDS-5298] ministry follow up user flow (#2903)

* rearrange form fields.

* add rows

* update header, remove unused imports and code.

* Remove commented code.
---
 .../Forms/incidents/IncidentForm.tsx          |   6 +-
 .../incidents/IncidentFormInitialReport.tsx   | 154 +++++++++++++++++-
 .../IncidentFormMinistryFollowup.tsx          | 125 +-------------
 3 files changed, 158 insertions(+), 127 deletions(-)

diff --git a/services/core-web/src/components/Forms/incidents/IncidentForm.tsx b/services/core-web/src/components/Forms/incidents/IncidentForm.tsx
index 00080ff7f5..8c609945f8 100644
--- a/services/core-web/src/components/Forms/incidents/IncidentForm.tsx
+++ b/services/core-web/src/components/Forms/incidents/IncidentForm.tsx
@@ -142,7 +142,11 @@ export const IncidentForm: FC<IncidentFormProps & InjectedFormProps> = (props) =
       <Row>
         <Col span={24}>{renderEditSaveControls()}</Col>
         <Col span={16} offset={4}>
-          <IncidentFormInitialReport incident={props.incident} isEditMode={isEditMode} />
+          <IncidentFormInitialReport
+            incident={props.incident}
+            isEditMode={isEditMode}
+            inspectorOptions={inspectorOptions}
+          />
           <br />
           <IncidentFormDocuments
             documents={documents}
diff --git a/services/core-web/src/components/Forms/incidents/IncidentFormInitialReport.tsx b/services/core-web/src/components/Forms/incidents/IncidentFormInitialReport.tsx
index 1376050fc6..b8fd5f3526 100644
--- a/services/core-web/src/components/Forms/incidents/IncidentFormInitialReport.tsx
+++ b/services/core-web/src/components/Forms/incidents/IncidentFormInitialReport.tsx
@@ -1,6 +1,6 @@
 import { Col, Divider, Form, Row, Typography } from "antd";
-import React, { FC } from "react";
-import { Field } from "redux-form";
+import React, { FC, useEffect, useState } from "react";
+import { Field, getFormValues } from "redux-form";
 import { renderConfig } from "@/components/common/config";
 import { useSelector } from "react-redux";
 import {
@@ -14,22 +14,28 @@ import {
   requiredList,
   requiredNotUndefined,
   wholeNumber,
+  requiredRadioButton,
 } from "@common/utils/Validate";
 import { normalizeDatetime, normalizePhone } from "@common/utils/helpers";
 import IncidentCategoryCheckboxGroup from "@/components/Forms/incidents/IncidentCategoryCheckboxGroup";
 import RenderDateTimeTz from "@/components/common/RenderDateTimeTz";
 import { getDropdownIncidentCategoryCodeOptions } from "@mds/common/redux/selectors/staticContentSelectors";
-import { IMineIncident } from "@mds/common";
+import { IMineIncident, INCIDENT_CONTACT_METHOD_OPTIONS } from "@mds/common";
+import { ADD_EDIT_INCIDENT } from "@/constants/forms";
+import { dateNotBeforeStrictOther } from "@mds/common/redux/utils/Validate";
 
 interface IncidentFormInitialReportProps {
   isEditMode: boolean;
   incident: IMineIncident;
+  inspectorOptions: any[];
 }
 
 const IncidentFormInitialReport: FC<IncidentFormInitialReportProps> = ({
   isEditMode,
   incident,
+  inspectorOptions,
 }) => {
+  const formValues = useSelector((state) => getFormValues(ADD_EDIT_INCIDENT)(state));
   const showUnspecified = incident.mine_incident_guid && !incident.incident_location;
 
   const locationOptions = [
@@ -42,6 +48,14 @@ const IncidentFormInitialReport: FC<IncidentFormInitialReportProps> = ({
   ];
 
   const incidentCategoryCodeOptions = useSelector(getDropdownIncidentCategoryCodeOptions);
+  const [inspectorContactedValidation, setInspectorContactedValidation] = useState({});
+  const [inspectorContacted, setInspectorContacted] = useState(null);
+
+  useEffect(() => {
+    const inspectorSet = formValues?.reported_to_inspector_party_guid;
+    setInspectorContactedValidation(inspectorSet ? { validate: [requiredRadioButton] } : {});
+    setInspectorContacted(formValues?.reported_to_inspector_contacted);
+  }, [formValues]);
 
   return (
     <div className="ant-form-vertical">
@@ -109,6 +123,140 @@ const IncidentFormInitialReport: FC<IncidentFormInitialReportProps> = ({
               </Form.Item>
             </Col>
           </Row>
+          <Row gutter={16}>
+            <Col span={24}>
+              <h4>Verbal Notification</h4>
+            </Col>
+            <Col md={12} xs={24}>
+              <Field
+                label="Was verbal notification of the incident provided through the Mine Incident Reporting Line (1-888-348-0299)?"
+                id="verbal_notification_provided"
+                name="verbal_notification_provided"
+                component={renderConfig.RADIO}
+                disabled={!isEditMode}
+              />
+            </Col>
+            {formValues.verbal_notification_provided && (
+              <Col md={12} xs={24}>
+                <Field
+                  label="Date and time"
+                  id="verbal_notification_timestamp"
+                  name="verbal_notification_timestamp"
+                  component={RenderDateTimeTz}
+                  normalize={normalizeDatetime}
+                  timezone={formValues.incident_timezone}
+                  showTime
+                  disabled={!isEditMode}
+                  placeholder="Please select date"
+                  validate={[
+                    dateNotInFutureTZ,
+                    dateNotBeforeStrictOther(formValues.incident_timestamp),
+                  ]}
+                />
+              </Col>
+            )}
+          </Row>
+          <Col span={24}>
+            <h4>Ministry Inspector Details</h4>
+          </Col>
+          <Row gutter={16}>
+            <Col md={12} xs={24}>
+              <Field
+                label="Inspector reported to"
+                id="reported_to_inspector_party_guid"
+                name="reported_to_inspector_party_guid"
+                placeholder="Search for inspector..."
+                component={renderConfig.GROUPED_SELECT}
+                format={null}
+                data={inspectorOptions}
+                disabled={!isEditMode}
+              />
+            </Col>
+            <Col md={12} xs={24}>
+              <Field
+                label="Was this person contacted?"
+                id="reported_to_inspector_contacted"
+                name="reported_to_inspector_contacted"
+                component={renderConfig.RADIO}
+                disabled={!isEditMode}
+                validate={[]}
+                {...inspectorContactedValidation}
+              />
+            </Col>
+          </Row>
+          {inspectorContacted && (
+            <Row gutter={16}>
+              <Col md={12} xs={24}>
+                <Field
+                  label="Date and time"
+                  id="reported_timestamp"
+                  name="reported_timestamp"
+                  component={RenderDateTimeTz}
+                  normalize={normalizeDatetime}
+                  timezone={formValues.incident_timezone}
+                  showTime
+                  disabled={!isEditMode}
+                  placeholder="Please select date"
+                  validate={[
+                    required,
+                    dateNotInFutureTZ,
+                    dateNotBeforeStrictOther(formValues.incident_timestamp),
+                  ]}
+                />
+              </Col>
+              <Col md={12} xs={24}>
+                <Field
+                  label="Initial Contact Method"
+                  id="reported_to_inspector_contact_method"
+                  name="reported_to_inspector_contact_method"
+                  component={renderConfig.SELECT}
+                  data={INCIDENT_CONTACT_METHOD_OPTIONS.filter((cm) => cm?.inspectorOnly)}
+                  disabled={!isEditMode}
+                  validate={[required]}
+                />
+              </Col>
+            </Row>
+          )}
+          <Row gutter={16}>
+            <Col md={12} xs={24}>
+              <Field
+                label="Inspector responsible"
+                id="responsible_inspector_party_guid"
+                name="responsible_inspector_party_guid"
+                component={renderConfig.GROUPED_SELECT}
+                format={null}
+                placeholder="Search for responsible inspector..."
+                data={inspectorOptions}
+                disabled={!isEditMode}
+              />
+            </Col>
+            <Col md={12} xs={24}>
+              <Field
+                label="Was there a follow-up inspection?"
+                id="followup_inspection"
+                name="followup_inspection"
+                component={renderConfig.RADIO}
+                disabled={!isEditMode}
+              />
+            </Col>
+            <Col md={12} xs={24}>
+              <Field
+                label="Follow-up inspection date"
+                id="followup_inspection_date"
+                name="followup_inspection_date"
+                placeholder="Please select date..."
+                showTime={false}
+                component={RenderDateTimeTz}
+                normalize={normalizeDatetime}
+                timezone={formValues.incident_timezone}
+                validate={[
+                  dateNotInFutureTZ,
+                  dateNotBeforeStrictOther(formValues.incident_timestamp),
+                ]}
+                disabled={!isEditMode}
+              />
+            </Col>
+          </Row>
           <br />
         </Col>
         {/* Incident Details */}
diff --git a/services/core-web/src/components/Forms/incidents/IncidentFormMinistryFollowup.tsx b/services/core-web/src/components/Forms/incidents/IncidentFormMinistryFollowup.tsx
index 2dcebff408..95bbae238c 100644
--- a/services/core-web/src/components/Forms/incidents/IncidentFormMinistryFollowup.tsx
+++ b/services/core-web/src/components/Forms/incidents/IncidentFormMinistryFollowup.tsx
@@ -1,15 +1,14 @@
 import {
-  INCIDENT_CONTACT_METHOD_OPTIONS,
   INCIDENT_DETERMINATION_TYPES,
   INCIDENT_FOLLOWUP_ACTIONS,
 } from "@mds/common/constants/strings";
-import React, { FC, useEffect, useState } from "react";
+import React, { FC } from "react";
 import { useSelector } from "react-redux";
 import { Field, FieldArray, getFormValues } from "redux-form";
 import { ADD_EDIT_INCIDENT } from "@/constants/forms";
 import { Button, Col, Row, Typography } from "antd";
 import { renderConfig } from "@/components/common/config";
-import { required, requiredRadioButton, validateSelectOptions } from "@common/utils/Validate";
+import { required, validateSelectOptions } from "@common/utils/Validate";
 import RenderDateTimeTz from "@/components/common/RenderDateTimeTz";
 import { normalizeDatetime } from "@mds/common/redux/utils/helpers";
 import { dateNotBeforeStrictOther, dateNotInFutureTZ } from "@mds/common/redux/utils/Validate";
@@ -32,17 +31,6 @@ const IncidentFormMinistryFollowup: FC<IncidentFormMinistryFollowupProps> = ({
 }) => {
   const formValues = useSelector((state) => getFormValues(ADD_EDIT_INCIDENT)(state));
 
-  const [inspectorContactedValidation, setInspectorContactedValidation] = useState({});
-  const [inspectorContacted, setInspectorContacted] = useState(null);
-
-  useEffect(() => {
-    const inspectorSet = formValues?.reported_to_inspector_party_guid;
-
-    setInspectorContactedValidation(inspectorSet ? { validate: [requiredRadioButton] } : {});
-
-    setInspectorContacted(formValues?.reported_to_inspector_contacted);
-  }, [formValues]);
-
   const filteredFollowUpActions = incidentFollowUpActionOptions.filter(
     (act) => act.mine_incident_followup_investigation_type !== INCIDENT_FOLLOWUP_ACTIONS.unknown
   );
@@ -119,18 +107,6 @@ const IncidentFormMinistryFollowup: FC<IncidentFormMinistryFollowupProps> = ({
               />
             </Col>
           )}
-          <Col span={24}>
-            <h4>Verbal Notification</h4>
-          </Col>
-          <Col md={12} xs={24}>
-            <Field
-              label="Was verbal notification of the incident provided through the Mine Incident Reporting Line (1-888-348-0299)?"
-              id="verbal_notification_provided"
-              name="verbal_notification_provided"
-              component={renderConfig.RADIO}
-              disabled={!isEditMode}
-            />
-          </Col>
           {formValues.verbal_notification_provided && (
             <Col md={12} xs={24}>
               <Field
@@ -150,103 +126,6 @@ const IncidentFormMinistryFollowup: FC<IncidentFormMinistryFollowupProps> = ({
               />
             </Col>
           )}
-          <Col span={24}>
-            <h4>Follow-Up Information</h4>
-          </Col>
-          <Col md={12} xs={24}>
-            <Field
-              label="Incident reported to"
-              id="reported_to_inspector_party_guid"
-              name="reported_to_inspector_party_guid"
-              placeholder="Search for inspector..."
-              component={renderConfig.GROUPED_SELECT}
-              format={null}
-              data={inspectorOptions}
-              disabled={!isEditMode}
-            />
-          </Col>
-          <Col md={12} xs={24}>
-            <Field
-              label="Was this person contacted?"
-              id="reported_to_inspector_contacted"
-              name="reported_to_inspector_contacted"
-              component={renderConfig.RADIO}
-              disabled={!isEditMode}
-              validate={[]}
-              {...inspectorContactedValidation}
-            />
-          </Col>
-          {inspectorContacted && (
-            <>
-              <Col md={12} xs={24}>
-                <Field
-                  label="Date and time"
-                  id="reported_timestamp"
-                  name="reported_timestamp"
-                  component={RenderDateTimeTz}
-                  normalize={normalizeDatetime}
-                  timezone={formValues.incident_timezone}
-                  showTime
-                  disabled={!isEditMode}
-                  placeholder="Please select date"
-                  validate={[
-                    required,
-                    dateNotInFutureTZ,
-                    dateNotBeforeStrictOther(formValues.incident_timestamp),
-                  ]}
-                />
-              </Col>
-              <Col md={12} xs={24}>
-                <Field
-                  label="Initial Contact Method"
-                  id="reported_to_inspector_contact_method"
-                  name="reported_to_inspector_contact_method"
-                  component={renderConfig.SELECT}
-                  data={INCIDENT_CONTACT_METHOD_OPTIONS.filter((cm) => cm?.inspectorOnly)}
-                  disabled={!isEditMode}
-                  validate={[required]}
-                />
-              </Col>
-            </>
-          )}
-          <Col md={12} xs={24}>
-            <Field
-              label="Inspector responsible"
-              id="responsible_inspector_party_guid"
-              name="responsible_inspector_party_guid"
-              component={renderConfig.GROUPED_SELECT}
-              format={null}
-              placeholder="Search for responsible inspector..."
-              data={inspectorOptions}
-              disabled={!isEditMode}
-            />
-          </Col>
-          <Col md={12} xs={24}>
-            <Field
-              label="Was there a follow-up inspection?"
-              id="followup_inspection"
-              name="followup_inspection"
-              component={renderConfig.RADIO}
-              disabled={!isEditMode}
-            />
-          </Col>
-          <Col md={12} xs={24}>
-            <Field
-              label="Follow-up inspection date"
-              id="followup_inspection_date"
-              name="followup_inspection_date"
-              placeholder="Please select date..."
-              showTime={false}
-              component={RenderDateTimeTz}
-              normalize={normalizeDatetime}
-              timezone={formValues.incident_timezone}
-              validate={[
-                dateNotInFutureTZ,
-                dateNotBeforeStrictOther(formValues.incident_timestamp),
-              ]}
-              disabled={!isEditMode}
-            />
-          </Col>
           <Col span={24}>
             <Field
               label="Was it escalated to EMLI investigation?"