New: [AEA-4655] - User has no access to CPTS (#282)

## Summary

🎫 [AEA-4655](https://nhsd-jira.digital.nhs.uk/browse/AEA-4655) User has
no access to CPTS
🧪 Regression Tests:
[PR-208](NHSDigital/electronic-prescription-service-api-regression-tests#208)
🆔 User UID: 555083343101

✨ New Feature

### Details

User has no access to CPTS

Author: kris-szlapa

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

@@ -3,15 +3,19 @@ import {render, screen, waitFor} from "@testing-library/react"
 import {useRouter} from 'next/navigation'
 import React from "react"
 import SelectYourRolePage from "@/app/selectyourrole/page"
+import {AccessProvider} from "@/context/AccessProvider"
 import {AuthContext} from "@/context/AuthProvider"
-
-// Mock the card strings, so we have known text for the tests
+import {SELECT_YOUR_ROLE_PAGE_TEXT} from "@/constants/ui-strings/CardStrings"
 
 // Mock the module and directly reference the variable
 jest.mock("@/constants/ui-strings/CardStrings", () => {
   const SELECT_YOUR_ROLE_PAGE_TEXT = {
     title: "Select your role",
     caption: "Select the role you wish to use to access the service.",
+    titleNoAccess: "No access to the clinical prescription tracking service",
+    captionNoAccess:
+      "None of the roles on your Smartcard or other authenticators allow you to access the clinical prescription tracking service. " +
+      "Contact your Registration Authority representative to obtain the correct code.",
     insetText: {
       visuallyHidden: "Information: ",
       message:
@@ -58,27 +62,39 @@ global.fetch = mockFetch
 
 // Default mock values for the `AuthContext` to simulate authentication state
 const defaultAuthContext = {
-  error: null, // No errors by default
-  user: null, // User is initially null (not logged in)
-  isSignedIn: false, // Default state is "not signed in"
-  idToken: null, // No ID token available
-  accessToken: null, // No access token available
-  cognitoSignIn: jest.fn(), // Mock Cognito sign-in function
-  cognitoSignOut: jest.fn(), // Mock Cognito sign-out function
+  error: null,
+  user: null,
+  isSignedIn: false,
+  idToken: null,
+  accessToken: null,
+  cognitoSignIn: jest.fn(),
+  cognitoSignOut: jest.fn(),
+}
+
+const defaultAccessContext = {
+  rolesWithAccess: [],
+  rolesWithoutAccess: [],
+  loading: false,
+  error: null,
 }
 
-// Utility function to render the component with custom AuthContext overrides
-const renderWithAuth = (authOverrides = {}) => {
+// Utility function to render with both AuthProvider and AccessProvider
+const renderWithAuthAndAccess = (
+  authOverrides = {},
+  accessOverrides = {}
+) => {
   const authValue = {...defaultAuthContext, ...authOverrides}
+  const accessValue = {...defaultAccessContext, ...accessOverrides}
+
   return render(
     <AuthContext.Provider value={authValue}>
-      <SelectYourRolePage />
+      <AccessProvider>
+        <SelectYourRolePage />
+      </AccessProvider>
     </AuthContext.Provider>
   )
 }
 
-import {SELECT_YOUR_ROLE_PAGE_TEXT} from "@/constants/ui-strings/CardStrings"
-
 describe("SelectYourRolePage", () => {
   // Clear all mock calls before each test to avoid state leaks
   beforeEach(() => {
@@ -90,10 +106,12 @@ describe("SelectYourRolePage", () => {
     mockFetch.mockImplementation(() => new Promise(() => {}))
 
     // Render the page with user signed in
-    renderWithAuth({isSignedIn: true, idToken: "mock-id-token"})
+    renderWithAuthAndAccess({isSignedIn: true, idToken: "mock-id-token"}, {loading: true})
 
     // Verify that the loading text appears
-    const loadingText = screen.getByText(SELECT_YOUR_ROLE_PAGE_TEXT.loadingMessage)
+    const loadingText = screen.getByText(
+      SELECT_YOUR_ROLE_PAGE_TEXT.loadingMessage
+    )
     expect(loadingText).toBeInTheDocument()
   })
 
@@ -102,11 +120,10 @@ describe("SelectYourRolePage", () => {
     mockFetch.mockResolvedValue({status: 500})
 
     // Render the page with user signed in
-    renderWithAuth({isSignedIn: true, idToken: "mock-id-token"})
+    renderWithAuthAndAccess({isSignedIn: true, idToken: "mock-id-token"})
 
     // Wait for the error message to appear
     await waitFor(() => {
-      // Check for error summary heading
       const errorHeading = screen.getByRole("heading", {
         name: SELECT_YOUR_ROLE_PAGE_TEXT.errorDuringRoleSelection,
       })
@@ -126,7 +143,7 @@ describe("SelectYourRolePage", () => {
     })
 
     // Render the page with user signed in
-    renderWithAuth({isSignedIn: true, idToken: "mock-id-token"})
+    renderWithAuthAndAccess({isSignedIn: true, idToken: "mock-id-token"})
 
     // Wait for the error message to appear
     await waitFor(() => {
@@ -170,45 +187,46 @@ describe("SelectYourRolePage", () => {
     })
 
     // Render the page with user signed in
-    renderWithAuth({isSignedIn: true, idToken: "mock-id-token"})
+    renderWithAuthAndAccess({isSignedIn: true, idToken: "mock-id-token"})
 
     // Wait for the main content to load
     await waitFor(() => {
       // Check for the page heading
       const heading = screen.getByRole("heading", {level: 1})
       expect(heading).toHaveTextContent(SELECT_YOUR_ROLE_PAGE_TEXT.title)
     })
+  })
 
-    // Verify the page caption
-    const caption = screen.getByText(SELECT_YOUR_ROLE_PAGE_TEXT.caption)
-    expect(caption).toBeInTheDocument()
-
-    // Verify the "Roles without access" section (expander)
-    const expanderText = SELECT_YOUR_ROLE_PAGE_TEXT.roles_without_access_table_title
-    const expander = screen.getByText(expanderText)
-    expect(expander).toBeInTheDocument()
+  it("renders no access title and caption when no roles with access are available", async () => {
+    // Mock user data with no roles with access
+    const mockUserInfo = {
+      roles_with_access: [], // No roles with access
+      roles_without_access: [
+        {
+          role_name: "Technician",
+          org_name: "Tech Org",
+          org_code: "ORG456",
+          site_address: "2 Fake Street",
+        },
+      ],
+    }
 
-    // Check for the table data in "Roles without access"
-    const tableOrg = screen.getByText(/Tech Org \(ODS: ORG456\)/i)
-    expect(tableOrg).toBeInTheDocument()
-    const tableRole = screen.getByText("Technician")
-    expect(tableRole).toBeInTheDocument()
-  })
+    // Mock fetch to return 200 OK with valid userInfo
+    mockFetch.mockResolvedValue({
+      status: 200,
+      json: async () => ({userInfo: mockUserInfo}),
+    })
 
-  it("renders error summary when not signed in", async () => {
-    // Render the page with `isSignedIn` set to false
-    renderWithAuth({isSignedIn: false, error: "Missing access or ID token"})
+    // Render the page with user signed in
+    renderWithAuthAndAccess({isSignedIn: true, idToken: "mock-id-token"})
 
-    // Wait for the error message to appear
+    // Wait for the main content to load
     await waitFor(() => {
-      // Check for error summary heading
-      const errorHeading = screen.getByRole("heading", {
-        name: SELECT_YOUR_ROLE_PAGE_TEXT.errorDuringRoleSelection,
-      })
-      expect(errorHeading).toBeInTheDocument()
-
-      const errorItem = screen.getByText("Missing access or ID token")
-      expect(errorItem).toBeInTheDocument()
+      // Check for the no-access title
+      const heading = screen.getByRole("heading", {level: 1})
+      expect(heading).toHaveTextContent(
+        SELECT_YOUR_ROLE_PAGE_TEXT.titleNoAccess
+      )
     })
   })
 
@@ -225,49 +243,18 @@ describe("SelectYourRolePage", () => {
       roles_without_access: [],
     }
 
-    // Mock fetch response
-    global.fetch = jest.fn(() =>
-      Promise.resolve({
-        ok: true,
-        status: 200,
-        statusText: "OK",
-        headers: new Headers(),
-        redirected: false,
-        type: "basic",
-        url: "",
-        clone: jest.fn(),
-        body: null,
-        bodyUsed: false,
-        text: jest.fn(),
-        json: jest.fn(() => Promise.resolve({userInfo: mockUserInfo})), // Simulate JSON body
-      })
-    ) as jest.Mock
+    mockFetch.mockResolvedValue({
+      status: 200,
+      json: async () => ({userInfo: mockUserInfo}),
+    })
 
-    // Mock useRouter's push function
     const mockPush = jest.fn();
     (useRouter as jest.Mock).mockReturnValue({
       push: mockPush,
     })
 
-    // Mock AuthContext
-    const mockAuthContext = {
-      isSignedIn: true,
-      idToken: mockJWT,
-      accessToken: mockJWT,
-      error: null,
-      user: null,
-      cognitoSignIn: jest.fn(),
-      cognitoSignOut: jest.fn(),
-    }
-
-    // Render the component
-    render(
-      <AuthContext.Provider value={mockAuthContext}>
-        <SelectYourRolePage />
-      </AuthContext.Provider>
-    )
+    renderWithAuthAndAccess({isSignedIn: true, idToken: "mock-id-token"})
 
-    // Wait for redirection
     await waitFor(() => {
       expect(mockPush).toHaveBeenCalledWith("/searchforaprescription")
     })

packages/cpt-ui/app/layout.tsx

@@ -1,10 +1,11 @@
 'use client'
-import React from "react";
+import React from 'react'
 
-import 'nhsuk-frontend/dist/nhsuk.css';
-import EpsHeader from '@/components/EpsHeader'
+import 'nhsuk-frontend/dist/nhsuk.css'
+import EpsHeaderLayout from '@/components/EpsHeaderLayout'
 import EpsFooter from '@/components/EpsFooter'
-import { AuthProvider } from '@/context/AuthProvider'
+import {AuthProvider} from '@/context/AuthProvider'
+import {AccessProvider} from '@/context/AccessProvider'
 
 export default function RootLayout({
     children,
@@ -15,12 +16,13 @@ export default function RootLayout({
         <html lang="en">
             <body>
                 <AuthProvider>
-                    <EpsHeader />
-                    {children}
-                    <EpsFooter />
+                    <AccessProvider>
+                        <EpsHeaderLayout />
+                        {children}
+                        <EpsFooter />
+                    </AccessProvider>
                 </AuthProvider>
             </body>
-
         </html>
     )
 }

packages/cpt-ui/app/selectyourrole/page.tsx

@@ -3,6 +3,7 @@ import React, {useState, useEffect, useContext, useCallback} from "react"
 import {useRouter} from 'next/navigation'
 import {Container, Col, Row, Details, Table, ErrorSummary, Button, InsetText} from "nhsuk-react-components"
 import {AuthContext} from "@/context/AuthProvider"
+import {useAccess} from '@/context/AccessProvider'
 import EpsCard, {EpsCardProps} from "@/components/EpsCard"
 import {SELECT_YOUR_ROLE_PAGE_TEXT} from "@/constants/ui-strings/CardStrings"
 
@@ -39,6 +40,8 @@ const trackerUserInfoEndpoint = "/api/tracker-user-info"
 const {
     title,
     caption,
+    titleNoAccess,
+    captionNoAccess,
     insetText,
     confirmButton,
     alternativeMessage,
@@ -55,6 +58,7 @@ const {
 } = SELECT_YOUR_ROLE_PAGE_TEXT
 
 export default function SelectYourRolePage() {
+    const {setNoAccess} = useAccess()
     const [loading, setLoading] = useState<boolean>(true)
     const [error, setError] = useState<string | null>(null)
     const [redirecting, setRedirecting] = useState<boolean>(false)
@@ -125,6 +129,8 @@ export default function SelectYourRolePage() {
                 }))
             )
 
+            setNoAccess(rolesWithAccess.length === 0)
+
             // Redirect if conditions are met
             if (rolesWithAccess.length === 1 && rolesWithoutAccess.length === 0) {
                 setRedirecting(true)
@@ -138,7 +144,8 @@ export default function SelectYourRolePage() {
         } finally {
             setLoading(false)
         }
-    }, [auth, router])
+
+    }, [auth, router, setNoAccess])
 
     useEffect(() => {
         if (auth?.isSignedIn === undefined) {
@@ -201,45 +208,56 @@ export default function SelectYourRolePage() {
         )
     }
 
+    const noAccess = rolesWithAccess.length === 0
+    
+    console.log("Title for no access:", SELECT_YOUR_ROLE_PAGE_TEXT.titleNoAccess);
+    console.log("No Access State:", noAccess);
+
     return (
         <main id="main-content" className="nhsuk-main-wrapper">
             <Container role="contentinfo">
                 {/* Title Section */}
                 <Row>
                     <Col width="two-thirds">
-                        <h1 className='nhsuk-heading-xl'>
+                        <h1 className="nhsuk-heading-xl">
                             <span role="text" data-testid="eps_header_selectYourRole">
-                                <span className="nhsuk-title">{title}</span>
+                                <span className="nhsuk-title">{noAccess ? titleNoAccess : title}</span>
                                 <span className="nhsuk-caption-l nhsuk-caption--bottom">
                                     <span className="nhsuk-u-visually-hidden"> - </span>
-                                    {caption}
+                                    {!noAccess && caption}
                                 </span>
                             </span>
                         </h1>
+                        {/* Caption Section for No Access */}
+                        {noAccess && (<p>{captionNoAccess}</p>)}
                         {/* Inset Text Section */}
-                        <section aria-label="Login Information">
-                            <InsetText>
-                                <span className="nhsuk-u-visually-hidden">{insetText.visuallyHidden}</span>
-                                <p>{insetText.message}</p>
-                            </InsetText>
-                            {/* Confirm Button */}
-                            <Button href={confirmButton.link}>{confirmButton.text}</Button>
-                            <p>{alternativeMessage}</p>
-                        </section>
+                        {!noAccess && (
+                            <section aria-label="Login Information">
+                                <InsetText>
+                                    <span className="nhsuk-u-visually-hidden">{insetText.visuallyHidden}</span>
+                                    <p>{insetText.message}</p>
+                                </InsetText>
+                                {/* Confirm Button */}
+                                <Button href={confirmButton.link}>{confirmButton.text}</Button>
+                                <p>{alternativeMessage}</p>
+                            </section>
+                        )}
                     </Col>
 
                     {/* Roles with access Section */}
-                    <Col width="two-thirds">
-                        <div className="section">
-                            {rolesWithAccess.map((role: RolesWithAccessProps) => (
-                                <EpsCard {...role} key={role.uuid} />
-                            ))}
-                        </div>
-                    </Col>
+                    {!noAccess && (
+                        <Col width="two-thirds">
+                            <div className="section" >
+                                {rolesWithAccess.map((role: RolesWithAccessProps) => (
+                                    <EpsCard {...role} key={role.uuid} />
+                                ))}
+                            </div>
+                        </Col>
+                    )}
 
                     {/* Roles without access Section */}
                     <Col width="two-thirds">
-                        <h2>{rolesWithoutAccessHeader}</h2>
+                        <h3>{rolesWithoutAccessHeader}</h3>
                         <Details expander>
                             <Details.Summary>
                                 {roles_without_access_table_title}