Merge branch 'master' into rr-MB-13510-add-gci-linter

cypress/integration/office/qaecsr/csrFlows.js

@@ -26,8 +26,9 @@ describe('Customer Support User Flows', () => {
     const editString = '-edit';
 
     // Moves queue (eventually will come via QAE/CSR move search)
-    cy.wait(['@getSortedOrders']);
-    cy.contains(moveLocator).click();
+    cy.wait(2000);
+
+    cy.contains(moveLocator).click({ force: true });
     cy.url().should('include', `/moves/${moveLocator}/details`);
 
     // Move Details page
@@ -120,6 +121,10 @@ describe('Customer Support User Flows', () => {
     cy.contains('Sign out').click();
     cy.apiSignInAsUser('3b2cc1b0-31a2-4d1b-874f-0591f9127374', TIOOfficeUserType);
 
+    // Manual wait added to ensure that the queue loads before checking for the corresponding row
+    // For some reason, this won't work properly on CircleCI with a named intercept wait
+    cy.wait(2000);
+
     // Validate another user can not edit or delete the remark
     cy.contains(moveLocator).click({ force: true });
     cy.wait(['@getMoves', '@getOrders', '@getMTOShipments']);

cypress/integration/office/servicescounseling/servicesCounselingFlows.js

@@ -184,7 +184,7 @@ describe('Services counselor user', () => {
       cy.get('input[name="dependentsAuthorized"]').siblings('label[for="dependentsAuthorizedInput"]').click();
 
       // Edit allowances page | Save
-      cy.get('[data-testid="scAllowancesSave"]').should('be.enabled').click().should('be.disabled');
+      cy.get('[data-testid="scAllowancesSave"]').should('be.enabled').click();
     });
 
     cy.wait(['@patchAllowances']);

cypress/integration/office/txo/tooFlows.js

@@ -301,7 +301,7 @@ describe('TOO user', () => {
       cy.get('input[name="dependentsAuthorized"]').siblings('label[for="dependentsAuthorizedInput"]').click();
 
       // Edit allowances page | Save
-      cy.get('button').contains('Save').should('be.enabled').click().should('be.disabled');
+      cy.get('button').contains('Save').should('be.enabled').click();
     });
 
     cy.wait(['@patchAllowances']);

package.json

@@ -122,7 +122,7 @@
     "@babel/helper-builder-react-jsx-experimental": "^7.12.11",
     "@dump247/storybook-state": "^1.6.1",
     "@stoplight/spectral-cli": "^6.5.0",
-    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-knobs": "^6.4.0",
     "@storybook/addon-links": "^6.5.10",

src/components/Customer/PPM/Closeout/ExpenseForm/ExpenseForm.jsx

@@ -7,7 +7,9 @@ import * as Yup from 'yup';
 
 import styles from './ExpenseForm.module.scss';
 
+import { formatCents } from 'utils/formatters';
 import numOfDaysBetweenDates from 'utils/dates';
+import { ppmExpenseTypes } from 'constants/ppmExpenseTypes';
 import { ExpenseShape } from 'types/shipment';
 import ppmStyles from 'components/Customer/PPM/PPM.module.scss';
 import SectionWrapper from 'components/Customer/SectionWrapper';
@@ -26,19 +28,19 @@ const validationSchema = Yup.object().shape({
   expenseType: Yup.string().required('Required'),
   description: Yup.string().required('Required'),
   paidWithGTCC: Yup.boolean().required('Required'),
-  amount: Yup.number().required('Required'),
+  amount: Yup.string().notOneOf(['0', '0.00'], 'Please enter a non-zero amount').required('Required'),
   missingReceipt: Yup.boolean().required('Required'),
   receiptDocument: Yup.array().of(uploadShape).min(1, 'At least one upload is required'),
   sitStartDate: Yup.date()
     .typeError('Enter a complete date in DD MMM YYYY format (day, month, year).')
     .when('expenseType', {
-      is: 'storage',
+      is: 'STORAGE',
       then: (schema) => schema.required('Required'),
     }),
   sitEndDate: Yup.date()
     .typeError('Enter a complete date in DD MMM YYYY format (day, month, year).')
     .when('expenseType', {
-      is: 'storage',
+      is: 'STORAGE',
       then: (schema) => schema.required('Required'),
     }),
 });
@@ -59,24 +61,15 @@ const ExpenseForm = ({
     expenseType: expenseType || '',
     description: description || '',
     paidWithGTCC: paidWithGTCC ? 'true' : 'false',
-    amount: amount ? `${amount}` : '',
+    amount: amount ? `${formatCents(amount)}` : '',
     missingReceipt: !!missingReceipt,
     receiptDocument: receiptDocument?.uploads || [],
     sitStartDate: sitStartDate || '',
     sitEndDate: sitEndDate || '',
   };
 
   const receiptDocumentRef = createRef();
-  const expenseOptions = [
-    { value: 'Contracted expense', key: 'contracted_expense' },
-    { value: 'Oil', key: 'oil' },
-    { value: 'Packing materials', key: 'packing_materials' },
-    { value: 'Rental equipment', key: 'rental_equipment' },
-    { value: 'Storage', key: 'storage' },
-    { value: 'Tolls', key: 'tolls' },
-    { value: 'Weighing fee', key: 'weighing_fee' },
-    { value: 'Other', key: 'other' },
-  ];
+
   return (
     <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
       {({ isValid, isSubmitting, handleSubmit, values, errors, ...formikProps }) => {
@@ -86,7 +79,7 @@ const ExpenseForm = ({
               <SectionWrapper className={classnames(ppmStyles.sectionWrapper, formStyles.formSection)}>
                 <h2>{`Receipt ${receiptNumber}`}</h2>
                 <FormGroup>
-                  <DropdownInput label="Select type" name="expenseType" options={expenseOptions} id="expenseType" />
+                  <DropdownInput label="Select type" name="expenseType" options={ppmExpenseTypes} id="expenseType" />
                 </FormGroup>
                 {values.expenseType && (
                   <>
@@ -123,8 +116,11 @@ const ExpenseForm = ({
                         label="Amount"
                         id="amount"
                         mask={Number}
-                        scale={0} // digits after point, 0 for integers
+                        scale={2} // digits after point, 0 for integers
                         signed={false} // disallow negative
+                        radix="." // fractional delimiter
+                        mapToRadix={['.']} // symbols to process as radix
+                        padFractionalZeros // if true, then pads zeros at end to the length of scale
                         thousandsSeparator=","
                         lazy={false} // immediate masking evaluation
                         prefix="$"
@@ -182,7 +178,7 @@ const ExpenseForm = ({
                     </FormGroup>
                   </>
                 )}
-                {values.expenseType === 'storage' && (
+                {values.expenseType === 'STORAGE' && (
                   <FormGroup>
                     <h3>Dates</h3>
                     <DatePickerInput name="sitStartDate" label="Start date" />

src/components/Customer/PPM/Closeout/ExpenseForm/ExpenseForm.stories.jsx

@@ -3,6 +3,7 @@ import { Grid, GridContainer } from '@trussworks/react-uswds';
 
 import ExpenseForm from 'components/Customer/PPM/Closeout/ExpenseForm/ExpenseForm';
 import { SHIPMENT_OPTIONS } from 'shared/constants';
+import { expenseTypes } from 'constants/ppmExpenseTypes';
 
 export default {
   title: 'Customer Components / PPM Closeout / Expenses PPM Form',
@@ -52,11 +53,11 @@ ExistingExpenses.args = {
   expense: {
     id: '32ecb311-edbe-4fd4-96ee-bd693113f3f3',
     ppmShipmentId: '343bb456-63af-4f76-89bd-7403094a5c4d',
-    expenseType: 'packing_materials',
+    expenseType: expenseTypes.PACKING_MATERIALS,
     description: 'bubble wrap',
     missingReceipt: false,
     paidWithGTCC: false,
-    amount: 600,
+    amount: 60000,
     receiptDocument: {
       uploads: [
         {
@@ -86,11 +87,11 @@ SITExpenses.args = {
   expense: {
     id: '32ecb311-edbe-4fd4-96ee-bd693113f3f3',
     ppmShipmentId: '343bb456-63af-4f76-89bd-7403094a5c4d',
-    expenseType: 'storage',
+    expenseType: expenseTypes.STORAGE,
     description: '10x10 storage pod',
     missingReceipt: false,
     paidWithGTCC: false,
-    amount: 1600,
+    amount: 160097,
     sitStartDate: '2022-09-23',
     sitEndDate: '2022-12-25',
     receiptDocument: {

src/components/Customer/PPM/Closeout/ExpenseForm/ExpenseForm.test.jsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 
 import ExpenseForm from 'components/Customer/PPM/Closeout/ExpenseForm/ExpenseForm';
 import { DocumentAndImageUploadInstructions } from 'content/uploads';
+import { expenseTypes } from 'constants/ppmExpenseTypes';
 
 beforeEach(() => {
   jest.clearAllMocks();
@@ -13,7 +14,7 @@ const defaultProps = {
   expense: {
     id: '32ecb311-edbe-4fd4-96ee-bd693113f3f3',
     ppmShipmentId: '343bb456-63af-4f76-89bd-7403094a5c4d',
-    expenseType: 'packing_materials',
+    expenseType: expenseTypes.PACKING_MATERIALS,
   },
   receiptNumber: '1',
   onCreateUpload: jest.fn(),
@@ -27,7 +28,7 @@ const missingReceiptProps = {
   expense: {
     id: '32ecb311-edbe-4fd4-96ee-bd693113f3f3',
     ppmShipmentId: '343bb456-63af-4f76-89bd-7403094a5c4d',
-    expenseType: 'packing_materials',
+    expenseType: expenseTypes.PACKING_MATERIALS,
     description: 'bubble wrap',
     missingReceipt: true,
   },
@@ -43,11 +44,11 @@ const expenseRequiredProps = {
   expense: {
     id: '32ecb311-edbe-4fd4-96ee-bd693113f3f3',
     ppmShipmentId: '343bb456-63af-4f76-89bd-7403094a5c4d',
-    expenseType: 'packing_materials',
+    expenseType: expenseTypes.PACKING_MATERIALS,
     description: 'bubble wrap',
     missingReceipt: false,
     paidWithGTCC: false,
-    amount: 600,
+    amount: 60000,
     receiptDocument: {
       uploads: [
         {
@@ -67,11 +68,11 @@ const sitExpenseProps = {
   expense: {
     id: '32ecb311-edbe-4fd4-96ee-bd693113f3f3',
     ppmShipmentId: '343bb456-63af-4f76-89bd-7403094a5c4d',
-    expenseType: 'storage',
+    expenseType: expenseTypes.STORAGE,
     description: '10x10 storage pod',
     missingReceipt: false,
     paidWithGTCC: false,
-    amount: 1600,
+    amount: 16099,
     sitStartDate: '2022-09-24',
     sitEndDate: '2022-12-26',
     receiptDocument: {
@@ -132,7 +133,7 @@ describe('ExpenseForm component', () => {
         expect(screen.getByLabelText('What did you buy?')).toHaveDisplayValue('bubble wrap');
       });
       expect(screen.getByLabelText('Select type')).toBeInstanceOf(HTMLSelectElement);
-      expect(screen.getByRole('option', { name: 'Packing materials' }).selected).toBe(true);
+      expect(screen.getAllByRole('option')[3].selected).toBe(true);
       expect(screen.getByText('expenseReceipt.pdf')).toBeInTheDocument();
       const deleteButton = screen.getByRole('button', { name: 'Delete' });
       expect(deleteButton).toBeInTheDocument();

src/components/Office/EvaluationForm/EvaluationForm.jsx

@@ -250,7 +250,7 @@ const EvaluationForm = ({ evaluationReport }) => {
                             <DropdownInput
                               id="hour"
                               name="hour"
-                              label="Hour"
+                              label="Hours"
                               className={styles.hourPicker}
                               onChange={(e) => {
                                 setFieldValue('hour', e.target.value);
@@ -262,7 +262,7 @@ const EvaluationForm = ({ evaluationReport }) => {
                             <DropdownInput
                               id="minute"
                               name="minute"
-                              label="Minute"
+                              label="Minutes"
                               className={styles.minutePicker}
                               onChange={(e) => {
                                 setFieldValue('minute', e.target.value);
@@ -340,7 +340,7 @@ const EvaluationForm = ({ evaluationReport }) => {
                           <DropdownInput
                             id="hour"
                             name="evalLengthHour"
-                            label="Hour"
+                            label="Hours"
                             className={styles.hourPicker}
                             onChange={(e) => {
                               setFieldValue('evalLengthHour', e.target.value);
@@ -352,7 +352,7 @@ const EvaluationForm = ({ evaluationReport }) => {
                           <DropdownInput
                             id="minute"
                             name="evalLengthMinute"
-                            label="Minute"
+                            label="Minutes"
                             className={styles.minutePicker}
                             onChange={(e) => {
                               setFieldValue('evalLengthMinute', e.target.value);

src/components/Office/ShipmentForm/ShipmentForm.jsx

@@ -573,8 +573,8 @@ const ShipmentForm = (props) => {
                     showHint={false}
                     error={
                       errors.counselorRemarks &&
-                      (String(values.advanceRequested) !== String(mtoShipment.ppmShipment?.hasRequestedAdvance) ||
-                        String(values.advance) !== String(mtoShipment.ppmShipment?.advanceAmountRequested))
+                      (values.advanceRequested !== mtoShipment.ppmShipment?.hasRequestedAdvance ||
+                        values.advance !== mtoShipment.ppmShipment?.advanceAmountRequested)
                     }
                   />
                 )}