[PRMP-859] Refactor upload to use doc config (other doc types)

Author: adamwhitingnhs

app/cypress/e2e/0-ndr-core-tests/auth_routes/auth_gp_clinical_path_access.cy.js

@@ -48,4 +48,4 @@ describe('GP Clinical user role has access to the expected GP_CLINICAL workflow
             cy.url().should('eq', baseUrl + lloydGeorgeViewUrl);
         });
     });
-});
+});

app/package-lock.json

@@ -28,6 +28,7 @@
         "@testing-library/react": "16.3.0",
         "@testing-library/user-event": "14.6.1",
         "@vitejs/plugin-react-swc": "^4.2.2",
+        "@zip.js/zip.js": "^2.8.11",
         "aws-rum-web": "^1.25.0",
         "axios": "^1.13.2",
         "dotenv": "^17.2.3",
@@ -79,8 +80,8 @@
         "@types/uuid": "^11.0.0",
         "@types/validator": "^13.15.10",
         "@vitest/coverage-v8": "^4.0.13",
-        "@vitest/ui": "^4.0.13",
         "@vitest/spy": "^4.0.13",
+        "@vitest/ui": "^4.0.13",
         "babel-plugin-named-exports-order": "^0.0.2",
         "cypress": "^15.7.0",
         "cypress-real-events": "^1.15.0",

app/package.json

@@ -7,7 +7,7 @@ import {
 } from '../../../../types/pages/UploadDocumentsPage/types';
 import { MemoryRouter } from 'react-router-dom';
 import { fileUploadErrorMessages } from '../../../../helpers/utils/fileUploadErrorMessages';
-import { buildLgFile } from '../../../../helpers/test/testBuilders';
+import { buildDocumentConfig, buildLgFile } from '../../../../helpers/test/testBuilders';
 import { Mock } from 'vitest';
 import { DOCUMENT_TYPE } from '../../../../helpers/utils/documentType';
 
@@ -50,6 +50,8 @@ vi.mock('../documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview',
     },
 }));
 
+const docConfig = buildDocumentConfig();
+
 describe('DocumentSelectOrderStage', () => {
     let documents: UploadDocument[] = [];
 
@@ -128,7 +130,7 @@ describe('DocumentSelectOrderStage', () => {
             renderSut(documents);
 
             await waitFor(() => {
-                expect(screen.getByText('Preview this Lloyd George record')).toBeInTheDocument();
+                expect(screen.getByText(docConfig.content.previewUploadTitle as string)).toBeInTheDocument();
                 expect(screen.getByTestId('lloyd-george-preview')).toBeInTheDocument();
             });
         });
@@ -817,6 +819,7 @@ function renderSutWithExistingDocs(
                 setDocuments={mockSetDocuments}
                 setMergedPdfBlob={mockSetMergedPdfBlob}
                 existingDocuments={existingDocuments}
+                documentConfig={docConfig}
             />
         </MemoryRouter>,
     );
@@ -830,6 +833,7 @@ function renderSut(documents: UploadDocument[]): void {
                 setDocuments={mockSetDocuments}
                 setMergedPdfBlob={mockSetMergedPdfBlob}
                 existingDocuments={[]}
+                documentConfig={docConfig}
             />
         </MemoryRouter>,
     );

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

@@ -21,13 +21,14 @@ import PatientSummary, { PatientInfo } from '../../../generic/patientSummary/Pat
 import ErrorBox from '../../../layout/errorBox/ErrorBox';
 import DocumentUploadLloydGeorgePreview from '../documentUploadLloydGeorgePreview/DocumentUploadLloydGeorgePreview';
 import SpinnerButton from '../../../generic/spinnerButton/SpinnerButton';
-import { DOCUMENT_TYPE } from '../../../../helpers/utils/documentType';
+import { DOCUMENT_TYPE, DOCUMENT_TYPE_CONFIG } from '../../../../helpers/utils/documentType';
 
 type Props = {
     documents: UploadDocument[];
     setDocuments: SetUploadDocuments;
     setMergedPdfBlob: Dispatch<SetStateAction<Blob | undefined>>;
     existingDocuments: UploadDocument[] | undefined;
+    documentConfig: DOCUMENT_TYPE_CONFIG;
 };
 
 type FormData = {
@@ -41,10 +42,14 @@ const DocumentSelectOrderStage = ({
     setDocuments,
     setMergedPdfBlob,
     existingDocuments,
+    documentConfig,
 }: Readonly<Props>): JSX.Element => {
     const navigate = useEnhancedNavigate();
     const journey = getJourney();
     const [stitchedBlobLoaded, setStitchedBlobLoaded] = useState(false);
+    const [currentPreviewDocument, setCurrentPreviewDocument] = useState<
+        UploadDocument | undefined
+    >(documents.find((doc) => doc.file.type === 'application/pdf'));
 
     const documentPositionKey = (documentId: string): string => {
         return `${documentId}`;
@@ -209,11 +214,17 @@ const DocumentSelectOrderStage = ({
             })
             .filter((item) => item !== undefined);
 
-    const viewPdfFile = async (file: File): Promise<void> => {
-        const blob = await getMergedPdfBlob([file]);
-        const url = URL.createObjectURL(blob);
+    const viewPdfFile = async (document: UploadDocument): Promise<void> => {
+        if (documentConfig.stitched) {
+            const blob = await getMergedPdfBlob([document.file]);
+            const url = URL.createObjectURL(blob);
 
-        window.open(url);
+            window.open(url);
+
+            return;
+        }
+
+        setCurrentPreviewDocument(document);
     };
 
     type FileRowParams = {
@@ -246,12 +257,12 @@ const DocumentSelectOrderStage = ({
                     {!ableToReposition && position}
                 </Table.Cell>
                 <Table.Cell className="view-cell">
-                    {document && (
+                    {document && document.file.type === 'application/pdf' && (
                         <button
                             type="button"
                             className="link-button"
-                            onClick={(): Promise<void> => viewPdfFile(document.file)}
-                            aria-label="Preview - opens in a new tab"
+                            onClick={(): Promise<void> => viewPdfFile(document)}
+                            aria-label={`Preview${documentConfig.stitched ? ' - opens in a new tab' : ''}`}
                             data-testid={`document-preview-${document.id}`}
                         >
                             View
@@ -290,6 +301,22 @@ const DocumentSelectOrderStage = ({
         });
     };
 
+    const getDocumentsForPreview = (): UploadDocument[] => {
+        const docs = [];
+
+        if (documentConfig.stitched) {
+            if (journey === 'update') {
+                docs.push(...existingDocuments!);
+            }
+
+            docs.push(...documents);
+        } else if (currentPreviewDocument) {
+            docs.push(currentPreviewDocument);
+        }
+
+        return docs.sort((a, b) => a.position! - b.position!);
+    };
+
     return (
         <>
             <BackButton />
@@ -410,7 +437,7 @@ const DocumentSelectOrderStage = ({
                 </Table>
 
                 <div>
-                    <h2>Preview this Lloyd George record</h2>
+                    <h2>{documentConfig.content.previewUploadTitle}</h2>
                     <p>
                         This shows how the final record will look when combined into a single
                         document.{' '}
@@ -424,7 +451,11 @@ const DocumentSelectOrderStage = ({
 
                     <DocumentUploadLloydGeorgePreview
                         documents={getDocumentsForPreview()}
-                        setMergedPdfBlob={setMergedPdfBlob}
+                        setMergedPdfBlob={(blob) => {
+                            if (documentConfig.stitched) {
+                                setMergedPdfBlob(blob);
+                            }
+                        }}
                         stitchedBlobLoaded={(loaded: boolean): void => {
                             setStitchedBlobLoaded(loaded);
                         }}
@@ -452,18 +483,6 @@ const DocumentSelectOrderStage = ({
             </form>
         </>
     );
-
-    function getDocumentsForPreview(): UploadDocument[] {
-        if (journey !== 'update' || !existingDocuments || existingDocuments.length === 0) {
-            return documents
-                .filter((doc) => doc.docType === DOCUMENT_TYPE.LLOYD_GEORGE)
-                .sort((a, b) => a.position! - b.position!);
-        }
-
-        return [...existingDocuments, ...documents]
-            .filter((doc) => doc.docType === DOCUMENT_TYPE.LLOYD_GEORGE)
-            .sort((a, b) => a.position! - b.position!);
-    }
 };
 
 export default DocumentSelectOrderStage;