VIA-630 Show vaccine cards for 64-75 on hub page

Author: donna-belsey-nhs

src/app/_components/hub/AgeBasedHubCards.test.tsx

@@ -0,0 +1,39 @@
+import { AgeBasedHubCards } from "@src/app/_components/hub/AgeBasedHubCards";
+import { AgeGroup } from "@src/models/ageBasedHub";
+import { VaccineInfo, VaccineType } from "@src/models/vaccine";
+import { render, screen } from "@testing-library/react";
+
+describe("Age based hub cards", () => {
+  describe("for 65-74 year old group", () => {
+    it("should render expected heading for age group", async () => {
+      render(<AgeBasedHubCards ageGroup={AgeGroup.AGE_65_to_74} />);
+
+      const heading: HTMLElement = screen.getByRole("heading", {
+        name: "Adults aged 65 to 74 should get these routine vaccines",
+        level: 2,
+      });
+
+      expect(heading).toBeVisible();
+    });
+
+    it("should render card for each vaccine for age group", async () => {
+      const expectedVaccinesFor65to74 = [VaccineType.PNEUMOCOCCAL, VaccineType.FLU_FOR_ADULTS, VaccineType.SHINGLES];
+
+      render(<AgeBasedHubCards ageGroup={AgeGroup.AGE_65_to_74} />);
+
+      expectedVaccinesFor65to74.map((vaccineType) => {
+        const link: HTMLElement = screen.getByRole("link", { name: VaccineInfo[vaccineType].displayName.titleCase });
+
+        expect(link).toBeVisible();
+        expect(link.getAttribute("href")).toEqual(`/vaccines/${VaccineInfo[vaccineType].urlPath}`);
+      });
+    });
+  });
+
+  describe("for unknown age group", () => {
+    it("should render empty component when age group is unknown", () => {
+      const { container } = render(<AgeBasedHubCards ageGroup={AgeGroup.UNKNOWN_AGE_GROUP} />);
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+});

src/app/_components/hub/AgeBasedHubCards.tsx

@@ -0,0 +1,32 @@
+import CardLinkWithDescription from "@src/app/_components/nhs-app/CardLinkWithDescription";
+import { AgeBasedHubDetails, AgeBasedHubInfo, AgeGroup } from "@src/models/ageBasedHub";
+import { VaccineInfo } from "@src/models/vaccine";
+import React, { JSX } from "react";
+
+type AgeBasedHubProps = {
+  ageGroup: AgeGroup;
+};
+
+const AgeBasedHubCards = ({ ageGroup }: AgeBasedHubProps): JSX.Element => {
+  const hubInfoForAgeGroup: AgeBasedHubDetails | undefined = AgeBasedHubInfo[ageGroup];
+
+  if (hubInfoForAgeGroup) {
+    return (
+      <>
+        <h2 className="nhsuk-heading-s">{hubInfoForAgeGroup.heading}</h2>
+        <ul className="nhsapp-cards nhsapp-cards--stacked">
+          {hubInfoForAgeGroup.vaccines.map((ageSpecificVaccineCardDetails) => (
+            <CardLinkWithDescription
+              key={ageSpecificVaccineCardDetails.vaccineName}
+              title={VaccineInfo[ageSpecificVaccineCardDetails.vaccineName].displayName.titleCase}
+              description={ageSpecificVaccineCardDetails.cardLinkDescription}
+              link={`/vaccines/${VaccineInfo[ageSpecificVaccineCardDetails.vaccineName].urlPath}`}
+            />
+          ))}
+        </ul>
+      </>
+    );
+  } else return <></>;
+};
+
+export { AgeBasedHubCards };

src/app/check-and-book-vaccinations/page.test.tsx

@@ -1,18 +1,65 @@
+import { auth } from "@project/auth";
+import { AgeBasedHubCards } from "@src/app/_components/hub/AgeBasedHubCards";
 import VaccinationsHub from "@src/app/check-and-book-vaccinations/page";
 import { SERVICE_HEADING } from "@src/app/constants";
+import { AgeGroup } from "@src/models/ageBasedHub";
+import { NhsNumber } from "@src/models/vaccine";
+import { Age } from "@src/utils/auth/types";
 import { render, screen } from "@testing-library/react";
+import { Session } from "next-auth";
 
 jest.mock("@src/app/_components/nhs-app/BackToNHSAppLink");
 
+jest.mock("@project/auth", () => ({
+  auth: jest.fn(),
+}));
+
+jest.mock("@src/app/_components/hub/AgeBasedHubCards", () => ({
+  AgeBasedHubCards: jest
+    .fn()
+    .mockImplementation(() => <p data-testid={"age-based-hub-cards"}>Age based hub cards test</p>),
+}));
+
+const mockAgeGroup = AgeGroup.AGE_25_to_64;
+
+const mockSessionValue: Partial<Session> = {
+  expires: new Date(Date.now() + 60000).toISOString(),
+  user: {
+    nhs_number: "" as NhsNumber,
+    age: 25 as Age,
+    age_group: mockAgeGroup,
+  },
+};
+
+const mockSession = { data: mockSessionValue, status: "authenticated" };
+
+jest.mock("next-auth/react", () => ({
+  useSession: () => mockSession,
+}));
+
 describe("Vaccination Hub Page", () => {
   beforeEach(async () => {
-    render(<VaccinationsHub />);
+    (auth as jest.Mock).mockResolvedValue(mockSessionValue);
+
+    render(await VaccinationsHub());
   });
 
   it("renders main heading", async () => {
     expectHeadingToBeRendered();
   });
 
+  it("renders age based cards for user", () => {
+    const ageBasedHubCards: HTMLElement = screen.getByTestId("age-based-hub-cards");
+
+    expect(ageBasedHubCards).toBeVisible();
+    expect(AgeBasedHubCards).toHaveBeenCalledWith(
+      {
+        ageGroup: mockAgeGroup,
+      },
+      undefined,
+    );
+  });
+
   it("renders subheading about pregnancy", () => {
     const subheading: HTMLElement = getHeading("Vaccines if you're pregnant", 2);
     expect(subheading).toBeVisible();

src/app/check-and-book-vaccinations/page.tsx

@@ -1,17 +1,29 @@
+"use server";
+
+import { auth } from "@project/auth";
+import { AgeBasedHubCards } from "@src/app/_components/hub/AgeBasedHubCards";
 import BackToNHSAppLink from "@src/app/_components/nhs-app/BackToNHSAppLink";
 import CardLink from "@src/app/_components/nhs-app/CardLink";
 import MainContent from "@src/app/_components/nhs-frontend/MainContent";
 import { NHS_TITLE_SUFFIX, SERVICE_HEADING } from "@src/app/constants";
+import { AgeGroup } from "@src/models/ageBasedHub";
+import { Session } from "next-auth";
 import Link from "next/link";
 import React from "react";
 
-const VaccinationsHub = () => {
+const VaccinationsHub = async () => {
+  // TODO: VIA-630 add missing request scoped storage wrapper. Check other new pages and add as required
+
+  const session: Session | null = await auth();
+  const ageGroup: AgeGroup = session?.user.age_group as AgeGroup;
+
   return (
     <>
       <title>{`${SERVICE_HEADING} - ${NHS_TITLE_SUFFIX}`}</title>
       <BackToNHSAppLink />
       <MainContent>
         <h1 className={"nhsuk-heading-xl nhsuk-u-margin-bottom-3"}>{SERVICE_HEADING}</h1>
+        <AgeBasedHubCards ageGroup={ageGroup} />
         <h2 className="nhsuk-heading-s">Vaccines if you&#39;re pregnant</h2>
         <p>Some vaccines are recommended during pregnancy to protect the health of you and your baby.</p>
         <ul className="nhsapp-cards nhsapp-cards--stacked" data-testid={"vaccine-cardlinks-adults"}>

src/models/ageBasedHub.ts

@@ -15,7 +15,7 @@ type AgeSpecificVaccineCardDetails = {
   cardLinkDescription: string;
 };
 
-type AgeBasedHubDetails = {
+export type AgeBasedHubDetails = {
   heading: string;
   vaccines: AgeSpecificVaccineCardDetails[];
 };