Skip to content

Commit

Permalink
PRMDR-685 content and design improvements in the action complete screens
Browse files Browse the repository at this point in the history
  • Loading branch information
RachelHowellNHS authored Mar 26, 2024
1 parent d545b9b commit 3cc18c1
Show file tree
Hide file tree
Showing 11 changed files with 145 additions and 79 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import viewLloydGeorgePayload from '../../../fixtures/requests/GET_LloydGeorgeStitch.json';
import searchPatientPayload from '../../../fixtures/requests/GET_SearchPatient.json';
import { Roles } from '../../../support/roles';
import { formatNhsNumber } from '../../../../src/helpers/utils/formatNhsNumber';

const baseUrl = Cypress.config('baseUrl');
const searchPatientUrl = '/search/patient';
Expand Down Expand Up @@ -55,11 +56,15 @@ describe('GP Workflow: View Lloyd George record', () => {

// Assert contents of page after download
cy.contains('Download complete').should('be.visible');
cy.contains('Documents from the Lloyd George record of:').should('be.visible');
cy.contains('You have successfully downloaded the Lloyd George record of:').should(
'be.visible',
);
cy.contains(
`${searchPatientPayload.givenName} ${searchPatientPayload.familyName}`,
).should('be.visible');
cy.contains(`(NHS number: ${searchPatientPayload.nhsNumber})`).should('be.visible');
cy.contains(
`NHS number: ${formatNhsNumber(searchPatientPayload.nhsNumber)}`,
).should('be.visible');

// Assert file has been downloaded
cy.readFile(`${Cypress.config('downloadsFolder')}/browserconfig.xml`);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import viewLloydGeorgePayload from '../../../fixtures/requests/GET_LloydGeorgeStitch.json';
import searchPatientPayload from '../../../fixtures/requests/GET_SearchPatient.json';
import { Roles, roleName } from '../../../support/roles';
import { formatNhsNumber } from '../../../../src/helpers/utils/formatNhsNumber';

const baseUrl = Cypress.config('baseUrl');
const gpRoles = [Roles.GP_ADMIN, Roles.GP_CLINICAL];
Expand Down Expand Up @@ -211,9 +212,13 @@ describe('GP Workflow: View Lloyd George record', () => {

// assert delete success page is as expected
cy.contains('Deletion complete').should('be.visible');
cy.contains('12 files from the Lloyd George record of:').should('be.visible');
cy.contains(
'You have successfully deleted 12 file(s) from the Lloyd George record of:',
).should('be.visible');
cy.contains('GivenName Surname').should('be.visible');
cy.contains('(NHS number: 900 000 0009)').should('be.visible');
cy.contains(
`NHS number: ${formatNhsNumber(searchPatientPayload.nhsNumber)}`,
).should('be.visible');

cy.getByTestId('lg-return-btn').click();

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import viewLloydGeorgePayload from '../../../fixtures/requests/GET_LloydGeorgeStitch.json';
import searchPatientPayload from '../../../fixtures/requests/GET_SearchPatient.json';
import { Roles, roleName } from '../../../support/roles';
import { formatNhsNumber } from '../../../../src/helpers/utils/formatNhsNumber';

const baseUrl = Cypress.config('baseUrl');
const gpRoles = [Roles.GP_ADMIN];
Expand Down Expand Up @@ -248,13 +249,15 @@ describe('GP Workflow: View Lloyd George record', () => {

// Assert contents of page after download
cy.contains('Download complete').should('be.visible');
cy.contains('Documents from the Lloyd George record of:').should('be.visible');
cy.contains(
'You have successfully downloaded the Lloyd George record of:',
).should('be.visible');
cy.contains(
`${searchPatientPayload.givenName} ${searchPatientPayload.familyName}`,
).should('be.visible');
cy.contains(`(NHS number: ${searchPatientPayload.nhsNumber})`).should(
'be.visible',
);
cy.contains(
`NHS number: ${formatNhsNumber(searchPatientPayload.nhsNumber)}`,
).should('be.visible');

// Assert file has been downloaded
cy.readFile(`${Cypress.config('downloadsFolder')}/browserconfig.xml`);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import searchPatientPayload from '../../../fixtures/requests/GET_SearchPatient.json';
import { Roles } from '../../../support/roles';
import { formatNhsNumber } from '../../../../src/helpers/utils/formatNhsNumber';

describe('PCSE Workflow: Access and download found files', () => {
// env vars
Expand Down Expand Up @@ -263,9 +264,13 @@ describe('PCSE Workflow: Access and download found files', () => {

// assert delete success page is as expected
cy.contains('Deletion complete').should('be.visible');
cy.contains('2 files from the record of:').should('be.visible');
cy.contains('You have successfully deleted 2 file(s) from the record of:').should(
'be.visible',
);
cy.contains('GivenName Surname').should('be.visible');
cy.contains('(NHS number: 900 000 0009)').should('be.visible');
cy.contains(
`NHS number: ${formatNhsNumber(searchPatientPayload.nhsNumber)}`,
).should('be.visible');
},
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,10 @@ describe('GP Workflow: View Lloyd George record', () => {
// Assert contents of page after download
cy.get('.lloydgeorge_download-complete', { timeout: 20000 }).should('exist');
cy.contains('Download complete').should('be.visible');
cy.contains('Documents from the Lloyd George record of:').should('be.visible');
cy.contains(`(NHS number: ${activePatient})`).should('be.visible');
cy.contains('You have successfully downloaded the Lloyd George record of:').should(
'be.visible',
);
cy.contains(`NHS number: ${activePatient}`).should('be.visible');

// Assert file has been downloaded
cy.readFile(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@ describe('DeletionConfirmationStage', () => {
});

expect(
screen.getByText(`${numberOfFiles} files from the Lloyd George record of:`),
screen.getByText(
`You have successfully deleted ${numberOfFiles} file(s) from the Lloyd George record of:`,
),
).toBeInTheDocument();
expect(screen.getByText(patientName)).toBeInTheDocument();
expect(screen.getByText(/NHS number/)).toBeInTheDocument();
Expand All @@ -84,10 +86,14 @@ describe('DeletionConfirmationStage', () => {
});

expect(
screen.queryByText(`${numberOfFiles} files from the Lloyd George record of:`),
screen.queryByText(
`You have successfully deleted ${numberOfFiles} file(s) from the Lloyd George record of:`,
),
).not.toBeInTheDocument();
expect(
screen.getByText(`${numberOfFiles} file from the record of:`),
screen.getByText(
`You have successfully deleted ${numberOfFiles} file(s) from the record of:`,
),
).toBeInTheDocument();
expect(screen.getByText(patientName)).toBeInTheDocument();
expect(screen.getByText(/NHS number/)).toBeInTheDocument();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ import { ButtonLink, Card } from 'nhsuk-react-components';
import { routes } from '../../../types/generic/routes';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router';
import { formatNhsNumber } from '../../../helpers/utils/formatNhsNumber';
import useRole from '../../../helpers/hooks/useRole';
import { REPOSITORY_ROLE } from '../../../types/generic/authRole';
import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
import usePatient from '../../../helpers/hooks/usePatient';
import { DOWNLOAD_STAGE } from '../../../types/generic/downloadStage';
import ReducedPatientInfo from '../../generic/reducedPatientInfo/ReducedPatientInfo';

export type Props = {
numberOfFiles: number;
Expand All @@ -18,9 +17,6 @@ export type Props = {

function DeletionConfirmationStage({ numberOfFiles, setStage, setDownloadStage }: Props) {
const navigate = useNavigate();
const patientDetails = usePatient();
const nhsNumber: string = patientDetails?.nhsNumber ?? '';
const formattedNhsNumber = formatNhsNumber(nhsNumber);
const role = useRole();
const handleClick = () => {
if (setStage && setDownloadStage) {
Expand All @@ -31,21 +27,17 @@ function DeletionConfirmationStage({ numberOfFiles, setStage, setDownloadStage }
const isGP = role === REPOSITORY_ROLE.GP_ADMIN || role === REPOSITORY_ROLE.GP_CLINICAL;
return (
<div className="deletion-complete">
<Card style={{ maxWidth: '620px' }} className="deletion-complete-card">
<Card.Content>
<Card.Heading style={{ margin: 'auto' }}>Deletion complete</Card.Heading>
<Card.Description style={{ fontSize: '16px' }}>
{numberOfFiles} file{numberOfFiles !== 1 && 's'} from the{' '}
{isGP && 'Lloyd George '}
<Card className="deletion-complete_card">
<Card.Content className="deletion-complete_card_content">
<Card.Heading className="deletion-complete_card_content_header">
Deletion complete
</Card.Heading>
<Card.Description className="deletion-complete_card_content_description">
You have successfully deleted {numberOfFiles} file(s){'\n'}
from the {isGP && 'Lloyd George '}
record of:{' '}
</Card.Description>
<Card.Description style={{ fontWeight: '700', fontSize: '24px' }}>
{patientDetails?.givenName?.map((name) => `${name} `)}
{patientDetails?.familyName}
</Card.Description>
<Card.Description style={{ fontSize: '16px' }}>
(NHS number: {formattedNhsNumber})
</Card.Description>
<ReducedPatientInfo className={'deletion-complete_card_content_subheader'} />
</Card.Content>
</Card>
<p style={{ marginTop: 40 }}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ describe('LloydGeorgeDownloadComplete', () => {
);

expect(screen.getByRole('heading', { name: 'Download complete' })).toBeInTheDocument();
expect(screen.getByText('Documents from the Lloyd George record of:')).toBeInTheDocument();
expect(
screen.getByText('You have successfully downloaded the Lloyd George record of:'),
).toBeInTheDocument();
expect(
screen.getByText(mockPatient.givenName + ' ' + mockPatient.familyName),
).toBeInTheDocument();
Expand All @@ -51,7 +53,9 @@ describe('LloydGeorgeDownloadComplete', () => {
);

expect(screen.getByRole('heading', { name: 'Download complete' })).toBeInTheDocument();
expect(screen.getByText('Documents from the Lloyd George record of:')).toBeInTheDocument();
expect(
screen.getByText('You have successfully downloaded the Lloyd George record of:'),
).toBeInTheDocument();
expect(
screen.getByText(mockPatient.givenName + ' ' + mockPatient.familyName),
).toBeInTheDocument();
Expand Down Expand Up @@ -83,7 +87,9 @@ describe('LloydGeorgeDownloadComplete', () => {
);

expect(screen.getByRole('heading', { name: 'Download complete' })).toBeInTheDocument();
expect(screen.getByText('Documents from the Lloyd George record of:')).toBeInTheDocument();
expect(
screen.getByText('You have successfully downloaded the Lloyd George record of:'),
).toBeInTheDocument();
expect(
screen.getByText(mockPatient.givenName + ' ' + mockPatient.familyName),
).toBeInTheDocument();
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { Dispatch, SetStateAction } from 'react';
import { Button, Card } from 'nhsuk-react-components';
import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
import usePatient from '../../../helpers/hooks/usePatient';
import { DOWNLOAD_STAGE } from '../../../types/generic/downloadStage';
import ReducedPatientInfo from '../../generic/reducedPatientInfo/ReducedPatientInfo';

export type Props = {
setStage: Dispatch<SetStateAction<LG_RECORD_STAGE>>;
Expand All @@ -11,8 +11,6 @@ export type Props = {
};

function LloydGeorgeDownloadComplete({ setStage, setDownloadStage, deleteAfterDownload }: Props) {
const patientDetails = usePatient();

const handleReturnButtonClick = () => {
setStage(LG_RECORD_STAGE.RECORD);
if (deleteAfterDownload) {
Expand All @@ -27,22 +25,24 @@ function LloydGeorgeDownloadComplete({ setStage, setDownloadStage, deleteAfterDo
<Card.Heading className="lloydgeorge_download-complete_details-content_header">
Download complete
</Card.Heading>
Documents from the Lloyd George record of:
<div className="lloydgeorge_download-complete_details-content_subheader">
<strong>
{patientDetails?.givenName + ' ' + patientDetails?.familyName}
</strong>
</div>
<div>{`(NHS number: ${patientDetails?.nhsNumber})`}</div>
<Card.Description className="lloydgeorge_download-complete_details-content_description">
You have successfully downloaded the{'\n'}
Lloyd George record of:
</Card.Description>
<ReducedPatientInfo
className={'lloydgeorge_download-complete_details-content_subheader'}
/>
</Card.Content>
</Card>
{deleteAfterDownload ? (
<>
<p>This record has been removed from our storage.</p>
<h2>Keep this patient's record safe</h2>
<p className="lloydgeorge_download-complete_paragraph-headers">
Keep this patient's record safe
</p>
<ol>
<li>
Store the record in accessible and recoverable format within a secure
Store the record in an accessible and recoverable format within a secure
network folder
</li>
<li>
Expand All @@ -60,15 +60,20 @@ function LloydGeorgeDownloadComplete({ setStage, setDownloadStage, deleteAfterDo
</a>
</li>
</ol>
<h3>Your responsibilities with this record</h3>
<p className="lloydgeorge_download-complete_paragraph-headers">
Your responsibilities with this record
</p>
<p>
Everyone in a health and care organisation is responsible for managing
records appropriately. It is important all general practice staff understand
their responsibilities for creating, maintaining, and disposing of records
appropriately.
</p>
<h3>Follow the Record Management Code of Practice</h3>
<p className="lloydgeorge_download-complete_paragraph-headers">
Follow the Record Management Code of Practice
</p>
<p>
The{' '}
<a href="https://transform.england.nhs.uk/information-governance/guidance/records-management-code">
Record Management Code of Practice
</a>{' '}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,14 @@ function LloydGeorgeUploadCompleteStage({ documents }: Props) {
return (
<div className="lloydgeorge_upload-complete" data-testid="upload-complete-page">
<Card className="lloydgeorge_upload-complete_card" data-testid="upload-complete-card">
<Card.Content>
<Card.Heading className="lloydgeorge_upload-complete_card_header">
<Card.Content className="lloydgeorge_upload-complete_card_content">
<Card.Heading className="lloydgeorge_upload-complete_card_content_header">
Record uploaded for
</Card.Heading>
<ReducedPatientInfo className={'lloydgeorge_upload-complete_subheader'} />
<div
style={{ marginTop: 30 }}
className="lloydgeorge_upload-complete_subheader"
>
<ReducedPatientInfo
className={'lloydgeorge_upload-complete_card_content_subheader'}
/>
<div className="lloydgeorge_upload-complete_card_content_subheader">
Date uploaded: {getFormattedDate(new Date())}
</div>
</Card.Content>
Expand Down
Loading

0 comments on commit 3cc18c1

Please sign in to comment.