VIA-2 DB/MD Add vaccine error page without hyperlink

Author: marie-dedikova-nhs

src/app/vaccines/flu/page.tsx

@@ -5,11 +5,14 @@ import { VaccineDisplayNames, VaccineTypes } from "@src/models/vaccine";
 import Vaccine from "@src/app/_components/vaccine/Vaccine";
 import { getContentForVaccine } from "@src/services/content-api/gateway/content-reader-service";
 import { VaccineContentProvider } from "@src/app/_components/providers/VaccineContentProvider";
+import { StyledVaccineContent } from "@src/services/content-api/parsers/content-styling-service";
 
 export const dynamic = "force-dynamic";
 
 const VaccineFlu = (): JSX.Element => {
-  const contentPromise = getContentForVaccine(VaccineTypes.FLU);
+  const contentPromise: Promise<StyledVaccineContent> = getContentForVaccine(
+    VaccineTypes.FLU,
+  );
 
   return (
     <div>

src/app/vaccines/vaccine-error/page.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import VaccineError from "@src/app/vaccines/vaccine-error/page";
+import { VaccineDisplayNames, VaccineTypes } from "@src/models/vaccine";
+
+describe("VaccineError", () => {
+  it("should display back button", () => {
+    const pathToSchedulePage: string = "/schedule";
+
+    render(VaccineError({ vaccineType: VaccineTypes.FLU }));
+
+    const linkToSchedulePage: HTMLElement = screen.getByRole("link", {
+      name: "Go back",
+    });
+    expect(linkToSchedulePage.getAttribute("href")).toBe(pathToSchedulePage);
+  });
+
+  it.each([VaccineTypes.FLU, VaccineTypes.RSV, VaccineTypes.SIX_IN_ONE])(
+    `should display vaccine name in error heading`,
+    (vaccineType: VaccineTypes) => {
+      render(VaccineError({ vaccineType: vaccineType }));
+
+      const heading: HTMLElement = screen.getByRole("heading", {
+        level: 1,
+        name: `${VaccineDisplayNames[vaccineType]} vaccine`,
+      });
+
+      expect(heading).toBeInTheDocument();
+    },
+  );
+
+  it("should display subheading", () => {
+    render(VaccineError({ vaccineType: VaccineTypes.FLU }));
+
+    const subheading: HTMLElement = screen.getByRole("heading", {
+      level: 2,
+      name: "Vaccine content is unavailable",
+    });
+
+    expect(subheading).toBeInTheDocument();
+  });
+
+  it("should display error text", () => {
+    render(VaccineError({ vaccineType: VaccineTypes.FLU }));
+
+    const text: HTMLElement = screen.getByText(
+      "Sorry, there is a problem showing vaccine information. Come back later, or read about vaccinations on NHS.uk.",
+    );
+
+    expect(text).toBeInTheDocument();
+  });
+});

src/app/vaccines/vaccine-error/page.tsx

@@ -0,0 +1,28 @@
+import { JSX } from "react";
+import BackLink from "@src/app/_components/nhs-frontend/BackLink";
+import { VaccineDisplayNames, VaccineTypes } from "@src/models/vaccine";
+import styles from "@src/app/styles.module.css";
+
+interface VaccineProps {
+  vaccineType: VaccineTypes;
+}
+
+const VaccineError = (props: VaccineProps): JSX.Element => {
+  return (
+    <div>
+      <BackLink link="/schedule" />
+      <h1 className="app-dynamic-page-title__heading">{`${VaccineDisplayNames[props.vaccineType]} vaccine`}</h1>
+      <div className={styles.subheading}>
+        <div>
+          <h2 className="nhsuk-heading-s">Vaccine content is unavailable</h2>
+        </div>
+        <p>
+          Sorry, there is a problem showing vaccine information. Come back
+          later, or read about vaccinations on NHS.uk.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default VaccineError;