VIA-301 MD: Embed UrgentCareCard into sections where needed

Author: marie-dedikova-nhs

src/app/_components/nhs-frontend/NonUrgentCareCard.test.tsx

@@ -0,0 +1,28 @@
+import NonUrgentCareCard from "@src/app/_components/nhs-frontend/NonUrgentCareCard";
+import { render, screen } from "@testing-library/react";
+
+describe("NonUrgentCareCard", () => {
+  it("should render component", () => {
+    render(<NonUrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const nonUrgentCareCard: HTMLElement = screen.getByTestId("non-urgent-care-card");
+
+    expect(nonUrgentCareCard).toBeVisible();
+  });
+
+  it("should render heading", () => {
+    render(<NonUrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const heading: HTMLElement = screen.getByRole("heading", { name: "Non-urgent advice: Contact GP:", level: 2 });
+
+    expect(heading).toBeVisible();
+  });
+
+  it("should render content inside of care card", () => {
+    render(<NonUrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const content: HTMLElement = screen.getByText("this is their contact");
+
+    expect(content).toBeVisible();
+  });
+});

src/app/_components/nhs-frontend/UrgentCareCard.test.tsx

@@ -0,0 +1,28 @@
+import UrgentCareCard from "@src/app/_components/nhs-frontend/UrgentCareCard";
+import { render, screen } from "@testing-library/react";
+
+describe("UrgentCareCard", () => {
+  it("should render component", () => {
+    render(<UrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const urgentCareCard: HTMLElement = screen.getByTestId("urgent-care-card");
+
+    expect(urgentCareCard).toBeVisible();
+  });
+
+  it("should render heading", () => {
+    render(<UrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const heading: HTMLElement = screen.getByRole("heading", { name: "Urgent advice: Contact GP:", level: 2 });
+
+    expect(heading).toBeVisible();
+  });
+
+  it("should render content inside of care card", () => {
+    render(<UrgentCareCard heading={"Contact GP:"} content={<p>this is their contact</p>} />);
+
+    const content: HTMLElement = screen.getByText("this is their contact");
+
+    expect(content).toBeVisible();
+  });
+});

src/app/_components/nhs-frontend/UrgentCareCard.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Heading } from "@src/services/eligibility-api/types";
+import { Card } from "nhsuk-react-components";
+import { JSX } from "react";
+
+interface NonUrgentCareCardProps {
+  heading: Heading | string | JSX.Element;
+  content: JSX.Element;
+}
+
+const UrgentCareCard = ({ heading, content }: NonUrgentCareCardProps) => {
+  return (
+    <Card cardType="urgent" data-testid="urgent-care-card">
+      <Card.Heading>{heading}</Card.Heading>
+      <Card.Content>{content}</Card.Content>
+    </Card>
+  );
+};
+
+export default UrgentCareCard;

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

@@ -44,6 +44,13 @@ describe("ContentStylingService", () => {
     headline: "",
   };
 
+  const mockUrgentSubsection: VaccinePageSubsection = {
+    type: "simpleElement",
+    text: "<h3>Heading for Urgent Component</h3><p>This is a styled paragraph urgent subsection</p>",
+    name: "urgent",
+    headline: "",
+  };
+
   const mockTableSubsection: VaccinePageSubsection = {
     type: "tableElement",
     mainEntity: "<table><tr><th>Name</th><th>Age</th></tr><tr><td>Jane Smith</td><td>35</td></tr></table>",
@@ -122,6 +129,19 @@ describe("ContentStylingService", () => {
       expect(nonUrgent).toBeInTheDocument();
     });
 
+    it("should return styled urgent component for subsection", async () => {
+      const styledSubsection: JSX.Element = styleSubsection(mockUrgentSubsection, 1);
+      render(styledSubsection);
+
+      const text: HTMLElement = screen.getByText("This is a styled paragraph urgent subsection");
+      const heading: HTMLElement = screen.getByText("Heading for Urgent Component");
+      const nonUrgent: HTMLElement = screen.getByText("Urgent advice:");
+
+      expect(text).toBeInTheDocument();
+      expect(heading).toBeInTheDocument();
+      expect(nonUrgent).toBeInTheDocument();
+    });
+
     it("should return table component for subsection", async () => {
       const styledSubsection: JSX.Element = styleSubsection(mockTableSubsection, 1);
       render(styledSubsection);
@@ -155,20 +175,22 @@ describe("ContentStylingService", () => {
     it("should display several subsections of a concrete vaccine in one section", async () => {
       const mockSection: VaccinePageSection = {
         headline: "This is a heading",
-        subsections: [mockMarkdownSubsection, mockNonUrgentSubsection, mockTableSubsection],
+        subsections: [mockMarkdownSubsection, mockNonUrgentSubsection, mockUrgentSubsection, mockTableSubsection],
       };
 
       const styledSection: StyledPageSection = styleSection(mockSection);
       render(styledSection.component);
 
       const markdownSubsection: HTMLElement = screen.getByText("This is a styled paragraph markdown subsection");
       const nonUrgentSubsection: HTMLElement = screen.getByText("This is a styled paragraph non-urgent subsection");
+      const urgentSubsection: HTMLElement = screen.getByText("This is a styled paragraph urgent subsection");
 
       const columnOfTable: HTMLElement = screen.getByText("Name");
 
       expect(styledSection.heading).toEqual(mockSection.headline);
       expect(markdownSubsection).toBeInTheDocument();
       expect(nonUrgentSubsection).toBeInTheDocument();
+      expect(urgentSubsection).toBeInTheDocument();
       expect(columnOfTable).toBeInTheDocument();
     });
   });
@@ -189,7 +211,7 @@ describe("ContentStylingService", () => {
       };
       const mockSideEffectsSection: VaccinePageSection = {
         headline: "Side effects of the generic vaccine",
-        subsections: [mockMarkdownSubsection, mockNonUrgentSubsection],
+        subsections: [mockMarkdownSubsection, mockUrgentSubsection],
       };
       const mockContent: VaccinePageContent = {
         overview: "This is an overview",

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

@@ -1,4 +1,5 @@
 import NonUrgentCareCard from "@src/app/_components/nhs-frontend/NonUrgentCareCard";
+import UrgentCareCard from "@src/app/_components/nhs-frontend/UrgentCareCard";
 import { VaccineTypes } from "@src/models/vaccine";
 import { styleHowToGetSectionForRsv } from "@src/services/content-api/parsers/custom/rsv";
 import { styleHowToGetSectionForRsvPregnancy } from "@src/services/content-api/parsers/custom/rsv-pregnancy";
@@ -19,12 +20,14 @@ import styles from "./styles.module.css";
 enum SubsectionTypes {
   INFORMATION = "INFORMATION",
   NON_URGENT = "NON_URGENT",
+  URGENT = "URGENT",
   CALLOUT = "CALLOUT",
 }
 
 const Subsections: Record<SubsectionTypes, string> = {
   [SubsectionTypes.INFORMATION]: "Information",
   [SubsectionTypes.NON_URGENT]: "non-urgent",
+  [SubsectionTypes.URGENT]: "urgent",
   [SubsectionTypes.CALLOUT]: "Callout",
 };
 
@@ -65,6 +68,15 @@ const styleSubsection = (subsection: VaccinePageSubsection, id: number): JSX.Ele
         content={_getDivWithSanitisedHtml(content)}
       />
     );
+  } else if (subsection.name === Subsections.URGENT) {
+    const { heading, content } = extractHeadingAndContent(subsection.text);
+    return (
+      <UrgentCareCard
+        key={id}
+        heading={_getDivWithSanitisedHtml(heading)}
+        content={_getDivWithSanitisedHtml(content)}
+      />
+    );
   } else if (subsection.name === Subsections.CALLOUT) {
     const { heading, content } = extractHeadingAndContent(subsection.text);
     return (