Merge pull request #14217 from transcom/B-20972-TIO-PPM

B 20972 tio ppm

playwright/tests/office/txo/tioFlows.spec.js

@@ -19,13 +19,16 @@ class TioFlowPage extends OfficePage {
   /**
    * @param {OfficePage} officePage
    * @param {Object} move
+   * @param {Boolean} usePaymentRequest
    * @override
    */
-  constructor(officePage, move) {
+  constructor(officePage, move, usePaymentRequest) {
     super(officePage.page, officePage.request);
     this.move = move;
     this.moveLocator = move.locator;
-    this.paymentRequest = this.findPaymentRequestBySequenceNumber(1);
+    if (usePaymentRequest !== false) {
+      this.paymentRequest = this.findPaymentRequestBySequenceNumber(1);
+    }
   }
 
   /**
@@ -182,7 +185,7 @@ test.describe('TIO user', () => {
       testMove = await officePage.testHarness.buildHHGMoveWithServiceItemsandPaymentRequestsForTIO();
       await officePage.signInAsNewTIOUser();
 
-      tioFlowPage = new TioFlowPage(officePage, testMove);
+      tioFlowPage = new TioFlowPage(officePage, testMove, true);
 
       const searchTab = officePage.page.getByTitle(TIOTabsTitles[1]);
       await searchTab.click();
@@ -330,7 +333,7 @@ test.describe('TIO user', () => {
       const move = await officePage.testHarness.buildHHGMoveWithServiceItemsandPaymentRequestsForTIO();
       await officePage.signInAsNewTIOUser();
 
-      tioFlowPage = new TioFlowPage(officePage, move);
+      tioFlowPage = new TioFlowPage(officePage, move, true);
       await tioFlowPage.waitForLoading();
       await officePage.tioNavigateToMove(tioFlowPage.moveLocator);
       await officePage.page.getByRole('heading', { name: 'Payment Requests', exact: true }).waitFor();
@@ -646,7 +649,7 @@ test.describe('TIO user', () => {
       const move = await officePage.testHarness.buildNTSRMoveWithPaymentRequest();
       await officePage.signInAsNewTIOUser();
 
-      tioFlowPage = new TioFlowPage(officePage, move);
+      tioFlowPage = new TioFlowPage(officePage, move, true);
       await tioFlowPage.waitForLoading();
       await officePage.tioNavigateToMove(tioFlowPage.moveLocator);
       await officePage.page.getByRole('heading', { name: 'Payment Requests', exact: true }).waitFor();
@@ -778,7 +781,7 @@ test.describe('TIO user', () => {
       const move = await officePage.testHarness.buildNTSRMoveWithServiceItemsAndPaymentRequest();
       await officePage.signInAsNewTIOUser();
 
-      tioFlowPage = new TioFlowPage(officePage, move);
+      tioFlowPage = new TioFlowPage(officePage, move, true);
       await tioFlowPage.waitForLoading();
       await officePage.tioNavigateToMove(tioFlowPage.moveLocator);
       await officePage.page.getByRole('heading', { name: 'Payment Requests', exact: true }).waitFor();
@@ -864,4 +867,45 @@ test.describe('TIO user', () => {
       await expect(page.getByRole('heading', { name: 'Payment requests' })).toBeVisible();
     });
   });
+
+  test.describe('with PPM moves with weight tickets and documents', () => {
+    test.beforeEach(async ({ officePage }) => {
+      testMove = await officePage.testHarness.buildApprovedMoveWithPPMMovingExpenseOffice();
+      await officePage.signInAsNewTIOUser();
+      tioFlowPage = new TioFlowPage(officePage, testMove, false);
+      const searchTab = officePage.page.getByTitle(TIOTabsTitles[1]);
+      await searchTab.click();
+    });
+
+    test('can view PPM review documents', async ({ page }) => {
+      const locator = `PPM ${testMove.locator}`;
+      const selectedRadio = page.getByRole('group').locator(`label:text("${SearchRBSelection[0]}")`);
+      await selectedRadio.click();
+      await page.getByTestId('searchText').fill(testMove.locator);
+      await page.getByTestId('searchTextSubmit').click();
+
+      await expect(page.getByText('Results')).toBeVisible();
+      await expect(page.getByTestId('locator-0')).toContainText(testMove.locator);
+      await page.getByTestId('locator-0').click();
+      await page.getByRole('button', { name: 'Review shipment weights' }).click();
+      await page.getByRole('button', { name: 'Review shipment weights' }).click();
+      await expect(page.getByText(locator)).toBeVisible();
+      await expect(page.getByText('Shipment Info')).toBeVisible();
+
+      await expect(page.getByText('Planned Move Start Date')).toBeVisible();
+      await expect(page.getByText('Actual Move Start Date')).toBeVisible();
+      await expect(page.getByText('Starting Address')).toBeVisible();
+      await expect(page.getByText('Ending Address')).toBeVisible();
+      await expect(page.getByText('Miles')).toBeVisible();
+      await expect(page.getByText('Estimated Net Weight')).toBeVisible();
+      await expect(page.getByText('Actual Net Weight')).toBeVisible();
+      await expect(page.getByText('Allowable Weight')).toBeVisible();
+      await expect(page.getByText('SENT TO CUSTOMER')).toBeVisible();
+      await expect(page.getByText('TRIP 1')).toBeVisible();
+      await expect(page.getByText('RECEIPT 1')).toBeVisible();
+      await expect(page.getByText('RECEIPT 2')).toBeVisible();
+
+      await page.getByRole('button', { name: 'Done' }).click();
+    });
+  });
 });

src/components/Office/PPM/PPMHeaderSummary/PPMHeaderSummary.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { number, bool } from 'prop-types';
+import { string, bool } from 'prop-types';
 import classnames from 'classnames';
 import { Tag } from '@trussworks/react-uswds';
 
@@ -64,7 +64,6 @@ const GCCAndIncentiveInfo = ({ ppmShipmentInfo, updatedItemName, setUpdatedItemN
 };
 export default function PPMHeaderSummary({ ppmShipmentInfo, order, ppmNumber, showAllFields, readOnly }) {
   const [updatedItemName, setUpdatedItemName] = useState('');
-
   const shipmentInfo = {
     plannedMoveDate: ppmShipmentInfo.expectedDepartureDate,
     actualMoveDate: ppmShipmentInfo.actualMoveDate,
@@ -119,7 +118,7 @@ export default function PPMHeaderSummary({ ppmShipmentInfo, order, ppmNumber, sh
 }
 
 PPMHeaderSummary.propTypes = {
-  ppmNumber: number.isRequired,
+  ppmNumber: string.isRequired,
   showAllFields: bool.isRequired,
 };
 

src/components/Office/PPM/PPMHeaderSummary/PPMHeaderSummary.test.jsx

@@ -160,8 +160,9 @@ const defaultProps = {
     actualWeight: 3500,
     isActualExpenseReimbursement: true,
   },
-  ppmNumber: 1,
+  ppmNumber: '1',
   showAllFields: false,
+  readOnly: false,
 };
 
 describe('PPMHeaderSummary component', () => {

src/components/Office/PPM/ReviewDocumentsSidePanel/ReviewDocumentsSidePanel.jsx

@@ -4,7 +4,7 @@ import { Form } from '@trussworks/react-uswds';
 import { Formik } from 'formik';
 import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { arrayOf, func, number, object } from 'prop-types';
+import { arrayOf, bool, func, string, object } from 'prop-types';
 import moment from 'moment';
 
 import PPMHeaderSummary from '../PPMHeaderSummary/PPMHeaderSummary';
@@ -31,10 +31,12 @@ export default function ReviewDocumentsSidePanel({
   proGearTickets,
   weightTickets,
   readOnly,
+  showAllFields,
   order,
 }) {
   let status;
   let showReason;
+  const showAllFieldsBool = showAllFields;
 
   const { mutate: patchDocumentsSetStatusMutation } = useMutation(patchPPMDocumentsSetStatus, {
     onSuccess,
@@ -68,14 +70,22 @@ export default function ReviewDocumentsSidePanel({
         </div>
       );
       showReason = true;
-    } else {
+    } else if (ticket.status === PPMDocumentsStatus.REJECTED) {
       status = (
         <div className={styles.iconRow}>
           <FontAwesomeIcon icon="times" />
           <span>Reject</span>
         </div>
       );
       showReason = true;
+    } else {
+      status = (
+        <div className={styles.iconRow}>
+          <FontAwesomeIcon icon="rotate-right" />
+          <span>Pending</span>
+        </div>
+      );
+      showReason = true;
     }
     return status;
   };
@@ -107,11 +117,11 @@ export default function ReviewDocumentsSidePanel({
             ppmShipmentInfo={ppmShipmentInfo}
             order={order}
             ppmNumber={ppmNumber}
-            showAllFields
+            showAllFields={showAllFieldsBool}
             readOnly={readOnly}
           />
         </div>
-        <Form className={classnames(formStyles.form, styles.ReviewDocumentsSidePanel)}>
+        <Form style={{ maxWidth: 'none' }} className={classnames(formStyles.form, styles.ReviewDocumentsSidePanel)}>
           <hr />
           <h3 className={styles.send}>{readOnly ? 'Sent to customer' : 'Send to customer?'}</h3>
           <DocumentViewerSidebar.Content className={styles.sideBar}>
@@ -264,23 +274,25 @@ export default function ReviewDocumentsSidePanel({
 
 ReviewDocumentsSidePanel.propTypes = {
   ppmShipment: PPMShipmentShape,
-  ppmNumber: number,
+  ppmNumber: string,
   formRef: object,
   onSuccess: func,
   onError: func,
   expenseTickets: arrayOf(ExpenseShape),
   proGearTickets: arrayOf(ProGearTicketShape),
   weightTickets: arrayOf(WeightTicketShape),
+  showAllFields: bool,
   order: OrderShape.isRequired,
 };
 
 ReviewDocumentsSidePanel.defaultProps = {
   ppmShipment: undefined,
-  ppmNumber: 1,
+  ppmNumber: '1',
   formRef: null,
   onSuccess: () => {},
   onError: () => {},
   expenseTickets: [],
   proGearTickets: [],
   weightTickets: [],
+  showAllFields: true,
 };

src/components/Office/PPM/ReviewDocumentsSidePanel/ReviewDocumentsSidePanel.module.scss

@@ -126,6 +126,12 @@
     margin-left: 17px;
     margin-right: 9px;
   }
+
+  [data-icon='rotate-right'] {
+    color: $warning;
+    margin-left: 17px;
+    margin-right: 9px;
+  }
 }
 
 .container .ReviewDocumentsSidePanel main {

src/components/Office/PPM/ReviewExpense/ReviewExpense.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { func, number, object } from 'prop-types';
+import { func, number, string, object } from 'prop-types';
 import { Formik, Field } from 'formik';
 import classnames from 'classnames';
 import { FormGroup, Label, Radio, Textarea } from '@trussworks/react-uswds';
@@ -560,7 +560,7 @@ export default function ReviewExpense({
 ReviewExpense.propTypes = {
   expense: ExpenseShape,
   tripNumber: number.isRequired,
-  ppmNumber: number.isRequired,
+  ppmNumber: string.isRequired,
   onSuccess: func,
   formRef: object,
   order: OrderShape.isRequired,

src/components/Office/PPM/ReviewExpense/ReviewExpense.stories.jsx

@@ -146,7 +146,7 @@ Blank.args = {
   documentSets: documentSetsProps,
   documentSetIndex,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
 };
 
 export const NonStorage = Template.bind({});
@@ -155,7 +155,7 @@ NonStorage.args = {
   documentSets: documentSetsProps,
   documentSetIndex,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
   categoryIndex: 1,
   expense: {
     movingExpenseType: expenseTypes.PACKING_MATERIALS,
@@ -170,7 +170,7 @@ Storage.args = {
   documentSetIndex,
   ppmShipmentInfo: PPMShipmentInfo,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
   categoryIndex: 1,
   expense: {
     movingExpenseType: expenseTypes.STORAGE,

src/components/Office/PPM/ReviewProGear/ReviewProGear.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { func, number, object } from 'prop-types';
+import { func, number, string, object } from 'prop-types';
 import { Field, Formik } from 'formik';
 import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -295,7 +295,7 @@ export default function ReviewProGear({
 ReviewProGear.propTypes = {
   proGear: ProGearTicketShape,
   tripNumber: number.isRequired,
-  ppmNumber: number.isRequired,
+  ppmNumber: string.isRequired,
   onSuccess: func,
   formRef: object,
   order: OrderShape.isRequired,

src/components/Office/PPM/ReviewProGear/ReviewProGear.stories.jsx

@@ -33,14 +33,14 @@ export const Blank = Template.bind({});
 Blank.args = {
   ppmShipmentInfo: PPMShipmentInfo,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
 };
 
 export const FilledIn = Template.bind({});
 FilledIn.args = {
   ppmShipmentInfo: PPMShipmentInfo,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
   proGear: {
     belongsToSelf: true,
     proGearDocument: [],

src/components/Office/PPM/ReviewProGear/ReviewProGear.test.jsx

@@ -22,7 +22,7 @@ const defaultProps = {
     actualWeight: 3500,
   },
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
   showAllFields: false,
 };
 

src/components/Office/PPM/ReviewWeightTicket/ReviewWeightTicket.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { func, number, object, PropTypes } from 'prop-types';
+import { func, number, string, object, PropTypes } from 'prop-types';
 import { Field, Formik } from 'formik';
 import classnames from 'classnames';
 import { Alert, FormGroup, Label, Radio, Textarea } from '@trussworks/react-uswds';
@@ -434,7 +434,7 @@ ReviewWeightTicket.propTypes = {
   weightTicket: WeightTicketShape,
   mtoShipment: ShipmentShape,
   tripNumber: number.isRequired,
-  ppmNumber: number.isRequired,
+  ppmNumber: string.isRequired,
   onSuccess: func,
   formRef: object,
   currentMtoShipments: PropTypes.arrayOf(ShipmentShape),

src/components/Office/PPM/ReviewWeightTicket/ReviewWeightTicket.stories.jsx

@@ -33,7 +33,7 @@ export const Blank = Template.bind({});
 Blank.args = {
   ppmShipmentInfo: PPMShipmentInfo,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
   weightTicket: {
     vehicleDescription: 'Kia Forte',
     emptyWeight: 600,
@@ -65,7 +65,7 @@ export const FilledIn = Template.bind({});
 FilledIn.args = {
   ppmShipmentInfo: PPMShipmentInfo,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
   weightTicket: {
     vehicleDescription: 'Kia Forte',
     emptyWeight: 600,
@@ -97,7 +97,7 @@ export const MissingWeightTickets = Template.bind({});
 MissingWeightTickets.args = {
   ppmShipmentInfo: PPMShipmentInfo,
   tripNumber: 1,
-  ppmNumber: 1,
+  ppmNumber: '1',
   weightTicket: {
     vehicleDescription: 'Kia Forte',
     emptyWeight: 6000,

src/components/Office/PPM/ReviewWeightTicket/ReviewWeightTicket.test.jsx

@@ -33,7 +33,7 @@ const defaultProps = {
   },
   tripNumber: 1,
   showAllFields: false,
-  ppmNumber: 1,
+  ppmNumber: '1',
   setCurrentMtoShipments: mockCallback,
 };
 

src/components/Office/WeightSummary/WeightSummary.jsx

@@ -26,6 +26,7 @@ const WeightSummary = ({ maxBillableWeight, weightRequested, weightAllowance, to
     if (shipment.shipmentType === SHIPMENT_OPTIONS.HHG && countHHG <= 1) return 'HHG';
     if (shipment.shipmentType === SHIPMENT_OPTIONS.NTS) return 'NTS';
     if (shipment.shipmentType === SHIPMENT_OPTIONS.NTSR) return 'NTSR';
+    if (shipment.shipmentType === SHIPMENT_OPTIONS.PPM) return 'PPM';
     return '';
   };
 
@@ -87,7 +88,7 @@ WeightSummary.propTypes = {
   totalBillableWeight: number.isRequired,
   shipments: arrayOf(
     shape({
-      calculatedBillableWeight: number.isRequired,
+      calculatedBillableWeight: number,
       primeEstimatedWeight: number,
     }),
   ).isRequired,