From 213ea407f73c48648e6e5db793239861fa2c092a Mon Sep 17 00:00:00 2001
From: NogaNHS <127490765+NogaNHS@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:29:32 +0000
Subject: [PATCH] PRMDR 658 - upload button when no existing records (#284)

* prmdr-658 add button to upload when no records for BSOL admin user
---
 .../LloydGeorgeRecordError.test.tsx           | 50 +++++++++++++------
 .../LloydGeorgeRecordError.tsx                | 22 ++++++++
 .../LloydGeorgeRecordStage.tsx                |  2 +
 app/src/styles/App.scss                       | 22 +++++---
 4 files changed, 74 insertions(+), 22 deletions(-)

diff --git a/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.test.tsx b/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.test.tsx
index a2359f29f..95f069e4e 100644
--- a/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.test.tsx
+++ b/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.test.tsx
@@ -6,9 +6,11 @@ import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
 import useRole from '../../../helpers/hooks/useRole';
 import { REPOSITORY_ROLE } from '../../../types/generic/authRole';
 import { routes } from '../../../types/generic/routes';
+import useIsBSOL from '../../../helpers/hooks/useIsBSOL';
 
 const mockSetStage = jest.fn();
 const mockNavigate = jest.fn();
+jest.mock('../../../helpers/hooks/useIsBSOL');
 
 jest.mock('react-router-dom', () => ({
     __esModule: true,
@@ -22,6 +24,7 @@ jest.mock('react-router', () => ({
 
 jest.mock('../../../helpers/hooks/useRole');
 const mockUseRole = useRole as jest.Mock;
+const mockedIsBSOL = useIsBSOL as jest.Mock;
 
 describe('LloydGeorgeRecordError', () => {
     beforeEach(() => {
@@ -37,34 +40,53 @@ describe('LloydGeorgeRecordError', () => {
         it("renders an error when the document download status is 'Timeout'", () => {
             const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
             render(
-                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
+                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
             );
 
             expect(
-                screen.getByText(/The Lloyd George document is too large to view in a browser/i),
+                screen.getByText(/The Lloyd George document is too large to view in a browser/i)
             ).toBeInTheDocument();
             expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
         });
         it("renders an error when the document download status is 'Failed'", () => {
             const timeoutStatus = DOWNLOAD_STAGE.FAILED;
             render(
-                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
+                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
             );
 
             expect(
-                screen.getByText(/Sorry, the service is currently unavailable/i),
+                screen.getByText(/Sorry, the service is currently unavailable/i)
             ).toBeInTheDocument();
             expect(
-                screen.getByText(/An error has occurred when creating the Lloyd George preview/i),
+                screen.getByText(/An error has occurred when creating the Lloyd George preview/i)
             ).toBeInTheDocument();
         });
-        it("renders a message  when the document download status is 'No records'", () => {
+        it("renders a message  when the document download status is 'No records' and user is non BSOL", () => {
             const timeoutStatus = DOWNLOAD_STAGE.NO_RECORDS;
+            mockedIsBSOL.mockReturnValue(false);
+
             render(
-                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
+                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
             );
 
             expect(screen.getByText(/No documents are available/i)).toBeInTheDocument();
+            expect(
+                screen.queryByRole('button', { name: 'Upload patient record' })
+            ).not.toBeInTheDocument();
+        });
+        it("renders a message and upload button when the document download status is 'No records' and user is admin BSOL", () => {
+            const timeoutStatus = DOWNLOAD_STAGE.NO_RECORDS;
+            mockedIsBSOL.mockReturnValue(true);
+            mockUseRole.mockReturnValue(REPOSITORY_ROLE.GP_ADMIN);
+
+            render(
+                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
+            );
+
+            expect(screen.getByText('No records available for this patient')).toBeInTheDocument();
+            expect(
+                screen.getByRole('button', { name: 'Upload patient record' })
+            ).toBeInTheDocument();
         });
     });
 
@@ -72,24 +94,24 @@ describe('LloydGeorgeRecordError', () => {
         it("renders a link that can navigate to the download all stage, when download status is 'Timeout'", () => {
             const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
             render(
-                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
+                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
             );
 
             expect(
-                screen.getByText(/The Lloyd George document is too large to view in a browser/i),
+                screen.getByText(/The Lloyd George document is too large to view in a browser/i)
             ).toBeInTheDocument();
             expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
             expect(
                 screen.getByRole('link', {
                     name: 'please download instead',
-                }),
+                })
             ).toBeInTheDocument();
         });
 
         it("navigates to the download all stage, when download status is 'Timeout' and the link is clicked: GP_ADMIN", () => {
             const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
             render(
-                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
+                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
             );
 
             const downloadLink = screen.getByRole('link', {
@@ -97,7 +119,7 @@ describe('LloydGeorgeRecordError', () => {
             });
 
             expect(
-                screen.getByText(/The Lloyd George document is too large to view in a browser/i),
+                screen.getByText(/The Lloyd George document is too large to view in a browser/i)
             ).toBeInTheDocument();
             expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
             expect(downloadLink).toBeInTheDocument();
@@ -113,7 +135,7 @@ describe('LloydGeorgeRecordError', () => {
             mockUseRole.mockReturnValue(REPOSITORY_ROLE.GP_CLINICAL);
             const timeoutStatus = DOWNLOAD_STAGE.TIMEOUT;
             render(
-                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />,
+                <LloydGeorgeRecordError setStage={mockSetStage} downloadStage={timeoutStatus} />
             );
 
             const downloadLink = screen.getByRole('link', {
@@ -121,7 +143,7 @@ describe('LloydGeorgeRecordError', () => {
             });
 
             expect(
-                screen.getByText(/The Lloyd George document is too large to view in a browser/i),
+                screen.getByText(/The Lloyd George document is too large to view in a browser/i)
             ).toBeInTheDocument();
             expect(screen.getByText(/please download instead/i)).toBeInTheDocument();
             expect(downloadLink).toBeInTheDocument();
diff --git a/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.tsx b/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.tsx
index 516d637bd..a660519a5 100644
--- a/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.tsx
+++ b/app/src/components/blocks/lloydGeorgeRecordError/LloydGeorgeRecordError.tsx
@@ -6,6 +6,8 @@ import { LG_RECORD_STAGE } from '../../../types/blocks/lloydGeorgeStages';
 import useRole from '../../../helpers/hooks/useRole';
 import { REPOSITORY_ROLE } from '../../../types/generic/authRole';
 import { routes } from '../../../types/generic/routes';
+import useIsBSOL from '../../../helpers/hooks/useIsBSOL';
+import { ButtonLink } from 'nhsuk-react-components';
 
 type Props = {
     downloadStage: DOWNLOAD_STAGE;
@@ -15,6 +17,7 @@ type Props = {
 function LloydGeorgeRecordError({ downloadStage, setStage }: Props) {
     const role = useRole();
     const navigate = useNavigate();
+    const isBSOL = useIsBSOL();
 
     if (downloadStage === DOWNLOAD_STAGE.TIMEOUT) {
         return (
@@ -37,6 +40,25 @@ function LloydGeorgeRecordError({ downloadStage, setStage }: Props) {
                 </p>
             </span>
         );
+    } else if (
+        downloadStage === DOWNLOAD_STAGE.NO_RECORDS &&
+        role === REPOSITORY_ROLE.GP_ADMIN &&
+        isBSOL
+    ) {
+        return (
+            <span>
+                <h3>No records available for this patient</h3>
+                <p>
+                    You can upload full or part of a patient record. You can upload supporting files
+                    once the record is uploaded.
+                </p>
+                <div className="lloydgeorge_record-stage_header-content-no_record">
+                    <ButtonLink className="lloydgeorge_record-stage_header-content-no_record-upload">
+                        Upload patient record
+                    </ButtonLink>
+                </div>
+            </span>
+        );
     } else if (downloadStage === DOWNLOAD_STAGE.NO_RECORDS) {
         return <span>No documents are available.</span>;
     } else {
diff --git a/app/src/components/blocks/lloydGeorgeRecordStage/LloydGeorgeRecordStage.tsx b/app/src/components/blocks/lloydGeorgeRecordStage/LloydGeorgeRecordStage.tsx
index 66206d1fd..05ffd5bb2 100644
--- a/app/src/components/blocks/lloydGeorgeRecordStage/LloydGeorgeRecordStage.tsx
+++ b/app/src/components/blocks/lloydGeorgeRecordStage/LloydGeorgeRecordStage.tsx
@@ -25,6 +25,7 @@ import WarningText from '../../generic/warningText/WarningText';
 import ErrorBox from '../../layout/errorBox/ErrorBox';
 import { useForm } from 'react-hook-form';
 import { InputRef } from '../../../types/generic/inputRef';
+import BackButton from '../../generic/backButton/BackButton';
 
 export type Props = {
     downloadStage: DOWNLOAD_STAGE;
@@ -98,6 +99,7 @@ function LloydGeorgeRecordStage({
 
     return (
         <div className="lloydgeorge_record-stage">
+            <BackButton />
             {formState.errors.confirmDownloadRemove && (
                 <ErrorBox
                     dataTestId="confirm-download-and-remove-error"
diff --git a/app/src/styles/App.scss b/app/src/styles/App.scss
index b57cfe3af..4baa26355 100644
--- a/app/src/styles/App.scss
+++ b/app/src/styles/App.scss
@@ -98,9 +98,7 @@ $govuk-compatibility-govukelements: true;
     }
     &:focus {
         background-color: #ffeb3b;
-        box-shadow:
-            0 -2px #ffeb3b,
-            0 4px #212b32;
+        box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
         color: #212b32;
         outline: 4px solid transparent;
         text-decoration: none;
@@ -129,16 +127,15 @@ $govuk-compatibility-govukelements: true;
 .lloydgeorge {
     &_record-stage {
         &_patient-info {
+            p {
+                font-size: 19px;
+            }
             p:first-child {
                 margin-bottom: 5px;
                 font-weight: 700;
             }
-            p:nth-child(1) {
-                font-size: 16px;
-                margin-bottom: 5px;
-            }
             p:nth-child(2) {
-                font-size: 16px;
+                margin-bottom: 0;
             }
         }
         &_header {
@@ -149,6 +146,15 @@ $govuk-compatibility-govukelements: true;
                     font-weight: 700;
                     font-size: 24px;
                 }
+                p {
+                    margin-bottom: 0;
+                }
+                &-no_record {
+                    text-align: right;
+                    &-upload {
+                        margin-bottom: 0;
+                    }
+                }
             }
         }
         &_expander {