From aaaf889139f199c17d90b7e0da95e7e119b95865 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Thu, 14 Oct 2021 19:35:32 +0100
Subject: [PATCH] add cookie consent manger & updated cookie banner

---
 components/account/registerComplete.js  |  19 +-
 components/breadcrumbs.js               |   9 +
 components/cookieBanner.js              | 171 ++++++---
 components/cookiemanager/index.js       | 455 ++++++++++++++++++++++++
 components/footer.js                    |  19 +-
 components/homepage/login.js            |   1 -
 components/main.js                      |   4 +-
 components/search/searchresults.js      |   1 -
 i18n.json                               |   4 +
 locales/cy/common.json                  |   1 +
 locales/cy/cookies.json                 |  34 ++
 locales/en/common.json                  |   1 +
 locales/en/cookies.json                 |  34 ++
 package.json                            |   3 +-
 pages/account/changepassword.js         |   2 +-
 pages/account/forgottenpassword.js      |   2 +-
 pages/account/forgottenuser.js          |   2 +-
 pages/account/personaldetails.js        |   2 +-
 pages/account/register.js               |   2 +-
 pages/advancedsearch.js                 |   2 +-
 pages/advancedsearchresults.js          |   2 +-
 pages/case.js                           |   2 +-
 pages/dns/application-process.js        |   2 +-
 pages/dns/application-view.js           |   2 +-
 pages/dns/applications.js               |   2 +-
 pages/dns/contact-us.js                 |   2 +-
 pages/dns/help.js                       |   2 +-
 pages/dns/index.js                      |   2 +-
 pages/dnsapplications.js                |   2 +-
 pages/dnsdetails.js                     |   2 +-
 pages/help/cookies.js                   |  43 +++
 pages/index.js                          |   1 -
 pages/myportal/advancedsearch.js        |   2 +-
 pages/myportal/advancedsearchresults.js |   2 +-
 pages/myportal/case.js                  |   2 +-
 pages/myportal/index.js                 |  12 +-
 pages/myportal/searchresults.js         |   2 +-
 pages/myportal/viewall.js               |   2 +-
 pages/newappeal/[appealtypes].js        |   2 +-
 pages/newappeal/index.js                |   1 -
 pages/newappeal/planningappeal.js       |   2 +-
 pages/newappeal/selectappeal.js         |   2 +-
 pages/representation.js                 |   2 +-
 pages/searchresults.js                  |   1 -
 pages/viewall.js                        |   2 +-
 store/accountDetails/action.js          |  11 +-
 store/accountDetails/reducer.js         |   6 +
 styles/sass/welshgov/_application.scss  |  54 +++
 48 files changed, 818 insertions(+), 119 deletions(-)
 create mode 100644 components/cookiemanager/index.js
 create mode 100644 locales/cy/cookies.json
 create mode 100644 locales/en/cookies.json
 create mode 100644 pages/help/cookies.js

diff --git a/components/account/registerComplete.js b/components/account/registerComplete.js
index 2c494ee1..0e187cac 100644
--- a/components/account/registerComplete.js
+++ b/components/account/registerComplete.js
@@ -88,15 +88,16 @@ const RegisterComplete = (props) => {
             </p>
 
             <p className="govuk-body">
-                <a
-                    href="/"
-                    className="govuk-link"
-                    onClick={() => {
-                        setLogout(), window.localStorage.clear();
-                    }}
-                >
-                    Login to My Portal
-                </a>
+                <Link href="/">
+                    <a
+                        className="govuk-link"
+                        onClick={() => {
+                            setLogout(), window.localStorage.clear();
+                        }}
+                    >
+                        Login to My Portal
+                    </a>
+                </Link>
             </p>
         </>
     ) : (
diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index a5f087b2..a6477415 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -533,6 +533,15 @@ const Breadcrumbs = (props) => {
                         ) : (
                             ""
                         )}
+                        {router.pathname == "/help/cookies" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("cookies:cookie-breadcrumb")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
                         {!_.isEmpty(slug) ? (
                             <>
                                 <li className="govuk-breadcrumbs__list-item">
diff --git a/components/cookieBanner.js b/components/cookieBanner.js
index ba7a7603..5a921075 100644
--- a/components/cookieBanner.js
+++ b/components/cookieBanner.js
@@ -1,74 +1,127 @@
 import CookieConsent from "react-cookie-consent";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import cookie from "cookie-cutter";
+import { useState, useEffect } from "react";
 
 const CookieBanner = () => {
     let { t, lang } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
+
+    const [bannerVisible, setBannerVisible] = useState(true);
+
+    const accept = () => {
+        let now = new Date();
+        let expDate = new Date(now);
+
+        expDate.setDate(now.getDate() + 365);
+
+        console.log(expDate);
+        cookie.set("planning_casework", true, {
+            expires: expDate,
+        });
+        setBannerVisible(false);
+    };
+
     return (
-        <CookieConsent
-            style={{
-                position: "inherit",
-                background: "#eeeeee",
-                display: "block",
-            }}
-            containerClasses="app-cookie-banner"
-            buttonClasses="cookies-banner__button"
-            buttonWrapperClasses="govuk-width-container consentBanner"
-            declineButtonClasses="cookies-banner__button"
-            buttonText={t("common:cookie-banner-accept")}
-            declineButtonText={t("common:cookie-banner-decline")}
-            disableStyles={true}
-            enableDeclineButton={true}
-            flipButtons={true}
-            hideOnAccept={true}
-            cookieName="planning_casework"
-        >
-            <div className="app-cookie-banner">
-                <div
-                    id="global-cookie-message"
-                    className="govuk-clearfix"
-                    data-module="cookie-banner"
-                    role="region"
-                    aria-label="cookie banner"
-                    data-nosnippet=""
+        <>
+            {bannerVisible ? (
+                <CookieConsent
+                    style={{
+                        position: "inherit",
+                        background: "#eeeeee",
+                        display: "block",
+                    }}
+                    containerClasses="app-cookie-banner"
+                    buttonClasses="cookies-banner__button"
+                    buttonWrapperClasses="govuk-width-container consentBanner hidden"
+                    declineButtonClasses="cookies-banner__button"
+                    buttonText={t("common:cookie-banner-accept")}
+                    declineButtonText={t("common:cookie-banner-decline")}
+                    disableStyles={true}
+                    enableDeclineButton={true}
+                    flipButtons={true}
+                    hideOnAccept={true}
+                    cookieName="planning_casework"
                 >
-                    <div className="govuk-width-container">
-                        <div className="govuk-grid-row">
-                            <div className="govuk-grid-column-two-thirds">
-                                <div className="">
-                                    <p className="cookies-banner__description">
-                                        {t("common:cookie-banner-line-1")}
-                                    </p>
-                                    <ul className="cookies-banner__description">
-                                        <li>
-                                            {" "}
-                                            {t(
-                                                "common:cookie-banner-list-item-1"
-                                            )}
-                                        </li>
-                                    </ul>
-                                    <p className="cookies-banner__description">
-                                        {t("common:cookie-banner-line-2")}
-                                    </p>
-                                    <ul className="cookies-banner__description">
-                                        <li>
-                                            {t(
-                                                "common:cookie-banner-list-item-2"
-                                            )}
-                                        </li>
-                                        <li>
-                                            {t(
-                                                "common:cookie-banner-list-item-3"
-                                            )}
-                                        </li>
-                                    </ul>
+                    <div className="app-cookie-banner">
+                        <div
+                            id="global-cookie-message"
+                            className="govuk-clearfix"
+                            data-module="cookie-banner"
+                            role="region"
+                            aria-label="cookie banner"
+                            data-nosnippet=""
+                        >
+                            <div className="govuk-width-container">
+                                <div className="govuk-grid-row">
+                                    <div className="govuk-grid-column-two-thirds">
+                                        <div className="">
+                                            <p className="cookies-banner__description">
+                                                {t(
+                                                    "common:cookie-banner-line-1"
+                                                )}
+                                            </p>
+                                            <ul className="cookies-banner__description">
+                                                <li>
+                                                    {" "}
+                                                    {t(
+                                                        "common:cookie-banner-list-item-1"
+                                                    )}
+                                                </li>
+                                            </ul>
+                                            <p className="cookies-banner__description">
+                                                {t(
+                                                    "common:cookie-banner-line-2"
+                                                )}
+                                            </p>
+                                            <ul className="cookies-banner__description">
+                                                <li>
+                                                    {t(
+                                                        "common:cookie-banner-list-item-2"
+                                                    )}
+                                                </li>
+                                                <li>
+                                                    {t(
+                                                        "common:cookie-banner-list-item-3"
+                                                    )}
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
+                        <div className="govuk-width-container consentBannerShow">
+                            <button
+                                className="cookies-banner__button"
+                                id="rcc-confirm-button"
+                                aria-label="Accept cookies"
+                                onClick={() => {
+                                    accept();
+                                }}
+                            >
+                                {t("common:cookie-banner-accept")}
+                            </button>
+
+                            <Link href="/help/cookies">
+                                <a
+                                    className="cookies-banner__button govuk-link--no-underline"
+                                    id="rcc-decline-button"
+                                    aria-label="Decline cookies"
+                                >
+                                    {t("common:cookie-banner-change-settings")}
+                                </a>
+                            </Link>
+                        </div>
                     </div>
-                </div>
-            </div>
-        </CookieConsent>
+                </CookieConsent>
+            ) : (
+                ""
+            )}
+        </>
     );
 };
 
diff --git a/components/cookiemanager/index.js b/components/cookiemanager/index.js
new file mode 100644
index 00000000..49b8e2f7
--- /dev/null
+++ b/components/cookiemanager/index.js
@@ -0,0 +1,455 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext, useEffect, useState } from "react";
+import useTranslation from "next-translate/useTranslation";
+import { Field, reduxForm } from "redux-form";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
+import { connect } from "react-redux";
+
+import cookie from "cookie-cutter";
+
+const CookieManagementMain = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { handleSubmit } = props;
+
+    const onHandleSubmit = (values) => {
+        Object.assign(values, {
+            "essential": "accepted",
+            "usage": usageState,
+            "communications": communicationsState,
+            "settings": settingsState,
+        });
+
+        let now = new Date();
+        let expDate = new Date(now);
+        expDate.setDate(now.getDate() + 365);
+
+        cookie.set("pinsCookiePolicy", JSON.stringify(values).toString(), {
+            expires: expDate,
+        });
+        cookie.set("planning_casework", true, {
+            expires: expDate,
+        });
+    };
+
+    let cookieCheck = parseCookies();
+
+    let cookieObj =
+        typeof cookieCheck.pinsCookiePolicy == "undefined"
+            ? {}
+            : JSON.parse(cookieCheck.pinsCookiePolicy);
+
+    const [usageState, setUsageState] = useState(
+        typeof cookieCheck.pinsCookiePolicy == "undefined"
+            ? null
+            : cookieObj.usage
+    );
+    const [communicationsState, setCommunicationsState] = useState(
+        typeof cookieCheck.pinsCookiePolicy == "undefined"
+            ? null
+            : cookieObj.communications
+    );
+    const [settingsState, setSettingsState] = useState(
+        typeof cookieCheck.pinsCookiePolicy == "undefined"
+            ? null
+            : cookieObj.settings
+    );
+
+    let updateObj = (key, value) => {
+        switch (key) {
+            case "usage":
+                setUsageState(value);
+                break;
+            case "communications":
+                setCommunicationsState(value);
+                break;
+            case "settings":
+                setSettingsState(value);
+                break;
+            default:
+            // code block
+        }
+    };
+
+    const CookieForm = () => {
+        return (
+            <main
+                className="govuk-main-wrapper govuk-!-padding-top-4 govuk-main-wrapper--auto-spacing"
+                id="main-content"
+                role="main"
+            >
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <h1 className="govuk-heading-xl govuk-!-margin-bottom-5">
+                            {t("cookies:cookie-title-heading")}
+                        </h1>
+                        <hr className="govuk-section-break govuk-section-break--visible" />
+                        {typeof cookieCheck.pinsCookiePolicy == "undefined" ? (
+                            <>
+                                <div className="govuk-inset-text paragraph--type--call-out-message">
+                                    <h2 className="govuk-heading-l">
+                                        {t("cookies:cookie-not-saved-heading")}
+                                    </h2>
+                                    <p className="govuk-body">
+                                        {t(
+                                            "cookies:cookie-not-saved-paragraph"
+                                        )}
+                                    </p>
+                                </div>
+                            </>
+                        ) : (
+                            ""
+                        )}
+
+                        <div
+                            className={
+                                typeof cookieCheck.pinsCookiePolicy !=
+                                "undefined"
+                                    ? "govuk-body govuk-!-margin-top-5"
+                                    : "govuk-body"
+                            }
+                        >
+                            <p className="govuk-body">
+                                {t("cookies:cookie-intro-paragraph-1")}
+                            </p>
+                            <p className="govuk-body">
+                                {t("cookies:cookie-intro-paragraph-2")}
+                            </p>
+
+                            <p className="govuk-body">
+                                {t("cookies:cookie-intro-paragraph-3")}
+                            </p>
+                        </div>
+                        <div id="cookies-js">
+                            <form onSubmit={handleSubmit(onHandleSubmit)}>
+                                <div>
+                                    <h3 className="govuk-heading-l">
+                                        {t("cookies:cookie-settings-heading")}
+                                    </h3>
+                                </div>
+                                <fieldset className="govuk-fieldset">
+                                    <legend className="govuk-fieldset__legend">
+                                        <h4 className="govuk-!-font-size-27">
+                                            {t(
+                                                "cookies:cookie-settings-usage-heading"
+                                            )}
+                                        </h4>
+                                        <p className="govuk-body">
+                                            {t(
+                                                "cookies:cookie-settings-usage-paragraph-1"
+                                            )}
+                                        </p>
+
+                                        <ul className="govuk-list govuk-list--bullet">
+                                            <li>
+                                                {t(
+                                                    "cookies:cookie-settings-usage-list-item-1"
+                                                )}
+                                            </li>
+                                            <li>
+                                                {t(
+                                                    "cookies:cookie-settings-usage-list-item-2"
+                                                )}
+                                            </li>
+
+                                            <li>
+                                                {t(
+                                                    "cookies:cookie-settings-usage-list-item-3"
+                                                )}
+                                            </li>
+                                        </ul>
+                                        <p className="govuk-body">
+                                            {t(
+                                                "cookies:cookie-settings-usage-list-item-4"
+                                            )}
+                                        </p>
+                                        <div className="govuk-radios govuk-radios--small">
+                                            <div className="govuk-radios__item">
+                                                <input
+                                                    name="usage"
+                                                    className="govuk-radios__input"
+                                                    id="usage-1"
+                                                    component="input"
+                                                    type="radio"
+                                                    value="revoked"
+                                                    checked={
+                                                        usageState === "revoked"
+                                                    }
+                                                    onChange={() => {
+                                                        updateObj(
+                                                            "usage",
+                                                            "revoked"
+                                                        );
+                                                    }}
+                                                />
+                                                <label
+                                                    className="govuk-label govuk-radios__label"
+                                                    htmlFor="usage-1"
+                                                >
+                                                    {t(
+                                                        "cookies:cookie-settings-usage-radio-1-label"
+                                                    )}
+                                                </label>
+                                            </div>
+                                            <div className="govuk-radios__item">
+                                                <input
+                                                    className="govuk-radios__input"
+                                                    id="usage-2"
+                                                    name="usage"
+                                                    type="radio"
+                                                    value="accepted"
+                                                    component="input"
+                                                    checked={
+                                                        usageState ===
+                                                        "accepted"
+                                                    }
+                                                    onChange={() => {
+                                                        updateObj(
+                                                            "usage",
+                                                            "accepted"
+                                                        );
+                                                    }}
+                                                />
+                                                <label
+                                                    className="govuk-label govuk-radios__label"
+                                                    htmlFor="usage-2"
+                                                >
+                                                    {t(
+                                                        "cookies:cookie-settings-usage-radio-2-label"
+                                                    )}
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </legend>
+                                </fieldset>
+                                <fieldset className="govuk-fieldset">
+                                    <legend className="govuk-fieldset__legend">
+                                        <h4 className="govuk-!-font-size-27">
+                                            {t(
+                                                "cookies:cookie-settings-communications-heading"
+                                            )}
+                                        </h4>
+                                        <p className="govuk-body">
+                                            {t(
+                                                "cookies:cookie-settings-communications-paragraph-1"
+                                            )}
+                                        </p>
+                                    </legend>
+                                    <div className="govuk-radios govuk-radios--small">
+                                        <div className="govuk-radios__item">
+                                            <input
+                                                className="govuk-radios__input"
+                                                id="communications-1"
+                                                name="communications"
+                                                type="radio"
+                                                value="revoked"
+                                                component="input"
+                                                checked={
+                                                    communicationsState ===
+                                                    "revoked"
+                                                }
+                                                onChange={() => {
+                                                    updateObj(
+                                                        "communications",
+                                                        "revoked"
+                                                    );
+                                                }}
+                                            />
+                                            <label
+                                                className="govuk-label govuk-radios__label"
+                                                htmlFor="communications-1"
+                                            >
+                                                {t(
+                                                    "cookies:cookie-settings-communications-radio-1-label"
+                                                )}
+                                            </label>
+                                        </div>
+                                        <div className="govuk-radios__item">
+                                            <input
+                                                className="govuk-radios__input"
+                                                id="communications-2"
+                                                name="communications"
+                                                type="radio"
+                                                value="accepted"
+                                                component="input"
+                                                checked={
+                                                    communicationsState ===
+                                                    "accepted"
+                                                }
+                                                onChange={() => {
+                                                    updateObj(
+                                                        "communications",
+                                                        "accepted"
+                                                    );
+                                                }}
+                                            />
+                                            <label
+                                                className="govuk-label govuk-radios__label"
+                                                htmlFor="communications-2"
+                                            >
+                                                {t(
+                                                    "cookies:cookie-settings-communications-radio-2-label"
+                                                )}
+                                            </label>
+                                        </div>
+                                    </div>
+                                </fieldset>
+
+                                <fieldset className="govuk-fieldset">
+                                    <legend className="govuk-fieldset__legend">
+                                        <h4 className="govuk-!-font-size-27">
+                                            {t(
+                                                "cookies:cookie-settings-settings-heading"
+                                            )}
+                                        </h4>
+                                        <p className="govuk-body">
+                                            {t(
+                                                "cookies:cookie-settings-settings-paragraph-1"
+                                            )}
+                                        </p>
+                                    </legend>
+                                    <div className="govuk-radios govuk-radios--small">
+                                        <div className="govuk-radios__item">
+                                            <input
+                                                className="govuk-radios__input"
+                                                id="settings-1"
+                                                name="settings"
+                                                type="radio"
+                                                value="revoked"
+                                                component="input"
+                                                checked={
+                                                    settingsState === "revoked"
+                                                }
+                                                onChange={() => {
+                                                    updateObj(
+                                                        "settings",
+                                                        "revoked"
+                                                    );
+                                                }}
+                                            />
+                                            <label
+                                                className="govuk-label govuk-radios__label"
+                                                htmlFor="settings-1"
+                                            >
+                                                {t(
+                                                    "cookies:cookie-settings-settings-radio-1-label"
+                                                )}
+                                            </label>
+                                        </div>
+                                        <div className="govuk-radios__item">
+                                            <input
+                                                className="govuk-radios__input"
+                                                id="settings-2"
+                                                name="settings"
+                                                type="radio"
+                                                value="accepted"
+                                                component="input"
+                                                checked={
+                                                    settingsState === "accepted"
+                                                }
+                                                onChange={() => {
+                                                    updateObj(
+                                                        "settings",
+                                                        "accepted"
+                                                    );
+                                                }}
+                                            />
+                                            <label
+                                                className="govuk-label govuk-radios__label"
+                                                htmlFor="settings-2"
+                                            >
+                                                {t(
+                                                    "cookies:cookie-settings-settings-radio-2-label"
+                                                )}
+                                            </label>
+                                        </div>
+                                    </div>
+                                </fieldset>
+                                <fieldset className="govuk-fieldset">
+                                    <legend className="govuk-fieldset__legend">
+                                        <h4 className="govuk-!-font-size-27">
+                                            {t(
+                                                "cookies:cookie-settings-essential-heading"
+                                            )}
+                                        </h4>
+                                        <p className="govuk-body">
+                                            {t(
+                                                "cookies:cookie-settings-essential-paragraph-1"
+                                            )}
+                                        </p>
+                                        <ul className="govuk-list govuk-list--bullet">
+                                            <li>
+                                                {t(
+                                                    "cookies:cookie-settings-essential-list-item-1"
+                                                )}
+                                            </li>
+                                            <li>
+                                                {t(
+                                                    "cookies:cookie-settings-essential-list-item-2"
+                                                )}
+                                            </li>
+                                        </ul>
+                                        <p className="govuk-body">
+                                            {t(
+                                                "cookies:cookie-settings-essential-paragraph-2"
+                                            )}
+                                        </p>
+                                        <p className="govuk-body">
+                                            <a
+                                                className="govuk-link govuk-link--no-underline govuk-!-font-weight-bold"
+                                                href={t(
+                                                    "cookies:cookie-settings-essential-link"
+                                                )}
+                                            >
+                                                {t(
+                                                    "cookies:cookie-settings-essential-link-label"
+                                                )}
+                                            </a>
+                                        </p>
+                                    </legend>
+                                </fieldset>
+                                <div>
+                                    <button
+                                        type="submit"
+                                        className="govuk-button "
+                                    >
+                                        {t(
+                                            "cookies:cookie-settings-save-button-label"
+                                        )}
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        );
+    };
+
+    return (
+        <>
+            <CookieForm />
+        </>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        initialValues: {
+            usage: state.accountDetails.cookieObj.usage,
+            communications: state.accountDetails.cookieObj.communications,
+            settings: state.accountDetails.cookieObj.settings,
+        },
+    };
+};
+
+export default connect(mapStateToProps)(
+    reduxForm({
+        form: "CookieManagementForm",
+        enableReinitialize: true,
+    })(CookieManagementMain)
+);
diff --git a/components/footer.js b/components/footer.js
index dd26c902..4ebeaba0 100644
--- a/components/footer.js
+++ b/components/footer.js
@@ -175,15 +175,16 @@ export default function Footer(props) {
                                         </a>
                                     </li>
                                     <li className="govuk-footer__inline-list-item">
-                                        <a
-                                            href="https://gov.wales/help/cookies"
-                                            id="aCookies"
-                                            className="govuk-footer__link"
-                                            target="_blank"
-                                            rel="noreferrer"
-                                        >
-                                            {t("common:footer-cookies-link")}
-                                        </a>
+                                        <Link href="/help/cookies">
+                                            <a
+                                                id="aCookies"
+                                                className="govuk-footer__link"
+                                            >
+                                                {t(
+                                                    "common:footer-cookies-link"
+                                                )}
+                                            </a>
+                                        </Link>
                                     </li>
 
                                     <li className="govuk-footer__inline-list-item">
diff --git a/components/homepage/login.js b/components/homepage/login.js
index 44b75db7..09c9b6a6 100644
--- a/components/homepage/login.js
+++ b/components/homepage/login.js
@@ -7,7 +7,6 @@ import { Field, reduxForm } from "redux-form";
 import LoadingOverlay from "react-loading-overlay";
 import { getLogin } from "../../actions";
 import { setLoggedInUserId } from "../../store/accountDetails/action";
-import Cookies from "cookies";
 
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
diff --git a/components/main.js b/components/main.js
index 77401b4b..50a6c56f 100644
--- a/components/main.js
+++ b/components/main.js
@@ -28,8 +28,8 @@ export default function Home({ children, pages }) {
                         <CaseSearch />
                         <CaseComment />
                         <Dns />
-                        <Login />
-                        {/* <Inspectorate /> */}
+                        {/*   <Login />
+                        <Inspectorate /> */}
                     </div>
                 </div>
             </div>
diff --git a/components/search/searchresults.js b/components/search/searchresults.js
index f012416d..0e057732 100644
--- a/components/search/searchresults.js
+++ b/components/search/searchresults.js
@@ -55,7 +55,6 @@ const SearchResults = (props) => {
                     return (
                         <div className="govuk-summary-list__row" key={key}>
                             <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
-                                {router.pathname.indexOf("myportal")}
                                 <Link
                                     href={
                                         router.locale == "cy"
diff --git a/i18n.json b/i18n.json
index 18e1e4a0..554118f4 100644
--- a/i18n.json
+++ b/i18n.json
@@ -86,6 +86,10 @@
          "search",
          "dnsCommon",
          "dnsApplications"
+      ],
+      "/help/cookies": [
+         "common",
+         "cookies"
       ]
    }
 }
\ No newline at end of file
diff --git a/locales/cy/common.json b/locales/cy/common.json
index fe35fffd..bc71af01 100644
--- a/locales/cy/common.json
+++ b/locales/cy/common.json
@@ -46,5 +46,6 @@
   "cookie-banner-list-item-3": "i deilwra cyfathrebu",
   "cookie-banner-decline": "Rwy'n dirywio",
   "cookie-banner-accept": "Derbyn cwcis",
+  "cookie-banner-change-settings": "Newid gosodiadau cwcis",
   "drop-down-select": "Dewiswch..."
 }
\ No newline at end of file
diff --git a/locales/cy/cookies.json b/locales/cy/cookies.json
new file mode 100644
index 00000000..b97a611f
--- /dev/null
+++ b/locales/cy/cookies.json
@@ -0,0 +1,34 @@
+{
+  "cookie-breadcrumb": "Cwcis",
+  "cookie-title-heading": "Cwcis ar LLYW.CYMRU",
+  "cookie-not-saved-heading": "Nid yw eich dewisiadau cwcis wedi eu cadw eto",
+  "cookie-not-saved-paragraph": "Mae LLYW.CYMRU yn gosod cwcis pan fyddwch yn ymweld â'n gwefan. Gallwch newid y gosodiadau hyn i'ch dewis chi. Mae angen i chi gadw'r dudalen hon gyda'ch dewisiadau newydd.",
+  "cookie-intro-paragraph-1": "Ffeiliau sy'n cael eu cadw ar eich ffôn, tabled neu gyfrifiadur pan fyddwch yn ymweld â gwefan yw cwcis.",
+  "cookie-intro-paragraph-2": "Rydym yn defnyddio cwcis i storio gwybodaeth ynghylch sut yr ydych yn defnyddio gwefan LLYW.CYMRU, megis y tudalennau yr ydych yn ymweld â nhw. Nid yw'r cwcis hyn yn cael eu defnyddio i'ch adnabod chi'n bersonol.",
+  "cookie-intro-paragraph-3": "Rydym yn defnyddio 4 cwci gwahanol. Gallwch ddewis pa fath o gwcis rydych yn hapus i ni eu defnyddio.",
+  "cookie-settings-heading": "Gosodiadau cwcis",
+  "cookie-settings-usage-heading": "Cwcis sy'n mesur defnydd y wefan",
+  "cookie-settings-usage-paragraph-1": "Rydym yn defnyddio Google Analytics i fesur sut ydych yn defnyddio'r wefan er mwyn i ni ei wella yn seiliedig ar angen defnyddwyr. Mae Google Analytics yn gosod cwcis sy'n storio gwybodaeth wedi anonymeiddio ynghylch:",
+  "cookie-settings-usage-list-item-1": "sut ddaethoch chi i'r safle",
+  "cookie-settings-usage-list-item-2": "y tudalennau yr ydych yn ymweld â nhw ar LLYW.CYMRU a gwasanaethau digidol y llywodraeth, a pha mor hir yr ydych chi'n treulio ar bob tudalen",
+  "cookie-settings-usage-list-item-3": "beth ydych chi'n clicio arno wrth ymweld â'r safle",
+  "cookie-settings-usage-list-item-4": "Nid ydym yn caniatâu i Google ddefnyddio na rhannu'r data ynghylch sut yr ydych yn defnyddio'r safle.",
+  "cookie-settings-usage-radio-1-label": "Peidiwch â defnyddio cwcis sy'n mesur fy nefnydd o'r wefan",
+  "cookie-settings-usage-radio-2-label": "Defnyddiwch cwcis sy'n mesur fy nefnydd o'r wefan",
+  "cookie-settings-communications-heading": "Cwcis sy'n helpu gyda chyfathrebu a marchnata",
+  "cookie-settings-communications-paragraph-1": "Gall y cwcis hyn gael eu gosod gan wefannau trydydd parti a gwneud pethau fel mesur sut rydych yn gwylio fideos YouTube ar LLYW.CYMRU.",
+  "cookie-settings-communications-radio-1-label": "Peidiwch â defnyddio cwcis sy'n helpu gyda chyfathrebu a marchnata",
+  "cookie-settings-communications-radio-2-label": "Defnyddiwch cwcis sy'n cofio fy ngosodiadau ar y safle",
+  "cookie-settings-settings-heading": "Cwcis sy'n cofio'ch gosodiadau",
+  "cookie-settings-settings-paragraph-1": "Mae'r cwcis hyn yn gwneud pethau fel cofio eich dewisiadau, i bersonol eich profiad o ddefnyddio'r safle.",
+  "cookie-settings-settings-radio-1-label": "Peidiwch â defnyddio cwcis sy'n cofio fy ngosodiadau ar y safle",
+  "cookie-settings-settings-radio-2-label": "Defnyddiwch cwcis sy'n cofio fy ngosodiadau ar y safle",
+  "cookie-settings-essential-heading": "Cwcis sy'n angenrheidiol",
+  "cookie-settings-essential-paragraph-1": "Mae'r cwcis hyn yn hanfodol ar gyfer pethau fel:",
+  "cookie-settings-essential-list-item-1": "cofio'r hysbysiadau yr ydych wedi eu gweld fel ein bod ni ddim yn eu dangos i chi eto",
+  "cookie-settings-essential-list-item-2": "cofio eich lle mewn ffurflen (er enghraifft cais am drwydded)",
+  "cookie-settings-essential-paragraph-2": "Bydd angen i'r cwcis yma fod ymlaen drwy'r amser.",
+  "cookie-settings-essential-link": "https://llyw.cymru/manylion-am-gwcis-ar-llywcymru",
+  "cookie-settings-essential-link-label": "Mwy o wybodaeth am cwcis ar LLYW.CYMRU.",
+  "cookie-settings-save-button-label": "Cadw newidiadau"
+}
\ No newline at end of file
diff --git a/locales/en/common.json b/locales/en/common.json
index 26c6ed58..8f83a6c3 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -46,5 +46,6 @@
   "cookie-banner-list-item-3": "tailor communications",
   "cookie-banner-decline": "I decline",
   "cookie-banner-accept": "Accept cookies",
+  "cookie-banner-change-settings": "Change cookie settings",
   "drop-down-select": "Select..."
 }
\ No newline at end of file
diff --git a/locales/en/cookies.json b/locales/en/cookies.json
new file mode 100644
index 00000000..aa9b3771
--- /dev/null
+++ b/locales/en/cookies.json
@@ -0,0 +1,34 @@
+{
+  "cookie-breadcrumb": "Cookies",
+  "cookie-title-heading": "Cookies on GOV.WALES",
+  "cookie-not-saved-heading": "Your cookie settings have not yet been saved",
+  "cookie-not-saved-paragraph": "GOV.WALES sets cookies when you visit  our website. You can choose to change these settings to your own preferences. You need to save this page with your new  choices.",
+  "cookie-intro-paragraph-1": "Cookies are files saved on your phone, tablet or  computer when you visit a website.",
+  "cookie-intro-paragraph-2": "We use cookies to store information about how  you use the GOV.WALES website, such as the pages  you visit. These cookies are not used to  identify you personally.",
+  "cookie-intro-paragraph-3": "We use 4 types of cookie. You can choose which  cookies you're happy for us to use.",
+  "cookie-settings-heading": "Cookie settings",
+  "cookie-settings-usage-heading": "Cookies that measure website use",
+  "cookie-settings-usage-paragraph-1": "We use Google Analytics to measure how you use the website so we can improve it based on user needs. Google Analytics sets cookies that store anonymised information about",
+  "cookie-settings-usage-list-item-1": "how you got to the site",
+  "cookie-settings-usage-list-item-2": "the pages you visit on GOV.WALES and government digital services, and how long you spend on each page",
+  "cookie-settings-usage-list-item-3": "what you click on while you're visiting the site",
+  "cookie-settings-usage-list-item-4": "We do not allow Google to use or share the data about how you use this site.",
+  "cookie-settings-usage-radio-1-label": "Do not use cookies that measure my website use",
+  "cookie-settings-usage-radio-2-label": "Use cookies that measure my website use",
+  "cookie-settings-communications-heading": "Cookies that help with communications and marketing",
+  "cookie-settings-communications-paragraph-1": "These cookies may be set by thirdparty websites and do things like measure how you view YouTube videos that are on GOV.WALES.",
+  "cookie-settings-communications-radio-1-label": "Do not use cookies that help with communications and marketing",
+  "cookie-settings-communications-radio-2-label": "Use cookies that help with communications and marketing",
+  "cookie-settings-settings-heading": "Cookies that remember your settings",
+  "cookie-settings-settings-paragraph-1": "These cookies do things like remember your preferences and the choices you make, to personalise your experience of using the site.",
+  "cookie-settings-settings-radio-1-label": "Do not use cookies that remember my settings on the site",
+  "cookie-settings-settings-radio-2-label": "Use cookies that remember my settings on the site",
+  "cookie-settings-essential-heading": "Strictly necessary cookies",
+  "cookie-settings-essential-paragraph-1": "These essential cookies do things like:",
+  "cookie-settings-essential-list-item-1": "remember the notifications you've seen so we do not show them to you again",
+  "cookie-settings-essential-list-item-2": "remember your progress through a form (for example a licence application)",
+  "cookie-settings-essential-paragraph-2": " These cookies always need to be on.",
+  "cookie-settings-essential-link": "https:gov.wales/details-about-cookies-govwales",
+  "cookie-settings-essential-link-label": "Find out more about cookies on GOV.WALES.",
+  "cookie-settings-save-button-label": "Save changes"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index da2773a7..6b1daead 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "applicationinsights": "^2.1.3",
     "axios": "^0.21.1",
     "compression": "^1.7.4",
-    "cookies": "^0.8.0",
+    "cookie-cutter": "^0.2.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.25.0",
     "dom": "^0.0.3",
@@ -29,6 +29,7 @@
     "next": "^11.0.1",
     "next-redux-wrapper": "^7.0.2",
     "next-translate": "^1.0.7",
+    "nookies": "^2.5.2",
     "path": "^0.12.7",
     "pm2": "^5.1.0",
     "react": "17.0.2",
diff --git a/pages/account/changepassword.js b/pages/account/changepassword.js
index 00383eea..8ada964d 100644
--- a/pages/account/changepassword.js
+++ b/pages/account/changepassword.js
@@ -9,7 +9,7 @@ import Footer from "../../components/footer";
 
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import { useState } from "react";
 import useTranslation from "next-translate/useTranslation";
diff --git a/pages/account/forgottenpassword.js b/pages/account/forgottenpassword.js
index 3872ccfb..950655a9 100644
--- a/pages/account/forgottenpassword.js
+++ b/pages/account/forgottenpassword.js
@@ -9,7 +9,7 @@ import Footer from "../../components/footer";
 
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import { useState } from "react";
 import useTranslation from "next-translate/useTranslation";
diff --git a/pages/account/forgottenuser.js b/pages/account/forgottenuser.js
index d6af716b..4d14d921 100644
--- a/pages/account/forgottenuser.js
+++ b/pages/account/forgottenuser.js
@@ -9,7 +9,7 @@ import Footer from "../../components/footer";
 
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import { useState } from "react";
 import useTranslation from "next-translate/useTranslation";
diff --git a/pages/account/personaldetails.js b/pages/account/personaldetails.js
index f8a77ec0..4cb102c3 100644
--- a/pages/account/personaldetails.js
+++ b/pages/account/personaldetails.js
@@ -9,7 +9,7 @@ import Footer from "../../components/footer";
 
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import { useState } from "react";
 import useTranslation from "next-translate/useTranslation";
diff --git a/pages/account/register.js b/pages/account/register.js
index 8b4b1619..5b9bd95b 100644
--- a/pages/account/register.js
+++ b/pages/account/register.js
@@ -9,7 +9,7 @@ import Footer from "../../components/footer";
 
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import { useState } from "react";
 import useTranslation from "next-translate/useTranslation";
diff --git a/pages/advancedsearch.js b/pages/advancedsearch.js
index 63989398..a424d536 100644
--- a/pages/advancedsearch.js
+++ b/pages/advancedsearch.js
@@ -11,7 +11,7 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import CRMError from "../components/crmError";
diff --git a/pages/advancedsearchresults.js b/pages/advancedsearchresults.js
index 38ef36b9..4779355e 100644
--- a/pages/advancedsearchresults.js
+++ b/pages/advancedsearchresults.js
@@ -10,7 +10,7 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
diff --git a/pages/case.js b/pages/case.js
index b0eae768..7d16fb6a 100644
--- a/pages/case.js
+++ b/pages/case.js
@@ -10,7 +10,7 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Case from "../components/case";
diff --git a/pages/dns/application-process.js b/pages/dns/application-process.js
index 2c90e335..23932970 100644
--- a/pages/dns/application-process.js
+++ b/pages/dns/application-process.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Main from "../../components/dns//main";
diff --git a/pages/dns/application-view.js b/pages/dns/application-view.js
index 4307952c..76b0b4db 100644
--- a/pages/dns/application-view.js
+++ b/pages/dns/application-view.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import ApplicationTabs from "../../components/dns/applications/applicationTabs";
diff --git a/pages/dns/applications.js b/pages/dns/applications.js
index 412f1be8..0bd9b3b6 100644
--- a/pages/dns/applications.js
+++ b/pages/dns/applications.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import ApplicationIntro from "../../components/dns/applications/applicationsIntro";
diff --git a/pages/dns/contact-us.js b/pages/dns/contact-us.js
index e82ca298..6919ead8 100644
--- a/pages/dns/contact-us.js
+++ b/pages/dns/contact-us.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Main from "../../components/dns/main";
diff --git a/pages/dns/help.js b/pages/dns/help.js
index f232102c..90f4940b 100644
--- a/pages/dns/help.js
+++ b/pages/dns/help.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Main from "../../components/dns/main";
diff --git a/pages/dns/index.js b/pages/dns/index.js
index 70c19bed..e197c914 100644
--- a/pages/dns/index.js
+++ b/pages/dns/index.js
@@ -9,7 +9,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Main from "../../components/dns//main";
diff --git a/pages/dnsapplications.js b/pages/dnsapplications.js
index 06c19117..d11317f7 100644
--- a/pages/dnsapplications.js
+++ b/pages/dnsapplications.js
@@ -10,7 +10,7 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
diff --git a/pages/dnsdetails.js b/pages/dnsdetails.js
index b0eae768..7d16fb6a 100644
--- a/pages/dnsdetails.js
+++ b/pages/dnsdetails.js
@@ -10,7 +10,7 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Case from "../components/case";
diff --git a/pages/help/cookies.js b/pages/help/cookies.js
new file mode 100644
index 00000000..6f7b15a6
--- /dev/null
+++ b/pages/help/cookies.js
@@ -0,0 +1,43 @@
+import _ from "lodash";
+import Head from "next/head";
+import Header from "../../components/header";
+import ServiceBanner from "../../components/servicebanner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import Footer from "../../components/footer";
+import { wrapper } from "../../store/store";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import CookieManagementMain from "../../components/cookiemanager";
+import { setCookieConsent } from "../../store/accountDetails/action";
+import { connect } from "react-redux";
+import cookiemanager from "../../components/cookiemanager";
+
+const CookieManagement = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <div>
+            <Head>
+                <title>{t("common:service-name")}</title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName="Appeals Casework Portal" />
+                <div className="govuk-width-container">
+                    <Breadcrumbs />
+                    <CookieManagementMain />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export default CookieManagement;
diff --git a/pages/index.js b/pages/index.js
index 42dfef50..09d6a25c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -10,7 +10,6 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { getIncidents } from "../actions";
diff --git a/pages/myportal/advancedsearch.js b/pages/myportal/advancedsearch.js
index 99bb2b58..3f79473c 100644
--- a/pages/myportal/advancedsearch.js
+++ b/pages/myportal/advancedsearch.js
@@ -11,7 +11,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import CRMError from "../../components/crmError";
diff --git a/pages/myportal/advancedsearchresults.js b/pages/myportal/advancedsearchresults.js
index 397319b3..6ae5cac9 100644
--- a/pages/myportal/advancedsearchresults.js
+++ b/pages/myportal/advancedsearchresults.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
diff --git a/pages/myportal/case.js b/pages/myportal/case.js
index ff860ec6..514f6380 100644
--- a/pages/myportal/case.js
+++ b/pages/myportal/case.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Case from "../../components/case";
diff --git a/pages/myportal/index.js b/pages/myportal/index.js
index f7f0f54b..6cf0ff7e 100644
--- a/pages/myportal/index.js
+++ b/pages/myportal/index.js
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import Cookies from "cookies";
+
 import jsonpath from "jsonpath";
 import Head from "next/head";
 import Header from "../../components/header";
@@ -104,13 +104,13 @@ export const getServerSideProps = wrapper.getServerSideProps(
                 await getAwaitingSubmission(token),
             ]);
 
-        const cookiesMaker = new Cookies(req, res);
+        // const cookiesMaker = new Cookies(req, res);
 
-        cookiesMaker.set("pinsUser", query.q, {
-            httpOnly: true, // true by default
-        });
+        // cookiesMaker.set("pinsUser", query.q, {
+        //     httpOnly: true, // true by default
+        // });
 
-        console.log(" from cookie ", cookiesMaker.get("pinsUser"));
+        // console.log(" from cookie ", cookiesMaker.get("pinsUser"));
         console.log(myCases);
 
         const [
diff --git a/pages/myportal/searchresults.js b/pages/myportal/searchresults.js
index 21d459ea..66055f10 100644
--- a/pages/myportal/searchresults.js
+++ b/pages/myportal/searchresults.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
diff --git a/pages/myportal/viewall.js b/pages/myportal/viewall.js
index 6beabcbe..dfdd04ee 100644
--- a/pages/myportal/viewall.js
+++ b/pages/myportal/viewall.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
diff --git a/pages/newappeal/[appealtypes].js b/pages/newappeal/[appealtypes].js
index 6158875a..7f27e959 100644
--- a/pages/newappeal/[appealtypes].js
+++ b/pages/newappeal/[appealtypes].js
@@ -9,7 +9,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
diff --git a/pages/newappeal/index.js b/pages/newappeal/index.js
index e2b0a1ea..2aaa70de 100644
--- a/pages/newappeal/index.js
+++ b/pages/newappeal/index.js
@@ -10,7 +10,6 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import useTranslation from "next-translate/useTranslation";
diff --git a/pages/newappeal/planningappeal.js b/pages/newappeal/planningappeal.js
index ab22a277..a98cbf33 100644
--- a/pages/newappeal/planningappeal.js
+++ b/pages/newappeal/planningappeal.js
@@ -10,7 +10,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
diff --git a/pages/newappeal/selectappeal.js b/pages/newappeal/selectappeal.js
index ff7275a4..d7f5d02e 100644
--- a/pages/newappeal/selectappeal.js
+++ b/pages/newappeal/selectappeal.js
@@ -9,7 +9,7 @@ import Errorpage from "../../components/errorpage";
 import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import { useState } from "react";
 import useTranslation from "next-translate/useTranslation";
diff --git a/pages/representation.js b/pages/representation.js
index 40aee728..17805512 100644
--- a/pages/representation.js
+++ b/pages/representation.js
@@ -10,7 +10,7 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import Case from "../components/representation";
diff --git a/pages/searchresults.js b/pages/searchresults.js
index dcf34598..10e3de8a 100644
--- a/pages/searchresults.js
+++ b/pages/searchresults.js
@@ -10,7 +10,6 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
diff --git a/pages/viewall.js b/pages/viewall.js
index b729fc8b..c389b10f 100644
--- a/pages/viewall.js
+++ b/pages/viewall.js
@@ -10,7 +10,7 @@ import Errorpage from "../components/errorpage";
 import styles from "../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../store/store";
-import Cookies from "cookies";
+
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
diff --git a/store/accountDetails/action.js b/store/accountDetails/action.js
index e8ffd37c..0827271c 100644
--- a/store/accountDetails/action.js
+++ b/store/accountDetails/action.js
@@ -1,6 +1,5 @@
-import actions from "redux-form/lib/actions";
-
 export const AccountDetailsDataActionTypes = {
+    SETCOOKIECONSENT: "SETCOOKIECONSENT",
     GETACCOUNTDETAILSDATA: "GETACCOUNTDETAILSDATA",
     SETACCOUNTDETAILSDATA: "SETACCOUNTDETAILSDATA",
     SETLOGGEDINUSER: "SETLOGGEDINUSER",
@@ -8,6 +7,14 @@ export const AccountDetailsDataActionTypes = {
     USER_LOGOUT: "USER_LOGOUT",
 };
 
+export const setCookieConsent = (cookieObj) => (dispatch) => {
+    console.log("wertyewrtyt", cookieObj);
+    return dispatch({
+        type: AccountDetailsDataActionTypes.SETCOOKIECONSENT,
+        cookieObj: cookieObj,
+    });
+};
+
 export const getAccountDetailsObj = () => (dispatch) => {
     return dispatch({
         type: AccountDetailsDataActionTypes.GETACCOUNTDETAILSDATA,
diff --git a/store/accountDetails/reducer.js b/store/accountDetails/reducer.js
index 0d0ffc9d..243567e5 100644
--- a/store/accountDetails/reducer.js
+++ b/store/accountDetails/reducer.js
@@ -4,6 +4,7 @@ const AccountDetailsDataInitialState = {
     accountDetails: {},
     loggedinUserId: "",
     accCr: false,
+    cookieObj: "",
 };
 
 export default function reducer(
@@ -26,6 +27,11 @@ export default function reducer(
                 ...state,
                 accCr: action.accCr,
             };
+        case AccountDetailsDataActionTypes.SETCOOKIECONSENT:
+            return {
+                ...state,
+                cookieObj: action.cookieObj,
+            };
         default:
             return state;
     }
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 165badfd..437241fc 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -58,6 +58,9 @@ body {
             width: 28%;
             margin-right: 45px;
         }
+        &.hidden {
+            display: none;
+        }
     }
 
     .cookies-banner__link,
@@ -1320,3 +1323,54 @@ ul#sharePageLinks.active {
         z-index: 99;
     }
 }
+
+.paragraph--type--call-out-message {
+    border-left-color: $blue;
+    background-color: $lightgrey_light;
+}
+
+#cookies-js form {
+    background-color: $lightgrey_light;
+    padding: 40px;
+
+    .govuk-radios__label:before {
+        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__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;
+            }
+        }
+    }
+}