Merge pull request #13677 from transcom/B-19810-INT

B-19810 INT
transcom · Sep 13, 2024 · ff64926 · ff64926
2 parents 0937990 + a0bdfae
commit ff64926
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src/pages/Office/MovePaymentRequests/MovePaymentRequests.jsx b/src/pages/Office/MovePaymentRequests/MovePaymentRequests.jsx
@@ -134,10 +134,10 @@ const MovePaymentRequests = ({
     setUnapprovedServiceItemCount(serviceItemCount);
   }, [mtoShipments, setUnapprovedServiceItemCount]);
 
+  const pendingCount = paymentRequests?.filter((pr) => pr.status === paymentRequestStatus.PENDING).length;
   useEffect(() => {
-    const pendingCount = paymentRequests?.filter((pr) => pr.status === paymentRequestStatus.PENDING).length;
     setPendingPaymentRequestCount(pendingCount);
-  }, [paymentRequests, setPendingPaymentRequestCount]);
+  }, [pendingCount, setPendingPaymentRequestCount]);
 
   const excludePPMShipments = mtoShipments?.filter((shipment) => shipment.shipmentType !== 'PPM');
 
@@ -221,11 +221,12 @@ const MovePaymentRequests = ({
       <div className={txoStyles.container} data-testid="MovePaymentRequests">
         <LeftNav sections={sections}>
           <LeftNavTag
+            background="#e34b11"
             associatedSectionName="payment-requests"
-            showTag={paymentRequests?.length > 0}
-            testID="numOfPaymentRequestsTag"
+            showTag={pendingCount > 0}
+            testID="numOfPendingPaymentRequestsTag"
           >
-            {paymentRequests.length}
+            {pendingCount}
           </LeftNavTag>
           <LeftNavTag
             className={classnames('usa-tag usa-tag--alert', styles.errorTag)}

diff --git a/src/pages/Office/MovePaymentRequests/MovePaymentRequests.module.scss b/src/pages/Office/MovePaymentRequests/MovePaymentRequests.module.scss
@@ -7,7 +7,7 @@
 }
 
 .warning {
-  color: $warning;
+  color: $error;
 
   &.errorTag {
     width: 20px;

diff --git a/src/pages/Office/MovePaymentRequests/MovePaymentRequests.test.jsx b/src/pages/Office/MovePaymentRequests/MovePaymentRequests.test.jsx
@@ -498,10 +498,10 @@ describe('MovePaymentRequests', () => {
       });
     });
 
-    it('displays the number of payment request on leftnav sidebar', async () => {
+    it('displays the number of pending payment requests on leftnav sidebar', async () => {
       renderMovePaymentRequests(testProps);
       await waitFor(() => {
-        expect(screen.getByTestId('numOfPaymentRequestsTag').textContent).toEqual('2');
+        expect(screen.getByTestId('numOfPendingPaymentRequestsTag').textContent).toEqual('1');
       });
     });
   });
@@ -525,10 +525,10 @@ describe('MovePaymentRequests', () => {
       expect(paymentRequstNavLink.text).toContain(name);
     });
 
-    it('displays the number of payment request on leftnav sidebar', async () => {
+    it('does not display the number of pending payment requests on leftnav sidebar if no pending exist', async () => {
       renderMovePaymentRequests(testProps);
       await waitFor(() => {
-        expect(screen.getByTestId('numOfPaymentRequestsTag').textContent).toEqual('1');
+        expect(screen.queryByTestId('numOfPendingPaymentRequestsTag')).not.toBeInTheDocument();
       });
     });
   });