VIA-618 SB Final(?) changes to hard-coded content for Flu in pregnancy page.

This involved making overview optional, since this page doesn't have one.

Author: acerathereinspirative-nhs-nvir

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

@@ -1,6 +1,10 @@
 import { Overview } from "@src/app/_components/content/Overview";
 import { VaccineType } from "@src/models/vaccine";
-import { mockStyledContent, mockStyledContentWithHtmlOverview } from "@test-data/content-api/data";
+import {
+  mockStyledContent,
+  mockStyledContentWithHtmlOverview,
+  mockStyledContentWithMissingOverview,
+} from "@test-data/content-api/data";
 import { render, screen } from "@testing-library/react";
 import React from "react";
 
@@ -30,4 +34,14 @@ describe("Overview component", () => {
     expect(boldElement).toBeInTheDocument();
     expect(boldElement.tagName).toBe("B");
   });
+
+  it("does not render missing overview", () => {
+    const vaccineType = VaccineType.FLU_IN_PREGNANCY;
+
+    render(<Overview styledVaccineContent={mockStyledContentWithMissingOverview} vaccineType={vaccineType} />);
+
+    const overviewText: HTMLElement | null = screen.queryByTestId("overview-text");
+
+    expect(overviewText).not.toBeInTheDocument();
+  });
 });

src/app/_components/content/Overview.tsx

@@ -3,13 +3,17 @@ import { StyledVaccineContent } from "@src/services/content-api/types";
 import { JSX } from "react";
 
 const Overview = (props: { styledVaccineContent: StyledVaccineContent; vaccineType: VaccineType }): JSX.Element => {
-  const element = props.styledVaccineContent?.overview.containsHtml ? (
-    <div
-      data-testid="overview-text"
-      dangerouslySetInnerHTML={{ __html: props.styledVaccineContent?.overview.content || "" }}
-    />
+  const element = props.styledVaccineContent.overview ? (
+    props.styledVaccineContent.overview.containsHtml ? (
+      <div
+        data-testid="overview-text"
+        dangerouslySetInnerHTML={{ __html: props.styledVaccineContent.overview.content || "" }}
+      />
+    ) : (
+      <p data-testid="overview-text">{props.styledVaccineContent.overview.content}</p>
+    )
   ) : (
-    <p data-testid="overview-text">{props.styledVaccineContent?.overview.content}</p>
+    <></>
   );
   return element;
 };

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

@@ -175,7 +175,7 @@ const getStyledContentForVaccine = async (
   filteredContent: VaccinePageContent,
   fragile: boolean,
 ): Promise<StyledVaccineContent> => {
-  const overview: Overview = filteredContent.overview;
+  const overview: Overview | undefined = filteredContent.overview;
   let whatVaccineIsFor;
   if (filteredContent.whatVaccineIsFor) {
     whatVaccineIsFor = styleSection(filteredContent.whatVaccineIsFor);

src/services/content-api/parsers/custom/flu-in-pregnancy.test.tsx

@@ -13,16 +13,6 @@ const apiResponse = JSON.stringify({
 });
 
 describe("getFilteredContentForFluInPregnancyVaccine", () => {
-  it("should return overview text from lead paragraph mainEntityOfPage object", async () => {
-    const expected = {
-      overview: { content: "Flu in Pregnancy Vaccine Lead Paragraph (overview)", containsHtml: true },
-    };
-
-    const pageCopy = getFilteredContentForFluInPregnancyVaccine(apiResponse);
-
-    expect(pageCopy).toEqual(expect.objectContaining(expected));
-  });
-
   it("should return all parts for whatVaccineIsFor section", () => {
     const expected = {
       whatVaccineIsFor: {
@@ -126,8 +116,8 @@ describe("getFilteredContentForFluInPregnancyVaccine", () => {
   it("should return recommendation", () => {
     const expected = {
       recommendation: {
-        heading: "The flu vaccine is recommended if you:",
-        content: "* are pregnant\n* have not had the vaccine during this pregnancy",
+        heading: "The flu vaccine is recommended:",
+        content: "* if you are pregnant\n* whatever stage of pregnancy you're at\n\nIt's free on the NHS.",
       },
     };
 

src/services/content-api/parsers/custom/flu-in-pregnancy.tsx

@@ -14,7 +14,6 @@ export const getFilteredContentForFluInPregnancyVaccine = (apiContent: string):
     .map((part) => part?.text)
     .filter((text): text is string => !!text);
 
-  const overview = { content: paragraphs[0], containsHtml: true };
   const whyOffered: VaccinePageSection = {
     headline: "Why pregnant women are offered the vaccine",
     subsections: [{ type: "simpleElement", headline: "", text: paragraphs[1], name: "markdown" }],
@@ -37,12 +36,14 @@ export const getFilteredContentForFluInPregnancyVaccine = (apiContent: string):
     content: "Flu vaccine bookings will reopen in autumn 2026",
   };
   const recommendation: HeadingWithContent = {
-    heading: "The flu vaccine is recommended if you:",
-    content: ["* are pregnant", "* have not had the vaccine during this pregnancy"].join("\n"),
+    heading: "The flu vaccine is recommended:",
+    content: ["* if you are pregnant", "* whatever stage of pregnancy you're at", "", "It's free on the NHS."].join(
+      "\n",
+    ),
   };
 
   return {
-    overview,
+    overview: undefined,
     whatVaccineIsFor: whyOffered,
     whoVaccineIsFor: isItSafe,
     howToGetVaccine,

src/services/content-api/types.ts

@@ -103,7 +103,7 @@ export type VaccinePageSection = {
 export type Overview = { content: string; containsHtml: boolean };
 
 export type VaccinePageContent = {
-  overview: Overview;
+  overview?: Overview;
   whatVaccineIsFor?: VaccinePageSection;
   whoVaccineIsFor: VaccinePageSection;
   howToGetVaccine: VaccinePageSection;
@@ -127,7 +127,7 @@ export type HeadingWithContent = {
 };
 
 export type StyledVaccineContent = {
-  overview: Overview;
+  overview?: Overview;
   whatVaccineIsFor?: StyledPageSection;
   whoVaccineIsFor: StyledPageSection;
   howToGetVaccine: StyledPageSection;

test-data/content-api/data.tsx

@@ -595,6 +595,28 @@ export const mockStyledContent: StyledVaccineContent = {
   recommendation: { heading: "Recommendation Heading", component: <div>Recommendation component</div> },
 };
 
+export const mockStyledContentWithMissingOverview: StyledVaccineContent = {
+  whatVaccineIsFor: {
+    heading: "what-heading",
+    component: <p>What Section styled component</p>,
+  },
+  whoVaccineIsFor: {
+    heading: "who-heading",
+    component: <h2>Who Section styled component</h2>,
+  },
+  howToGetVaccine: {
+    heading: "how-heading",
+    component: <div>How Section styled component</div>,
+  },
+  vaccineSideEffects: {
+    heading: "side-effects-heading",
+    component: <div>Side effects section styled component</div>,
+  },
+  webpageLink: new URL("https://test.example.com/"),
+  callout: { heading: "Callout Heading", content: "Callout content" },
+  recommendation: { heading: "Recommendation Heading", component: <div>Recommendation component</div> },
+};
+
 export const mockStyledContentWithHtmlOverview: StyledVaccineContent = {
   overview: { content: "Overview <b>text</b>", containsHtml: true },
   whatVaccineIsFor: {