Skip to content

Commit

Permalink
Merge pull request #13685 from transcom/MAIN-B-19809
Browse files Browse the repository at this point in the history 
MAIN B-19809 update SC flag count to include missing orders info
  • Loading branch information
@cameroncaci
cameroncaci committed Sep 19, 2024
2 parents 4172faa + 51c8626 commit 0544e2a
Show file tree
Hide file tree
Showing 11 changed files with 216 additions and 34 deletions.
12 changes: 10 additions & 2 deletions src/components/Office/ServicesCounselingTabNav/ServicesCounselingTabNav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import 'styles/office.scss';
import TabNav from 'components/TabNav';
import { isBooleanFlagEnabled } from 'utils/featureFlags';

const ServicesCounselingTabNav = ({ unapprovedShipmentCount = 0, moveCode }) => {
const ServicesCounselingTabNav = ({ unapprovedShipmentCount = 0, missingOrdersInfoCount, moveCode }) => {
const [supportingDocsFF, setSupportingDocsFF] = React.useState(false);
React.useEffect(() => {
const fetchData = async () => {
Expand All @@ -19,6 +19,14 @@ const ServicesCounselingTabNav = ({ unapprovedShipmentCount = 0, moveCode }) =>
fetchData();
}, []);

let moveDetailsTagCount = 0;
if (unapprovedShipmentCount > 0) {
moveDetailsTagCount += unapprovedShipmentCount;
}
if (missingOrdersInfoCount > 0) {
moveDetailsTagCount += missingOrdersInfoCount;
}

const items = [
<NavLink
end
Expand All @@ -27,7 +35,7 @@ const ServicesCounselingTabNav = ({ unapprovedShipmentCount = 0, moveCode }) =>
data-testid="MoveDetails-Tab"
>
<span className="tab-title">Move details</span>
{unapprovedShipmentCount > 0 && <Tag>{unapprovedShipmentCount}</Tag>}
{moveDetailsTagCount > 0 && <Tag>{moveDetailsTagCount}</Tag>}
</NavLink>,
<NavLink
end
Expand Down
6 changes: 4 additions & 2 deletions src/components/Office/ServicesCounselingTabNav/ServicesCounselingTabNav.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { isBooleanFlagEnabled } from 'utils/featureFlags';

const basicNavProps = {
unapprovedShipmentCount: 0,
missingOrdersInfoCount: 0,
moveCode: 'TESTCO',
};

Expand All @@ -24,15 +25,16 @@ describe('Move details tag rendering', () => {
expect(within(moveDetailsTab).queryByTestId('tag')).not.toBeInTheDocument();
});

it('should render the move details tab container with a tag that shows the count of unapproved shipments', () => {
it('should render the move details tab container with a tag that shows the count of action items', () => {
const moveDetailsShipmentAndAmendedOrders = {
...basicNavProps,
unapprovedShipmentCount: 6,
missingOrdersInfoCount: 4,
};
render(<ServicesCounselingTabNav {...moveDetailsShipmentAndAmendedOrders} />, { wrapper: MemoryRouter });

const moveDetailsTab = screen.getByTestId('MoveDetails-Tab');
expect(within(moveDetailsTab).getByTestId('tag')).toHaveTextContent('6');
expect(within(moveDetailsTab).getByTestId('tag')).toHaveTextContent('10');
});
});

Expand Down
4 changes: 4 additions & 0 deletions src/components/Office/TXOTabNav/TXOTabNav.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const TXOTabNav = ({
excessWeightRiskCount,
pendingPaymentRequestCount,
unapprovedSITExtensionCount,
missingOrdersInfoCount,
shipmentsWithDeliveryAddressUpdateRequestedCount,
order,
moveCode,
Expand All @@ -39,6 +40,9 @@ const TXOTabNav = ({
if (shipmentsWithDeliveryAddressUpdateRequestedCount) {
moveDetailsTagCount += shipmentsWithDeliveryAddressUpdateRequestedCount;
}
if (missingOrdersInfoCount > 0) {
moveDetailsTagCount += missingOrdersInfoCount;
}

let moveTaskOrderTagCount = 0;
if (unapprovedServiceItemCount > 0) {
Expand Down
3 changes: 2 additions & 1 deletion src/components/Office/TXOTabNav/TXOTabNav.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,12 @@ describe('Move details tag rendering', () => {
const moveDetailsOneShipment = {
...basicNavProps,
unapprovedShipmentCount: 1,
missingOrdersInfoCount: 4,
};
render(<TXOTabNav {...moveDetailsOneShipment} />, { wrapper: MemoryRouter });

const moveDetailsTab = screen.getByTestId('MoveDetails-Tab');
expect(within(moveDetailsTab).getByTestId('tag')).toHaveTextContent('1');
expect(within(moveDetailsTab).getByTestId('tag')).toHaveTextContent('5');
});

it('should render the move details tab container with a tag that shows the count of items that need attention when there are approved shipments with a destination address update requiring TXO review', () => {
Expand Down
37 changes: 27 additions & 10 deletions src/pages/Office/MoveDetails/MoveDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ const MoveDetails = ({
setExcessWeightRiskCount,
setUnapprovedSITExtensionCount,
setShipmentsWithDeliveryAddressUpdateRequestedCount,
missingOrdersInfoCount,
setMissingOrdersInfoCount,
isMoveLocked,
}) => {
const { moveCode } = useParams();
Expand Down Expand Up @@ -238,6 +240,28 @@ const MoveDetails = ({
setShipmentMissingRequiredInformation(shipmentIsMissingInformation);
}, [mtoShipments]);

// using useMemo here due to this being used in a useEffect
// using useMemo prevents the useEffect from being rendered on ever render by memoizing the object
// so that it only recognizes the change when the orders object changes
const requiredOrdersInfo = useMemo(
() => ({
ordersNumber: order?.order_number || '',
ordersType: order?.order_type || '',
ordersTypeDetail: order?.order_type_detail || '',
tacMDC: order?.tac || '',
departmentIndicator: order?.department_indicator || '',
}),
[order],
);

// Keep num of missing orders info synced up
useEffect(() => {
const ordersInfoCount = Object.values(requiredOrdersInfo).reduce((count, value) => {
return !value ? count + 1 : count;
}, 0);
setMissingOrdersInfoCount(ordersInfoCount);
}, [order, requiredOrdersInfo, setMissingOrdersInfoCount]);

if (isLoading) return <LoadingPlaceholder />;
if (isError) return <SomethingWentWrong />;

Expand Down Expand Up @@ -294,13 +318,6 @@ const MoveDetails = ({
backupContact: customer.backup_contact,
};

const requiredOrdersInfo = {
ordersNumber: order.order_number,
ordersType: order.order_type,
ordersTypeDetail: order.order_type_detail,
tacMDC: order.tac,
};

const hasMissingOrdersRequiredInfo = Object.values(requiredOrdersInfo).some((value) => !value || value === '');
const hasAmendedOrders = ordersInfo.uploadedAmendedOrderID && !ordersInfo.amendedOrdersAcknowledgedAt;
const hasDestinationAddressUpdate =
Expand All @@ -311,12 +328,12 @@ const MoveDetails = ({
<div className={styles.container}>
<LeftNav sections={sections}>
<LeftNavTag
className="usa-tag usa-tag--alert"
background="#e34b11"
associatedSectionName="orders"
showTag={hasMissingOrdersRequiredInfo}
showTag={missingOrdersInfoCount !== 0}
testID="tag"
>
<FontAwesomeIcon icon="exclamation" />
{missingOrdersInfoCount}
</LeftNavTag>
<LeftNavTag
associatedSectionName="orders"
Expand Down
26 changes: 26 additions & 0 deletions src/pages/Office/MoveDetails/MoveDetails.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const setUnapprovedShipmentCount = jest.fn();
const setUnapprovedServiceItemCount = jest.fn();
const setExcessWeightRiskCount = jest.fn();
const setUnapprovedSITExtensionCount = jest.fn();
const setMissingOrdersInfoCount = jest.fn();

jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
Expand Down Expand Up @@ -360,6 +361,7 @@ const requestedMoveDetailsAmendedOrdersQuery = {
},
order: {
id: '1',
department_indicator: 'ARMY',
originDutyLocation: {
address: {
streetAddress1: '',
Expand Down Expand Up @@ -783,6 +785,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand All @@ -801,6 +805,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand All @@ -819,6 +825,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand Down Expand Up @@ -885,6 +893,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand All @@ -905,6 +915,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand All @@ -928,6 +940,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand Down Expand Up @@ -967,6 +981,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedServiceItemCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand All @@ -986,12 +1002,15 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={2}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);

it('renders an error indicator in the sidebar', () => {
expect(wrapper.find('a[href="#orders"] span[data-testid="tag"]').exists()).toBe(true);
expect(wrapper.find('a[href="#orders"] span[data-testid="tag"]').text()).toBe('2');
});
});

Expand All @@ -1006,6 +1025,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand All @@ -1025,6 +1046,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand All @@ -1039,6 +1062,7 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount,
setExcessWeightRiskCount,
setUnapprovedSITExtensionCount,
setMissingOrdersInfoCount,
};

it('renders the financial review flag button when user has permission', async () => {
Expand Down Expand Up @@ -1150,6 +1174,8 @@ describe('MoveDetails page', () => {
setUnapprovedServiceItemCount={setUnapprovedServiceItemCount}
setExcessWeightRiskCount={setExcessWeightRiskCount}
setUnapprovedSITExtensionCount={setUnapprovedSITExtensionCount}
missingOrdersInfoCount={0}
setMissingOrdersInfoCount={setMissingOrdersInfoCount}
/>
</MockProviders>,
);
Expand Down
44 changes: 32 additions & 12 deletions src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useState, useEffect, useMemo } from 'react';
import { Link, useParams, useNavigate, generatePath } from 'react-router-dom';
import { useQueryClient, useMutation } from '@tanstack/react-query';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { func } from 'prop-types';
import classnames from 'classnames';
import 'styles/office.scss';
Expand Down Expand Up @@ -42,7 +41,13 @@ import { objectIsMissingFieldWithCondition } from 'utils/displayFlags';
import { ReviewButton } from 'components/form/IconButtons';
import { calculateWeightRequested } from 'hooks/custom';

const ServicesCounselingMoveDetails = ({ infoSavedAlert, setUnapprovedShipmentCount, isMoveLocked }) => {
const ServicesCounselingMoveDetails = ({
infoSavedAlert,
setUnapprovedShipmentCount,
isMoveLocked,
missingOrdersInfoCount,
setMissingOrdersInfoCount,
}) => {
const { moveCode } = useParams();
const navigate = useNavigate();
const [alertMessage, setAlertMessage] = useState(null);
Expand Down Expand Up @@ -345,6 +350,20 @@ const ServicesCounselingMoveDetails = ({ infoSavedAlert, setUnapprovedShipmentCo
ntsSac: order.ntsSac,
};

// using useMemo here due to this being used in a useEffect
// using useMemo prevents the useEffect from being rendered on ever render by memoizing the object
// so that it only recognizes the change when the orders object changes
const requiredOrdersInfo = useMemo(
() => ({
ordersNumber: order?.order_number || '',
ordersType: order?.order_type || '',
ordersTypeDetail: order?.order_type_detail || '',
tacMDC: order?.tac || '',
departmentIndicator: order?.department_indicator || '',
}),
[order],
);

const handleButtonDropdownChange = (e) => {
const selectedOption = e.target.value;

Expand Down Expand Up @@ -412,6 +431,14 @@ const ServicesCounselingMoveDetails = ({ infoSavedAlert, setUnapprovedShipmentCo
setUnapprovedShipmentCount,
]);

// Keep num of missing orders info synced up
useEffect(() => {
const ordersInfoCount = Object.values(requiredOrdersInfo).reduce((count, value) => {
return !value ? count + 1 : count;
}, 0);
setMissingOrdersInfoCount(ordersInfoCount);
}, [order, requiredOrdersInfo, setMissingOrdersInfoCount]);

if (isLoading) return <LoadingPlaceholder />;
if (isError) return <SomethingWentWrong />;

Expand Down Expand Up @@ -454,13 +481,6 @@ const ServicesCounselingMoveDetails = ({ infoSavedAlert, setUnapprovedShipmentCo
return false;
};

const requiredOrdersInfo = {
ordersNumber: order.order_number,
ordersType: order.order_type,
ordersTypeDetail: order.order_type_detail,
tacMDC: order.tac,
};

const allShipmentsDeleted = mtoShipments.every((shipment) => !!shipment.deletedAt);
const hasMissingOrdersRequiredInfo = Object.values(requiredOrdersInfo).some((value) => !value || value === '');
const hasAmendedOrders = ordersInfo.uploadedAmendedOrderID && !ordersInfo.amendedOrdersAcknowledgedAt;
Expand All @@ -477,12 +497,12 @@ const ServicesCounselingMoveDetails = ({ infoSavedAlert, setUnapprovedShipmentCo
{shipmentConcernCount}
</LeftNavTag>
<LeftNavTag
className="usa-tag usa-tag--alert"
background="#e34b11"
associatedSectionName="orders"
showTag={hasMissingOrdersRequiredInfo}
showTag={missingOrdersInfoCount !== 0}
testID="tag"
>
<FontAwesomeIcon icon="exclamation" />
{missingOrdersInfoCount}
</LeftNavTag>
<LeftNavTag
associatedSectionName="orders"
Expand Down
Loading

0 comments on commit 0544e2a

Please sign in to comment.