VIA-618 SB Show care card Flu in pregnancy page.

Markdown isn't being rendered yet.

Author: acerathereinspirative-nhs-nvir

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

@@ -125,12 +125,20 @@ describe("Any vaccine page", () => {
       expect(overviewText).toBeInTheDocument();
     });
 
+    it("should include recommendation text", async () => {
+      await renderNamedVaccinePage(VaccineType.FLU_IN_PREGNANCY);
+
+      const overviewText: HTMLElement = screen.getByTestId("recommendation");
+
+      expect(overviewText).toBeInTheDocument();
+    });
+
     it("should include callout text", async () => {
       await renderNamedVaccinePage(VaccineType.HIB_MENC);
 
-      const overviewText: HTMLElement = screen.getByTestId("callout");
+      const calloutText: HTMLElement = screen.getByTestId("callout");
 
-      expect(overviewText).toBeInTheDocument();
+      expect(calloutText).toBeInTheDocument();
     });
 
     it("should include lowercase vaccine name in more information text", async () => {

src/app/_components/vaccine/Vaccine.tsx

@@ -7,6 +7,7 @@ import { HowToGetVaccineFallback } from "@src/app/_components/content/HowToGetVa
 import { MoreInformation } from "@src/app/_components/content/MoreInformation";
 import { Overview } from "@src/app/_components/content/Overview";
 import { EligibilityVaccinePageContent } from "@src/app/_components/eligibility/EligibilityVaccinePageContent";
+import NonUrgentCareCard from "@src/app/_components/nhs-frontend/NonUrgentCareCard";
 import { RSVPregnancyInfo } from "@src/app/_components/vaccine-custom/RSVPregnancyInfo";
 import { NhsNumber, VaccineDetails, VaccineInfo, VaccineType } from "@src/models/vaccine";
 import { getContentForVaccine } from "@src/services/content-api/content-service";
@@ -69,6 +70,14 @@ const VaccineComponent = async ({ vaccineType }: VaccineProps): Promise<JSX.Elem
         <>
           <Overview styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
           <Callout styledVaccineContent={styledVaccineContent} vaccineType={vaccineType} />
+          {styledVaccineContent.recommendation && (
+            <div data-testid="recommendation">
+              <NonUrgentCareCard
+                heading={styledVaccineContent.recommendation.heading}
+                content={styledVaccineContent.recommendation.component}
+              />
+            </div>
+          )}
         </>
       )}
 

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

@@ -255,6 +255,10 @@ describe("ContentStylingService", () => {
         subsections: [mockMarkdownSubsection, mockUrgentSubsection],
       };
       const mockCallout: HeadingWithContent = { heading: "Callout Heading", content: "Callout content" };
+      const mockRecommendation: HeadingWithContent = {
+        heading: "Recommendation Heading",
+        content: "Recommendation content",
+      };
       const mockContent: VaccinePageContent = {
         overview: { content: "This is an overview", containsHtml: false },
         whatVaccineIsFor: mockWhatSection,
@@ -263,6 +267,7 @@ describe("ContentStylingService", () => {
         vaccineSideEffects: mockSideEffectsSection,
         webpageLink: new URL("https://test.example.com/"),
         callout: mockCallout,
+        recommendation: mockRecommendation,
       };
 
       const styledVaccineContent: StyledVaccineContent = await getStyledContentForVaccine(vaccine, mockContent, false);
@@ -274,6 +279,7 @@ describe("ContentStylingService", () => {
       expect(styledVaccineContent.howToGetVaccine.heading).toEqual(mockHowSection.headline);
       expect(styledVaccineContent.vaccineSideEffects.heading).toEqual(mockSideEffectsSection.headline);
       expect(styledVaccineContent.callout?.heading).toEqual(mockCallout.heading);
+      expect(styledVaccineContent.recommendation?.heading).toEqual(mockRecommendation.heading);
 
       const expectedRsvHowToGetSection = "<div><p>para1</p><p>para2</p></div>";
       const expectedRsvPregnancyHowToGetSection = `<div><div><p>para3</p><p>para4</p></div></div>`;
@@ -330,6 +336,37 @@ describe("ContentStylingService", () => {
       expect(isValidElement(styledVaccineContent.vaccineSideEffects.component)).toBe(true);
       expect(styledVaccineContent.webpageLink).toEqual(new URL("https://test.example.com/"));
     });
+
+    it("should return styled content without recommendation when recommendation is missing", async () => {
+      const mockWhoSection: VaccinePageSection = {
+        headline: "Who is this Vaccine For",
+        subsections: [mockMarkdownSubsection, mockNonUrgentSubsection],
+      };
+      const mockHowSection: VaccinePageSection = {
+        headline: "How to get this Vaccine",
+        subsections: [mockMarkdownSubsection, mockNonUrgentSubsection],
+      };
+      const mockSideEffectsSection: VaccinePageSection = {
+        headline: "Side effects of the generic vaccine",
+        subsections: [mockMarkdownSubsection, mockNonUrgentSubsection],
+      };
+      const mockContent: VaccinePageContent = {
+        overview: { content: "This is an overview", containsHtml: false },
+        whoVaccineIsFor: mockWhoSection,
+        howToGetVaccine: mockHowSection,
+        vaccineSideEffects: mockSideEffectsSection,
+        webpageLink: new URL("https://test.example.com/"),
+        recommendation: undefined,
+      };
+
+      const styledVaccineContent: StyledVaccineContent = await getStyledContentForVaccine(
+        VaccineType.RSV,
+        mockContent,
+        false,
+      );
+
+      expect(styledVaccineContent.recommendation).toBeUndefined();
+    });
   });
 
   describe("extractHeadingAndContent", () => {

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

@@ -159,6 +159,13 @@ function styleCallout(callout: HeadingWithContent | undefined): HeadingWithConte
   return undefined;
 }
 
+function styleRecommendation(recommendation: HeadingWithContent | undefined): StyledPageSection | undefined {
+  if (recommendation) {
+    return { heading: recommendation.heading, component: <>{recommendation.content}</> };
+  }
+  return undefined;
+}
+
 const getStyledContentForVaccine = async (
   vaccine: VaccineType,
   filteredContent: VaccinePageContent,
@@ -173,6 +180,7 @@ const getStyledContentForVaccine = async (
   const howToGetVaccine: StyledPageSection = styleHowToGetSection(vaccine, filteredContent.howToGetVaccine, fragile);
   const vaccineSideEffects: StyledPageSection = styleSection(filteredContent.vaccineSideEffects);
   const callout: HeadingWithContent | undefined = styleCallout(filteredContent.callout);
+  const recommendation: StyledPageSection | undefined = styleRecommendation(filteredContent.recommendation);
   const webpageLink: URL = filteredContent.webpageLink;
 
   return {
@@ -183,6 +191,7 @@ const getStyledContentForVaccine = async (
     vaccineSideEffects,
     webpageLink,
     callout,
+    recommendation,
   };
 };
 

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

@@ -122,4 +122,17 @@ describe("getFilteredContentForFluInPregnancyVaccine", () => {
 
     expect(pageCopy).toEqual(expect.objectContaining(expected));
   });
+
+  it("should return recommendation", () => {
+    const expected = {
+      recommendation: {
+        heading: "Breakfast",
+        content: "I'll have:\n\n* Egg\n* Bacon\n* Sausage\n* Bubble\n* Mushrooms\n* Black Pudding\n* Toast",
+      },
+    };
+
+    const pageCopy = getFilteredContentForFluInPregnancyVaccine(apiResponse);
+
+    expect(pageCopy).toEqual(expect.objectContaining(expected));
+  });
 });

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

@@ -36,6 +36,10 @@ export const getFilteredContentForFluInPregnancyVaccine = (apiContent: string):
     heading: "Booking service closed",
     content: "Flu vaccine bookings will reopen in autumn 2026",
   };
+  const recommendation: HeadingWithContent = {
+    heading: "Breakfast",
+    content: "I'll have:\n\n* Egg\n* Bacon\n* Sausage\n* Bubble\n* Mushrooms\n* Black Pudding\n* Toast",
+  };
 
   return {
     overview,
@@ -45,5 +49,6 @@ export const getFilteredContentForFluInPregnancyVaccine = (apiContent: string):
     vaccineSideEffects: whenToGet,
     webpageLink,
     callout: callout,
+    recommendation: recommendation,
   };
 };

src/services/content-api/types.ts

@@ -110,6 +110,7 @@ export type VaccinePageContent = {
   vaccineSideEffects: VaccinePageSection;
   webpageLink: URL;
   callout?: HeadingWithContent;
+  recommendation?: HeadingWithContent;
 };
 
 export type StyledPageSection = {
@@ -133,6 +134,7 @@ export type StyledVaccineContent = {
   vaccineSideEffects: StyledPageSection;
   webpageLink: URL;
   callout?: HeadingWithContent;
+  recommendation?: StyledPageSection;
 };
 
 export type ContentApiVaccinationsResponse = {

test-data/content-api/data.tsx

@@ -592,6 +592,7 @@ export const mockStyledContent: StyledVaccineContent = {
   },
   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 = {