[PRMP-860] Refactor upload components to link doc types

Author: adamwhitingnhs

app/src/components/blocks/_admin/reviewsPage/ReviewsPage.tsx

@@ -108,7 +108,8 @@ export const ReviewsPage = (): React.JSX.Element => {
             return {
                 id: dto.id,
                 nhsNumber,
-                recordType: getConfigForDocType(dto.document_snomed_code_type).content.reviewList as string,
+                recordType: getConfigForDocType(dto.document_snomed_code_type).content
+                    .reviewList as string,
                 snomedCode: dto.document_snomed_code_type,
                 uploader: dto.odsCode,
                 dateUploaded: dto.dateUploaded,

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

@@ -10,6 +10,7 @@ import { fileUploadErrorMessages } from '../../../../helpers/utils/fileUploadErr
 import { buildDocumentConfig, buildLgFile } from '../../../../helpers/test/testBuilders';
 import { Mock } from 'vitest';
 import { DOCUMENT_TYPE, DOCUMENT_TYPE_CONFIG } from '../../../../helpers/utils/documentType';
+import { SetStateAction } from 'react';
 
 const mockNavigate = vi.fn();
 const mockSetDocuments = vi.fn();
@@ -75,6 +76,7 @@ describe('DocumentSelectOrderStage', () => {
 
     afterEach(() => {
         vi.clearAllMocks();
+        vi.resetAllMocks();
     });
 
     describe('Rendering', () => {
@@ -171,7 +173,7 @@ describe('DocumentSelectOrderStage', () => {
 
         it('updates document position when dropdown value changes', async () => {
             const user = userEvent.setup();
-            const multipleDocuments = [
+            let multipleDocuments = [
                 {
                     docType: DOCUMENT_TYPE.LLOYD_GEORGE,
                     id: '1',
@@ -190,14 +192,63 @@ describe('DocumentSelectOrderStage', () => {
                     numPages: 3,
                     position: 2,
                 },
+                {
+                    docType: DOCUMENT_TYPE.EHR,
+                    id: '3',
+                    file: buildLgFile(2),
+                    attempts: 0,
+                    state: DOCUMENT_UPLOAD_STATE.SELECTED,
+                    numPages: 3,
+                    position: 0,
+                }
             ];
 
-            renderSut(multipleDocuments);
+            const expectedDocs = [
+                {
+                    docType: DOCUMENT_TYPE.LLOYD_GEORGE,
+                    id: '1',
+                    file: buildLgFile(1),
+                    attempts: 0,
+                    state: DOCUMENT_UPLOAD_STATE.SELECTED,
+                    numPages: 5,
+                    position: 2,
+                },
+                {
+                    docType: DOCUMENT_TYPE.LLOYD_GEORGE,
+                    id: '2',
+                    file: buildLgFile(2),
+                    attempts: 0,
+                    state: DOCUMENT_UPLOAD_STATE.SELECTED,
+                    numPages: 3,
+                    position: 2,
+                },
+                {
+                    docType: DOCUMENT_TYPE.EHR,
+                    id: '3',
+                    file: buildLgFile(2),
+                    attempts: 0,
+                    state: DOCUMENT_UPLOAD_STATE.SELECTED,
+                    numPages: 3,
+                    position: 0,
+                }
+            ];
+
+            mockSetDocuments.mockImplementationOnce((arg) => {
+                if (typeof arg === 'function') {
+                    multipleDocuments = arg(multipleDocuments);
+                } else {
+                    multipleDocuments = arg;
+                }
+                multipleDocuments = arg(multipleDocuments);
+            });
+
+            renderSut(multipleDocuments.filter((doc) => doc.docType === DOCUMENT_TYPE.LLOYD_GEORGE));
 
             const positionSelect = screen.getByTestId('1');
             await user.selectOptions(positionSelect, '2');
 
             expect(mockSetDocuments).toHaveBeenCalled();
+            expect(multipleDocuments).toEqual(expectedDocs);
         });
     });
 

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

@@ -166,6 +166,10 @@ const DocumentSelectOrderStage = ({
 
         if (docToRemove.position) {
             updatedDocList = updatedDocList.map((doc) => {
+                if (doc.docType !== docToRemove.docType) {
+                    return doc;
+                }
+
                 if (doc.position && +doc.position > +docToRemove.position!) {
                     doc.position = +doc.position - 1;
                 }
@@ -182,10 +186,15 @@ const DocumentSelectOrderStage = ({
 
         const updatedDocuments = documents.map((doc) => ({
             ...doc,
-            position: fieldValues[documentPositionKey(doc.id)]!,
+            position: +fieldValues[documentPositionKey(doc.id)]!,
         }));
 
-        setDocuments(updatedDocuments);
+        setDocuments((previousState) => {
+            return previousState.map((doc) => {
+                const updatedDoc = updatedDocuments.find((d) => d.id === doc.id);
+                return updatedDoc ?? doc;
+            });
+        });
     };
 
     const submitDocuments = (): void => {

app/src/components/blocks/_documentUpload/documentSelectStage/DocumentSelectStage.scss

@@ -0,0 +1,10 @@
+.document-select-stage {
+    .action-buttons {
+        display: flex;
+        align-items: center;
+
+        .continue-button {
+            margin-bottom: 0;
+        }
+    }
+}

app/src/components/blocks/_documentUpload/documentSelectStage/DocumentSelectStage.tsx

@@ -1,4 +1,11 @@
-import { Button, Fieldset, Table, TextInput, WarningCallout } from 'nhsuk-react-components';
+import {
+    BackLink,
+    Button,
+    Fieldset,
+    Table,
+    TextInput,
+    WarningCallout,
+} from 'nhsuk-react-components';
 import { getDocument } from 'pdfjs-dist';
 import { JSX, RefObject, useEffect, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -17,7 +24,6 @@ import {
     SetUploadDocuments,
     UploadDocument,
 } from '../../../../types/pages/UploadDocumentsPage/types';
-import BackButton from '../../../generic/backButton/BackButton';
 import LinkButton from '../../../generic/linkButton/LinkButton';
 import PatientSummary, { PatientInfo } from '../../../generic/patientSummary/PatientSummary';
 import ErrorBox from '../../../layout/errorBox/ErrorBox';
@@ -32,6 +38,9 @@ export type Props = {
     documentType: DOCUMENT_TYPE;
     filesErrorRef: RefObject<boolean>;
     documentConfig: DOCUMENT_TYPE_CONFIG;
+    goToNextDocType?: () => void;
+    goToPreviousDocType?: () => void;
+    showSkiplink?: boolean;
 };
 
 type UploadFilesError = ErrorMessageListItem<UPLOAD_FILE_ERROR_TYPE>;
@@ -42,6 +51,9 @@ const DocumentSelectStage = ({
     documentType,
     filesErrorRef,
     documentConfig,
+    goToNextDocType,
+    goToPreviousDocType,
+    showSkiplink,
 }: Props): JSX.Element => {
     const fileInputRef = useRef<HTMLInputElement | null>(null);
     const [noFilesSelected, setNoFilesSelected] = useState<boolean>(false);
@@ -196,34 +208,59 @@ const DocumentSelectStage = ({
 
         setNoFilesSelected(sortedDocs.length === 0);
 
-        setDocuments(sortedDocs);
+        setDocuments((previousState) => {
+            const docs = previousState.filter((doc) => doc.docType !== documentType);
+            return [...docs, ...sortedDocs];
+        });
     };
 
     const validateDocuments = (): boolean => {
         setNoFilesSelected(documents.length === 0);
 
         documents?.forEach((doc) => (doc.validated = true));
 
-        setDocuments([...documents]);
+        setDocuments((previousState) => {
+            previousState.forEach((doc) => {
+                if (doc.docType === documentType) {
+                    doc.validated = true;
+                }
+            });
+            return [...previousState];
+        });
 
         return (
             documents.length > 0 &&
             documents.every((doc) => doc.state !== DOCUMENT_UPLOAD_STATE.FAILED)
         );
     };
 
+    const navigateToNextStep = (): void => {
+        if (documentConfig.stitched) {
+            navigate.withParams(routeChildren.DOCUMENT_UPLOAD_SELECT_ORDER);
+            return;
+        }
+
+        navigate.withParams(routeChildren.DOCUMENT_UPLOAD_CONFIRMATION);
+    };
+
     const continueClicked = (): void => {
         if (!validateDocuments()) {
             scrollToRef.current?.scrollIntoView({ behavior: 'smooth' });
             return;
         }
 
-        if (documentConfig.stitched) {
-            navigate.withParams(routeChildren.DOCUMENT_UPLOAD_SELECT_ORDER);
-            return;
+        skipClicked();
+    };
+
+    const skipClicked = (): void => {
+        if (goToNextDocType) {
+            goToNextDocType();
+            window.scrollTo(0, 0);
+        } else {
+            navigateToNextStep();
         }
 
-        navigate.withParams(routeChildren.DOCUMENT_UPLOAD_CONFIRMATION);
+        resetErrors();
     };
 
     const DocumentRow = (document: UploadDocument, index: number): JSX.Element => {
@@ -298,9 +335,25 @@ const DocumentSelectStage = ({
         return errors;
     };
 
+    const resetErrors = (): void => {
+        setNoFilesSelected(false);
+        setTooManyFilesAdded(false);
+    };
+
+    const backClicked = (): void => {
+        if (goToPreviousDocType) {
+            goToPreviousDocType();
+            resetErrors();
+        } else {
+            navigate(routes.VERIFY_PATIENT);
+        }
+    };
+
     return (
-        <>
-            <BackButton toLocation={routes.VERIFY_PATIENT} dataTestid="back-button" />
+        <div className="document-select-stage">
+            <BackLink onClick={backClicked} data-testid="back-button">
+                Go back
+            </BackLink>
 
             {(errorDocs().length > 0 || noFilesSelected || tooManyFilesAdded) && (
                 <ErrorBox
@@ -461,17 +514,23 @@ const DocumentSelectStage = ({
                     )}
                 </>
             )}
-            <div className="lloydgeorge_upload-submission">
+            <div className="action-buttons">
                 <Button
                     type="button"
                     id="continue-button"
                     data-testid="continue-button"
                     onClick={continueClicked}
+                    className="continue-button mr-4"
                 >
                     Continue
                 </Button>
+                {showSkiplink && (
+                    <LinkButton data-testid="skip-link" onClick={skipClicked}>
+                        {documentConfig.content.skipDocumentLinkText}
+                    </LinkButton>
+                )}
             </div>
-        </>
+        </div>
     );
 };