VIA-172 AJ Implemented the requirement of redirecting to NHS app homepage for mobile and the page for desktop version

Author: ankur-jain-nhs

src/app/session-logout/page.test.tsx

@@ -10,17 +10,19 @@ describe("SessionLogout", () => {
     mockNHSAppJSFunctions(mockIsOpenInNHSApp, mockGoToHomePage);
   });
 
-  it("should show mobile version inside NHS App", () => {
+  it("should show NHS App home page inside NHS App", () => {
     mockIsOpenInNHSApp.mockReturnValue(true);
     render(<SessionLogout />);
-    const mobileButton = screen.getByRole("button", { name: "Log back in" });
-    expect(mobileButton).toBeInTheDocument();
+    expect(mockGoToHomePage).toHaveBeenCalledTimes(1);
   });
 
-  it("should show desktop version outside NHS App", () => {
+  it("should show logged out page outside NHS App", () => {
     mockIsOpenInNHSApp.mockReturnValue(false);
     render(<SessionLogout />);
-    const desktopButton = screen.getByRole("button", { name: "Continue" });
-    expect(desktopButton).toBeInTheDocument();
+    const heading = screen.getByRole("heading", {
+      level: 1,
+      name: "You have logged out",
+    });
+    expect(heading).toBeInTheDocument();
   });
 });

src/app/session-logout/page.tsx

@@ -1,62 +1,27 @@
 "use client";
 
-import { toNHSAppHomePage } from "@src/utils/navigation";
-import styles from "./styles.module.css";
 import MainContent from "@src/app/_components/nhs-frontend/MainContent";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 const SessionLogout = () => {
-  const [isOpenInNHSApp, setIsOpenInNHSApp] = useState(false);
-
   useEffect(() => {
-    setIsOpenInNHSApp(window.nhsapp.tools.isOpenInNHSApp());
+    if (window.nhsapp.tools.isOpenInNHSApp()) {
+      window.nhsapp.navigation.goToHomePage();
+    }
   }, []);
 
-  return isOpenInNHSApp ? (
-    <>
-      <MainContent>
-        <title>You have been logged out</title>
-        <div className={styles.logoutScreen}>
-          <div className={styles.logoutBanner}>
-            <h4>For your security, you need to login again.</h4>
-          </div>
-          <div className={styles.logoutContent}>
-            <h1>You have logged out</h1>
-          </div>
-          <div className={styles.logBackInButton}>
-            <button
-              className="nhsuk-button nhsuk-button--reverse nhsapp-button"
-              onClick={toNHSAppHomePage}
-            >
-              Log back in
-            </button>
-          </div>
-        </div>
-      </MainContent>
-    </>
-  ) : (
-    <>
-      <MainContent>
-        <title>You have been logged out</title>
-        <h1>You have been logged out</h1>
-        <p>
-          For security, you&#39;re automatically logged out if you have not used
-          the service for 10 minutes.
-        </p>
-        <p>
-          If you were entering information, it has not been saved and you will
-          need to re-enter it.
-        </p>
-        <div className={styles.continueButton}>
-          <button
-            className="nhsuk-button nhsapp-button"
-            onClick={toNHSAppHomePage}
-          >
-            Continue
-          </button>
-        </div>
-      </MainContent>
-    </>
+  return (
+    <MainContent>
+      <title>You have logged out</title>
+      <h1>You have logged out</h1>
+      <p>
+        If you were entering information, it has not been saved and you will
+        need to re-enter it.
+      </p>
+      <p>
+        To continue, close the tab which has the service open and login again.
+      </p>
+    </MainContent>
   );
 };