From 5fef09f76a688fc409df7188abda7b65d8bbac6a Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Tue, 9 Nov 2021 15:19:52 +0000
Subject: [PATCH 1/2] added display of representatons on my portal

---
 .env.local                                    | 20 ++++----
 actions/index.js                              | 43 +++++++++-------
 components/case.js                            |  3 ++
 components/case/representation/index.js       | 51 ++++++++++---------
 .../representation/representationAgent.js     |  2 +-
 .../representation/representationAppellant.js |  7 +--
 .../representation/representationDetails.js   | 23 ++-------
 .../representationInterestedPartyPerson.js    |  4 +-
 .../representation/representationLandowner.js |  4 +-
 components/case/representationList.js         | 41 +++++++++++++++
 components/case/summary.js                    |  6 +--
 components/myportal/topthree.js               | 25 +++++++--
 i18n.js                                       |  2 +-
 pages/{ => myportal}/representation.js        | 20 ++++----
 14 files changed, 152 insertions(+), 99 deletions(-)
 create mode 100644 components/case/representationList.js
 rename pages/{ => myportal}/representation.js (90%)

diff --git a/.env.local b/.env.local
index 6f725e8c..4e27b1d5 100644
--- a/.env.local
+++ b/.env.local
@@ -1,9 +1,9 @@
 // dev
-//RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/
-//RELAYURI = "dev-pedw-ns.servicebus.windows.net"
-//RELAYPATH = "dev-pedw-hc"
-//SASKEY = "Ml0Y/S/nfRcmIrHFRkO4jNm2J3iH52TSxPiak7+E1+Y="
-//SASKEYNAME = "devpedwnspolicy"
+RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/
+RELAYURI = "dev-pedw-ns.servicebus.windows.net"
+RELAYPATH = "dev-pedw-hc"
+SASKEY = "Ml0Y/S/nfRcmIrHFRkO4jNm2J3iH52TSxPiak7+E1+Y="
+SASKEYNAME = "devpedwnspolicy"
 
 
 PORT= "3000"
@@ -15,11 +15,11 @@ I18N_DOMAIN = "cymru.local"
 //I18N_DOMAIN ="gwaithcynllunio.gwasanaeth.llyw.cymru"
 
 //test
-RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
-RELAYURI = "test-pedw-ns.servicebus.windows.net"
-RELAYPATH = "test-pedw-hc"
-SASKEY = "kTLrs9UHwuW9Msc9uNfjf+89qLYT6ly80lK0zdTYJW4="
-SASKEYNAME = "testpedwhcpolicy"
+//RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
+//RELAYURI = "test-pedw-ns.servicebus.windows.net"
+//RELAYPATH = "test-pedw-hc"
+//SASKEY = "kTLrs9UHwuW9Msc9uNfjf+89qLYT6ly80lK0zdTYJW4="
+//SASKEYNAME = "testpedwhcpolicy"
 
 
 //preprod
diff --git a/actions/index.js b/actions/index.js
index 5bf870de..4b5be744 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -818,23 +818,32 @@ export const getMyCases = (token, loggedInUserId) => {
 };
 
 export const getMyRepresentations = (token, loggedInUserId) => {
-    return (
-        axios
-            // .get(BASE_URL + "/api/lookups/myRepresentations", {
-            //     httpsAgent: new https.Agent({ rejectUnauthorized: false }),
-            // })
-            .get(
-                WEBAPI_URL +
-                    "incidents?$select=ticketnumber,casetypecode,createdon,_customerid_value,description,incidentid,pinswg_appealcasetype,_pinswg_assignedinspectrids_value,statecode,statuscode,title&$filter=_customerid_value eq " +
-                    loggedInUserId +
-                    " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true&$top=3",
-                azureHeaders(token)
-            )
-            .then((res) => res.data)
-            .catch((error) => {
-                console.log("thi serror", error);
-            })
-    );
+    return axios
+        .get(
+            WEBAPI_URL +
+                "pinswg_representationses?$filter= _pinswg_contact_value eq " +
+                loggedInUserId +
+                "&$count=true&$orderby=createdon desc",
+            azureHeaders(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};
+
+export const getMyRepresentationsProxy = (token, loggedInUserId) => {
+    return axios
+        .get(
+            "/api/proxy/pinswg_representationses?$filter= _pinswg_contact_value eq " +
+                loggedInUserId +
+                "&$count=true&$orderby=createdon desc",
+            azureHeaders(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("this serror", error);
+        });
 };
 
 export const getWatchedCases = (token, loggedInUserId) => {
diff --git a/components/case.js b/components/case.js
index b2bfcdbe..92d2f5e1 100644
--- a/components/case.js
+++ b/components/case.js
@@ -4,6 +4,7 @@ import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
 import Summary from "./case/summary";
 import Documents from "./case/documents";
+import RepresentationList from "./case/representationList";
 
 const CaseSummary = (props) => {
     let { t } = useTranslation();
@@ -42,6 +43,8 @@ const CaseSummary = (props) => {
                         documentDetailsObj={props.documentDetailsObj}
                         documentHistoryObj={props.documentHistoryObj}
                     />
+
+                    <RepresentationList />
                 </div>
             </div>
         </main>
diff --git a/components/case/representation/index.js b/components/case/representation/index.js
index 0e16f76f..9f883b2d 100644
--- a/components/case/representation/index.js
+++ b/components/case/representation/index.js
@@ -49,6 +49,7 @@ let MakeRepresentation = (props) => {
         watchedCases,
         awaitingSubmission,
         searchResultsObj,
+        representationSubmit,
         currentType,
         currentView,
         setRepresentationCapacity,
@@ -160,7 +161,7 @@ let MakeRepresentation = (props) => {
                     />
                 );
                 break;
-            case "interestedpartyperson":
+            case "interestedparty/person":
                 // setRepresentationCapacity("interestedpartyperson");
                 return (
                     <RepInterestedPartyPerson
@@ -232,27 +233,31 @@ let MakeRepresentation = (props) => {
 
     return (
         <div>
-            {repForm["representationForm.submitSucceeded"] == true ? (
-                <RepCompleteSubmit
-                    formObj={formObj}
-                    capacityOptionsArr={capacityOptionsArr}
-                    currentType={currentType}
-                    casesObj={casesObj}
-                    setRepresentationCapacity={setRepresentationCapacity}
-                    setRepresentationSubmit={setRepresentationSubmit}
-                    currentView={currentView}
-                    setSubmitBack={setSubmitBack}
-                    setRepresentationSubmitConfirmation={
-                        setRepresentationSubmitConfirmation
-                    }
-                />
-            ) : (
-                <form onSubmit={handleSubmit(onHandleSubmit)}>
-                    {whichControl()}
-                </form>
-            )}
-
-            {console.log("is submitted", currentView.representationSubmit)}
+            <form onSubmit={handleSubmit(onHandleSubmit)}>
+                {representationSubmit == true ? (
+                    <RepCompleteSubmit
+                        formObj={formObj}
+                        capacityOptionsArr={capacityOptionsArr}
+                        currentType={currentType}
+                        casesObj={casesObj}
+                        setRepresentationCapacity={setRepresentationCapacity}
+                        setRepresentationSubmit={setRepresentationSubmit}
+                        currentView={currentView}
+                        setSubmitBack={setSubmitBack}
+                        setRepresentationSubmitConfirmation={
+                            setRepresentationSubmitConfirmation
+                        }
+                    />
+                ) : (
+                    <>
+                        <h1 className="govuk-heading-l">
+                            Make a representation on:{" "}
+                            {currentView.caseReference.currentReference}
+                        </h1>
+                        {whichControl()}
+                    </>
+                )}
+            </form>
         </div>
     );
 };
@@ -271,8 +276,8 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
     return {
         setRepresentationCapacity: (representationCapacity) => {
-            dispatch(setRepresentationCapacity(representationCapacity));
             dispatch(reset("representationForm"));
+            dispatch(setRepresentationCapacity(representationCapacity));
         },
         setRepresentationSubmit: (representationSubmit) => {
             dispatch(setRepresentationSubmit(representationSubmit));
diff --git a/components/case/representation/representationAgent.js b/components/case/representation/representationAgent.js
index 741448ef..692ed496 100644
--- a/components/case/representation/representationAgent.js
+++ b/components/case/representation/representationAgent.js
@@ -219,7 +219,7 @@ const RepAgent = (props) => {
 
                         <a
                             onClick={() => {
-                                setRepresentationCapacity("false");
+                                setRepresentationCapacity();
                             }}
                             className="govuk-link"
                         >
diff --git a/components/case/representation/representationAppellant.js b/components/case/representation/representationAppellant.js
index 6e2305f7..927c1edc 100644
--- a/components/case/representation/representationAppellant.js
+++ b/components/case/representation/representationAppellant.js
@@ -38,10 +38,6 @@ const RepAppellant = (props) => {
         <div id="rep-appellant">
             <div className="govuk-grid-column-full">
                 <div className="govuk-grid-row">
-                    <h2 className="govuk-heading-m ">
-                        Representation - appellantApplicant
-                    </h2>
-
                     <div className="govuk-form-group">
                         <label
                             className="govuk-label govuk-body-m"
@@ -204,7 +200,6 @@ const RepAppellant = (props) => {
                 </div>
                 <div className="govuk-grid-row">
                     <div className="govuk-button-group">
-                        {currentView.representationCapacity}
                         <button
                             type="submit"
                             className="govuk-button"
@@ -222,7 +217,7 @@ const RepAppellant = (props) => {
                             </a> */}
                         <a
                             onClick={() => {
-                                setRepresentationCapacity(false);
+                                setRepresentationCapacity();
                             }}
                             className="govuk-link"
                         >
diff --git a/components/case/representation/representationDetails.js b/components/case/representation/representationDetails.js
index 1351092b..0964ce68 100644
--- a/components/case/representation/representationDetails.js
+++ b/components/case/representation/representationDetails.js
@@ -17,21 +17,7 @@ const RepDetails = (props) => {
             {" "}
             <div className="govuk-grid-column-full">
                 <div id="rep-sumamry" className="govuk-grid-row">
-                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
-                        Make a representation
-                    </h1>
-
                     <dl className="govuk-summary-list govuk-!-margin-bottom-9">
-                        <div className="govuk-summary-list__row">
-                            <dt className="govuk-summary-list__key">
-                                Appeal Reference
-                            </dt>
-                            <dd className="govuk-summary-list__value">
-                                {currentType == "searchResultsObj"
-                                    ? casesObj.title
-                                    : casesObj.reference}
-                            </dd>
-                        </div>
                         <div className="govuk-summary-list__row">
                             <dt className="govuk-summary-list__key">
                                 {t("case:summary-applicant-label")}
@@ -40,14 +26,14 @@ const RepDetails = (props) => {
                                 {casesObj.appellantApplicant || ""}
                             </dd>
                         </div>
-                        <div className="govuk-summary-list__row">
+                        {/* <div className="govuk-summary-list__row">
                             <dt className="govuk-summary-list__key">
                                 {t("case:summary-agent-label")}
                             </dt>
                             <dd className="govuk-summary-list__value">
                                 Mr A Agent
                             </dd>
-                        </div>
+                        </div> */}
                         <div className="govuk-summary-list__row">
                             <dt className="govuk-summary-list__key">
                                 {t("case:summary-site-address-label")}
@@ -66,14 +52,13 @@ const RepDetails = (props) => {
                 <div className="govuk-grid-row">
                     <p className="govuk-body">
                         This form enables you to submit comments on a case to
-                        The Planning Inspectorate.{" "}
+                        Planning and Environment Decisions Wales.{" "}
                     </p>
                     <p className="govuk-body">
                         Please note that comments from interested parties need
                         to be made within the timetable. This can be found on
                         the previous &lsquo;Case Summary&lsquo; page. Comments
-                        submitted after this date may be considered invalid and
-                        returned to the sender.
+                        submitted after this date may be considered invalid.
                     </p>
                 </div>
             </div>
diff --git a/components/case/representation/representationInterestedPartyPerson.js b/components/case/representation/representationInterestedPartyPerson.js
index d8cd747f..024dfefb 100644
--- a/components/case/representation/representationInterestedPartyPerson.js
+++ b/components/case/representation/representationInterestedPartyPerson.js
@@ -297,7 +297,7 @@ const RepInterestedPartyPerson = (props) => {
                             <Link href="/representation">
                                 <a
                                     onClick={() => {
-                                        setRepresentationSubmit(false);
+                                        setRepresentationSubmit(true);
                                     }}
                                     className="govuk-button"
                                 >
@@ -306,7 +306,7 @@ const RepInterestedPartyPerson = (props) => {
                             </Link>
                             <a
                                 onClick={() => {
-                                    setRepresentationCapacity(false);
+                                    setRepresentationCapacity();
                                 }}
                                 className="govuk-link"
                             >
diff --git a/components/case/representation/representationLandowner.js b/components/case/representation/representationLandowner.js
index 247735d7..76ed3069 100644
--- a/components/case/representation/representationLandowner.js
+++ b/components/case/representation/representationLandowner.js
@@ -205,7 +205,7 @@ const RepLandOwner = (props) => {
                         <Link href="/representation">
                             <a
                                 onClick={() => {
-                                    setRepresentationSubmit(false);
+                                    setRepresentationSubmit(true);
                                 }}
                                 className="govuk-button"
                             >
@@ -214,7 +214,7 @@ const RepLandOwner = (props) => {
                         </Link>
                         <a
                             onClick={() => {
-                                setRepresentationCapacity(false);
+                                setRepresentationCapacity();
                             }}
                             className="govuk-link"
                         >
diff --git a/components/case/representationList.js b/components/case/representationList.js
new file mode 100644
index 00000000..065306a3
--- /dev/null
+++ b/components/case/representationList.js
@@ -0,0 +1,41 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState, useEffect, useRef } from "react";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import useTranslation from "next-translate/useTranslation";
+import jsonpath from "jsonpath";
+import _ from "lodash";
+import transLookup from "../../data/lookuptranslations.json";
+import LoadingOverlay from "react-loading-overlay";
+
+const RepresentationList = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
+    return (
+        <>
+            <div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <h2>Representations</h2>
+                    </div>
+                </div>
+            </div>
+            <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-searching")}
+            />
+        </>
+    );
+};
+
+export default RepresentationList;
diff --git a/components/case/summary.js b/components/case/summary.js
index 78d38710..15067946 100644
--- a/components/case/summary.js
+++ b/components/case/summary.js
@@ -199,14 +199,14 @@ const CaseSummary = (props) => {
                         </dl>
                     </div>
                 </div>
-                {/* <div className="govuk-grid-row">
+                <div className="govuk-grid-row">
                     <div className="govuk-grid-column-full">
                         <div className="govuk-button-group">
                             {noRepresentationLink.includes(router.pathname) ==
                             true ? (
                                 ""
                             ) : (
-                                <Link href="/representation">
+                                <Link href="/myportal/representation">
                                     <a className="govuk-button">
                                         {t(
                                             "case:summary-make-representation-label"
@@ -226,7 +226,7 @@ const CaseSummary = (props) => {
                             </a>
                         </div>
                     </div>
-                </div> */}
+                </div>
 
                 {showSummary(casesObj, detailsObj)}
             </div>
diff --git a/components/myportal/topthree.js b/components/myportal/topthree.js
index c9a02c69..31a73064 100644
--- a/components/myportal/topthree.js
+++ b/components/myportal/topthree.js
@@ -114,16 +114,27 @@ const TopThree = (props) => {
                                     setCurrentReference({
                                         "currentReference":
                                             topThreeType != "watchedCases"
-                                                ? showTopThreeArr[key]
-                                                      .ticketnumber
+                                                ? topThreeType !=
+                                                  "myRepresentations"
+                                                    ? showTopThreeArr[key]
+                                                          .ticketnumber
+                                                    : showTopThreeArr[key][
+                                                          "_pinswg_case_value@OData.Community.Display.V1.FormattedValue"
+                                                      ]
                                                 : showTopThreeArr[key][
                                                       "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                                   ],
                                         "currentType": topThreeType,
+
                                         "incidentid":
                                             topThreeType != "watchedCases"
-                                                ? showTopThreeArr[key]
-                                                      .incidentid
+                                                ? topThreeType !=
+                                                  "myRepresentations"
+                                                    ? showTopThreeArr[key]
+                                                          ._pinswg_case_value
+                                                    : showTopThreeArr[key][
+                                                          " _pinswg_watchedcase_value"
+                                                      ]
                                                 : showTopThreeArr[key][
                                                       " _pinswg_watchedcase_value"
                                                   ],
@@ -135,7 +146,11 @@ const TopThree = (props) => {
                                 }}
                             >
                                 {topThreeType != "watchedCases"
-                                    ? showTopThreeArr[key].ticketnumber
+                                    ? topThreeType != "myRepresentations"
+                                        ? showTopThreeArr[key].ticketnumber
+                                        : showTopThreeArr[key][
+                                              "_pinswg_case_value@OData.Community.Display.V1.FormattedValue"
+                                          ]
                                     : showTopThreeArr[key][
                                           "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                       ]}
diff --git a/i18n.js b/i18n.js
index 26082685..1fa7971a 100644
--- a/i18n.js
+++ b/i18n.js
@@ -21,7 +21,7 @@ module.exports = {
         "/searchresults": ["search"],
         "/viewall": ["search"],
         "/case": ["case"],
-        "/representation": ["case"],
+        "/myportal/representation": ["case"],
         "/newappeal": ["newappeal"],
         "/newappeal/*": ["newappeal"],
         "/newappeal/selectappeal": ["newappeal"],
diff --git a/pages/representation.js b/pages/myportal/representation.js
similarity index 90%
rename from pages/representation.js
rename to pages/myportal/representation.js
index cc2ee023..fa8e3984 100644
--- a/pages/representation.js
+++ b/pages/myportal/representation.js
@@ -1,19 +1,19 @@
 import _ from "lodash";
 import Head from "next/head";
-import Header from "../components/header";
-import Banner from "../components/banner";
-import CookieBanner from "../components/cookieBanner";
-import Breadcrumbs from "../components/breadcrumbs";
-import CaseSummary from "../components/case";
-import Footer from "../components/footer";
-import Errorpage from "../components/errorpage";
-import styles from "../styles/Home.module.css";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import CaseSummary from "../../components/case";
+import Footer from "../../components/footer";
+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 { wrapper } from "../../store/store";
 
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import Case from "../components/representation";
+import Case from "../../components/representation";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;

From 9d54b0cd2dcdd9ed76bbd16d7f8e236813514612 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Thu, 11 Nov 2021 10:51:04 +0000
Subject: [PATCH 2/2] updated cookie manger added cookie policy

---
 .env.local                            |   1 +
 actions/index.js                      |  53 ++++++
 components/breadcrumbs.js             |   9 +
 components/case.js                    |  16 +-
 components/case/documents.js          |   2 +-
 components/case/representationList.js | 234 ++++++++++++++++++++++++--
 components/cookiePolicy.js            | 194 +++++++++++++++++++++
 components/cookiemanager/index.js     |  36 ++--
 i18n.js                               |   1 +
 locales/cy/cookies.json               |  43 ++++-
 locales/en/cookies.json               |  43 ++++-
 next.config.js                        |   4 +
 pages/case/index.js                   |   3 +
 pages/details-about-cookies.js        |  90 ++++++++++
 pages/myportal/case.js                |  21 ++-
 store/searchOutput/action.js          |   8 +
 store/searchOutput/reducer.js         |   6 +
 17 files changed, 713 insertions(+), 51 deletions(-)
 create mode 100644 components/cookiePolicy.js
 create mode 100644 pages/details-about-cookies.js

diff --git a/.env.local b/.env.local
index 4e27b1d5..385f7a0d 100644
--- a/.env.local
+++ b/.env.local
@@ -32,3 +32,4 @@ I18N_DOMAIN = "cymru.local"
 
 GOOGLE_TAG_MANAGER = GTM-T78CBC3
 SHOWLOGIN = "true"
+SHOWREPRESENTATIONS = "false"
diff --git a/actions/index.js b/actions/index.js
index 4b5be744..71d9a7fe 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -461,6 +461,7 @@ export const getSearchDocumentDetails1 = (incidentID) => {
             console.log("thiserror", error);
         });
 };
+
 export const getSearchDocumentDetails1Paged = (incidentID, pageNumber) => {
     //console.log(incidentID);
     var token = getSASToken();
@@ -846,6 +847,58 @@ export const getMyRepresentationsProxy = (token, loggedInUserId) => {
         });
 };
 
+export const deleteMyRepresentations = (myRepresentationsID) => {
+    var config = {
+        method: "delete",
+        url: "/api/proxy/pinswg_representationses(" + myRepresentationsID + ")",
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json",
+            "Prefer": 'odata.include-annotations="*",return=representation',
+            "Content-Type": "application/json",
+            "ServiceBusAuthorization": getSASToken(),
+        },
+    };
+    // console.log(config);
+    return axios(config)
+        .then((res) => {
+            //console.log("deleted ", res.data);
+            return res.data;
+        })
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};
+
+export const getRepresentations = (incidentID) => {
+    return axios
+        .get(
+            "/api/proxy/pinswg_representationses?$filter= _pinswg_case_value eq " +
+                incidentID +
+                " and pinswg_publishtoweb eq true&$count=true&$orderby=createdon desc",
+            azureHeaders(getSASToken())
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};
+
+export const getRepresentationsProxy = (token, incidentID) => {
+    return axios
+        .get(
+            "/api/proxy/pinswg_representationses?$filter= _pinswg_case_value eq " +
+                incidentID +
+                "&$count=true&$orderby=createdon desc",
+            azureHeaders(token)
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("this serror", error);
+        });
+};
+
 export const getWatchedCases = (token, loggedInUserId) => {
     return axios
         .get(
diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index cdc6c530..72570954 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -562,6 +562,15 @@ const Breadcrumbs = (props) => {
                         ) : (
                             ""
                         )}
+                        {router.pathname == "/details-about-cookies" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("cookies:cookie-policy-title-heading")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
                         {!_.isEmpty(slug) ? (
                             <>
                                 <li className="govuk-breadcrumbs__list-item">
diff --git a/components/case.js b/components/case.js
index 92d2f5e1..08973ff5 100644
--- a/components/case.js
+++ b/components/case.js
@@ -6,7 +6,8 @@ import Summary from "./case/summary";
 import Documents from "./case/documents";
 import RepresentationList from "./case/representationList";
 
-const CaseSummary = (props) => {
+const Case = (props) => {
+    const { showRepresentations } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -43,12 +44,19 @@ const CaseSummary = (props) => {
                         documentDetailsObj={props.documentDetailsObj}
                         documentHistoryObj={props.documentHistoryObj}
                     />
-
-                    <RepresentationList />
+                    {showRepresentations == "true" && (
+                        <RepresentationList
+                            incidentid={props.incidentid}
+                            caseReference={props.caseReference}
+                            representationsObj={props.representationsObj}
+                            documentDetailsObj={props.documentDetailsObj}
+                            documentHistoryObj={props.documentHistoryObj}
+                        />
+                    )}
                 </div>
             </div>
         </main>
     );
 };
 
-export default CaseSummary;
+export default Case;
diff --git a/components/case/documents.js b/components/case/documents.js
index 63e1ac8d..58ca608c 100644
--- a/components/case/documents.js
+++ b/components/case/documents.js
@@ -249,7 +249,7 @@ const DocumentDetails = (props) => {
                 //console.log("getting details", data);
                 return getDocumentHistory(data.value).then((data) => {
                     setDocumentHistory(data);
-                    setShowSpinnerState(false);
+                    //setShowSpinnerState(false);
                 });
             });
     };
diff --git a/components/case/representationList.js b/components/case/representationList.js
index 065306a3..2e0b42f7 100644
--- a/components/case/representationList.js
+++ b/components/case/representationList.js
@@ -7,35 +7,249 @@ import jsonpath from "jsonpath";
 import _ from "lodash";
 import transLookup from "../../data/lookuptranslations.json";
 import LoadingOverlay from "react-loading-overlay";
+import { getRepresentations } from "../../actions";
+import { setRepresentations } from "../../store/searchOutput/action";
+import PaginationControl from "./pagination";
 
 const RepresentationList = (props) => {
+    const { incidentid, representationsObj, setRepresentations } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
-    const [showSpinnerState, setShowSpinnerState] = useState(false);
+    // const [showSpinnerState, setShowSpinnerState] = useState(false);
 
-    let spinnerState = () => {
-        showSpinnerState == true
-            ? setShowSpinnerState(false)
-            : setShowSpinnerState(true);
+    // let spinnerState = () => {
+    //     showSpinnerState == true
+    //         ? setShowSpinnerState(false)
+    //         : setShowSpinnerState(true);
+    // };
+
+    var representationsArr = representationsObj || [];
+
+    const RepresentationsView = (representationsArr) => {
+        //console.log(documentDetailsArr);
+
+        representationsArr = representationsArr.value;
+        return (
+            <>
+                <p>
+                    {representationsObj["@odata.count"] > 1
+                        ? t("case:documents-count-label-1")
+                        : t("case:documents-count-label-1a")}{" "}
+                    {representationsObj["@odata.count"]}{" "}
+                    {
+                        representationsObj["@odata.count"] > 1
+                            ? "representations " //t("case:documents-count-label-2")
+                            : "representations " //t("case:documents-count-label-2a")
+                    }
+                </p>
+                <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
+                    <div className="govuk-summary-list__row results-headings">
+                        <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
+                            {
+                                "Type of representation" //t("case:documents-name-label")
+                            }
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            {t("case:documents-doc-type-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            {t("case:documents-date-published-label")}
+                        </dd>
+                    </div>
+
+                    {representationsArr.map((item, key) => {
+                        let detailsObj = jsonpath.query(
+                            item,
+                            "$..[?(@.pinswg_representationsid=='" +
+                                incidentid +
+                                "')]"
+                        );
+                        detailsObj = item;
+
+                        console.log(detailsObj);
+
+                        return (
+                            <div className="govuk-summary-list__row" key={key}>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
+                                    <a
+                                        href={
+                                            "/api/proxy/documents/download/" +
+                                            detailsObj.pinswg_isharedocumentreference
+                                        }
+                                    >
+                                        <span className="results-visually-hidden">
+                                            {t("case:documents-name-label")}:
+                                        </span>
+                                        {
+                                            detailsObj[
+                                                "pinswg_whatkind@OData.Community.Display.V1.FormattedValue"
+                                            ]
+                                        }
+                                    </a>
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                    <span className="results-visually-hidden">
+                                        {t("case:documents-doc-type-label")}:
+                                    </span>
+
+                                    {router.locale == "cy"
+                                        ? jsonpath.query(
+                                              transLookup,
+                                              '$..[?(@.value=="' +
+                                                  detailsObj[
+                                                      "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
+                                                  ] +
+                                                  '")].value_cy'
+                                          )
+                                        : detailsObj[
+                                              "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
+                                          ] ||
+                                          t(
+                                              "case:summary-no-date-entered-label"
+                                          )}
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "case:documents-date-published-label"
+                                        )}
+                                        :
+                                    </span>
+
+                                    {formatDates(
+                                        detailsObj[
+                                            "createdon@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    )}
+                                </dd>
+                                {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                        <span className="results-visually-hidden">
+                                            {t("case:documents-size-label")}:
+                                        </span>
+                                        92
+                                    </dd> */}
+                            </div>
+                        );
+                    })}
+                </dl>
+                {/* <PaginationControl
+                    currentPage={currentPage}
+                    searchResultsObj={documentDetailsObj}
+                    // spinnerState={spinnerState}
+                    getDocumentResults={getDocumentResults}
+                /> */}
+            </>
+        );
     };
+
+    useEffect(() => {
+        const representationDetailsObj = async () => {
+            let docObj = await getRepresentations(incidentid).then((data) => {
+                console.log(data);
+                setRepresentationSearchState(true);
+                setRepresentations(data);
+                return data;
+            });
+
+            return docObj;
+        };
+        const representationResultsObj = representationDetailsObj();
+    }, [incidentid, setRepresentations]);
+
+    function formatDates(dateObj) {
+        var dateObj = new Date(dateObj);
+        var dd = String(dateObj.getDate()).padStart(2, "0");
+        var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
+        var yyyy = dateObj.getFullYear();
+
+        return dd + "/" + mm + "/" + yyyy;
+    }
+
+    const pagesCount = Math.ceil(representationsObj["@odata.count"] / 10);
+
+    let currentPage = 0;
+
+    currentPage = decodeURI(representationsObj["@odata.nextLink"]).split(
+        "skiptoken="
+    )[1];
+    currentPage =
+        typeof currentPage != "undefined"
+            ? parseInt(
+                  decodeURI(currentPage)
+                      .split('pagenumber="')[1]
+                      .slice(
+                          0,
+                          decodeURI(currentPage)
+                              .split('pagenumber="')[1]
+                              .indexOf('"')
+                      ) - 1
+              )
+            : pagesCount;
+
+    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    // let spinnerState = () => {
+    //     showSpinnerState == true
+    //         ? setShowSpinnerState(false)
+    //         : setShowSpinnerState(true);
+    // };
+
+    const [showReperesentationSearchState, setRepresentationSearchState] =
+        useState(false);
+
+    let representationSearchState = () => {
+        showReperesentationSearchState == true
+            ? setRepresentationSearchState(false)
+            : setRepresentationSearchState(true);
+    };
+
     return (
         <>
-            <div>
-                <div className="govuk-grid-row">
+            <div className="card">
+                <div className="govuk-grid-row card-body">
                     <div className="govuk-grid-column-full">
                         <h2>Representations</h2>
+                        {_.isEmpty(representationsObj) ? (
+                            <div className="govuk-grid-row">
+                                <div className="govuk-grid-column-two-thirds">
+                                    <h3>
+                                        {showReperesentationSearchState == false
+                                            ? "Checking for representations "
+                                            : t(
+                                                  "case:documents-non-available-label"
+                                              )}
+                                    </h3>
+                                </div>
+                            </div>
+                        ) : (
+                            RepresentationsView(representationsArr)
+                        )}
                     </div>
                 </div>
             </div>
-            <LoadingOverlay
+            {/* <LoadingOverlay
                 active={showSpinnerState}
                 spinner
                 text={t("common:spinner-searching")}
-            />
+            /> */}
         </>
     );
 };
 
-export default RepresentationList;
+const mapStateToProps = (state) => {
+    return {
+        ...state,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setRepresentations: (representationObj) => {
+            dispatch(setRepresentations(representationObj));
+        },
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RepresentationList);
diff --git a/components/cookiePolicy.js b/components/cookiePolicy.js
new file mode 100644
index 00000000..254c2861
--- /dev/null
+++ b/components/cookiePolicy.js
@@ -0,0 +1,194 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const CookiePolicy = (props) => {
+    let { t } = useTranslation();
+
+    const { whichError } = props;
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-!-padding-top-9 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-7">
+                        {t("cookies:cookie-policy-title-heading")}
+                    </h1>
+                    <div class="page__intro">
+                        <p className="govuk-body">
+                            {t("cookies:cookie-policy-intro-paragraph")}
+                        </p>
+                    </div>
+                    <h2 className="govuk-heading-l ">
+                        {t("cookies:cookie-policy-sub-heading-one")}
+                    </h2>
+
+                    <p className="govuk-body">
+                        {t("cookies:cookie-policy-paragraph-one")}
+                    </p>
+
+                    <dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
+                        <div class="govuk-summary-list__row results-headings">
+                            <dd class="govuk-summary-list__key govuk-!-font-size-16 results_wider  ">
+                                {t("cookies:cookie-policy-list-heading-one")}
+                            </dd>
+                            <dd class="govuk-summary-list__key govuk-!-font-size-16">
+                                {t("cookies:cookie-policy-list-heading-two")}
+                            </dd>
+                            <dd class="govuk-summary-list__key govuk-!-font-size-16">
+                                {t("cookies:cookie-policy-list-heading-three")}
+                            </dd>
+                            <dd class="govuk-summary-list__key govuk-!-font-size-16">
+                                {t("cookies:cookie-policy-list-heading-four")}
+                            </dd>
+                        </div>
+
+                        <div class="govuk-summary-list__row">
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16  ">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-one"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-one-item-one"
+                                )}
+                            </dd>
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-two"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-one-item-two"
+                                )}
+                            </dd>
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-three"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-one-item-three"
+                                )}
+                            </dd>
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-four"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-one-item-four"
+                                )}
+                            </dd>
+                        </div>
+                        <div class="govuk-summary-list__row">
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16  ">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-one"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-two-item-one"
+                                )}
+                            </dd>
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-two"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-two-item-two"
+                                )}{" "}
+                            </dd>
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-three"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-two-item-three"
+                                )}
+                            </dd>
+                            <dd class="govuk-summary-list__value govuk-!-font-size-16">
+                                <span class="results-visually-hidden">
+                                    {t(
+                                        "cookies:cookie-policy-list-heading-four"
+                                    )}
+                                    :
+                                </span>
+                                {t(
+                                    "cookies:cookie-policy-list-row-two-item-four"
+                                )}
+                            </dd>
+                        </div>
+                    </dl>
+
+                    <p className="govuk-body">
+                        {t("cookies:cookie-policy-browser-find-out-more")}{" "}
+                        <a
+                            href={t(
+                                "cookies:cookie-policy-browser-find-out-more"
+                            )}
+                        >
+                            {t(
+                                "cookies:cookie-policy-browser-find-out-more-link"
+                            )}
+                        </a>
+                        .
+                    </p>
+
+                    <h2 className="govuk-heading-l ">
+                        {t("cookies:cookie-policy-sub-heading-two")}
+                    </h2>
+
+                    <p className="govuk-body">
+                        {t("cookies:cookie-policy-paragraph-two")}
+                    </p>
+
+                    <p className="govuk-body">
+                        {t("cookies:cookie-policy-paragraph-three")}
+                        <a href="https://policies.google.com/privacy">
+                            {t("cookies:cookie-policy-paragraph-three-link-a")}
+                        </a>
+                        , {t("cookies:cookie-policy-paragraph-three-a")}{" "}
+                        <a href="https://policies.google.com/terms">
+                            {t("cookies:cookie-policy-paragraph-three-link-b")}
+                        </a>{" "}
+                        {t("cookies:cookie-policy-paragraph-three-b")}
+                    </p>
+
+                    <p className="govuk-body">
+                        {t("cookies:cookie-policy-paragraph-four")}
+                    </p>
+
+                    <p className="govuk-body">
+                        {t("cookies:cookie-policy-paragraph-five")}
+                    </p>
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default CookiePolicy;
diff --git a/components/cookiemanager/index.js b/components/cookiemanager/index.js
index fd3f9123..0106f181 100644
--- a/components/cookiemanager/index.js
+++ b/components/cookiemanager/index.js
@@ -28,7 +28,7 @@ const CookieManagementMain = (props) => {
         let expDate = new Date(now);
         expDate.setDate(now.getDate() + 365);
 
-        cookie.set("pinsCookiePolicy", JSON.stringify(values).toString(), {
+        cookie.set("CookiePolicy", JSON.stringify(values).toString(), {
             expires: expDate,
         });
         cookie.set("planning_casework", true, {
@@ -39,22 +39,20 @@ const CookieManagementMain = (props) => {
     let cookieCheck = parseCookies();
 
     let cookieObj =
-        typeof cookieCheck.pinsCookiePolicy == "undefined"
+        typeof cookieCheck.CookiePolicy == "undefined"
             ? {}
-            : JSON.parse(cookieCheck.pinsCookiePolicy);
+            : JSON.parse(cookieCheck.CookiePolicy);
 
     const [usageState, setUsageState] = useState(
-        typeof cookieCheck.pinsCookiePolicy == "undefined"
-            ? null
-            : cookieObj.usage
+        typeof cookieCheck.CookiePolicy == "undefined" ? null : cookieObj.usage
     );
     const [communicationsState, setCommunicationsState] = useState(
-        typeof cookieCheck.pinsCookiePolicy == "undefined"
+        typeof cookieCheck.CookiePolicy == "undefined"
             ? null
             : cookieObj.communications
     );
     const [settingsState, setSettingsState] = useState(
-        typeof cookieCheck.pinsCookiePolicy == "undefined"
+        typeof cookieCheck.CookiePolicy == "undefined"
             ? null
             : cookieObj.settings
     );
@@ -88,7 +86,7 @@ const CookieManagementMain = (props) => {
                             {t("cookies:cookie-title-heading")}
                         </h1>
                         <hr className="govuk-section-break govuk-section-break--visible" />
-                        {typeof cookieCheck.pinsCookiePolicy == "undefined" ? (
+                        {typeof cookieCheck.CookiePolicy == "undefined" ? (
                             <>
                                 <div className="govuk-inset-text paragraph--type--call-out-message">
                                     <h2 className="govuk-heading-l">
@@ -107,8 +105,7 @@ const CookieManagementMain = (props) => {
 
                         <div
                             className={
-                                typeof cookieCheck.pinsCookiePolicy !=
-                                "undefined"
+                                typeof cookieCheck.CookiePolicy != "undefined"
                                     ? "govuk-body govuk-!-margin-top-5"
                                     : "govuk-body"
                             }
@@ -226,7 +223,7 @@ const CookieManagementMain = (props) => {
                                         </div>
                                     </legend>
                                 </fieldset>
-                                <fieldset className="govuk-fieldset">
+                                {/* <fieldset className="govuk-fieldset">
                                     <legend className="govuk-fieldset__legend">
                                         <h4 className="govuk-!-font-size-27">
                                             {t(
@@ -297,7 +294,7 @@ const CookieManagementMain = (props) => {
                                             </label>
                                         </div>
                                     </div>
-                                </fieldset>
+                                </fieldset> */}
 
                                 <fieldset className="govuk-fieldset">
                                     <legend className="govuk-fieldset__legend">
@@ -399,16 +396,17 @@ const CookieManagementMain = (props) => {
                                             )}
                                         </p>
                                         <p className="govuk-body">
-                                            <a
-                                                className="govuk-link govuk-link--no-underline govuk-!-font-weight-bold"
+                                            <Link
                                                 href={t(
                                                     "cookies:cookie-settings-essential-link"
                                                 )}
                                             >
-                                                {t(
-                                                    "cookies:cookie-settings-essential-link-label"
-                                                )}
-                                            </a>
+                                                <a className="govuk-link govuk-link--no-underline govuk-!-font-weight-bold">
+                                                    {t(
+                                                        "cookies:cookie-settings-essential-link-label"
+                                                    )}
+                                                </a>
+                                            </Link>
                                         </p>
                                     </legend>
                                 </fieldset>
diff --git a/i18n.js b/i18n.js
index 1fa7971a..a04d18ba 100644
--- a/i18n.js
+++ b/i18n.js
@@ -33,5 +33,6 @@ module.exports = {
         "/dnsdetails": ["case", "search", "dnsCommon", "dnsApplications"],
         "/help/cookies": ["common", "cookies"],
         "/account/register": ["common", "account"],
+        "/details-about-cookies": ["common", "cookies"],
     },
 };
diff --git a/locales/cy/cookies.json b/locales/cy/cookies.json
index 7a89cc57..134bc5f0 100644
--- a/locales/cy/cookies.json
+++ b/locales/cy/cookies.json
@@ -1,22 +1,22 @@
 {
   "cookie-breadcrumb": "Cwcis",
-  "cookie-title-heading": "Cwcis ar Penderfyniadau Cynllunio a'r Amgylchedd Cymru",
+  "cookie-title-heading": "Cwcis ar cynllunio gwaith achos",
   "cookie-not-saved-heading": "Nid yw eich dewisiadau cwcis wedi eu cadw eto",
-  "cookie-not-saved-paragraph": "Mae Penderfyniadau Cynllunio a'r Amgylchedd 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-not-saved-paragraph": "Mae y gwasanaeth gwaith achos cynllunio 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 Penderfyniadau Cynllunio a'r Amgylchedd 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-2": "Rydym yn defnyddio cwcis i storio gwybodaeth ynghylch sut yr ydych yn defnyddio gwefan y gwasanaeth gwaith achos cynllunio, 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 o'r wefan",
   "cookie-settings-usage-paragraph-1": "Rydym yn defnyddio Google Analytics i fesur sut rydych yn defnyddio’r wefan er mwyn i ni ei gwella yn seiliedig ar anghenion defnyddwyr. Mae Google Analytics yn gosod cwcis sy’n storio gwybodaeth wedi’i hanonymeiddio ynghylch:",
   "cookie-settings-usage-list-item-1": "sut daethoch chi i’r safle",
-  "cookie-settings-usage-list-item-2": "y tudalennau yr ydych yn ymweld â nhw ar Penderfyniadau Cynllunio a'r Amgylchedd Cymru a gwasanaethau digidol y llywodraeth, a pha mor hir yr ydych chi'n treulio ar bob tudalen",
+  "cookie-settings-usage-list-item-2": "y tudalennau yr ydych yn ymweld â nhw ar y gwasanaeth gwaith achos cynllunio 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 gwcis 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 Penderfyniadau Cynllunio a'r Amgylchedd Cymru.",
+  "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 y gwasanaeth gwaith achos cynllunio.",
   "cookie-settings-communications-radio-1-label": "Peidiwch â defnyddio cwcis sy'n helpu gyda chyfathrebu a marchnata",
   "cookie-settings-communications-radio-2-label": "Defnyddiwch gwcis sy’n helpu gyda chyfathrebu a marchnata",
   "cookie-settings-settings-heading": "Cwcis sy'n cofio'ch gosodiadau",
@@ -28,7 +28,34 @@
   "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 Penderfyniadau Cynllunio a'r Amgylchedd Cymru.",
-  "cookie-settings-save-button-label": "Cadw newidiadau"
+  "cookie-settings-essential-link": "/manylion-am-gwcis",
+  "cookie-settings-essential-link-label": "Mwy o wybodaeth am cwcis ar y gwasanaeth gwaith achos cynllunio.",
+  "cookie-settings-save-button-label": "Cadw newidiadau",
+  "cookie-policy-title-heading": "Manylion am gwcis ar y gwasanaeth gwaith achos Cynllunio",
+  "cookie-policy-intro-paragraph": "Yn rhestru'r cwcis ar y gwasanaeth gwaith achos cynllunio ac yn egluro eu pwrpas.",
+  "cookie-policy-sub-heading-one": "Defnydd o gwcis gan y gwasanaeth gwaith achos Cynllunio",
+  "cookie-policy-paragraph-one": "Ffeiliau testun bach yw cwcis a anfonir at eich cyfrifiadur neu ddyfais symudol gan y gwefannau rydych chi'n ymweld â nhw. Maent yn helpu i wneud i wefannau weithio'n well a darparu gwybodaeth i berchnogion y wefan. Er enghraifft cwcis Google Analytics i olrhain ymddygiad defnyddwyr tra ar y wefan. Trwy ddeall sut mae pobl yn defnyddio ein gwefan, gallwn wella'r llywio a'r cynnwys i ddiwallu anghenion pobl yn well. Mae'r wybodaeth a gasglwyd gan & nbsp; Cynllunio Gwaith Achos & nbsp; yn cynnwys cyfeiriad IP, tudalennau yr ymwelwyd â hwy, porwr a system weithredu. Ni fydd y data'n cael ei ddefnyddio i adnabod unrhyw ddefnyddiwr yn bersonol. Y cwcis rydyn ni'n eu defnyddio ar ein gwefan yw:",
+  "cookie-policy-list-heading-one": "Cwcis",
+  "cookie-policy-list-heading-two": "Enw",
+  "cookie-policy-list-heading-three": "Pwrpas",
+  "cookie-policy-list-heading-four": "Yn dod i ben",
+  "cookie-policy-list-row-one-item-one": "GoogleAnalytics",
+  "cookie-policy-list-row-one-item-two": "_ga,_gid",
+  "cookie-policy-list-row-one-item-three": "Defnyddir y cwci hwn i ddarganfod sut mae ymwelwyr yn defnyddio ein gwefan. Rydym yn defnyddio'r wybodaeth i'n helpu i wella'r wefan. Mae'r cwci yn casglu gwybodaeth ar ffurf anhysbys, gan gynnwys gwybodaeth ddemograffig, nifer yr ymwelwyr â'r wefan, p'un a ydynt wedi ymweld o'r blaen a'r tudalennau y maent yn ymweld â hwy.",
+  "cookie-policy-list-row-one-item-four": "2 flynedd",
+  "cookie-policy-list-row-two-item-one": "CookieControl",
+  "cookie-policy-list-row-two-item-two": "planning_casework, CookiePolicy",
+  "cookie-policy-list-row-two-item-three": "Mae'r cwci hwn yn cofnodi a yw defnyddiwr wedi derbyn y defnydd o gwcis ar ein gwefan,",
+  "cookie-policy-list-row-two-item-four": "10 awr",
+  "cookie-policy-browser-find-out-more": "Mae porwyr gwe yn caniatáu rhywfaint o reolaeth ar gwcis trwy osodiadau porwr. I ddarganfod mwy am gwcis a sut i'w rheoli, ewch i ",
+  "cookie-policy-browser-find-out-more-link": "http://www.allaboutcookies.org/",
+  "cookie-policy-sub-heading-two": "Pa wybodaeth ydyn ni'n ei chasglu?",
+  "cookie-policy-paragraph-two": "Rydym yn defnyddio cwcis Google Analytics i helpu i fonitro gweithgaredd defnyddwyr, ac i nodi lle y gellir gwneud gwelliannau i'r wefan. Nid ydym yn casglu unrhyw wybodaeth bersonol (e.e. eich enw neu gyfeiriad) a fyddai’n gallu eich adnabod chi.",
+  "cookie-policy-paragraph-three": "Mae cwcis Google Analytics yn wasanaeth gwe a ddarperir gan Google Inc. (‘Google’) ac maent yn helpu i gasglu a dadansoddi gweithgaredd defnyddwyr. Bydd y wybodaeth a gesglir am eich defnydd o'r wefan (gan gynnwys eich cyfeiriad IP dienw) yn cael ei throsglwyddo i weinyddion Google yn yr Unol Daleithiau, a'i storio arni. Gweler polisi preifatrwydd Google, a Thelerau Gwasanaeth Google i gael gwybodaeth fanwl.",
+  "cookie-policy-paragraph-three-link-a": "Polisi preifatrwydd Google",
+  "cookie-policy-paragraph-three-a": "y",
+  "cookie-policy-paragraph-three-link-b": "Telerau Gwasanaeth Google",
+  "cookie-policy-paragraph-three-b": "am wybodaeth fanwl.",
+  "cookie-policy-paragraph-four": "Bydd Google yn defnyddio'r wybodaeth hon i gynhyrchu adroddiadau gweithgaredd defnyddwyr ar gyfer y wefan hon. Gall Google hefyd drosglwyddo'r wybodaeth hon i drydydd partïon lle mae'n ofynnol iddynt wneud hynny yn ôl y gyfraith, neu lle mae trydydd partïon o'r fath yn prosesu'r wybodaeth ar ran Google.",
+  "cookie-policy-paragraph-five": "Ni fydd Google yn cysylltu eich cyfeiriad IP ag unrhyw ddata arall a gedwir yn flaenorol. Gallwch wrthod defnyddio cwcis trwy ddewis y gosodiadau priodol ar eich porwr. Sylwch, os yw cwcis yn anabl, efallai na fyddwch yn gallu defnyddio swyddogaeth lawn y wefan hon. Trwy ddefnyddio'r wefan hon, rydych yn cydsynio i Google brosesu data amdanoch yn y modd ac at y dibenion a nodir uchod."
 }
\ No newline at end of file
diff --git a/locales/en/cookies.json b/locales/en/cookies.json
index f0032519..13b349c0 100644
--- a/locales/en/cookies.json
+++ b/locales/en/cookies.json
@@ -1,22 +1,22 @@
 {
   "cookie-breadcrumb": "Cookies",
-  "cookie-title-heading": "Cookies on Planning and Environment Decisions Wales",
+  "cookie-title-heading": "Cookies on planning casework",
   "cookie-not-saved-heading": "Your cookie settings have not yet been saved",
-  "cookie-not-saved-paragraph": "Planning and Environment Decisions 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-not-saved-paragraph": "The planning casework service 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 Planning and Environment Decisions Wales website, such as the pages  you visit. These cookies are not used to  identify you personally.",
+  "cookie-intro-paragraph-2": "We use cookies to store information about how  you use the the planning casework service 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 Planning and Environment Decisions Wales and government digital services, and how long you spend on each page",
+  "cookie-settings-usage-list-item-2": "the pages you visit on the planning casework service 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 Planning and Environment Decisions Wales.",
+  "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 the planning casework service.",
   "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",
@@ -28,7 +28,34 @@
   "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 Planning and Environment Decisions Wales.",
-  "cookie-settings-save-button-label": "Save changes"
+  "cookie-settings-essential-link": "/details-about-cookies",
+  "cookie-settings-essential-link-label": "Find out more about cookies on the planning casework service.",
+  "cookie-settings-save-button-label": "Save changes",
+  "cookie-policy-title-heading": "Details about cookies on the Planning casework service",
+  "cookie-policy-intro-paragraph": "Lists the cookies on the planning casework service aand explains their purpose.",
+  "cookie-policy-sub-heading-one": "Use of cookies by the Planning casework service",
+  "cookie-policy-paragraph-one": "Cookies are small text files sent to your computer or mobile device by the websites that you visit. They help make websites work better and provide information to the owners of the site. For instance Google Analytics cookies to track users’ behaviour whilst on the site. By understanding how people use our site, we can improve the navigation and content to better meet people’s needs. The information collected by&nbsp;Planning Casework&nbsp;includes IP address, pages visited, browser and operating system. The data will not be used to identify any user personally. The cookies we use on our site are:",
+  "cookie-policy-list-heading-one": "Cookie",
+  "cookie-policy-list-heading-two": "Name",
+  "cookie-policy-list-heading-three": "Purpose",
+  "cookie-policy-list-heading-four": "Expires",
+  "cookie-policy-list-row-one-item-one": "GoogleAnalytics",
+  "cookie-policy-list-row-one-item-two": "_ga,_gid",
+  "cookie-policy-list-row-one-item-three": "This cookie is used to find out how visitors use our site. We use the information to help us improve the site. The cookie collects information in an anonymous form, including demographic information, the number of visitors to the site, whether they have visited before and the pages they visit.",
+  "cookie-policy-list-row-one-item-four": "2 years",
+  "cookie-policy-list-row-two-item-one": "CookieControl",
+  "cookie-policy-list-row-two-item-two": "planning_casework, CookiePolicy",
+  "cookie-policy-list-row-two-item-three": "This cookie records whether a user has accepted the use of cookies on our site.",
+  "cookie-policy-list-row-two-item-four": "10 hours",
+  "cookie-policy-browser-find-out-more": "Web browsers allow some control of cookies through browser settings. To find out more about cookies and how to manage them, visit ",
+  "cookie-policy-browser-find-out-more-link": "http://www.allaboutcookies.org/",
+  "cookie-policy-sub-heading-two": "What information do we collect?",
+  "cookie-policy-paragraph-two": "We use Google Analytics cookies to help monitor user activity, and to identify where improvements can be made to the site. We do not collect any personal information (e.g. your name or address) that would be able to identify you.",
+  "cookie-policy-paragraph-three": "Google Analytics cookies are a web service provided by Google Inc. (‘Google’) and help to gather and analyse user activity. The information gathered about your use of the web site (including your anonymised IP address) will be transmitted to, and stored on Google servers in the United States. Please see the Google privacy policy, and Google's Terms of Service for detailed information.",
+  "cookie-policy-paragraph-three-link-a": "Google privacy policy",
+  "cookie-policy-paragraph-three-a": "and",
+  "cookie-policy-paragraph-three-link-b": "Google's Terms of Service",
+  "cookie-policy-paragraph-three-b": "for detailed information.",
+  "cookie-policy-paragraph-four": "Google will use this information to produce user activity reports for this website. Google may also transfer this information to third parties where required to do so by law, or where such third parties process the information on Google's behalf.",
+  "cookie-policy-paragraph-five": "Google will not associate your IP address with any other data previously held. You may refuse the use of cookies by selecting the appropriate settings on your browser. Please note that if cookies are disabled, you may not be able to use the full functionality of this website. By using this website, you consent to the processing of data about you by Google in the manner and for the purposes set out above."
 }
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index c7f4031b..e3e0aaa9 100644
--- a/next.config.js
+++ b/next.config.js
@@ -97,6 +97,10 @@ module.exports = {
                 source: "/preifatrwydd",
                 destination: "/privacy",
             },
+            {
+                source: "/manylion-am-gwcis",
+                destination: "/details-about-cookies",
+            },
 
             // {
             //     source: "/cy:path*",
diff --git a/pages/case/index.js b/pages/case/index.js
index 302b932f..667ccbf5 100644
--- a/pages/case/index.js
+++ b/pages/case/index.js
@@ -70,6 +70,9 @@ const Home = (props) => {
                             props.currentView.caseReference.appealType
                         }
                         incidentid={props.currentView.caseReference.incidentid}
+                        representationsObj={
+                            props.searchResultsObj.representationsObj
+                        }
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />
diff --git a/pages/details-about-cookies.js b/pages/details-about-cookies.js
new file mode 100644
index 00000000..0923c50b
--- /dev/null
+++ b/pages/details-about-cookies.js
@@ -0,0 +1,90 @@
+import _ from "lodash";
+import { useState, useEffect, useRef } from "react";
+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 Main from "../components/main";
+import Footer from "../components/footer";
+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 { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { getIncidents } from "../actions";
+import { parseCookies } from "nookies";
+import CookiePolicy from "../components/cookiePolicy";
+
+const CookieDetails = (props) => {
+    const { footerLinks, pages, showLogin } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <div>
+            <Head>
+                <title>{t("common:service-name")}</title>
+                {/* Language by default is EN, if multilingual site this will need updated */}
+                <meta
+                    key="og:locale"
+                    property="og:locale"
+                    content={router.locale}
+                />
+                {/* If they have a Twitter Handle, include the meta details below */}
+                <meta
+                    key="og:site_name"
+                    property="og:site_name"
+                    content={t("common:service-name")}
+                />
+                <meta
+                    key="twitter:site"
+                    property="twitter:site"
+                    content="@UKGovWales"
+                />
+
+                <meta
+                    name="description"
+                    content={t("common:service-description")}
+                />
+                <meta
+                    property="og:site_name"
+                    content={t("common:gov-wales-label")}
+                />
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content={t("common:gov-wales-link")} />
+                <meta
+                    property="og:image"
+                    content="https://gov.wales/themes/custom/govwales/images/content/og-global-1200.png"
+                />
+                <meta name="twitter:card" content="summary" />
+                <meta
+                    name="twitter:title"
+                    content={t("common:gov-wales-label")}
+                />
+                <meta
+                    name="twitter:url"
+                    content={t("common:gov-wales-link") + router.pathname}
+                />
+                <meta
+                    name="twitter:image"
+                    content="https://gov.wales/themes/custom/govwales/images/content/og-global-120.png"
+                />
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName="Appeals Casework Portal" />
+                <div className="govuk-width-container">
+                    <Breadcrumbs />
+                    <CookiePolicy />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export default CookieDetails; //connect(mapStateToProps)(Home);
diff --git a/pages/myportal/case.js b/pages/myportal/case.js
index 72cb3768..234ccecb 100644
--- a/pages/myportal/case.js
+++ b/pages/myportal/case.js
@@ -16,7 +16,7 @@ import useTranslation from "next-translate/useTranslation";
 import Case from "../../components/case";
 
 const Home = (props) => {
-    const { footerLinks, pages } = props;
+    const { footerLinks, pages, showRepresentations } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
@@ -73,6 +73,10 @@ const Home = (props) => {
                             props.currentView.caseReference.appealType
                         }
                         incidentid={props.currentView.caseReference.incidentid}
+                        representationsObj={
+                            props.searchResultsObj.representationsObj
+                        }
+                        showRepresentations={showRepresentations}
                     />
                 </div>
                 <Footer footerLinks={footerLinks} />
@@ -81,6 +85,21 @@ const Home = (props) => {
     );
 };
 
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) => async (ctx) => {
+        const { query, req, res } = ctx;
+
+        const showRepresentationsCheck =
+            process.env.SHOWREPRESENTATIONS || false;
+
+        console.log("Show representation module: ", showRepresentationsCheck);
+
+        return {
+            props: { showRepresentations: showRepresentationsCheck },
+        };
+    }
+);
+
 const mapStateToProps = (state) => {
     //console.log(state);
 
diff --git a/store/searchOutput/action.js b/store/searchOutput/action.js
index 5b2ee845..c4c1a60a 100644
--- a/store/searchOutput/action.js
+++ b/store/searchOutput/action.js
@@ -5,6 +5,7 @@ export const searchResultsActionTypes = {
     SETSEARCHDETAILS: "SETSEARCHDETAILS",
     SETDOCUMENTDETAILS: "SETDOCUMENTDETAILS",
     SETDOCUMENTHISTORY: "SETDOCUMENTHISTORY",
+    SETREPRESENTATIONS: "SETREPRESENTATIONS",
 };
 
 export const getSearchResultshObj = () => (dispatch) => {
@@ -39,3 +40,10 @@ export const setDocumentHistory = (documentHistory) => (dispatch) => {
         documentHistoryObj: documentHistory,
     });
 };
+
+export const setRepresentations = (representations) => (dispatch) => {
+    return dispatch({
+        type: searchResultsActionTypes.SETREPRESENTATIONS,
+        representationsObj: representations,
+    });
+};
diff --git a/store/searchOutput/reducer.js b/store/searchOutput/reducer.js
index 42e705af..e1b69a6d 100644
--- a/store/searchOutput/reducer.js
+++ b/store/searchOutput/reducer.js
@@ -5,6 +5,7 @@ const searchResultsInitialState = {
     searchDetailsObj: {},
     documentDetailsObj: {},
     documentHistoryObj: {},
+    representationsObj: {},
 };
 
 export default function reducer(state = searchResultsInitialState, action) {
@@ -29,6 +30,11 @@ export default function reducer(state = searchResultsInitialState, action) {
                 ...state,
                 documentHistoryObj: action.documentHistoryObj,
             };
+        case searchResultsActionTypes.SETREPRESENTATIONS:
+            return {
+                ...state,
+                representationsObj: action.representationsObj,
+            };
         default:
             return state;
     }