[PRMP-1051] Add Christmas notification banner (#935)

Co-authored-by: DuncanSangsterNHS <[email protected]>

Author: kamenbachvarov-nhs

app/src/pages/startPage/StartPage.test.tsx

@@ -51,12 +51,12 @@ describe('StartPage', () => {
         );
         expect(downloadOdsReport).toHaveLength(2);
 
-        expect(screen.getByText(/Contact the/i)).toBeInTheDocument();
-        expect(
-            screen.getByRole('link', {
-                name: /NHS National Service Desk/i,
-            }),
-        ).toBeInTheDocument();
+        const contact = screen.getAllByText(/Contact the/i);
+        expect(contact.length).toBe(2);
+        const contactLinks = screen.getAllByRole('link', {
+            name: /NHS National Service Desk/i,
+        });
+        expect(contactLinks.length).toBe(2);
         expect(
             screen.getByText(/if there is an issue with this service or call 0300 303 5035\./i),
         ).toBeInTheDocument();
@@ -65,19 +65,20 @@ describe('StartPage', () => {
     it('renders a service link that takes you to service help-desk in a new tab', () => {
         render(<StartPage />);
 
-        expect(screen.getByText(/Contact the/i)).toBeInTheDocument();
-        const nationalServiceDeskLink = screen.getByRole('link', {
+        const contactTexts = screen.getAllByText(/Contact the/i);
+        expect(contactTexts.length).toBe(2);
+        const nationalServiceDeskLink = screen.getAllByRole('link', {
             name: /NHS National Service Desk/i,
         });
         expect(
             screen.getByText(/if there is an issue with this service or call 0300 303 5035/i),
         ).toBeInTheDocument();
 
-        expect(nationalServiceDeskLink).toHaveAttribute(
+        expect(nationalServiceDeskLink[1]).toHaveAttribute(
             'href',
             'https://digital.nhs.uk/about-nhs-digital/contact-us#nhs-digital-service-desks',
         );
-        expect(nationalServiceDeskLink).toHaveAttribute('target', '_blank');
+        expect(nationalServiceDeskLink[1]).toHaveAttribute('target', '_blank');
     });
 
     it('pass accessibility checks', async () => {

app/src/pages/startPage/StartPage.tsx

@@ -10,6 +10,7 @@ import useBaseAPIUrl from '../../helpers/hooks/useBaseAPIUrl';
 import TestPanel from '../../components/blocks/testPanel/TestPanel';
 import ServiceDeskLink from '../../components/generic/serviceDeskLink/ServiceDeskLink';
 import useTitle from '../../helpers/hooks/useTitle';
+import NotificationBanner from '../../components/layout/notificationBanner/NotificationBanner';
 
 const StartPage = (): React.JSX.Element => {
     const navigate = useNavigate();
@@ -26,11 +27,36 @@ const StartPage = (): React.JSX.Element => {
         }
     };
 
+    const nhsServiceDeskLink = <ServiceDeskLink />;
+    const nationalServiceDeskEmail = (
+        <a href="mailto:[email protected]">[email protected]</a>
+    );
+
     const pageHeader = 'Access and store digital patient documents';
     useTitle({ pageTitle: pageHeader });
 
     return !isLoading ? (
         <>
+            <NotificationBanner
+                title="Important"
+                className="start_page_notification_banner"
+                dataTestId="start_page_notification_banner"
+                scrollToRef={null}
+            >
+                <span>
+                    <p>
+                        <b>
+                            There will be reduced support for this service between 24 December 2025
+                            and 2 January 2026
+                        </b>
+                    </p>
+                    <p>
+                        If there is a problem with this service between these dates, contact the{' '}
+                        {nhsServiceDeskLink} on 0300 303 5035, or email {nationalServiceDeskEmail}.
+                    </p>
+                </span>
+            </NotificationBanner>
+
             <h1>{pageHeader}</h1>
             <p>
                 This service gives you access to Lloyd George digital health records. You may have

app/src/styles/App.scss

@@ -1167,6 +1167,11 @@ $hunit: '%';
     border-color: black;
 }
 
+.start_page_notification_banner {
+    background-color: #005eb8;
+    border-color: #005eb8;
+}
+
 .download-failed-banner {
     max-width: fit-content;
 }
@@ -1309,4 +1314,4 @@ progress:not(.continuous-progress-bar) {
     }
 }
 
-@import '../components/blocks/_patientDocuments/documentSearchResults/DocumentSearchResults.scss'
+@import '../components/blocks/_patientDocuments/documentSearchResults/DocumentSearchResults.scss';