Skip to content

Commit 037723f

Browse files
mark-start-nhsmark-start-nhs
authored
[PRMP-1321][PRMP-1041] Patient Details screen updates
1 parent 9c56287 commit 037723f

File tree

10 files changed

+83
-44
lines changed

10 files changed

+83
-44
lines changed

‎app/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ The National Document Repository user interface (UI) has been developed with Rea
2222

2323
### 1. Set Env Variables
2424

25-
Create a `.env` file by duplicating [.env.template](.env.template) and adding any missing values. This file is sourced to
25+
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
2626
your shell env so make sure it doesn't have any extra whitespace, comments etc.
2727
The `local` environment variable will allow your local app to bypass auth and mock most lambda requests.
2828

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('Feature flags - Lloyd George Workflow', () => {
2828
});
2929
cy.title().should(
3030
'eq',
31-
'Verify patient details - Access and store digital patient documents',
31+
'Patient details - Access and store digital patient documents',
3232
);
3333

3434
cy.get('#verify-submit').click();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const downloadPageTitle =
1111
const downloadingPageTitle = 'Downloading documents - Access and store digital patient documents';
1212
const downloadCompletePageTitle = 'Download complete - Access and store digital patient documents';
1313
const verifyPatientPageTitle =
14-
'Verify patient details - Access and store digital patient documents';
14+
'Patient details - Access and store digital patient documents';
1515
const lloydGeorgeRecordPageTitle = 'Available records - Access and store digital patient documents';
1616
const testFiles = [
1717
{

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,15 @@ describe('GP Workflow: Patient search and verify', () => {
6565
cy.wait('@search');
6666
cy.title().should(
6767
'eq',
68-
'Verify patient details - Access and store digital patient documents',
68+
'Patient details - Access and store digital patient documents',
6969
);
7070

7171
cy.url().should('include', 'verify');
7272
cy.url().should('eq', baseUrl + patientVerifyUrl);
7373
cy.get('#gp-message').should('be.visible');
7474
cy.get('#gp-message').should(
7575
'have.text',
76-
'Check these patient details match the records or attachments you plan to use',
76+
'This page displays the current data recorded in the Patient Demographic Service for this patient.',
7777
);
7878
cy.get('#verify-submit').click();
7979

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
import RecordCard from '../../../generic/recordCard/RecordCard';
2727
import RecordMenuCard from '../../../generic/recordMenuCard/RecordMenuCard';
2828
import useTitle from '../../../../helpers/hooks/useTitle';
29-
import { routeChildren } from '../../../../types/generic/routes';
29+
import { routes, routeChildren } from '../../../../types/generic/routes';
3030
import { useNavigate } from 'react-router-dom';
3131
import PatientSimpleSummary from '../../../generic/patientSimpleSummary/PatientSimpleSummary';
3232
import ProgressBar from '../../../generic/progressBar/ProgressBar';
@@ -126,7 +126,10 @@ function LloydGeorgeViewRecordStage({
126126
Exit full screen
127127
</BackLink>
128128
) : (
129-
<BackButton />
129+
<BackButton
130+
toLocation={routes.VERIFY_PATIENT}
131+
backLinkText="Go back to Patient details"
132+
/>
130133
)}
131134
{!fullScreen && userIsGpAdminNonBSOL && (
132135
<div className="lloydgeorge_record-stage_gp-admin-non-bsol">

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,17 @@ export const BackButton: Story = {
1818
args: {},
1919
};
2020

21+
export const WithCustomText: Story = {
22+
args: {
23+
backLinkText: 'navigate to ...',
24+
},
25+
};
26+
27+
export const WithCustomToLocationAndText: Story = {
28+
args: {
29+
toLocation: '/specified-location',
30+
backLinkText: 'navigate to /specified-location',
31+
},
32+
};
33+
2134
export default meta;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,30 @@ describe('BackButton', () => {
3232
expect(mockUseNavigate).toHaveBeenCalledWith(-1);
3333
});
3434
});
35+
36+
it('navigates to specified location when the "toLocation" property is defined' , async () => {
37+
38+
render(<BackButton toLocation="/specified-location" />);
39+
userEvent.click( screen.getByText('Go back'));
40+
41+
await waitFor(() => {
42+
expect(mockUseNavigate).toHaveBeenCalledWith('/specified-location');
43+
});
44+
45+
});
46+
47+
it('displays default back link text when "backLinkText" is not provided', async () => {
48+
49+
render(<BackButton toLocation="/specified-location" />);
50+
expect(screen.getByText('Go back')).toBeInTheDocument();
51+
52+
});
53+
54+
it('displays custom back link text when "backLinkText" is defined', async () => {
55+
56+
render(<BackButton backLinkText="navigate to ..." />);
57+
expect(screen.getByText('navigate to ...')).toBeInTheDocument();
58+
59+
});
60+
3561
});

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

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,24 @@ import React from 'react';
33
import type { MouseEvent } from 'react';
44
import { useNavigate } from 'react-router-dom';
55

6-
const BackButton = () => {
6+
interface BackButtonProps {
7+
toLocation?: string;
8+
backLinkText?: string;
9+
}
10+
11+
const BackButton = ({ toLocation, backLinkText = 'Go back' }: BackButtonProps) => {
712
const navigate = useNavigate();
813

914
const onBack = (e: MouseEvent<HTMLAnchorElement>) => {
1015
e.preventDefault();
11-
navigate(-1);
16+
17+
if (toLocation) navigate(toLocation);
18+
else navigate(-1);
1219
};
1320

1421
return (
1522
<BackLink onClick={onBack} href="#">
16-
Go back
23+
{backLinkText}
1724
</BackLink>
1825
);
1926
};

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

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ jest.mock('../../helpers/hooks/usePatient');
1919
const mockedUseRole = useRole as jest.Mock;
2020
const mockedUsePatient = usePatient as jest.Mock;
2121

22+
const PAGE_HEADER_TEXT = 'Patient details'
23+
const PAGE_TEXT = "This page displays the current data recorded in the Patient Demographic Service for this patient."
24+
const CONFIRM_BUTTON_TEXT = 'Confirm patient details and continue'
25+
2226
describe('PatientResultPage', () => {
2327
beforeEach(() => {
2428
process.env.REACT_APP_ENVIRONMENT = 'jest';
@@ -32,7 +36,7 @@ describe('PatientResultPage', () => {
3236
it('displays component', () => {
3337
render(<PatientResultPage />);
3438

35-
expect(screen.getByText('Verify patient details')).toBeInTheDocument();
39+
expect(screen.getByText(PAGE_HEADER_TEXT)).toBeInTheDocument();
3640
});
3741

3842
it.each(authorisedRoles)(
@@ -47,23 +51,13 @@ describe('PatientResultPage', () => {
4751
render(<PatientResultPage />);
4852

4953
expect(
50-
screen.getByRole('heading', { name: 'Verify patient details' }),
54+
screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
5155
).toBeInTheDocument();
5256
expect(screen.getByText(familyName)).toBeInTheDocument();
5357
expect(
54-
screen.getByRole('button', { name: 'Accept details are correct' }),
58+
screen.getByRole('button', { name: CONFIRM_BUTTON_TEXT }),
5559
).toBeInTheDocument();
56-
expect(screen.getByText(/If patient details are incorrect/)).toBeInTheDocument();
57-
58-
const nationalServiceDeskLink = screen.getByRole('link', {
59-
name: /National Service Desk/,
60-
});
6160

62-
expect(nationalServiceDeskLink).toHaveAttribute(
63-
'href',
64-
'https://digital.nhs.uk/about-nhs-digital/contact-us#nhs-digital-service-desks',
65-
);
66-
expect(nationalServiceDeskLink).toHaveAttribute('target', '_blank');
6761
},
6862
);
6963

@@ -79,11 +73,11 @@ describe('PatientResultPage', () => {
7973
render(<PatientResultPage />);
8074

8175
expect(
82-
screen.getByRole('heading', { name: 'Verify patient details' }),
76+
screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
8377
).toBeInTheDocument();
8478
expect(
8579
screen.getByText(
86-
'Check these patient details match the records or attachments you plan to use',
80+
PAGE_TEXT ,
8781
),
8882
).toBeInTheDocument();
8983
},
@@ -100,7 +94,7 @@ describe('PatientResultPage', () => {
10094
render(<PatientResultPage />);
10195

10296
expect(
103-
screen.getByRole('heading', { name: 'Verify patient details' }),
97+
screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
10498
).toBeInTheDocument();
10599

106100
expect(screen.queryByText('Select patient status')).not.toBeInTheDocument();
@@ -110,7 +104,7 @@ describe('PatientResultPage', () => {
110104
).not.toBeInTheDocument();
111105
expect(
112106
screen.queryByText(
113-
'Check these patient details match the records or attachments you plan to use',
107+
PAGE_TEXT,
114108
),
115109
).not.toBeInTheDocument();
116110
});
@@ -127,7 +121,7 @@ describe('PatientResultPage', () => {
127121
act(() => {
128122
userEvent.click(
129123
screen.getByRole('button', {
130-
name: 'Accept details are correct',
124+
name: CONFIRM_BUTTON_TEXT,
131125
}),
132126
);
133127
});
@@ -148,7 +142,7 @@ describe('PatientResultPage', () => {
148142
render(<PatientResultPage />);
149143

150144
expect(
151-
screen.getByRole('heading', { name: 'Verify patient details' }),
145+
screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
152146
).toBeInTheDocument();
153147
expect(
154148
screen.getByText('The NHS number for this patient has changed.'),
@@ -167,7 +161,7 @@ describe('PatientResultPage', () => {
167161
render(<PatientResultPage />);
168162

169163
expect(
170-
screen.getByRole('heading', { name: 'Verify patient details' }),
164+
screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
171165
).toBeInTheDocument();
172166
expect(
173167
screen.getByText(
@@ -190,7 +184,7 @@ describe('PatientResultPage', () => {
190184
render(<PatientResultPage />);
191185

192186
expect(
193-
screen.getByRole('heading', { name: 'Verify patient details' }),
187+
screen.getByRole('heading', { name: PAGE_HEADER_TEXT }),
194188
).toBeInTheDocument();
195189

196190
const results = await runAxeTest(document.body);
@@ -237,7 +231,7 @@ describe('PatientResultPage', () => {
237231
act(() => {
238232
userEvent.click(
239233
screen.getByRole('button', {
240-
name: 'Accept details are correct',
234+
name: CONFIRM_BUTTON_TEXT,
241235
}),
242236
);
243237
});
@@ -259,7 +253,7 @@ describe('PatientResultPage', () => {
259253

260254
act(() => {
261255
userEvent.click(
262-
screen.getByRole('button', { name: 'Accept details are correct' }),
256+
screen.getByRole('button', { name: CONFIRM_BUTTON_TEXT }),
263257
);
264258
});
265259

@@ -275,7 +269,7 @@ describe('PatientResultPage', () => {
275269

276270
render(<PatientResultPage />);
277271

278-
userEvent.click(screen.getByRole('button', { name: 'Accept details are correct' }));
272+
userEvent.click(screen.getByRole('button', { name: CONFIRM_BUTTON_TEXT }));
279273

280274
await waitFor(() => {
281275
expect(mockedUseNavigate).toHaveBeenCalledWith(routes.ARF_OVERVIEW);

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

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import ErrorBox from '../../components/layout/errorBox/ErrorBox';
88
import { REPOSITORY_ROLE } from '../../types/generic/authRole';
99
import useRole from '../../helpers/hooks/useRole';
1010
import usePatient from '../../helpers/hooks/usePatient';
11-
import ServiceDeskLink from '../../components/generic/serviceDeskLink/ServiceDeskLink';
1211
import useTitle from '../../helpers/hooks/useTitle';
1312
import PatientSummary from '../../components/generic/patientSummary/PatientSummary';
1413

@@ -44,11 +43,11 @@ function PatientResultPage() {
4443
};
4544
const showWarning = patientDetails?.superseded || patientDetails?.restricted;
4645
const isGp = userIsGPAdmin || userIsGPClinical;
47-
const pageHeader = 'Verify patient details';
46+
const pageHeader = 'Patient details';
4847
useTitle({ pageTitle: pageHeader });
4948
return (
5049
<div style={{ maxWidth: 730 }}>
51-
<BackButton />
50+
<BackButton toLocation={routes.SEARCH_PATIENT} />
5251
{inputError && (
5352
<ErrorBox
5453
messageTitle={'There is a problem'}
@@ -80,18 +79,15 @@ function PatientResultPage() {
8079
{isGp && (
8180
<>
8281
<p id="gp-message">
83-
Check these patient details match the records or attachments you plan to
84-
use
82+
This page displays the current data recorded in the Patient Demographic
83+
Service for this patient.
8584
</p>
8685
</>
8786
)}
88-
<Button type="submit" id="verify-submit">
89-
Accept details are correct
87+
<Button type="submit" id="verify-submit" className="nhsuk-u-margin-top-6">
88+
Confirm patient details and continue
9089
</Button>
9190
</form>
92-
<p>
93-
If patient details are incorrect, please contact the <ServiceDeskLink />
94-
</p>
9591
</div>
9692
);
9793
}

0 commit comments

Comments
 (0)