VIA-760 Replace NBS booking with unauthenticated link for Children's Flu

In the design system library a green button is usually used to submit a
form, not follow a hyperlink.

In previous stories a custom green button was built to follow a URL,
with handlers to ensure the link opens in the correct webview/new tab
depending on whether the user is in the NHS app or not. Until now this
has only been used for authenticated SSO journeys to NBS, so was
labelled in the code as 'NBSButton', with the SSO link generation
happening in the background.

Renamed NBS Booking action components to make it clearer which ones
add SSO handover parameters into the URL and which do not. Add new
capability to enable using the button without SSO.

In the future if we need 'green button as a link' functionality elsewhere
in the UI 'NBSBookingButton' could be extracted and renamed to something
more generic for reuse. For now, leaving it where it is.

Author: donna-belsey-nhs

src/app/_components/eligibility/EligibilityActions.test.tsx

@@ -12,7 +12,10 @@ jest.mock("react-markdown", () => {
   };
 });
 jest.mock("@src/app/_components/nbs/NBSBookingAction", () => ({
-  NBSBookingActionForBaseUrl: () => <a href="https://nbs-test-link">NBS Booking Link Test</a>,
+  NBSBookingActionWithAuthSSOForBaseUrl: () => <a href="https://nbs-test-link">NBS Booking Link Test</a>,
+  NBSBookingActionWithoutAuthForUrl: () => (
+    <a href="https://nbs-without-auth-test-link">NBS Booking Without Auth Link Test</a>
+  ),
 }));
 
 describe("EligibilityActions", () => {
@@ -54,8 +57,14 @@ describe("EligibilityActions", () => {
             actions: [
               actionBuilder().withType(ActionDisplayType.infotext).andContent("Test Content 1").build(),
               actionBuilder().withType(ActionDisplayType.card).andContent("Test Content 2").build(),
-              actionBuilder().withType(ActionDisplayType.buttonWithCard).andContent("Test Content 3").build(),
-              actionBuilder().withType(ActionDisplayType.buttonWithInfo).andContent("Test Content 4").build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithCard)
+                .andContent("Test Content 3")
+                .build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithInfo)
+                .andContent("Test Content 4")
+                .build(),
               actionBuilder().withType(ActionDisplayType.actionLinkWithInfo).andContent("Test Content 5").build(),
             ],
             vaccineType: VaccineType.RSV,
@@ -127,12 +136,15 @@ describe("EligibilityActions", () => {
       });
     });
 
-    describe("buttonWithCard", () => {
+    describe("nbsAuthLinkButtonWithCard", () => {
       it("should display auth action card content successfully", () => {
         render(
           EligibilityActions({
             actions: [
-              actionBuilder().withType(ActionDisplayType.buttonWithCard).andContent("Test Auth Action Content").build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithCard)
+                .andContent("Test Auth Action Content")
+                .build(),
             ],
             vaccineType: VaccineType.RSV,
           }),
@@ -144,7 +156,9 @@ describe("EligibilityActions", () => {
       it("should display button content successfully", () => {
         render(
           EligibilityActions({
-            actions: [actionBuilder().withType(ActionDisplayType.buttonWithCard).andContent("Test Content").build()],
+            actions: [
+              actionBuilder().withType(ActionDisplayType.nbsAuthLinkButtonWithCard).andContent("Test Content").build(),
+            ],
             vaccineType: VaccineType.RSV,
           }),
         );
@@ -158,8 +172,14 @@ describe("EligibilityActions", () => {
         render(
           EligibilityActions({
             actions: [
-              actionBuilder().withType(ActionDisplayType.buttonWithCard).andContent("Test Content 1").build(),
-              actionBuilder().withType(ActionDisplayType.buttonWithCard).andContent("Test Content 2").build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithCard)
+                .andContent("Test Content 1")
+                .build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithCard)
+                .andContent("Test Content 2")
+                .build(),
             ],
             vaccineType: VaccineType.RSV,
           }),
@@ -171,7 +191,7 @@ describe("EligibilityActions", () => {
       it("should display button without card if no description present", () => {
         render(
           EligibilityActions({
-            actions: [actionBuilder().withType(ActionDisplayType.buttonWithCard).andContent("").build()],
+            actions: [actionBuilder().withType(ActionDisplayType.nbsAuthLinkButtonWithCard).andContent("").build()],
             vaccineType: VaccineType.RSV,
           }),
         );
@@ -184,12 +204,15 @@ describe("EligibilityActions", () => {
       });
     });
 
-    describe("buttonWithInfo", () => {
+    describe("nbsAuthLinkButtonWithInfo", () => {
       it("should display info content successfully", () => {
         render(
           EligibilityActions({
             actions: [
-              actionBuilder().withType(ActionDisplayType.buttonWithInfo).andContent("Test Auth Action Content").build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithInfo)
+                .andContent("Test Auth Action Content")
+                .build(),
             ],
             vaccineType: VaccineType.RSV,
           }),
@@ -201,7 +224,9 @@ describe("EligibilityActions", () => {
       it("should display button content successfully", () => {
         render(
           EligibilityActions({
-            actions: [actionBuilder().withType(ActionDisplayType.buttonWithInfo).andContent("Test Content").build()],
+            actions: [
+              actionBuilder().withType(ActionDisplayType.nbsAuthLinkButtonWithInfo).andContent("Test Content").build(),
+            ],
             vaccineType: VaccineType.RSV,
           }),
         );
@@ -215,8 +240,14 @@ describe("EligibilityActions", () => {
         render(
           EligibilityActions({
             actions: [
-              actionBuilder().withType(ActionDisplayType.buttonWithInfo).andContent("Test Content 1").build(),
-              actionBuilder().withType(ActionDisplayType.buttonWithInfo).andContent("Test Content 2").build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithInfo)
+                .andContent("Test Content 1")
+                .build(),
+              actionBuilder()
+                .withType(ActionDisplayType.nbsAuthLinkButtonWithInfo)
+                .andContent("Test Content 2")
+                .build(),
             ],
             vaccineType: VaccineType.RSV,
           }),
@@ -228,7 +259,7 @@ describe("EligibilityActions", () => {
       it("should display button without info if no description present", () => {
         render(
           EligibilityActions({
-            actions: [actionBuilder().withType(ActionDisplayType.buttonWithInfo).andContent("").build()],
+            actions: [actionBuilder().withType(ActionDisplayType.nbsAuthLinkButtonWithInfo).andContent("").build()],
             vaccineType: VaccineType.RSV,
           }),
         );
@@ -241,6 +272,77 @@ describe("EligibilityActions", () => {
       });
     });
 
+    describe("buttonWithoutAuthLinkWithInfo", () => {
+      it("should display info content successfully", () => {
+        render(
+          EligibilityActions({
+            actions: [
+              actionBuilder()
+                .withType(ActionDisplayType.buttonWithoutAuthLinkWithInfo)
+                .andContent("Test Button Action Content")
+                .build(),
+            ],
+            vaccineType: VaccineType.FLU_FOR_CHILDREN,
+          }),
+        );
+
+        expectContentStringToBeVisible("Test Button Action Content");
+      });
+
+      it("should display button content successfully", () => {
+        render(
+          EligibilityActions({
+            actions: [
+              actionBuilder()
+                .withType(ActionDisplayType.buttonWithoutAuthLinkWithInfo)
+                .andContent("Test Content")
+                .build(),
+            ],
+            vaccineType: VaccineType.FLU_FOR_CHILDREN,
+          }),
+        );
+
+        expectContentStringToBeVisible("Test Content");
+        const bookingButton: HTMLElement = screen.getByText("NBS Booking Without Auth Link Test");
+        expect(bookingButton).toBeInTheDocument();
+      });
+
+      it("should display multiple button content components successfully", () => {
+        render(
+          EligibilityActions({
+            actions: [
+              actionBuilder()
+                .withType(ActionDisplayType.buttonWithoutAuthLinkWithInfo)
+                .andContent("Test Content 1")
+                .build(),
+              actionBuilder()
+                .withType(ActionDisplayType.buttonWithoutAuthLinkWithInfo)
+                .andContent("Test Content 2")
+                .build(),
+            ],
+            vaccineType: VaccineType.FLU_FOR_CHILDREN,
+          }),
+        );
+
+        expectEachContentStringToBeVisible(["Test Content 1", "Test Content 2"]);
+      });
+
+      it("should display button without info if no description present", () => {
+        render(
+          EligibilityActions({
+            actions: [actionBuilder().withType(ActionDisplayType.buttonWithoutAuthLinkWithInfo).andContent("").build()],
+            vaccineType: VaccineType.FLU_FOR_CHILDREN,
+          }),
+        );
+
+        const buttonComponents = screen.getByTestId("action-button-without-auth-components");
+
+        const card = within(buttonComponents).queryByTestId("action-auth-button-card");
+
+        expect(card).not.toBeInTheDocument();
+      });
+    });
+
     describe("actionLinkWithInfo", () => {
       it("should display info content successfully", () => {
         render(

src/app/_components/eligibility/EligibilityActions.tsx

@@ -1,5 +1,8 @@
 import { MarkdownWithStyling } from "@src/app/_components/markdown/MarkdownWithStyling";
-import { NBSBookingActionForBaseUrl } from "@src/app/_components/nbs/NBSBookingAction";
+import {
+  NBSBookingActionWithAuthSSOForBaseUrl,
+  NBSBookingActionWithoutAuthForUrl,
+} from "@src/app/_components/nbs/NBSBookingAction";
 import { BasicCard } from "@src/app/_components/nhs-frontend/BasicCard";
 import { VaccineType } from "@src/models/vaccine";
 import { Action, ActionDisplayType, ButtonUrl, Content, Label } from "@src/services/eligibility-api/types";
@@ -24,10 +27,10 @@ const EligibilityActions = ({ actions, vaccineType }: EligibilityActionProps): (
         return <Card key={index} content={action.content} delineator={isNotLastAction} />;
       }
 
-      case ActionDisplayType.buttonWithCard: {
+      case ActionDisplayType.nbsAuthLinkButtonWithCard: {
         const card = action.content && <BasicCard content={action.content} delineator={false} />;
         const button = action.button && (
-          <Button
+          <NBSAuthSSOBookingButton
             vaccineType={vaccineType}
             url={action.button.url}
             label={action.button.label}
@@ -44,10 +47,10 @@ const EligibilityActions = ({ actions, vaccineType }: EligibilityActionProps): (
         );
       }
 
-      case ActionDisplayType.buttonWithInfo: {
+      case ActionDisplayType.nbsAuthLinkButtonWithInfo: {
         const info = action.content && <InfoText content={action.content} delineator={false} />;
         const button = action.button && (
-          <Button
+          <NBSAuthSSOBookingButton
             vaccineType={vaccineType}
             url={action.button.url}
             label={action.button.label}
@@ -64,6 +67,25 @@ const EligibilityActions = ({ actions, vaccineType }: EligibilityActionProps): (
         );
       }
 
+      case ActionDisplayType.buttonWithoutAuthLinkWithInfo: {
+        const info = action.content && <InfoText content={action.content} delineator={false} />;
+        const button = action.button && (
+          <NBSBookingActionWithoutAuthForUrl
+            url={action.button.url.href}
+            displayText={action.button.label}
+            renderAs={"button"}
+            reduceBottomPadding={true}
+          />
+        );
+        return (
+          <div key={index} data-testid="action-button-without-auth-components">
+            {info}
+            {button}
+            {isNotLastAction && <hr />}
+          </div>
+        );
+      }
+
       case ActionDisplayType.actionLinkWithInfo: {
         const info = action.content && <InfoText content={action.content} delineator={false} />;
         const link = action.button && (
@@ -123,9 +145,9 @@ type ButtonProps = {
   delineator: boolean;
 };
 
-const Button = ({ vaccineType, url, label, renderAs }: ButtonProps): JSX.Element => {
+const NBSAuthSSOBookingButton = ({ vaccineType, url, label, renderAs }: ButtonProps): JSX.Element => {
   return (
-    <NBSBookingActionForBaseUrl
+    <NBSBookingActionWithAuthSSOForBaseUrl
       vaccineType={vaccineType}
       url={url.href}
       displayText={label}

src/app/_components/nbs/NBSBookingAction.test.tsx

@@ -1,5 +1,9 @@
 import { useBrowserContext } from "@src/app/_components/context/BrowserContext";
-import { NBSBookingActionForBaseUrl, NBSBookingActionForVaccine } from "@src/app/_components/nbs/NBSBookingAction";
+import {
+  NBSBookingActionWithAuthSSOForBaseUrl,
+  NBSBookingActionWithAuthSSOForVaccine,
+  NBSBookingActionWithoutAuthForUrl,
+} from "@src/app/_components/nbs/NBSBookingAction";
 import { VaccineType } from "@src/models/vaccine";
 import { randomURL } from "@test-data/meta-builder";
 import { render, screen } from "@testing-library/react";
@@ -43,7 +47,7 @@ describe("NBSBookingAction", () => {
   describe("Given vaccine type", () => {
     const renderAndClick = (renderAs: "anchor" | "button" | "actionLink", whichElement: number) => {
       render(
-        <NBSBookingActionForVaccine
+        <NBSBookingActionWithAuthSSOForVaccine
           vaccineType={VaccineType.RSV}
           displayText="test"
           renderAs={renderAs}
@@ -77,7 +81,7 @@ describe("NBSBookingAction", () => {
 
     const renderAndClick = (renderAs: "anchor" | "button" | "actionLink", whichElement: number) => {
       render(
-        <NBSBookingActionForBaseUrl
+        <NBSBookingActionWithAuthSSOForBaseUrl
           vaccineType={VaccineType.COVID_19}
           url={url.href}
           displayText="test"
@@ -109,4 +113,38 @@ describe("NBSBookingAction", () => {
       });
     });
   });
+
+  describe("Given full URL without SSO auth", () => {
+    const url = randomURL();
+
+    const renderAndClick = (renderAs: "anchor" | "button" | "actionLink", whichElement: number) => {
+      render(
+        <NBSBookingActionWithoutAuthForUrl
+          url={url.href}
+          displayText="test"
+          renderAs={renderAs}
+          reduceBottomPadding={false}
+        />,
+      );
+      const role = renderAs === "button" ? "button" : "link";
+      const element = screen.getAllByRole(role, { name: "test" })[whichElement];
+      element.click();
+    };
+
+    it.each(testScenarios)("$name", ({ context, expectedTarget, shouldCall }) => {
+      (useBrowserContext as jest.Mock).mockReturnValue(context);
+
+      renderVariants.forEach(({ type, index }) => {
+        jest.clearAllMocks();
+
+        renderAndClick(type, index);
+
+        if (shouldCall) {
+          expect(window.open).toHaveBeenCalledWith(url.href, expectedTarget);
+        } else {
+          expect(window.open).not.toHaveBeenCalled();
+        }
+      });
+    });
+  });
 });