Skip to content

Commit

Permalink
Merge pull request #11924 from transcom/B-18411-UI-shipment-address-u…
Browse files Browse the repository at this point in the history 
…pdate-review-screen-updates-v2

MAIN B-18411-UI-shipment-address-update-review-screen-updates
  • Loading branch information
@deandreJones
deandreJones authored Feb 8, 2024
2 parents 29a1d7b + 244ebab commit d0360cc
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 137 deletions.
24 changes: 7 additions & 17 deletions src/components/Office/AddressUpdatePreview/AddressUpdatePreview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ import { formatTwoLineAddress } from 'utils/shipmentDisplay';
import DataTableWrapper from 'components/DataTableWrapper';
import { ShipmentAddressUpdateShape } from 'types';

const AddressUpdatePreview = ({ deliveryAddressUpdate, destSitServiceItems }) => {
const AddressUpdatePreview = ({ deliveryAddressUpdate }) => {
const { originalAddress, newAddress, contractorRemarks } = deliveryAddressUpdate;
const newSitMileage = deliveryAddressUpdate.newSitDistanceBetween;
return (
<div>
<h3 className={styles.previewHeading}>Delivery location</h3>

<Alert type="warning" className={styles.alert}>
<span className={styles.alertContent}>
If approved, the requested update to the delivery location will change one or all of the following:
Expand All @@ -27,23 +27,15 @@ const AddressUpdatePreview = ({ deliveryAddressUpdate, destSitServiceItems }) =>
Approvals will result in updated pricing for this shipment. Customer may be subject to excess costs.
</span>
</Alert>
{destSitServiceItems.length > 0 ? (
<Alert type="info" className={styles.alert} id="destSitAlert" data-testid="destSitAlert">
{newSitMileage > 50 ? (
<Alert type="warning" className={styles.alert} id="destSitAlert" data-testid="destSitAlert">
<span className={styles.alertContent}>
This shipment contains {destSitServiceItems.length} destination SIT service items. If approved, this could
change the following:{' '}
<span className={styles.listItem}>
SIT delivery &gt; 50 miles <strong>or</strong> SIT delivery &le; 50 miles.
</span>
<span className={styles.listItem}>Service area.</span>
<span className={styles.listItem}>Mileage bracket (for Direct Delivery).</span>
<span className={styles.listItem}>Weight bracket change.</span>
Approvals will result in updated pricing for the service item and require TOO approval. Customer may be
subject to excess costs.
Approval of this address change request will result in SIT Delivery &gt; 50 Miles.
<br />
Updated Mileage for SIT: <strong>{newSitMileage} miles</strong>
</span>
</Alert>
) : null}

<DataTableWrapper
className={classnames('maxw-tablet', 'table--data-point-group', styles.reviewAddressChange)}
testID="address-change-preview"
Expand All @@ -66,9 +58,7 @@ const AddressUpdatePreview = ({ deliveryAddressUpdate, destSitServiceItems }) =>
</div>
);
};

export default AddressUpdatePreview;

AddressUpdatePreview.propTypes = {
deliveryAddressUpdate: ShipmentAddressUpdateShape.isRequired,
};
152 changes: 48 additions & 104 deletions src/components/Office/AddressUpdatePreview/AddressUpdatePreview.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import { render, screen, waitFor } from '@testing-library/react';

import AddressUpdatePreview from './AddressUpdatePreview';

const mockDeliveryAddressUpdate = {
const mockDeliveryAddressUpdateWithoutSIT = {
contractorRemarks: 'Test Contractor Remark',
id: 'c49f7921-5a6e-46b4-bb39-022583574453',
newAddress: {
Expand All @@ -26,93 +26,49 @@ const mockDeliveryAddressUpdate = {
shipmentID: '5c84bcf3-92f7-448f-b0e1-e5378b6806df',
status: 'REQUESTED',
};

const destSitServiceItemsNone = [];

const destSitServiceItemsSeveral = [
{
approvedAt: '2023-12-29T15:31:57.041Z',
createdAt: '2023-12-29T15:27:55.909Z',
deletedAt: '0001-01-01',
eTag: 'MjAyMy0xMi0yOVQxNTozMTo1Ny4wNTUxMTNa',
id: '447c4919-3311-4d3d-9067-a5585ba692ad',
moveTaskOrderID: 'aa8dfe13-266a-4956-ac60-01c2355c06d3',
mtoShipmentID: 'be3349f4-333d-4633-8708-d9c1147cd407',
reServiceCode: 'DDASIT',
reServiceID: 'a0ead168-7469-4cb6-bc5b-2ebef5a38f92',
reServiceName: "Domestic destination add'l SIT",
reason: 'LET THE PEOPLE KNOW',
sitDepartureDate: '2024-01-06T00:00:00.000Z',
sitEntryDate: '2024-01-05T00:00:00.000Z',
status: 'APPROVED',
submittedAt: '0001-01-01',
updatedAt: '0001-01-01T00:00:00.000Z',
},
{
approvedAt: '2023-12-29T15:31:57.912Z',
createdAt: '2023-12-29T15:27:55.920Z',
deletedAt: '0001-01-01',
eTag: 'MjAyMy0xMi0yOVQxNTozMTo1Ny45MjA3Njla',
id: '0163ae1a-d6b8-468d-9ec5-49f289796819',
moveTaskOrderID: 'aa8dfe13-266a-4956-ac60-01c2355c06d3',
mtoShipmentID: 'be3349f4-333d-4633-8708-d9c1147cd407',
reServiceCode: 'DDDSIT',
reServiceID: '5c80f3b5-548e-4077-9b8e-8d0390e73668',
reServiceName: 'Domestic destination SIT delivery',
reason: 'LET THE PEOPLE KNOW',
sitDepartureDate: '2024-01-06T00:00:00.000Z',
sitEntryDate: '2024-01-05T00:00:00.000Z',
status: 'APPROVED',
submittedAt: '0001-01-01',
updatedAt: '0001-01-01T00:00:00.000Z',
const mockDeliveryAddressUpdateWithSIT = {
contractorRemarks: 'hello',
id: '5b1e566e-de89-4523-897f-16d7723a7a64',
newAddress: {
city: 'Fairfield',
eTag: 'MjAyNC0wMS0yMlQyMDo1MTo1NS4xNTQzMjJa',
id: 'ad28a8df-0301-4cac-b88f-75b42fc491a7',
postalCode: '73064',
state: 'CA',
streetAddress1: '987 Any Avenue',
streetAddress2: 'P.O. Box 9876',
streetAddress3: 'c/o Some Person',
},
{
approvedAt: '2023-12-29T15:31:58.538Z',
createdAt: '2023-12-29T15:27:55.928Z',
deletedAt: '0001-01-01',
eTag: 'MjAyMy0xMi0yOVQxNTozMTo1OC41NDQ0NTJa',
id: 'b582cc4c-23ae-4529-be20-608b305d9dc7',
moveTaskOrderID: 'aa8dfe13-266a-4956-ac60-01c2355c06d3',
mtoShipmentID: 'be3349f4-333d-4633-8708-d9c1147cd407',
reServiceCode: 'DDSFSC',
reServiceID: 'b208e0af-3176-4c8a-97ea-bd247c18f43d',
reServiceName: 'Domestic destination SIT fuel surcharge',
reason: 'LET THE PEOPLE KNOW',
sitDepartureDate: '2024-01-06T00:00:00.000Z',
sitEntryDate: '2024-01-05T00:00:00.000Z',
status: 'APPROVED',
submittedAt: '0001-01-01',
updatedAt: '0001-01-01T00:00:00.000Z',
newSitDistanceBetween: 55,
oldSitDistanceBetween: 1,
originalAddress: {
city: 'Fairfield',
country: 'US',
eTag: 'MjAyNC0wMS0wM1QyMToyODoyOS4zNDUxNzFa',
id: 'ac8654e1-8a31-45ed-991b-8c28222cf877',
postalCode: '94535',
state: 'CA',
streetAddress1: '987 Any Avenue',
streetAddress2: 'P.O. Box 9876',
streetAddress3: 'c/o Some Person',
},
{
approvedAt: '2023-12-29T15:31:59.239Z',
createdAt: '2023-12-29T15:27:55.837Z',
deletedAt: '0001-01-01',
eTag: 'MjAyMy0xMi0yOVQxNTozMTo1OS4yNDU0MDRa',
id: 'a69e8cb9-5e46-43a5-92e6-27f1f073d92e',
moveTaskOrderID: 'aa8dfe13-266a-4956-ac60-01c2355c06d3',
mtoShipmentID: 'be3349f4-333d-4633-8708-d9c1147cd407',
reServiceCode: 'DDFSIT',
reServiceID: 'd0561c49-e1a9-40b8-a739-3e639a9d77af',
reServiceName: 'Domestic destination 1st day SIT',
reason: 'LET THE PEOPLE KNOW',
sitDepartureDate: '2024-01-06T00:00:00.000Z',
sitEntryDate: '2024-01-05T00:00:00.000Z',
status: 'APPROVED',
submittedAt: '0001-01-01',
updatedAt: '0001-01-01T00:00:00.000Z',
shipmentID: 'fde0a71f-b984-4abf-8491-2e51f41ab1b9',
sitOriginalAddress: {
city: 'Fairfield',
country: 'US',
eTag: 'MjAyNC0wMS0wM1QyMToyODozMi4wMzg5MTda',
id: 'acea509d-0add-4bde-95d6-c4f10247f9d3',
postalCode: '94535',
state: 'CA',
streetAddress1: '987 Any Avenue',
streetAddress2: 'P.O. Box 9876',
streetAddress3: 'c/o Some Person',
},
];

status: 'REQUESTED',
};
describe('AddressUpdatePreview', () => {
it('renders all of the address preview information', () => {
render(
<AddressUpdatePreview
deliveryAddressUpdate={mockDeliveryAddressUpdate}
destSitServiceItems={destSitServiceItemsNone}
/>,
);

it('renders all of the address preview information', async () => {
render(<AddressUpdatePreview deliveryAddressUpdate={mockDeliveryAddressUpdateWithoutSIT} />);
// Heading and alert present
expect(screen.getByRole('heading', { name: 'Delivery location' })).toBeInTheDocument();
expect(screen.getByTestId('alert')).toBeInTheDocument();
Expand All @@ -123,49 +79,37 @@ describe('AddressUpdatePreview', () => {
'ZIP3 resulting in Domestic Shorthaul (DSH) changing to Domestic Linehaul (DLH) or vice versa.' +
'Approvals will result in updated pricing for this shipment. Customer may be subject to excess costs.',
);

// since there are no destination service items in this shipment, this alert should not show up
expect(screen.queryByTestId('destSitAlert')).toBeNull();

// Address change information
const addressChangePreview = screen.getByTestId('address-change-preview');
expect(addressChangePreview).toBeInTheDocument();

const addresses = screen.getAllByTestId('two-line-address');
expect(addresses).toHaveLength(2);

// Original Address
expect(addressChangePreview).toHaveTextContent('Original delivery location');
expect(addresses[0]).toHaveTextContent('987 Any Avenue');
expect(addresses[0]).toHaveTextContent('Fairfield, CA 94535');

// New Address
expect(addressChangePreview).toHaveTextContent('Requested delivery location');
expect(addresses[1]).toHaveTextContent('123 Any Street');
expect(addresses[1]).toHaveTextContent('Beverly Hills, CA 90210');

// Request details (contractor remarks)
expect(addressChangePreview).toHaveTextContent('Update request details');
expect(addressChangePreview).toHaveTextContent('Contractor remarks: Test Contractor Remark');
// if the delivery address update doesn't have data, then this will be falsy
await waitFor(() => {
expect(screen.queryByTestId('destSitAlert')).not.toBeInTheDocument();
});
});

it('renders the destination SIT alert when shipment contains dest SIT service items', () => {
render(
<AddressUpdatePreview
deliveryAddressUpdate={mockDeliveryAddressUpdate}
destSitServiceItems={destSitServiceItemsSeveral}
/>,
);

render(<AddressUpdatePreview deliveryAddressUpdate={mockDeliveryAddressUpdateWithSIT} />);
// Heading and alert present
expect(screen.getByRole('heading', { name: 'Delivery location' })).toBeInTheDocument();
expect(screen.getByTestId('destSitAlert')).toBeInTheDocument();
expect(screen.getByTestId('destSitAlert')).toHaveTextContent(
'This shipment contains 4 destination SIT service items. If approved, this could change the following: ' +
'SIT delivery > 50 miles or SIT delivery ≤ 50 miles.Service area.' +
'Mileage bracket (for Direct Delivery).' +
'Weight bracket change.' +
'Approvals will result in updated pricing for the service item and require TOO approval. Customer may be subject to excess costs.',
'Approval of this address change request will result in SIT Delivery > 50 Miles.' +
'Updated Mileage for SIT: 55 miles',
);
});
});
16 changes: 0 additions & 16 deletions ...ffice/ShipmentAddressUpdateReviewRequestModal/ShipmentAddressUpdateReviewRequestModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const formSchema = Yup.object().shape({
addressUpdateReviewStatus: Yup.string().required('Required'),
officeRemarks: Yup.string().required('Required'),
});

export const ShipmentAddressUpdateReviewRequestModal = ({
onSubmit,
shipment,
Expand All @@ -31,25 +30,14 @@ export const ShipmentAddressUpdateReviewRequestModal = ({
}) => {
const handleSubmit = async (values, { setSubmitting }) => {
const { addressUpdateReviewStatus, officeRemarks } = values;

await onSubmit(shipment.id, shipment.eTag, addressUpdateReviewStatus, officeRemarks);

setSubmitting(false);
};

const errorMessageAlertControl = (
<Button type="button" onClick={() => setErrorMessage(null)} unstyled>
<FontAwesomeIcon icon="times" style={styles.alertClose} />
</Button>
);

// checking to see if the shipment contains destination SIT service items
// storing them in an array so we can have the count and display to the TOO
// if there is none, we will make it an empty array
const destSitServiceItems = (shipment.mtoServiceItems ?? []).filter((s) =>
['DDDSIT', 'DDASIT', 'DDFSIT', 'DDSFSC'].includes(s.reServiceCode),
);

return (
<Modal>
<ModalClose handleClick={() => onClose()} />
Expand All @@ -75,7 +63,6 @@ export const ShipmentAddressUpdateReviewRequestModal = ({
<AddressUpdatePreview
deliveryAddressUpdate={shipment.deliveryAddressUpdate}
shipmentType={shipment.shipmentType}
destSitServiceItems={destSitServiceItems}
/>
<FormGroup className={styles.formGroup}>
<h4>Review Request</h4>
Expand Down Expand Up @@ -125,19 +112,16 @@ export const ShipmentAddressUpdateReviewRequestModal = ({
</Modal>
);
};

ShipmentAddressUpdateReviewRequestModal.propTypes = {
shipment: ShipmentShape.isRequired,
onSubmit: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
errorMessage: PropTypes.node,
setErrorMessage: PropTypes.func,
};

ShipmentAddressUpdateReviewRequestModal.defaultProps = {
errorMessage: null,
setErrorMessage: undefined,
};

ShipmentAddressUpdateReviewRequestModal.displayName = 'ShipmentAddressUpdateReviewRequestModal';
export default connectModal(ShipmentAddressUpdateReviewRequestModal);

0 comments on commit d0360cc

Please sign in to comment.