From cdbfd2a61b37162e738617282962df4f21edf03f Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Fri, 17 Jan 2025 16:55:35 +0000 Subject: [PATCH 01/12] Added rejection reason to payment service items on Payment Requests tab --- .../ExpandableServiceItemRow.jsx | 8 +++++- .../ExpandableServiceItemRow.module.scss | 26 +++++++++++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx index 585ef6b44d6..c7cce7d97dc 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx @@ -94,7 +94,7 @@ const ExpandableServiceItemRow = ({ {isExpanded && ( - + + {serviceItem.rejectionReason !== undefined && ( + +

Rejection Reason

+ {serviceItem.rejectionReason} + + )} )} diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss index 49a76c0f3b9..9618bc240c1 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss @@ -72,4 +72,30 @@ &.expandedDetail td { padding: 0; } + + .rejectionReasonCol { + @include u-padding(2); + border: 1px solid $base-lighter; + border-radius: 3px; + background-color: $bg-gray; + } + + .title { + font-weight: bold; + margin-top: 0; + @include u-margin-bottom(2); + @include u-padding-top(2); + } + + td { + background-color: $bg-gray; + } + + td[colspan='2']:nth-of-type(2).rejectionReasonTd { + vertical-align: top; + text-align: start; + word-break: break-all; + padding-right: 2rem; + border-left: 1px solid #dfe1e2; + } } From cbd33dcc967505e96cee3512310d7fa331cd9472 Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Fri, 17 Jan 2025 19:06:21 +0000 Subject: [PATCH 02/12] CSS changes to rejection reason text, added unit tests. --- .../ExpandableServiceItemRow.jsx | 10 +- .../ExpandableServiceItemRow.module.scss | 25 ++ .../ExpandableServiceItemRow.test.jsx | 269 ++++++++++++++++++ 3 files changed, 301 insertions(+), 3 deletions(-) create mode 100644 src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx index c7cce7d97dc..0634e3aba65 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx @@ -103,10 +103,14 @@ const ExpandableServiceItemRow = ({ shipmentType={serviceItem.mtoShipmentType} /> - {serviceItem.rejectionReason !== undefined && ( + {serviceItem.rejectionReason && ( -

Rejection Reason

- {serviceItem.rejectionReason} +
+ +

Rejection Reason

+
+ {serviceItem.rejectionReason} +
)} diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss index 9618bc240c1..9dface86063 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss @@ -84,6 +84,7 @@ font-weight: bold; margin-top: 0; @include u-margin-bottom(2); + @include u-padding-left(1); @include u-padding-top(2); } @@ -91,11 +92,35 @@ background-color: $bg-gray; } + .reasonText { + font-weight: normal; + } + td[colspan='2']:nth-of-type(2).rejectionReasonTd { vertical-align: top; text-align: start; word-break: break-all; padding-right: 2rem; + padding-left: 1rem; border-left: 1px solid #dfe1e2; } + + .rejectionReasonContainer { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + + svg { + path { + fill: $error; + } + height: 1.4rem; + } + } + + .break { + flex-basis: 100%; + height: 0; + } } diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx new file mode 100644 index 00000000000..ee58ee1531a --- /dev/null +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx @@ -0,0 +1,269 @@ +import React from 'react'; +import { act, render, screen } from '@testing-library/react'; + +import ExpandableServiceItemRow from './ExpandableServiceItemRow'; + +const serviceItem = { + createdAt: '2025-01-09T22:08:38.788Z', + eTag: 'MjAyNS0wMS0xN1QxNTowODo0Mi44MDI4MDZa', + id: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + mtoServiceItemCode: 'DLH', + mtoServiceItemID: '526f705d-dba1-4bae-bf9a-e97cd1931bd4', + mtoServiceItemName: 'Domestic linehaul', + mtoShipmentID: 'ad5c56af-9e32-41bf-8283-a6a52938cc6a', + mtoShipmentType: 'HHG', + paymentServiceItemParams: [ + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDQ5Nlo=', + id: 'd3fba800-cc16-45e3-975d-3236884fbf8a', + key: 'WeightOriginal', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '2000', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDAyNjFa', + id: '19192fe0-3e0b-4d5d-98dd-ea834fe9062f', + key: 'ActualPickupDate', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DATE', + value: '2025-01-09', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44MjcwNTZa', + id: 'e249d609-96fa-4533-90dc-12d3164aed41', + key: 'RequestedPickupDate', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DATE', + value: '2025-01-02', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NDc5NjVa', + id: '75fc3b3b-517d-4383-9d3e-1493bcd564d9', + key: 'DistanceZip', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '1540', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NTk0MTZa', + id: '15edbab6-ba00-47e2-bc92-49c7b16f57e1', + key: 'ContractYearName', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: 'Award Term 1', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDIwMVo=', + id: '984fb8ea-da8a-4b3a-8560-85a9da1589ab', + key: 'ZipDestAddress', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: '85309', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDk1MzNa', + id: '6d8b063b-8af4-4d6a-9ad4-5880a2d5fbea', + key: 'ReferenceDate', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DATE', + value: '2025-01-02', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44MzY0MjJa', + id: '7941f3cf-7bcd-495e-9291-f2965291676c', + key: 'ServiceAreaOrigin', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: '456', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NjExODda', + id: '9a69db91-2d5d-4446-b1f6-0c15a140cf7a', + key: 'EscalationCompounded', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DECIMAL', + value: '1.10701', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NjI5ODla', + id: '35ddc999-a546-4076-9a2e-5295e4ae4279', + key: 'IsPeak', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'BOOLEAN', + value: 'false', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NjQ3ODNa', + id: 'd35e3639-6a43-4f6a-8bf0-5a82685b80c4', + key: 'PriceRateOrFactor', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DECIMAL', + value: '3.148', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44Mzg0MTRa', + id: '163babcf-7874-474e-a36d-f602fdca5c88', + key: 'ContractCode', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: 'TRUSS_TEST', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44Mjk2OTFa', + id: '3f677c1e-1302-4cc1-9333-6fa34f5bdab5', + key: 'WeightEstimated', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '1500', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDc2NDNa', + id: '1009cca9-cdc1-4814-97e9-e0ef82dce965', + key: 'WeightBilled', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '1650', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44MzE2Nzha', + id: '66b571ee-4142-4576-b563-cc3c8ea04bfe', + key: 'ZipPickupAddress', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: '62225', + }, + ], + priceCents: 8855385, + referenceID: '4131-9325-46e2df6f', + rejectionReason: 'Rejection reason test text', + status: 'DENIED', +}; + +const additionalServiceItemData = { + approvedAt: '2025-01-09T20:24:58.522Z', + convertToCustomerExpense: false, + createdAt: '2025-01-09T20:24:58.621Z', + deletedAt: '0001-01-01', + eTag: 'MjAyNS0wMS0wOVQyMDoyNDo1OC42MjE5NzRa', + id: '526f705d-dba1-4bae-bf9a-e97cd1931bd4', + moveTaskOrderID: 'b02c42d7-bd4f-48ff-a5f8-6e7332fa5d03', + mtoShipmentID: 'ad5c56af-9e32-41bf-8283-a6a52938cc6a', + reServiceCode: 'DLH', + reServiceID: '8d600f25-1def-422d-b159-617c7d59156e', + reServiceName: 'Domestic linehaul', + status: 'APPROVED', + submittedAt: '0001-01-01', + updatedAt: '0001-01-01T00:00:00.000Z', +}; + +describe('Payment service items', () => { + it('Displays rejected service item with rejection reason', async () => { + render( + , + ); + + expect(screen.getByText('Domestic linehaul')).toBeVisible(); + expect(screen.getByText('$88,553.85')).toBeVisible(); + expect(screen.getByText('Rejected')).toBeVisible(); + + // Expand service item row + await act(async () => { + screen.getByText('Domestic linehaul').click(); + }); + + // Test for rejection reason + expect(screen.getByText('Rejection Reason')).toBeVisible(); + expect(screen.getByText('Rejection reason test text')).toBeVisible(); + + // Test for calculations + expect(screen.getByText('Billable weight (cwt)')).toBeVisible(); + expect(screen.getByText('16.5 cwt')).toBeVisible(); + expect(screen.getByText('Original: 2,000 lbs')).toBeVisible(); + expect(screen.getByText('Estimated: 1,500 lbs')).toBeVisible(); + + expect(screen.getByText('Mileage')).toBeVisible(); + expect(screen.getByText('1,540')).toBeVisible(); + expect(screen.getByText('ZIP 62225 to ZIP 85309')).toBeVisible(); + + expect(screen.getByText('Baseline linehaul price')).toBeVisible(); + expect(screen.getByText('3.148')).toBeVisible(); + expect(screen.getByText('Domestic non-peak')).toBeVisible(); + expect(screen.getByText('Origin service area: 456')).toBeVisible(); + expect(screen.getByText('Requested pickup: 02 Jan 2025')).toBeVisible(); + + expect(screen.getByText('Price escalation factor')).toBeVisible(); + expect(screen.getByText('1.10701')).toBeVisible(); + expect(screen.getByText('Base year: Award Term 1')).toBeVisible(); + }); + + it('Displays accepted service item without displaying rejection reason markup', async () => { + serviceItem.status = 'APPROVED'; + serviceItem.rejectionReason = null; + render( + , + ); + + expect(screen.getByText('Domestic linehaul')).toBeVisible(); + expect(screen.getByText('$88,553.85')).toBeVisible(); + expect(screen.getByText('Accepted')).toBeVisible(); + + // Expand service item row + await act(async () => { + screen.getByText('Domestic linehaul').click(); + }); + + // Test for rejection reason + expect(screen.queryByText('Rejection Reason')).toBeNull(); + expect(screen.queryByText('Rejection reason test text')).toBeNull(); + + // Test for calculations + expect(screen.getByText('Billable weight (cwt)')).toBeVisible(); + expect(screen.getByText('16.5 cwt')).toBeVisible(); + expect(screen.getByText('Original: 2,000 lbs')).toBeVisible(); + expect(screen.getByText('Estimated: 1,500 lbs')).toBeVisible(); + + expect(screen.getByText('Mileage')).toBeVisible(); + expect(screen.getByText('1,540')).toBeVisible(); + expect(screen.getByText('ZIP 62225 to ZIP 85309')).toBeVisible(); + + expect(screen.getByText('Baseline linehaul price')).toBeVisible(); + expect(screen.getByText('3.148')).toBeVisible(); + expect(screen.getByText('Domestic non-peak')).toBeVisible(); + expect(screen.getByText('Origin service area: 456')).toBeVisible(); + expect(screen.getByText('Requested pickup: 02 Jan 2025')).toBeVisible(); + + expect(screen.getByText('Price escalation factor')).toBeVisible(); + expect(screen.getByText('1.10701')).toBeVisible(); + expect(screen.getByText('Base year: Award Term 1')).toBeVisible(); + }); +}); From 33f37ea69fe8d0502c8e57576480769ef4d009bc Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Fri, 17 Jan 2025 20:28:33 +0000 Subject: [PATCH 03/12] Fix total field formatting and left-aligned --- .../ServiceItemCalculations/ServiceItemCalculations.jsx | 5 ----- .../ServiceItemCalculations.module.scss | 2 -- src/components/Office/ServiceItemCalculations/helpers.js | 2 +- 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.jsx b/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.jsx index 814e82d124a..fea91773c2e 100644 --- a/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.jsx +++ b/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.jsx @@ -14,7 +14,6 @@ import { } from 'constants/serviceItems'; const times = ; -const equals = ; const ServiceItemCalculations = ({ itemCode, @@ -37,10 +36,6 @@ const ServiceItemCalculations = ({ return times; } - if (index === length - 1) { - return equals; - } - return null; }; diff --git a/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.module.scss b/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.module.scss index c83658fa704..48e25cd1efb 100644 --- a/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.module.scss +++ b/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.module.scss @@ -59,8 +59,6 @@ .col:last-of-type { @include u-margin-right(0); - @include u-text-align('right'); - hr { width: 100%; } diff --git a/src/components/Office/ServiceItemCalculations/helpers.js b/src/components/Office/ServiceItemCalculations/helpers.js index 6577e9118b8..2e44eb1b1ad 100644 --- a/src/components/Office/ServiceItemCalculations/helpers.js +++ b/src/components/Office/ServiceItemCalculations/helpers.js @@ -641,7 +641,7 @@ const uncappedRequestTotal = (params) => { const totalAmountRequested = (totalAmount) => { const value = toDollarString(formatCents(totalAmount)); - const label = `${SERVICE_ITEM_CALCULATION_LABELS.Total}:`; + const label = `${SERVICE_ITEM_CALCULATION_LABELS.Total}: `; const detail = ''; return calculation(value, label, formatDetail(detail)); From 30267445acd54e30f7ea035cf0c0f099035124ab Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Mon, 20 Jan 2025 15:29:01 +0000 Subject: [PATCH 04/12] removed references to old equals sign in unit tests --- .../ServiceItemCalculations.test.jsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.test.jsx b/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.test.jsx index 79a3704f074..7d7f1bf62c5 100644 --- a/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.test.jsx +++ b/src/components/Office/ServiceItemCalculations/ServiceItemCalculations.test.jsx @@ -77,10 +77,8 @@ describe('ServiceItemCalculations DLH', () => { it('renders icons', () => { const wrapper = serviceItemCalculationsLarge; const timesIcons = wrapper.find('[icon="times"]'); - const equalsIcons = wrapper.find('[icon="equals"]'); expect(timesIcons.length).toBe(3); - expect(equalsIcons.length).toBe(1); }); }); @@ -96,10 +94,8 @@ describe('ServiceItemCalculations DLH', () => { it('renders no icons', () => { const wrapper = serviceItemCalculationsSmall; const timesIcons = wrapper.find('[icon="times"]'); - const equalsIcons = wrapper.find('[icon="equals"]'); expect(timesIcons.length).toBe(0); - expect(equalsIcons.length).toBe(0); }); }); @@ -162,10 +158,8 @@ describe('ServiceItemCalculations DCRT', () => { it('renders icons', () => { const wrapper = serviceItemCalculationsLarge; const timesIcons = wrapper.find('[icon="times"]'); - const equalsIcons = wrapper.find('[icon="equals"]'); expect(timesIcons.length).toBe(2); - expect(equalsIcons.length).toBe(1); }); }); @@ -181,10 +175,8 @@ describe('ServiceItemCalculations DCRT', () => { it('renders no icons', () => { const wrapper = serviceItemCalculationsSmall; const timesIcons = wrapper.find('[icon="times"]'); - const equalsIcons = wrapper.find('[icon="equals"]'); expect(timesIcons.length).toBe(0); - expect(equalsIcons.length).toBe(0); }); }); @@ -248,10 +240,8 @@ describe('ServiceItemCalculations DUCRT', () => { it('renders icons', () => { const wrapper = serviceItemCalculationsLarge; const timesIcons = wrapper.find('[icon="times"]'); - const equalsIcons = wrapper.find('[icon="equals"]'); expect(timesIcons.length).toBe(2); - expect(equalsIcons.length).toBe(1); }); }); @@ -267,10 +257,8 @@ describe('ServiceItemCalculations DUCRT', () => { it('renders no icons', () => { const wrapper = serviceItemCalculationsSmall; const timesIcons = wrapper.find('[icon="times"]'); - const equalsIcons = wrapper.find('[icon="equals"]'); expect(timesIcons.length).toBe(0); - expect(equalsIcons.length).toBe(0); }); }); From 83549a8d56a604255e16b74000b587338923fada Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Tue, 21 Jan 2025 16:01:24 -0500 Subject: [PATCH 05/12] Changed "word-break" CSS property from "break-all" to "break-word" --- .../ExpandableServiceItemRow.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss index 9dface86063..43ca34b8759 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss @@ -99,7 +99,7 @@ td[colspan='2']:nth-of-type(2).rejectionReasonTd { vertical-align: top; text-align: start; - word-break: break-all; + word-break: break-word; padding-right: 2rem; padding-left: 1rem; border-left: 1px solid #dfe1e2; From 89d0db90239be147dac1034321aefc178edc686d Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Wed, 22 Jan 2025 12:32:06 -0500 Subject: [PATCH 06/12] Added storybook component and its required styles for ExpandableServiceItemRow.jsx --- .../ExpandableServiceItemRow.stories.jsx | 235 ++++++++++++++++++ src/shared/styles/_custom.scss | 27 ++ 2 files changed, 262 insertions(+) create mode 100644 src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx new file mode 100644 index 00000000000..46f49ef1633 --- /dev/null +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx @@ -0,0 +1,235 @@ +import React from 'react'; +import { GridContainer } from '@trussworks/react-uswds'; + +import ExpandableServiceItemRow from './ExpandableServiceItemRow'; +import '../ServiceItemCalculations/ServiceItemCalculations.module.scss'; + +export default { + title: 'Office Components/ExpandableServiceItemRow', + decorators: [ + (Story) => { + return ( +
+ + + + + + + + + + + + + + + + + +
Service itemAmountStatus
+ +
+ ); + }, + ], +}; + +const serviceItemRejected = { + createdAt: '2025-01-09T22:08:38.788Z', + eTag: 'MjAyNS0wMS0xN1QxNTowODo0Mi44MDI4MDZa', + id: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + mtoServiceItemCode: 'DLH', + mtoServiceItemID: '526f705d-dba1-4bae-bf9a-e97cd1931bd4', + mtoServiceItemName: 'Domestic linehaul', + mtoShipmentID: 'ad5c56af-9e32-41bf-8283-a6a52938cc6a', + mtoShipmentType: 'HHG', + paymentServiceItemParams: [ + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDQ5Nlo=', + id: 'd3fba800-cc16-45e3-975d-3236884fbf8a', + key: 'WeightOriginal', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '2000', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDAyNjFa', + id: '19192fe0-3e0b-4d5d-98dd-ea834fe9062f', + key: 'ActualPickupDate', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DATE', + value: '2025-01-09', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44MjcwNTZa', + id: 'e249d609-96fa-4533-90dc-12d3164aed41', + key: 'RequestedPickupDate', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DATE', + value: '2025-01-02', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NDc5NjVa', + id: '75fc3b3b-517d-4383-9d3e-1493bcd564d9', + key: 'DistanceZip', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '1540', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NTk0MTZa', + id: '15edbab6-ba00-47e2-bc92-49c7b16f57e1', + key: 'ContractYearName', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: 'Award Term 1', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDIwMVo=', + id: '984fb8ea-da8a-4b3a-8560-85a9da1589ab', + key: 'ZipDestAddress', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: '85309', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDk1MzNa', + id: '6d8b063b-8af4-4d6a-9ad4-5880a2d5fbea', + key: 'ReferenceDate', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DATE', + value: '2025-01-02', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44MzY0MjJa', + id: '7941f3cf-7bcd-495e-9291-f2965291676c', + key: 'ServiceAreaOrigin', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: '456', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NjExODda', + id: '9a69db91-2d5d-4446-b1f6-0c15a140cf7a', + key: 'EscalationCompounded', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DECIMAL', + value: '1.10701', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NjI5ODla', + id: '35ddc999-a546-4076-9a2e-5295e4ae4279', + key: 'IsPeak', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'BOOLEAN', + value: 'false', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC45NjQ3ODNa', + id: 'd35e3639-6a43-4f6a-8bf0-5a82685b80c4', + key: 'PriceRateOrFactor', + origin: 'PRICER', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'DECIMAL', + value: '3.148', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44Mzg0MTRa', + id: '163babcf-7874-474e-a36d-f602fdca5c88', + key: 'ContractCode', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: 'TRUSS_TEST', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44Mjk2OTFa', + id: '3f677c1e-1302-4cc1-9333-6fa34f5bdab5', + key: 'WeightEstimated', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '1500', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44NDc2NDNa', + id: '1009cca9-cdc1-4814-97e9-e0ef82dce965', + key: 'WeightBilled', + origin: 'SYSTEM', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'INTEGER', + value: '1650', + }, + { + eTag: 'MjAyNS0wMS0wOVQyMjowODozOC44MzE2Nzha', + id: '66b571ee-4142-4576-b563-cc3c8ea04bfe', + key: 'ZipPickupAddress', + origin: 'PRIME', + paymentServiceItemID: '46e2df6f-4fe9-47ee-9baa-b9de28251da8', + type: 'STRING', + value: '62225', + }, + ], + priceCents: 8855385, + referenceID: '4131-9325-46e2df6f', + rejectionReason: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + status: 'DENIED', +}; + +const additionalServiceItemData = { + approvedAt: '2025-01-09T20:24:58.522Z', + convertToCustomerExpense: false, + createdAt: '2025-01-09T20:24:58.621Z', + deletedAt: '0001-01-01', + eTag: 'MjAyNS0wMS0wOVQyMDoyNDo1OC42MjE5NzRa', + id: '526f705d-dba1-4bae-bf9a-e97cd1931bd4', + moveTaskOrderID: 'b02c42d7-bd4f-48ff-a5f8-6e7332fa5d03', + mtoShipmentID: 'ad5c56af-9e32-41bf-8283-a6a52938cc6a', + reServiceCode: 'DLH', + reServiceID: '8d600f25-1def-422d-b159-617c7d59156e', + reServiceName: 'Domestic linehaul', + status: 'APPROVED', + submittedAt: '0001-01-01', + updatedAt: '0001-01-01T00:00:00.000Z', +}; + +export const rejectedServiceItem = () => ( + +); + +const serviceItemAccepted = { ...serviceItemRejected }; +serviceItemAccepted.status = 'APPROVED'; +serviceItemAccepted.rejectionReason = null; +export const acceptedServiceItem = () => ( + +); diff --git a/src/shared/styles/_custom.scss b/src/shared/styles/_custom.scss index 7b178084322..5d02594fc49 100644 --- a/src/shared/styles/_custom.scss +++ b/src/shared/styles/_custom.scss @@ -345,3 +345,30 @@ table { } } } + +// For displaying payment request details/rows in Storybook +.table--stacked { + width: 100%; + table-layout: fixed; + th { + @include u-font-weight(bold); + @include u-font-size('body', '3xs'); + color: $base-darker; + border-top: 0; + + &:not(:first-child) { + text-align: right; + } + } + + td:not(:first-child) { + @include u-font-weight(bold); + text-align: right; + } +} + +.gridContainer { + .shipmentCard { + @include u-padding-left(4); + } +} From 1951d9f32d45d56d53944a2f80e91fa1d6b66430 Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Thu, 23 Jan 2025 12:47:30 -0500 Subject: [PATCH 07/12] Adjusted CSS to avoid conflicts with other storybook components --- .../ExpandableServiceItemRow.stories.jsx | 2 +- src/shared/styles/_custom.scss | 40 +++++++++---------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx index 46f49ef1633..4245c20706c 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.stories.jsx @@ -12,7 +12,7 @@ export default {
diff --git a/src/shared/styles/_custom.scss b/src/shared/styles/_custom.scss index 5d02594fc49..f1adceb5e7e 100644 --- a/src/shared/styles/_custom.scss +++ b/src/shared/styles/_custom.scss @@ -347,28 +347,28 @@ table { } // For displaying payment request details/rows in Storybook -.table--stacked { - width: 100%; - table-layout: fixed; - th { - @include u-font-weight(bold); - @include u-font-size('body', '3xs'); - color: $base-darker; - border-top: 0; - - &:not(:first-child) { - text-align: right; - } +.expandableServiceItemRow { + .shipmentCard { + @include u-padding-left(4); } - td:not(:first-child) { - @include u-font-weight(bold); - text-align: right; - } -} + .table--stacked { + width: 100%; + table-layout: fixed; + th { + @include u-font-weight(bold); + @include u-font-size('body', '3xs'); + color: $base-darker; + border-top: 0; -.gridContainer { - .shipmentCard { - @include u-padding-left(4); + &:not(:first-child) { + text-align: right; + } + } + + td:not(:first-child) { + @include u-font-weight(bold); + text-align: right; + } } } From 94bd71a933066f18d041a14f8b79751534833f67 Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Thu, 23 Jan 2025 14:06:41 -0500 Subject: [PATCH 08/12] Fixed td style that was overriding other component styles. --- .../ExpandableServiceItemRow.module.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss index 43ca34b8759..0cab37efe3e 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss @@ -88,10 +88,6 @@ @include u-padding-top(2); } - td { - background-color: $bg-gray; - } - .reasonText { font-weight: normal; } @@ -103,6 +99,7 @@ padding-right: 2rem; padding-left: 1rem; border-left: 1px solid #dfe1e2; + background-color: $bg-gray; } .rejectionReasonContainer { From 5b5103562c76a48db15b0e9bb5eaeb9ec3c56063 Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Mon, 27 Jan 2025 17:28:33 +0000 Subject: [PATCH 09/12] Edited to include MS and CS items (any item with a rejection reason) --- .../ExpandableServiceItemRow.jsx | 23 +++++++++++-------- .../ExpandableServiceItemRow.module.scss | 2 ++ 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx index 0634e3aba65..bec330274b3 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx @@ -25,7 +25,8 @@ const ExpandableServiceItemRow = ({ return canShowExpandableContent && (paymentIsDeprecated || item.status !== PAYMENT_SERVICE_ITEM_STATUS.REQUESTED); }; const canShowExpandableContent = - !disableExpansion && allowedServiceItemCalculations.includes(serviceItem.mtoServiceItemCode); + !disableExpansion && + (allowedServiceItemCalculations.includes(serviceItem.mtoServiceItemCode) === true || serviceItem.rejectionReason); const handleExpandClick = () => { setIsExpanded((prev) => !prev); @@ -94,15 +95,17 @@ const ExpandableServiceItemRow = ({ {isExpanded && ( - + {Object.keys(additionalServiceItemData).length > 0 && ( + + )} {serviceItem.rejectionReason && ( )} {serviceItem.rejectionReason && ( -
- - + +
diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss index 0cab37efe3e..eef510834fc 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss @@ -107,6 +107,8 @@ flex-direction: row; flex-wrap: wrap; align-items: center; + padding-left: 1rem; + padding-bottom: 1rem; svg { path { From 9e1b2bd5f5034e248a4946001285e060a765d9ba Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Mon, 27 Jan 2025 21:16:25 +0000 Subject: [PATCH 10/12] Fix for bg color --- .../ExpandableServiceItemRow.jsx | 9 +++++++-- .../ExpandableServiceItemRow.module.scss | 3 +++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx index bec330274b3..41e4295c642 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx @@ -6,7 +6,7 @@ import classnames from 'classnames'; import styles from './ExpandableServiceItemRow.module.scss'; import { PAYMENT_SERVICE_ITEM_STATUS } from 'shared/constants'; -import { allowedServiceItemCalculations } from 'constants/serviceItems'; +import { allowedServiceItemCalculations, SERVICE_ITEM_CODES } from 'constants/serviceItems'; import { PaymentServiceItemShape } from 'types'; import { MTOServiceItemShape } from 'types/order'; import { toDollarString, formatCents, formatDollarFromMillicents } from 'utils/formatters'; @@ -44,6 +44,11 @@ const ExpandableServiceItemRow = ({ [styles.expandedDetail]: isExpanded, }); + const colSpan = + serviceItem.mtoServiceItemCode === SERVICE_ITEM_CODES.MS || serviceItem.mtoServiceItemCode === SERVICE_ITEM_CODES.CS + ? 4 + : 2; + return ( <>
+

Rejection Reason

diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss index eef510834fc..c6ce0d63ff3 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.module.scss @@ -3,6 +3,7 @@ @import 'shared/styles/colors'; .ExpandableServiceItemRow { + background-color: $bg-gray; .accepted { svg { @include u-margin-right(1); @@ -109,6 +110,8 @@ align-items: center; padding-left: 1rem; padding-bottom: 1rem; + padding-right: 1rem; + background-color: $bg-gray; svg { path { From e017facf722506239346026d6482f4e8ac67d9f4 Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Tue, 28 Jan 2025 15:43:27 +0000 Subject: [PATCH 11/12] Added unit test --- .../ExpandableServiceItemRow.test.jsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx index ee58ee1531a..2bc115f4586 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.test.jsx @@ -3,6 +3,8 @@ import { act, render, screen } from '@testing-library/react'; import ExpandableServiceItemRow from './ExpandableServiceItemRow'; +import { SERVICE_ITEM_CODES } from 'constants/serviceItems'; + const serviceItem = { createdAt: '2025-01-09T22:08:38.788Z', eTag: 'MjAyNS0wMS0xN1QxNTowODo0Mi44MDI4MDZa', @@ -172,6 +174,10 @@ const additionalServiceItemData = { updatedAt: '0001-01-01T00:00:00.000Z', }; +const basicServiceItem = { ...serviceItem }; +basicServiceItem.mtoServiceItemCode = SERVICE_ITEM_CODES.MS; +basicServiceItem.mtoServiceItemName = 'Move Management'; + describe('Payment service items', () => { it('Displays rejected service item with rejection reason', async () => { render( @@ -266,4 +272,30 @@ describe('Payment service items', () => { expect(screen.getByText('1.10701')).toBeVisible(); expect(screen.getByText('Base year: Award Term 1')).toBeVisible(); }); + + it('Displays rejected basic service item (Move Management) with rejection reason and no calculations', async () => { + render( + , + ); + + expect(screen.getByText('Move Management')).toBeVisible(); + expect(screen.getByText('$88,553.85')).toBeVisible(); + expect(screen.getByText('Rejected')).toBeVisible(); + + // Expand service item row + await act(async () => { + screen.getByText('Move Management').click(); + }); + + // Test for rejection reason + expect(screen.getByText('Rejection Reason')).toBeVisible(); + expect(screen.getByText('Rejection reason test text')).toBeVisible(); + }); }); From 87be21382d713769403585c1468660bebf85fa7b Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Tue, 28 Jan 2025 12:18:04 -0500 Subject: [PATCH 12/12] Removed unneeded conditional --- .../ExpandableServiceItemRow/ExpandableServiceItemRow.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx index 41e4295c642..e6cbba78392 100644 --- a/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx +++ b/src/components/Office/ExpandableServiceItemRow/ExpandableServiceItemRow.jsx @@ -26,7 +26,7 @@ const ExpandableServiceItemRow = ({ }; const canShowExpandableContent = !disableExpansion && - (allowedServiceItemCalculations.includes(serviceItem.mtoServiceItemCode) === true || serviceItem.rejectionReason); + (allowedServiceItemCalculations.includes(serviceItem.mtoServiceItemCode) || serviceItem.rejectionReason); const handleExpandClick = () => { setIsExpanded((prev) => !prev);