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

Author: adamwhitingnhs

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;
                 }
@@ -185,7 +189,12 @@ const DocumentSelectOrderStage = ({
             position: fieldValues[documentPositionKey(doc.id)]!,
         }));
 
-        setDocuments(updatedDocuments);
+        setDocuments((previousState) => {
+            return previousState.map((doc) => {
+                const updatedDoc = updatedDocuments.find((d) => d.id === doc.id);
+                return updatedDoc ? 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,6 +1,6 @@
 import { Button, Fieldset, Table, TextInput, WarningCallout } from 'nhsuk-react-components';
 import { getDocument } from 'pdfjs-dist';
-import { JSX, RefObject, useEffect, useRef, useState } from 'react';
+import { Dispatch, JSX, RefObject, SetStateAction, useEffect, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import useTitle from '../../../../helpers/hooks/useTitle';
 import {
@@ -25,13 +25,16 @@ import { ErrorMessageListItem } from '../../../../types/pages/genericPageErrors'
 import { getJourney, useEnhancedNavigate } from '../../../../helpers/utils/urlManipulations';
 import { DOCUMENT_TYPE, DOCUMENT_TYPE_CONFIG } from '../../../../helpers/utils/documentType';
 import rejectedFileTypes from '../../../../config/rejectedFileTypes.json';
+import { Link } from 'react-router';
 
 export type Props = {
     setDocuments: SetUploadDocuments;
     documents: Array<UploadDocument>;
     documentType: DOCUMENT_TYPE;
     filesErrorRef: RefObject<boolean>;
     documentConfig: DOCUMENT_TYPE_CONFIG;
+    goToNextDocType?: () => void;
+    showSkiplink?: boolean;
 };
 
 type UploadFilesError = ErrorMessageListItem<UPLOAD_FILE_ERROR_TYPE>;
@@ -42,13 +45,16 @@ const DocumentSelectStage = ({
     documentType,
     filesErrorRef,
     documentConfig,
+    goToNextDocType,
+    showSkiplink,
 }: Props): JSX.Element => {
     const fileInputRef = useRef<HTMLInputElement | null>(null);
     const [noFilesSelected, setNoFilesSelected] = useState<boolean>(false);
     const scrollToRef = useRef<HTMLDivElement>(null);
     const fileInputAreaRef = useRef<HTMLFieldSetElement>(null);
     const [lastErrorsLength, setLastErrorsLength] = useState(0);
     const [tooManyFilesAdded, setTooManyFilesAdded] = useState<boolean>(false);
+    const hasNextDocType = useRef<boolean>(showSkiplink);
     const journey = getJourney();
 
     const navigate = useEnhancedNavigate();
@@ -196,34 +202,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();
+    };
 
-        navigate.withParams(routeChildren.DOCUMENT_UPLOAD_CONFIRMATION);
+    const skipClicked = (): void => {
+        if (hasNextDocType.current) {
+            hasNextDocType.current = false;
+            goToNextDocType!();
+            window.scrollTo(0, 0);
+        }
+        else {
+            navigateToNextStep();
+        }
     };
 
     const DocumentRow = (document: UploadDocument, index: number): JSX.Element => {
@@ -299,7 +330,7 @@ const DocumentSelectStage = ({
     };
 
     return (
-        <>
+        <div className='document-select-stage'>
             <BackButton toLocation={routes.VERIFY_PATIENT} dataTestid="back-button" />
 
             {(errorDocs().length > 0 || noFilesSelected || tooManyFilesAdded) && (
@@ -461,17 +492,24 @@ 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 && goToNextDocType && documents.length === 0 &&
+                    <LinkButton
+                        onClick={skipClicked}>
+                        {documentConfig.content.skipDocumentLinkText}
+                    </LinkButton>
+                }
             </div>
-        </>
+        </div>
     );
 };