UI logic to let TOO and SC create UB shipments

transcom · Dec 11, 2024 · a6a9cb3 · a6a9cb3
1 parent 00d36bd
commit a6a9cb3
Show file tree

Hide file tree

Showing 10 changed files with 96 additions and 37 deletions.
diff --git a/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx b/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import * as PropTypes from 'prop-types';
 import { generatePath, useParams, useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -86,16 +86,30 @@ const ApprovedRequestedShipments = ({
 
   const dutyLocationPostal = { postalCode: ordersInfo.newDutyLocation?.address?.postalCode };
 
-  const [enableBoat, setEnableBoat] = React.useState(false);
-  const [enableMobileHome, setEnableMobileHome] = React.useState(false);
-  React.useEffect(() => {
+  const [enableBoat, setEnableBoat] = useState(false);
+  const [enableMobileHome, setEnableMobileHome] = useState(false);
+  const [enableUB, setEnableUB] = useState(false);
+  const [isOconusMove, setIsOconusMove] = useState(false);
+
+  useEffect(() => {
     const fetchData = async () => {
       setEnableBoat(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.BOAT));
       setEnableMobileHome(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.MOBILE_HOME));
+      setEnableUB(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.UNACCOMPANIED_BAGGAGE));
     };
     fetchData();
   }, []);
 
+  const { newDutyLocation, currentDutyLocation } = ordersInfo;
+  useEffect(() => {
+    // Check if duty locations on the orders qualify as OCONUS to conditionally render the UB shipment option
+    if (currentDutyLocation?.address?.isOconus || newDutyLocation?.address?.isOconus) {
+      setIsOconusMove(true);
+    } else {
+      setIsOconusMove(false);
+    }
+  }, [currentDutyLocation, newDutyLocation, isOconusMove, enableUB]);
+
   const allowedShipmentOptions = () => {
     return (
       <>
@@ -107,6 +121,7 @@ const ApprovedRequestedShipments = ({
         <option value={SHIPMENT_OPTIONS_URL.NTSrelease}>NTS-release</option>
         {enableBoat && <option value={SHIPMENT_OPTIONS_URL.BOAT}>Boat</option>}
         {enableMobileHome && <option value={SHIPMENT_OPTIONS_URL.MOBILE_HOME}>Mobile Home</option>}
+        {enableUB && isOconusMove && <option value={SHIPMENT_OPTIONS_URL.UNACCOMPANIED_BAGGAGE}>UB</option>}
       </>
     );
   };

diff --git a/src/components/Office/RequestedShipments/RequestedShipments.test.jsx b/src/components/Office/RequestedShipments/RequestedShipments.test.jsx
@@ -502,6 +502,7 @@ describe('RequestedShipments', () => {
         SHIPMENT_OPTIONS_URL.NTSrelease,
         SHIPMENT_OPTIONS_URL.MOBILE_HOME,
         SHIPMENT_OPTIONS_URL.BOAT,
+        SHIPMENT_OPTIONS_URL.UNACCOMPANIED_BAGGAGE,
       ],
     ])('selects the %s option and navigates to the matching form for that shipment type', async (shipmentType) => {
       render(

diff --git a/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx b/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx
@@ -65,15 +65,28 @@ const SubmittedRequestedShipments = ({
   const [filteredShipments, setFilteredShipments] = useState([]);
   const [enableBoat, setEnableBoat] = useState(false);
   const [enableMobileHome, setEnableMobileHome] = useState(false);
+  const [enableUB, setEnableUB] = useState(false);
+  const [isOconusMove, setIsOconusMove] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
       setEnableBoat(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.BOAT));
       setEnableMobileHome(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.MOBILE_HOME));
+      setEnableUB(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.UNACCOMPANIED_BAGGAGE));
     };
     fetchData();
   }, []);
 
+  const { newDutyLocation, currentDutyLocation } = ordersInfo;
+  useEffect(() => {
+    // Check if duty locations on the orders qualify as OCONUS to conditionally render the UB shipment option
+    if (currentDutyLocation?.address?.isOconus || newDutyLocation?.address?.isOconus) {
+      setIsOconusMove(true);
+    } else {
+      setIsOconusMove(false);
+    }
+  }, [currentDutyLocation, newDutyLocation, isOconusMove, enableUB]);
+
   const filterPrimeShipments = mtoShipments.filter((shipment) => !shipment.usesExternalVendor);
 
   const filterShipments = (formikShipmentIds) => {
@@ -126,6 +139,7 @@ const SubmittedRequestedShipments = ({
         <option value={SHIPMENT_OPTIONS_URL.NTSrelease}>NTS-release</option>
         {enableBoat && <option value={SHIPMENT_OPTIONS_URL.BOAT}>Boat</option>}
         {enableMobileHome && <option value={SHIPMENT_OPTIONS_URL.MOBILE_HOME}>Mobile Home</option>}
+        {enableUB && isOconusMove && <option value={SHIPMENT_OPTIONS_URL.UNACCOMPANIED_BAGGAGE}>UB</option>}
       </>
     );
   };

diff --git a/src/components/Office/ShipmentForm/ShipmentForm.jsx b/src/components/Office/ShipmentForm/ShipmentForm.jsx
@@ -890,7 +890,7 @@ const ShipmentForm = (props) => {
               </SectionWrapper>
 
               <Form className={formStyles.form}>
-                {isTOO && !isHHG && !isPPM && !isBoat && !isMobileHome && <ShipmentVendor />}
+                {isTOO && !isHHG && !isPPM && !isBoat && !isMobileHome && !isUB && <ShipmentVendor />}
 
                 {isNTSR && <ShipmentWeightInput userRole={userRole} />}
 

diff --git a/src/components/Office/ShipmentForm/ShipmentForm.test.jsx b/src/components/Office/ShipmentForm/ShipmentForm.test.jsx
@@ -212,7 +212,7 @@ const defaultProps = {
   serviceMember: {
     weightAllotment: {
       totalWeightSelf: 5000,
-      ubAllowance: 400,
+      unaccompaniedBaggageAllowance: 400,
     },
     agency: '',
   },

diff --git a/src/components/ShipmentTag/ShipmentTag.module.scss b/src/components/ShipmentTag/ShipmentTag.module.scss
@@ -34,4 +34,7 @@
   &.MobileHome {
     background-color: $accent-mobile-home;
   }
+  &.UB {
+    background-color: $accent-ub;
+  }
 }
diff --git a/src/pages/Office/AddShipment/AddShipment.jsx b/src/pages/Office/AddShipment/AddShipment.jsx
@@ -27,6 +27,8 @@ const AddShipment = () => {
     shipmentType = SHIPMENT_OPTIONS.BOAT;
   } else if (shipmentType === SHIPMENT_OPTIONS_URL.MOBILE_HOME) {
     shipmentType = SHIPMENT_OPTIONS.MOBILE_HOME;
+  } else if (shipmentType === SHIPMENT_OPTIONS_URL.UNACCOMPANIED_BAGGAGE) {
+    shipmentType = SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE;
   } else {
     shipmentType = SHIPMENT_OPTIONS[shipmentType];
   }

diff --git a/src/pages/Office/ServicesCounselingAddShipment/ServicesCounselingAddShipment.jsx b/src/pages/Office/ServicesCounselingAddShipment/ServicesCounselingAddShipment.jsx
@@ -27,6 +27,8 @@ const ServicesCounselingAddShipment = () => {
     shipmentType = SHIPMENT_OPTIONS.BOAT;
   } else if (shipmentType === SHIPMENT_OPTIONS_URL.MOBILE_HOME) {
     shipmentType = SHIPMENT_OPTIONS.MOBILE_HOME;
+  } else if (shipmentType === SHIPMENT_OPTIONS_URL.UNACCOMPANIED_BAGGAGE) {
+    shipmentType = SHIPMENT_OPTIONS.UNACCOMPANIED_BAGGAGE;
   } else {
     shipmentType = SHIPMENT_OPTIONS[shipmentType];
   }

diff --git a/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.jsx b/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.jsx
@@ -76,6 +76,8 @@ const ServicesCounselingMoveDetails = ({
   const [isCancelMoveModalVisible, setIsCancelMoveModalVisible] = useState(false);
   const [enableBoat, setEnableBoat] = useState(false);
   const [enableMobileHome, setEnableMobileHome] = useState(false);
+  const [enableUB, setEnableUB] = useState(false);
+  const [isOconusMove, setIsOconusMove] = useState(false);
   const { upload, amendedUpload } = useOrdersDocumentQueries(moveCode);
   const [errorMessage, setErrorMessage] = useState(null);
   const documentsForViewer = Object.values(upload || {})
@@ -90,7 +92,7 @@ const ServicesCounselingMoveDetails = ({
 
   const validOrdersDocuments = Object.values(orderDocuments || {})?.filter((file) => !file.deletedAt);
 
-  const { customer, entitlement: allowances } = order;
+  const { customer, entitlement: allowances, originDutyLocation, destinationDutyLocation } = order;
 
   const moveWeightTotal = calculateWeightRequested(mtoShipments);
 
@@ -169,10 +171,20 @@ const ServicesCounselingMoveDetails = ({
     const fetchData = async () => {
       setEnableBoat(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.BOAT));
       setEnableMobileHome(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.MOBILE_HOME));
+      setEnableUB(await isBooleanFlagEnabled(FEATURE_FLAG_KEYS.UNACCOMPANIED_BAGGAGE));
     };
     fetchData();
   }, []);
 
+  useEffect(() => {
+    // Check if either currentDutyLocation or newDutyLocation is OCONUS to conditionally render the UB shipment option
+    if (originDutyLocation?.address?.isOconus || destinationDutyLocation?.address?.isOconus) {
+      setIsOconusMove(true);
+    } else {
+      setIsOconusMove(false);
+    }
+  }, [originDutyLocation, destinationDutyLocation, isOconusMove, enableUB]);
+
   // for now we are only showing dest type on retiree and separatee orders
   const isRetirementOrSeparation =
     order.order_type === ORDERS_TYPE.RETIREMENT || order.order_type === ORDERS_TYPE.SEPARATION;
@@ -624,6 +636,7 @@ const ServicesCounselingMoveDetails = ({
         <option value={SHIPMENT_OPTIONS_URL.NTSrelease}>NTS-release</option>
         {enableBoat && <option value={SHIPMENT_OPTIONS_URL.BOAT}>Boat</option>}
         {enableMobileHome && <option value={SHIPMENT_OPTIONS_URL.MOBILE_HOME}>Mobile Home</option>}
+        {enableUB && isOconusMove && <option value={SHIPMENT_OPTIONS_URL.UNACCOMPANIED_BAGGAGE}>UB</option>}
       </>
     );
   };

diff --git a/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.test.jsx b/src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.test.jsx
@@ -16,6 +16,7 @@ import { useMoveDetailsQueries, useOrdersDocumentQueries } from 'hooks/queries';
 import { formatDateWithUTC } from 'shared/dates';
 import { MockProviders } from 'testUtils';
 import { updateMTOShipment, updateMoveStatusServiceCounselingCompleted } from 'services/ghcApi';
+import { isBooleanFlagEnabled } from 'utils/featureFlags';
 
 const mockRequestedMoveCode = 'LR4T8V';
 const mockRoutingParams = { moveCode: mockRequestedMoveCode };
@@ -38,6 +39,11 @@ jest.mock('services/ghcApi', () => ({
   updateMoveStatusServiceCounselingCompleted: jest.fn(),
 }));
 
+jest.mock('utils/featureFlags', () => ({
+  ...jest.requireActual('utils/featureFlags'),
+  isBooleanFlagEnabled: jest.fn().mockImplementation(() => Promise.resolve(false)),
+}));
+
 const mtoShipments = [
   {
     customerRemarks: 'please treat gently',
@@ -256,6 +262,7 @@ const newMoveDetailsQuery = {
         city: 'Fort Knox',
         state: 'KY',
         postalCode: '40121',
+        isOconus: true,
       },
     },
     destinationDutyLocation: {
@@ -1127,40 +1134,42 @@ describe('MoveDetails page', () => {
       });
 
       describe('shows the dropdown and navigates to each option', () => {
-        it.each([[SHIPMENT_OPTIONS_URL.HHG], [SHIPMENT_OPTIONS_URL.NTS], [SHIPMENT_OPTIONS_URL.NTSrelease]])(
-          'selects the %s option and navigates to the matching form for that shipment type',
-          async (shipmentType) => {
-            render(
-              <MockProviders
-                path={servicesCounselingRoutes.BASE_SHIPMENT_ADD_PATH}
-                params={{ moveCode: mockRequestedMoveCode, shipmentType }}
-              >
-                <ServicesCounselingMoveDetails
-                  setUnapprovedShipmentCount={jest.fn()}
-                  setMissingOrdersInfoCount={jest.fn()}
-                  setShipmentWarnConcernCount={jest.fn()}
-                  setShipmentErrorConcernCount={jest.fn()}
-                />
-                ,
-              </MockProviders>,
-            );
-
-            const path = `../${generatePath(servicesCounselingRoutes.SHIPMENT_ADD_PATH, {
-              moveCode: mockRequestedMoveCode,
-              shipmentType,
-            })}`;
+        it.each([
+          [SHIPMENT_OPTIONS_URL.HHG],
+          [SHIPMENT_OPTIONS_URL.NTS],
+          [SHIPMENT_OPTIONS_URL.NTSrelease],
+          [SHIPMENT_OPTIONS_URL.UNACCOMPANIED_BAGGAGE],
+        ])('selects the %s option and navigates to the matching form for that shipment type', async (shipmentType) => {
+          isBooleanFlagEnabled.mockImplementation(() => Promise.resolve(true));
+          render(
+            <MockProviders
+              path={servicesCounselingRoutes.BASE_SHIPMENT_ADD_PATH}
+              params={{ moveCode: mockRequestedMoveCode, shipmentType }}
+            >
+              <ServicesCounselingMoveDetails
+                setUnapprovedShipmentCount={jest.fn()}
+                setMissingOrdersInfoCount={jest.fn()}
+                setShipmentWarnConcernCount={jest.fn()}
+                setShipmentErrorConcernCount={jest.fn()}
+              />
+            </MockProviders>,
+          );
 
-            const buttonDropdown = await screen.findByRole('combobox');
+          const path = `../${generatePath(servicesCounselingRoutes.SHIPMENT_ADD_PATH, {
+            moveCode: mockRequestedMoveCode,
+            shipmentType,
+          })}`;
 
-            expect(buttonDropdown).toBeInTheDocument();
+          const buttonDropdown = await screen.findByRole('combobox');
 
-            await userEvent.selectOptions(buttonDropdown, shipmentType);
+          expect(buttonDropdown).toBeInTheDocument();
 
-            await waitFor(() => {
-              expect(mockNavigate).toHaveBeenCalledWith(path);
-            });
-          },
-        );
+          await userEvent.selectOptions(buttonDropdown, shipmentType);
+
+          await waitFor(() => {
+            expect(mockNavigate).toHaveBeenCalledWith(path);
+          });
+        });
       });
 
       it('shows the edit shipment buttons', async () => {