Merge pull request #13845 from transcom/INT-B-20975-TOO-submits-MTO-a…

…nd-receives-incorrect-validation

INT-B-20975-TOO-submits-mto-and-receives-incorrect-validation

src/components/Office/AddOrdersForm/AddOrdersForm.jsx

@@ -11,6 +11,7 @@ import { ORDERS_PAY_GRADE_OPTIONS } from 'constants/orders';
 import { dropdownInputOptions } from 'utils/formatters';
 import WizardNavigation from 'components/Customer/WizardNavigation/WizardNavigation';
 import Callout from 'components/Callout';
+import ConnectedFlashMessage from 'containers/FlashMessage/FlashMessage';
 
 const AddOrdersForm = ({ onSubmit, ordersTypeOptions, initialValues, onBack, isSafetyMoveSelected }) => {
   const payGradeOptions = dropdownInputOptions(ORDERS_PAY_GRADE_OPTIONS);
@@ -37,6 +38,7 @@ const AddOrdersForm = ({ onSubmit, ordersTypeOptions, initialValues, onBack, isS
         const isRetirementOrSeparation = ['RETIREMENT', 'SEPARATION'].includes(values.ordersType);
         return (
           <Form className={`${formStyles.form}`}>
+            <ConnectedFlashMessage />
             <h1>Tell us about the orders</h1>
 
             <SectionWrapper className={formStyles.formSection}>

src/components/Office/AddOrdersForm/AddOrdersForm.test.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { render, waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
 
 import AddOrdersForm from './AddOrdersForm';
 
 import { dropdownInputOptions } from 'utils/formatters';
 import { ORDERS_PAY_GRADE_OPTIONS } from 'constants/orders';
+import { configureStore } from 'shared/store';
 
 describe('CreateMoveCustomerInfo Component', () => {
+  const mockStore = configureStore({});
   const initialValues = {
     ordersType: '',
     issueDate: '',
@@ -25,7 +28,11 @@ describe('CreateMoveCustomerInfo Component', () => {
   };
 
   it('renders the form inputs', async () => {
-    render(<AddOrdersForm {...testProps} />);
+    render(
+      <Provider store={mockStore.store}>
+        <AddOrdersForm {...testProps} />
+      </Provider>,
+    );
 
     await waitFor(() => {
       expect(screen.getByText('Tell us about the orders')).toBeInTheDocument();
@@ -42,7 +49,11 @@ describe('CreateMoveCustomerInfo Component', () => {
   });
 
   it('shows an error message if trying to submit an invalid form', async () => {
-    const { getByRole, findAllByRole, getByLabelText } = render(<AddOrdersForm {...testProps} />);
+    const { getByRole, findAllByRole, getByLabelText } = render(
+      <Provider store={mockStore.store}>
+        <AddOrdersForm {...testProps} />
+      </Provider>,
+    );
     await userEvent.click(getByLabelText('Orders type'));
     await userEvent.click(getByLabelText('Orders date'));
     await userEvent.click(getByLabelText('Report by date'));

src/components/Office/RequestedShipments/RequestedShipments.test.jsx

@@ -3,6 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generatePath } from 'react-router-dom';
+import { Provider } from 'react-redux';
 
 import {
   shipments,
@@ -24,6 +25,7 @@ import { SHIPMENT_OPTIONS_URL } from 'shared/constants';
 import { tooRoutes } from 'constants/routes';
 import { MockProviders } from 'testUtils';
 import { permissionTypes } from 'constants/permissions';
+import { configureStore } from 'shared/store';
 
 const mockNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
@@ -49,17 +51,20 @@ const moveTaskOrderServicesCounselingCompleted = {
 };
 
 const approveMTO = jest.fn().mockResolvedValue({ response: { status: 200 } });
+const mockStore = configureStore({});
 
 const submittedRequestedShipmentsComponent = (
-  <SubmittedRequestedShipments
-    allowancesInfo={allowancesInfo}
-    moveCode="TE5TC0DE"
-    mtoShipments={shipments}
-    closeoutOffice={closeoutOffice}
-    customerInfo={customerInfo}
-    ordersInfo={ordersInfo}
-    approveMTO={approveMTO}
-  />
+  <Provider store={mockStore.store}>
+    <SubmittedRequestedShipments
+      allowancesInfo={allowancesInfo}
+      moveCode="TE5TC0DE"
+      mtoShipments={shipments}
+      closeoutOffice={closeoutOffice}
+      customerInfo={customerInfo}
+      ordersInfo={ordersInfo}
+      approveMTO={approveMTO}
+    />
+  </Provider>
 );
 
 const submittedRequestedShipmentsComponentWithPermission = (
@@ -106,16 +111,18 @@ const submittedRequestedShipmentsComponentAvailableToPrimeAt = (
 );
 
 const submittedRequestedShipmentsComponentServicesCounselingCompleted = (
-  <SubmittedRequestedShipments
-    ordersInfo={ordersInfo}
-    allowancesInfo={allowancesInfo}
-    customerInfo={customerInfo}
-    mtoShipments={shipments}
-    closeoutOffice={closeoutOffice}
-    approveMTO={approveMTO}
-    moveTaskOrder={moveTaskOrderServicesCounselingCompleted}
-    moveCode="TE5TC0DE"
-  />
+  <Provider store={mockStore.store}>
+    <SubmittedRequestedShipments
+      ordersInfo={ordersInfo}
+      allowancesInfo={allowancesInfo}
+      customerInfo={customerInfo}
+      mtoShipments={shipments}
+      closeoutOffice={closeoutOffice}
+      approveMTO={approveMTO}
+      moveTaskOrder={moveTaskOrderServicesCounselingCompleted}
+      moveCode="TE5TC0DE"
+    />
+  </Provider>
 );
 
 const submittedRequestedShipmentsComponentMissingRequiredInfo = (
@@ -429,11 +436,14 @@ describe('RequestedShipments', () => {
 
         const Component = statusComponents[status];
 
-        render(<Component {...statusTestProps[status]} />);
+        render(
+          <Provider store={mockStore.store}>
+            <Component {...statusTestProps[status]} />
+          </Provider>,
+        );
 
         const customerRemarks = screen.getAllByTestId('customerRemarks');
         const counselorRemarks = screen.getAllByTestId('counselorRemarks');
-
         expect(customerRemarks.at(0).textContent).toBe('please treat gently');
         expect(customerRemarks.at(1).textContent).toBe('please treat gently');
 

src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx

@@ -4,6 +4,7 @@ import * as PropTypes from 'prop-types';
 import { Button, Checkbox, Fieldset } from '@trussworks/react-uswds';
 import { generatePath, useParams, useNavigate } from 'react-router-dom';
 import { debounce } from 'lodash';
+import { connect } from 'react-redux';
 
 import styles from './RequestedShipments.module.scss';
 
@@ -23,6 +24,7 @@ import { ShipmentShape } from 'types/shipment';
 import { fieldValidationShape } from 'utils/displayFlags';
 import ButtonDropdown from 'components/ButtonDropdown/ButtonDropdown';
 import { SHIPMENT_OPTIONS_URL } from 'shared/constants';
+import { setFlashMessage as setFlashMessageAction } from 'store/flash/actions';
 
 // nts defaults show preferred pickup date and pickup address, flagged items when collapsed
 // ntsr defaults shows preferred delivery date, storage facility address, destination address, flagged items when collapsed
@@ -52,6 +54,7 @@ const SubmittedRequestedShipments = ({
   displayDestinationType,
   mtoServiceItems,
   isMoveLocked,
+  setFlashMessage,
 }) => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [filteredShipments, setFilteredShipments] = useState([]);
@@ -137,11 +140,13 @@ const SubmittedRequestedShipments = ({
                       onError: () => {
                         // TODO: Decide if we want to display an error notice, log error event, or retry
                         setSubmitting(false);
+                        setFlashMessage(null);
                       },
                     },
                   );
                 }),
               );
+              setFlashMessage('TASK_ORDER_CREATE_SUCCESS', 'success', 'Task order created successfully.');
               handleAfterSuccess('../mto', { showMTOpostedMessage: true });
             } catch {
               setSubmitting(false);
@@ -374,4 +379,7 @@ SubmittedRequestedShipments.defaultProps = {
   mtoServiceItems: [],
 };
 
-export default SubmittedRequestedShipments;
+const mapDispatchToProps = {
+  setFlashMessage: setFlashMessageAction,
+};
+export default connect(() => ({}), mapDispatchToProps)(SubmittedRequestedShipments);

src/pages/Office/CustomerOnboarding/CreateCustomerForm.jsx

@@ -29,8 +29,9 @@ import { isBooleanFlagEnabled } from 'utils/featureFlags';
 import departmentIndicators from 'constants/departmentIndicators';
 import { generateUniqueDodid, generateUniqueEmplid } from 'utils/customer';
 import Hint from 'components/Hint';
+import { setCanAddOrders as setCanAddOrdersAction } from 'store/general/actions';
 
-export const CreateCustomerForm = ({ userPrivileges, setFlashMessage }) => {
+export const CreateCustomerForm = ({ userPrivileges, setFlashMessage, setCanAddOrders }) => {
   const [serverError, setServerError] = useState(null);
   const [showEmplid, setShowEmplid] = useState(false);
   const [isSafetyMove, setIsSafetyMove] = useState(false);
@@ -133,6 +134,7 @@ export const CreateCustomerForm = ({ userPrivileges, setFlashMessage }) => {
     return createCustomerWithOktaOption({ body })
       .then((res) => {
         const customerId = Object.keys(res.createdCustomer)[0];
+        setCanAddOrders(true);
         setFlashMessage('CUSTOMER_CREATE_SUCCESS', 'success', `Customer created successfully.`);
         navigate(
           generatePath(servicesCounselingRoutes.BASE_CUSTOMERS_ORDERS_ADD_PATH, {
@@ -555,6 +557,7 @@ export const CreateCustomerForm = ({ userPrivileges, setFlashMessage }) => {
 
 const mapDispatchToProps = {
   setFlashMessage: setFlashMessageAction,
+  setCanAddOrders: setCanAddOrdersAction,
 };
 
 export default connect(() => ({}), mapDispatchToProps)(CreateCustomerForm);

src/pages/Office/CustomerOnboarding/CreateCustomerForm.test.jsx

@@ -23,7 +23,6 @@ jest.mock('services/ghcApi', () => ({
 }));
 
 jest.mock('store/flash/actions', () => ({
-  ...jest.requireActual('store/flash/actions'),
   setFlashMessage: jest.fn(),
 }));
 
@@ -32,6 +31,10 @@ jest.mock('utils/featureFlags', () => ({
   isBooleanFlagEnabled: jest.fn().mockImplementation(() => Promise.resolve(false)),
 }));
 
+jest.mock('store/general/actions', () => ({
+  setCanAddOrders: jest.fn(),
+}));
+
 beforeEach(jest.resetAllMocks);
 
 const fakePayload = {
@@ -169,6 +172,7 @@ const mockUserPrivileges = [
 
 const testProps = {
   setFlashMessage: jest.fn(),
+  setCanAddOrders: jest.fn(),
   userPrivileges: mockUserPrivileges,
 };
 
@@ -337,6 +341,7 @@ describe('CreateCustomerForm', () => {
 
     await waitFor(() => {
       expect(createCustomerWithOktaOption).toHaveBeenCalled();
+      expect(testProps.setCanAddOrders).toHaveBeenCalledWith(true);
       expect(mockNavigate).toHaveBeenCalledWith(ordersPath, {
         state: {
           isSafetyMoveSelected: false,