From c73cf2a013d132f6b699c838844b3a4179de18da Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Mon, 12 Aug 2024 11:09:59 +0100
Subject: [PATCH] added service account header removed duplicate sign in button

---
 components/header.js                    | 11 ++-
 components/myportal.js                  |  8 ++-
 components/myportal/servicebanner.js    | 90 +++++++++++++++++++++++++
 components/servicebanner.js             | 23 ++++++-
 locales/cy/common.json                  |  1 +
 locales/en/common.json                  |  1 +
 pages/addresssearch.js                  |  2 +
 pages/addresssearchresults.js           |  3 +-
 pages/advancedsearch.js                 |  2 +
 pages/advancedsearchresults.js          |  3 +-
 pages/auth/error.js                     |  3 +-
 pages/auth/signin.js                    |  2 +
 pages/auth/verify-request.js            |  3 +-
 pages/case/[ticketnumber].js            |  4 +-
 pages/case/index.js                     |  3 +-
 pages/dnsapplications.js                |  2 +
 pages/dnsdetails.js                     |  2 +
 pages/myportal/[appealtypes].js         |  8 +++
 pages/myportal/addresssearch.js         |  2 +
 pages/myportal/addresssearchresults.js  |  2 +
 pages/myportal/advancedsearch.js        |  2 +
 pages/myportal/advancedsearchresults.js |  2 +
 pages/myportal/case.js                  |  2 +
 pages/myportal/case/[ticketnumber].js   |  3 +-
 pages/myportal/dnsapplications.js       | 20 ++++--
 pages/myportal/dnsdetails.js            |  3 +
 pages/myportal/representation.js        |  2 +
 pages/myportal/searchresults.js         |  4 +-
 pages/myportal/viewall.js               |  2 +
 pages/newappeal/index.js                |  2 +
 pages/searchresults.js                  |  2 +
 styles/sass/patterns/_card.scss         |  2 +-
 styles/sass/welshgov/_application.scss  | 59 ++++++++++------
 33 files changed, 237 insertions(+), 43 deletions(-)
 create mode 100644 components/myportal/servicebanner.js

diff --git a/components/header.js b/components/header.js
index c38f35da..45e210f9 100644
--- a/components/header.js
+++ b/components/header.js
@@ -42,6 +42,11 @@ const Header = (props) => {
         "/auth/verify-request",
         "/auth/signin",
         "/auth/error",
+        "/myportal",
+        "/myportal/[appealtypes]",
+        "/newappeal",
+        "/myportal/dnsapplications",
+        "/myportal/dnsdetails",
     ];
     const hasContactLink = [
         "/dns/application-process",
@@ -91,7 +96,7 @@ const Header = (props) => {
                 </div>
 
                 <div className="languageSwitch">
-                    <div className="mobileNav">
+                    {/* <div className="mobileNav">
                         <div className="mobileMenu">
                             <input
                                 type="radio"
@@ -190,8 +195,8 @@ const Header = (props) => {
                                 </ul>
                             </div>
                         </div>
-                    </div>
-                    <div className="fullNav">
+                    </div> */}
+                    <div className="fullNavs">
                         {hasContactLink.includes(router.pathname) == true ? (
                             <Link
                                 href="/dns/contact-us"
diff --git a/components/myportal.js b/components/myportal.js
index 646ad0ce..40b8269f 100644
--- a/components/myportal.js
+++ b/components/myportal.js
@@ -13,6 +13,7 @@ import MyCases from "./myportal/mycases";
 import MyRepresentations from "./myportal/myrepresentations";
 import SearchCases from "./myportal/searchcases";
 import WatchedCases from "./myportal/watchedcases";
+import ServiceBanner from "./myportal/servicebanner";
 
 const MyPortal = (props) => {
     const { showFileUpload, showLoginCheck } = props;
@@ -41,7 +42,7 @@ const MyPortal = (props) => {
     return (
         <>
             <main className="" id="main-content" role="main">
-                <div className="servicebanner myportal govuk-!-margin-bottom-4">
+                {/* <div className="servicebanner myportal govuk-!-margin-bottom-4">
                     <h1>
                         <img
                             src={
@@ -88,13 +89,14 @@ const MyPortal = (props) => {
                                 onClick={() => {
                                     handleLogout();
                                 }}
-                                className="govuk-header__link govuk-!-margin-right-3"
+                                className="govuk-header__link "
                             >
                                 {t("common:signout-label")}
                             </Link>
                         </div>
                     </div>
-                </div>
+                </div> */}
+                <ServiceBanner props={props} />
                 {isLPA && (
                     <div>
                         <h2 className="heading-small card-heading">
diff --git a/components/myportal/servicebanner.js b/components/myportal/servicebanner.js
new file mode 100644
index 00000000..8be6631e
--- /dev/null
+++ b/components/myportal/servicebanner.js
@@ -0,0 +1,90 @@
+import useTranslation from "next-translate/useTranslation";
+import router from "next/router";
+import Link from "next/link";
+
+const ServiceBanner = (props) => {
+    props = props.props;
+    let { t, lang } = useTranslation();
+
+    const signInButton = () => {
+        router.push(
+            `${
+                router.locale == "cy" ? "/awd/mewngofnodi" : "/auth/signin"
+            }?callbackUrl=${encodeURIComponent(
+                window.location.href
+            )}&error=EmailSignin`
+        );
+    };
+    return (
+        // <div className="servicebanner">
+        //     <h1>
+        //         <img
+        //             className="govuk-!-margin-top-4"
+        //             src={
+        //                 router.locale == "cy"
+        //                     ? "/assets/images/planning-casework-cy.svg"
+        //                     : "/assets/images/planning-casework-en.svg"
+        //             }
+        //             alt="Planning casework"
+        //         />
+        //     </h1>
+        //     <div className="serviceBanner_userDetails">
+        //         <button
+        //             onClick={() => signInButton()}
+        //             className="govuk-header__link "
+        //         >
+        //             {t("common:signin-label")}
+        //         </button>
+        //     </div>
+        // </div>
+
+        <div className="servicebanner myportal govuk-!-margin-bottom-4">
+            <h1>
+                <img
+                    src={
+                        router.locale == "cy"
+                            ? "/assets/images/planning-casework-cy.svg"
+                            : "/assets/images/planning-casework-en.svg"
+                    }
+                    alt={router.locale == "cy" ? "Fy mhorth" : "My Portal"}
+                />
+            </h1>
+
+            <div className="serviceBanner_userDetails">
+                <img
+                    className="user_logo"
+                    src="/assets/images/user.svg"
+                    alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
+                />{" "}
+                <div className="serviceBanner_userDetails_name">
+                    <Link
+                        href="/account/personaldetails"
+                        className="govuk-button-secondary"
+                    >
+                        {props.accountDetails.accountDetails.firstname}{" "}
+                        {props.accountDetails.accountDetails.lastname}
+                        {" - "}
+                        {
+                            props.accountDetails.accountDetails[
+                                "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
+                            ]
+                        }
+                    </Link>
+                </div>
+                <div>
+                    <Link
+                        href={router.locale == "cy" ? "/allgofnodi" : "/logout"}
+                        onClick={() => {
+                            handleLogout();
+                        }}
+                        className="govuk-header__link "
+                    >
+                        {t("common:signout-label")}
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ServiceBanner;
diff --git a/components/servicebanner.js b/components/servicebanner.js
index 93265b03..5f7ccfdc 100644
--- a/components/servicebanner.js
+++ b/components/servicebanner.js
@@ -1,8 +1,19 @@
 import useTranslation from "next-translate/useTranslation";
 import router from "next/router";
+import Link from "next/link";
 
-export default function ServiceBanner() {
+export default function ServiceBanner(props) {
     let { t, lang } = useTranslation();
+
+    const signInButton = () => {
+        router.push(
+            `${
+                router.locale == "cy" ? "/awd/mewngofnodi" : "/auth/signin"
+            }?callbackUrl=${encodeURIComponent(
+                window.location.href
+            )}&error=EmailSignin`
+        );
+    };
     return (
         <div className="servicebanner">
             <h1>
@@ -16,6 +27,16 @@ export default function ServiceBanner() {
                     alt="Planning casework"
                 />
             </h1>
+            {props.noSignin != true && (
+                <div className="serviceBanner_userDetails">
+                    <button
+                        onClick={() => signInButton()}
+                        className="govuk-header__link "
+                    >
+                        {t("common:signin-label")}
+                    </button>
+                </div>
+            )}
         </div>
     );
 }
diff --git a/locales/cy/common.json b/locales/cy/common.json
index 0616a3ff..c1ce7b86 100644
--- a/locales/cy/common.json
+++ b/locales/cy/common.json
@@ -38,6 +38,7 @@
   "footer-guidance-link": "https://llyw.cymru/penderfyndiadau-cynllunio-ac-amgylchedd-cymru/canllawiau-gwasanaethau",
   "mobile-nav-label": "Dewislen",
   "signout-label": "Allgofnodwch",
+  "signin-label": "Mewngofnodwch",
   "back-to-top-link": "Nôl i dop y dudalen",
   "social-bar-share-link": "Rhannu’r dudalen hon",
   "social-bar-share-via-link": "Rhannu’r dudalen hon ar",
diff --git a/locales/en/common.json b/locales/en/common.json
index b6d5ce69..9d1389e0 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -38,6 +38,7 @@
   "footer-guidance-link": "https://gov.wales/planning-and-environment-decisions-wales/guidance-services",
   "mobile-nav-label": "Menu",
   "signout-label": "Sign out",
+  "signin-label": "Sign in",
   "back-to-top-link": "Back to top",
   "social-bar-share-link": "Share this page",
   "social-bar-share-via-link": "Share this page via",
diff --git a/pages/addresssearch.js b/pages/addresssearch.js
index 38d61cbd..fac16d56 100644
--- a/pages/addresssearch.js
+++ b/pages/addresssearch.js
@@ -9,6 +9,7 @@ import CookieBanner from "../components/cookieBanner";
 import CRMError from "../components/crmError";
 import Footer from "../components/footer";
 import Header from "../components/header";
+import ServiceBanner from "../components/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -98,6 +99,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner />
                     {hasError ? (
                         <CRMError props={props} whichError="advancedSearch" />
                     ) : (
diff --git a/pages/addresssearchresults.js b/pages/addresssearchresults.js
index 6ca1fab1..f3542535 100644
--- a/pages/addresssearchresults.js
+++ b/pages/addresssearchresults.js
@@ -10,7 +10,7 @@ import Footer from "../components/footer";
 import Header from "../components/header";
 import { setShowReps } from "../store/currentView/action";
 import { setSearch } from "../store/search/action";
-
+import ServiceBanner from "../components/servicebanner";
 import { wrapper } from "../store/store";
 
 const Home = (props) => {
@@ -94,6 +94,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner />
                     <SearchResults
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
diff --git a/pages/advancedsearch.js b/pages/advancedsearch.js
index 8c38d099..b66bd96e 100644
--- a/pages/advancedsearch.js
+++ b/pages/advancedsearch.js
@@ -13,6 +13,7 @@ import Search from "../components/search";
 import { setAppealType } from "../store/appealType/action";
 import { setLPA } from "../store/lpa/action";
 import { wrapper } from "../store/store";
+import ServiceBanner from "../components/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -102,6 +103,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner />
                     {hasError ? (
                         <CRMError props={props} whichError="advancedSearch" />
                     ) : (
diff --git a/pages/advancedsearchresults.js b/pages/advancedsearchresults.js
index 93672c4f..a204674e 100644
--- a/pages/advancedsearchresults.js
+++ b/pages/advancedsearchresults.js
@@ -15,7 +15,7 @@ import {
     setSearchDetails,
     setSearchResults,
 } from "../store/searchOutput/action";
-
+import ServiceBanner from "../components/servicebanner";
 import { wrapper } from "../store/store";
 
 const Home = (props) => {
@@ -99,6 +99,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner />
                     <SearchResults
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
diff --git a/pages/auth/error.js b/pages/auth/error.js
index 8f732bf6..1da0b415 100644
--- a/pages/auth/error.js
+++ b/pages/auth/error.js
@@ -6,6 +6,7 @@ import Breadcrumbs from "../../components/breadcrumbs";
 import CookieBanner from "../../components/cookieBanner";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
+import ServiceBanner from "../../components/servicebanner";
 
 import { getCsrfToken } from "next-auth/react";
 
@@ -44,7 +45,7 @@ const Error = (props) => {
                 <Header />
                 <div className="govuk-width-container govuk-!-padding-bottom-9">
                     <Breadcrumbs />
-
+                    <ServiceBanner noSignin={true} />
                     <main
                         className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
                         id="main-content"
diff --git a/pages/auth/signin.js b/pages/auth/signin.js
index 821dd86c..b65412ea 100644
--- a/pages/auth/signin.js
+++ b/pages/auth/signin.js
@@ -6,6 +6,7 @@ import Breadcrumbs from "../../components/breadcrumbs";
 import CookieBanner from "../../components/cookieBanner";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
+import ServiceBanner from "../../components/servicebanner";
 
 const SignIn = (props) => {
     let { t, lang } = useTranslation();
@@ -39,6 +40,7 @@ const SignIn = (props) => {
                 <Header />
                 <div className="govuk-width-container govuk-!-padding-bottom-9">
                     <Breadcrumbs />
+                    <ServiceBanner noSignin={true} />
                     <main
                         className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
                         id="main-content"
diff --git a/pages/auth/verify-request.js b/pages/auth/verify-request.js
index 60f468b7..c89a8083 100644
--- a/pages/auth/verify-request.js
+++ b/pages/auth/verify-request.js
@@ -5,6 +5,7 @@ import Breadcrumbs from "../../components/breadcrumbs";
 import CookieBanner from "../../components/cookieBanner";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
+import ServiceBanner from "../../components/servicebanner";
 
 import { getCsrfToken } from "next-auth/react";
 
@@ -25,7 +26,7 @@ const SignIn = (props) => {
                 <Header />
                 <div className="govuk-width-container govuk-!-padding-bottom-9">
                     <Breadcrumbs />
-
+                    <ServiceBanner noSignin={true} />
                     <main
                         className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
                         id="main-content"
diff --git a/pages/case/[ticketnumber].js b/pages/case/[ticketnumber].js
index 24551c73..8d978c88 100644
--- a/pages/case/[ticketnumber].js
+++ b/pages/case/[ticketnumber].js
@@ -23,7 +23,7 @@ import {
     setSearchResults,
 } from "../../store/searchOutput/action";
 import { wrapper } from "../../store/store";
-
+import ServiceBanner from "../../components/servicebanner";
 const CaseHome = (props) => {
     const {
         footerLinks,
@@ -51,7 +51,7 @@ const CaseHome = (props) => {
                 <Header serviceName="Developments of National Significance" />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={ticketnumber} props={props} />
-
+                    <ServiceBanner />
                     <Case
                         props={props}
                         myCases={props.myCases.myCases}
diff --git a/pages/case/index.js b/pages/case/index.js
index 32ad0398..ab2360f2 100644
--- a/pages/case/index.js
+++ b/pages/case/index.js
@@ -7,7 +7,7 @@ import Case from "../../components/case";
 import CookieBanner from "../../components/cookieBanner";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
-
+import ServiceBanner from "../../components/servicebanner";
 const CaseHome = (props) => {
     const { footerLinks, pages } = props;
     let { t, lang } = useTranslation();
@@ -30,6 +30,7 @@ const CaseHome = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} props={props} />
+                    <ServiceBanner />
                     <Case
                         props={props}
                         myCases={props.myCases.myCases}
diff --git a/pages/dnsapplications.js b/pages/dnsapplications.js
index 21919449..b3315c4e 100644
--- a/pages/dnsapplications.js
+++ b/pages/dnsapplications.js
@@ -17,6 +17,7 @@ import {
     setDNSCoords,
 } from "../store/searchOutput/action";
 import { wrapper } from "../store/store";
+import ServiceBanner from "../components/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, showMap } = props;
@@ -99,6 +100,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner />
                     <DNSSearchResults
                         showMap={showMap}
                         searchString="DNS"
diff --git a/pages/dnsdetails.js b/pages/dnsdetails.js
index 03568c71..4ab8fec2 100644
--- a/pages/dnsdetails.js
+++ b/pages/dnsdetails.js
@@ -7,6 +7,7 @@ import Case from "../components/case";
 import CookieBanner from "../components/cookieBanner";
 import Footer from "../components/footer";
 import Header from "../components/header";
+import ServiceBanner from "../components/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, showMap } = props;
@@ -30,6 +31,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} props={props} />
+                    <ServiceBanner />
                     <Case
                         props={props}
                         myCases={props.myCases.myCases}
diff --git a/pages/myportal/[appealtypes].js b/pages/myportal/[appealtypes].js
index 52460eab..70503474 100644
--- a/pages/myportal/[appealtypes].js
+++ b/pages/myportal/[appealtypes].js
@@ -14,6 +14,7 @@ import {
     getMandatoryFields,
     getPickLists,
     getProgressFromBlob,
+    getPersonalAccount,
 } from "../../actions";
 import Breadcrumbs from "../../components/breadcrumbs";
 import CookieBanner from "../../components/cookieBanner";
@@ -29,6 +30,7 @@ import {
     setContainerID,
     setLoggedInUserEmail,
     setLoggedInUserId,
+    setAccountDetails,
 } from "../../store/accountDetails/action";
 import {
     setAppealLPA,
@@ -45,6 +47,7 @@ import {
 import { setCurrentView } from "../../store/currentView/action";
 import { setForm } from "../../store/formData/action";
 import { wrapper } from "../../store/store";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 let Home = (props) => {
     const { footerLinks, pages, formData } = props;
@@ -169,6 +172,7 @@ let Home = (props) => {
 
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} formTitle={formTitle} />
+                    <ServiceBanner props={props} />
                     <main
                         className="govuk-main-wrapper--auto-spacing"
                         id="main-content"
@@ -241,6 +245,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         console.log("which appeal: ", query.appealtypes);
 
+        const accountDetails = await getPersonalAccount(loggedInUser);
+
         const [appealTypeData, mandatoryFieldsData, pickListData, blobList] =
             await Promise.all([
                 await getAppealsTypesForNewAppeal(),
@@ -318,6 +324,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         store.dispatch(setLoggedInUserId(loggedInUser));
         store.dispatch(setLoggedInUserEmail(loggedInUserEmail));
+
+        store.dispatch(setAccountDetails(accountDetails));
         store.dispatch(setAppealLPA(query.lpa));
         store.dispatch(setAppealTypeID(query.apt));
         store.dispatch(setCaseReference(caseReference));
diff --git a/pages/myportal/addresssearch.js b/pages/myportal/addresssearch.js
index 15f3942c..a303a284 100644
--- a/pages/myportal/addresssearch.js
+++ b/pages/myportal/addresssearch.js
@@ -10,6 +10,7 @@ import CRMError from "../../components/crmError";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
 import Search from "../../components/myportal/addresssearch";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -99,6 +100,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner props={props} />
                     {hasError ? (
                         <CRMError props={props} whichError="advancedSearch" />
                     ) : (
diff --git a/pages/myportal/addresssearchresults.js b/pages/myportal/addresssearchresults.js
index 8bd2efbd..411e9070 100644
--- a/pages/myportal/addresssearchresults.js
+++ b/pages/myportal/addresssearchresults.js
@@ -37,6 +37,7 @@ import {
 } from "../../store/watchedCases/action";
 
 import { wrapper } from "../../store/store";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -119,6 +120,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} props={props} />
+                    <ServiceBanner props={props} />
                     <SearchResults
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
diff --git a/pages/myportal/advancedsearch.js b/pages/myportal/advancedsearch.js
index c14e2177..887d5f50 100644
--- a/pages/myportal/advancedsearch.js
+++ b/pages/myportal/advancedsearch.js
@@ -25,6 +25,7 @@ import {
 import { setAppealType } from "../../store/appealType/action";
 import { setLPA } from "../../store/lpa/action";
 import { wrapper } from "../../store/store";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -52,6 +53,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner props={props} />
                     {hasError ? (
                         <CRMError props={props} whichError="advancedSearch" />
                     ) : (
diff --git a/pages/myportal/advancedsearchresults.js b/pages/myportal/advancedsearchresults.js
index b3a7a8fb..fd5129b9 100644
--- a/pages/myportal/advancedsearchresults.js
+++ b/pages/myportal/advancedsearchresults.js
@@ -39,6 +39,7 @@ import {
     setWatchedCases,
     setWatchedCasesDetails,
 } from "../../store/watchedCases/action";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, watchedCases } = props;
@@ -60,6 +61,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner props={props} />
                     <SearchResults
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
diff --git a/pages/myportal/case.js b/pages/myportal/case.js
index 10cc739c..9a6a2f7f 100644
--- a/pages/myportal/case.js
+++ b/pages/myportal/case.js
@@ -10,6 +10,7 @@ import Footer from "../../components/footer";
 import Header from "../../components/header";
 import NoSessionWarning from "../../components/nosession";
 import TimeOut from "../../components/timeout";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, showRepresentations } = props;
@@ -44,6 +45,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} props={props} />
+                    <ServiceBanner props={props} />
                     <Case
                         props={props}
                         myCases={props.myCases.myCases}
diff --git a/pages/myportal/case/[ticketnumber].js b/pages/myportal/case/[ticketnumber].js
index e2a5929e..d147a3b4 100644
--- a/pages/myportal/case/[ticketnumber].js
+++ b/pages/myportal/case/[ticketnumber].js
@@ -45,6 +45,7 @@ import {
     setWatchedCases,
     setWatchedCasesDetails,
 } from "../../../store/watchedCases/action";
+import ServiceBanner from "../../../components/myportal/servicebanner";
 
 const CaseHome = (props) => {
     const { footerLinks, pages, setSearchResults, setSearchDetails } = props;
@@ -67,7 +68,7 @@ const CaseHome = (props) => {
                 <Header serviceName="Developments of National Significance" />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={ticketnumber} props={props} />
-
+                    <ServiceBanner props={props} />
                     <Case
                         props={props}
                         myCases={props.myCases.myCases}
diff --git a/pages/myportal/dnsapplications.js b/pages/myportal/dnsapplications.js
index d6cb778c..50c0c104 100644
--- a/pages/myportal/dnsapplications.js
+++ b/pages/myportal/dnsapplications.js
@@ -8,6 +8,7 @@ import {
     getIP,
     getPortalModuleDetails,
     getWatchedCases,
+    getPersonalAccount,
 } from "../../actions";
 
 import Breadcrumbs from "../../components/breadcrumbs";
@@ -19,7 +20,10 @@ import {
     getFormCollectionByID,
     getSearchDetails,
 } from "../../components/utils";
-import { setLoggedInUserId } from "../../store/accountDetails/action";
+import {
+    setLoggedInUserId,
+    setAccountDetails,
+} from "../../store/accountDetails/action";
 import { setSearch } from "../../store/search/action";
 import {
     setDNSCoords,
@@ -33,6 +37,7 @@ import {
 } from "../../store/watchedCases/action";
 
 import { getSession } from "next-auth/react";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, watchedCases, showMap } = props;
@@ -115,6 +120,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner props={props} />
                     <DNSSearchResults
                         showMap={showMap}
                         searchString="DNS"
@@ -155,10 +161,12 @@ export const getServerSideProps = wrapper.getServerSideProps(
                 },
             };
         } else {
-            let [searchResultsObj, watchedCases] = await Promise.all([
-                await getBasicDNSSearch(),
-                await getWatchedCases(loggedInUser),
-            ]);
+            let [accountDetails, searchResultsObj, watchedCases] =
+                await Promise.all([
+                    await getPersonalAccount(loggedInUser),
+                    await getBasicDNSSearch(),
+                    await getWatchedCases(loggedInUser),
+                ]);
 
             searchResultsObj =
                 searchResultsObj.status == 502
@@ -183,6 +191,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
             store.dispatch(setWatchedCases(watchedCases));
             store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
             store.dispatch(setLoggedInUserId(loggedInUser));
+            store.dispatch(setAccountDetails(accountDetails));
 
             return {
                 props: { showMap: showMapCheck },
@@ -232,6 +241,7 @@ const mapStateToProps = (state) => {
         watchedCases: state.watchedCases,
         myRepresentations: state.myRepresentations,
         awaitingSubmission: state.awaitingSubmission,
+        accountDetails: state.accountDetails,
     };
 };
 
diff --git a/pages/myportal/dnsdetails.js b/pages/myportal/dnsdetails.js
index 655ce69b..223f4350 100644
--- a/pages/myportal/dnsdetails.js
+++ b/pages/myportal/dnsdetails.js
@@ -9,6 +9,7 @@ import CookieBanner from "../../components/cookieBanner";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
 import NoSessionWarning from "../../components/nosession";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -43,6 +44,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} props={props} />
+                    <ServiceBanner props={props} />
                     <Case
                         props={props}
                         myCases={props.myCases.myCases}
@@ -97,6 +99,7 @@ const mapStateToProps = (state) => {
         watchedCases: state.watchedCases,
         myRepresentations: state.myRepresentations,
         awaitingSubmission: state.awaitingSubmission,
+        accountDetails: state.accountDetails,
     };
 };
 
diff --git a/pages/myportal/representation.js b/pages/myportal/representation.js
index 26af060d..8673e52a 100644
--- a/pages/myportal/representation.js
+++ b/pages/myportal/representation.js
@@ -18,6 +18,7 @@ import {
 } from "../../store/accountDetails/action";
 
 import NoSessionWarning from "../../components/nosession";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const RepresentationF = (props) => {
     const { footerLinks, pages, accountDetails } = props;
@@ -128,6 +129,7 @@ const RepresentationF = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} props={props} />
+                    <ServiceBanner props={props} />
                     <Case
                         myCases={props.myCases.myCases}
                         searchResultsObj={
diff --git a/pages/myportal/searchresults.js b/pages/myportal/searchresults.js
index 487b8f2d..839d2bbf 100644
--- a/pages/myportal/searchresults.js
+++ b/pages/myportal/searchresults.js
@@ -38,6 +38,7 @@ import {
     setContainerID,
     setLoggedInUserId,
 } from "../../store/accountDetails/action";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, watchedCases, showLoginCheck } = props;
@@ -58,7 +59,8 @@ const Home = (props) => {
                 <CookieBanner />
                 <Header />
                 <div className="govuk-width-container">
-                    <Breadcrumbs slug={appealtypes} />
+                    <Breadcrumbs slug={appealtypes} />{" "}
+                    <ServiceBanner props={props} />
                     <SearchResults
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
diff --git a/pages/myportal/viewall.js b/pages/myportal/viewall.js
index ec14e741..f7003ecf 100644
--- a/pages/myportal/viewall.js
+++ b/pages/myportal/viewall.js
@@ -10,6 +10,7 @@ import Header from "../../components/header";
 import ViewAll from "../../components/myportal/viewall";
 import NoSessionWarning from "../../components/nosession";
 import TimeOut from "../../components/timeout";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -45,6 +46,7 @@ const Home = (props) => {
                         slug={appealtypes}
                         currentView={props.currentView.currentView}
                     />
+                    <ServiceBanner props={props} />
                     <ViewAll
                         searchString={"View All"}
                         searchResultsObj={props.searchResultsObj}
diff --git a/pages/newappeal/index.js b/pages/newappeal/index.js
index 9022876b..29012f6f 100644
--- a/pages/newappeal/index.js
+++ b/pages/newappeal/index.js
@@ -24,6 +24,7 @@ import { setAppealType } from "../../store/appealType/action";
 import { setLPA } from "../../store/lpa/action";
 import { wrapper } from "../../store/store";
 import TimeOut from "../../components/timeout";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, formData, loggedInUserIdent } = props;
@@ -109,6 +110,7 @@ const Home = (props) => {
 
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner props={props} />
                     <main
                         className="govuk-main-wrapper--auto-spacing"
                         id="main-content"
diff --git a/pages/searchresults.js b/pages/searchresults.js
index 19e3421c..81319814 100644
--- a/pages/searchresults.js
+++ b/pages/searchresults.js
@@ -17,6 +17,7 @@ import {
     setSearchResults,
 } from "../store/searchOutput/action";
 import { wrapper } from "../store/store";
+import ServiceBanner from "../components/servicebanner";
 
 const Home = (props) => {
     const { footerLinks, pages, isLinkedCase, showLoginCheck } = props;
@@ -103,6 +104,7 @@ const Home = (props) => {
                 <Header />
                 <div className="govuk-width-container">
                     <Breadcrumbs slug={appealtypes} />
+                    <ServiceBanner />
                     <SearchResults
                         searchString={props.search.searchString}
                         searchResultsObj={props.searchResultsObj}
diff --git a/styles/sass/patterns/_card.scss b/styles/sass/patterns/_card.scss
index e8a0cf41..1625866a 100644
--- a/styles/sass/patterns/_card.scss
+++ b/styles/sass/patterns/_card.scss
@@ -37,7 +37,7 @@
 
 @media screen and (min-width: 900px) {
     .card {
-        flex-basis: 48.2%;
+        flex-basis: 48.5%;
 
         &:nth-child(2n-2) {
             margin-left: 3%;
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 49daf590..d48e7f18 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -252,6 +252,11 @@ a.longLinkBreak {
 }
 
 .servicebanner {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 6px solid $lightgrey_semi;
+    padding: 20px 0;
+
     h1 {
         margin-bottom: 0px;
         margin-top: 0px;
@@ -273,6 +278,15 @@ a.longLinkBreak {
         }
     }
 
+    .serviceBanner_userDetails {
+        display: flex;
+        justify-content: space-between;
+        width: auto;
+        align-items: center;
+    }
+
+
+
     &.myportal {
         display: flex;
         justify-content: space-between;
@@ -307,28 +321,31 @@ a.longLinkBreak {
                 }
             }
 
-            .govuk-header__link {
-                color: $blue;
-                font-weight: bold;
-                border: 1px solid $blue;
-                color: $blue;
-                font-size: 16px;
-                font-weight: bold;
-                padding: 10px 20px;
 
-                &:hover {
-                    background: $blue;
-                    border: 1px solid $blue;
-                    color: $white;
-                    font-size: 16px;
-                    padding: 10px 20px;
-                    text-decoration: none;
-                }
+        }
+    }
 
-                &:focus {
-                    box-shadow: none;
-                }
-            }
+    .govuk-header__link {
+        color: $blue;
+        font-weight: bold;
+        border: 1px solid $blue;
+        color: $blue;
+        font-size: 16px;
+        font-weight: bold;
+        padding: 10px 20px;
+        background-color: transparent;
+
+        &:hover {
+            background: $blue;
+            border: 1px solid $blue;
+            color: $white;
+            font-size: 16px;
+            padding: 10px 20px;
+            text-decoration: none;
+        }
+
+        &:focus {
+            box-shadow: none;
         }
     }
 }
@@ -503,7 +520,7 @@ textarea,
 .languageSwitch {
     margin-top: 10px;
     text-align: right;
-    margin-right: 20px;
+    margin-right: 0px;
 
     @media screen and (max-width: 900px) {
         position: absolute;