B-21049

package.json

@@ -10,7 +10,7 @@
     "@opentelemetry/core": "^1.15.1",
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-query-devtools": "^5.17.12",
-    "@transcom/react-file-viewer": "git+https://github.com/transcom/react-file-viewer#v1.2.4",
+    "@transcom/react-file-viewer": "git+https://github.com/transcom/react-file-viewer#v1.2.5",
     "@trussworks/react-uswds": "3.2.0",
     "axe-playwright": "^1.2.3",
     "bytes": "^3.1.2",

src/components/DocumentViewer/Content/Content.jsx

@@ -13,12 +13,21 @@ import { ReactComponent as ArrowLeft } from 'shared/icon/arrow-left.svg';
 import { ReactComponent as ArrowRight } from 'shared/icon/arrow-right.svg';
 */
 
-const DocViewerContent = ({ fileType, filePath, saveRotation, setRotationValue, rotationValue, disableSaveButton }) => (
+const DocViewerContent = ({
+  fileType,
+  filePath,
+  saveRotation,
+  setRotationValue,
+  rotationValue,
+  disableSaveButton,
+  onError,
+}) => (
   <div data-testid="DocViewerContent" className={styles.DocViewerContent}>
     <FileViewer
       key={`fileViewer_${filePath}`}
       fileType={fileType}
       filePath={filePath}
+      onError={onError}
       saveRotation={saveRotation}
       rotationValue={rotationValue}
       setRotationValue={setRotationValue}

src/components/DocumentViewer/DocumentViewer.jsx

@@ -21,13 +21,13 @@ import AsyncPacketDownloadLink from 'shared/AsyncPacketDownloadLink/AsyncPacketD
  * TODO
  * - implement next/previous pages instead of scroll through pages
  * - implement rotate left/right
- * - handle fetch doc errors
  */
 
 const DocumentViewer = ({ files, allowDownload, paymentRequestId }) => {
   const [selectedFileIndex, selectFile] = useState(0);
   const [disableSaveButton, setDisableSaveButton] = useState(false);
   const [menuIsOpen, setMenuOpen] = useState(false);
+  const [showContentError, setShowContentError] = useState(false);
   const sortedFiles = files.sort((a, b) => moment(b.createdAt) - moment(a.createdAt));
   const selectedFile = sortedFiles[parseInt(selectedFileIndex, 10)];
 
@@ -73,6 +73,7 @@ const DocumentViewer = ({ files, allowDownload, paymentRequestId }) => {
   }, [files.length]);
 
   useEffect(() => {
+    setShowContentError(false);
     setRotationValue(selectedFile?.rotation || 0);
   }, [selectedFile]);
 
@@ -108,6 +109,11 @@ const DocumentViewer = ({ files, allowDownload, paymentRequestId }) => {
 
   const selectedFileDate = formatDate(moment(selectedFile?.createdAt), 'DD MMM YYYY');
 
+  const onContentError = (errorObject) => {
+    setShowContentError(true);
+    milmoveLogger.error(errorObject);
+  };
+
   const saveRotation = () => {
     if (fileType.current !== 'pdf' && mountedRef.current === true) {
       const uploadBody = {
@@ -150,13 +156,17 @@ const DocumentViewer = ({ files, allowDownload, paymentRequestId }) => {
         )}
         {paymentRequestId !== undefined ? paymentPacketDownload : null}
       </div>
+      {showContentError && (
+        <div className={styles.errorMessage}>If your document does not display, please refresh your browser.</div>
+      )}
       <Content
         fileType={fileType.current}
         filePath={selectedFile?.url}
         rotationValue={rotationValue}
         disableSaveButton={disableSaveButton}
         setRotationValue={setRotationValue}
         saveRotation={saveRotation}
+        onError={onContentError}
       />
       {menuIsOpen && <div className={styles.overlay} />}
       <Menu

src/components/DocumentViewer/DocumentViewer.module.scss

@@ -58,6 +58,14 @@
       @include u-margin-left(1);
     }
   }
+
+  .errorMessage {
+    padding: 5em;
+  }
+
+  .errorMessage ~ div :global(.pdf-loading) {
+    display: none;
+  }
 }
 
 .overlay {

src/components/DocumentViewer/DocumentViewer.test.jsx

@@ -52,46 +52,62 @@ const mockFiles = [
   },
 ];
 
+const mockErrorFiles = [
+  {
+    id: 1,
+    filename: 'Test File.pdf',
+    contentType: 'application/pdf',
+    url: '404',
+    createdAt: '2021-06-14T15:09:26.979879Z',
+  },
+];
+
 jest.mock('services/ghcApi', () => ({
   ...jest.requireActual('services/ghcApi'),
   bulkDownloadPaymentRequest: jest.fn(),
 }));
 
 jest.mock('./Content/Content', () => ({
   __esModule: true,
-  default: ({ id, filename, contentType, url, createdAt, rotation }) => (
-    <div>
-      <div data-testid="documentTitle">
-        {filename} Uploaded on {createdAt}
-      </div>
-      <div>id: {id || 'undefined'}</div>
-      <div>fileName: {filename || 'undefined'}</div>
-      <div>contentType: {contentType || 'undefined'}</div>
-      <div>url: {url || 'undefined'}</div>
-      <div>createdAt: {createdAt || 'undefined'}</div>
-      <div>rotation: {rotation || 'undefined'}</div>
-      <div data-testid="listOfFiles">
-        <ul>
-          {mockFiles.map((file) => (
-            <li key={file.id}>
-              {file.filename} - Added on {file.createdAt}
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div data-testid="menuButtonContainer" className="closed">
-        <button
-          data-testid="menuButton"
-          onClick={() => {
-            toggleMenuClass();
-          }}
-          type="button"
-        >
-          Toggle
-        </button>
+  default: ({ id, filename, contentType, url, createdAt, rotation, filePath, onError }) => {
+    if (filePath === '404') {
+      onError('content error happening');
+      return <div>nothing to see here</div>;
+    }
+    return (
+      <div>
+        <div data-testid="documentTitle">
+          {filename} Uploaded on {createdAt}
+        </div>
+        <div>id: {id || 'undefined'}</div>
+        <div>fileName: {filename || 'undefined'}</div>
+        <div>contentType: {contentType || 'undefined'}</div>
+        <div>url: {url || 'undefined'}</div>
+        <div>createdAt: {createdAt || 'undefined'}</div>
+        <div>rotation: {rotation || 'undefined'}</div>
+        <div data-testid="listOfFiles">
+          <ul>
+            {mockFiles.map((file) => (
+              <li key={file.id}>
+                {file.filename} - Added on {file.createdAt}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div data-testid="menuButtonContainer" className="closed">
+          <button
+            data-testid="menuButton"
+            onClick={() => {
+              toggleMenuClass();
+            }}
+            type="button"
+          >
+            Toggle
+          </button>
+        </div>
       </div>
-    </div>
-  ),
+    );
+  },
 }));
 
 describe('DocumentViewer component', () => {
@@ -180,6 +196,46 @@ describe('DocumentViewer component', () => {
     expect(screen.getByText('id: undefined')).toBeInTheDocument();
   });
 
+  describe('regarding content errors', () => {
+    const errorMessageText = 'If your document does not display, please refresh your browser.';
+    const downloadLinkText = 'Download file';
+    it('no error message normally', async () => {
+      render(
+        <QueryClientProvider client={new QueryClient()}>
+          <DocumentViewer files={mockFiles} />
+        </QueryClientProvider>,
+      );
+      expect(screen.queryByText(errorMessageText)).toBeNull();
+    });
+
+    it('download link normally', async () => {
+      render(
+        <QueryClientProvider client={new QueryClient()}>
+          <DocumentViewer files={mockFiles} allowDownload />
+        </QueryClientProvider>,
+      );
+      expect(screen.getByText(downloadLinkText)).toBeVisible();
+    });
+
+    it('show message on content error', async () => {
+      render(
+        <QueryClientProvider client={new QueryClient()}>
+          <DocumentViewer files={mockErrorFiles} />
+        </QueryClientProvider>,
+      );
+      expect(screen.getByText(errorMessageText)).toBeVisible();
+    });
+
+    it('download link on content error', async () => {
+      render(
+        <QueryClientProvider client={new QueryClient()}>
+          <DocumentViewer files={mockErrorFiles} allowDownload />
+        </QueryClientProvider>,
+      );
+      expect(screen.getByText(downloadLinkText)).toBeVisible();
+    });
+  });
+
   describe('when clicking download Download All Files button', () => {
     it('downloads a bulk packet', async () => {
       const mockResponse = {

yarn.lock

@@ -4583,9 +4583,9 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
   integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==
 
-"@transcom/react-file-viewer@git+https://github.com/transcom/react-file-viewer#v1.2.4":
-  version "1.2.4"
-  resolved "git+https://github.com/transcom/react-file-viewer#d4396dc8bf0acdd646e93ea82d23acf3bc0d5b0f"
+"@transcom/react-file-viewer@git+https://github.com/transcom/react-file-viewer#v1.2.5":
+  version "1.2.5"
+  resolved "git+https://github.com/transcom/react-file-viewer#4d9924ae58a6acdfcfb353235e034ff98fde5458"
   dependencies:
     pdfjs-dist "1.8.357"
     prop-types "^15.5.10"