From 29c00326fed10955922d8b5b023f94734d494aa7 Mon Sep 17 00:00:00 2001 From: KonstanceH Date: Wed, 2 Oct 2024 16:53:07 +0000 Subject: [PATCH 1/7] moved button to the right and to align with SC button --- src/pages/Office/MoveDetails/MoveDetails.jsx | 50 +++++++++---------- .../Office/TXOMoveInfo/TXOTab.module.scss | 17 +++++++ 2 files changed, 42 insertions(+), 25 deletions(-) diff --git a/src/pages/Office/MoveDetails/MoveDetails.jsx b/src/pages/Office/MoveDetails/MoveDetails.jsx index e2fb69d7450..4738c7c35b2 100644 --- a/src/pages/Office/MoveDetails/MoveDetails.jsx +++ b/src/pages/Office/MoveDetails/MoveDetails.jsx @@ -6,7 +6,6 @@ import { useQueryClient, useMutation } from '@tanstack/react-query'; import { func } from 'prop-types'; import styles from '../TXOMoveInfo/TXOTab.module.scss'; -import 'styles/office.scss'; import hasRiskOfExcess from 'utils/hasRiskOfExcess'; import { MOVES, MTO_SERVICE_ITEMS, MTO_SHIPMENTS } from 'constants/queryKeys'; @@ -387,32 +386,33 @@ const MoveDetails = ({ initialSelection={move?.financialReviewFlag} /> )} - - {alertMessage && ( - - - {alertMessage} - - - )} - + {alertMessage && ( + + + {alertMessage} + + + )} {!isMoveLocked && ( - - - - - - - +
+ + + + + + + +
)} {submittedShipments?.length > 0 && ( diff --git a/src/pages/Office/TXOMoveInfo/TXOTab.module.scss b/src/pages/Office/TXOMoveInfo/TXOTab.module.scss index 5b3f7f1fe11..50465a7f999 100644 --- a/src/pages/Office/TXOMoveInfo/TXOTab.module.scss +++ b/src/pages/Office/TXOMoveInfo/TXOTab.module.scss @@ -27,11 +27,22 @@ @include u-margin-bottom(4); } + .div { + justify-content: flex-end; + float: right; + padding-right: 15px; + } + + .buttonDropdown { + margin-left: auto; + } + .tooMoveDetailsHeadingFlexbox { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; + padding-bottom: 30px; } .tooMoveDetailsH1 { @@ -122,6 +133,12 @@ border: 1px solid #dfe1e2; } +.buttonDropdown { + display: flex; + justify-content: flex-end; + padding: 0; +} + .section + .section, .shipmentCard + .shipmentCard { @include u-margin-top(4); From 78bb6778aaedc42e26397e39b894185df7e8b697 Mon Sep 17 00:00:00 2001 From: KonstanceH Date: Wed, 2 Oct 2024 17:45:25 +0000 Subject: [PATCH 2/7] accidentally removed boat from options --- src/pages/Office/MoveDetails/MoveDetails.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Office/MoveDetails/MoveDetails.jsx b/src/pages/Office/MoveDetails/MoveDetails.jsx index 4738c7c35b2..aa114907743 100644 --- a/src/pages/Office/MoveDetails/MoveDetails.jsx +++ b/src/pages/Office/MoveDetails/MoveDetails.jsx @@ -411,6 +411,7 @@ const MoveDetails = ({ + From 3b236efe30e6eedf4c7d54ae825f95d0bd99bf66 Mon Sep 17 00:00:00 2001 From: KonstanceH Date: Thu, 3 Oct 2024 04:42:17 +0000 Subject: [PATCH 3/7] added a couple tests --- .../Office/MoveDetails/MoveDetails.test.jsx | 69 ++++++++++++++++++- 1 file changed, 66 insertions(+), 3 deletions(-) diff --git a/src/pages/Office/MoveDetails/MoveDetails.test.jsx b/src/pages/Office/MoveDetails/MoveDetails.test.jsx index cdd708ea659..1f599d25bf5 100644 --- a/src/pages/Office/MoveDetails/MoveDetails.test.jsx +++ b/src/pages/Office/MoveDetails/MoveDetails.test.jsx @@ -1,7 +1,9 @@ /* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; +import { generatePath } from 'react-router-dom'; import { mount } from 'enzyme'; -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { ORDERS_TYPE, ORDERS_TYPE_DETAILS } from '../../../constants/orders'; @@ -10,6 +12,8 @@ import MoveDetails from './MoveDetails'; import { MockProviders } from 'testUtils'; import { useMoveDetailsQueries } from 'hooks/queries'; import { permissionTypes } from 'constants/permissions'; +import { SHIPMENT_OPTIONS_URL } from 'shared/constants'; +import { tooRoutes } from 'constants/routes'; jest.mock('hooks/queries', () => ({ useMoveDetailsQueries: jest.fn(), @@ -20,11 +24,14 @@ const setUnapprovedServiceItemCount = jest.fn(); const setExcessWeightRiskCount = jest.fn(); const setUnapprovedSITExtensionCount = jest.fn(); const setMissingOrdersInfoCount = jest.fn(); +const setShipmentErrorConcernCount = jest.fn(); +const mockNavigate = jest.fn(); +const mockRequestedMoveCode = 'TE5TC0DE'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), - useParams: () => ({ moveCode: 'TE5TC0DE' }), - useLocation: jest.fn(), + useParams: () => ({ moveCode: mockRequestedMoveCode }), + useNavigate: () => mockNavigate, })); const requestedMoveDetailsQuery = { @@ -1096,6 +1103,16 @@ describe('MoveDetails page', () => { expect(screen.queryByRole('link', { name: 'View orders' })).not.toBeInTheDocument(); }); + it('renders add new shipment button when user has permission', async () => { + render( + + + , + ); + + expect(await screen.getByRole('combobox', { name: 'Add a new shipment' })).toBeInTheDocument(); + }); + it('renders view orders button if user does not have permission to update', async () => { render( @@ -1183,4 +1200,50 @@ describe('MoveDetails page', () => { expect(screen.queryByText('Something went wrong')).not.toBeInTheDocument(); }); }); + + describe('shows the dropdown and navigates to each option', () => { + it.each([ + [ + SHIPMENT_OPTIONS_URL.HHG, + SHIPMENT_OPTIONS_URL.NTS, + SHIPMENT_OPTIONS_URL.NTSrelease, + SHIPMENT_OPTIONS_URL.MOBILE_HOME, + SHIPMENT_OPTIONS_URL.BOAT, + ], + ])('selects the %s option and navigates to the matching form for that shipment type', async (shipmentType) => { + render( + + + , + , + ); + + const path = `${generatePath(tooRoutes.SHIPMENT_ADD_PATH, { + moveCode: mockRequestedMoveCode, + shipmentType, + })}`; + + const buttonDropdown = await screen.findByRole('combobox'); + + expect(buttonDropdown).toBeInTheDocument(); + + await userEvent.selectOptions(buttonDropdown, shipmentType); + + await waitFor(() => { + expect(mockNavigate).toHaveBeenCalledWith(path); + }); + }); + }); }); From e29b55e96686195b2c203b557f338d7791c33098 Mon Sep 17 00:00:00 2001 From: KonstanceH Date: Wed, 9 Oct 2024 20:15:42 +0000 Subject: [PATCH 4/7] added in review change and tests --- .../ApprovedRequestedShipments.jsx | 47 +++++- .../RequestedShipments.module.scss | 8 + .../RequestedShipments.test.jsx | 144 +++++++++++++++--- .../SubmittedRequestedShipments.jsx | 44 +++++- src/pages/Office/MoveDetails/MoveDetails.jsx | 38 +---- .../Office/MoveDetails/MoveDetails.test.jsx | 53 +------ 6 files changed, 220 insertions(+), 114 deletions(-) diff --git a/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx b/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx index e181bcc952e..1c06b0e47fb 100644 --- a/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx +++ b/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx @@ -1,6 +1,6 @@ import React from 'react'; import * as PropTypes from 'prop-types'; -import { generatePath } from 'react-router-dom'; +import { generatePath, useParams, useNavigate } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import styles from './RequestedShipments.module.scss'; @@ -14,6 +14,10 @@ import shipmentCardsStyles from 'styles/shipmentCards.module.scss'; import { MTOServiceItemShape, OrdersInfoShape } from 'types/order'; import { ShipmentShape } from 'types/shipment'; import { formatDateFromIso } from 'utils/formatters'; +import ButtonDropdown from 'components/ButtonDropdown/ButtonDropdown'; +import { SHIPMENT_OPTIONS_URL } from 'shared/constants'; +import Restricted from 'components/Restricted/Restricted'; +import { permissionTypes } from 'constants/permissions'; // 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 @@ -66,11 +70,52 @@ const ApprovedRequestedShipments = ({ }; }; + const { moveCode } = useParams(); + const navigate = useNavigate(); + const handleButtonDropdownChange = (e) => { + const selectedOption = e.target.value; + + const addShipmentPath = `${generatePath(tooRoutes.SHIPMENT_ADD_PATH, { + moveCode, + shipmentType: selectedOption, + })}`; + + navigate(addShipmentPath); + }; + const dutyLocationPostal = { postalCode: ordersInfo.newDutyLocation?.address?.postalCode }; return (

Approved Shipments

+
+ {!isMoveLocked && ( + + + + + + + + + + + + )} +
+
{mtoShipments && mtoShipments.map((shipment) => { diff --git a/src/components/Office/RequestedShipments/RequestedShipments.module.scss b/src/components/Office/RequestedShipments/RequestedShipments.module.scss index 0c6ae8d3f66..11c79a42cf8 100644 --- a/src/components/Office/RequestedShipments/RequestedShipments.module.scss +++ b/src/components/Office/RequestedShipments/RequestedShipments.module.scss @@ -55,3 +55,11 @@ .serviceCounselingCompleted { @include u-margin-top(3); } + +.dropdownButton { + float: right; +} + +.scFinancialReviewContainer { + @include u-margin-bottom(3); +} diff --git a/src/components/Office/RequestedShipments/RequestedShipments.test.jsx b/src/components/Office/RequestedShipments/RequestedShipments.test.jsx index 2dd12b87ee9..4b6230ec3d4 100644 --- a/src/components/Office/RequestedShipments/RequestedShipments.test.jsx +++ b/src/components/Office/RequestedShipments/RequestedShipments.test.jsx @@ -2,6 +2,7 @@ import React from 'react'; 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 { shipments, @@ -19,12 +20,15 @@ import { import ApprovedRequestedShipments from './ApprovedRequestedShipments'; import SubmittedRequestedShipments from './SubmittedRequestedShipments'; +import { SHIPMENT_OPTIONS_URL } from 'shared/constants'; +import { tooRoutes } from 'constants/routes'; import { MockProviders } from 'testUtils'; import { permissionTypes } from 'constants/permissions'; +const mockNavigate = jest.fn(); jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), - useNavigate: () => jest.fn(), + useNavigate: () => mockNavigate, })); const moveTaskOrder = { @@ -115,7 +119,7 @@ const submittedRequestedShipmentsComponentServicesCounselingCompleted = ( ); const submittedRequestedShipmentsComponentMissingRequiredInfo = ( - + ); +const submittedRequestedShipmentsCanCreateNewShipment = ( + + + +); + +const testProps = { + ordersInfo, + allowancesInfo, + customerInfo, + mtoShipments: shipments, + approveMTO, + mtoServiceItems: [], + moveCode: 'TE5TC0DE', +}; + describe('RequestedShipments', () => { describe('Prime-handled shipments', () => { it('renders the container successfully without services counseling completed', () => { @@ -215,6 +244,12 @@ describe('RequestedShipments', () => { expect(container.querySelector('#approvalConfirmationModal')).toHaveStyle('display: block'); }); + it('renders Add a new shjipment Button', async () => { + render(submittedRequestedShipmentsCanCreateNewShipment); + + expect(await screen.getByRole('combobox', { name: 'Add a new shipment' })).toBeInTheDocument(); + }); + it('disables the Approve selected button when there is missing required information', async () => { const { container } = render(submittedRequestedShipmentsComponentMissingRequiredInfo); @@ -226,6 +261,8 @@ describe('RequestedShipments', () => { ); }); + expect(await screen.getByRole('combobox', { name: 'Add a new shipment' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Approve selected' })).toBeDisabled(); await act(async () => { @@ -417,15 +454,6 @@ describe('RequestedShipments', () => { }); describe('Permission dependent rendering', () => { - const testProps = { - ordersInfo, - allowancesInfo, - customerInfo, - mtoShipments: shipments, - approveMTO, - mtoServiceItems: [], - moveCode: 'TE5TC0DE', - }; it('renders the "Add service items to move" section when user has permission', () => { render( @@ -449,6 +477,76 @@ describe('RequestedShipments', () => { }); }); + describe('shows the dropdown and navigates to each option when mtoshipments are submitted', () => { + it.each([ + [ + SHIPMENT_OPTIONS_URL.HHG, + SHIPMENT_OPTIONS_URL.NTS, + SHIPMENT_OPTIONS_URL.NTSrelease, + SHIPMENT_OPTIONS_URL.MOBILE_HOME, + SHIPMENT_OPTIONS_URL.BOAT, + ], + ])('selects the %s option and navigates to the matching form for that shipment type', async (shipmentType) => { + render( + + , + , + ); + + const path = `${generatePath(tooRoutes.SHIPMENT_ADD_PATH, { + moveCode: 'TE5TC0DE', + shipmentType, + })}`; + + const buttonDropdown = await screen.findByRole('combobox'); + + expect(buttonDropdown).toBeInTheDocument(); + + await userEvent.selectOptions(buttonDropdown, shipmentType); + + expect(mockNavigate).toHaveBeenCalledWith(path); + }); + }); + + describe('shows the dropdown and navigates to each option when mtoshipments are approved', () => { + it.each([ + [ + SHIPMENT_OPTIONS_URL.HHG, + SHIPMENT_OPTIONS_URL.NTS, + SHIPMENT_OPTIONS_URL.NTSrelease, + SHIPMENT_OPTIONS_URL.MOBILE_HOME, + SHIPMENT_OPTIONS_URL.BOAT, + ], + ])('selects the %s option and navigates to the matching form for that shipment type', async (shipmentType) => { + render( + + , + , + ); + + const path = `${generatePath(tooRoutes.SHIPMENT_ADD_PATH, { + moveCode: 'TE5TC0DE', + shipmentType, + })}`; + + const buttonDropdown = await screen.findByRole('combobox'); + + expect(buttonDropdown).toBeInTheDocument(); + + await userEvent.selectOptions(buttonDropdown, shipmentType); + + expect(mockNavigate).toHaveBeenCalledWith(path); + }); + }); + describe('Conditional form display', () => { const renderComponent = (props) => { render( @@ -465,36 +563,36 @@ describe('RequestedShipments', () => { moveCode: 'TE5TC0DE', }; it('does not render the "Add service items to move" section when both service items are present', () => { - const testProps = { + const testPropsMsCs = { mtoServiceItems: serviceItemsMSandCS, mtoShipments: shipments, ...conditionalFormTestProps, }; - renderComponent(testProps); + renderComponent(testPropsMsCs); expect(screen.queryByText('Add service items to this move')).not.toBeInTheDocument(); expect(screen.getByText('Approve selected')).toBeInTheDocument(); }); it('does not render the "Add service items to move" section when counseling is present and all shipments are PPM', () => { - const testProps = { + const testPropsCS = { mtoServiceItems: serviceItemsCS, mtoShipments: ppmOnlyShipments, ...conditionalFormTestProps, }; - renderComponent(testProps); + renderComponent(testPropsCS); expect(screen.queryByText('Add service items to this move')).not.toBeInTheDocument(); expect(screen.getByText('Approve selected')).toBeInTheDocument(); }); it('renders the "Add service items to move" section with only counseling when only move management is present in service items', () => { - const testProps = { + const testPropsMS = { mtoServiceItems: serviceItemsMS, mtoShipments: shipments, ...conditionalFormTestProps, }; - renderComponent(testProps); + renderComponent(testPropsMS); expect(screen.getByText('Add service items to this move')).toBeInTheDocument(); expect(screen.getByText('Approve selected')).toBeInTheDocument(); @@ -503,12 +601,12 @@ describe('RequestedShipments', () => { }); it('renders the "Add service items to move" section with only move management when only counseling is present in service items', () => { - const testProps = { + const testPropsCS = { mtoServiceItems: serviceItemsCS, mtoShipments: shipments, ...conditionalFormTestProps, }; - renderComponent(testProps); + renderComponent(testPropsCS); expect(screen.getByText('Add service items to this move')).toBeInTheDocument(); expect(screen.getByText('Approve selected')).toBeInTheDocument(); @@ -517,12 +615,12 @@ describe('RequestedShipments', () => { }); it('renders the "Add service items to move" section with all fields when neither counseling nor move management is present in service items', () => { - const testProps = { + const testPropsServiceItemsEmpty = { mtoServiceItems: serviceItemsEmpty, mtoShipments: shipments, ...conditionalFormTestProps, }; - renderComponent(testProps); + renderComponent(testPropsServiceItemsEmpty); expect(screen.getByText('Add service items to this move')).toBeInTheDocument(); expect(screen.getByText('Approve selected')).toBeInTheDocument(); @@ -531,12 +629,12 @@ describe('RequestedShipments', () => { }); it('renders the "Add service items to move" section with only counseling when all shipments are PPM', () => { - const testProps = { + const testPropsServiceItemsEmpty = { mtoServiceItems: serviceItemsEmpty, mtoShipments: ppmOnlyShipments, ...conditionalFormTestProps, }; - renderComponent(testProps); + renderComponent(testPropsServiceItemsEmpty); expect(screen.getByText('Add service items to this move')).toBeInTheDocument(); expect(screen.getByText('Approve selected')).toBeInTheDocument(); diff --git a/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx b/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx index bf847cb57cb..54206d79e69 100644 --- a/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx +++ b/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx @@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react'; import { useFormik } from 'formik'; import * as PropTypes from 'prop-types'; import { Button, Checkbox, Fieldset } from '@trussworks/react-uswds'; -import { generatePath } from 'react-router-dom'; +import { generatePath, useParams, useNavigate } from 'react-router-dom'; import { debounce } from 'lodash'; import styles from './RequestedShipments.module.scss'; @@ -21,6 +21,8 @@ import shipmentCardsStyles from 'styles/shipmentCards.module.scss'; import { MoveTaskOrderShape, MTOServiceItemShape, OrdersInfoShape } from 'types/order'; import { ShipmentShape } from 'types/shipment'; import { fieldValidationShape } from 'utils/displayFlags'; +import ButtonDropdown from 'components/ButtonDropdown/ButtonDropdown'; +import { SHIPMENT_OPTIONS_URL } from 'shared/constants'; // 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 @@ -67,6 +69,19 @@ const SubmittedRequestedShipments = ({ ntsSac: ordersInfo.NTSsac, }; + const { moveCode } = useParams(); + const navigate = useNavigate(); + const handleButtonDropdownChange = (e) => { + const selectedOption = e.target.value; + + const addShipmentPath = `${generatePath(tooRoutes.SHIPMENT_ADD_PATH, { + moveCode, + shipmentType: selectedOption, + })}`; + + navigate(addShipmentPath); + }; + const shipmentDisplayInfo = (shipment, dutyLocationPostal) => { const destType = displayDestinationType ? shipmentDestinationTypes[shipment.destinationType] : null; @@ -204,6 +219,33 @@ const SubmittedRequestedShipments = ({

Requested shipments

+
+ {!isMoveLocked && ( + + + + + + + + + + + + )} +
{mtoShipments && mtoShipments.map((shipment) => { diff --git a/src/pages/Office/MoveDetails/MoveDetails.jsx b/src/pages/Office/MoveDetails/MoveDetails.jsx index aa114907743..da7b8f2d859 100644 --- a/src/pages/Office/MoveDetails/MoveDetails.jsx +++ b/src/pages/Office/MoveDetails/MoveDetails.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from 'react'; -import { generatePath, Link, useNavigate, useParams } from 'react-router-dom'; +import { Link, useNavigate, useParams } from 'react-router-dom'; import { Alert, Grid, GridContainer } from '@trussworks/react-uswds'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useQueryClient, useMutation } from '@tanstack/react-query'; @@ -14,7 +14,6 @@ import SERVICE_ITEM_STATUSES from 'constants/serviceItems'; import { ADDRESS_UPDATE_STATUS, shipmentStatuses } from 'constants/shipments'; import AllowancesList from 'components/Office/DefinitionLists/AllowancesList'; import CustomerInfoList from 'components/Office/DefinitionLists/CustomerInfoList'; -import ButtonDropdown from 'components/ButtonDropdown/ButtonDropdown'; import OrdersList from 'components/Office/DefinitionLists/OrdersList'; import DetailsPanel from 'components/Office/DetailsPanel/DetailsPanel'; import FinancialReviewButton from 'components/Office/FinancialReviewButton/FinancialReviewButton'; @@ -28,7 +27,6 @@ import LeftNavTag from 'components/LeftNavTag/LeftNavTag'; import Restricted from 'components/Restricted/Restricted'; import LoadingPlaceholder from 'shared/LoadingPlaceholder'; import SomethingWentWrong from 'shared/SomethingWentWrong'; -import { SHIPMENT_OPTIONS_URL } from 'shared/constants'; import { SIT_EXTENSION_STATUS } from 'constants/sitExtensions'; import { ORDERS_TYPE } from 'constants/orders'; import { permissionTypes } from 'constants/permissions'; @@ -158,17 +156,6 @@ const MoveDetails = ({ (shipment) => shipment?.deliveryAddressUpdate?.status === ADDRESS_UPDATE_STATUS.REQUESTED && !shipment.deletedAt, ); - const handleButtonDropdownChange = (e) => { - const selectedOption = e.target.value; - - const addShipmentPath = `${generatePath(tooRoutes.SHIPMENT_ADD_PATH, { - moveCode, - shipmentType: selectedOption, - })}`; - - navigate(addShipmentPath); - }; - useEffect(() => { const shipmentCount = shipmentWithDestinationAddressChangeRequest?.length || 0; if (setShipmentsWithDeliveryAddressUpdateRequestedCount) @@ -393,29 +380,6 @@ const MoveDetails = ({ )} - {!isMoveLocked && ( - -
- - - - - - - - -
- - )} {submittedShipments?.length > 0 && (
({ useMoveDetailsQueries: jest.fn(), @@ -24,7 +20,6 @@ const setUnapprovedServiceItemCount = jest.fn(); const setExcessWeightRiskCount = jest.fn(); const setUnapprovedSITExtensionCount = jest.fn(); const setMissingOrdersInfoCount = jest.fn(); -const setShipmentErrorConcernCount = jest.fn(); const mockNavigate = jest.fn(); const mockRequestedMoveCode = 'TE5TC0DE'; @@ -1200,50 +1195,4 @@ describe('MoveDetails page', () => { expect(screen.queryByText('Something went wrong')).not.toBeInTheDocument(); }); }); - - describe('shows the dropdown and navigates to each option', () => { - it.each([ - [ - SHIPMENT_OPTIONS_URL.HHG, - SHIPMENT_OPTIONS_URL.NTS, - SHIPMENT_OPTIONS_URL.NTSrelease, - SHIPMENT_OPTIONS_URL.MOBILE_HOME, - SHIPMENT_OPTIONS_URL.BOAT, - ], - ])('selects the %s option and navigates to the matching form for that shipment type', async (shipmentType) => { - render( - - - , - , - ); - - const path = `${generatePath(tooRoutes.SHIPMENT_ADD_PATH, { - moveCode: mockRequestedMoveCode, - shipmentType, - })}`; - - const buttonDropdown = await screen.findByRole('combobox'); - - expect(buttonDropdown).toBeInTheDocument(); - - await userEvent.selectOptions(buttonDropdown, shipmentType); - - await waitFor(() => { - expect(mockNavigate).toHaveBeenCalledWith(path); - }); - }); - }); }); From b054016e132ad844a1c67a87b643a3b43ee4ca73 Mon Sep 17 00:00:00 2001 From: KonstanceH Date: Wed, 16 Oct 2024 06:19:19 +0000 Subject: [PATCH 5/7] add a new shipment aligned with title --- .../ApprovedRequestedShipments.jsx | 56 ++++++++++--------- .../RequestedShipments.module.scss | 21 ++++--- .../SubmittedRequestedShipments.jsx | 56 ++++++++++--------- 3 files changed, 71 insertions(+), 62 deletions(-) diff --git a/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx b/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx index 1c06b0e47fb..635932cf4f1 100644 --- a/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx +++ b/src/components/Office/RequestedShipments/ApprovedRequestedShipments.jsx @@ -87,33 +87,35 @@ const ApprovedRequestedShipments = ({ return (
-

Approved Shipments

-
- {!isMoveLocked && ( - - - - - - - - - - - - )} +
+

Approved Shipments

+
+ {!isMoveLocked && ( + + + + + + + + + + + + )} +
diff --git a/src/components/Office/RequestedShipments/RequestedShipments.module.scss b/src/components/Office/RequestedShipments/RequestedShipments.module.scss index 11c79a42cf8..0e488e96bf3 100644 --- a/src/components/Office/RequestedShipments/RequestedShipments.module.scss +++ b/src/components/Office/RequestedShipments/RequestedShipments.module.scss @@ -7,6 +7,19 @@ @include u-padding-x(4); @include u-padding-y(2); + .sectionHeader { + display: flex; + justify-content: center; + align-items: center; + h2 { + margin-right: auto; + } + + .buttonDropdown { + margin-left: auto + } + } + h4 { @include u-margin(0); font-weight: bold; @@ -55,11 +68,3 @@ .serviceCounselingCompleted { @include u-margin-top(3); } - -.dropdownButton { - float: right; -} - -.scFinancialReviewContainer { - @include u-margin-bottom(3); -} diff --git a/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx b/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx index 54206d79e69..ecac5105be9 100644 --- a/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx +++ b/src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx @@ -218,33 +218,35 @@ const SubmittedRequestedShipments = ({
-

Requested shipments

-
- {!isMoveLocked && ( - - - - - - - - - - - - )} +
+

Requested shipments

+
+ {!isMoveLocked && ( + + + + + + + + + + + + )} +
{mtoShipments && From af0386e1e2ffc84c2643b09086ee03e28af9a4c7 Mon Sep 17 00:00:00 2001 From: KonstanceH Date: Thu, 17 Oct 2024 14:46:51 +0000 Subject: [PATCH 6/7] adding in right mobile home dimensions line back in --- .../MobileHomeShipmentForm/MobileHomeShipmentForm.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx b/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx index 4972d74b387..1009904bc93 100644 --- a/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx +++ b/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx @@ -268,11 +268,11 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { - Examples + Example
  • - Dimensions of the mobile home on the trailer are significantly different than one would expect - given their individual dimensions + Is there additional information you feel is pertinent to the processing of your mobile home + shipment?(e.g., ‘wrecker service requested’ and ‘crane service needed’).
  • Access info for your origin or destination address/marina
    • From a24b005b52c1be7102dfed6661f88fcc933e3808 Mon Sep 17 00:00:00 2001 From: KonstanceH Date: Thu, 17 Oct 2024 15:46:15 +0000 Subject: [PATCH 7/7] removing added description change, will be added in correct story 20653 --- .../MobileHomeShipmentForm/MobileHomeShipmentForm.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx b/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx index 1009904bc93..4972d74b387 100644 --- a/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx +++ b/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx @@ -268,11 +268,11 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { - Example + Examples
    • - Is there additional information you feel is pertinent to the processing of your mobile home - shipment?(e.g., ‘wrecker service requested’ and ‘crane service needed’). + Dimensions of the mobile home on the trailer are significantly different than one would expect + given their individual dimensions
    • Access info for your origin or destination address/marina