information banner from api with date range

.env.local

@@ -44,7 +44,7 @@ RELAYPATH = "dev-pedw-hc"
 
 
 GOOGLE_TAG_MANAGER = GTM-T78CBC3
-SHOWLOGIN = "true"
+SHOWLOGIN = "false"
 SHOWREPRESENTATIONS = false
 SHOWFILEUPLOAD = "false"
 SHOWMAPS = "true"

actions/index.js

@@ -1298,3 +1298,15 @@ export const sendEmail = async (
             console.log("this serror", error);
         });
 };
+
+export const getNotice = () => {
+    return axios
+        .get(BASE_URL + "/api/notices")
+        .then((res) => {
+            //console.log("//////////----", res.data);
+            return res.data;
+        })
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};

components/breadcrumbs.js

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import LoadingOverlay from "react-loading-overlay";
+import { getSession, useSession } from "next-auth/react";
 
 const Breadcrumbs = (props) => {
     const { courseContent, slug, currentView } = props;
@@ -45,6 +46,9 @@ const Breadcrumbs = (props) => {
     //         ? setShowSpinnerState(false)
     //         : setShowSpinnerState(true);
     // };
+
+    const { data: session, status } = useSession();
+
     return (
         <>
             <nav
@@ -494,19 +498,24 @@ const Breadcrumbs = (props) => {
                         )}
                         {router.pathname == "/myportal/representation" ? (
                             <>
-                                <li className="govuk-breadcrumbs__list-item">
+                                {session != null && (
-                                    <Link
+                                    <li className="govuk-breadcrumbs__list-item">
-                                        href={
+                                        <Link
-                                            router.locale != "en"
+                                            href={
-                                                ? router.locale + "/myportal"
+                                                router.locale != "en"
-                                                : "/myportal"
+                                                    ? router.locale +
-                                        }
+                                                      "/myportal"
-                                    >
+                                                    : "/myportal"
-                                        <a className="govuk-breadcrumbs__link">
+                                            }
-                                            {t("common:breadcrumb-my-portal")}
+                                        >
-                                        </a>
+                                            <a className="govuk-breadcrumbs__link">
-                                    </Link>
+                                                {t(
-                                </li>
+                                                    "common:breadcrumb-my-portal"
+                                                )}
+                                            </a>
+                                        </Link>
+                                    </li>
+                                )}
                                 <li className="govuk-breadcrumbs__list-item">
                                     Make representation for:{" "}
                                     {

components/case/summary.js

@@ -15,6 +15,7 @@ import {
 } from "../../store/currentView/action";
 
 import { getFormCollectionByID } from "../utils";
+import { getSession, useSession } from "next-auth/react";
 
 import Pinswg_advertsid from "./summaryTypes/pinswg_advertsid";
 import Pinswg_callinss77id from "./summaryTypes/pinswg_callinss77id";
@@ -64,11 +65,7 @@ const CaseSummary = (props) => {
         showMap,
     } = props;
 
-    const noRepresentationLink = [
+    const noRepresentationLink = ["/dnsdetails", "/dns/[developmentName]"];
-        "/case",
-        "/dnsdetails",
-        "/dns/[developmentName]",
-    ];
 
     let setCaseQueryObj = props[currentType];
     let setCaseDetailsObj = props[currentType + "Details"];
@@ -709,6 +706,8 @@ const CaseSummary = (props) => {
         );
     }
 
+    const { data: session, status } = useSession();
+    console.log("session status:", status, session);
     return (
         <>
             {showDetailsBlock}

components/noticebanner.js

@@ -0,0 +1,65 @@
+import Link from "next/link";
+import Image from "next/image";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import cookie from "cookie-cutter";
+
+export default function NoticeBanner(props) {
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+
+    const [bannerOpen, setBannerOpen] = useState(true);
+
+    const { noticeContent } = props;
+    const hideNotice = () => {
+        let now = new Date();
+        let expDate = new Date(now);
+
+        expDate.setDate(now.getDate() + 365);
+        cookie.set("pedwNotice", "true", {
+            expires: expDate,
+            path: "/",
+        });
+
+        setBannerOpen(false);
+    };
+
+    const bannerOpenCookie = typeof cookie.get("pedwNotice") == "undefined";
+
+    return (
+        <>
+            {bannerOpenCookie ? (
+                <div className="govuk-warning-text noticebanner">
+                    <span
+                        className="govuk-warning-text__icon"
+                        aria-hidden="true"
+                    >
+                        !
+                    </span>
+                    <strong className="govuk-warning-text__text">
+                        <span className="govuk-warning-text__assistive">
+                            Warning
+                        </span>
+                        {router.locale != "en"
+                            ? noticeContent.value[0].notice_cy
+                            : noticeContent.value[0].notice_en}
+                    </strong>
+                    <div className="hideNotice">
+                        <span
+                            className="govuk-link"
+                            onClick={() => {
+                                hideNotice();
+                            }}
+                        >
+                            Hide
+                        </span>
+                    </div>
+                </div>
+            ) : (
+                ""
+            )}
+        </>
+    );
+}

components/search/searchresults.js

@@ -44,6 +44,7 @@ import {
     getPortalModuleDetailsProxy,
     deleteWatchedCases,
 } from "../../actions";
+import { useSession, signIn, signOut } from "next-auth/react";
 
 const SearchResults = (props) => {
     const {
@@ -65,6 +66,7 @@ const SearchResults = (props) => {
 
     const router = useRouter();
     const { locale } = router;
+    const { data: session } = useSession();
 
     var resultsArr = searchResultsObj.value || [];
 
@@ -531,6 +533,28 @@ const SearchResults = (props) => {
                                             )}
                                         </dd>
                                     )}
+                                    {!session && (
+                                        <dd>
+                                            <span
+                                                className="govuk-summary-list__actionLink"
+                                                onClick={() => {
+                                                    signIn("email");
+                                                    // selectWatchedCase(
+                                                    //     cookies.pinsUser,
+                                                    //     item.incidentid,
+                                                    //     item.pinswg_appealcasetype
+                                                    // );
+                                                    alert(
+                                                        "Trying to watch case " +
+                                                            item.title
+                                                    );
+                                                }}
+                                                title="Watch this case"
+                                            >
+                                                +
+                                            </span>
+                                        </dd>
+                                    )}
                                 </div>
                             );
                         })

package.json

@@ -16,6 +16,7 @@
     "@magic-sdk/admin": "^1.4.0",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@prisma/client": "^3.12.0",
+    "@redux-devtools/extension": "^3.2.3",
     "@webdeb/next-styles": "^1.1.1",
     "applicationinsights": "^2.2.0",
     "axios": "^0.24.0",
@@ -67,7 +68,6 @@
     "react-loading-overlay": "^1.0.1",
     "react-redux": "^7.2.6",
     "react-xml-parser": "^1.1.8",
-    "redux-devtools-extension": "^2.13.9",
     "redux-form": "^8.3.8",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.1",

pages/api/auth/[...nextauth].js

@@ -51,6 +51,7 @@ export default NextAuth({
                         reference: reference,
                         // emailReplyToId: emailReplyToId,
                     })
+                    .then((response) => console.log(response))
                     .catch((err) => consoleLogger(err));
             },
         }),

pages/api/endpoint/getwatchedcases_api.js

@@ -4,6 +4,7 @@ import {
     getToken,
     azureHeaders,
     getBasicSearchDetails,
+    consoleLogger,
 } from "../../../actions";
 
 const WORDKEY = process.env.HASHKEY;

pages/api/notices/index.js

@@ -0,0 +1,17 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        "value": [
+            {
+                "notice_en":
+                    "An update has been made, if you experience problems,refresh your cache,lorem ipsum doooo orem ipsum doooo orem ipsum doooo orem ipsum doooo dah",
+                "notice_cy":
+                    "Mae diweddariad wedi'i wneud, os ydych chi'n cael problemau, adnewyddwch eich storfa, lorem ipsum doooo orem ipsum doooo orem ipsum doooo orem ipsum doooo dah",
+
+                "dateFrom": "20/09/2022",
+                "dateTo": "20/09/2023",
+            },
+        ],
+    });
+};
+export default ApiResponse;

pages/index.js

@@ -4,7 +4,7 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { setCookie } from "nookies";
 import { connect } from "react-redux";
-import { getToken, hashString } from "../actions";
+import { getNotice, getToken, hashString } from "../actions";
 import {
     getGGToken,
     getPortalLogin,
@@ -16,6 +16,7 @@ import Footer from "../components/footer";
 import Header from "../components/header";
 import Main from "../components/main";
 import ServiceBanner from "../components/servicebanner";
+import NoticeBanner from "../components/noticebanner";
 import {
     setAccountDetails,
     setContainerID,
@@ -36,6 +37,7 @@ const Home = (props) => {
         loggedInUserEmail,
         ggLocale,
         hasLoginCode,
+        noticeContent,
     } = props;
     let { t, lang } = useTranslation();
 
@@ -78,6 +80,26 @@ const Home = (props) => {
               }))
         : console.log("no value in user id");
 
+    var noticeDateFrom = new Date(
+        noticeContent.value[0].dateFrom.split("/")[2],
+        noticeContent.value[0].dateFrom.split("/")[1] - 1,
+        noticeContent.value[0].dateFrom.split("/")[0]
+    );
+
+    var noticeDateTo = new Date(
+        noticeContent.value[0].dateTo.split("/")[2],
+        noticeContent.value[0].dateTo.split("/")[1] - 1,
+        noticeContent.value[0].dateTo.split("/")[0]
+    );
+
+    var today = new Date();
+    var day = today.getDate();
+    var month = today.getMonth();
+    var year = today.getFullYear();
+
+    today = new Date(year, month, day);
+    const displayNotice = today >= noticeDateFrom && today <= noticeDateTo;
+
     return (
         <div>
             <Head>
@@ -147,6 +169,9 @@ const Home = (props) => {
                         </>
                     ) : (
                         <>
+                            {displayNotice && (
+                                <NoticeBanner noticeContent={noticeContent} />
+                            )}
                             <ServiceBanner />
                             <Main
                                 ggLocale={ggLocale}
@@ -192,6 +217,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         // store.dispatch(getGovGatewayConfig(providerConfig));
 
+        const noticeContent = await getNotice();
+
         let ggToken = {};
         let ggUserInfo = {};
         let portalUserObj = {};
@@ -241,6 +268,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
                     loggedInUserId: portalUserObj,
                     loggedInUserEmail: loginEmailStr,
                     hasLoginCode: hasLoginCode,
+                    noticeContent: noticeContent,
                 },
             };
         }

pages/myportal/advancedsearch.js

@@ -3,7 +3,7 @@ import useTranslation from "next-translate/useTranslation";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
-import { getAppealsTypes, getLPA } from "../../actions";
+import { getAppealsTypes, getLPA, getPersonalAccount } from "../../actions";
 import { getProviderConfig } from "../../actions/govgateway";
 import Breadcrumbs from "../../components/breadcrumbs";
 import CookieBanner from "../../components/cookieBanner";
@@ -16,6 +16,12 @@ import { setAppealType } from "../../store/appealType/action";
 import { getGovGatewayConfig } from "../../store/govgateway/action";
 import { setLPA } from "../../store/lpa/action";
 import { wrapper } from "../../store/store";
+import { getSession, useSession } from "next-auth/react";
+import {
+    setAccountDetails,
+    setContainerID,
+    setLoggedInUserId,
+} from "../../store/accountDetails/action";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -61,21 +67,32 @@ const Home = (props) => {
 };
 
 export const getServerSideProps = wrapper.getServerSideProps(
-    (store) =>
+    (store) => async (ctx) => {
-        async ({ query, req, res }) => {
+        const { query, req, res } = ctx;
-            const [appealTypeData, lpaData] = await Promise.all([
+        console.log("query-", query);
-                await getAppealsTypes(),
-                await getLPA(),
-            ]);
-            const providerConfig = await getProviderConfig();
-            store.dispatch(getGovGatewayConfig(providerConfig));
 
-            // const lpaData = require("../../data/lpa.json");
+        const { cookies } = req;
-            // const appealTypeData = require("../../data/appealtypes.json");
 
-            store.dispatch(setAppealType(appealTypeData));
+        let loggedInUser = cookies.pinsUser;
-            store.dispatch(setLPA(lpaData));
+
-        }
+        let thisSession = await getSession(ctx);
+
+        const [accountDetails, appealTypeData, lpaData] = await Promise.all([
+            await getPersonalAccount(loggedInUser),
+            await getAppealsTypes(),
+            await getLPA(),
+        ]);
+        const providerConfig = await getProviderConfig();
+        store.dispatch(getGovGatewayConfig(providerConfig));
+
+        // const lpaData = require("../../data/lpa.json");
+        // const appealTypeData = require("../../data/appealtypes.json");
+
+        store.dispatch(setAccountDetails(accountDetails));
+        store.dispatch(setAppealType(appealTypeData));
+        store.dispatch(setLPA(lpaData));
+        store.dispatch(setLoggedInUserId(loggedInUser));
+    }
 );
 
 const mapStateToProps = (state) => {

pages/myportal/representation.js

@@ -7,6 +7,14 @@ import CookieBanner from "../../components/cookieBanner";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
 import Case from "../../components/representation";
+import { wrapper } from "../../store/store";
+import { getSession, useSession } from "next-auth/react";
+import { getPersonalAccount } from "../../actions";
+import {
+    setAccountDetails,
+    setContainerID,
+    setLoggedInUserId,
+} from "../../store/accountDetails/action";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -113,10 +121,35 @@ const Home = (props) => {
     );
 };
 
+// export const getServerSideProps = wrapper.getServerSideProps(
+//     (store) => async (ctx) => {
+//         const { query, req, res } = ctx;
+//         console.log("The query", query);
+
+//         const { cookies } = req;
+
+//         let loggedInUser = cookies.pinsUser;
+
+//         let thisSession = await getSession(ctx);
+
+//         console.log(loggedInUser, thisSession);
+
+//         const accountDetails = await getPersonalAccount(loggedInUser);
+//         store.dispatch(setAccountDetails(accountDetails));
+
+//         return {
+//             props: {
+//                 containerID: thisSession.user.id,
+//             },
+//         };
+//     }
+// );
+
 const mapStateToProps = (state) => {
     //console.log(state);
 
     return {
+        accountDetails: state.accountDetails,
         currentView: state.currentView,
         search: state.search,
         searchResultsObj: state.searchResultsObj,

pages/myportal/searchresults.js

@@ -3,6 +3,7 @@ import Head from "next/head";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import {
+    getPersonalAccount,
     getBasicSearch,
     getPortalModuleDetails,
     getWatchedCases,
@@ -29,6 +30,12 @@ import {
 import TimeOut from "../../components/timeout";
 import { getGovGatewayConfig } from "../../store/govgateway/action";
 import { getProviderConfig } from "../../actions/govgateway";
+import { getSession, useSession } from "next-auth/react";
+import {
+    setAccountDetails,
+    setContainerID,
+    setLoggedInUserId,
+} from "../../store/accountDetails/action";
 
 const Home = (props) => {
     const { footerLinks, pages, watchedCases } = props;
@@ -73,6 +80,8 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         let loggedInUser = cookies.pinsUser;
 
+        let thisSession = await getSession(ctx);
+
         let [searchResultsObj, watchedCases] = await Promise.all([
             await getBasicSearch(query.q),
             await getWatchedCases(loggedInUser),
@@ -89,17 +98,21 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         //console.log("sssss", searchResultsObj);
 
-        const [searchDetailsObj, watchedCasesDetails] = await Promise.all([
+        const [accountDetails, searchDetailsObj, watchedCasesDetails] =
-            await getSearchDetails(searchResultsObj),
+            await Promise.all([
-            await getDetails(watchedCases, "myWatchedCases"),
+                await getPersonalAccount(loggedInUser),
-        ]);
+                await getSearchDetails(searchResultsObj),
+                await getDetails(watchedCases, "myWatchedCases"),
+            ]);
         const providerConfig = await getProviderConfig();
+        store.dispatch(setAccountDetails(accountDetails));
         store.dispatch(getGovGatewayConfig(providerConfig));
         store.dispatch(setSearchResults(searchResultsObj));
         store.dispatch(setSearchDetails(searchDetailsObj));
         store.dispatch(setSearch(query.q));
         store.dispatch(setWatchedCases(watchedCases));
         store.dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        store.dispatch(setLoggedInUserId(loggedInUser));
     }
 );
 

public/assets/images/information.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>global/icon/information</title>
+    <defs>
+        <path d="M12.5,0 C5.59625,0 0,5.59625 0,12.5 C0,19.4025 5.59625,25 12.5,25 C19.4025,25 25,19.4025 25,12.5 C25,5.59625 19.4025,0 12.5,0 M13.9423077,18.5769231 L11.5384615,18.5769231 L11.5384615,10.5769231 L13.9423077,10.5769231 L13.9423077,18.5769231 Z M13.9423077,8.17307692 L11.5384615,8.17307692 L11.5384615,5.76923077 L13.9423077,5.76923077" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="Page-1" fill="#0360A6" xlink:href="#path-1"></use>
+            <g mask="url(#mask-2)" fill="#0360A6" id="colour/blue/$blue-#0360a6">
+                <g>
+                    <polygon id="#0360a6" points="-7.27163618e-14 1.43800316e-13 25 1.43800316e-13 25 25 -7.27163618e-14 25"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

store/store.js

@@ -86,7 +86,7 @@ const reducer = (state = {}, action) => {
 // BINDING MIDDLEWARE
 const bindMiddleware = (middleware) => {
     if (process.env.NODE_ENV !== "production") {
-        const { composeWithDevTools } = require("redux-devtools-extension");
+        const { composeWithDevTools } = require("@redux-devtools/extension");
         return composeWithDevTools(applyMiddleware(...middleware));
     }
     return applyMiddleware(...middleware);

styles/sass/welshgov/_application.scss

@@ -41,16 +41,18 @@ h3,
 h4,
 h5,
 .app-step-nav__circle-background,
-a {
+.govuk-warning-text__icon a {
     font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
 }
 
 .govuk-label-s {
     font-size: 1rem;
 }
+
 .govuk-label-xs {
     font-size: 0.875rem;
 }
+
 .govuk-select-s {
     font-size: 1rem;
     padding: 2px;
@@ -61,6 +63,7 @@ body {
     margin: 0;
     background-color: #ffffff;
 }
+
 .app-cookie-banner {
     .consentBanner {
         .govuk-button {
@@ -68,6 +71,7 @@ body {
             width: 28%;
             margin-right: 45px;
         }
+
         &.hidden {
             display: none;
         }
@@ -88,12 +92,15 @@ body {
         font-weight: bold;
         width: 100%;
         text-align: center;
+
         &:hover {
             background-color: #0360a6;
             color: #eeeeee;
         }
     }
+
     @media screen and (min-width: 768px) {
+
         .cookies-banner__link,
         .cookies-banner__button {
             display: inline-block;
@@ -102,11 +109,13 @@ body {
             margin-top: 0;
         }
     }
+
     .cookies-banner__description {
         color: $black;
         font-size: 16px;
         font-size: 1rem;
     }
+
     @media screen and (min-width: 768px) {
         .cookies-banner__description {
             font-size: 18px;
@@ -157,17 +166,20 @@ a.longLinkBreak {
     @media screen and (max-width: 900px) {
         border-bottom: none;
     }
+
     .govuk-header__container {
         border-bottom: none;
         margin-bottom: initial;
         padding-top: 20px;
     }
+
     &.phase_banner {
         background-color: $yellow;
 
         .govuk-header__container {
             padding-top: 0;
         }
+
         .govuk-phase-banner {
             padding-top: 12px;
             padding-bottom: 12px;
@@ -183,6 +195,7 @@ a.longLinkBreak {
     text-decoration: none;
     font-size: 16px;
 }
+
 .govuk-breadcrumbs__link:focus {
     color: $lightblue;
     outline: solid 2px #ffd530;
@@ -198,6 +211,7 @@ a.longLinkBreak {
     font-weight: bold;
     color: $darkgrey;
 }
+
 .govuk-breadcrumbs__list-item:before {
     top: 0;
     bottom: 0;
@@ -223,14 +237,17 @@ a.longLinkBreak {
         @media screen and (max-width: 360px) {
             flex-direction: column-reverse;
             align-items: flex-start;
+
             .pedw_logo {
                 margin-bottom: 20px;
             }
         }
     }
+
     &.myportal {
         display: flex;
         justify-content: space-between;
+
         @media screen and (max-width: 414px) {
             flex-direction: column;
         }
@@ -255,10 +272,12 @@ a.longLinkBreak {
                 color: $blue;
                 font-size: 16px;
                 font-weight: bold;
+
                 @media screen and (max-width: 414px) {
                     max-width: 41%;
                 }
             }
+
             .govuk-header__link {
                 color: $blue;
                 font-weight: bold;
@@ -267,6 +286,7 @@ a.longLinkBreak {
                 font-size: 16px;
                 font-weight: bold;
                 padding: 10px 20px;
+
                 &:hover {
                     background: $blue;
                     border: 1px solid $blue;
@@ -275,6 +295,7 @@ a.longLinkBreak {
                     padding: 10px 20px;
                     text-decoration: none;
                 }
+
                 &:focus {
                     box-shadow: none;
                 }
@@ -360,6 +381,7 @@ textarea,
     &:active {
         top: 0px;
     }
+
     &:focus {
         background-color: #ffd530 !important;
         border-color: transparent !important;
@@ -409,6 +431,7 @@ textarea,
     @media screen and (max-width: 1024px) {
         padding-left: 20px;
     }
+
     @media screen and (max-width: 376px) {
         padding-left: 0px;
         padding-right: 0px;
@@ -457,6 +480,7 @@ textarea,
         top: 20px;
         right: -10px;
     }
+
     a.govuk-header__link {
         background-color: $black;
         padding: 10px 20px;
@@ -468,6 +492,7 @@ textarea,
             text-decoration: none;
         }
     }
+
     a.govuk-header__link:focus {
         background-color: $black;
         padding: 10px;
@@ -491,6 +516,7 @@ textarea,
                 float: left;
                 position: relative;
             }
+
             .mobileMenu label {
                 background-color: black;
                 padding: 10px 30px;
@@ -499,6 +525,7 @@ textarea,
                 display: block;
                 position: relative;
             }
+
             .mobileMenu label i {
                 font-style: normal;
                 font-size: 10px;
@@ -507,6 +534,7 @@ textarea,
                 right: 18px;
                 top: 13px;
             }
+
             .mobileMenu [type="radio"] {
                 position: absolute;
                 top: 0;
@@ -528,11 +556,13 @@ textarea,
                 width: 140px;
                 right: 0px;
             }
+
             .content ul {
                 margin: 0;
                 padding: 0;
                 list-style: none;
             }
+
             .content a {
                 color: white;
                 display: block;
@@ -546,10 +576,12 @@ textarea,
                     background-color: inherit;
                 }
             }
-            [type="radio"]:checked ~ label {
+
+            [type="radio"]:checked~label {
                 z-index: 2;
             }
-            [type="radio"]:checked ~ label ~ .content {
+
+            [type="radio"]:checked~label~.content {
                 z-index: 1;
                 opacity: 1;
             }
@@ -562,15 +594,18 @@ textarea,
                 width: 100%;
                 height: 100%;
             }
+
             .close-mobileMenu label {
                 background: #333;
                 color: white;
             }
-            [type="radio"]:checked ~ label ~ .close-mobileMenu {
+
+            [type="radio"]:checked~label~.close-mobileMenu {
                 z-index: 3;
             }
         }
     }
+
     .fullNav {
         display: block;
         //add back in when signout link is used
@@ -603,6 +638,7 @@ textarea,
             border: none;
             margin-bottom: 0px;
         }
+
         &:focus {
             background-color: $yellow;
             color: $black;
@@ -620,11 +656,13 @@ textarea,
     padding-top: 0px;
     padding: 70px 0 0 0;
     border: none;
+
     .govuk-footer__inline-list {
         a {
             font-size: 1rem;
             color: $black;
             text-decoration: none;
+
             &:hover {
                 text-decoration: underline;
             }
@@ -697,11 +735,13 @@ textarea,
 .at-nav {
     border-top: 5px solid #1d70b8;
     padding-top: 25px;
-    .progress-heading{
+
-        display:flex;
+    .progress-heading {
+        display: flex;
     }
-    .progress-case-reference{
+
-        margin-left:10px;
+    .progress-case-reference {
+        margin-left: 10px;
     }
 
 
@@ -743,7 +783,7 @@ textarea,
     margin-left: 20px;
 }
 
-.at-nav__page .govuk-list > li {
+.at-nav__page .govuk-list>li {
     font-size: 16px;
     font-weight: 300;
     font-stretch: normal;
@@ -752,7 +792,7 @@ textarea,
     letter-spacing: normal;
 }
 
-.at-nav__page .govuk-list > li b:before {
+.at-nav__page .govuk-list>li b:before {
     border-left: 4px solid #1d70b8;
     position: relative;
     right: 10px;
@@ -774,19 +814,21 @@ textarea,
 
 .at-nav {
     .sectionCompleteTick {
-        display:inline-block;
+        display: inline-block;
         width: 16px;
-        height:16px;
+        height: 16px;
         background: $darkgrey;
-        border-radius:50%;
+        border-radius: 50%;
-        -ms-transform: rotate(45deg); /* IE 9 */
+        -ms-transform: rotate(45deg);
-        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+        /* IE 9 */
+        -webkit-transform: rotate(45deg);
+        /* Chrome, Safari, Opera */
         transform: rotate(45deg);
         margin-left: -20px;
         margin-right: 5px;
     }
 
-    .sectionCompleteTick:before{
+    .sectionCompleteTick:before {
         content: "";
         position: absolute;
         width: 3px;
@@ -796,7 +838,7 @@ textarea,
         top: 3px;
     }
 
-    .sectionCompleteTick:after{
+    .sectionCompleteTick:after {
         content: "";
         position: absolute;
         width: 3px;
@@ -808,40 +850,81 @@ textarea,
 
 
 
-.app-step-nav__step {
+    .app-step-nav__step {
-    position: relative;
+        position: relative;
-    padding-left: 45px;
+        padding-left: 45px;
-    list-style: none;
+        list-style: none;
-}
-*, .govuk-body, .govuk-body-xs, .govuk-body-s, .govuk-body-m, .govuk-footer, .govuk-heading-xl, .govuk-heading-l, .govuk-heading-m, .govuk-heading-s, .govuk-header-l, .govuk-header-m, .govuk-header__link, .govuk-footer__link, .govuk-link, .govuk-button, .govuk-label, .govuk-select, .govuk-radios__item, .govuk-breadcrumbs__link, .govuk-fieldset__legend--s, .govuk-input, .govuk-textarea, .govuk-panel, .govuk-panel__title, .govuk-warning-text__text, .govuk-hint, .app-cookie-banner, .govuk-error-message.govuk-form-group--error, h1, h2, h3, h4, h5, a {
-    font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
-}
-user agent stylesheet
-li {
-    display: list-item;
-    text-align: -webkit-match-parent;
-}
-user agent stylesheet
-ol {
-    list-style-type: decimal;
-}
-.app-step-nav__step--active:last-child:before, .app-step-nav__step--active .app-step-nav__circle--number, .app-step-nav__step--active:after, .app-step-nav__step--active .app-step-nav__help:after 
-{
-    border-color: $lightgrey !important;
-}
-    .app-step-nav__circle--number{
-        border-color: $lightgrey !important;
     }
-    .app-step-nav__circle-background{
+
-        color:$lightgrey;
+    *,
+    .govuk-body,
+    .govuk-body-xs,
+    .govuk-body-s,
+    .govuk-body-m,
+    .govuk-footer,
+    .govuk-heading-xl,
+    .govuk-heading-l,
+    .govuk-heading-m,
+    .govuk-heading-s,
+    .govuk-header-l,
+    .govuk-header-m,
+    .govuk-header__link,
+    .govuk-footer__link,
+    .govuk-link,
+    .govuk-button,
+    .govuk-label,
+    .govuk-select,
+    .govuk-radios__item,
+    .govuk-breadcrumbs__link,
+    .govuk-fieldset__legend--s,
+    .govuk-input,
+    .govuk-textarea,
+    .govuk-panel,
+    .govuk-panel__title,
+    .govuk-warning-text__text,
+    .govuk-hint,
+    .app-cookie-banner,
+    .govuk-error-message.govuk-form-group--error,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    a {
+        font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
     }
-    .sectionComplete{
+
+    user agent stylesheet li {
+        display: list-item;
+        text-align: -webkit-match-parent;
+    }
+
+    user agent stylesheet ol {
+        list-style-type: decimal;
+    }
+
+    .app-step-nav__step--active:last-child:before,
+    .app-step-nav__step--active .app-step-nav__circle--number,
+    .app-step-nav__step--active:after,
+    .app-step-nav__step--active .app-step-nav__help:after {
+        border-color: $lightgrey  !important;
+    }
+
+    .app-step-nav__circle--number {
+        border-color: $lightgrey  !important;
+    }
+
+    .app-step-nav__circle-background {
+        color: $lightgrey;
+    }
+
+    .sectionComplete {
         .app-step-nav__circle {
             background-color: $lightgrey;
         }
 
-        .app-step-nav__circle-background{
+        .app-step-nav__circle-background {
-            color:$white;
+            color: $white;
             text-shadow: none;
         }
     }
@@ -850,10 +933,12 @@ ol {
 .form-inline-label {
     .inlineFieldset {
         display: flex;
+
         @media screen and (max-width: 900px) {
             display: block;
         }
     }
+
     legend {
         align-self: flex-end;
         margin-right: 20px;
@@ -877,6 +962,7 @@ ol {
 .annex {
     .govuk-summary-list__value {
         width: 33.333333%;
+
         @media screen and (max-width: 900px) {
             width: 100%;
         }
@@ -887,21 +973,25 @@ ol {
 .govuk-summary-list__value,
 .govuk-summary-list__actions {
     padding: 15px 10px 15px 0;
+
     a,
     a:active,
     a:visited {
         color: $blue;
         font-weight: bold;
         text-decoration: none;
+
         &:hover {
             color: $lightblue;
             text-decoration: none;
         }
     }
+
     a:focus {
         border: $yellow solid 3px;
         outline: 3px solid transparent;
     }
+
     @media screen and (min-width: 768px) {
         border-bottom: 1px solid $lightgrey_semi;
     }
@@ -912,6 +1002,7 @@ ol {
     .govuk-summary-list__key:first-of-type {
         width: 40%;
     }
+
     .govuk-summary-list__key:last-of-type {
         width: 20%;
     }
@@ -919,6 +1010,7 @@ ol {
     .govuk-summary-list__value {
         position: relative;
     }
+
     .coverLoadingLink {
         &.downloading {
             background-color: transparent;
@@ -933,6 +1025,7 @@ ol {
             content: " ";
             display: block;
         }
+
         .data-loading-icon {
             left: calc(100% - 40px);
             height: 20px;
@@ -942,16 +1035,16 @@ ol {
 }
 
 
-.progress-save{
+.progress-save {
     padding: 10px 15px !important;
     font-size: 16px;
     float: right;
-    border-color: $midgrey !important;
+    border-color: $midgrey  !important;
-    color: $midgrey !important;
+    color: $midgrey  !important;
 
     &:hover {
-        background-color: $midgrey !important;
+        background-color: $midgrey  !important;
-        color: $white !important;
+        color: $white  !important;
     }
 }
 
@@ -960,9 +1053,11 @@ ol {
         padding: 20px 10px;
     }
 }
+
 .results .govuk-summary-list__key {
     &:last-of-type {
         width: 30%;
+
         &.govuk-summary-list__action {
             width: 10%;
 
@@ -971,6 +1066,7 @@ ol {
             }
         }
     }
+
     button {
         border: none;
         background: none;
@@ -989,6 +1085,7 @@ ol {
             position: relative;
             left: 10px;
         }
+
         &.sortAsc:after {
             width: 0;
             height: 0;
@@ -1014,6 +1111,7 @@ ol {
 
 .results-visually-hidden {
     display: none;
+
     @media screen and (max-width: 900px) {
         display: block;
         font-weight: bold;
@@ -1033,6 +1131,7 @@ ol {
 .appealModule {
     width: 94%;
     min-height: 20vh;
+
     .appealCTA {
         text-align: center;
     }
@@ -1054,7 +1153,7 @@ ol {
     height: 2.5rem;
     margin-top: 0;
     padding: 10px 15px;
-    border: 1px solid $darkgrey !important;
+    border: 1px solid $darkgrey  !important;
     border-radius: 0;
     -webkit-appearance: none;
     appearance: none;
@@ -1064,14 +1163,10 @@ ol {
     line-height: 1.3157894737;
 }
 
-.react-datepicker-popper[data-placement^="top"]
+.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before,
-    .react-datepicker__triangle::before,
+.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before,
-.react-datepicker-popper[data-placement^="bottom"]
+.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after,
-    .react-datepicker__triangle::before,
+.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
-.react-datepicker-popper[data-placement^="top"]
-    .react-datepicker__triangle::after,
-.react-datepicker-popper[data-placement^="bottom"]
-    .react-datepicker__triangle::after {
     left: -20px !important;
 }
 
@@ -1135,13 +1230,7 @@ ul#sharePageLinks.active {
 }
 
 .vo_hidden,
-.page-node-type-global-keyword-search
+.page-node-type-global-keyword-search .main__body-content #block-govwales-content .components__form form .form-item label,
-    .main__body-content
-    #block-govwales-content
-    .components__form
-    form
-    .form-item
-    label,
 .header__components .components__form form .form-item label {
     border: 0;
     clip: rect(0, 0, 0, 0);
@@ -1161,13 +1250,15 @@ ul#sharePageLinks.active {
 }
 
 @media screen and (min-width: 480px) {
-    .main__sharebar > div {
+    .main__sharebar>div {
         margin-bottom: 0;
     }
 }
+
 .block-share.active {
     border: 1px solid #999999;
     background-color: #cccccc;
+
     @media screen and (max-width: 376px) {
         margin-right: 0px;
         margin-bottom: 20px;
@@ -1221,6 +1312,7 @@ ul#sharePageLinks.active {
         background-position: 0 2px;
     }
 }
+
 .block-share ul li a,
 .block-share-top ul li a,
 .page-header__block-share__list ul li a,
@@ -1229,6 +1321,7 @@ ul#sharePageLinks.active {
     background-position: 0 6px;
     height: 22px;
     display: block;
+
     @media (max-width: 376px) {
         background-position: 0 2px;
     }
@@ -1240,12 +1333,14 @@ ul#sharePageLinks.active {
 .page-header__block-share ul li a:hover {
     background-size: 20px 20px;
     background-position: 0 6px;
+
     @media (max-width: 376px) {
         background-position: 0 2px;
     }
 }
 
 @media all and (min-width: 480px) {
+
     .block-share ul li a,
     .block-share-top ul li a,
     .page-header__block-share__list ul li a,
@@ -1373,6 +1468,7 @@ ul#sharePageLinks.active {
     .govuk-panel__title {
         font-size: 36px;
     }
+
     p {
         color: #fff;
     }
@@ -1388,6 +1484,7 @@ ul#sharePageLinks.active {
     .govuk-panel__title {
         font-size: 24px;
     }
+
     .govuk-heading-m {
         color: #fff;
     }
@@ -1411,9 +1508,11 @@ ul#sharePageLinks.active {
     padding: 15px;
     text-align: left;
     margin-bottom: 0px;
+
     .govuk-panel__title {
         font-size: 24px;
     }
+
     .govuk-heading-m {
         color: #fff;
     }
@@ -1486,6 +1585,7 @@ ul#sharePageLinks.active {
         min-width: 25px;
         line-height: 21px;
     }
+
     .dateRight {
         text-align: right;
     }
@@ -1498,7 +1598,7 @@ ul#sharePageLinks.active {
     font-size: 16px;
 }
 
-.accordion__item + .accordion__item {
+.accordion__item+.accordion__item {
     border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
@@ -1565,6 +1665,7 @@ ul#sharePageLinks.active {
     .documents__list__item {
         border-bottom: 1px solid $lightgrey_semi;
         padding: 20px 10px;
+
         &:hover {
             background-color: #e3e3e3;
         }
@@ -1593,6 +1694,7 @@ ul#sharePageLinks.active {
         }
     }
 }
+
 .react-autosuggest__container {
     position: relative;
     width: 100%;
@@ -1696,37 +1798,41 @@ ul#sharePageLinks.active {
         border: 1px solid #666666;
         background-color: $white;
     }
+
     .govuk-radios--small .govuk-radios__item {
         margin-bottom: 20px;
         padding-left: 0px !important;
     }
 
-    .govuk-radios--small
+    .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled)+.govuk-radios__label:before {
-        .govuk-radios__item:hover
-        .govuk-radios__input:not(:disabled)
-        + .govuk-radios__label:before {
         box-shadow: 0 0 0 5px $lightgrey;
     }
+
     .govuk-radios__item {
         background-color: $lightgrey_semi;
+
         &:hover {
             background-color: $lightgrey;
         }
+
         label {
             margin-top: 0px;
             background-color: $lightgrey_semi;
             padding: 20px 20px 20px 50px;
+
             &:before {
                 top: 18px;
                 width: 24px;
                 height: 24px;
                 left: 18px;
             }
+
             &:after {
                 top: 22px;
                 left: 22px;
                 border-width: 8px;
             }
+
             &:hover {
                 background-color: $lightgrey;
             }
@@ -1765,11 +1871,13 @@ ul#sharePageLinks.active {
             @media screen and (max-width: 768px) {
                 &.activePaginationItem {
                     color: $white;
+
                     &:before {
                         content: "";
                         background-image: url(/assets/images/arrow-left--white.svg);
                     }
                 }
+
                 background-color: $black;
                 color: #ffffff;
                 font-size: 20px;
@@ -1779,6 +1887,7 @@ ul#sharePageLinks.active {
                 -moz-transition: all 0.2s ease-in;
                 transition: all 0.2s ease-in;
                 width: max-content;
+
                 &:link {
                     color: $white;
                 }
@@ -1789,9 +1898,11 @@ ul#sharePageLinks.active {
     .paginationContainer {
         text-align: center;
         font-size: 20px;
+
         .activePaginationItem {
             color: #b80d0d;
         }
+
         @media screen and (max-width: 768px) {
             display: none;
         }
@@ -1814,19 +1925,23 @@ ul#sharePageLinks.active {
 
             &.activePaginationItem {
                 color: #b80d0d;
+
                 &:after {
                     content: "";
                     background-image: url(/assets/images/arrow-right--active.svg);
                 }
             }
+
             @media screen and (max-width: 768px) {
                 &.activePaginationItem {
                     color: #ffffff;
+
                     &:after {
                         content: "";
                         background-image: url(/assets/images/arrow-right--white.svg);
                     }
                 }
+
                 background-color: $black;
                 color: #ffffff;
                 font-size: 20px;
@@ -1837,6 +1952,7 @@ ul#sharePageLinks.active {
                 transition: all 0.2s ease-in;
                 margin-left: 20px;
                 width: max-content;
+
                 &:link {
                     color: $white;
                 }
@@ -1844,9 +1960,11 @@ ul#sharePageLinks.active {
         }
     }
 }
+
 .mobilePageCount {
     margin-top: 40px;
     margin-bottom: 20px;
+
     @media screen and (min-width: 768px) {
         display: none;
     }
@@ -1892,7 +2010,7 @@ ul#sharePageLinks.active {
     }
 
     &.watched_link {
-        color: $black !important;
+        color: $black  !important;
         background-color: $white;
     }
 }
@@ -1910,6 +2028,7 @@ ul#sharePageLinks.active {
     overflow: hidden;
     outline: 0;
     top: 30%;
+
     @media screen and (min-width: 768px) {
         top: 35%;
     }
@@ -1948,6 +2067,7 @@ fade {
     margin: auto 1rem;
     pointer-events: none;
     z-index: 1050;
+
     @media screen and (min-width: 768px) {
         width: auto;
     }
@@ -1963,9 +2083,11 @@ fade {
 .modal.fade.show {
     display: block;
 }
+
 .modal.show .modal-dialog {
     transform: none;
 }
+
 .modal.fade .modal-dialog {
     transition: transform 0.3s ease-out;
 }
@@ -2022,20 +2144,21 @@ fade {
 
 // record selection
 
-.documentFilters{
+.documentFilters {
     @media screen and (min-width: 768px) {
-        display:flex;
+        display: flex;
         justify-content: space-between;
     }
 
 }
 
-#recordDocumentTypeSelect{
+#recordDocumentTypeSelect {
     text-align: left;
 
     @media screen and (min-width: 768px) {
         text-align: right;
     }
+
     select {
         margin-right: 10px;
         margin-left: 10px;
@@ -2049,6 +2172,7 @@ fade {
     @media screen and (min-width: 768px) {
         text-align: right;
     }
+
     select {
         margin-right: 10px;
         margin-left: 10px;
@@ -2064,3 +2188,69 @@ fade {
     flex-direction: row;
     align-items: center;
 }
+
+
+//notice banner
+
+.noticebanner {
+    background: $lightgrey_semi;
+    border-left: 10px solid $blue;
+    color: $black;
+    display: flex;
+    justify-content: space-between;
+    font-size: 18px;
+    padding: 25px 30px;
+    margin-top: 20px;
+
+
+
+    .govuk-warning-text__icon {
+        @media screen and (min-width: 768px) {
+            margin-top: 0px;
+        }
+
+        border-color: $blue;
+        background-color: $blue;
+        min-width: 25px;
+        min-height: 25px;
+        font-size: 20px;
+        line-height: 20px;
+        left: 20px;
+    }
+
+    .govuk-warning-text__text {
+        padding-left: 35px;
+        padding-right: 10px;
+        color: $black;
+        font-weight: normal;
+        font-size: 18px;
+
+    }
+
+    .hideNotice span {
+        font-size: 14px;
+        color: $black;
+        font-weight: bold;
+        cursor: pointer;
+
+        a {
+            text-decoration: underline;
+            color: $black;
+            padding-right: 10px;
+
+        }
+
+        &:hover {
+            color: $charcoal
+        }
+
+        &:after {
+            content: "\00d7";
+            font-size: 20px;
+            position: relative;
+            top: 3px;
+        }
+    }
+
+
+}