[PRMP-554] Fix issue with clicking continue before stitch is loaded (#822)

Author: adamwhitingnhs

app/src/components/blocks/_documentUpload/documentSelectOrderStage/DocumentSelectOrderStage.test.tsx

@@ -31,11 +31,23 @@ URL.createObjectURL = vi.fn(() => 'mocked-url');
 Element.prototype.scrollIntoView = vi.fn();
 
 vi.mock('../documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview', () => ({
-    default: ({ documents }: { documents: UploadDocument[] }): React.JSX.Element => (
-        <div data-testid="lloyd-george-preview">
-            Lloyd George Preview for {documents.length} documents
-        </div>
-    ),
+    default: ({
+        documents,
+        stitchedBlobLoaded,
+    }: {
+        documents: UploadDocument[];
+        stitchedBlobLoaded?: (loaded: boolean) => void;
+    }): React.JSX.Element => {
+        // Simulate the PDF stitching completion
+        if (stitchedBlobLoaded) {
+            setTimeout(() => stitchedBlobLoaded(true), 0);
+        }
+        return (
+            <div data-testid="lloyd-george-preview">
+                Lloyd George Preview for {documents.length} documents
+            </div>
+        );
+    },
 }));
 
 describe('DocumentSelectOrderStage', () => {
@@ -100,10 +112,12 @@ describe('DocumentSelectOrderStage', () => {
             expect(screen.getByText('Remove')).toBeInTheDocument();
         });
 
-        it('renders continue button when documents are present', () => {
+        it('renders continue button when documents are present', async () => {
             renderSut(documents);
 
-            expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+            await waitFor(() => {
+                expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+            });
         });
 
         it('does not show "Remove all" button when there is only one document', () => {
@@ -411,8 +425,13 @@ describe('DocumentSelectOrderStage', () => {
 
             renderSut(documentsWithDuplicatePositions);
 
-            const continueButton = screen.getByRole('button', { name: 'Continue' });
-            await user.click(continueButton);
+            let continueButton;
+            await waitFor(() => {
+                continueButton = screen.getByRole('button', { name: 'Continue' });
+                expect(continueButton).toBeInTheDocument();
+            });
+
+            await user.click(continueButton!);
 
             await waitFor(() => {
                 expect(screen.getByText('There is a problem')).toBeInTheDocument();

app/src/components/blocks/_documentUpload/documentSelectOrderStage/DocumentSelectOrderStage.tsx

@@ -1,5 +1,5 @@
 import { Button, Select, Table } from 'nhsuk-react-components';
-import { Dispatch, JSX, SetStateAction, useEffect, useRef } from 'react';
+import { Dispatch, JSX, SetStateAction, useEffect, useRef, useState } from 'react';
 import { FieldErrors, FieldValues, useForm } from 'react-hook-form';
 import { Link, useNavigate } from 'react-router-dom';
 import useTitle from '../../../../helpers/hooks/useTitle';
@@ -21,6 +21,7 @@ import ErrorBox from '../../../layout/errorBox/ErrorBox';
 import DocumentUploadLloydGeorgePreview from '../documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview';
 import { ErrorMessageListItem } from '../../../../types/pages/genericPageErrors';
 import getMergedPdfBlob from '../../../../helpers/utils/pdfMerger';
+import SpinnerButton from '../../../generic/spinnerButton/SpinnerButton';
 
 type Props = {
     documents: UploadDocument[];
@@ -38,6 +39,7 @@ const DocumentSelectOrderStage = ({
     setMergedPdfBlob,
 }: Props): JSX.Element => {
     const navigate = useNavigate();
+    const [stitchedBlobLoaded, setStitchedBlobLoaded] = useState(false);
 
     const documentPositionKey = (documentId: string): string => {
         return `${documentId}`;
@@ -341,9 +343,12 @@ const DocumentSelectOrderStage = ({
                             .filter((doc) => doc.docType === DOCUMENT_TYPE.LLOYD_GEORGE)
                             .sort((a, b) => a.position! - b.position!)}
                         setMergedPdfBlob={setMergedPdfBlob}
+                        stitchedBlobLoaded={(loaded: boolean) => {
+                            setStitchedBlobLoaded(loaded);
+                        }}
                     />
                 </div>
-                {documents.length > 0 && (
+                {documents.length > 0 && stitchedBlobLoaded && (
                     <Button
                         type="submit"
                         id="form-submit"
@@ -355,6 +360,14 @@ const DocumentSelectOrderStage = ({
                         Continue
                     </Button>
                 )}
+                {documents.length > 0 && !stitchedBlobLoaded && (
+                    <SpinnerButton
+                        id="continue-spinner"
+                        status="Stitching PDF"
+                        disabled={true}
+                        className="mt-4"
+                    />
+                )}
             </form>
         </>
     );

app/src/components/blocks/_documentUpload/documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview.test.tsx

@@ -60,11 +60,14 @@ describe('DocumentUploadCompleteStage', () => {
             const mockBlob = new Blob(['test pdf content'], { type: 'application/pdf' });
             vi.mocked(getMergedPdfBlob).mockResolvedValue(mockBlob);
 
+            const stitchedBlobLoaded = vi.fn();
+
             await act(async () => {
                 render(
                     <DocumentUploadLloydGeorgePreview
                         documents={testDocuments}
                         setMergedPdfBlob={mockSetMergedPdfBlob}
+                        stitchedBlobLoaded={stitchedBlobLoaded}
                     />,
                 );
             });
@@ -73,6 +76,7 @@ describe('DocumentUploadCompleteStage', () => {
 
             await waitFor(() => {
                 expect(mockSetMergedPdfBlob).toHaveBeenCalledWith(mockBlob);
+                expect(stitchedBlobLoaded).toHaveBeenCalledTimes(2);
             });
         });
     });

app/src/components/blocks/_documentUpload/documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview.tsx

@@ -1,14 +1,19 @@
 import { UploadDocument } from '../../../../types/pages/UploadDocumentsPage/types';
-import { Dispatch, JSX, SetStateAction, useEffect, useRef, useState } from 'react';
+import { JSX, useEffect, useRef, useState } from 'react';
 import PdfViewer from '../../../generic/pdfViewer/PdfViewer';
 import getMergedPdfBlob from '../../../../helpers/utils/pdfMerger';
 
 type Props = {
     documents: UploadDocument[];
-    setMergedPdfBlob: Dispatch<SetStateAction<Blob | undefined>>;
+    setMergedPdfBlob: (blob: Blob) => void;
+    stitchedBlobLoaded?: (value: boolean) => void;
 };
 
-const DocumentUploadLloydGeorgePreview = ({ documents, setMergedPdfBlob }: Props): JSX.Element => {
+const DocumentUploadLloydGeorgePreview = ({
+    documents,
+    setMergedPdfBlob,
+    stitchedBlobLoaded,
+}: Props): JSX.Element => {
     const [mergedPdfUrl, setMergedPdfUrl] = useState('');
 
     const runningRef = useRef(false);
@@ -20,16 +25,26 @@ const DocumentUploadLloydGeorgePreview = ({ documents, setMergedPdfBlob }: Props
             }
             return;
         }
+
         if (runningRef.current) return;
 
         runningRef.current = true;
 
         const render = async (): Promise<void> => {
+            if (stitchedBlobLoaded) {
+                stitchedBlobLoaded(false);
+            }
+
             const blob = await getMergedPdfBlob(documents.map((doc) => doc.file));
             setMergedPdfBlob(blob);
+
             const url = URL.createObjectURL(blob);
             runningRef.current = false;
             setMergedPdfUrl(url);
+
+            if (stitchedBlobLoaded) {
+                stitchedBlobLoaded(true);
+            }
         };
 
         render().catch((err) => {

app/src/components/generic/pdfViewer/PdfViewer.tsx

@@ -1,37 +1,18 @@
-import { useEffect, useRef } from 'react';
-
 type Props = {
     fileUrl: string;
     customClasses?: string[];
-    onLoaded?: () => void;
+    customStyleSheet?: string;
 };
 
-const PdfViewer = ({ fileUrl, customClasses, onLoaded }: Props) => {
-    const loadedRef = useRef(false);
-
-    useEffect(() => {
-        const test = async () => {
-            while (!document.querySelector('pdfjs-viewer-element')) {}
-
-            if (!loadedRef.current) {
-                loadedRef.current = true;
-
-                if (onLoaded) {
-                    onLoaded();
-                }
-            }
-        };
-
-        test();
-    });
-
+const PdfViewer = ({ fileUrl, customClasses, customStyleSheet }: Props) => {
     return (
         <pdfjs-viewer-element
             id="pdf-viewer"
             data-testid="pdf-viewer"
             src={fileUrl}
             title="Embedded PDF Viewer"
             viewer-path="/pdfjs"
+            viewer-extra-styles={customStyleSheet}
             viewer-extra-styles-urls="['/pdf-viewer.css']"
             className={customClasses?.join(' ')}
         ></pdfjs-viewer-element>

app/src/components/generic/spinnerButton/SpinnerButton.tsx

@@ -6,15 +6,16 @@ export type Props = {
     status: string;
     disabled?: boolean;
     dataTestId?: string;
+    className?: string;
 };
 
-const SpinnerButton = ({ id, status, disabled, dataTestId }: Props) => {
+const SpinnerButton = ({ id, status, disabled, dataTestId, className }: Props) => {
     return (
         <Button
             id={id}
             data-testid={dataTestId}
             aria-label={status}
-            className="spinner_button"
+            className={`spinner_button ${className}`}
             disabled={disabled}
         >
             <div className="spinner_button-spinner"></div>

app/src/styles/App.scss

@@ -829,6 +829,7 @@ $hunit: '%';
 
     &.upload-preview {
         height: 90vh;
+        max-height: 1080px;
     }
 }