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

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

@@ -209,6 +209,7 @@ export const ReviewsPage = ({ setReviewData }: ReviewsPageProps): React.JSX.Elem
                 recordType = getConfigForDocType(dto.documentSnomedCodeType).content
                     .reviewList as string;
             } catch {}
+
             return {
                 id: dto.id,
                 version: dto.version,

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,65 @@ 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

@@ -169,6 +169,10 @@ const DocumentSelectOrderStage = ({
         updatedDocList.splice(index, 1);
         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;
                 }
@@ -184,10 +188,15 @@ const DocumentSelectOrderStage = ({
 
         const updatedDocuments = documents.map((doc) => ({
             ...doc,
-            position: fieldValues[documentPositionKey(doc.id)]!,
+            position: Number(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.test.tsx

@@ -19,7 +19,7 @@ import { routeChildren, routes } from '../../../../types/generic/routes';
 import { UploadDocument } from '../../../../types/pages/UploadDocumentsPage/types';
 import DocumentSelectStage, { Props } from './DocumentSelectStage';
 import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
-import { DOCUMENT_TYPE } from '../../../../helpers/utils/documentType';
+import { DOCUMENT_TYPE, DOCUMENT_TYPE_CONFIG } from '../../../../helpers/utils/documentType';
 
 vi.mock('../../../../helpers/hooks/usePatient');
 vi.mock('react-router-dom', async () => {
@@ -180,6 +180,81 @@ describe('DocumentSelectStage', () => {
             });
         });
 
+        it('should call goToPreviousDocType when go back is clicked and function is provided', async () => {
+            const goToPreviousDocType = vi.fn();
+            renderApp(history, {
+                goToPreviousDocType,
+            });
+
+            await userEvent.click(await screen.findByTestId('back-button'));
+
+            await waitFor(() => {
+                expect(goToPreviousDocType).toHaveBeenCalled();
+            });
+        });
+
+        it('should call backLinkOverride when go back is clicked and function is provided', async () => {
+            const backLinkOverride = 'test';
+            renderApp(history, {
+                backLinkOverride,
+            });
+
+            await userEvent.click(await screen.findByTestId('back-button'));
+
+            await waitFor(() => {
+                expect(mockedUseNavigate).toHaveBeenCalledWith(backLinkOverride);
+            });
+        });
+
+        it('should call goToNextDocType when skip clicked and function is provided', async () => {
+            const goToNextDocType = vi.fn();
+            renderApp(history, {
+                goToNextDocType,
+                showSkipLink: true,
+            });
+
+            await userEvent.click(await screen.findByTestId('skip-link'));
+
+            await waitFor(() => {
+                expect(goToNextDocType).toHaveBeenCalled();
+            });
+        });
+
+        it('should navigate to select order when skip clicked and doc is stitched', async () => {
+            renderApp(history, {
+                showSkipLink: true,
+            });
+
+            await userEvent.click(await screen.findByTestId('skip-link'));
+
+            await waitFor(() => {
+                expect(mockedUseNavigate).toHaveBeenCalledWith({
+                    "pathname": routeChildren.DOCUMENT_UPLOAD_SELECT_ORDER,
+                    "search": "",
+                });
+            });
+        });
+
+        it('should navigate to confirm page when skip clicked and doc is not stitched', async () => {
+            const config = {
+                ...docConfig,
+                stitched: false,
+            };
+            renderApp(history, {
+                showSkipLink: true,
+                documentConfig: config,
+            });
+
+            await userEvent.click(await screen.findByTestId('skip-link'));
+
+            await waitFor(() => {
+                expect(mockedUseNavigate).toHaveBeenCalledWith({
+                    "pathname": routeChildren.DOCUMENT_UPLOAD_CONFIRMATION,
+                    "search": "",
+                });
+            });
+        });
+
         const errorCases = [
             ['password protected file', PDF_PARSING_ERROR_TYPE.PASSWORD_MISSING],
             ['invalid PDF structure', PDF_PARSING_ERROR_TYPE.INVALID_PDF_STRUCTURE],
@@ -449,7 +524,15 @@ describe('DocumentSelectStage', () => {
         });
     });
 
-    const TestApp = (): JSX.Element => {
+    type TestAppProps = {
+        goToPreviousDocType?: () => void;
+        goToNextDocType?: () => void;
+        backLinkOverride?: string;
+        showSkipLink?: boolean;
+        documentConfig?: DOCUMENT_TYPE_CONFIG;
+    };
+
+    const TestApp = ({ goToPreviousDocType, goToNextDocType, backLinkOverride, showSkipLink, documentConfig }: TestAppProps): JSX.Element => {
         const [documents, setDocuments] = useState<Array<UploadDocument>>([]);
         const filesErrorRef = useRef<boolean>(false);
 
@@ -459,15 +542,19 @@ describe('DocumentSelectStage', () => {
                 setDocuments={setDocuments}
                 documentType={docConfig.snomedCode as DOCUMENT_TYPE}
                 filesErrorRef={filesErrorRef}
-                documentConfig={docConfig}
+                documentConfig={documentConfig ?? docConfig}
+                goToPreviousDocType={goToPreviousDocType}
+                goToNextDocType={goToNextDocType}
+                showSkiplink={showSkipLink}
+                backLinkOverride={backLinkOverride}
             />
         );
     };
 
-    const renderApp = (history: MemoryHistory): RenderResult => {
+    const renderApp = (history: MemoryHistory, props: Partial<TestAppProps> = {}): RenderResult => {
         return render(
             <ReactRouter.Router navigator={history} location={history.location}>
-                <TestApp />
+                <TestApp {...props} />
             </ReactRouter.Router>,
         );
     };