Fix: [AEA-6003] - patient banner shown on wrong pages (#1862)

## Summary

https://nhsd-jira.digital.nhs.uk/browse/AEA-6003

- Routine Change


### Details
if a user clicked change role while searching for a prescription, then
it would take them to the /site/change-your-role page but still then
render the RBAC banner when its info had loaded.

Now blocked it from showing on pages where it shouldn't, but still
renders correctly when a user visits the search/view prescription pages

Author: jonathanwelch1-nhs

packages/cpt-ui/__tests__/Layout.test.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import {render, screen} from "@testing-library/react"
+import {MemoryRouter} from "react-router-dom"
+import Layout from "@/Layout"
+import {PatientDetailsProvider} from "@/context/PatientDetailsProvider"
+import {AuthProvider} from "@/context/AuthProvider"
+import {PrescriptionInformationProvider} from "@/context/PrescriptionInformationProvider"
+import {FRONTEND_PATHS} from "@/constants/environment"
+
+// Mock the components that aren't relevant to this test
+jest.mock("@/components/EpsHeader", () => {
+  return function MockEpsHeader() {
+    return <div data-testid="eps-header">EpsHeader</div>
+  }
+})
+
+jest.mock("@/components/EpsFooter", () => {
+  return function MockEpsFooter() {
+    return <div data-testid="eps-footer">EpsFooter</div>
+  }
+})
+
+jest.mock("@/components/RBACBanner", () => {
+  return function MockRBACBanner() {
+    return <div data-testid="rbac-banner">RBACBanner</div>
+  }
+})
+
+const TestWrapper = ({route, children}: {route: string; children?: React.ReactNode}) => (
+  <MemoryRouter initialEntries={[route]}>
+    <AuthProvider>
+      <PatientDetailsProvider>
+        <PrescriptionInformationProvider>
+          {children}
+        </PrescriptionInformationProvider>
+      </PatientDetailsProvider>
+    </AuthProvider>
+  </MemoryRouter>
+)
+
+describe("Layout Banner Visibility Tests", () => {
+  it("should hide PatientDetailsBanner on /select-your-role page even with patient details", () => {
+    render(
+      <TestWrapper route={FRONTEND_PATHS.SELECT_YOUR_ROLE}>
+        <Layout />
+      </TestWrapper>
+    )
+
+    // Should not show patient banner on select-your-role page
+    expect(screen.queryByTestId("patient-details-banner")).not.toBeInTheDocument()
+
+    // Should show other components
+    expect(screen.getByTestId("eps-header")).toBeInTheDocument()
+    expect(screen.getByTestId("eps-footer")).toBeInTheDocument()
+    expect(screen.getByTestId("rbac-banner")).toBeInTheDocument()
+  })
+
+  it("should show PatientDetailsBanner on prescription list page when patient details exist", () => {
+    render(
+      <TestWrapper route={FRONTEND_PATHS.PRESCRIPTION_LIST_CURRENT}>
+        <Layout />
+      </TestWrapper>
+    )
+
+    // PatientDetailsBanner will be rendered but won't show content without patient details
+    // This tests that the banner is rendered on allowed pages
+    expect(screen.getByTestId("eps-header")).toBeInTheDocument()
+    expect(screen.getByTestId("eps-footer")).toBeInTheDocument()
+    expect(screen.getByTestId("rbac-banner")).toBeInTheDocument()
+  })
+
+  it("should hide PatientDetailsBanner on non-allowed pages", () => {
+    render(
+      <TestWrapper route="/some-other-page">
+        <Layout />
+      </TestWrapper>
+    )
+
+    // Should not show patient banner on non-allowed pages
+    expect(screen.queryByTestId("patient-details-banner")).not.toBeInTheDocument()
+  })
+})

packages/cpt-ui/jest.setup.ts

@@ -85,15 +85,26 @@ jest.mock("@/constants/environment", () => ({
     PRESCRIPTION_LIST_CURRENT: "/prescription-list-current",
     PRESCRIPTION_LIST_FUTURE: "/prescription-list-future",
     PRESCRIPTION_LIST_PAST: "/prescription-list-past",
+    COOKIES: "/cookies",
     LOGIN: "/login",
     LOGOUT: "/logout",
+    SESSION_LOGGED_OUT: "/session-logged-out",
     SELECT_YOUR_ROLE: "/select-your-role",
     YOUR_SELECTED_ROLE: "/your-selected-role",
     CHANGE_YOUR_ROLE: "/change-your-role",
     SEARCH_BY_PRESCRIPTION_ID: "/search-by-prescription-id",
     SEARCH_BY_NHS_NUMBER: "/search-by-nhs-number",
     SEARCH_BY_BASIC_DETAILS: "/search-by-basic-details",
-    TOO_MANY_SEARCH_RESULTS: "/too-many-search-results"
+    PRESCRIPTION_DETAILS_PAGE: "/prescription-details",
+    PATIENT_SEARCH_RESULTS: "/patient-search-results",
+    TOO_MANY_SEARCH_RESULTS: "/too-many-search-results",
+    PATIENT_NOT_FOUND: "/patient-not-found",
+    NO_PATIENT_FOUND: "/no-patient-found",
+    NO_PRESCRIPTIONS_FOUND: "/no-prescriptions-found",
+    PRIVACY_NOTICE: "/privacy-notice",
+    COOKIES_SELECTED: "/cookies-selected",
+    SESSION_SELECTION: "/select-active-session",
+    NOT_FOUND: "/notfound"
   },
   ALLOWED_NO_ROLE_PATHS: [
     "/login",
@@ -103,7 +114,31 @@ jest.mock("@/constants/environment", () => ({
     "/session-logged-out",
     "/cookies-selected",
     "/",
-    "/select-active-session"
+    "/select-active-session",
+    "/select-your-role",
+    "/change-your-role"
+  ],
+  ALLOWED_NO_REDIRECT_PATHS: [
+    "/login",
+    "/logout",
+    "/cookies",
+    "/privacy-notice",
+    "/session-logged-out",
+    "/cookies-selected",
+    "/",
+    "/session-logged-out"
+  ],
+  BANNER_ALLOWED_PATHS: [
+    "/prescription-list-current",
+    "/prescription-list-past",
+    "/prescription-list-future",
+    "/prescription-details"
+  ],
+  AUTO_LOGIN_ENVIRONMENTS: [
+    {environment: "dev", loginMethod: "mock"},
+    {environment: "dev-pr", loginMethod: "mock"},
+    {environment: "int", loginMethod: "cis2"},
+    {environment: "prod", loginMethod: "cis2"}
   ],
   PUBLIC_PATHS: [
     "/login",

packages/cpt-ui/src/Layout.tsx

@@ -1,17 +1,24 @@
-import {Outlet} from "react-router-dom"
+import {Outlet, useLocation} from "react-router-dom"
 import EpsHeader from "@/components/EpsHeader"
 import RBACBanner from "@/components/RBACBanner"
 import EpsFooter from "@/components/EpsFooter"
 import PatientDetailsBanner from "@/components/PatientDetailsBanner"
 import PrescriptionInformationBanner from "@/components/PrescriptionInformationBanner"
 import {Fragment, ReactNode} from "react"
+import {normalizePath} from "@/helpers/utils"
+import {BANNER_ALLOWED_PATHS} from "@/constants/environment"
 
 export default function Layout({children}: {children?: ReactNode}) {
+  const location = useLocation()
+
+  const currentPath = normalizePath(location.pathname)
+  const shouldShowBanners = !children && BANNER_ALLOWED_PATHS.includes(currentPath)
+
   return (
     <Fragment>
       <EpsHeader />
-      {!children && <PatientDetailsBanner />}
-      {!children && <PrescriptionInformationBanner />}
+      {shouldShowBanners && <PatientDetailsBanner />}
+      {shouldShowBanners && <PrescriptionInformationBanner />}
       {children ?? <Outlet />}
       <RBACBanner />
       <EpsFooter />

packages/cpt-ui/src/constants/environment.ts

@@ -104,6 +104,14 @@ export const ALLOWED_NO_REDIRECT_PATHS = [
   FRONTEND_PATHS.SESSION_LOGGED_OUT
 ] as const
 
+// pages where patient and prescription banners should be shown
+export const BANNER_ALLOWED_PATHS = [
+  FRONTEND_PATHS.PRESCRIPTION_LIST_CURRENT,
+  FRONTEND_PATHS.PRESCRIPTION_LIST_PAST,
+  FRONTEND_PATHS.PRESCRIPTION_LIST_FUTURE,
+  FRONTEND_PATHS.PRESCRIPTION_DETAILS_PAGE
+] as const
+
 // Type for environment
 export type MockAuthEnvironment = "dev" | "dev-pr" | "ref" | "qa"