[PRMP-1321][PRMP-1041] Patient Details screen updates

app/README.md

@@ -22,7 +22,7 @@ The National Document Repository user interface (UI) has been developed with Rea
 
 ### 1. Set Env Variables
 
-Create a `.env` file by duplicating [.env.template](.env.template) and adding any missing values. This file is sourced to
+In the app/ directory create a `.env` file by duplicating the [.env.template](.env.template) and adding any missing values. This file is sourced to
 your shell env so make sure it doesn't have any extra whitespace, comments etc.
 The `local` environment variable will allow your local app to bypass auth and mock most lambda requests.
 

app/cypress/e2e/0-ndr-core-tests/feature_flag_workflows/lloyd_george_workflow.cy.js

@@ -28,7 +28,7 @@ describe('Feature flags - Lloyd George Workflow', () => {
                 });
                 cy.title().should(
                     'eq',
-                    'Verify patient details - Access and store digital patient documents',
+                    'Patient details - Access and store digital patient documents',
                 );
 
                 cy.get('#verify-submit').click();

app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/download_lloyd_george_workflow.cy.js

@@ -11,7 +11,7 @@ const downloadPageTitle =
 const downloadingPageTitle = 'Downloading documents - Access and store digital patient documents';
 const downloadCompletePageTitle = 'Download complete - Access and store digital patient documents';
 const verifyPatientPageTitle =
-    'Verify patient details - Access and store digital patient documents';
+    'Patient details - Access and store digital patient documents';
 const lloydGeorgeRecordPageTitle = 'Available records - Access and store digital patient documents';
 const testFiles = [
     {

app/cypress/e2e/0-ndr-core-tests/gp_user_workflows/patient_search_and_verify_workflow.cy.js

@@ -65,15 +65,15 @@ describe('GP Workflow: Patient search and verify', () => {
                 cy.wait('@search');
                 cy.title().should(
                     'eq',
-                    'Verify patient details - Access and store digital patient documents',
+                    'Patient details - Access and store digital patient documents',
                 );
 
                 cy.url().should('include', 'verify');
                 cy.url().should('eq', baseUrl + patientVerifyUrl);
                 cy.get('#gp-message').should('be.visible');
                 cy.get('#gp-message').should(
                     'have.text',
-                    'Check these patient details match the records or attachments you plan to use',
+                    'This page displays the current data recorded in the Patient Demographic Service for this patient.',
                 );
                 cy.get('#verify-submit').click();
 

app/src/components/blocks/_lloydGeorge/lloydGeorgeViewRecordStage/LloydGeorgeViewRecordStage.tsx

@@ -26,7 +26,7 @@ import {
 import RecordCard from '../../../generic/recordCard/RecordCard';
 import RecordMenuCard from '../../../generic/recordMenuCard/RecordMenuCard';
 import useTitle from '../../../../helpers/hooks/useTitle';
-import { routeChildren } from '../../../../types/generic/routes';
+import { routes, routeChildren } from '../../../../types/generic/routes';
 import { useNavigate } from 'react-router-dom';
 import PatientSimpleSummary from '../../../generic/patientSimpleSummary/PatientSimpleSummary';
 import ProgressBar from '../../../generic/progressBar/ProgressBar';
@@ -128,7 +128,10 @@ function LloydGeorgeViewRecordStage({
                     Exit full screen
                 </BackLink>
             ) : (
-                <BackButton />
+                <BackButton
+                    toLocation={routes.VERIFY_PATIENT}
+                    backLinkText="Go back to Patient details"
+                />
             )}
             {!fullScreen && userIsGpAdminNonBSOL && (
                 <div className="lloydgeorge_record-stage_gp-admin-non-bsol">

app/src/components/generic/backButton/BackButton.story.ts

@@ -18,4 +18,17 @@ export const BackButton: Story = {
     args: {},
 };
 
+export const WithCustomText: Story = {
+    args: {
+        backLinkText: 'navigate to ...',
+    },
+};
+
+export const WithCustomToLocationAndText: Story = {
+    args: {
+        toLocation: '/specified-location',
+        backLinkText: 'navigate to /specified-location',
+    },
+};
+
 export default meta;

app/src/components/generic/backButton/BackButton.test.tsx

@@ -32,4 +32,30 @@ describe('BackButton', () => {
             expect(mockUseNavigate).toHaveBeenCalledWith(-1);
         });
     });
+
+    it('navigates to specified location when the "toLocation" property is defined' , async () => {
+
+        render(<BackButton toLocation="/specified-location" />);
+        userEvent.click( screen.getByText('Go back'));
+
+        await waitFor(() => {
+            expect(mockUseNavigate).toHaveBeenCalledWith('/specified-location');
+        });
+
+    });
+
+    it('displays default back link text when "backLinkText" is not provided', async () => {
+
+        render(<BackButton toLocation="/specified-location" />);
+        expect(screen.getByText('Go back')).toBeInTheDocument(); 
+
+    });
+
+    it('displays custom back link text when "backLinkText" is defined', async () => {
+
+        render(<BackButton backLinkText="navigate to ..." />);
+        expect(screen.getByText('navigate to ...')).toBeInTheDocument();
+
+    });
+
 });

app/src/components/generic/backButton/BackButton.tsx

@@ -3,17 +3,24 @@ import React from 'react';
 import type { MouseEvent } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-const BackButton = () => {
+interface BackButtonProps {
+    toLocation?: string;
+    backLinkText?: string;
+}
+
+const BackButton = ({ toLocation, backLinkText = 'Go back' }: BackButtonProps) => {
     const navigate = useNavigate();
 
     const onBack = (e: MouseEvent<HTMLAnchorElement>) => {
         e.preventDefault();
-        navigate(-1);
+
+        if (toLocation) navigate(toLocation);
+        else navigate(-1);
     };
 
     return (
         <BackLink onClick={onBack} href="#">
-            Go back
+            {backLinkText}
         </BackLink>
     );
 };

app/src/pages/patientResultPage/PatientResultPage.test.tsx

@@ -19,6 +19,10 @@ jest.mock('../../helpers/hooks/usePatient');
 const mockedUseRole = useRole as jest.Mock;
 const mockedUsePatient = usePatient as jest.Mock;
 
+const PAGE_HEADER_TEXT = 'Patient details'
+const PAGE_TEXT = "This page displays the current data recorded in the Patient Demographic Service for this patient."
+const CONFIRM_BUTTON_TEXT = 'Confirm patient details and continue' 
+
 describe('PatientResultPage', () => {
     beforeEach(() => {
         process.env.REACT_APP_ENVIRONMENT = 'jest';
@@ -32,7 +36,7 @@ describe('PatientResultPage', () => {
         it('displays component', () => {
             render(<PatientResultPage />);
 
-            expect(screen.getByText('Verify patient details')).toBeInTheDocument();
+            expect(screen.getByText(PAGE_HEADER_TEXT)).toBeInTheDocument();
         });
 
         it.each(authorisedRoles)(
@@ -47,23 +51,13 @@ describe('PatientResultPage', () => {
                 render(<PatientResultPage />);
 
                 expect(
-                    screen.getByRole('heading', { name: 'Verify patient details' }),
+                    screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
                 ).toBeInTheDocument();
                 expect(screen.getByText(familyName)).toBeInTheDocument();
                 expect(
-                    screen.getByRole('button', { name: 'Accept details are correct' }),
+                    screen.getByRole('button', { name: CONFIRM_BUTTON_TEXT }),
                 ).toBeInTheDocument();
-                expect(screen.getByText(/If patient details are incorrect/)).toBeInTheDocument();
-
-                const nationalServiceDeskLink = screen.getByRole('link', {
-                    name: /National Service Desk/,
-                });
 
-                expect(nationalServiceDeskLink).toHaveAttribute(
-                    'href',
-                    'https://digital.nhs.uk/about-nhs-digital/contact-us#nhs-digital-service-desks',
-                );
-                expect(nationalServiceDeskLink).toHaveAttribute('target', '_blank');
             },
         );
 
@@ -79,11 +73,11 @@ describe('PatientResultPage', () => {
                 render(<PatientResultPage />);
 
                 expect(
-                    screen.getByRole('heading', { name: 'Verify patient details' }),
+                    screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
                 ).toBeInTheDocument();
                 expect(
                     screen.getByText(
-                        'Check these patient details match the records or attachments you plan to use',
+                       PAGE_TEXT ,
                     ),
                 ).toBeInTheDocument();
             },
@@ -100,7 +94,7 @@ describe('PatientResultPage', () => {
             render(<PatientResultPage />);
 
             expect(
-                screen.getByRole('heading', { name: 'Verify patient details' }),
+                screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
             ).toBeInTheDocument();
 
             expect(screen.queryByText('Select patient status')).not.toBeInTheDocument();
@@ -110,7 +104,7 @@ describe('PatientResultPage', () => {
             ).not.toBeInTheDocument();
             expect(
                 screen.queryByText(
-                    'Check these patient details match the records or attachments you plan to use',
+                   PAGE_TEXT, 
                 ),
             ).not.toBeInTheDocument();
         });
@@ -127,7 +121,7 @@ describe('PatientResultPage', () => {
                 act(() => {
                     userEvent.click(
                         screen.getByRole('button', {
-                            name: 'Accept details are correct',
+                            name: CONFIRM_BUTTON_TEXT,
                         }),
                     );
                 });
@@ -148,7 +142,7 @@ describe('PatientResultPage', () => {
             render(<PatientResultPage />);
 
             expect(
-                screen.getByRole('heading', { name: 'Verify patient details' }),
+                screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
             ).toBeInTheDocument();
             expect(
                 screen.getByText('The NHS number for this patient has changed.'),
@@ -167,7 +161,7 @@ describe('PatientResultPage', () => {
             render(<PatientResultPage />);
 
             expect(
-                screen.getByRole('heading', { name: 'Verify patient details' }),
+                screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
             ).toBeInTheDocument();
             expect(
                 screen.getByText(
@@ -190,7 +184,7 @@ describe('PatientResultPage', () => {
                 render(<PatientResultPage />);
 
                 expect(
-                    screen.getByRole('heading', { name: 'Verify patient details' }),
+                    screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
                 ).toBeInTheDocument();
 
                 const results = await runAxeTest(document.body);
@@ -237,7 +231,7 @@ describe('PatientResultPage', () => {
                 act(() => {
                     userEvent.click(
                         screen.getByRole('button', {
-                            name: 'Accept details are correct',
+                            name: CONFIRM_BUTTON_TEXT,
                         }),
                     );
                 });
@@ -259,7 +253,7 @@ describe('PatientResultPage', () => {
 
                 act(() => {
                     userEvent.click(
-                        screen.getByRole('button', { name: 'Accept details are correct' }),
+                        screen.getByRole('button', { name: CONFIRM_BUTTON_TEXT }),
                     );
                 });
 
@@ -275,7 +269,7 @@ describe('PatientResultPage', () => {
 
             render(<PatientResultPage />);
 
-            userEvent.click(screen.getByRole('button', { name: 'Accept details are correct' }));
+            userEvent.click(screen.getByRole('button', { name: CONFIRM_BUTTON_TEXT }));
 
             await waitFor(() => {
                 expect(mockedUseNavigate).toHaveBeenCalledWith(routes.ARF_OVERVIEW);

app/src/pages/patientResultPage/PatientResultPage.tsx

@@ -8,7 +8,6 @@ import ErrorBox from '../../components/layout/errorBox/ErrorBox';
 import { REPOSITORY_ROLE } from '../../types/generic/authRole';
 import useRole from '../../helpers/hooks/useRole';
 import usePatient from '../../helpers/hooks/usePatient';
-import ServiceDeskLink from '../../components/generic/serviceDeskLink/ServiceDeskLink';
 import useTitle from '../../helpers/hooks/useTitle';
 import PatientSummary from '../../components/generic/patientSummary/PatientSummary';
 
@@ -44,11 +43,11 @@ function PatientResultPage() {
     };
     const showWarning = patientDetails?.superseded || patientDetails?.restricted;
     const isGp = userIsGPAdmin || userIsGPClinical;
-    const pageHeader = 'Verify patient details';
+    const pageHeader = 'Patient details';
     useTitle({ pageTitle: pageHeader });
     return (
         <div style={{ maxWidth: 730 }}>
-            <BackButton />
+            <BackButton toLocation={routes.SEARCH_PATIENT} />
             {inputError && (
                 <ErrorBox
                     messageTitle={'There is a problem'}
@@ -80,18 +79,15 @@ function PatientResultPage() {
                 {isGp && (
                     <>
                         <p id="gp-message">
-                            Check these patient details match the records or attachments you plan to
-                            use
+                            This page displays the current data recorded in the Patient Demographic
+                            Service for this patient.
                         </p>
                     </>
                 )}
-                <Button type="submit" id="verify-submit">
-                    Accept details are correct
+                <Button type="submit" id="verify-submit" className="nhsuk-u-margin-top-6">
+                    Confirm patient details and continue
                 </Button>
             </form>
-            <p>
-                If patient details are incorrect, please contact the <ServiceDeskLink />
-            </p>
         </div>
     );
 }