Int b 22701 ppm document loading mask service member

src/components/LoadingSpinner/LoadingSpinner.jsx

@@ -15,7 +15,7 @@ const LoadingSpinner = ({ message }) => (
         secondaryColor="#565c65"
         ariaLabel="Loading content, please wait"
       />
-      <p className={styles.message}>{message || 'Loading, please wait...'}</p>
+      <p className={styles.message}>{message || 'Loading, please wait'}...</p>
     </div>
   </div>
 );

src/components/LoadingSpinner/LoadingSpinner.test.jsx

@@ -14,11 +14,13 @@ describe('LoadingSpinner Component', () => {
   });
 
   test('renders the loading spinner with a custom message', () => {
-    const customMessage = 'Fetching data...';
+    const customMessage = 'Fetching data';
+    const ellipsis = '...';
+    const expectedMessage = customMessage + ellipsis;
     render(<LoadingSpinner message={customMessage} />);
 
     expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
 
-    expect(screen.getByText(customMessage)).toBeInTheDocument();
+    expect(screen.getByText(expectedMessage)).toBeInTheDocument();
   });
 });

src/components/PPMSummaryList/PPMSummaryList.jsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { arrayOf, bool, func, number } from 'prop-types';
 import { Button } from '@trussworks/react-uswds';
 
 import styles from './PPMSummaryList.module.scss';
 
 import SectionWrapper from 'components/Customer/SectionWrapper';
+import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner';
 import { ppmShipmentStatuses } from 'constants/shipments';
 import { ShipmentShape } from 'types/shipment';
 import { formatCustomerDate, formatAddressShort } from 'utils/formatters';
-import AsyncPacketDownloadLink from 'shared/AsyncPacketDownloadLink/AsyncPacketDownloadLink';
+import AsyncPacketDownloadLink, {
+  onPacketDownloadSuccessHandler,
+} from 'shared/AsyncPacketDownloadLink/AsyncPacketDownloadLink';
 import { downloadPPMPaymentPacket } from 'services/internalApi';
 import { isFeedbackAvailable } from 'constants/ppmFeedback';
 
@@ -90,10 +93,33 @@ const paymentReviewed = (approvedAt, submittedAt, reviewedAt, pickupAddress, des
 };
 
 const PPMSummaryStatus = (shipment, orderLabel, onButtonClick, onDownloadError, onFeedbackClick) => {
+  const [isDownloading, setIsDownloading] = useState(false);
   const {
     ppmShipment: { status, approvedAt, submittedAt, reviewedAt, pickupAddress, destinationAddress },
   } = shipment;
 
+  useEffect(() => {
+    if (isDownloading) {
+      document.body.classList.add('has-overlay');
+    } else {
+      document.body.classList.remove('has-overlay');
+    }
+
+    return () => {
+      document.body.classList.remove('has-overlay');
+    };
+  }, [isDownloading]);
+
+  const handleDownloadSuccess = (response) => {
+    setIsDownloading(false);
+    onPacketDownloadSuccessHandler(response);
+  };
+
+  const handleDownloadFailure = () => {
+    setIsDownloading(false);
+    onDownloadError();
+  };
+
   let actionButtons;
   let content;
 
@@ -128,7 +154,9 @@ const PPMSummaryStatus = (shipment, orderLabel, onButtonClick, onDownloadError,
               id={shipment?.ppmShipment?.id}
               label="Download Payment Packet"
               asyncRetrieval={downloadPPMPaymentPacket}
-              onFailure={onDownloadError}
+              onSuccess={handleDownloadSuccess}
+              onFailure={handleDownloadFailure}
+              onStart={() => setIsDownloading(true)}
               className="styles.btn"
             />
           </div>,
@@ -138,7 +166,9 @@ const PPMSummaryStatus = (shipment, orderLabel, onButtonClick, onDownloadError,
           id={shipment?.ppmShipment?.id}
           label="Download Payment Packet"
           asyncRetrieval={downloadPPMPaymentPacket}
-          onFailure={onDownloadError}
+          onSuccess={handleDownloadSuccess}
+          onFailure={handleDownloadFailure}
+          onStart={() => setIsDownloading(true)}
           className="styles.btn"
         />
       );
@@ -147,15 +177,17 @@ const PPMSummaryStatus = (shipment, orderLabel, onButtonClick, onDownloadError,
       break;
     default:
   }
-
   return (
-    <SectionWrapper className={styles['ppm-shipment']}>
-      <div className={styles['ppm-shipment__heading-section']}>
-        <strong>{orderLabel}</strong>
-        {actionButtons}
-      </div>
-      <div className={styles['ppm-shipment__content']}>{content}</div>
-    </SectionWrapper>
+    <div>
+      {isDownloading && <LoadingSpinner message="Downloading Payment Packet (PDF)" />}
+      <SectionWrapper className={styles['ppm-shipment']}>
+        <div className={styles['ppm-shipment__heading-section']}>
+          <strong>{orderLabel}</strong>
+          {actionButtons}
+        </div>
+        <div className={styles['ppm-shipment__content']}>{content}</div>
+      </SectionWrapper>
+    </div>
   );
 };
 
@@ -178,7 +210,6 @@ const PPMSummaryList = ({ shipments, onUploadClick, onDownloadError, onFeedbackC
 
 const PPMSummaryListItem = ({ shipment, hasMany, index, onUploadClick, onDownloadError, onFeedbackClick }) => {
   const orderLabel = hasMany ? `PPM ${index + 1}` : 'PPM';
-
   return PPMSummaryStatus(shipment, orderLabel, onUploadClick, onDownloadError, onFeedbackClick);
 };
 

src/components/PPMSummaryList/PPMSummaryList.module.scss

@@ -55,4 +55,4 @@
   &:last-of-type {
     @include u-margin-bottom(0);
   }
-}
+}

src/components/PPMSummaryList/PPMSummaryList.test.jsx

@@ -17,6 +17,8 @@ afterEach(() => {
   jest.resetAllMocks();
 });
 
+const onDownloadError = jest.fn();
+
 const shipments = [
   {
     id: '1',
@@ -143,6 +145,7 @@ const onUploadClick = jest.fn();
 
 const defaultProps = {
   shipments,
+  onDownloadError,
   onUploadClick,
 };
 
@@ -254,11 +257,19 @@ describe('PPMSummaryList component', () => {
       status: 200,
       data: null,
     };
-    downloadPPMPaymentPacket.mockImplementation(() => Promise.resolve(mockResponse));
+    // Setup a promise that will be resolved manually to check for the load mask
+    let resolveDownload;
+    const downloadPromise = new Promise((resolve) => {
+      resolveDownload = () => resolve(mockResponse);
+    });
+
+    downloadPPMPaymentPacket.mockImplementation(() => downloadPromise);
+
+    const onDownloadErrorNotCalled = jest.fn();
 
     render(
       <MockProviders>
-        <PPMSummaryList shipments={[shipments[3]]} />
+        <PPMSummaryList shipments={[shipments[3]]} onDownloadError={onDownloadErrorNotCalled} />
       </MockProviders>,
     );
 
@@ -269,16 +280,28 @@ describe('PPMSummaryList component', () => {
 
     await userEvent.click(downloadPaymentButton);
 
+    // Check for the load mask after clicking the download button
+    expect(screen.getByText('Downloading Payment Packet (PDF)...')).toBeInTheDocument();
+
+    // Manually resolve the download
+    resolveDownload();
+
     await waitFor(() => {
       expect(downloadPPMPaymentPacket).toHaveBeenCalledTimes(1);
+      expect(onDownloadErrorNotCalled).toHaveBeenCalledTimes(0);
+      expect(screen.queryByText('Downloading Payment Packet (PDF)...')).not.toBeInTheDocument();
     });
   });
 
   it('PPM Download Payment Packet - failure', async () => {
-    downloadPPMPaymentPacket.mockRejectedValue({
-      response: { body: { title: 'Error title', detail: 'Error detail' } },
+    // Create a promise we can reject manually
+    let rejectDownload;
+    const downloadPromise = new Promise((_, reject) => {
+      rejectDownload = () => reject(new Error('Error title: Error detail'));
     });
 
+    downloadPPMPaymentPacket.mockReturnValue(downloadPromise);
+
     const shipment = {
       ppmShipment: {
         status: ppmShipmentStatuses.CLOSEOUT_COMPLETE,
@@ -300,11 +323,11 @@ describe('PPMSummaryList component', () => {
         },
       },
     };
-    const onErrorHandler = jest.fn();
+    const onDownloadErrorCalled = jest.fn();
 
     render(
       <MockProviders>
-        <PPMSummaryList shipments={[shipment]} onDownloadError={onErrorHandler} />
+        <PPMSummaryList shipments={[shipment]} onDownloadError={onDownloadErrorCalled} />
       </MockProviders>,
     );
 
@@ -314,9 +337,16 @@ describe('PPMSummaryList component', () => {
     expect(downloadPaymentButton).toBeInTheDocument();
     await userEvent.click(downloadPaymentButton);
 
+    // Check for the load mask after clicking the download button
+    expect(screen.getByText('Downloading Payment Packet (PDF)...')).toBeInTheDocument();
+
+    // Manually reject the download
+    rejectDownload();
+
     await waitFor(() => {
       expect(downloadPPMPaymentPacket).toHaveBeenCalledTimes(1);
-      expect(onErrorHandler).toHaveBeenCalledTimes(1);
+      expect(onDownloadErrorCalled).toHaveBeenCalledTimes(1);
+      expect(screen.queryByText('Downloading Payment Packet (PDF)...')).not.toBeInTheDocument();
     });
   });
 });