Merge pull request #14854 from transcom/MAIN-B-22661

MAIN B-22661
transcom · Feb 26, 2025 · 39711d7 · 39711d7
2 parents 9703fbb + 634eeda
commit 39711d7
Show file tree

Hide file tree

Showing 19 changed files with 842 additions and 684 deletions.
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
     "react-filepond": "^7.1.2",
     "react-idle-timer": "^5.7.2",
     "react-imask": "^7.6.1",
+    "react-loader-spinner": "^6.1.6",
     "react-markdown": "^8.0.7",
     "react-query": "^3.39.2",
     "react-rangeslider": "^2.2.0",
@@ -93,6 +94,7 @@
     "loader-utils": "^2.0.3",
     "minimist": "^1.2.6",
     "node-fetch": "^2.6.7",
+    "pdfjs-dist": "4.8.69",
     "react-router": "6.24.1",
     "react-router-dom": "6.24.1",
     "recursive-readdir": "^2.2.3",

diff --git a/src/components/Customer/OrdersInfoForm/OrdersInfoForm.jsx b/src/components/Customer/OrdersInfoForm/OrdersInfoForm.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Formik, Field } from 'formik';
 import * as Yup from 'yup';
 import { Radio, FormGroup, Label, Link as USWDSLink } from '@trussworks/react-uswds';
+import { connect } from 'react-redux';
 
 import { isBooleanFlagEnabled } from '../../../utils/featureFlags';
 import { FEATURE_FLAG_KEYS } from '../../../shared/constants';
@@ -23,10 +24,13 @@ import WizardNavigation from 'components/Customer/WizardNavigation/WizardNavigat
 import Callout from 'components/Callout';
 import { formatLabelReportByDate, dropdownInputOptions } from 'utils/formatters';
 import { showCounselingOffices } from 'services/internalApi';
+import { setShowLoadingSpinner as setShowLoadingSpinnerAction } from 'store/general/actions';
+import retryPageLoading from 'utils/retryPageLoading';
+import { milmoveLogger } from 'utils/milmoveLog';
 
 let originMeta;
 let newDutyMeta = '';
-const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack }) => {
+const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack, setShowLoadingSpinner }) => {
   const payGradeOptions = dropdownInputOptions(ORDERS_PAY_GRADE_OPTIONS);
   const [currentDutyLocation, setCurrentDutyLocation] = useState('');
   const [newDutyLocation, setNewDutyLocation] = useState('');
@@ -68,6 +72,7 @@ const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack })
       ? Yup.number().min(0).required('Required')
       : Yup.number().notRequired(),
   });
+
   useEffect(() => {
     // Functional component version of "componentDidMount"
     // By leaving the dependency array empty this will only run once
@@ -79,37 +84,55 @@ const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack })
     };
     checkUBFeatureFlag();
   }, []);
+
   useEffect(() => {
-    // If current duty location is defined, show the counseling offices
-    if (currentDutyLocation?.id) {
-      showCounselingOffices(currentDutyLocation.id).then((fetchedData) => {
-        if (fetchedData.body) {
-          const counselingOffices = fetchedData.body.map((item) => ({
-            key: item.id,
-            value: item.name,
-          }));
-          setCounselingOfficeOptions(counselingOffices);
+    const fetchCounselingOffices = async () => {
+      if (currentDutyLocation?.id && !counselingOfficeOptions) {
+        setShowLoadingSpinner(true, 'Loading counseling offices');
+        try {
+          const fetchedData = await showCounselingOffices(currentDutyLocation.id);
+          if (fetchedData.body) {
+            const counselingOffices = fetchedData.body.map((item) => ({
+              key: item.id,
+              value: item.name,
+            }));
+            setCounselingOfficeOptions(counselingOffices);
+          }
+        } catch (error) {
+          const { message } = error;
+          milmoveLogger.error({ message, info: null });
+          retryPageLoading(error);
         }
-      });
-    }
-    // Check if either currentDutyLocation or newDutyLocation is OCONUS
-    if (currentDutyLocation?.address?.isOconus || newDutyLocation?.address?.isOconus) {
-      setIsOconusMove(true);
-    } else {
-      setIsOconusMove(false);
-    }
-    if (currentDutyLocation?.address && newDutyLocation?.address && enableUB) {
-      // Only if one of the duty locations is OCONUS should accompanied tour and dependent
-      // age fields display
-      if (isOconusMove && hasDependents) {
-        setShowAccompaniedTourField(true);
-        setShowDependentAgeFields(true);
+        setShowLoadingSpinner(false, null);
+      }
+
+      // Check if either currentDutyLocation or newDutyLocation is OCONUS
+      if (currentDutyLocation?.address?.isOconus || newDutyLocation?.address?.isOconus) {
+        setIsOconusMove(true);
       } else {
-        setShowAccompaniedTourField(false);
-        setShowDependentAgeFields(false);
+        setIsOconusMove(false);
       }
-    }
-  }, [currentDutyLocation, newDutyLocation, isOconusMove, hasDependents, enableUB]);
+
+      if (currentDutyLocation?.address && newDutyLocation?.address && enableUB) {
+        if (isOconusMove && hasDependents) {
+          setShowAccompaniedTourField(true);
+          setShowDependentAgeFields(true);
+        } else {
+          setShowAccompaniedTourField(false);
+          setShowDependentAgeFields(false);
+        }
+      }
+    };
+    fetchCounselingOffices();
+  }, [
+    currentDutyLocation,
+    newDutyLocation,
+    isOconusMove,
+    hasDependents,
+    enableUB,
+    setShowLoadingSpinner,
+    counselingOfficeOptions,
+  ]);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -441,7 +464,7 @@ OrdersInfoForm.propTypes = {
     issue_date: PropTypes.string,
     report_by_date: PropTypes.string,
     has_dependents: PropTypes.string,
-    new_duty_location: PropTypes.shape({}),
+    new_duty_location: DutyLocationShape,
     grade: PropTypes.string,
     origin_duty_location: DutyLocationShape,
     dependents_under_twelve: PropTypes.string,
@@ -453,4 +476,8 @@ OrdersInfoForm.propTypes = {
   onBack: PropTypes.func.isRequired,
 };
 
-export default OrdersInfoForm;
+const mapDispatchToProps = {
+  setShowLoadingSpinner: setShowLoadingSpinnerAction,
+};
+
+export default connect(() => ({}), mapDispatchToProps)(OrdersInfoForm);
diff --git a/src/components/Customer/OrdersInfoForm/OrdersInfoForm.stories.jsx b/src/components/Customer/OrdersInfoForm/OrdersInfoForm.stories.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import OrdersInfoForm from './OrdersInfoForm';
 
 import { ORDERS_TYPE } from 'constants/orders';
+import { MockProviders } from 'testUtils';
 
 const testInitialValues = {
   orders_type: ORDERS_TYPE.PERMANENT_CHANGE_OF_STATION,
@@ -76,32 +77,40 @@ const testProps = {
 };
 
 export const EmptyValues = (argTypes) => (
-  <OrdersInfoForm {...testProps} onSubmit={argTypes.onSubmit} onBack={argTypes.onBack} />
+  <MockProviders>
+    <OrdersInfoForm {...testProps} onSubmit={argTypes.onSubmit} onBack={argTypes.onBack} />
+  </MockProviders>
 );
 
 export const PrefillNoDependents = (argTypes) => (
-  <OrdersInfoForm
-    {...testProps}
-    initialValues={testInitialValues}
-    onSubmit={argTypes.onSubmit}
-    onBack={argTypes.onBack}
-  />
+  <MockProviders>
+    <OrdersInfoForm
+      {...testProps}
+      initialValues={testInitialValues}
+      onSubmit={argTypes.onSubmit}
+      onBack={argTypes.onBack}
+    />
+  </MockProviders>
 );
 
 export const PrefillYesDependents = (argTypes) => (
-  <OrdersInfoForm
-    {...testProps}
-    initialValues={{ ...testInitialValues, has_dependents: 'yes' }}
-    onSubmit={argTypes.onSubmit}
-    onBack={argTypes.onBack}
-  />
+  <MockProviders>
+    <OrdersInfoForm
+      {...testProps}
+      initialValues={{ ...testInitialValues, has_dependents: 'yes' }}
+      onSubmit={argTypes.onSubmit}
+      onBack={argTypes.onBack}
+    />
+  </MockProviders>
 );
 
 export const PCSOnly = (argTypes) => (
-  <OrdersInfoForm
-    {...testProps}
-    ordersTypeOptions={[testProps.ordersTypeOptions[0]]}
-    onSubmit={argTypes.onSubmit}
-    onBack={argTypes.onBack}
-  />
+  <MockProviders>
+    <OrdersInfoForm
+      {...testProps}
+      ordersTypeOptions={[testProps.ordersTypeOptions[0]]}
+      onSubmit={argTypes.onSubmit}
+      onBack={argTypes.onBack}
+    />
+  </MockProviders>
 );