Merge pull request #14303 from transcom/INT-B-21373_validation_submit…

…_move_details_task_order_with_files

Int b 21373 validation submit move details task order with files

src/components/DocumentViewer/DocumentViewer.stories.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
 import DocumentViewer from './DocumentViewer';
 import pdf from './sample.pdf';
@@ -57,18 +58,24 @@ const testImageFiles = [
 
 export const PDFViewer = () => (
   <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-    <DocumentViewer files={testPDFFiles} />
+    <QueryClientProvider client={new QueryClient()}>
+      <DocumentViewer files={testPDFFiles} />
+    </QueryClientProvider>
   </div>
 );
 
 export const ImageViewer = () => (
   <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-    <DocumentViewer files={testImageFiles} />
+    <QueryClientProvider client={new QueryClient()}>
+      <DocumentViewer files={testImageFiles} />
+    </QueryClientProvider>
   </div>
 );
 
 export const DisplayDownloadOption = () => (
   <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
-    <DocumentViewer files={testImageFiles} allowDownload />
+    <QueryClientProvider client={new QueryClient()}>
+      <DocumentViewer files={testImageFiles} allowDownload />
+    </QueryClientProvider>
   </div>
 );

src/components/DocumentViewerFileManager/DocumentViewerFileManager.jsx

@@ -28,6 +28,7 @@ const DocumentViewerFileManager = ({
   files,
   documentType,
   updateAmendedDocument,
+  fileUploadRequired,
 }) => {
   const queryClient = useQueryClient();
   const filePondEl = useRef();
@@ -69,7 +70,10 @@ const DocumentViewerFileManager = ({
       setShowUpload(true);
       setIsExpandedView(true);
     }
-  }, [documentType]);
+    if (fileUploadRequired) {
+      setShowUpload(true);
+    }
+  }, [documentType, fileUploadRequired]);
 
   const closeDeleteFileModal = () => {
     setCurrentFile(null);
@@ -217,7 +221,7 @@ const DocumentViewerFileManager = ({
         />
       )}
       {!isExpandedView && (
-        <Button disabled={isFileProcessing} onClick={toggleUploadVisibility}>
+        <Button disabled={isFileProcessing || fileUploadRequired} onClick={toggleUploadVisibility}>
           {buttonHeaderText}
         </Button>
       )}
@@ -232,15 +236,21 @@ const DocumentViewerFileManager = ({
             )}
             <UploadsTable className={styles.sectionWrapper} uploads={files} onDelete={openDeleteFileModal} />
             <div className={classnames(styles.upload, className)}>
+              {fileUploadRequired && (
+                <Alert type="error" id="fileRequiredAlert" data-testid="fileRequiredAlert">
+                  File upload is required
+                </Alert>
+              )}
               <FileUpload
+                required={fileUploadRequired}
                 ref={filePondEl}
                 createUpload={handleUpload}
                 onChange={handleChange}
                 labelIdle={'Drag files here or <span class="filepond--label-action">click</span> to upload'}
               />
               <Hint>PDF, JPG, or PNG only. Maximum file size 25MB. Each page must be clear and legible</Hint>
               {!isExpandedView && (
-                <Button disabled={isFileProcessing} onClick={toggleUploadVisibility}>
+                <Button disabled={isFileProcessing || fileUploadRequired} onClick={toggleUploadVisibility}>
                   Done
                 </Button>
               )}

src/components/DocumentViewerFileManager/DocumentViewerFileManager.test.jsx

@@ -96,6 +96,14 @@ describe('DocumentViewerFileManager', () => {
     updateAmendedDocument: jest.fn(),
   };
 
+  const ordersPropsNoFile = {
+    move: { id: 'move-id', locator: 'move-locator' },
+    orderId: 'order-id',
+    fileUploadRequired: true,
+    documentId: '',
+    files: [{}],
+    documentType: 'ORDERS',
+  };
   it('renders without crashing', () => {
     renderWithQueryClient(<DocumentViewerFileManager {...defaultProps} />);
     expect(screen.getByText('Manage Orders')).toBeInTheDocument();
@@ -287,4 +295,24 @@ describe('DocumentViewerFileManager', () => {
 
     expect(await screen.findByText(/failed to upload due to server error: upload failed/i)).toBeInTheDocument();
   });
+
+  it('should disable the Manage Orders button', () => {
+    renderWithQueryClient(<DocumentViewerFileManager {...ordersPropsNoFile} />);
+    const manageDocumentsButton = screen.getByRole('button', { name: /manage orders/i });
+    expect(manageDocumentsButton).toBeInTheDocument();
+    expect(manageDocumentsButton).toBeDisabled();
+  });
+  it('should display File upload is required alert', () => {
+    renderWithQueryClient(<DocumentViewerFileManager {...ordersPropsNoFile} />);
+
+    expect(screen.getByTestId('fileRequiredAlert')).toBeInTheDocument();
+    expect(screen.getByTestId('fileRequiredAlert')).toHaveTextContent('File upload is required');
+  });
+  it('should disable the Manage Orders Done button', () => {
+    renderWithQueryClient(<DocumentViewerFileManager {...ordersPropsNoFile} />);
+
+    const manageDocumentsDoneButton = screen.getByRole('button', { name: /done/i });
+    expect(manageDocumentsDoneButton).toBeInTheDocument();
+    expect(manageDocumentsDoneButton).toBeDisabled();
+  });
 });

src/components/FileUpload/FileUpload.jsx

@@ -35,6 +35,7 @@ const FileUpload = forwardRef(
       maxParralelUploads,
       fileValidateTypeLabelExpectedTypes,
       labelFileTypeNotAllowed,
+      required,
     },
     ref,
   ) => {
@@ -90,6 +91,7 @@ const FileUpload = forwardRef(
     /* eslint-disable react/jsx-props-no-spreading */
     return (
       <FilePond
+        required={required}
         ref={ref}
         {...filePondProps}
         className={className}
@@ -107,6 +109,7 @@ const FileUpload = forwardRef(
 );
 
 FileUpload.propTypes = {
+  required: bool,
   name: string,
   className: string,
   createUpload: func,
@@ -123,6 +126,7 @@ FileUpload.propTypes = {
 };
 
 FileUpload.defaultProps = {
+  required: false,
   name: 'file',
   className: null,
   createUpload: createUploadApi,

src/components/Office/RequestedShipments/RequestedShipments.test.jsx

@@ -389,7 +389,28 @@ describe('RequestedShipments', () => {
         },
       ]);
     });
-
+    it('should disable the Approve selected button when order document upload is missing', async () => {
+      const { container } = render(
+        <MockProviders permissions={[permissionTypes.updateShipment]}>
+          <SubmittedRequestedShipments
+            mtoShipments={shipments}
+            ordersInfo={{ ...ordersInfo, ordersDocuments: ordersInfo.ordersDocuments[{}] }}
+            allowancesInfo={allowancesInfo}
+            customerInfo={customerInfo}
+            moveTaskOrder={moveTaskOrder}
+            moveCode="TE5TC0DE"
+          />
+        </MockProviders>,
+      );
+      await act(async () => {
+        await userEvent.type(
+          container.querySelector('input[name="shipments"]'),
+          'ce01a5b8-9b44-4511-8a8d-edb60f2a4aee',
+        );
+      });
+      expect(screen.getByLabelText('Move management').checked).toEqual(true);
+      expect(screen.getByRole('button', { name: 'Approve selected' })).toBeDisabled();
+    });
     it('displays approved basic service items for approved shipments', () => {
       render(
         <ApprovedRequestedShipments

src/components/Office/RequestedShipments/SubmittedRequestedShipments.jsx

@@ -102,6 +102,7 @@ const SubmittedRequestedShipments = ({
 
   const { moveCode } = useParams();
   const navigate = useNavigate();
+  const hasOrderDocuments = ordersInfo.ordersDocuments?.length > 0;
   const handleButtonDropdownChange = (e) => {
     const selectedOption = e.target.value;
 
@@ -256,10 +257,11 @@ const SubmittedRequestedShipments = ({
   // if showing service items on a move with Prime shipments, enable button when shipment and service item are selected and there is no missing required Orders information
   // if not showing service items on a move with Prime shipments, enable button if a shipment is selected and there is no missing required Orders information
   const primeShipmentsForApproval = moveTaskOrder.availableToPrimeAt
-    ? formik.values.shipments.length > 0 && !missingRequiredOrdersInfo
+    ? formik.values.shipments.length > 0 && !missingRequiredOrdersInfo && hasOrderDocuments
     : formik.values.shipments.length > 0 &&
       (formik.values.counselingFee || formik.values.shipmentManagementFee) &&
-      !missingRequiredOrdersInfo;
+      !missingRequiredOrdersInfo &&
+      hasOrderDocuments;
 
   // on a move with only External Vendor shipments enable button if a service item is selected
   const externalVendorShipmentsOnly = formik.values.counselingFee || formik.values.shipmentManagementFee;

src/pages/Office/Orders/Orders.jsx

@@ -26,6 +26,7 @@ import { LOA_TYPE, MOVE_DOCUMENT_TYPE } from 'shared/constants';
 import Restricted from 'components/Restricted/Restricted';
 import { permissionTypes } from 'constants/permissions';
 import DocumentViewerFileManager from 'components/DocumentViewerFileManager/DocumentViewerFileManager';
+import { scrollToViewFormikError } from 'utils/validation';
 
 const deptIndicatorDropdownOptions = dropdownInputOptions(DEPARTMENT_INDICATOR_OPTIONS);
 const ordersTypeDropdownOptions = dropdownInputOptions(ORDERS_TYPE_OPTIONS);
@@ -47,7 +48,7 @@ const Orders = ({ files, amendedDocumentId, updateAmendedDocument }) => {
 
   const ordersDocuments = files[MOVE_DOCUMENT_TYPE.ORDERS];
   const amendedDocuments = files[MOVE_DOCUMENT_TYPE.AMENDMENTS];
-
+  const hasOrdersDocuments = ordersDocuments?.length > 0;
   const handleClose = useCallback(() => {
     let redirectPath;
     if (from === 'paymentRequestDetails') {
@@ -369,6 +370,7 @@ const Orders = ({ files, amendedDocumentId, updateAmendedDocument }) => {
                   </div>
                   <Restricted to={permissionTypes.updateOrders}>
                     <DocumentViewerFileManager
+                      fileUploadRequired={!hasOrdersDocuments}
                       orderId={orderId}
                       documentId={documentId}
                       files={ordersDocuments}
@@ -433,7 +435,7 @@ const Orders = ({ files, amendedDocumentId, updateAmendedDocument }) => {
                 <Restricted to={permissionTypes.updateOrders}>
                   <div className={styles.bottom}>
                     <div className={styles.buttonGroup}>
-                      <Button disabled={formik.isSubmitting} type="submit">
+                      <Button disabled={formik.isSubmitting} type="submit" onClick={scrollToViewFormikError(formik)}>
                         Save
                       </Button>
                       <Button type="button" secondary onClick={handleClose}>

src/pages/Office/ServicesCounselingMoveDetails/ServicesCounselingMoveDetails.jsx

@@ -22,7 +22,7 @@ import FinancialReviewModal from 'components/Office/FinancialReviewModal/Financi
 import CancelMoveConfirmationModal from 'components/ConfirmationModals/CancelMoveConfirmationModal';
 import ShipmentDisplay from 'components/Office/ShipmentDisplay/ShipmentDisplay';
 import { SubmitMoveConfirmationModal } from 'components/Office/SubmitMoveConfirmationModal/SubmitMoveConfirmationModal';
-import { useMoveDetailsQueries, useOrdersDocumentQueries } from 'hooks/queries';
+import { useMoveDetailsQueries } from 'hooks/queries';
 import {
   updateMoveStatusServiceCounselingCompleted,
   cancelMove,
@@ -78,19 +78,13 @@ const ServicesCounselingMoveDetails = ({
   const [enableMobileHome, setEnableMobileHome] = useState(false);
   const [enableUB, setEnableUB] = useState(false);
   const [isOconusMove, setIsOconusMove] = useState(false);
-  const { upload, amendedUpload } = useOrdersDocumentQueries(moveCode);
   const [errorMessage, setErrorMessage] = useState(null);
-  const documentsForViewer = Object.values(upload || {})
-    .concat(Object.values(amendedUpload || {}))
-    ?.filter((file) => {
-      return !file.deletedAt;
-    });
-  const hasDocuments = documentsForViewer?.length > 0;
 
   const { order, orderDocuments, customerData, move, closeoutOffice, mtoShipments, isLoading, isError, errors } =
     useMoveDetailsQueries(moveCode);
 
   const validOrdersDocuments = Object.values(orderDocuments || {})?.filter((file) => !file.deletedAt);
+  const hasOrderDocuments = validOrdersDocuments?.length > 0;
 
   const { customer, entitlement: allowances, originDutyLocation, destinationDutyLocation } = order;
 
@@ -195,7 +189,13 @@ const ServicesCounselingMoveDetails = ({
     errorIfMissing.HHG_OUTOF_NTS_DOMESTIC.push({ fieldName: 'destinationType' });
   }
 
-  if (!order.department_indicator || !order.order_number || !order.order_type_detail || !order.tac || !hasDocuments)
+  if (
+    !order.department_indicator ||
+    !order.order_number ||
+    !order.order_type_detail ||
+    !order.tac ||
+    !hasOrderDocuments
+  )
     disableSubmitDueToMissingOrderInfo = true;
 
   if (mtoShipments) {