VIA-627 SB & EO Show how-to-get below recommendation.

Author: acerathereinspirative-nhs-nvir

src/app/_components/content/Overview.test.tsx

@@ -8,11 +8,25 @@ import {
 import { render, screen } from "@testing-library/react";
 import React from "react";
 
+jest.mock("cheerio", () => ({
+  load: jest.fn(() => {
+    const selectorImpl = jest.fn(() => ({
+      attr: jest.fn(),
+    }));
+
+    const $ = Object.assign(selectorImpl, {
+      html: jest.fn(() => "Overview <b>text</b>"),
+    });
+
+    return $;
+  }),
+}));
+
 describe("Overview component", () => {
   it("renders overview without HTML correctly", () => {
     const vaccineType = VaccineType.SHINGLES;
 
-    render(<Overview styledVaccineContent={mockStyledContent} vaccineType={vaccineType} />);
+    render(<Overview overview={mockStyledContent.overview} vaccineType={vaccineType} />);
 
     const overviewText: HTMLElement = screen.getByTestId("overview-text");
 
@@ -22,7 +36,7 @@ describe("Overview component", () => {
   it("renders overview with HTML correctly", () => {
     const vaccineType = VaccineType.SHINGLES;
 
-    render(<Overview styledVaccineContent={mockStyledContentWithHtmlOverview} vaccineType={vaccineType} />);
+    render(<Overview overview={mockStyledContentWithHtmlOverview.overview} vaccineType={vaccineType} />);
 
     const overviewText: HTMLElement = screen.getByTestId("overview-text");
 
@@ -38,7 +52,7 @@ describe("Overview component", () => {
   it("does not render missing overview", () => {
     const vaccineType = VaccineType.FLU_IN_PREGNANCY;
 
-    render(<Overview styledVaccineContent={mockStyledContentWithMissingOverview} vaccineType={vaccineType} />);
+    render(<Overview overview={mockStyledContentWithMissingOverview.overview} vaccineType={vaccineType} />);
 
     const overviewText: HTMLElement | null = screen.queryByTestId("overview-text");
 

src/app/_components/content/Overview.tsx

@@ -1,16 +1,17 @@
 import { VaccineType } from "@src/models/vaccine";
-import { StyledVaccineContent } from "@src/services/content-api/types";
+import { Overview as StyledOverview } from "@src/services/content-api/types";
+import { fixupHtmlFragment } from "@src/utils/html";
 import { JSX } from "react";
 
-const Overview = (props: { styledVaccineContent: StyledVaccineContent; vaccineType: VaccineType }): JSX.Element => {
-  const element = props.styledVaccineContent.overview ? (
-    props.styledVaccineContent.overview.containsHtml ? (
+const Overview = (props: { overview: StyledOverview | undefined; vaccineType: VaccineType }): JSX.Element => {
+  const element = props.overview ? (
+    props.overview.containsHtml ? (
       <div
         data-testid="overview-text"
-        dangerouslySetInnerHTML={{ __html: props.styledVaccineContent.overview.content || "" }}
+        dangerouslySetInnerHTML={{ __html: fixupHtmlFragment(props.overview.content) || "" }}
       />
     ) : (
-      <p data-testid="overview-text">{props.styledVaccineContent.overview.content}</p>
+      <p data-testid="overview-text">{props.overview.content}</p>
     )
   ) : (
     <></>

src/app/_components/vaccine/Vaccine.test.tsx

@@ -55,6 +55,19 @@ jest.mock("next/headers", () => ({
   headers: jest.fn(),
 }));
 jest.mock("sanitize-data", () => ({ sanitize: jest.fn() }));
+jest.mock("cheerio", () => ({
+  load: jest.fn(() => {
+    const selectorImpl = jest.fn(() => ({
+      attr: jest.fn(),
+    }));
+
+    const $ = Object.assign(selectorImpl, {
+      html: jest.fn(() => "<p>HTML fragment</p>"),
+    });
+
+    return $;
+  }),
+}));
 
 const nhsNumber = "5123456789";
 

src/app/_components/vaccine/Vaccine.tsx

@@ -68,9 +68,10 @@ const VaccineComponent = async ({ vaccineType }: VaccineProps): Promise<JSX.Elem
     <div className={styles.tableCellSpanHide}>
       {contentError != ContentErrorTypes.CONTENT_LOADING_ERROR && styledVaccineContent != undefined && (
         <>
-          <Overview styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
+          <Overview overview={styledVaccineContent.overview} vaccineType={vaccineType} />
           <Recommendation styledVaccineContent={styledVaccineContent} />
           <WarningCallout styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
+          <Overview overview={styledVaccineContent.overviewConclusion} vaccineType={vaccineType} />
         </>
       )}
 

src/services/content-api/parsers/content-styling-service.tsx

@@ -16,8 +16,8 @@ import {
   VaccinePageSection,
   VaccinePageSubsection,
 } from "@src/services/content-api/types";
+import { fixupHtmlFragment } from "@src/utils/html";
 import sanitiseHtml from "@src/utils/sanitise-html";
-import { load as loadHtml } from "cheerio";
 import { InsetText, WarningCallout } from "nhsuk-react-components";
 import React, { JSX } from "react";
 
@@ -179,11 +179,14 @@ function styleCallout(callout: HeadingWithTypedContent | undefined): StyledPageS
           component: <MarkdownWithStyling content={callout.content} delineator={false} />,
         };
       case "html":
-        const $ = loadHtml(callout.content, null, false);
-        $("a").attr("target", "_blank");
         return {
           heading: callout.heading,
-          component: <div data-testid="callout-html" dangerouslySetInnerHTML={{ __html: $.html() || "" }} />,
+          component: (
+            <div
+              data-testid="callout-html"
+              dangerouslySetInnerHTML={{ __html: fixupHtmlFragment(callout.content) || "" }}
+            />
+          ),
         };
       case "string":
         return {
@@ -215,26 +218,28 @@ const getStyledContentForVaccine = async (
   fragile: boolean,
 ): Promise<StyledVaccineContent> => {
   const overview: Overview | undefined = filteredContent.overview;
+  const callout: StyledPageSection | undefined = styleCallout(filteredContent.callout);
+  const recommendation: StyledPageSection | undefined = styleRecommendation(filteredContent.recommendation);
+  const overviewConclusion: Overview | undefined = filteredContent.overviewConclusion;
   let whatVaccineIsFor;
   if (filteredContent.whatVaccineIsFor) {
     whatVaccineIsFor = styleSection(filteredContent.whatVaccineIsFor);
   }
   const whoVaccineIsFor: StyledPageSection = styleSection(filteredContent.whoVaccineIsFor);
   const howToGetVaccine: StyledPageSection = styleHowToGetSection(vaccine, filteredContent.howToGetVaccine, fragile);
   const vaccineSideEffects: StyledPageSection = styleSection(filteredContent.vaccineSideEffects);
-  const callout: StyledPageSection | undefined = styleCallout(filteredContent.callout);
-  const recommendation: StyledPageSection | undefined = styleRecommendation(filteredContent.recommendation);
   const webpageLink: URL = filteredContent.webpageLink;
 
   return {
     overview,
+    callout,
+    recommendation,
+    overviewConclusion,
     whatVaccineIsFor,
     whoVaccineIsFor,
     howToGetVaccine,
     vaccineSideEffects,
     webpageLink,
-    callout,
-    recommendation,
   };
 };
 

src/services/content-api/parsers/custom/flu-for-school-aged-children.tsx

@@ -1,12 +1,29 @@
 import { buildFilteredContentForStandardVaccine } from "@src/services/content-api/parsers/content-filter-service";
-import { HeadingWithContent, VaccinePageContent } from "@src/services/content-api/types";
+import {
+  ExpanderSubsection,
+  HeadingWithContent,
+  VaccinePageContent,
+  VaccinePageSubsection,
+} from "@src/services/content-api/types";
 
 export const buildFilteredContentForFluForSchoolAgedChildrenVaccine = (apiContent: string): VaccinePageContent => {
   const standardFilteredContent = buildFilteredContentForStandardVaccine(apiContent);
 
+  const overviewConclusion: VaccinePageSubsection | undefined =
+    standardFilteredContent.howToGetVaccine.subsections.find((subsection: VaccinePageSubsection) => {
+      return subsection.type == "expanderElement" && subsection.headline.startsWith("School");
+    }) as ExpanderSubsection | undefined;
+
   const recommendation: HeadingWithContent = {
     heading: "The flu vaccine is recommended for children who:",
     content: ["* are of school age (Reception to Year 1)"].join("\n"),
   };
-  return { ...standardFilteredContent, recommendation };
+
+  return {
+    ...standardFilteredContent,
+    recommendation,
+    overviewConclusion: overviewConclusion?.mainEntity
+      ? { content: overviewConclusion.mainEntity, containsHtml: true }
+      : undefined,
+  };
 };

src/services/content-api/types.ts

@@ -85,7 +85,7 @@ type TableSubsection = {
   mainEntity: string;
 };
 
-type ExpanderSubsection = {
+export type ExpanderSubsection = {
   type: "expanderElement";
   name: string;
   mainEntity: string;
@@ -104,13 +104,14 @@ export type Overview = { content: string; containsHtml: boolean };
 
 export type VaccinePageContent = {
   overview?: Overview;
+  callout?: HeadingWithTypedContent;
+  recommendation?: HeadingWithContent;
+  overviewConclusion?: Overview;
   whatVaccineIsFor?: VaccinePageSection;
   whoVaccineIsFor: VaccinePageSection;
   howToGetVaccine: VaccinePageSection;
   vaccineSideEffects: VaccinePageSection;
   webpageLink: URL;
-  callout?: HeadingWithTypedContent;
-  recommendation?: HeadingWithContent;
 };
 
 export type StyledPageSection = {
@@ -134,13 +135,14 @@ export type HeadingWithTypedContent = {
 
 export type StyledVaccineContent = {
   overview?: Overview;
+  callout?: StyledPageSection;
+  recommendation?: StyledPageSection;
+  overviewConclusion?: Overview;
   whatVaccineIsFor?: StyledPageSection;
   whoVaccineIsFor: StyledPageSection;
   howToGetVaccine: StyledPageSection;
   vaccineSideEffects: StyledPageSection;
   webpageLink: URL;
-  callout?: StyledPageSection;
-  recommendation?: StyledPageSection;
 };
 
 export type ContentApiVaccinationsResponse = {

src/utils/html.ts

@@ -0,0 +1,7 @@
+import { load as loadHtml } from "cheerio";
+
+export function fixupHtmlFragment(fragment: string) {
+  const $ = loadHtml(fragment, null, false);
+  $("a").attr("target", "_blank");
+  return $.html();
+}

wiremock/__files/child-flu-vaccine.json

@@ -16,7 +16,6 @@
   "url": "https://int.api.service.nhs.uk/nhs-website-content/vaccinations/child-flu-vaccine/",
   "genre": ["Vaccine"],
   "keywords": "",
-  "dateModified": "2025-10-10T11:00:56+00:00",
   "lastReviewed": ["2023-12-13T08:33:00+00:00", "2026-12-13T08:33:00+00:00"],
   "breadcrumb": {
     "@context": "http://schema.org",