initial commit for welsh government planning appeals application

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

.gitignore

@@ -48,3 +48,23 @@ Thumbs.db
 *.mov
 *.wmv
 
+
+// .gitignore
+# next.js build output
+.next
+
+# dotenv environment variables file - set in pipeline as environment variables
+.env
+.env.build
+
+# Dependency directories
+node_modules/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#lock files
+yarn.lock
+package-lock.json

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 4,
+  "useTabs": false,
+"quoteProps":"preserve"
+}

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README 2.md

@@ -0,0 +1,66 @@
+## Setting up environment
+
+These instructions assumes that you already have Git installed and working
+You will need to install NodeJs [https://nodejs.org/en/download/](https://nodejs.org/en/download/)
+
+If you have necessary installation privileges
+
+-   download and run the installer version
+
+If you dont have privileges
+
+-   download the zip archive
+-   extract the folder to your environment
+-   Add the path to this folder in to your PATH Environment Variable
+-   verify installation by opening a new terminal window and do the following
+
+```bash
+node -v
+```
+
+-   verify npm by typing the following
+
+```bash
+npm -v
+```
+
+Next, Clone the repository from Azure DevOps to a relevant folder
+
+Open a terminal window to this folder and install the packages needed:
+
+```bash
+npm install
+```
+
+if there is an error message regarding access via the proxy
+
+```bash
+npm config set proxy "http://domain\username:password@servername:port/"
+```
+
+or unable to get packages try the following:
+
+```bash
+npm config set registry "http://registry.npmjs.org/"
+```
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+Note: there may be a firewall message pop up.....
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

README.md

@@ -0,0 +1,24 @@
+# Introduction 
+ PINS Frontend APC and DNS portal
+
+# Getting Started
+OFM Communications
+
+Simon Matthews 
+Serice URL
+https://gov.wales/domain-names#section-33014
+https://www.gov.uk/service-manual/design/naming-your-service
+
+Accessability
+Footers - Accesability 
+https://www.gov.uk/service-manual/design/naming-your-service
+
+Roland Allan
+https://gov.wales/footer-guidance-govwales-products
+https://gov.wales/accessibility-standards-govwales
+https://gov.wales/appeal-or-search-planning-decision-or-notice
+
+# Build and Test
+
+
+# Contribute

actions/index.js

@@ -0,0 +1,305 @@
+import axios from "axios";
+import https from "https";
+//import {XMLHttpRequest} from 'xmlhttprequest';
+
+process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = 0;
+
+let BASE_URL;
+const port = parseInt(process.env.PORT, 10) || 3000;
+
+if (process.browser) {
+    BASE_URL = window.apiRoot;
+} else {
+    BASE_URL = process.env.API_ROOT || `http://localhost:${port}`;
+}
+
+const agent = new https.Agent({
+    rejectUnauthorized: false,
+});
+const crmHeaders = {
+    withCredentials: true,
+    headers: {
+        "Content-Type": "application/json; charset=utf-8",
+        "OData-MaxVersion": "4.0",
+        "OData-Version": "4.0",
+        "Accept": "application/json",
+        "Prefer": 'odata.include-annotations="*"',
+        agent,
+    },
+    auth: {
+        username: "xm\bondr",
+        password: "!Sky9fish1972",
+    },
+};
+
+export const getBasicSearch = (searchString) => {
+    console.log("got to axios", searchString);
+    console.log("api_root: ", BASE_URL);
+    return (
+        axios
+            //.get("https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title&$filter=contains(title, '" + searchString + "')&$count=true", crmHeaders)
+            //.get("https://jsonplaceholder.typicode.com/todos/1",{proxy:{protocol: 'http',host:'lon3.sme.zscloud.net',port: 80}})
+            .get(BASE_URL + "/api/searchresults2", {
+                httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+            })
+            .then((res) => res.data)
+            .catch((error) => {
+                console.log("thiserror", error);
+            })
+    );
+};
+
+export const getFormData = (whichForm) => {
+    console.log("got to axios", whichForm);
+    console.log("api_root: ", BASE_URL);
+    return (
+        axios
+            //.get("api/appealforms/pinswg_dns", {
+            //.get("api/appealforms/pinswg_planningobligationappeals106", {
+            //.get("api/appealforms/pinswg_planningconditionss73s79", {
+            //.get("api/appealforms/pinswg_row", {
+            //.get("api/appealforms/pinswg_transportandworkact", {
+            //.get("api/appealforms/pinswg_harbourrevisionorder", {
+            //.get("api/appealforms/pinswg_planningappeals78", {
+            //.get(api/appealforms/pinswg_householderappealhas", {
+            .get(BASE_URL + "/api/appealforms/pinswg_" + whichForm, {
+                httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+            })
+            .then((res) => res.data)
+            .catch((error) => {
+                console.log("thiserror", error);
+            })
+    );
+};
+
+export const getAppealsTypes = () => {
+    console.log("got to axios: appeal types");
+    console.log("api_root: ", BASE_URL);
+    return axios
+        .get(BASE_URL + "/api/lookups/pinswg_appealcasetype", {
+            httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+        })
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thiserror", error);
+        });
+};
+
+export const getBasicSearch2 = (searchString) => {
+    var req = new XMLHttpRequest();
+    req.open(
+        "GET",
+        "https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title&$filter=contains(title, '" +
+            searchString +
+            "')&$count=true",
+        true
+    );
+    req.setRequestHeader("OData-MaxVersion", "4.0");
+    req.setRequestHeader("OData-Version", "4.0");
+    req.setRequestHeader("Accept", "application/json");
+    req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
+    req.setRequestHeader("Prefer", 'odata.include-annotations="*"');
+    req.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            req.onreadystatechange = null;
+            if (this.status === 200) {
+                var results = JSON.parse(this.response);
+                var recordCount = results["@odata.count"];
+                for (var i = 0; i < results.value.length; i++) {
+                    var _accountid_value = results.value[i]["_accountid_value"];
+                    var _accountid_value_formatted =
+                        results.value[i][
+                            "_accountid_value@OData.Community.Display.V1.FormattedValue"
+                        ];
+                    var _accountid_value_lookuplogicalname =
+                        results.value[i][
+                            "_accountid_value@Microsoft.Dynamics.CRM.lookuplogicalname"
+                        ];
+                    var _customerid_value =
+                        results.value[i]["_customerid_value"];
+                    var _customerid_value_formatted =
+                        results.value[i][
+                            "_customerid_value@OData.Community.Display.V1.FormattedValue"
+                        ];
+                    var _customerid_value_lookuplogicalname =
+                        results.value[i][
+                            "_customerid_value@Microsoft.Dynamics.CRM.lookuplogicalname"
+                        ];
+                    var pinswg_appealcasetype =
+                        results.value[i]["pinswg_appealcasetype"];
+                    var pinswg_appealcasetype_formatted =
+                        results.value[i][
+                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                        ];
+                    var statuscode = results.value[i]["statuscode"];
+                    var ticketnumber = results.value[i]["ticketnumber"];
+                    var title = results.value[i]["title"];
+                }
+            } else {
+                console.log(this.statusText);
+            }
+        }
+    };
+    return req.send();
+};
+
+//get list of entitydefinitions
+//https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/EntityDefinitions?$select=LogicalName
+
+// get list of appealtypes
+//https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/stringmaps?$filter=attributename%20eq%20%27pinswg_appealcasetype%27&$count=true
+
+//get crm xml form for appealtype
+//https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/systemforms?$select=formid,name,formxml&$filter=(objecttypecode%20eq%20%27pinswg_dns%27and%20type%20eq%202)&$count=true
+// then use regex to remove the escape
+// convert xml to json and return
+// promise example
+// var xml2js = require('xml2js');
+// var xml = '<foo></foo>';
+
+// // With parser
+// var parser = new xml2js.Parser(/* options */);
+// parser.parseStringPromise(data).then(function (result) {
+//   console.dir(result);
+//   console.log('Done');
+// })
+// .catch(function (err) {
+//   // Failed
+// });
+
+export const getAppealTypeDetail = (caseReference, appealcasetype) => {
+    console.log("got to axios", searchString);
+    console.log("api_root: ", BASE_URL);
+    // example appealcasetype type pinswg_householderappealhases
+    return axios
+        .get(
+            "https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/" +
+                appealcasetype +
+                "?$filter=pinswg_name eq '" +
+                caseReference +
+                "'",
+            { httpsAgent: new https.Agent({ rejectUnauthorized: false }) }
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thi serror", error);
+        });
+};
+//https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/pinswg_planningappeals78s?$filter=pinswg_name eq 'CAS-00015-L7J9H1'
+
+export const getLPA = () => {
+    console.log("api_root: ", BASE_URL);
+    return axios
+
+        .get(
+            BASE_URL + "/api/lookups/pinswg_lpa",
+            //.get("https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/accounts?$select=name",
+            { httpsAgent: new https.Agent({ rejectUnauthorized: false }) }
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thi serror", error);
+        });
+};
+
+export const getPersonalAccount = () => {
+    console.log("api_root: ", BASE_URL);
+    return axios
+
+        .get(
+            BASE_URL + "/api/lookups/personaldetails",
+            //.get("https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/contacts?$select=name",
+            { httpsAgent: new https.Agent({ rejectUnauthorized: false }) }
+        )
+        .then((res) => res.data)
+        .catch((error) => {
+            console.log("thi serror", error);
+        });
+};
+
+function makeid(length) {
+    var result = "";
+    var characters =
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    var charactersLength = characters.length;
+    for (var i = 0; i < length; i++) {
+        result += characters.charAt(
+            Math.floor(Math.random() * charactersLength)
+        );
+    }
+    return result;
+}
+
+export const createCase = (lpaType, appealType) => {
+    console.log();
+
+    const lastPart = makeid(6);
+
+    const middlePart = Math.floor(100000 + Math.random() * 900000);
+
+    return "CAS-" + middlePart + "-" + lastPart.toUpperCase();
+};
+
+// var req = new XMLHttpRequest();
+// req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.2/incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title&$filter=contains(title, '000')&$count=true", true);
+// req.setRequestHeader("OData-MaxVersion", "4.0");
+// req.setRequestHeader("OData-Version", "4.0");
+// req.setRequestHeader("Accept", "application/json");
+// req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
+// req.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
+// req.onreadystatechange = function() {
+//     if (this.readyState === 4) {
+//         req.onreadystatechange = null;
+//         if (this.status === 200) {
+//             var results = JSON.parse(this.response);
+//             var recordCount = results["@odata.count"];
+//             for (var i = 0; i < results.value.length; i++) {
+//                 var _accountid_value = results.value[i]["_accountid_value"];
+//                 var _accountid_value_formatted = results.value[i]["_accountid_value@OData.Community.Display.V1.FormattedValue"];
+//                 var _accountid_value_lookuplogicalname = results.value[i]["_accountid_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
+//                 var _customerid_value = results.value[i]["_customerid_value"];
+//                 var _customerid_value_formatted = results.value[i]["_customerid_value@OData.Community.Display.V1.FormattedValue"];
+//                 var _customerid_value_lookuplogicalname = results.value[i]["_customerid_value@Microsoft.Dynamics.CRM.lookuplogicalname"];
+//                 var pinswg_appealcasetype = results.value[i]["pinswg_appealcasetype"];
+//                 var pinswg_appealcasetype_formatted = results.value[i]["pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"];
+//                 var statuscode = results.value[i]["statuscode"];
+//                 var ticketnumber = results.value[i]["ticketnumber"];
+//                 var title = results.value[i]["title"];
+//             }
+//         } else {
+//             Xrm.Utility.alertDialog(this.statusText);
+//         }
+//     }
+// };
+// req.send();
+
+// //jquery version to get case number from an lpa and an appeal type
+// var entity = {};
+// entity.caseorigincode = 3;
+// entity["customerid_account@odata.bind"] = "/accounts(c75f6f84-49da-eb11-aabd-00224800d1bd)";
+// entity.pinswg_appealcasetype = 846040004;
+
+// $.ajax({
+//     type: "POST",
+//     contentType: "application/json; charset=utf-8",
+//     datatype: "json",
+//     url: Xrm.Page.context.getClientUrl() + "/api/data/v8.2/incidents",
+//     data: JSON.stringify(entity),
+//     beforeSend: function(XMLHttpRequest) {
+//         XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
+//         XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
+//         XMLHttpRequest.setRequestHeader("Accept", "application/json");
+//         XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\",return=representation");
+//     },
+//     async: true,
+//     success: function(data, textStatus, xhr) {
+//         var uri = xhr.getResponseHeader("OData-EntityId");
+//         var regExp = /\(([^)]+)\)/;
+//         var matches = regExp.exec(uri);
+//         var newEntityId = matches[1];
+//         //Handle returned attributes
+//     },
+//     error: function(xhr, textStatus, errorThrown) {
+//         Xrm.Utility.alertDialog(textStatus + " " + errorThrown);
+//     }
+// });

api/applicant.json

@@ -0,0 +1,2 @@
+{"@odata.context":"https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/$metadata#contacts(address1_addressid,address1_addresstypecode,address1_city,address1_country,address1_county,address1_fax,firstname,lastname)",value:[0:{@odata.etag:"W/"509484"",address1_addressid:"6c267cf9-1ba2-4e38-9f48-2b94a341e392",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname: null ,lastname:"Trembath",contactid:"9d481bc3-7c64-eb11-aaba-00224800be9c"},1:{@odata.etag:"W/"509501"",address1_addressid:"9a546d64-b7b5-42bf-bafd-b547e718fddd",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname: null ,lastname:"Jones",contactid:"1e2e0e6f-7e64-eb11-aaba-00224800be9c"},2:{@odata.etag:"W/"509506"",address1_addressid:"214e5b63-9bc8-478a-90e2-39417d9e096b",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname: null ,lastname:"Thomas",contactid:"d1658f77-7e64-eb11-aaba-00224800be9c"},3:{@odata.etag:"W/"694902"",address1_addressid:"6258fd0c-2d18-41dd-b629-123c880f16a1",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"James",lastname:"Hollowhead",contactid:"755e07ea-82ad-eb11-aac3-00224800be9c"},4:{@odata.etag:"W/"694906"",address1_addressid:"436104d2-5ee0-4494-b0f8-3059f738e9cf",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"T",lastname:"Gillbert",contactid:"b8022d00-83ad-eb11-aac3-00224800be9c"},5:{@odata.etag:"W/"694910"",address1_addressid:"36e9cccc-ac84-4023-ae92-d6b9556d8ddf",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"Mike",lastname:"Parker",contactid:"99b3220f-83ad-eb11-aac3-00224800be9c"},6:{@odata.etag:"W/"694914"",address1_addressid:"83169722-1283-4a4c-b346-28f50cd208cd",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"Lloyd",lastname:"Evans",contactid:"5bee9821-83ad-eb11-aac3-00224800be9c"},7:{@odata.etag:"W/"694918"",address1_addressid:"a164b5d8-f9d2-46d4-b97b-b59327173f0a",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"Mr",lastname:"Bartlett",contactid:"c2be7d2e-83ad-eb11-aac3-00224800be9c"},8:{@odata.etag:"W/"709237"",address1_addressid:"b75d552e-3896-46a7-bd65-a743f457f119",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"Zoe",lastname:"Dawson",contactid:"003eef05-29ba-eb11-aac4-00224800be9c"},9:{@odata.etag:"W/"750707"",address1_addressid:"34bbd453-7d23-4c17-806e-1edf2e981cc8",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"Appellant Contact",lastname:"Gary Trembath",contactid:"985cc5f8-1dd8-eb11-aac5-00224800be9c"},10:{@odata.etag:"W/"750703"",address1_addressid:"20ce70a9-571c-4a81-b410-f521d64d3dcb",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address1_fax: null ,firstname:"Agent Contact",lastname:"Gary Trembath",contactid:"9eb124a5-1ed8-eb11-aac5-00224800be9c"},11:{@odata.etag:"W/"750860"",address1_addressid:"a6a4641c-0875-4d5e-8360-99355eb73ee4",address1_addresstypecode: null ,address1_city: null ,address1_country: null ,address1_county: null ,address
+    

api/lpa.json

@@ -0,0 +1 @@
+0:{@odata.context:"https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/$metadata#accounts(name)",value:[0:{@odata.etag:"W/"547952"",name:"Bridgend CBC",accountid:"56e7ef63-7e64-eb11-aaba-00224800be9c"},1:{@odata.etag:"W/"694923"",name:"Bishop Landaff High School",accountid:"c9389617-82ad-eb11-aac3-00224800be9c"},2:{@odata.etag:"W/"694925"",name:"Stanwell High school",accountid:"24537624-82ad-eb11-aac3-00224800be9c"},3:{@odata.etag:"W/"694927"",name:"Barry Boys High School",accountid:"80d99a34-82ad-eb11-aac3-00224800be9c"},4:{@odata.etag:"W/"694929"",name:"St Sirus High School",accountid:"6d337b5a-82ad-eb11-aac3-00224800be9c"},5:{@odata.etag:"W/"694931"",name:"Fitzalan High School",accountid:"984d0e75-82ad-eb11-aac3-00224800be9c"},6:{@odata.etag:"W/"709453"",name:"Zoe",accountid:"41fead24-29ba-eb11-aac4-00224800be9c"},7:{@odata.etag:"W/"755017"",name:"Blaenau Gwent County Borough Council",accountid:"744c69f4-48da-eb11-aac5-00224800be9c"},8:{@odata.etag:"W/"755020"",name:"Caerphilly County Borough Council",accountid:"243c0009-49da-eb11-aac5-00224800be9c"},9:{@odata.etag:"W/"755026"",name:"Bridgend County Borough Council",accountid:"c35f6f84-49da-eb11-aabd-00224800d1bd"},10:{@odata.etag:"W/"755029"",name:"Cardiff Council",accountid:"c75f6f84-49da-eb11-aabd-00224800d1bd"},11:{@odata.etag:"W/"755032"",name:"Carmarthenshire County Council",accountid:"c95f6f84-49da-eb11-aabd-00224800d1bd"},12:{@odata.etag:"W/"755035"",name:"Ceredigion County Council",accountid:"cb5f6f84-49da-eb11-aabd-00224800d1bd"},13:{@odata.etag:"W/"755038"",name:"Conwy County Borough Council",accountid:"cd5f6f84-49da-eb11-aabd-00224800d1bd"},14:{@odata.etag:"W/"755041"",name:"Denbighshire County Council",accountid:"cf5f6f84-49da-eb11-aabd-00224800d1bd"},15:{@odata.etag:"W/"755044"",name:"Flintshire County Council",accountid:"d15f6f84-49da-eb11-aabd-00224800d1bd"},16:{@odata.etag:"W/"755047"",name:"Gwynedd Council",accountid:"d35f6f84-49da-eb11-aabd-00224800d1bd"},17:{@odata.etag:"W/"755050"",name:"Isle of Anglesey County Council",accountid:"d55f6f84-49da-eb11-aabd-00224800d1bd"},18:{@odata.etag:"W/"755053"",name:"Merthyr Tydfil County Borough Council",accountid:"d75f6f84-49da-eb11-aabd-00224800d1bd"},19:{@odata.etag:"W/"755056"",name:"Monmouthshire County Council",accountid:"d95f6f84-49da-eb11-aabd-00224800d1bd"},20:{@odata.etag:"W/"755059"",name:"Neath Port Talbot County Borough Council",accountid:"db5f6f84-49da-eb11-aabd-00224800d1bd"},21:{@odata.etag:"W/"755062"",name:"Newport City Council",accountid:"dd5f6f84-49da-eb11-aabd-00224800d1bd"},22:{@odata.etag:"W/"755065"",name:"Pembrokeshire County Council",accountid:"df5f6f84-49da-eb11-aabd-00224800d1bd"},23:{@odata.etag:"W/"755068"",name:"Powys County Council",accountid:"e15f6f84-49da-eb11-aabd-00224800d1bd"},24:{@odata.etag:"W/"755071"",name:"Rhondda Cynon Taf County Borough Council",accountid:"e35f6f84-49da-eb11-aabd-00224800d1bd"},25:{@odata.etag:"W/"755074"",name:"Swansea Council",accountid:"e55f6f84-49da-eb11-aabd-00224800d1bd"},26:{@odata.etag:"W/"755077"",name:"Torfaen County Borough Council",accountid:"e75f6f84-49da-eb11-aabd-00224800d1bd"},27:{@odata.etag:"W/"755080"",name:"Vale of Glamorgan Council",accountid:"e95f6f84-49da-eb11-aabd-00224800d1bd"},28:{@odata.etag:"W/"755083"",name:"Wrexham County Borough Council",accountid:"eb5f6f84-49da-eb11-aabd-00224800d1bd"}]}

azure-pipelines.yml

@@ -0,0 +1,37 @@
+# Node.js
+# Build a general Node.js project with npm.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
+
+trigger:
+    - main
+
+pool:
+    vmImage: ubuntu-latest
+
+steps:
+    - task: NodeTool@0
+      inputs:
+          versionSpec: "10.x"
+      displayName: "Install Node.js"
+
+    - script: |
+          npm install
+          npm run build
+      displayName: "npm install and build"
+
+    - task: CopyFiles@2
+      displayName: "Copy Files to: $(build.artifactstagingdirectory)"
+      inputs:
+          Contents: |
+              **/*
+              !node_modules/**/*
+              !.git/**/*
+          TargetFolder: "$(build.artifactstagingdirectory)"
+
+    - task: PublishBuildArtifacts@1
+      displayName: "Publish Artifact: drop"
+      inputs:
+          PathtoPublish: "$(Build.ArtifactStagingDirectory)"
+          ArtifactName: "drop"
+          publishLocation: "Container"

certificates/certificate.crt

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDjTCCAnWgAwIBAgIUVcGexO0o2d+pgVMwkIdrnBI9L5QwDQYJKoZIhvcNAQEL
+BQAwVjELMAkGA1UEBhMCVUsxDzANBgNVBAgMBlN1c3NleDETMBEGA1UEBwwKRWFz
+dGJvdXJuZTEhMB8GA1UECgwYSW50ZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMB4XDTIx
+MDcwNTExMTcwNVoXDTIyMDcwNTExMTcwNVowVjELMAkGA1UEBhMCVUsxDzANBgNV
+BAgMBlN1c3NleDETMBEGA1UEBwwKRWFzdGJvdXJuZTEhMB8GA1UECgwYSW50ZXJu
+ZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC
+AQEAxzfQqGriUq8sKeWmgkgFssCDfsBLwijhP9nMVSCSwyWgxMZlGtj/Wbyf20Sl
+cg7X3jj2rGEWU3TkJtNUwjQcYRRK2+QlC3bQMIJEfe0JXqkeMWSwR3Fs0IE7lzYf
+CVHtcu7Z8muSEvinGULhg8jjBYp9mknjokjdwEy/eI7UYHEQx0sziapgAUITgSpL
+45qZvgw3BJShq/En3DYX0dIiX2yswagOFUBPtCeFaP3LsPh0kTOPxhv9Y3SxQfPV
+dTq3719HGVSLgQs18F82HxZeXjxAUqV+Sl5an5DnArRtFA3U34IDXkpc9RiLtoYb
+GDrJuyt1TzpAxoBr8Ld5ySRDqQIDAQABo1MwUTAdBgNVHQ4EFgQUNZqF/sycnZe5
+t6scKrWbEnW4Dc8wHwYDVR0jBBgwFoAUNZqF/sycnZe5t6scKrWbEnW4Dc8wDwYD
+VR0TAQH/BAUwAwEB/zANBgkqhkiG9w0BAQsFAAOCAQEALs3OiGk6Xj7d51rChPsg
+JL05Vj/DbI7Rr3jj2vGcNVd0GfIH9zrX0AMj6Uzxt8LCyI3QtrgzYSw9sKh9Q9I3
+3h7sIBm9zXV5gbMSG3rAl965ryiQt4INKUamz1XLQKvaMRvHD/DmRmIbFo399gYN
+duZQdwqdKavZ6wOw3GRmtjBlUzxO7DCrJMFsj7dfNqHSrZiwScNItArLecYeYQYg
+npjsvJekpSQLjvvjVuHLfEp+vNH6liL7qFFcBzUgwISFvcAI99e/zZtewkb3Vw+7
++7wbMgpibU1kbL9Bpru8PS89CsVGEh1TmzO3e8j1GnYAcnzRe70IzOTdMUE0AEg6
+FA==
+-----END CERTIFICATE-----

certificates/privateKey.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDHN9CoauJSrywp
+5aaCSAWywIN+wEvCKOE/2cxVIJLDJaDExmUa2P9ZvJ/bRKVyDtfeOPasYRZTdOQm
+01TCNBxhFErb5CULdtAwgkR97QleqR4xZLBHcWzQgTuXNh8JUe1y7tnya5IS+KcZ
+QuGDyOMFin2aSeOiSN3ATL94jtRgcRDHSzOJqmABQhOBKkvjmpm+DDcElKGr8Sfc
+NhfR0iJfbKzBqA4VQE+0J4Vo/cuw+HSRM4/GG/1jdLFB89V1OrfvX0cZVIuBCzXw
+XzYfFl5ePEBSpX5KXlqfkOcCtG0UDdTfggNeSlz1GIu2hhsYOsm7K3VPOkDGgGvw
+t3nJJEOpAgMBAAECggEBAKkkd5F25l+jgRC1fhEhS01AbKTCadAY215V8knYlSMB
+IKXReGg6E1vCbctCVmInvhpcLPugls8W8NsSFOWqTuoRy5k09Erufsag47wy9ACe
+ABeZ0J1n7SZ+gvTYq7NDDyLFLuDHekeHPICTK1uzxSSgOBI2aAISccxinTKjuieC
+eEtcBSu66g+cvyKGZglzfd4ugNDIaH9ibIFYPJzexw3lAz9j3mKpccxGsokFGw7T
+qwovML2I9+laD1N23H9lJ2YLr73uqusI0cxsCvGwRtBHHIEsR6aL43GAMG7TtWw/
+BoSECBZHRE+RxDjAab0XmrhcD3kf5v1DFk+Bnh+2rYECgYEA57w/tw9SmJ//PLMz
+6siHkx6vzvD2bdAKsinXkR987vYHmlpISKf2VeN02aj6BND2KM9OSCMNzaD+Hz0c
+Uv+5RInpr4LpBmDiRPOyTkJjFEuM1ZSgAm01wGY8k8CuHnZs3ueJaSZMmCXmEC8G
+F4v/K+nMiOcbl8f23tUOmmJ1KnECgYEA3BPtb64DfBTcnbGvBzZU1WoPOWe8ujFg
+yjICX4elKr2jlOzrdw4eU4peU3jVXl+sDPw++NKWUimhdcuimLF7lfOi3VUM8DWr
+cCMWfvwFc7URv/42UltN58p6/FceU5WzF+785r8N2tyOtKi81Dsz5uDIytMuqmft
+MRlu56FeGLkCgYAiyklKg1tkHIkmJMVDl017Ud0VFWn5vIUOkGeTmwWXnoovqyQ0
+/DpoVJijYNIATRrXr5/SBqk42NWt/O+2qju3RXk251FyqrLtpSR8yUy0rE79da28
+D4dFVlP73q6FVkQsBtjDV4OiR/ZNMbIZcOQjRJt3ZjLnS5cNhzEFDokGkQKBgQCm
+th295NbU7sS0XD4XO4wF4oLH3JJ1hSQp5rovfYSbnO5GyTYRiMtmQ0Hy/2y6QcUG
+TSqyuGuQr+KUZf60pnXVAKtV+LCFYlKM7reC2AyVOwvIIZ0qw+l+9b42WxQpAxSY
+w7wmW4H2Ue90YQIxzushMRRJuLH3+iQOdpKxumaaWQKBgH5HMvJLiueY1pRMomnQ
+fAirquPPeqILTGmnfNhNm+8Fv2HHNUHmfSdMOxK15g+RPEJRDERRDhdLHOep0Lx9
+AVcINmkeQVChWcPu1LwoNt0c0AZbB/vDUSh5GadC/dFV85xb58C+Fc7WYvOIYwS4
+KvvWnCWcue5qxZCd2G+6oNx/
+-----END PRIVATE KEY-----

components/account/changepassword.js

@@ -0,0 +1,181 @@
+import _ from "lodash";
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import {
+    Field,
+    reduxForm,
+    formValueSelector,
+    getFormSubmitErrors,
+} from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import {
+    Textfield,
+    DateField,
+    DateFieldPicker,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+    DecimalField,
+} from "../elements";
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    type,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {touched &&
+                            ((error && (
+                                <span>{errorMsg ? errorMsg : error}</span>
+                            )) ||
+                                (warning && <span>{warning}</span>))}
+                    </span>
+                )}
+                <input
+                    {...input}
+                    className={className}
+                    name={name}
+                    id={id}
+                    type={type}
+                />
+            </div>
+        </>
+    );
+};
+
+const ChangePassword = (props) => {
+    const { footerLinks, pages, handleSubmit, value } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    let errorsobj = {};
+
+    const onHandleSubmit = (values) => {
+        console.log(values);
+    };
+
+    const required = (value) => (value ? undefined : "Is required");
+
+    const matchInput = (input, allInputs) => {
+        return input === allInputs.password
+            ? undefined
+            : "Passwords do not match";
+    };
+
+    const email = (value) =>
+        value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+            ? "Invalid email address"
+            : undefined;
+    const phoneNumber = (value) =>
+        value &&
+        !/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
+            value
+        )
+            ? "Invalid phone number"
+            : undefined;
+
+    const [hasErrors, setHasErrors] = useState("");
+
+    return (
+        <>
+            {/* {hasErrors == true ? (
+                <ShowErrorHeader
+                    hasErrors={hasErrors}
+                    props={props.props.form}
+                    formXML={formXML}
+                />
+            ) : (
+                ""
+            )} */}
+            <form onSubmit={handleSubmit(onHandleSubmit)}>
+                <fieldset className="govuk-fieldset">
+                    <Field
+                        name="newpassword"
+                        id="newpassword"
+                        component={RenderTextfield}
+                        type="password"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label="New password"
+                    />
+                    <Field
+                        name="confirmpassword"
+                        id="confirmpassword"
+                        component={RenderTextfield}
+                        type="password"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[matchInput]}
+                        label="Confirm new password"
+                    />
+                </fieldset>
+
+                <div className="govuk-button-group">
+                    <button
+                        type="submit"
+                        className="govuk-button"
+                        data-module="govuk-button"
+                    >
+                        Continue
+                    </button>
+                </div>
+            </form>
+        </>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+const selector = formValueSelector("changepasswordForm"); // <-- same as form name
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "changepasswordForm",
+        destroyOnUnmount: false,
+    })(ChangePassword)
+);

components/account/personaldetails.js

@@ -0,0 +1,314 @@
+import _ from "lodash";
+import Link from "next/link";
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import {
+    Field,
+    reduxForm,
+    formValueSelector,
+    getFormSubmitErrors,
+} from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import {
+    Textfield,
+    DateField,
+    DateFieldPicker,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+    DecimalField,
+} from "../elements";
+import BuildCheckPersonalDetails from "./personaldetailsCheck";
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    type,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {touched &&
+                            ((error && (
+                                <span>{errorMsg ? errorMsg : error}</span>
+                            )) ||
+                                (warning && <span>{warning}</span>))}
+                    </span>
+                )}
+                <input
+                    {...input}
+                    className={className}
+                    name={id}
+                    id={id}
+                    type={type}
+                />
+            </div>
+        </>
+    );
+};
+
+const PersonalDetails = (props) => {
+    const { footerLinks, pages, handleSubmit, value } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    let errorsobj = {};
+
+    const onHandleSubmit = (values) => {
+        console.log(values);
+    };
+
+    const required = (value) => (value ? undefined : "Is required");
+    const email = (value) =>
+        value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+            ? "Invalid email address"
+            : undefined;
+    const phoneNumber = (value) =>
+        value &&
+        !/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
+            value
+        )
+            ? "Invalid phone number"
+            : undefined;
+
+    const [hasErrors, setHasErrors] = useState("");
+
+    const [personalDetailsComplete, setPersonalDetailsComplete] =
+        useState(false);
+
+    return (
+        <>
+            {/* {hasErrors == true ? (
+                <ShowErrorHeader
+                    hasErrors={hasErrors}
+                    props={props.props.form}
+                    formXML={formXML}
+                />
+            ) : (
+                ""
+            )} */}
+
+            {personalDetailsComplete == false ? (
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <fieldset className="govuk-fieldset">
+                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+                            <h2 className="govuk-fieldset__heading">
+                                About you
+                            </h2>
+                        </legend>
+                        <Field
+                            name="firstname"
+                            id="firstname"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-20"
+                            validate={[required]}
+                            label="First name"
+                            errorMsg="Is required"
+                        />
+                        <Field
+                            name="lastname"
+                            id="lastname"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-20"
+                            validate={[required]}
+                            label="Last name"
+                            errorMsg="Is required"
+                        />
+                        <Field
+                            name="email"
+                            id="email"
+                            component={RenderTextfield}
+                            type="email"
+                            className="govuk-input govuk-input--width-20"
+                            validate={[required, email]}
+                            label="Email address"
+                        />
+                        <Field
+                            name="telephone"
+                            id="telephone"
+                            component={RenderTextfield}
+                            type="number"
+                            className="govuk-input govuk-input--width-20"
+                            validate={[required, phoneNumber]}
+                            label="Telephone"
+                        />
+
+                        <Field
+                            name="companygroup"
+                            id="companygroup"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-20"
+                            label="Company/Group"
+                            errorMsg="Is required"
+                        />
+                    </fieldset>
+                    <fieldset className="govuk-fieldset">
+                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+                            <h2 className="govuk-fieldset__heading">
+                                What is your address?
+                            </h2>
+                        </legend>
+
+                        <Field
+                            name="addressline1"
+                            id="addressline1"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-20"
+                            label="Address line 1"
+                            validate={[required]}
+                            errorMsg="Is required"
+                        />
+                        <Field
+                            name="addressline2"
+                            id="addressline2"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-20"
+                            label="Address line 2"
+                            errorMsg="Is required"
+                        />
+                        <Field
+                            name="towncity"
+                            id="towncity"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-10"
+                            label="Town/City"
+                            validate={[required]}
+                            errorMsg="Is required"
+                        />
+                        <Field
+                            name="county"
+                            id="county"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-10"
+                            label="County"
+                            validate={[required]}
+                            errorMsg="Is required"
+                        />
+                        <Field
+                            name="postcode"
+                            id="postcode"
+                            component={RenderTextfield}
+                            type="text"
+                            className="govuk-input govuk-input--width-5"
+                            label="Postcode"
+                            validate={[required]}
+                            errorMsg="Is required"
+                        />
+                    </fieldset>
+                    <div className="govuk-button-group">
+                        <button
+                            type="submit"
+                            className="govuk-button"
+                            data-module="govuk-button"
+                            onClick={() => {
+                                setPersonalDetailsComplete(true);
+                            }}
+                        >
+                            Continue
+                        </button>
+                    </div>
+                </form>
+            ) : (
+                <>
+                    <BuildCheckPersonalDetails
+                        props={props}
+                        setPersonalDetailsComplete={setPersonalDetailsComplete}
+                    />
+                    <div className="govuk-button-group">
+                        <button
+                            type="submit"
+                            className="govuk-button"
+                            data-module="govuk-button"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Continue
+                        </button>
+
+                        <Link href="">
+                            <a
+                                onClick={() => {
+                                    setPersonalDetailsComplete(false);
+                                }}
+                                className="govuk-link"
+                            >
+                                Go back
+                            </a>
+                        </Link>
+                    </div>
+                </>
+            )}
+        </>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        accountDetails: state.accountDetails,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+const selector = formValueSelector("personalDetailsForm"); // <-- same as form name
+
+export default connect(mapStateToProps, mapDispatchToProps, (state) => ({
+    initialValues: state.accountDetails.accountDetails.data,
+    search: state.search,
+    searchResultsObj: state.searchResultsObj,
+    formData: state.formData,
+    appealType: state.appealType,
+    accountDetails: state.accountDetails,
+    form: state.form,
+    // pull initial values from account reducer
+}))(
+    reduxForm({
+        form: "personalDetailsForm",
+        enableReinitialize: true, // this is needed!!
+        destroyOnUnmount: false,
+    })(PersonalDetails)
+);

components/account/personaldetailsCheck.js

@@ -0,0 +1,311 @@
+import _ from "lodash";
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import {
+    Field,
+    reduxForm,
+    formValueSelector,
+    getFormSubmitErrors,
+} from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+
+const BuildCheckPersonalDetails = (props) => {
+    const {
+        footerLinks,
+        pages,
+        handleSubmit,
+        value,
+        setPersonalDetailsComplete,
+    } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <>
+            <h2 className="govuk-heading-m">About you</h2>
+            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">First name</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                first name
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Last name</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                last name
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Email address</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                email address
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Telephone</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                telephone
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Company/Group</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                company/group
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+            </dl>
+            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
+                <h2 className="govuk-heading-m">Your address</h2>
+
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Address Line 1</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                address line 1
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Address line 2</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                address line 2
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Town/City</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                town/city
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">County</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                county
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">Postcode</dt>
+                    <dd className="govuk-summary-list__value">
+                        {/* {console.log(
+                            props.props.form["personalDetailsForm"].values[
+                                "firstname"
+                            ]
+                        )} */}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            Change
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                postcode
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+            </dl>
+        </>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        accountDetails: state.accountDetails,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+const selector = formValueSelector("personalDetailsForm"); // <-- same as form name
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(BuildCheckPersonalDetails);

components/account/registerform.js

@@ -0,0 +1,264 @@
+import _ from "lodash";
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import {
+    Field,
+    reduxForm,
+    formValueSelector,
+    getFormSubmitErrors,
+} from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import {
+    Textfield,
+    DateField,
+    DateFieldPicker,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+    DecimalField,
+} from "../elements";
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    type,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {touched &&
+                            ((error && (
+                                <span>{errorMsg ? errorMsg : error}</span>
+                            )) ||
+                                (warning && <span>{warning}</span>))}
+                    </span>
+                )}
+                <input
+                    {...input}
+                    className={className}
+                    name={name}
+                    id={id}
+                    type={type}
+                />
+            </div>
+        </>
+    );
+};
+
+const RegisterForm = (props) => {
+    const { footerLinks, pages, handleSubmit, value } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    let errorsobj = {};
+
+    const onHandleSubmit = (values) => {
+        console.log(values);
+    };
+
+    const required = (value) => (value ? undefined : "Is required");
+    const email = (value) =>
+        value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+            ? "Invalid email address"
+            : undefined;
+    const phoneNumber = (value) =>
+        value &&
+        !/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
+            value
+        )
+            ? "Invalid phone number"
+            : undefined;
+
+    const [hasErrors, setHasErrors] = useState("");
+
+    return (
+        <>
+            {/* {hasErrors == true ? (
+                <ShowErrorHeader
+                    hasErrors={hasErrors}
+                    props={props.props.form}
+                    formXML={formXML}
+                />
+            ) : (
+                ""
+            )} */}
+            <form onSubmit={handleSubmit(onHandleSubmit)}>
+                <fieldset className="govuk-fieldset">
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+                        <h2 className="govuk-fieldset__heading">About you</h2>
+                    </legend>
+                    <Field
+                        name="firstname"
+                        id="firstname"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label="First name"
+                        errorMsg="Is required"
+                    />
+                    <Field
+                        name="lastname"
+                        id="lastname"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label="Last name"
+                        errorMsg="Is required"
+                    />
+                    <Field
+                        name="email"
+                        id="email"
+                        component={RenderTextfield}
+                        type="email"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required, email]}
+                        label="Email address"
+                    />
+                    <Field
+                        name="telephone"
+                        id="telephone"
+                        component={RenderTextfield}
+                        type="number"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required, phoneNumber]}
+                        label="Telephone"
+                    />
+
+                    <Field
+                        name="companygroup"
+                        id="companygroup"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        label="Company/Group"
+                        errorMsg="Is required"
+                    />
+                </fieldset>
+                <fieldset className="govuk-fieldset">
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+                        <h2 className="govuk-fieldset__heading">
+                            What is your address?
+                        </h2>
+                    </legend>
+
+                    <Field
+                        name="addressline1"
+                        id="addressline1"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        label="Address line 1"
+                        validate={[required]}
+                        errorMsg="Is required"
+                    />
+                    <Field
+                        name="addressline2"
+                        id="addressline2"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        label="Address line 2"
+                        errorMsg="Is required"
+                    />
+                    <Field
+                        name="towncity"
+                        id="towncity"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-10"
+                        label="Town/City"
+                        validate={[required]}
+                        errorMsg="Is required"
+                    />
+                    <Field
+                        name="county"
+                        id="county"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-10"
+                        label="County"
+                        validate={[required]}
+                        errorMsg="Is required"
+                    />
+                    <Field
+                        name="postcode"
+                        id="postcode"
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-5"
+                        label="Postcode"
+                        validate={[required]}
+                        errorMsg="Is required"
+                    />
+                </fieldset>
+
+                <div className="govuk-button-group">
+                    <button
+                        type="submit"
+                        className="govuk-button"
+                        data-module="govuk-button"
+                    >
+                        Continue
+                    </button>
+                </div>
+            </form>
+        </>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+const selector = formValueSelector("accountRegisterForm"); // <-- same as form name
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "accountRegisterForm",
+        destroyOnUnmount: false,
+    })(RegisterForm)
+);

components/banner.js

@@ -0,0 +1,12 @@
+import Link from "next/link";
+
+export default function Banner() {
+  return (
+    <div className="govuk-phase-banner">
+      <p className="govuk-phase-banner__content">
+        <span className="govuk-tag govuk-phase-banner__content__tag">beta</span>
+        <span className="govuk-phase-banner__text">This is a new service</span>
+      </p>
+    </div>
+  );
+}

components/breadcrumbs.js

@@ -0,0 +1,231 @@
+import Link from "next/link";
+import jsonpath from "jsonpath";
+import _ from "lodash";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const Breadcrumbs = (props) => {
+    const {
+        courseContent,
+        slug,
+        formTitle,
+        activitysub,
+        activity,
+        applicant_id,
+        course_id,
+        applicant_ref,
+    } = props;
+    const router = useRouter();
+    const { appealType, section } = router.query;
+
+    let { t } = useTranslation();
+
+    function Breadcrumb() {
+        if (slug) {
+            var coursePageURL = appealType + "/" + slug;
+            if (_.isEmpty(courseContent)) {
+                return null;
+            } else {
+                var sectionObj = jsonpath.query(
+                    courseContent,
+                    '$..sections[?(@.path=="/' + coursePageURL + '")]'
+                );
+                var breadcrumb = sectionObj[0].chapter.title; //sectionObj[0].chapter
+                return (
+                    <li
+                        className="govuk-breadcrumbs__list-item"
+                        aria-current="page"
+                    >
+                        {breadcrumb}
+                    </li>
+                );
+            }
+        } else {
+            return null;
+        }
+    }
+
+    return (
+        <nav
+            aria-label={"Breadcrumb for " + _.startCase(_.toLower(appealType))}
+            role="navigation"
+            data-module="track-click"
+        >
+            <div className="govuk-breadcrumbs ">
+                <ol className="govuk-breadcrumbs__list">
+                    <li className="govuk-breadcrumbs__list-item">
+                        <Link href="http://www.gov.wales">
+                            <a className="govuk-breadcrumbs__link">GOV.WALES</a>
+                        </Link>
+                    </li>
+                    <li className="govuk-breadcrumbs__list-item">
+                        <Link href="/">
+                            <a className="govuk-breadcrumbs__link">
+                                {t("common:service-name")}
+                            </a>
+                        </Link>
+                    </li>
+                    {router.pathname == "/myportal" ? (
+                        <li className="govuk-breadcrumbs__list-item">
+                            {t("myportal:page-title")}
+                        </li>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/searchresults" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Search results
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/newappeal" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        {t("newappeal:parent-page-title")}
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                {t("newappeal:page-title")}
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/newappeal/selectappeal" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        {t("newappeal:parent-page-title")}
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        {t("newappeal:page-title")}
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Select Appeal
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/viewall" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Your cases
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/case" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/viewall">
+                                    <a className="govuk-breadcrumbs__link">
+                                        Your cases{" "}
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Case Reference: CAS-00010-J9W6L5
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/account/personaldetails" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Your account
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {router.pathname == "/account/changepassword" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Update your password
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+                    {!_.isEmpty(slug) ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/newappeal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        New Appeal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                {props.formTitle}
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
+
+                    <Breadcrumb />
+                </ol>
+            </div>
+        </nav>
+    );
+};
+export default Breadcrumbs;

components/case.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import Summary from "./case/summary";
+import Documents from "./case/documents";
+
+export default function CaseSummary({ children, pages }) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <Summary />
+                    <Documents />
+                </div>
+            </div>
+        </main>
+    );
+}

components/case/documents.js

@@ -0,0 +1,65 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function CaseSummary() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <h2>Documents</h2>
+                    <dl className="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-14 govuk-!-padding-left-2">
+                                {t("case:documents-name-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("case:documents-doc-type-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("case:documents-date-published-label")}
+                            </dd>
+                            <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                                {t("case:documents-size-label")}
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                <Link href="/case">
+                                    <a>
+                                        <span className="results-visually-hidden">
+                                            {t("case:documents-name-label")}:
+                                        </span>
+                                        3272770 Appeal Decision.pdf
+                                    </a>
+                                </Link>
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    {t("case:documents-doc-type-label")}:
+                                </span>
+                                Outcome / Decision
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    {t("case:documents-date-published-label")}:
+                                </span>
+                                15/06/2021
+                            </dd>
+                            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                <span className="results-visually-hidden">
+                                    {t("case:documents-size-label")}:
+                                </span>
+                                92
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+        </div>
+    );
+}

components/case/summary.js

@@ -0,0 +1,276 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function CaseSummary() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
+                        Reference: CAS-00010-J9W6L5
+                    </h1>
+
+                    <dl className="govuk-summary-list govuk-!-margin-bottom-9">
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                {t("case:summary-applicant-label")}
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                Mr J Pocknell
+                            </dd>
+                        </div>
+                        <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 Cos Polito
+                            </dd>
+                        </div>
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                {t("case:summary-site-address-label")}
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                72 Guild Street
+                                <br />
+                                London
+                                <br />
+                                SE23 6FH
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="govuk-button-group">
+                        <Link href="/advancedsearch">
+                            <a className="govuk-button">
+                                {t("case:summary-make-representation-label")}
+                            </a>
+                        </Link>
+                        <Link href="/advancedsearch">
+                            <a className="govuk-button govuk-button--secondary">
+                                {t("case:summary-back-button-label")}
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <div className="flex-container grid-row govuk-body case">
+                    <div className="card" id="casescomment-card">
+                        <div className="card-body">
+                            <div className="govuk-grid-column-full">
+                                <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
+                                    {t("case:summary-case-details-label")}
+                                </h2>
+
+                                <dl className="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t("case:summary-case-type-label")}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Planning Appeal (W){" "}
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t("case:summary-lpa-label")}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Hastings Borough Council
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-case-summary-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Erection of a two-storey chalet
+                                            style detached dwelling
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-case-officer-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            {" "}
+                                            Neale Oliver
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t("case:summary-procedure-label")}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Written representations
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t("case:summary-status-label")}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            In Progress
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t("case:summary-decision-label")}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Allowed
+                                            <Link href="/">
+                                                <a>
+                                                    3272770 Appeal Decision.pdf
+                                                </a>
+                                            </Link>
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-case-link-status-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Not Linked
+                                        </dd>
+                                    </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-linked-cases-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            0
+                                        </dd>
+                                    </div>
+                                </dl>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="card" id="casescomment-card">
+                        <div className="card-body">
+                            <div className="govuk-grid-column-full">
+                                <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
+                                    {t("case:summary-dates-label")}
+                                </h3>
+                                <dl className="govuk-summary-list govuk-!-font-size-14 govuk-!-margin-bottom-9">
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t("case:summary-start-date-label")}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            26-May-21
+                                        </dd>
+                                    </div>
+
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-questionnaire-due-date-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            02-Jun-21
+                                        </dd>
+                                    </div>
+
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-statement-due-date-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            30-Jun-21
+                                        </dd>
+                                    </div>
+
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-interested-party-date-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            30-Jun-21
+                                        </dd>
+                                    </div>
+
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-applicant-final-comments-date-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            14-Jul-21
+                                        </dd>
+                                    </div>
+
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-inquiry-evidence-date-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            N/A
+                                        </dd>
+                                    </div>
+
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t("case:summary-event-date-label")}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Date arranged
+                                        </dd>
+                                    </div>
+
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-decision-date-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            Not yet decided
+                                        </dd>
+                                    </div>
+                                </dl>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="govuk-button-group">
+                        <Link href="/advancedsearch">
+                            <a className="govuk-button">
+                                {t("case:summary-documents-button-label")}
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div> */}
+        </div>
+    );
+}

components/caseresults.js

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import SearchForCase from "./search/searchforcase";
+import SearchResults from "./search/searchresults";
+
+export default function Search({ children, pages }) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <SearchResults />
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="govuk-button-group">
+                        <Link href="/advancedsearch">
+                            <a className="govuk-button">
+                                {t("search:searchresults-search-button-label")}
+                            </a>
+                        </Link>
+                        <Link href="/advancedsearch">
+                            <a className="govuk-button govuk-button--secondary">
+                                {t(
+                                    "search:searchresults-new-search-button-label"
+                                )}
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}

components/checkanswers.js

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import BuildCheckSection from "./newappeal/buildchecksection";
+
+const CheckAnswers = (props) => {
+    const { formXML, formTitle, rowXML, whichSection, sectionCount, onSubmit } =
+        props;
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            sss
+            <BuildCheckSection
+                formXML={formXML}
+                sectionCount={sectionCount}
+                onSubmit={onSubmit}
+                formTitle={formTitle}
+            />
+        </main>
+    );
+};
+
+export default CheckAnswers;

components/cookieBanner.js

@@ -0,0 +1,58 @@
+import CookieConsent from "react-cookie-consent";
+import Link from "next/link";
+
+const CookieBanner = () => {
+    return (
+        <CookieConsent
+            style={{
+                position: "inherit",
+                background: "#f3f2f1",
+                display: "block",
+            }}
+            containerClasses="app-cookie-banner"
+            buttonClasses="govuk-button"
+            buttonWrapperClasses="govuk-width-container consentBanner"
+            declineButtonClasses="govuk-button"
+            buttonText="Accept all cookies"
+            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=""
+                >
+                    <div className="govuk-width-container">
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds">
+                                <div className="">
+                                    <h2 className="govuk-heading-m">
+                                        Tell us whether you accept cookies
+                                    </h2>
+                                    <p className="govuk-body">
+                                        GOV.UK uses cookies which are essential
+                                        for the site to work. We also use
+                                        non-essential cookies to help us improve
+                                        government digital services. Any data
+                                        collected is anonymised. By continuing
+                                        to use this site, you agree to our use
+                                        of cookies.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </CookieConsent>
+    );
+};
+
+export default CookieBanner;

components/elements/index.js

@@ -0,0 +1,496 @@
+import useSWR from "swr";
+import { Field, reduxForm } from "redux-form";
+import router from "next/router";
+import DatePicker from "react-datepicker";
+import React, { useState } from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import moment from "moment";
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {errorMsg}
+                    </span>
+                )}
+                <input {...input} className={className} name={name} id={id} />
+            </div>
+        </>
+    );
+};
+
+export function Textfield(props) {
+    const { name, label, validate } = props;
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <Field
+            name={props.name}
+            id={props.name}
+            component={RenderTextfield}
+            type="text"
+            className="govuk-input govuk-input--width-20"
+            validate={[required]}
+            label={props.label}
+            errorMsg="Is required"
+        />
+    );
+}
+
+const RenderMultiline = ({
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <textarea {...input} rows={rows} className={className}></textarea>
+        </>
+    );
+};
+
+export function MultiLinefield(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <h1 className="govuk-label-wrapper">
+                <label className="govuk-label" htmlFor="more-detail">
+                    {props.label}
+                </label>
+            </h1>
+            <div
+                id="more-detail-hint"
+                className="govuk-hint govuk-!-font-size-14"
+            >
+                Do not include personal or financial information, like your
+                National Insurance number or credit card details.
+            </div>
+
+            <Field
+                name={props.name}
+                id={props.name}
+                component={RenderMultiline}
+                type="text"
+                rows="5"
+                className="govuk-textarea govuk-input--width-30"
+                aria-describedby="more-detail-hint"
+            />
+        </div>
+    );
+}
+
+const RenderDatePicker = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    role="group"
+                    aria-describedby="dob-hint"
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading"
+                            id={id + "_label"}
+                        >
+                            {label}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <DatePicker
+                        {...custom}
+                        autoOk={true}
+                        dateFormat="dd/MM/yyyy"
+                        onChange={onChange}
+                        selected={value || null}
+
+                        // value={!value ? null : new Date(value)}
+                    />
+                </fieldset>
+            </div>
+        </>
+    );
+};
+
+export function DateFieldPicker(props) {
+    const { name, label } = props;
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <Field
+            name={name}
+            id={name}
+            label={label}
+            component={RenderDatePicker}
+            //validate={[required]}
+            errorMsg="Select a date"
+        />
+    );
+}
+
+export function DateField(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <fieldset
+                className="govuk-fieldset"
+                role="group"
+                aria-describedby="dob-hint"
+            >
+                <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                    <label className="govuk-fieldset__heading">
+                        {props.label}
+                    </label>
+                </legend>
+                <div className="govuk-date-input" id="dob">
+                    <div className="govuk-date-input__item">
+                        <div className="govuk-form-group">
+                            <label
+                                className="govuk-label govuk-date-input__label govuk-!-font-size-14"
+                                htmlFor={props.name + "-day"}
+                            >
+                                Day
+                            </label>
+                            <Field
+                                name={props.name + "-day"}
+                                id={props.name + "-day"}
+                                component="input"
+                                type="text"
+                                pattern="[0-9]*"
+                                inputMode="numeric"
+                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                            />
+                        </div>
+                    </div>
+                    <div className="govuk-date-input__item">
+                        <div className="govuk-form-group">
+                            <label
+                                className="govuk-label govuk-date-input__label govuk-!-font-size-14"
+                                htmlFor={props.name + "-month"}
+                            >
+                                Month
+                            </label>
+                            <Field
+                                name={props.name + "-month"}
+                                id={props.name + "-month"}
+                                component="input"
+                                type="text"
+                                pattern="[0-9]*"
+                                inputMode="numeric"
+                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                            />
+                        </div>
+                    </div>
+                    <div className="govuk-date-input__item">
+                        <div className="govuk-form-group">
+                            <label
+                                className="govuk-label govuk-date-input__label govuk-!-font-size-14"
+                                htmlFor={props.name + "-year"}
+                            >
+                                Year
+                            </label>
+                            <Field
+                                name={props.name + "-year"}
+                                id={props.name + "-year"}
+                                component="input"
+                                type="text"
+                                pattern="[0-9]*"
+                                inputMode="numeric"
+                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+    );
+}
+
+const RenderYesNo = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={name + "-hint"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {label}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div className="govuk-radios govuk-radios--inline govuk-radios--small">
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-radios__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id}
+                                    component="input"
+                                    type="radio"
+                                    className="govuk-radios__input"
+                                    value={options[key]}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {options[key]}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};
+
+export function YesNofield(props) {
+    const { name, label } = props;
+    const yesNo = ["Yes", "No"];
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <Field
+            name={props.name}
+            datafieldname={props.name}
+            label={props.label}
+            options={yesNo}
+            id={props.name}
+            className="govuk-radios__input"
+            //validate={[required]}
+            errorMsg="Select and option"
+            component={RenderYesNo}
+        />
+    );
+}
+
+const RenderPickList = ({
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, errorStr },
+}) => {
+    const fetcher = (url) => fetch(url).then((res) => res.json());
+
+    const { data, error } = useSWR("/api/lookups/" + datafieldname, fetcher);
+    if (error)
+        return (
+            <div className="govuk-form-group">
+                <label className="govuk-label govuk-body-m" htmlFor={name}>
+                    {label}
+                </label>
+                <select className="govuk-select" id={name} name={name}>
+                    <option value="">empty</option>
+                </select>
+            </div>
+        );
+    if (!data)
+        return (
+            <div>
+                <div className="govuk-form-group">{label} loading...</div>
+            </div>
+        );
+    //console.log(JSON.stringify(data.GlobalOptionSet.Options));
+
+    const dropdownObj = data.GlobalOptionSet.Options;
+
+    return (
+        <div>
+            <select {...input} className="govuk-select" id={name} name={name}>
+                <option>Select...</option>
+                {Object.keys(dropdownObj).map((key, index) => {
+                    return (
+                        <option
+                            key={key}
+                            value={
+                                dropdownObj[key].Label.LocalizedLabels[0].value
+                            }
+                            // value={dropdownObj[key].Label.LocalizedLabels[0].MetadataId}
+                        >
+                            {dropdownObj[key].Label.LocalizedLabels[0].Label}
+                        </option>
+                    );
+                })}
+            </select>
+
+            {touched && errorStr && <span>{errorStr}</span>}
+        </div>
+    );
+};
+
+export function PickList(props) {
+    const { name, label, datafieldname } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label govuk-body-m" htmlFor={props.name}>
+                {props.label}
+            </label>
+            <Field
+                name={props.name}
+                component={RenderPickList}
+                datafieldname={datafieldname}
+            />
+        </div>
+    );
+}
+
+export function NumericField(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label" htmlFor={props.name}>
+                {props.label}
+            </label>
+            <Field
+                name={props.name}
+                id={props.name}
+                component="input"
+                type="text"
+                className="govuk-input  govuk-input--width-20"
+                spellCheck="false"
+                aria-describedby="account-number-hint"
+                pattern="[0-9]*"
+                inputMode="numeric"
+            />
+        </div>
+    );
+}
+
+export function DecimalField(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label" htmlFor={props.name}>
+                {props.label}
+            </label>
+            <Field
+                name={props.name}
+                id={props.name}
+                component="input"
+                type="text"
+                className="govuk-input  govuk-input--width-10"
+                spellCheck="false"
+                aria-describedby="account-number-hint"
+                pattern="[0-9]*"
+                inputMode="numeric"
+            />
+        </div>
+    );
+}
+
+const RenderCaseID = {};
+
+export function ReadOnlyfield(props) {
+    const { name, label, value } = props;
+    //console.log(props.value.refno);
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label " htmlFor={props.name}>
+                {props.label}
+            </label>
+            <input
+                type="text"
+                name={props.name}
+                id={props.name}
+                component={RenderCaseID}
+                value={value}
+                className="govuk-input  govuk-input--width-20"
+                disabled
+            />
+        </div>
+    );
+}

components/errorpage.js

@@ -0,0 +1,58 @@
+import Link from "next/link";
+import Header from "./header";
+import Banner from "./breadcrumbs";
+import Breadcrumbs from "./banner";
+import Footer from "./footer";
+
+const Errorpage = () => {
+  var m = new Date();
+  var dateString =
+    m.getUTCDate() +
+    "/" +
+    (m.getUTCMonth() + 1) +
+    "/" +
+    m.getUTCFullYear() +
+    " " +
+    m.getUTCHours() +
+    ":" +
+    m.getUTCMinutes() +
+    ":" +
+    m.getUTCSeconds();
+
+  return (
+    <div className="">
+      <Header courseName="An error has occured" />
+      <div className="govuk-width-container">
+        <main
+          className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+          id="main-content"
+          role="main"
+        >
+          <div className="govuk-grid-row">
+            <div className="govuk-grid-column-two-thirds">
+              <h1 className="govuk-heading-xl">There has been a problem</h1>
+              <p className="govuk-body">
+                Unfortunately something has gone wrong!
+              </p>
+              <p className="govuk-body govuk-!-margin-top-9">{dateString}</p>
+              <Link href="/">
+                <a
+                  role="button"
+                  draggable="false"
+                  className="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
+                  data-module="govuk-button"
+                >
+                  Try again
+                </a>
+              </Link>
+              <br />
+            </div>
+          </div>
+        </main>
+      </div>
+      <Footer footerLinks="" />
+    </div>
+  );
+};
+
+export default Errorpage;

components/footer.js

@@ -0,0 +1,119 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function Footer(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    var linksArr = props.footerLinks || [{}];
+
+    const linksBlock = Object.keys(linksArr).map((key) => (
+        <li className="govuk-footer__inline-list-item" key={key}>
+            <Link href={linksArr[key].path || "/"}>
+                <a className="govuk-footer__link">{linksArr[key].title}</a>
+            </Link>
+        </li>
+    ));
+
+    return (
+        <footer className="govuk-footer " role="contentinfo">
+            <div className="sharebar" id="sharebar">
+                <div className="sharebar__components container-fluid">
+                    <div className="main__sharebar">
+                        <div
+                            id="sharebar__backtotop"
+                            className="btn--outlined btn--arrow-up"
+                        >
+                            <a href="#page_wrapper">Back to top</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="govuk-width-container ">
+                <div className="govuk-footer__meta">
+                    <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
+                        <h2 className="govuk-visually-hidden">Support links</h2>
+                        <nav role="navigation" aria-labelledby="footer_links">
+                            <ul
+                                className="govuk-footer__inline-list"
+                                id="footer_links"
+                            >
+                                <li className="govuk-footer__inline-list-item">
+                                    <a
+                                        href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
+                                        id="aTermsConds"
+                                        className="govuk-footer__link"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        {t(
+                                            "common:footer-terms-conditions-link"
+                                        )}
+                                    </a>
+                                </li>
+                                <li className="govuk-footer__inline-list-item">
+                                    <a
+                                        href="https://www.gov.uk/government/publications/planning-inspectorate-privacy-notices"
+                                        id="aPrivacy"
+                                        className="govuk-footer__link"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        {t("common:footer-privacy-link")}
+                                    </a>
+                                </li>
+                                <li className="govuk-footer__inline-list-item">
+                                    <a
+                                        href="https://www.gov.uk/guidance/appeals-casework-portal-privacy-cookies"
+                                        id="aCookies"
+                                        className="govuk-footer__link"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        {t("common:footer-cookies-link")}
+                                    </a>
+                                </li>
+                                <li className="govuk-footer__inline-list-item">
+                                    <a
+                                        href="http://www.gov.uk/government/publications/appeals-casework-portal-documentation"
+                                        className="govuk-footer__link"
+                                        id="aAccess"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        {t("common:footer-accessibility-link")}
+                                    </a>
+                                </li>
+                                <li className="govuk-footer__inline-list-item">
+                                    <a
+                                        href="http://www.gov.uk/guidance/feedback"
+                                        id="feedback"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        {t("common:footer-feedback-link")}
+                                    </a>
+                                </li>
+                            </ul>
+                        </nav>
+                        <div
+                            className="footer_logo container-fluid"
+                            id="footer_logo"
+                        >
+                            <a
+                                href="https://gov.wales/"
+                                className="footer__logo"
+                                id="footerlogo"
+                            >
+                                <span className="visually-hidden">Home</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+}

components/homepage/casecomment.js

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function CaseComment() {
+  let { t } = useTranslation();
+
+  const router = useRouter();
+  const { locale } = router;
+  return (
+    <div className="card" id="casescomment-card">
+      <div className="card-body">
+        <h3 className="heading-small card-heading">
+          {t("home:casescomment-card-title")}
+        </h3>
+        <p className="govuk-body-s">{t("home:casescomment-card-paragraph-one")}</p>
+        <p className="govuk-body-s">{t("home:casescomment-card-paragraph-two")}</p>
+      </div>
+    </div>
+  );
+}

components/homepage/casesearch.js

@@ -0,0 +1,92 @@
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function CaseSearch() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const [query, setQuery] = useState("");
+    const [validationError, setValidationError] = useState("");
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const basicSearch = (event) => {
+        event.preventDefault();
+
+        if (query == "" || query == null) {
+            setValidationError(true);
+        } else {
+            setValidationError(false);
+            console.log(query);
+            // /searchresults
+
+            router.push({
+                pathname: "/searchresults",
+                query: { q: query },
+            });
+        }
+    };
+
+    return (
+        <div className="card" id="casesearch-card">
+            <form onSubmit={basicSearch}>
+                <div className="card-body">
+                    <h3 className="heading-small card-heading">
+                        {t("home:casesearch-card-title")}
+                    </h3>
+                    <div
+                        className={
+                            validationError
+                                ? "govuk-form-group govuk-form-group--error"
+                                : "govuk-form-group "
+                        }
+                    >
+                        <div id="basicSearch-hint" className="govuk-hint ">
+                            {t("home:casesearch-card-search-hint")}:
+                            <br />
+                            <span className="govuk-body-s">
+                                {" "}
+                                <span className="govuk-!-font-weight-bold">
+                                    {t(
+                                        "home:casesearch-card-search-example-label"
+                                    )}
+                                    :
+                                </span>{" "}
+                                CAS-00009-W8N6W4
+                            </span>
+                        </div>
+                        {validationError && (
+                            <span
+                                id="basicSearch-error"
+                                className="govuk-error-message"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                Case reference is required
+                            </span>
+                        )}
+                        <input
+                            className="govuk-input"
+                            id="basicSearch"
+                            name="basicSearch"
+                            type="text"
+                            aria-describedby="basicSearch-hint"
+                            onChange={handleParam(setQuery)}
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        <button type="submit" className="govuk-button">
+                            {t("home:casesearch-card-button")}
+                        </button>
+                    </div>
+                    <Link href="/advancedsearch">
+                        <a>{t("home:casesearch-card-advanced-link")}</a>
+                    </Link>
+                </div>
+            </form>
+        </div>
+    );
+}

components/homepage/inspectorate.js

@@ -0,0 +1,30 @@
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function Inspectorate() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card clear" id="inspectorate-card">
+            <div className="card-body">
+                <Image
+                    alt="Planning Inspectorate"
+                    src="/assets/images/PINS_dual_logo_400.png"
+                    width="380px"
+                    height="58px"
+                    layout="responsive"
+                />
+                <p className="govuk-body-s">
+                    {t("home:inspectorate-card-visit-label")}:{" "}
+                    <Link href="/">
+                        <a>{t("home:inspectorate-card-visit-link")}</a>
+                    </Link>
+                </p>
+            </div>
+        </div>
+    );
+}

components/homepage/login.js

@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function Login() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="login-card">
+            <div className="card-body active">
+                <h3 className="heading-small card-heading">
+                    {t("home:login-card-title")}
+                </h3>
+
+                <form action="/myportal" method="POST" id="loginForm">
+                    <div className="govuk-form-group">
+                        {" "}
+                        <label
+                            htmlFor="user_id"
+                            className="govuk-label"
+                            aria-describedby="user_id-hint"
+                        >
+                            {t("home:login-card-id-label")}
+                        </label>
+                        <div className="govuk-hint" id="user_id-hint">
+                            {t("home:login-card-id-hint")}
+                        </div>
+                        <input
+                            type="text"
+                            name="user_id"
+                            id="user_id"
+                            className="govuk-input govuk-!-width-one-half"
+                            maxLength="22"
+                            aria-describedby="user_id-hint"
+                            autoComplete="username"
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        {" "}
+                        <label htmlFor="password" className="govuk-label">
+                            {t("home:login-card-password-label")}
+                        </label>
+                        <input
+                            type="password"
+                            name="password"
+                            id="password"
+                            className="govuk-input govuk-!-width-three-quarters"
+                            autoComplete="current-password"
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        {/* <button
+              type="submit"
+              className="govuk-button"
+              data-module="govuk-button"
+              id="continue"
+              formnovalidate=""
+            >
+              {t("home:login-card-button")}
+            </button> */}
+                        <Link href="/myportal">
+                            <a className="govuk-button">
+                                {t("home:login-card-button")}
+                            </a>
+                        </Link>
+                    </div>
+                </form>
+                <div className="govuk-form-group govuk-!-margin-top-4">
+                    <p className="govuk-body-s">
+                        {t("home:login-card-register-label")}{" "}
+                        <Link href="/account/register">
+                            <a>{t("home:login-card-register-link")}</a>
+                        </Link>
+                    </p>
+                    <p className="govuk-body-s">
+                        {t("home:login-card-forgotten-label")}{" "}
+                        <Link href="/">
+                            <a>{t("home:login-card-forgotten-link")}</a>
+                        </Link>
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+}

components/loading.js

@@ -0,0 +1,38 @@
+import Head from "next/head";
+import Banner from "../components/banner";
+import Footer from "../components/footer";
+import Header from "../components/header";
+
+export default function SkipLink(props) {
+    return (
+        <div>
+            <Head>
+                <title>Appeals Casework Portal</title>
+            </Head>
+
+            <div className="">
+                <Header courseName="Appeals Casework Portal" />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <main
+                        className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+                        id="main-content"
+                        role="main"
+                    >
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-two-thirds">
+                                <noscript>
+                                    <h1 className="govuk-heading-l">
+                                        Please enable javascript
+                                    </h1>
+                                </noscript>
+                                <h1 className="govuk-heading-m">Loading...</h1>
+                            </div>
+                        </div>
+                    </main>
+                </div>
+                <Footer />
+            </div>
+        </div>
+    );
+}

components/main.js

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import Login from "./homepage/login"; 
+import CaseSearch from "./homepage/casesearch"; 
+import Inspectorate from "./homepage/inspectorate"; 
+import CaseComment from "./homepage/casecomment"; 
+
+
+export default function Home({ children, pages }) {
+  let { t } = useTranslation();
+
+  const router = useRouter();
+  const { locale } = router;
+
+  return (
+    <main
+      className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+      id="main-content"
+      role="main"
+    >
+      <div className="govuk-grid-row">
+        <div className="govuk-grid-column-full">
+
+          <div className="flex-container grid-row govuk-body ">
+            <Login />
+            <CaseSearch/>
+            <CaseComment/>
+            <Inspectorate/>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

components/myportal.js

@@ -0,0 +1,42 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import MakeNewAppeal from "./myportal/makenewappeal";
+import MyCases from "./myportal/mycases";
+import SearchCases from "./myportal/searchcases";
+import AwaitingSubmission from "./myportal/awaitingsubmission";
+import MyRepresentations from "./myportal/myrepresentations";
+import WatchedCases from "./myportal/watchedcases";
+import YourAccount from "./myportal/youraccount";
+
+export default function MyPortal({ children, pages }) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="flex-container grid-row govuk-body ">
+                        <MakeNewAppeal />
+                        <MyCases />
+                        <SearchCases />
+                        <AwaitingSubmission />
+                        <MyRepresentations />
+                        <WatchedCases />
+                    </div>
+                    <div className="flex-container grid-row govuk-body ">
+                        <YourAccount />
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}

components/myportal/awaitingsubmission.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+
+export default function AwaitingSubmission() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:awatitingsubmission-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />
+                </div>
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/makenewappeal.js

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeNewAppeal() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:makenewappeal-card-title")}
+                </h3>
+                <p className="govuk-body-s">
+                    {t("myportal:makenewappeal-card-paragraph-one")}
+                </p>
+                <p className="govuk-body-s">
+                    {t("myportal:makenewappeal-card-paragraph-two")}
+                </p>
+                <div>
+                    <Link href="/newappeal">
+                        <a className="govuk-button">
+                            {t("myportal:makenewappeal-card-button-label")}
+                        </a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/mycases.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+export default function MyCases() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:mycases-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />
+                </div>
+
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/myrepresentations.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+export default function MyRepresentations() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:myrepresentations-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />{" "}
+                </div>
+
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/searchcases.js

@@ -0,0 +1,96 @@
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function SearchCases() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const [query, setQuery] = useState("");
+    const [validationError, setValidationError] = useState("");
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const basicSearch = (event) => {
+        event.preventDefault();
+
+        if (query == "" || query == null) {
+            setValidationError(true);
+        } else {
+            setValidationError(false);
+            console.log(query);
+            // /searchresults
+
+            router.push({
+                pathname: "/searchresults",
+                query: { q: query },
+            });
+        }
+    };
+
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <form onSubmit={basicSearch}>
+                <div className="card-body">
+                    <h3 className="heading-small card-heading">
+                        {t("myportal:searchcases-card-title")}
+                    </h3>
+                    <div
+                        className={
+                            validationError
+                                ? "govuk-form-group govuk-form-group--error"
+                                : "govuk-form-group "
+                        }
+                    >
+                        <div id="event-name-hint" className="govuk-hint ">
+                            {t("myportal:searchcases-card-search-hint")}:
+                            <br />
+                            <span className="govuk-body-s">
+                                {" "}
+                                <span className="govuk-!-font-weight-bold">
+                                    {t(
+                                        "myportal:searchcases-card-search-example-label"
+                                    )}
+                                    :
+                                </span>{" "}
+                                CAS-00009-W8N6W4
+                            </span>
+                        </div>
+                        {validationError && (
+                            <span
+                                id="basicSearch-error"
+                                className="govuk-error-message"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                Case reference is required
+                            </span>
+                        )}
+                        <input
+                            className="govuk-input"
+                            id="event-name"
+                            name="event-name"
+                            type="text"
+                            aria-describedby="event-name-hint"
+                            onChange={handleParam(setQuery)}
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        <button
+                            type="submit"
+                            name="search"
+                            className="govuk-button"
+                        >
+                            {t("myportal:searchcases-card-button")}
+                        </button>
+                    </div>
+                    <Link href="/advancedsearch">
+                        <a>{t("myportal:searchcases-card-advanced-link")}</a>
+                    </Link>
+                </div>
+            </form>
+        </div>
+    );
+}

components/myportal/topthree.js

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function TopThree() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <>
+            <div className="cardModuleItem">
+                <div className="cardModuleDetails">
+                    <div className="cardModuleReference">
+                        <b>Case reference:</b>{" "}
+                        <Link href="/case">
+                            <a>CAS-00010-J9W6L5</a>
+                        </Link>
+                    </div>
+                    <div className="carModuleAddress">
+                        <b>Address: </b> Beggars Lane
+                    </div>
+                </div>
+                <div className="cardModuleRemoveCase"> &mdash;</div>
+            </div>
+            <div className="cardModuleItem">
+                <div className="cardModuleDetails">
+                    <div className="cardModuleReference">
+                        <b>Case reference:</b>{" "}
+                        <Link href="/case">
+                            <a>CAS-00010-J9W6L5</a>
+                        </Link>
+                    </div>
+                    <div className="carModuleAddress">
+                        <b>Address: </b> Beggars Lane
+                    </div>
+                </div>
+                <div className="cardModuleRemoveCase"> &mdash;</div>
+            </div>
+            <div className="cardModuleItem">
+                <div className="cardModuleDetails">
+                    <div className="cardModuleReference">
+                        <b>Case reference:</b>{" "}
+                        <Link href="/case">
+                            <a>CAS-00010-J9W6L5</a>
+                        </Link>
+                    </div>
+                    <div className="carModuleAddress">
+                        <b>Address: </b> Beggars Lane
+                    </div>
+                </div>
+                <div className="cardModuleRemoveCase"> &mdash;</div>
+            </div>
+        </>
+    );
+}

components/myportal/watchedcases.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+export default function WatchedCases() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card card-3" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:watchedcases-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    <TopThree />
+                </div>
+
+                <div className="cardVieAll">
+                    <Link href="/viewall">
+                        <a>{t("myportal:viewall-link")}</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/myportal/youraccount.js

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function YourAccount() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <>
+            <div className="card" id="casescomment-card">
+                <div className="card-body">
+                    <h3 className="heading-small card-heading">Your details</h3>
+                    <p className="govuk-body-s">
+                        You can change your address and contact details
+                    </p>
+
+                    <div>
+                        <Link href="/account/personaldetails">
+                            <a className="govuk-button-secondary">
+                                Edit your account details
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+            <div className="card" id="casescomment-card">
+                <div className="card-body">
+                    <h3 className="heading-small card-heading">
+                        Change your password
+                    </h3>
+                    <p className="govuk-body-s">You can change your password</p>
+
+                    <div>
+                        <Link href="/account/changepassword">
+                            <a className="govuk-button-secondary">
+                                Update your password
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

components/newappeal.js

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import PlanningAppeal from "./newappeal/planningappeal";
+import EnforcementNotice from "./newappeal/enforcementnotice";
+import LDC from "./newappeal/ldc";
+import AdvertApplication from "./newappeal/advertapplication";
+
+export default function NewAppeal({ children, pages }) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="flex-container grid-row govuk-body ">
+                        <PlanningAppeal />
+                        <EnforcementNotice />
+                        <LDC />
+                        <AdvertApplication />
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}

components/newappeal/advertapplication.js

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeAdvertApplication() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    An appeal relating to an advertisement application or a
+                    discontinuance notice.
+                </p>
+                <div className="appealCTA">
+                    <Link href="/newappeal/selectappeal">
+                        <a className="govuk-button">
+                            An advert application/Discontinuance Notice (DN)
+                        </a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/newappeal/buildCheckfield.js

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import {
+    Textfield,
+    DateField,
+    DateFieldPicker,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+    DecimalField,
+} from "../elements";
+import moment from "moment";
+
+export default function BuildField(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { fieldType, label, datafieldname, fieldValue } = props;
+
+    const parser = new DOMParser();
+
+    const whichFieldType = (classid) => {
+        switch (classid) {
+            case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
+                return <>{fieldValue}</>;
+                break;
+            case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
+                return <>{fieldValue}</>;
+                break;
+            case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return <>{fieldValue}</>;
+                break;
+            case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
+                return <>{fieldValue}</>;
+                break;
+            case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
+                return (
+                    <>
+                        <span>hello</span>
+                    </>
+                );
+                break;
+            case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
+                return <>{fieldValue}</>;
+                break;
+            case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
+                return <>{fieldValue}</>;
+                break;
+            case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
+                return <>{fieldValue}</>;
+                break;
+            default:
+                return <>{fieldValue}</>;
+        }
+    };
+
+    return <>{whichFieldType(props.fieldType)}</>;
+}

components/newappeal/buildcheckrow.js

@@ -0,0 +1,95 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import BuildCheckField from "./buildCheckfield";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import {
+    setCaseReference,
+    setCurrentSection,
+    setFormComplete,
+} from "../../store/appealType/action";
+
+let BuildCheckRow = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        formXML,
+        whichSection,
+        sectionCount,
+        onSubmit,
+        updateCurrentSection,
+    } = props;
+
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            whichSection +
+            "]/columns//sections/section/rows/row",
+        doc
+    );
+
+    return (
+        <>
+            {Object.keys(rowXML).map((key, index) => {
+                var doc = parser.parseFromString(
+                    rowXML[key].outerHTML,
+                    "text/xml"
+                );
+                var rows = xpath.select("//label/@description", doc);
+                var fieldtype = xpath.select("//@classid", doc);
+                var datafieldname = xpath.select("//@datafieldname", doc);
+
+                return (
+                    <div className="govuk-summary-list__row" key={key}>
+                        <dt className="govuk-summary-list__key">
+                            {rows[0].value}
+                        </dt>
+                        <dd className="govuk-summary-list__value">
+                            {
+                                props.props.form["appealForm"].values[
+                                    datafieldname[0].value
+                                ]
+                            }
+                        </dd>
+                        <dd className="govuk-summary-list__actions">
+                            <a
+                                className="govuk-link"
+                                href="#"
+                                onClick={() => {
+                                    updateCurrentSection(whichSection);
+                                }}
+                            >
+                                Change
+                                <span className="govuk-visually-hidden">
+                                    {" "}
+                                    name
+                                </span>
+                            </a>
+                        </dd>
+                    </div>
+                );
+            })}
+        </>
+    );
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateCurrentSection: (whichSection) => {
+            dispatch(setCurrentSection(whichSection));
+            dispatch(setFormComplete("true"));
+        },
+    };
+};
+
+const mapStateToProps = (state) => ({
+    count: state.count,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);

components/newappeal/buildchecksection.js

@@ -0,0 +1,125 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { useState, useEffect } from "react";
+import xpath from "xpath";
+import BuildCheckRow from "./buildcheckrow";
+import { reduxForm, formValueSelector } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import {
+    setCurrentSection,
+    setFormComplete,
+} from "../../store/appealType/action";
+
+let BuildCheckSection = (props) => {
+    useEffect(() => {
+        setFormComplete();
+    }, []);
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        formXML,
+        sectionCount,
+        onSubmit,
+        handleSubmit,
+        formTitle,
+        setCurrentSection,
+    } = props;
+
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[*]/columns//sections/section/rows/row",
+        doc
+    );
+
+    var titleList = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const basicSearch = (event) => {
+        event.preventDefault();
+        console.log(query);
+        // /searchresults
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-two-thirds">
+                <div>
+                    <h1 className="govuk-heading-m">
+                        Are these answers correct?
+                    </h1>
+                    {Object.keys(titles).map((key) => (
+                        <>
+                            <h2 className="govuk-heading-m">
+                                {titles[key].value}
+                            </h2>
+
+                            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
+                                <BuildCheckRow
+                                    formXML={formXML}
+                                    whichSection={parseInt(key) + 1}
+                                    sectionCount={key}
+                                    props={props}
+                                    key={key}
+                                />
+                            </dl>
+                        </>
+                    ))}
+
+                    <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
+                </div>
+                <div className="govuk-button-group">
+                    <a
+                        className="govuk-button"
+                        data-module="govuk-button"
+                        onClick={() => setCurrentSection(9999)}
+                    >
+                        Submit appeal
+                    </a>
+                </div>
+            </div>
+            <div className="govuk-grid-column-one-third"></div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+// BuildCheckSection = reduxForm({
+//     // a unique name for the form
+//     form: "sssappealForm",
+//     destroyOnUnmount: false,
+// })(BuildCheckSection);
+
+const selector = formValueSelector("appealForm"); // <-- same as form name
+
+export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckSection);

components/newappeal/buildfield.js

@@ -0,0 +1,102 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import {
+    Textfield,
+    DateField,
+    DateFieldPicker,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+    DecimalField,
+} from "../elements";
+
+export default function BuildField(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { fieldType, label, datafieldname } = props;
+
+    const parser = new DOMParser();
+
+    const whichFieldType = (classid) => {
+        switch (classid) {
+            case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
+                return (
+                    <ReadOnlyfield
+                        name={props.datafieldname}
+                        label={props.label}
+                        value={props.props.props.appealType.caseReference}
+                    />
+                );
+                break;
+            case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
+                return (
+                    <PickList
+                        name={props.datafieldname}
+                        label={props.label}
+                        datafieldname={props.datafieldname}
+                    />
+                );
+                break;
+            case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return (
+                    <YesNofield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
+                return (
+                    <Textfield name={props.datafieldname} label={props.label} />
+                );
+                break;
+            case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
+                return (
+                    <DateFieldPicker
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
+                return (
+                    <MultiLinefield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
+                return (
+                    <NumericField
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
+                return (
+                    <DecimalField
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            default:
+                return (
+                    <Textfield name={props.datafieldname} label={props.label} />
+                );
+        }
+    };
+
+    return (
+        <div className="govuk-grid-row">{whichFieldType(props.fieldType)}</div>
+    );
+}

components/newappeal/buildrow.js

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import BuildField from "./buildfield";
+
+export default function BuildRow(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { rowXML, whichSection, sectionCount, onSubmit } = props;
+
+    const parser = new DOMParser();
+
+    return (
+        <div className="govuk-grid-column-full">
+            {Object.keys(rowXML).map((key, index) => {
+                var doc = parser.parseFromString(
+                    rowXML[key].outerHTML,
+                    "text/xml"
+                );
+                var rows = xpath.select("//label/@description", doc);
+                var fieldtype = xpath.select("//@classid", doc);
+                var datafieldname = xpath.select("//@datafieldname", doc);
+                return (
+                    <BuildField
+                        fieldType={fieldtype[0].value}
+                        label={rows[0].value}
+                        datafieldname={datafieldname[0].value}
+                        key={key}
+                        props={props}
+                    />
+                );
+            })}
+        </div>
+    );
+}

components/newappeal/buildsection.js

@@ -0,0 +1,278 @@
+import Link from "next/link";
+import _, { has } from "lodash";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { useState, useEffect } from "react";
+import xpath from "xpath";
+import BuildRow from "./buildrow";
+import { reduxForm, formValueSelector, getFormSubmitErrors } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import {
+    setCaseReference,
+    setCurrentSection,
+} from "../../store/appealType/action";
+import { query } from "jsonpath";
+
+let BuildSection = (props) => {
+    // useEffect(() => {
+    //     window.scrollTo(0, 0);
+    // });
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        formXML,
+        sectionCount,
+        onSubmit,
+        handleSubmit,
+        formTitle,
+        setCurrentSection,
+        refno,
+        gotoSection,
+    } = props;
+
+    const currentSection = props.appealType.currentSection;
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
+        doc
+    );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            currentSection +
+            "]/columns//sections/section/rows/row",
+        doc
+    );
+
+    var titleList = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const onHandleSubmit = (values) => {
+        setCurrentSection(currentSection + 1);
+    };
+
+    const [hasErrors, setHasErrors] = useState("");
+
+    const getErrors = () => {
+        let errorsobj = props.props.form["appealForm"];
+        setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
+        window.scrollTo(0, 0);
+    };
+
+    let errorsobj = {};
+    const ShowErrorHeader = (props) => {
+        errorsobj = props.props.appealForm.syncErrors;
+        errorsobj = _.keys(errorsobj);
+
+        const getErrorLabel = (whichField) => {
+            var doc = parser.parseFromString(props.formXML, "text/xml");
+            var errorFieldLabel = xpath.select(
+                "//*[control/@id='" + whichField + "']//@description",
+                doc
+            );
+
+            return errorFieldLabel[0].value;
+        };
+
+        const ShowErrors = () => {
+            let errorList = [];
+            for (let i = 0; i < errorsobj.length; ++i) {
+                //get label from error key - search rowxml for id = errorobj
+
+                errorList.push(
+                    <li>
+                        <a href={"#" + errorsobj[i] + "_label"}>
+                            {" "}
+                            {getErrorLabel(errorsobj[i])}
+                        </a>
+                    </li>
+                );
+            }
+
+            return errorList;
+        };
+
+        return !_.isEmpty(errorsobj) ? (
+            <div
+                className="govuk-error-summary"
+                aria-labelledby="error-summary-title"
+                role="alert"
+                tabIndex="-1"
+                data-module="govuk-error-summary"
+            >
+                <h2
+                    className="govuk-error-summary__title"
+                    id="error-summary-title"
+                >
+                    The following fields have a problem :
+                </h2>
+                <div className="govuk-error-summary__body">
+                    <ul className="govuk-list govuk-error-summary__list">
+                        <ShowErrors />
+                    </ul>
+                </div>
+            </div>
+        ) : (
+            ""
+        );
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-two-thirds">
+                <h1 className="govuk-heading-m  govuk-!-margin-top-5">
+                    {titles[0].value}{" "}
+                </h1>
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    {hasErrors == true ? (
+                        <ShowErrorHeader
+                            hasErrors={hasErrors}
+                            props={props.props.form}
+                            formXML={formXML}
+                        />
+                    ) : (
+                        ""
+                    )}
+
+                    <BuildRow
+                        rowXML={rowXML}
+                        whichSection={props.whichSection}
+                        sectionCount={props.sectionCount}
+                        onSubmit={onSubmit}
+                        props={props}
+                    />
+                    {}
+                    <div className="govuk-button-group">
+                        {props.sectionCount != currentSection ? (
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                                onClick={() => getErrors()}
+                            >
+                                Continue
+                            </button>
+                        ) : (
+                            ""
+                        )}
+                        {props.sectionCount == currentSection ? (
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                            >
+                                Submit
+                            </button>
+                        ) : (
+                            ""
+                        )}
+                        {currentSection > 1 ? (
+                            <a
+                                className="govuk-link"
+                                href="#"
+                                onClick={() =>
+                                    setCurrentSection(currentSection - 1)
+                                }
+                            >
+                                Back
+                            </a>
+                        ) : (
+                            ""
+                        )}
+                    </div>
+                </form>
+            </div>
+            <div className="govuk-grid-column-one-third">
+                <nav
+                    role="navigation"
+                    aria-labelledby="progress-list"
+                    className="at-nav"
+                >
+                    <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
+                        Progress:
+                    </h3>
+                    <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
+
+                    <ol className="govuk-list">
+                        <ul className="govuk-list ">
+                            <li className="at-nav__page">
+                                <ol className="govuk-list">
+                                    {Object.keys(titleList).map((key) =>
+                                        parseInt(key) + 1 == currentSection ? (
+                                            <li key={key}>
+                                                <b>{titleList[key].value} </b>
+                                            </li>
+                                        ) : (
+                                            <li key={key}>
+                                                {props.appealType
+                                                    .formComplete == "true" ||
+                                                parseInt(key) + 1 <
+                                                    currentSection ? (
+                                                    <a
+                                                        className="govuk-link"
+                                                        href="#"
+                                                        onClick={() => {
+                                                            gotoSection(
+                                                                parseInt(key) +
+                                                                    1
+                                                            );
+                                                        }}
+                                                    >
+                                                        {titleList[key].value}
+                                                    </a>
+                                                ) : (
+                                                    titleList[key].value
+                                                )}
+                                            </li>
+                                        )
+                                    )}
+                                </ol>
+                            </li>
+                        </ul>
+                    </ol>
+                </nav>
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+        gotoSection: (thisSection) => {
+            dispatch(setCurrentSection(thisSection));
+        },
+    };
+};
+
+const selector = formValueSelector("appealForm"); // <-- same as form name
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "appealForm",
+        destroyOnUnmount: false,
+    })(BuildSection)
+);

components/newappeal/complete.js

@@ -0,0 +1,124 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { useState, useEffect } from "react";
+import xpath from "xpath";
+import BuildRow from "./buildrow";
+import { reduxForm, formValueSelector } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { setCurrentSection } from "../../store/appealType/action";
+
+let CompleteAppeal = (props) => {
+    // useEffect(() => {
+    //     window.scrollTo(0, 0);
+    // });
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        formXML,
+        sectionCount,
+        onSubmit,
+        handleSubmit,
+        formTitle,
+        setCurrentSection,
+    } = props;
+
+    const currentSection = props.appealType.currentSection;
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
+        doc
+    );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            currentSection +
+            "]/columns//sections/section/rows/row",
+        doc
+    );
+
+    var titleList = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const onHandleSubmit = (values) => {
+        setCurrentSection(currentSection + 1);
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-two-thirds">
+                <div className="govuk-panel govuk-panel--confirmation">
+                    <h1 className="govuk-panel__title">Appeal complete</h1>
+                    <div className="govuk-panel__body">
+                        Your reference number
+                        <br />
+                        <strong>{props.appealType.caseReference}</strong>
+                    </div>
+                </div>
+
+                <p className="govuk-body">
+                    We have sent you a confirmation email.
+                </p>
+
+                <h2 className="govuk-heading-m">What happens next</h2>
+
+                <p className="govuk-body">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Morbi a metus non quam mollis egestas. Integer ac leo
+                    cursus, laoreet nulla sed, tempus tellus. Mauris condimentum
+                    erat arcu.
+                </p>
+                <p className="govuk-body">
+                    Sed imperdiet dignissim ipsum. Orci varius natoque penatibus
+                    et magnis dis parturient montes, nascetur ridiculus mus. In
+                    id leo in turpis aliquam venenatis ut non erat. Ut est arcu,
+                    luctus sit amet pretium sed, iaculis non purus. Etiam dictum
+                    tortor commodo luctus rhoncus.
+                </p>
+
+                <p className="govuk-body">
+                    <Link href="/myportal">
+                        <a className="govuk-link">Back to My Portal</a>
+                    </Link>
+                </p>
+
+                <p className="govuk-body">
+                    <a href="#" className="govuk-link">
+                        What did you think of this service?
+                    </a>
+                    (takes 30 seconds)
+                </p>
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+const selector = formValueSelector("appealForm"); // <-- same as form name
+
+export default connect(mapStateToProps, mapDispatchToProps)(CompleteAppeal);

components/newappeal/createCase.js

@@ -0,0 +1,257 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { useState, useEffect } from "react";
+import xpath from "xpath";
+import BuildRow from "./buildrow";
+import { reduxForm, formValueSelector, Field } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import jsonpath from "jsonpath";
+import {
+    setAppealType,
+    setAppealTypeTitle,
+    setAppealTypeID,
+    setAppealLPA,
+    getAppealTypeObj,
+} from "../../store/appealType/action";
+
+let CreateCase = (props) => {
+    // useEffect(() => {
+    //     window.scrollTo(0, 0);
+    // });
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { LPAData, onSubmit, handleSubmit } = props;
+
+    const appealOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.appealType)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet.Options)
+        ? [{}]
+        : props.appealType.appealTypeOptions.GlobalOptionSet.Options;
+
+    let lpaOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : jsonpath.query(props.LPAData.LPAData, "$..name");
+
+    const RenderLPAList = ({
+        name,
+        input,
+        optionsObj,
+        meta: { touched, error },
+        label,
+        errorMsg,
+    }) => {
+        return (
+            <>
+                <div
+                    className={
+                        touched && error
+                            ? "govuk-form-group govuk-form-group--error"
+                            : "govuk-form-group "
+                    }
+                >
+                    {" "}
+                    <label className="govuk-label" htmlFor="sort">
+                        {label}
+                    </label>
+                    {touched && error && (
+                        <span
+                            id="passport-issued-error"
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div>
+                        <select
+                            {...input}
+                            className="govuk-select govuk-input--error"
+                            id="lpatypes"
+                            name={name}
+                            //onChange={(e) => props.onChangeSelectLPA(e)}
+                        >
+                            <option value="" disabled defaultValue>
+                                Select...
+                            </option>
+                            {_.isEmpty(optionsObj)
+                                ? ""
+                                : Object.keys(optionsObj).map((key, index) => {
+                                      return (
+                                          <option
+                                              key={key}
+                                              value={optionsObj[key]}
+                                          >
+                                              {optionsObj[key]}
+                                          </option>
+                                      );
+                                  })}
+                        </select>
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    const RenderAppealTypeList = ({
+        name,
+        input,
+        optionsObj,
+        meta: { touched, error },
+        label,
+        errorMsg,
+    }) => {
+        return (
+            <>
+                <div
+                    className={
+                        touched && error
+                            ? "govuk-form-group govuk-form-group--error"
+                            : "govuk-form-group "
+                    }
+                >
+                    <label className="govuk-label" htmlFor="sort">
+                        {label}
+                    </label>
+                    {touched && error && (
+                        <span
+                            id="passport-issued-error"
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div>
+                        <select
+                            {...input}
+                            className="govuk-select"
+                            id="appealTypes"
+                            name={name}
+                            //onChange={(e) => props.onChangeSelectAppealType(e)}
+                        >
+                            <option value="" disabled defaultValue>
+                                Select...
+                            </option>
+                            {_.isEmpty(optionsObj)
+                                ? ""
+                                : Object.keys(optionsObj).map((key, index) => {
+                                      return (
+                                          <option
+                                              key={key}
+                                              value={optionsObj[
+                                                  key
+                                              ].Label.LocalizedLabels[0].Label.replace(
+                                                  /[\s\-\+\(\)\,]/g,
+                                                  ""
+                                              ).toLowerCase()}
+                                          >
+                                              {
+                                                  optionsObj[key].Label
+                                                      .LocalizedLabels[0].Label
+                                              }
+                                          </option>
+                                      );
+                                  })}
+                        </select>
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    const required = (value) => (value ? undefined : "Required");
+
+    const onHandleSubmit = (values) => {
+        event.preventDefault();
+        router.replace("/newappeal/" + values.appealTypes, null, {
+            shallow: true,
+        });
+    };
+
+    return (
+        <form onSubmit={handleSubmit(onHandleSubmit)}>
+            <Field
+                name="lpaTypes"
+                component={RenderLPAList}
+                optionsObj={lpaOptionsObj}
+                validate={[required]}
+                label="Select your local planning authority"
+                errorMsg="Local authority is required"
+            />
+
+            <Field
+                name="appealTypes"
+                component={RenderAppealTypeList}
+                optionsObj={appealOptionsObj}
+                validate={[required]}
+                label="Select an appeal type"
+                errorMsg="Appeal type is required"
+            />
+
+            <button
+                type="submit"
+                className="govuk-button"
+                data-module="govuk-button"
+            >
+                Continue
+            </button>
+        </form>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        onChangeSelectAppealType: (event) => {
+            dispatch(
+                setAppealTypeTitle(
+                    event.target.options[event.target.selectedIndex].text
+                )
+            );
+            dispatch(setAppealTypeID(event.target.value));
+        },
+        onChangeSelectLPA: (event) => {
+            dispatch(setAppealLPA(event.target.value));
+        },
+    };
+};
+
+const selector = formValueSelector("caseForm"); // <-- same as form name
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "caseForm",
+        destroyOnUnmount: false,
+    })(CreateCase)
+);

components/newappeal/enforcementnotice.js

@@ -0,0 +1,24 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeEnforcementNotice() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    Including an enforcement listed building notice.
+                </p>
+                <div className="appealCTA">
+                    <Link href="/newappeal/selectappeal">
+                        <a className="govuk-button">A enforcement notice</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/newappeal/ldc.js

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeLDC() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    An appeal relating to an application for a certificate of
+                    lawful use or development.
+                </p>
+                <div className="appealCTA">
+                    <Link href="/newappeal/selectappeal">
+                        <a className="govuk-button">
+                            A Lawful Development Certificate (LDC)
+                        </a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/newappeal/planningappeal.js

@@ -0,0 +1,26 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function MakeNewAppeal() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body appealModule">
+                <p className="govuk-body-s">
+                    This includes all householder applications, full planning
+                    applications, outline planning applications, planning listed
+                    building (LB) applications.
+                </p>
+                <div className="appealCTA">
+                    <Link href="./newappeal/selectappeal">
+                        <a className="govuk-button">A planning application</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}

components/search.js

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import SearchForCase from "./search/searchforcase";
+import AdvancedSearch from "./search/advancedsearch";
+
+export default function Search({ children, pages }) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <AdvancedSearch />
+        </main>
+    );
+}

components/search/advancedsearch.js

@@ -0,0 +1,922 @@
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function AdvancedSearch(props) {
+    let { t } = useTranslation();
+
+    const [query, setQuery] = useState("");
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const advancedSearch = (event) => {
+        event.preventDefault();
+        console.log(query);
+        // /searchresults
+
+        router.push({
+            pathname: "/searchresults",
+            query: { q: query },
+        });
+    };
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div>
+            <form onSubmit={advancedSearch}>
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="card" id="searchforcase-card">
+                            <div className="card-body">
+                                <div className="govuk-body-m ">
+                                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
+                                        <h1 className="govuk-fieldset__heading govuk-heading-m">
+                                            {t("search:search-title-label")}
+                                        </h1>
+                                    </legend>
+                                    <div className="govuk-form-group">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="address-county"
+                                        >
+                                            {t("search:casereference-label")}
+                                        </label>
+                                        <input
+                                            className="govuk-input govuk-!-width-two-thirds"
+                                            id="address-county"
+                                            name="address-county"
+                                            type="text"
+                                            onChange={handleParam(setQuery)}
+                                        />
+                                    </div>
+                                    <fieldset className="govuk-fieldset">
+                                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
+                                            <h3 className="govuk-heading-m">
+                                                {t(
+                                                    "search:sitelocation-legend"
+                                                )}
+                                            </h3>
+                                        </legend>
+                                        <div className="govuk-form-group">
+                                            <label
+                                                className="govuk-label"
+                                                htmlFor="address-line-1"
+                                            >
+                                                {t(
+                                                    "search:address-line-one-label"
+                                                )}
+                                            </label>
+                                            <input
+                                                className="govuk-input"
+                                                id="address-line-1"
+                                                name="address-line-1"
+                                                type="text"
+                                                autoComplete="address-line1"
+                                                onChange={handleParam(setQuery)}
+                                            />
+                                        </div>
+
+                                        <div className="govuk-form-group">
+                                            <label
+                                                className="govuk-label"
+                                                htmlFor="address-town"
+                                            >
+                                                {t("search:town-label")}
+                                            </label>
+                                            <input
+                                                className="govuk-input govuk-!-width-two-thirds"
+                                                id="address-town"
+                                                name="address-town"
+                                                type="text"
+                                                autoComplete="address-level2"
+                                            />
+                                        </div>
+
+                                        <div className="govuk-form-group">
+                                            <label
+                                                className="govuk-label"
+                                                htmlFor="address-county"
+                                            >
+                                                {t("search:county-label")}
+                                            </label>
+                                            <input
+                                                className="govuk-input govuk-!-width-two-thirds"
+                                                id="address-county"
+                                                name="address-county"
+                                                type="text"
+                                            />
+                                        </div>
+
+                                        <div className="govuk-form-group">
+                                            <label
+                                                className="govuk-label"
+                                                htmlFor="address-postcode"
+                                            >
+                                                {t("search:postcode-label")}
+                                            </label>
+                                            <input
+                                                className="govuk-input govuk-input--width-10"
+                                                id="address-postcode"
+                                                name="address-postcode"
+                                                type="text"
+                                                autoComplete="postal-code"
+                                            />
+                                        </div>
+                                    </fieldset>
+                                    <div className="govuk-form-group">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="address-postcode"
+                                        >
+                                            {t("search:lpa-label")}{" "}
+                                        </label>
+                                        <input
+                                            className="govuk-input govuk-input--width-10"
+                                            id="address-postcode"
+                                            name="address-postcode"
+                                            type="text"
+                                            autoComplete="postal-code"
+                                        />
+                                    </div>
+                                    <div className="govuk-form-group">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="address-postcode"
+                                        >
+                                            {t("search:lpa-reference-label")}{" "}
+                                        </label>
+                                        <input
+                                            className="govuk-input govuk-input--width-10"
+                                            id="address-postcode"
+                                            name="address-postcode"
+                                            type="text"
+                                            autoComplete="postal-code"
+                                        />
+                                    </div>
+                                    <div className="govuk-form-group">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="sort"
+                                        >
+                                            {t("search:case-type-label")}{" "}
+                                        </label>
+                                        <select
+                                            className="govuk-select"
+                                            id="sort"
+                                            name="sort"
+                                        >
+                                            <option value="">
+                                                {t("search:case-type-option-1")}
+                                            </option>
+                                            <option value="Any/All">
+                                                {t("search:case-type-option-2")}
+                                            </option>
+                                            <option value="Advertisement Appeals">
+                                                {t("search:case-type-option-3")}
+                                            </option>
+                                            <option value="Called in Planning Applications">
+                                                {t("search:case-type-option-4")}
+                                            </option>
+                                            <option value="Discontinuance Notice Appeals">
+                                                {t("search:case-type-option-5")}
+                                            </option>
+                                            <option value="Enforcement Listed Building and Conservation Area Appeals">
+                                                {t("search:case-type-option-6")}
+                                            </option>
+                                            <option value="Enforcement Appeals">
+                                                {t("search:case-type-option-7")}
+                                            </option>
+                                            <option value="Householder Appeals">
+                                                {t("search:case-type-option-8")}
+                                            </option>
+                                            <option value="Lawful Development Certificate Appeals">
+                                                {t("search:case-type-option-9")}
+                                            </option>
+                                            <option value="Planning Appeals">
+                                                {t(
+                                                    "search:case-type-option-10"
+                                                )}
+                                            </option>
+                                            <option value="Planning Obligation Appeals">
+                                                {t(
+                                                    "search:case-type-option-11"
+                                                )}
+                                            </option>
+                                            <option value="Planning Listed Building and Conservation Area Appeals">
+                                                {t(
+                                                    "search:case-type-option-12"
+                                                )}
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="card" id="advancedsearch-card">
+                            <div className="card-body">
+                                <div className="govuk-body-m ">
+                                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
+                                        <h3 className="govuk-heading-m">
+                                            {t(
+                                                "search:advanced-search-title-label"
+                                            )}
+                                        </h3>
+                                    </legend>
+                                    <div className="govuk-form-group">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="address-line-1"
+                                        >
+                                            {t("search:applicant-label")}
+                                        </label>
+                                        <input
+                                            className="govuk-input"
+                                            id="address-line-1"
+                                            name="address-line-1"
+                                            type="text"
+                                            autoComplete="address-line1"
+                                        />
+                                    </div>
+                                    <div className="govuk-form-group">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="address-town"
+                                        >
+                                            {t("search:other-party-label")}
+                                        </label>
+                                        <input
+                                            className="govuk-input govuk-!-width-two-thirds"
+                                            id="address-town"
+                                            name="address-town"
+                                            type="text"
+                                            autoComplete="address-level2"
+                                        />
+                                    </div>
+                                    <div className="govuk-form-group form-inline-label">
+                                        <fieldset
+                                            className="govuk-fieldset"
+                                            role="group"
+                                            aria-describedby="passport-issued-hint"
+                                        >
+                                            {" "}
+                                            <div className="inlineFieldset">
+                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
+                                                    {t(
+                                                        "search:hearing-date-label"
+                                                    )}
+                                                </legend>
+                                                <div
+                                                    className="govuk-date-input"
+                                                    id="passport-issued"
+                                                >
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-day"
+                                                            >
+                                                                Day
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-day"
+                                                                name="passport-issued-day"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-month"
+                                                            >
+                                                                Month
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-month"
+                                                                name="passport-issued-month"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-year"
+                                                            >
+                                                                Year
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                                                                id="passport-issued-year"
+                                                                name="passport-issued-year"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group"></div>
+
+                                                        <div className="govuk-checkboxes__item">
+                                                            <input
+                                                                className="govuk-checkboxes__input"
+                                                                id="waste-3"
+                                                                name="waste"
+                                                                type="checkbox"
+                                                                value="farm"
+                                                            />
+                                                            <label
+                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
+                                                                htmlFor="waste-3"
+                                                            >
+                                                                {t(
+                                                                    "search:date-margin-label"
+                                                                )}
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                    <div className="govuk-form-group form-inline-label">
+                                        <fieldset
+                                            className="govuk-fieldset"
+                                            role="group"
+                                            aria-describedby="passport-issued-hint"
+                                        >
+                                            {" "}
+                                            <div className="inlineFieldset">
+                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
+                                                    {t(
+                                                        "search:site-visit-date-label"
+                                                    )}
+                                                </legend>
+                                                <div
+                                                    className="govuk-date-input"
+                                                    id="passport-issued"
+                                                >
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-day"
+                                                            >
+                                                                Day
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-day"
+                                                                name="passport-issued-day"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-month"
+                                                            >
+                                                                Month
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-month"
+                                                                name="passport-issued-month"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-year"
+                                                            >
+                                                                Year
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                                                                id="passport-issued-year"
+                                                                name="passport-issued-year"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group"></div>
+
+                                                        <div className="govuk-checkboxes__item">
+                                                            <input
+                                                                className="govuk-checkboxes__input"
+                                                                id="waste-3"
+                                                                name="waste"
+                                                                type="checkbox"
+                                                                value="farm"
+                                                            />
+                                                            <label
+                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
+                                                                htmlFor="waste-3"
+                                                            >
+                                                                {t(
+                                                                    "search:date-margin-label"
+                                                                )}
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                    <div className="govuk-form-group form-inline-label">
+                                        <fieldset
+                                            className="govuk-fieldset"
+                                            role="group"
+                                            aria-describedby="passport-issued-hint"
+                                        >
+                                            {" "}
+                                            <div className="inlineFieldset">
+                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
+                                                    {t(
+                                                        "search:callin-date-label"
+                                                    )}
+                                                </legend>
+                                                <div
+                                                    className="govuk-date-input"
+                                                    id="passport-issued"
+                                                >
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-day"
+                                                            >
+                                                                Day
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-day"
+                                                                name="passport-issued-day"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-month"
+                                                            >
+                                                                Month
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-month"
+                                                                name="passport-issued-month"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-year"
+                                                            >
+                                                                Year
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                                                                id="passport-issued-year"
+                                                                name="passport-issued-year"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group"></div>
+
+                                                        <div className="govuk-checkboxes__item">
+                                                            <input
+                                                                className="govuk-checkboxes__input"
+                                                                id="waste-3"
+                                                                name="waste"
+                                                                type="checkbox"
+                                                                value="farm"
+                                                            />
+                                                            <label
+                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
+                                                                htmlFor="waste-3"
+                                                            >
+                                                                {t(
+                                                                    "search:date-margin-label"
+                                                                )}
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                    <div className="govuk-form-group form-inline-label">
+                                        <fieldset
+                                            className="govuk-fieldset"
+                                            role="group"
+                                            aria-describedby="passport-issued-hint"
+                                        >
+                                            {" "}
+                                            <div className="inlineFieldset">
+                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
+                                                    {t("search:date-received")}
+                                                </legend>
+                                                <div
+                                                    className="govuk-date-input"
+                                                    id="passport-issued"
+                                                >
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-day"
+                                                            >
+                                                                Day
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-day"
+                                                                name="passport-issued-day"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-month"
+                                                            >
+                                                                Month
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-month"
+                                                                name="passport-issued-month"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-year"
+                                                            >
+                                                                Year
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                                                                id="passport-issued-year"
+                                                                name="passport-issued-year"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group"></div>
+
+                                                        <div className="govuk-checkboxes__item">
+                                                            <input
+                                                                className="govuk-checkboxes__input"
+                                                                id="waste-3"
+                                                                name="waste"
+                                                                type="checkbox"
+                                                                value="farm"
+                                                            />
+                                                            <label
+                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
+                                                                htmlFor="waste-3"
+                                                            >
+                                                                {t(
+                                                                    "search:date-margin-label"
+                                                                )}
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                    <div className="govuk-form-group form-inline-label">
+                                        <fieldset
+                                            className="govuk-fieldset"
+                                            role="group"
+                                            aria-describedby="passport-issued-hint"
+                                        >
+                                            {" "}
+                                            <div className="inlineFieldset">
+                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
+                                                    {t(
+                                                        "search:start-date-label"
+                                                    )}
+                                                </legend>
+                                                <div
+                                                    className="govuk-date-input"
+                                                    id="passport-issued"
+                                                >
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-day"
+                                                            >
+                                                                Day
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-day"
+                                                                name="passport-issued-day"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-month"
+                                                            >
+                                                                Month
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-month"
+                                                                name="passport-issued-month"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-year"
+                                                            >
+                                                                Year
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                                                                id="passport-issued-year"
+                                                                name="passport-issued-year"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group"></div>
+
+                                                        <div className="govuk-checkboxes__item">
+                                                            <input
+                                                                className="govuk-checkboxes__input"
+                                                                id="waste-3"
+                                                                name="waste"
+                                                                type="checkbox"
+                                                                value="farm"
+                                                            />
+                                                            <label
+                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
+                                                                htmlFor="waste-3"
+                                                            >
+                                                                {t(
+                                                                    "search:date-margin-label"
+                                                                )}
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                    <div className="govuk-form-group form-inline-label">
+                                        <fieldset
+                                            className="govuk-fieldset"
+                                            role="group"
+                                            aria-describedby="passport-issued-hint"
+                                        >
+                                            {" "}
+                                            <div className="inlineFieldset">
+                                                <legend className="govuk-fieldset__legend govuk-!-width-one-third">
+                                                    {t(
+                                                        "search:decision-date-label"
+                                                    )}
+                                                </legend>
+                                                <div
+                                                    className="govuk-date-input"
+                                                    id="passport-issued"
+                                                >
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-day"
+                                                            >
+                                                                Day
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-day"
+                                                                name="passport-issued-day"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-month"
+                                                            >
+                                                                Month
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                                                id="passport-issued-month"
+                                                                name="passport-issued-month"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group">
+                                                            <label
+                                                                className="govuk-label govuk-date-input__label"
+                                                                htmlFor="passport-issued-year"
+                                                            >
+                                                                Year
+                                                            </label>
+                                                            <input
+                                                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                                                                id="passport-issued-year"
+                                                                name="passport-issued-year"
+                                                                type="text"
+                                                                pattern="[0-9]*"
+                                                                inputMode="numeric"
+                                                            />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="govuk-date-input__item">
+                                                        <div className="govuk-form-group"></div>
+
+                                                        <div className="govuk-checkboxes__item">
+                                                            <input
+                                                                className="govuk-checkboxes__input"
+                                                                id="waste-3"
+                                                                name="waste"
+                                                                type="checkbox"
+                                                                value="farm"
+                                                            />
+                                                            <label
+                                                                className="govuk-label govuk-checkboxes__label no__right_padding"
+                                                                htmlFor="waste-3"
+                                                            >
+                                                                {t(
+                                                                    "search:date-margin-label"
+                                                                )}
+                                                            </label>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </fieldset>
+                                    </div>
+                                    <div className="govuk-form-group ">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="sort"
+                                        >
+                                            {t("search:procedure-type-label")}
+                                        </label>
+                                        <select
+                                            className="govuk-select"
+                                            id="sort"
+                                            name="sort"
+                                        >
+                                            <option value="">
+                                                {t(
+                                                    "search:procedure-type-option-1"
+                                                )}
+                                            </option>
+                                            <option value="Hearing">
+                                                {t(
+                                                    "search:procedure-type-option-2"
+                                                )}
+                                            </option>
+                                            <option value="Inquiry">
+                                                {t(
+                                                    "search:procedure-type-option-3"
+                                                )}
+                                            </option>
+                                            <option value="Written representations">
+                                                {t(
+                                                    "search:procedure-type-option-4"
+                                                )}
+                                            </option>
+                                        </select>
+                                    </div>
+                                    <div className="govuk-form-group">
+                                        <label
+                                            className="govuk-label"
+                                            htmlFor="sort"
+                                        >
+                                            {t("search:status-label")}
+                                        </label>
+                                        <select
+                                            className="govuk-select"
+                                            id="sort"
+                                            name="sort"
+                                        >
+                                            <option value="">
+                                                {t("search:status-option-1")}
+                                            </option>
+                                            <option value="Any">
+                                                {t("search:status-option-2")}
+                                            </option>
+                                            <option value="In progress">
+                                                {t("search:status-option-3")}
+                                            </option>
+                                            <option value="Complete">
+                                                {t("search:status-option-4")}
+                                            </option>
+                                        </select>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-form-group">
+                            <button
+                                type="submit"
+                                name="search"
+                                className="govuk-button"
+                            >
+                                Search
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+    );
+}

components/search/searchforcase.js

@@ -0,0 +1,158 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function SearchForCase() {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <div className="card" id="searchforcase-card">
+            <div className="card-body">
+                <div className="govuk-body-m ">
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
+                        <h1 className="govuk-fieldset__heading govuk-heading-m">
+                            {t("search:search-title-label")}
+                        </h1>
+                    </legend>
+                    <div className="govuk-form-group">
+                        <label className="govuk-label" htmlFor="address-county">
+                            {t("search:casereference-label")}
+                        </label>
+                        <input
+                            className="govuk-input govuk-!-width-two-thirds"
+                            id="address-county"
+                            name="address-county"
+                            type="text"
+                        />
+                    </div>
+                    <fieldset className="govuk-fieldset">
+                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
+                            <h3 className="govuk-heading-m">
+                                {t("search:sitelocation-legend")}
+                            </h3>
+                        </legend>
+                        <div className="govuk-form-group">
+                            <label className="govuk-label" htmlFor="address-line-1">
+                                {t("search:address-line-one-label")}
+                            </label>
+                            <input
+                                className="govuk-input"
+                                id="address-line-1"
+                                name="address-line-1"
+                                type="text"
+                                autoComplete="address-line1"
+                            />
+                        </div>
+
+                        <div className="govuk-form-group">
+                            <label className="govuk-label" htmlFor="address-town">
+                                {t("search:town-label")}
+                            </label>
+                            <input
+                                className="govuk-input govuk-!-width-two-thirds"
+                                id="address-town"
+                                name="address-town"
+                                type="text"
+                                autoComplete="address-level2"
+                            />
+                        </div>
+
+                        <div className="govuk-form-group">
+                            <label className="govuk-label" htmlFor="address-county">
+                                {t("search:county-label")}
+                            </label>
+                            <input
+                                className="govuk-input govuk-!-width-two-thirds"
+                                id="address-county"
+                                name="address-county"
+                                type="text"
+                            />
+                        </div>
+
+                        <div className="govuk-form-group">
+                            <label className="govuk-label" htmlFor="address-postcode">
+                                {t("search:postcode-label")}
+                            </label>
+                            <input
+                                className="govuk-input govuk-input--width-10"
+                                id="address-postcode"
+                                name="address-postcode"
+                                type="text"
+                                autoComplete="postal-code"
+                            />
+                        </div>
+                    </fieldset>
+                    <div className="govuk-form-group">
+                        <label className="govuk-label" htmlFor="address-postcode">
+                            {t("search:lpa-label")}{" "}
+                        </label>
+                        <input
+                            className="govuk-input govuk-input--width-10"
+                            id="address-postcode"
+                            name="address-postcode"
+                            type="text"
+                            autoComplete="postal-code"
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        <label className="govuk-label" htmlFor="address-postcode">
+                            {t("search:lpa-reference-label")}{" "}
+                        </label>
+                        <input
+                            className="govuk-input govuk-input--width-10"
+                            id="address-postcode"
+                            name="address-postcode"
+                            type="text"
+                            autoComplete="postal-code"
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        <label className="govuk-label" htmlFor="sort">
+                            {t("search:case-type-label")}{" "}
+                        </label>
+                        <select className="govuk-select" id="sort" name="sort">
+                            <option value="">
+                                {t("search:case-type-option-1")}
+                            </option>
+                            <option value="Any/All">
+                                {t("search:case-type-option-2")}
+                            </option>
+                            <option value="Advertisement Appeals">
+                                {t("search:case-type-option-3")}
+                            </option>
+                            <option value="Called in Planning Applications">
+                                {t("search:case-type-option-4")}
+                            </option>
+                            <option value="Discontinuance Notice Appeals">
+                                {t("search:case-type-option-5")}
+                            </option>
+                            <option value="Enforcement Listed Building and Conservation Area Appeals">
+                                {t("search:case-type-option-6")}
+                            </option>
+                            <option value="Enforcement Appeals">
+                                {t("search:case-type-option-7")}
+                            </option>
+                            <option value="Householder Appeals">
+                                {t("search:case-type-option-8")}
+                            </option>
+                            <option value="Lawful Development Certificate Appeals">
+                                {t("search:case-type-option-9")}
+                            </option>
+                            <option value="Planning Appeals">
+                                {t("search:case-type-option-10")}
+                            </option>
+                            <option value="Planning Obligation Appeals">
+                                {t("search:case-type-option-11")}
+                            </option>
+                            <option value="Planning Listed Building and Conservation Area Appeals">
+                                {t("search:case-type-option-12")}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

components/search/searchresults.js

@@ -0,0 +1,154 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function SearchResults(props) {
+    const { searchString, searchResultsObj } = props;
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}];
+    const resultRow = Object.keys(resultsArr).map((key, index) => {
+        <div className="govuk-summary-list__row">
+            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                <Link href="/case">
+                    <a>
+                        <span className="results-visually-hidden">
+                            wwwwwwwCase Reference:
+                        </span>
+                        {resultsArr[key].title}
+                    </a>
+                </Link>
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Site Address: </span>
+                23 Martineau Lane
+                <br /> HASTINGS
+                <br />
+                TN35 5DS
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">
+                    Appellant/Applicant:
+                </span>
+                Mr J Pocknell
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Authority:</span>
+                Hastings Borough Council{" "}
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Case Type:</span>
+                Planning (W){" "}
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Status:</span>
+                In Progress
+            </dd>
+        </div>;
+    });
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-full">
+                <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
+                    {t("search:searchresults-title-label")}
+                </h1>
+                <p className="govuk-body">
+                    {t("search:searchresults-count-label", {
+                        count: props.searchResultsObj.searchResultsObj[
+                            "@odata.count"
+                        ].toString(),
+                    })}
+                    . You searched for <em>&quot;{searchString}&quot;</em>
+                </p>
+                <dl className="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-14 results_wider  govuk-!-padding-left-2">
+                            {t("search:searchresults-case-reference-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-site-address-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-applicant-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-authority-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-case-type-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-status-label")}
+                        </dd>
+                    </div>
+
+                    {resultsArr.map((item, key) => {
+                        return (
+                            <div className="govuk-summary-list__row" key={key}>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                    <Link href="/case">
+                                        <a>
+                                            <span className="results-visually-hidden">
+                                                Case Reference:
+                                            </span>
+                                            {item.title}
+                                        </a>
+                                    </Link>
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Site Address:{" "}
+                                    </span>
+                                    23 Martineau Lane
+                                    <br /> HASTINGS
+                                    <br />
+                                    TN35 5DS
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Appellant/Applicant:
+                                    </span>
+                                    Mr J Pocknell
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Authority:
+                                    </span>
+                                    {
+                                        item[
+                                            "_customerid_value@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Case Type:
+                                    </span>
+                                    {
+                                        item[
+                                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Status:
+                                    </span>
+                                    {
+                                        item[
+                                            "statuscode@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </dd>
+                            </div>
+                        );
+                    })}
+                </dl>
+            </div>
+        </div>
+    );
+}

components/search/viewall.js

@@ -0,0 +1,147 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+export default function ViewAllResults(props) {
+    const { searchString, searchResultsObj } = props;
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    var resultsArr = props.searchResultsObj.searchResultsObj.value || [{}];
+    const resultRow = Object.keys(resultsArr).map((key, index) => {
+        <div className="govuk-summary-list__row">
+            <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                <Link href="/case">
+                    <a>
+                        <span className="results-visually-hidden">
+                            Case Reference:
+                        </span>
+                        {resultsArr[key].title}
+                    </a>
+                </Link>
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Site Address: </span>
+                23 Martineau Lane
+                <br /> HASTINGS
+                <br />
+                TN35 5DS
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">
+                    Appellant/Applicant:
+                </span>
+                Mr J Pocknell
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Authority:</span>
+                Hastings Borough Council{" "}
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Case Type:</span>
+                Planning (W){" "}
+            </dd>
+            <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                <span className="results-visually-hidden">Status:</span>
+                In Progress
+            </dd>
+        </div>;
+    });
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-full">
+                <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
+                    Your cases
+                </h1>
+
+                <dl className="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-14 results_wider  govuk-!-padding-left-2">
+                            {t("search:searchresults-case-reference-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-site-address-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-applicant-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-authority-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-case-type-label")}
+                        </dd>
+                        <dd className="govuk-summary-list__key govuk-!-font-size-14">
+                            {t("search:searchresults-status-label")}
+                        </dd>
+                    </div>
+
+                    {resultsArr.map((item, key) => {
+                        return (
+                            <div className="govuk-summary-list__row" key={key}>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14  govuk-!-padding-left-2">
+                                    <Link href="/case">
+                                        <a>
+                                            <span className="results-visually-hidden">
+                                                Case Reference:
+                                            </span>
+                                            {item.title}
+                                        </a>
+                                    </Link>
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Site Address:{" "}
+                                    </span>
+                                    23 Martineau Lane
+                                    <br /> HASTINGS
+                                    <br />
+                                    TN35 5DS
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Appellant/Applicant:
+                                    </span>
+                                    Mr J Pocknell
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Authority:
+                                    </span>
+                                    {
+                                        item[
+                                            "_customerid_value@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Case Type:
+                                    </span>
+                                    {
+                                        item[
+                                            "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </dd>
+                                <dd className="govuk-summary-list__value govuk-!-font-size-14">
+                                    <span className="results-visually-hidden">
+                                        Status:
+                                    </span>
+                                    {
+                                        item[
+                                            "statuscode@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </dd>
+                            </div>
+                        );
+                    })}
+                </dl>
+            </div>
+        </div>
+    );
+}

components/searchresults.js

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import SearchForCase from "./search/searchforcase";
+import SearchResults from "./search/searchresults";
+
+export default function Search(props) {
+    const { searchString, searchResultsObj } = props;
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <SearchResults searchString={searchString} searchResultsObj={searchResultsObj}/>
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="govuk-button-group">
+                        <Link href="/advancedsearch">
+                            <a className="govuk-button">
+                                {t("search:searchresults-search-button-label")}
+                            </a>
+                        </Link>
+                        <Link href="/advancedsearch">
+                            <a className="govuk-button govuk-button--secondary">
+                                {t(
+                                    "search:searchresults-new-search-button-label"
+                                )}
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}

components/skiplink.js

@@ -0,0 +1,11 @@
+export default function SkipLink(props) {
+    return (
+        <div id="skiplink-container">
+            <div>
+                <a href="#main-content" className="skiplink govuk-link">
+                    Skip to main content
+                </a>
+            </div>
+        </div>
+    );
+}

components/viewall.js

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import SearchForCase from "./search/searchforcase";
+import ViewAllResults from "./search/viewall";
+
+export default function ViewAll(props) {
+    const { searchString, searchResultsObj } = props;
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <ViewAllResults
+                        searchString={searchString}
+                        searchResultsObj={searchResultsObj}
+                    />
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <div className="govuk-button-group">
+                        <Link href="/myportal">
+                            <a className="govuk-button">Back</a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}

i18n.json

@@ -0,0 +1,39 @@
+{
+   "locales": [
+      "en",
+      "cy"
+   ],
+   "defaultLocale": "en",
+   "pages": {
+      "*": [
+         "common"
+      ],
+      "/": [
+         "home"
+      ],
+      "/myportal": [
+         "myportal"
+      ],
+      "/advancedsearch": [
+         "search"
+      ],
+      "/searchresults": [
+         "search"
+      ],
+      "/viewall": [
+         "search"
+      ],
+      "/case": [
+         "case"
+      ],
+      "/newappeal": [
+         "newappeal"
+      ],
+      "/newappeal/selectappeal": [
+         "newappeal"
+      ],
+      "/newappeal/*": [
+         "newappeal"
+      ]
+   }
+}

locales/cy/case.json

@@ -0,0 +1,33 @@
+{
+    "case-card-title": "Reference: APP/B1415/W/20/3271702",
+    "summary-applicant-label": "Apelydd/Ymgeisydd",
+    "summary-agent-label": "Asiant",
+    "summary-site-address-label": "Cyfeiriad y Safle",
+    "summary-make-representation-label": "Cyflwyno cynrychiolaeth",
+    "summary-back-button-label": "Ewch yn ôl",
+    "summary-case-details-label": "Manylion yr Achos",
+    "summary-case-type-label": "Math o Achos",
+    "summary-lpa-label": "Awdurdod Cynllunio Lleol",
+    "summary-case-summary-label": "Crynodeb o'r Achos",
+    "summary-case-officer-label": "Swyddog Achos",
+    "summary-procedure-label": "Gweithdrefn",
+    "summary-status-label": "Statws",
+    "summary-decision-label": "Penderfyniad a chanlyniad",
+    "summary-case-link-status-label": "Statws cysylltiad yr Achos",
+    "summary-linked-cases-label": "Achosion cysylltiedig",
+    "summary-dates-label": "Dyddiadau",
+    "summary-start-date-label": "Dyddiad Dechrau",
+    "summary-questionnaire-due-date-label": "Holiadur i ddod",
+    "summary-statement-due-date-label": "Datganiad (au) i ddod",
+    "summary-interested-party-date-label": "Sylwadau Parti â Buddiant i ddod",
+    "summary-applicant-final-comments-date-label": "Sylwadau Terfynol yr Apelydd/ACLl i ddod",
+    "summary-inquiry-evidence-date-label": "Tystiolaeth yr Ymchwiliad i ddod",
+    "summary-event-date-label": "Dyddiad y Digwyddiad",
+    "summary-decision-date-label": "Dyddiad y Penderfyniad",
+    "summary-documents-button-label": "Dogfennau",
+    "documents-document-count-label": "Dogfennau",
+    "documents-name-label": "Math y Ddogfen",
+    "documents-doc-type-label": "Math y Ddogfen",
+    "documents-date-published-label": "Dyddiad cyhoeddi",
+    "documents-size-label": "Maint y ffeil (kb)"
+}

locales/cy/common.json

@@ -0,0 +1,15 @@
+{
+  "service-name": "Cynllunio gwaith achos",
+  "breadcrumb-back-link": "Yn ôl",
+  "error-radio": "Dewiswch opsiwn",
+  "error-checkbox": "Enter a value",
+  "error-textbox": "Choose an option",
+  "available-in": "English",
+  "continue-button": "Parhewch",
+  "submit-and-start": "Cyflwyno a dechrau'r cwrs",
+  "footer-terms-conditions-link": "Telerau ac amodau",
+  "footer-privacy-link": "Rhybudd Preifatrwydd",
+  "footer-cookies-link": "Chwcis",
+  "footer-accessibility-link": "Hygyrchedd",
+  "footer-feedback-link": "Adborth"
+}

locales/cy/home.json

@@ -0,0 +1,21 @@
+{
+    "login-card-title": "Mewngofnodi neu cofrestru",
+    "login-card-id-label": "Dynodydd Defnyddiwr (ID) Porth y Llywodraeth",
+    "login-card-id-hint": "Gallai hyn fod hyd at 12 o gymeriadau.",
+    "login-card-password-label": "Cyfrinair",
+    "login-card-button": "Mewngofnodi",
+    "login-card-register-label": "Cwsmer newydd wyf a hoffwn",
+    "login-card-register-link": "Gofrestru",
+    "login-card-forgotten-label": "Wedi anghofio eich cyfrinair neu'ch enw defnyddiwr?",
+    "login-card-forgotten-link": "Cliciwch yma",
+    "casesearch-card-title": "Chwilio am achos",
+    "casesearch-card-search-hint": "Chwiliwch drwy roi cyfeirnod 7 digid yr achos",
+    "casesearch-card-search-example-label": "Enghraifft",
+    "casesearch-card-button": "Cyflwyno Chwiliad",
+    "casesearch-card-advanced-link": "Fel arall, gallwch chwilio gan ddefnyddio ein meini prawf eraill gyda'n chwiliad uwch",
+    "casescomment-card-title": "Gwneud sylw ar achos",
+    "casescomment-card-paragraph-one": "Chwiliwch am eich achos a chliciwch y botwm 'Gwneud Sylw'. Y ffordd orau o roi sylwadau ar achos cyfredol yw trwy gofrestru gyda ni'n gyntaf gan fod hynny'n gwneud olrhain achosion a chyflwyno sylwadau yn haws.",
+    "casescomment-card-paragraph-two": "Yn achos apeliadau deiliaid tai ac apeliadau masnachol, nid yw partïon â buddiant yn gallu gwneud sylwadau yn y cam apelio. Caiff unrhyw sylwadau a wneir yn y cam ymgeisio eu darparu gan yr awdurdod cynllunio lleol ac fe'u hystyrir gan yr Arolygydd.",
+    "inspectorate-card-visit-label" : "Ymweld Yr Arolygiaeth Gynllunio",
+    "inspectorate-card-visit-link": "Hafan"
+}

locales/cy/myportal.json

@@ -0,0 +1,18 @@
+{
+    "viewall-link": "Gweld y cyfan",
+    "page-title": "Fy mhorth",
+    "makenewappeal-card-title": "Gwneud apêl newydd",
+    "makenewappeal-card-paragraph-one": "Cyn cyflwyno apêl newydd, sicrhewch eich bod wedi darllen yr holl ganllawiau sy'n",
+    "makenewappeal-card-link": "berthnasol i'r math o apêl sydd gennych.",
+    "makenewappeal-card-paragraph-two": "Wedi i chi glicio'r botwm 'gwneud apêl newydd' isod, cewch eich arwain drwy broses i'ch helpu i ddewis y math cywir o apêl.",
+    "makenewappeal-card-button-label": "Gwneud apêl newydd",
+    "mycases-card-title": "Fy achosion",
+    "searchcases-card-title": "Chwilio am achos/cyflwyno cynrychiolaeth",
+    "searchcases-card-search-hint": "Chwiliwch drwy roi cyfeirnod 7 digid yr achos yn y blwch isod:",
+    "searchcases-card-search-example-label": "Enghraifft",
+    "searchcases-card-button": "Cyflwyno Chwiliad",
+    "searchcases-card-advanced-link": "Fel arall, gallwch chwilio gan ddefnyddio ein meini prawf eraill gyda'n chwiliad uwch",
+    "awatitingsubmission-card-title": "Eto i’w gyflwyno",
+    "myrepresentations-card-title": "Cyflwyniadau'r achos",
+    "watchedcases-card-title": "Achosion a gwylio"
+}

locales/cy/newappeal.json

@@ -0,0 +1,5 @@
+{
+    "viewall-link": "View all",
+    "parent-page-title": "My portal",
+    "page-title": "New appeal"
+}

locales/cy/search.json

@@ -0,0 +1,59 @@
+{
+    "page-title": "Crynodeb o’r Achos ar gyfer",
+    "search-title-label": "Crynodeb o’r Achos ar gyfer",
+    "casereference-label": "Cyfeirnod yr Achos (7 digid olaf)",
+    "sitelocation-legend": "Lleoliad y Safle",
+    "address-line-one-label": "Llinell gyntaf y cyfeiriad",
+    "town-label": "Tref/Dinas (agosaf)",
+    "county-label": "Sir",
+    "postcode-label": "Cod Post",
+    "lpa-label": "Awdurdod Cynllunio Lleol",
+    "lpa-reference-label": "Cyfeirnod yr Awdurdod Cynllunio Lleol",
+    "case-type-label": "Math o Achos",
+    "case-type-option-1": "--Dewiswch--",
+    "case-type-option-2": "Unrhyw fath/Pob math",
+    "case-type-option-3": "Apeliadau Hysbysebu",
+    "case-type-option-4": "Ceisiadau Cynllunio a Alwyd i Mewn",
+    "case-type-option-5": "Apeliadau Gorchymyn i ben",
+    "case-type-option-6": "Apeliadau gorfodi parthed adeilad rhestredig ac ardal gadwraeth",
+    "case-type-option-7": "Apeliadau Gorfodi",
+    "case-type-option-8": "Apeliadau perchennog tŷ",
+    "case-type-option-9": "Apeliadau Tystysgrid Datblygiad Cyfreithlon",
+    "case-type-option-10": "Apeliadau Cynllunio",
+    "case-type-option-11": "Apeliadau Rhwymedigaethau Cynllunio",
+    "case-type-option-12": "Apeliadau cynllunio adeiladau rhestredig ac ardal gadwraeth",
+    "advanced-search-title-label": "Chwiliad manwl",
+    "applicant-label": "Apelydd/Ymgeisydd",
+    "other-party-label": "Parti Arall",
+    "hearing-date-label": "Dyddiad y Gwrandawaid/Ymchwiliad",
+    "site-visit-date-label": "Dyddiad yr Ymweliad a’r Safle",
+    "callin-date-label": "Dyddiad galw i mewn",
+    "date-received": "Dyddiad Derbyn",
+    "start-date-label": "Dyddiad Dechrau",
+    "decision-date-label": "Dyddiad y Penderfyniad",
+    "procedure-type-label": "Math o weithdrefn",
+    "procedure-type-option-1": "--Dewiswch--",
+    "procedure-type-option-2": "Gwrandawiad",
+    "procedure-type-option-3": "Ymchwiliad",
+    "procedure-type-option-4": "Sylwadau ysgrifenedig",
+    "status-label": "Statws",
+    "status-option-1": "--Dewiswch--",
+    "status-option-2": "Unrhyw rai",
+    "status-option-3": "Yn mynd rhagddo",
+    "status-option-4": "Cyflawn",
+    "date-margin-label": "+/- 30 diwrnod",
+    "search-button-label": "Chwilio",
+    "clear-button-label": "Cliriwch",
+    "clear-all-button-label": "Clirio Pob Un",
+    "searchresults-title-label": "Crynodeb o’r Achos ar gyfer",
+    "searchresults-count-label": "Cafodd eich chwiliad {{count}} o ganlyniadau",
+    "searchresults-case-reference-label": "Cyfeirnod yr Achos",
+    "searchresults-site-address-label": "Cyfeiriad y Safle",
+    "searchresults-applicant-label": "Apelydd/Ymgeisydd",
+    "searchresults-authority-label": "ACLl",
+    "searchresults-case-type-label": "Math o Achos",
+    "searchresults-status-label": "Statws",
+    "searchresults-watch-label": "Gwylio",
+    "searchresults-search-button-label": "Mireinio'r chwiliad",
+    "searchresults-new-search-button-label": "Chwiliad newydd"
+}

locales/en/case.json

@@ -0,0 +1,33 @@
+{
+    "case-card-title": "Reference: APP/B1415/W/20/3271702",
+    "summary-applicant-label": "Appellant/Applicant",
+    "summary-agent-label": "Agent",
+    "summary-site-address-label": "Site Address",
+    "summary-make-representation-label": "Make representation",
+    "summary-back-button-label": "Go back",
+    "summary-case-details-label": "Case Details",
+    "summary-case-type-label": "Case Type",
+    "summary-lpa-label": "Local Planning Authority",
+    "summary-case-summary-label": "Case Summary",
+    "summary-case-officer-label": "Case Officer",
+    "summary-procedure-label": "Procedure",
+    "summary-status-label": "Status",
+    "summary-decision-label": "Decision and Outcome",
+    "summary-case-link-status-label": "Case Link Status",
+    "summary-linked-cases-label": "Linked Cases",
+    "summary-dates-label": "Dates",
+    "summary-start-date-label": "Start Date",
+    "summary-questionnaire-due-date-label": "Questionnaire due",
+    "summary-statement-due-date-label": "Statement(s) due",
+    "summary-interested-party-date-label": "Interested Party Comments due",
+    "summary-applicant-final-comments-date-label": "Appellant/LPA Final Comments due",
+    "summary-inquiry-evidence-date-label": "Inquiry Evidence due",
+    "summary-event-date-label": "Event Date",
+    "summary-decision-date-label": "Decision Date",
+    "summary-documents-button-label": "Documents",
+    "documents-document-count-label": "Document(s)",
+    "documents-name-label": "Name",
+    "documents-doc-type-label": "Document type",
+    "documents-date-published-label": "Date published",
+    "documents-size-label": "Size (KB)"
+}

locales/en/common.json

@@ -0,0 +1,15 @@
+{
+  "service-name": "Planning casework",
+  "breadcrumb-back-link": "Back",
+  "error-radio": "Choose an option",
+  "error-checkbox": "Choose an option",
+  "error-textbox": "Choose an option",
+  "available-in": "Cymraeg",
+  "continue-button": "Continue",
+  "submit-and-start": "Submit and start course",
+  "footer-terms-conditions-link": "Terms and conditions",
+  "footer-privacy-link": "Privacy Notice",
+  "footer-cookies-link": "Cookies",
+  "footer-accessibility-link": "Accessibility",
+  "footer-feedback-link": "Feedback"
+}

locales/en/home.json

@@ -0,0 +1,21 @@
+{
+    "login-card-title": "Log in or Register",
+    "login-card-id-label": "Government Gateway user ID",
+    "login-card-id-hint": "This could be up to 12 characters.",
+    "login-card-password-label": "Password",
+    "login-card-button": "Sign in",
+    "login-card-register-label": "I am a new user and would like to",
+    "login-card-register-link": "Register",
+    "login-card-forgotten-label": "Forgotten your password or username?",
+    "login-card-forgotten-link": "Click here",
+    "casesearch-card-title": "Search for a case",
+    "casesearch-card-search-hint": "Search by entering the 7 digit case reference number:",
+    "casesearch-card-search-example-label": "Example",
+    "casesearch-card-button": "Submit Search",
+    "casesearch-card-advanced-link": "Advanced Search",
+    "casescomment-card-title": "Comment on a case",
+    "casescomment-card-paragraph-one": "Simply search for your case and click on the 'Make Representation' button. The best way to comment on an existing case is to register with us first as that makes it easier to track cases and submit comments.",
+    "casescomment-card-paragraph-two": "For Householder and Commercial appeals, interested parties are unable to make representations at appeal stage. Any representations made at application stage will be provided by the local planning authority and considered by the Inspector.",
+    "inspectorate-card-visit-label" : "Visit the Planning Inspectorate",
+    "inspectorate-card-visit-link": "Home"
+}

locales/en/myportal.json

@@ -0,0 +1,18 @@
+{   
+    "viewall-link": "View all",
+    "page-title": "My Portal",
+    "makenewappeal-card-title": "Make a new appeal",
+    "makenewappeal-card-paragraph-one": "Before submitting a new appeal, please ensure you have read all of the guidance",
+    "makenewappeal-card-link": "relevant to your appeal type.",
+    "makenewappeal-card-paragraph-two": "Once you click the 'make a new appeal' button below you will be guided through a process to help you select the correct appeal type",
+    "makenewappeal-card-button-label": "Make a new appeal",
+    "mycases-card-title": "My cases",
+    "searchcases-card-title": "Search for a case/submit representation",
+    "searchcases-card-search-hint": "Search by entering the 7 digit case reference number:",
+    "searchcases-card-search-example-label": "Example",
+    "searchcases-card-button": "Submit Search",
+    "searchcases-card-advanced-link": "Advanced Search",
+    "awatitingsubmission-card-title": "Awaiting submission",
+    "myrepresentations-card-title": "My representations",
+    "watchedcases-card-title": "Watched cases"
+}

locales/en/newappeal.json

@@ -0,0 +1,5 @@
+{
+    "viewall-link": "View all",
+    "parent-page-title": "My portal",
+    "page-title": "New appeal"
+}

locales/en/search.json

@@ -0,0 +1,59 @@
+{
+    "page-title": "Search for a case",
+    "search-title-label": "Search for a case",
+    "casereference-label": "Case reference (last 7 digits)",
+    "sitelocation-legend": "Site location",
+    "address-line-one-label": "First line of address",
+    "town-label": "Town/City (nearest)",
+    "county-label": "County",
+    "postcode-label": "Postcode",
+    "lpa-label": "Local Planning Authority",
+    "lpa-reference-label": "LPA reference number",
+    "case-type-label": "Case type",
+    "case-type-option-1": "-- Select --",
+    "case-type-option-2": "Any/All",
+    "case-type-option-3": "Advertisement Appeals",
+    "case-type-option-4": "Called in Planning Applications",
+    "case-type-option-5": "Discontinuance Notice Appeals",
+    "case-type-option-6": "Enforcement Listed Building and Conservation Area Appeals",
+    "case-type-option-7": "Enforcement Appeals",
+    "case-type-option-8": "Householder Appeals",
+    "case-type-option-9": "Lawful Development Certificate Appeals",
+    "case-type-option-10": "Planning Appeals",
+    "case-type-option-11": "Planning Obligation Appeals",
+    "case-type-option-12": "Planning Listed Building and Conservation Area Appeals",
+    "advanced-search-title-label": "Advanced search",
+    "applicant-label": "Appellant/Applicant",
+    "other-party-label": "Other Party",
+    "hearing-date-label": "Hearing/Enquiry date",
+    "site-visit-date-label": "Site visit date",
+    "callin-date-label": "Call-in date",
+    "date-received": "Date received",
+    "start-date-label": "Start date",
+    "decision-date-label": "Decision date",
+    "procedure-type-label": "Procedure type",
+    "procedure-type-option-1": "--Select--",
+    "procedure-type-option-2": "Hearing",
+    "procedure-type-option-3": "Inquiry",
+    "procedure-type-option-4": "Written representations",
+    "status-label": "Status",
+    "status-option-1": "--Select--",
+    "status-option-2": "Any",
+    "status-option-3": "In Progress",
+    "status-option-4": "Complete",
+    "date-margin-label": "+/- 30 days",
+    "search-button-label": "Search",
+    "clear-button-label": "Clear",
+    "clear-all-button-label": "Clear all",
+    "searchresults-title-label": "Search for a case",
+    "searchresults-count-label": "Your search returned {{count}} results",
+    "searchresults-case-reference-label": "Case reference",
+    "searchresults-site-address-label": "Site address",
+    "searchresults-applicant-label": "Appellant/Applicant",
+    "searchresults-authority-label": "Authority",
+    "searchresults-case-type-label": "Case type",
+    "searchresults-status-label": "Status",
+    "searchresults-watch-label": "Watch",
+    "searchresults-search-button-label": "Refine Search",
+    "searchresults-new-search-button-label": "New Search"
+}

next.config.js

@@ -0,0 +1,49 @@
+// next.config.js
+const withStyles = require("@webdeb/next-styles");
+//const { nextI18NextRewrites } = require("next-i18next/rewrites");
+const nextTranslate = require("next-translate");
+
+//acp
+// module.exports = {
+//   poweredByHeader: false,
+//   env: {
+//     API_ROOT: "http://pel-beta-backend",
+//     GRANT_TYPE: "password",
+//     USERNAME: "api",
+//     PASSWORD: "tJRq4o2ZBQ",
+//     CLIENT_ID: "2d3df41b-9b59-4bbd-85a7-9314125c1689",
+//     CLIENT_SECRET: "85H8qdrEvKEzbW5",
+//   },
+//   ...nextTranslate(),
+// };
+
+module.exports = withStyles({
+    sass: true, // use .scss files
+    modules: true, // style.(m|module).css & style.(m|module).scss for module files
+    sassLoaderOptions: {
+        sassOptions: {
+            includePaths: [
+                "/styles/sass",
+                "node_modules/govuk-frontend/govuk/all",
+                "/styles/sass/patterns",
+                "/styles/sass/prevent-training",
+            ], // @import 'variables'; # loads (src/styles/varialbes.scss), you got it..
+        },
+    },
+});
+module.exports = {
+    generateBuildId: async () => {
+        // You can, for example, get the latest git commit hash here
+        return "pinswg-build-id";
+    },
+    poweredByHeader: false,
+    env: {
+        // GRANT_TYPE : 'password',
+        // USERNAME : 'api',
+        // API_ROOT : "https://api.dev.prevent.internal.rehab",
+        // PASSWORD : 'B69eQwv7rzPBNcA',
+        // CLIENT_ID : 'fa1f0ef2-f10f-462e-98a5-843359db6066',
+        // CLIENT_SECRET : 'B69eQwv7rzPBNcA',
+    },
+    ...nextTranslate(),
+};

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "acp",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "dev:app": "node ./server/server.js && yarn lint:js",
+    "build": "NODE_ENV=production node_modules/next/dist/bin/next build --debug",
+    "start": "node_modules/next/dist/bin/next start"
+  },
+  "dependencies": {
+    "@webdeb/next-styles": "^1.1.1",
+    "applicationinsights": "^2.1.3",
+    "axios": "^0.21.1",
+    "compression": "^1.7.4",
+    "cookies": "^0.8.0",
+    "dom": "^0.0.3",
+    "dynamics-web-api": "^1.7.4",
+    "express": "^4.17.1",
+    "govuk-frontend": "^3.13.0",
+    "https": "^1.0.0",
+    "jsonpath": "^1.1.1",
+    "jsonpath-plus": "^5.1.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.1",
+    "next": "^11.0.1",
+    "next-i18next": "^8.5.1",
+    "next-redux-wrapper": "^7.0.2",
+    "next-translate": "^1.0.7",
+    "pm2": "^5.1.0",
+    "react": "17.0.2",
+    "react-cookie-consent": "^6.2.4",
+    "react-datepicker": "^4.1.1",
+    "react-dom": "17.0.2",
+    "react-redux": "^7.2.4",
+    "react-xml-parser": "^1.1.8",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-form": "^8.3.7",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0",
+    "sass": "^1.35.1",
+    "sass-loader": "^12.1.0",
+    "swr": "^0.5.6",
+    "webpack": "^5.40.0",
+    "xml2js": "^0.4.23",
+    "xmldom": "^0.6.0",
+    "xmlhttprequest": "^1.8.0",
+    "xpath": "^0.0.32"
+  },
+  "devDependencies": {
+    "eslint": "^7.29.0",
+    "eslint-config-next": "^11.0.1",
+    "prettier": "2.3.2"
+  }
+}

pages/_app.js

@@ -0,0 +1,24 @@
+//import "../styles/globals.css";
+import "../styles/sass/styles.scss";
+import Loading from "../components/loading";
+import { wrapper } from "../store/store";
+import { useStore, Provider } from "react-redux";
+import { persistStore } from "redux-persist";
+import { PersistGate } from "redux-persist/integration/react";
+
+const MyApp = ({ Component, pageProps }) => {
+    const store = useStore((state) => state);
+    const persistor = persistStore(store, {}, function () {
+        persistor.persist();
+    });
+
+    return (
+        <Provider store={store}>
+            <PersistGate persistor={store.__persistor} loading={<Loading />}>
+                <Component {...pageProps} />
+            </PersistGate>
+        </Provider>
+    );
+};
+
+export default wrapper.withRedux(MyApp);

pages/_document.js

@@ -0,0 +1,40 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import SkipLink from "../components/skiplink";
+//import basicAuthMiddleware from "nextjs-basic-auth-middleware";
+
+class MyDocument extends Document {
+    //   static async getInitialProps(ctx) {
+    //     const initialProps = await Document.getInitialProps(ctx);
+    //     if (ctx.req && ctx.res) {
+    //       await basicAuthMiddleware(ctx.req, ctx.res, {
+    //         users: [
+    //           {
+    //             name: "rehab",
+    //             password: "preventTesting",
+    //           },
+    //         ],
+    //       });
+    //     }
+    //     return { ...initialProps };
+    //   }
+
+    render() {
+        return (
+            <Html lang="en">
+                <Head />
+                <body>
+                    {!process.browser && (
+                        <script>
+                            window.apiRoot = `{process.env.API_ROOT}`
+                        </script>
+                    )}
+                    <SkipLink />
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    }
+}
+
+export default MyDocument;

pages/_error.js

@@ -0,0 +1,17 @@
+function Error({ statusCode }) {
+    return (
+        <p>
+            An error....
+            {statusCode
+                ? `An error ${statusCode} occurred on server`
+                : "An error occurred on client"}
+        </p>
+    );
+}
+
+Error.getInitialProps = ({ res, err }) => {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+    return { statusCode };
+};
+
+export default Error;

pages/account/changepassword.js

@@ -0,0 +1,102 @@
+import Link from "next/link";
+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 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";
+import jsonpath from "jsonpath";
+import { reduxForm, formValueSelector } from "redux-form";
+
+import ChangePassword from "../../components/account/changepassword";
+import xpath from "xpath";
+import {
+    setAppealType,
+    setAppealTypeTitle,
+    setAppealTypeID,
+    setAppealLPA,
+    getAppealTypeObj,
+} from "../../store/appealType/action";
+import { getAppealsTypes, getLPA } from "../../actions";
+import { setLPA } from "../../store/lpa/action";
+
+const Home = (props) => {
+    const { footerLinks, pages, formData } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const { appealType, LPAData } = props;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-width-container">
+                            <Banner />
+                            <Breadcrumbs slug={appealtypes} />
+                            <main
+                                className="govuk-main-wrapper--auto-spacing"
+                                id="main-content"
+                                role="main"
+                            >
+                                <div className="govuk-grid-row">
+                                    <div className="govuk-grid-column-two-thirds">
+                                        <h1>Change password</h1>
+                                        <ChangePassword props={props} />
+                                    </div>
+                                </div>
+                            </main>
+                        </div>
+                    </div>
+                </div>
+
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            const appealTypeData = await getAppealsTypes();
+            const lpaData = await getLPA();
+            console.log("appeal types", appealTypeData);
+            console.log("lpa typeswwwww", lpaData);
+            store.dispatch(setAppealType(appealTypeData));
+            store.dispatch(setLPA(lpaData));
+        }
+);
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        LPAData: state.LPAData,
+        form: state.form,
+    };
+};
+
+export default connect(mapStateToProps)(Home);

pages/account/personaldetails.js

@@ -0,0 +1,94 @@
+import Link from "next/link";
+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 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";
+import jsonpath from "jsonpath";
+import { reduxForm, formValueSelector } from "redux-form";
+
+import PersonalDetails from "../../components/account/personaldetails";
+import xpath from "xpath";
+import { setAccountDetails } from "../../store/accountDetails/action";
+import { getPersonalAccount } from "../../actions";
+import { setLPA } from "../../store/lpa/action";
+
+const Home = (props) => {
+    const { footerLinks, formData } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const { appealType, LPAData } = props;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-width-container">
+                            <Banner />
+                            <Breadcrumbs slug={appealtypes} />
+                            <main
+                                className="govuk-main-wrapper--auto-spacing"
+                                id="main-content"
+                                role="main"
+                            >
+                                <div className="govuk-grid-row">
+                                    <div className="govuk-grid-column-two-thirds">
+                                        <h1>Your account</h1>
+                                        <PersonalDetails props={props} />
+                                    </div>
+                                </div>
+                            </main>
+                        </div>
+                    </div>
+                </div>
+
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            const accountDetails = await getPersonalAccount();
+            console.log("perosnal: ", accountDetails);
+            store.dispatch(setAccountDetails(accountDetails));
+        }
+);
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        LPAData: state.LPAData,
+        form: state.form,
+        accountDetails: state.accountDetails,
+    };
+};
+
+export default connect(mapStateToProps)(Home);

pages/account/register.js

@@ -0,0 +1,152 @@
+import Link from "next/link";
+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 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";
+import jsonpath from "jsonpath";
+import { reduxForm, formValueSelector } from "redux-form";
+
+import RegisterForm from "../../components/account/registerform";
+import xpath from "xpath";
+import {
+    setAppealType,
+    setAppealTypeTitle,
+    setAppealTypeID,
+    setAppealLPA,
+    getAppealTypeObj,
+} from "../../store/appealType/action";
+import { getAppealsTypes, getLPA } from "../../actions";
+import { setLPA } from "../../store/lpa/action";
+
+const Home = (props) => {
+    const { footerLinks, pages, formData } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const { appealType, LPAData } = props;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-width-container">
+                            <Banner />
+                            <Breadcrumbs slug={appealtypes} />
+                            <main
+                                className="govuk-main-wrapper--auto-spacing"
+                                id="main-content"
+                                role="main"
+                            >
+                                <div className="govuk-grid-row">
+                                    <div className="govuk-grid-column-two-thirds">
+                                        <h1>Create a new account</h1>
+                                        <RegisterForm props={props} />
+                                    </div>
+
+                                    <div className="govuk-grid-column-one-third">
+                                        <h2 className="govuk-heading-m">
+                                            Help
+                                        </h2>
+
+                                        <h3>
+                                            Companies or submissions by more
+                                            than one individual (groups)
+                                        </h3>
+
+                                        <p className="govuk-body">
+                                            If you are submitting an appeal or
+                                            representation from a company e.g.
+                                            &quot;Acme Inc&quot; or a group of
+                                            people e.g. &quot;Residents of 1-10
+                                            High street&quot;, you should enter
+                                            the name of the company or group in
+                                            the Company/Group field. You will be
+                                            deemed as acting as their
+                                            representative.
+                                        </p>
+
+                                        <h3>
+                                            Enforcement appeals by married/civil
+                                            partnership couples
+                                        </h3>
+
+                                        <p className="govuk-body">
+                                            You should not enter a group name.
+                                            You need only enter your
+                                            partner&apos;s name on the appeal
+                                            form itself as an additional
+                                            appellant.
+                                        </p>
+
+                                        <h3>
+                                            Other appeals by married/civil
+                                            partnership couples
+                                        </h3>
+
+                                        <p className="govuk-body">
+                                            For any other type of appeal, for
+                                            example a planning appeal, you
+                                            should enter a group name when
+                                            creating your account e.g. &quot;Mr
+                                            and Mrs Smith&quot;, if that is the
+                                            name on the application.
+                                        </p>
+                                    </div>
+                                </div>
+                            </main>
+                        </div>
+                    </div>
+                </div>
+
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            const appealTypeData = await getAppealsTypes();
+            const lpaData = await getLPA();
+            console.log("appeal types", appealTypeData);
+            console.log("lpa typeswwwww", lpaData);
+            store.dispatch(setAppealType(appealTypeData));
+            store.dispatch(setLPA(lpaData));
+        }
+);
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        LPAData: state.LPAData,
+        form: state.form,
+    };
+};
+
+export default connect(mapStateToProps)(Home);

pages/advancedsearch.js

@@ -0,0 +1,84 @@
+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 Search from "../components/search";
+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 Cookies from "cookies";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+
+const Home = (props) => {
+    const { footerLinks, pages } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Search />
+                </div>
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+// export const getServerSideProps = wrapper.getServerSideProps(
+//   async ({ locale, store, req, res }) => {
+//     const token = await getToken();
+//     let accessToken = token.access_token;
+
+//     const apiRoot = process.browser ? window.API_ROOT : process.env.API_ROOT;
+
+//     const [pages, footerLinks, courseListContent] = await Promise.all([
+//       await getPages(accessToken, locale),
+//       await getFooterLinks(accessToken, locale),
+//       await getCourseList(accessToken, locale),
+//     ]);
+//     //const courseID = await getCourseID
+//     store.dispatch(setApiRoot(apiRoot));
+//     store.dispatch(setPages(pages));
+//     store.dispatch(setFooterLinks(footerLinks));
+//     store.dispatch(setCourseListContent(courseListContent));
+//   }
+// );
+
+// const mapStateToProps = (state) => {
+//   //console.log(state);
+
+//   return {
+//     apiroot: state.apiroot,
+//     courseListContent: state.courseListContent.courseListContent,
+//     pages: state.pages.pages,
+//     footerLinks: state.footerLinks.footerLinks,
+//     regions: state.regions,
+//     sectors: state.sectors,
+//     form: state.form,
+//   };
+// };
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+    };
+};
+
+export default connect(mapStateToProps)(Home);

pages/api/forms.txt

@@ -0,0 +1,33 @@
+
+pinswg_dns
+pinswg_planningobligationappeals106
+pinswg_planningconditionss73s79
+pinswg_row
+pinswg_transportandworkact
+pinswg_harbourrevisionorder
+pinswg_miscellaneouscasework
+pinswg_planningappeals78
+pinswg_lawfuldevelopmentcertificate
+pinswg_householderappealhas
+pinswg_enforcementlistedbuildingconservationap
+pinswg_callinss77
+pinswg_commonland
+pinswg_adverts
+pinswg_hedgeshedgerowstreepreservationreplacem
+pinswg_compulsorypurchaseorders
+pinswg_communityinfrastructurelevys117118119
+pinswg_objectiveconfig
+pinswg_nonvalidation
+pinswg_caseinvolvement
+pinswg_advertisementappealanddiscontinuance
+pinswg_documenthistory
+pinswg_document
+pinswg_wayleave
+pinswg_listedbuildingandconservationareaconsen
+pinswg_environmentalpermitting
+pinswg_enforcementnoticeappeals174
+pinswg_ldp
+pinswg_maintenanceoflands217
+pinswg_electricityact
+
+https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/EntityDefinitions(LogicalName='incident')/Attributes(LogicalName='pinswg_appealcasetype')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)

pages/api/lookups/personaldetails.js

@@ -0,0 +1,17 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        data: {
+            firstname: "Steve",
+            lastname: "Johnson",
+            email: "steve@test.co.uk",
+            telephone: "0000000000",
+            companygroup: "Test Company",
+            addressline1: "1 Test Street",
+            towncity: "TestTown",
+            county: "Test County",
+            postcode: "TN12 12N",
+        },
+    });
+};
+export default ApiResponse;

pages/api/lookups/pinswg_appointedby.js

@@ -0,0 +1,251 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        "@odata.context":
+            "https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/$metadata#EntityDefinitions('pinswg_householderappealhas')/Attributes/Microsoft.Dynamics.CRM.PicklistAttributeMetadata(LogicalName,GlobalOptionSet,GlobalOptionSet(Options))/$entity",
+        "LogicalName": "pinswg_appointedby",
+        "MetadataId": "3c10eef7-6f85-eb11-aac2-00224800be9c",
+        "GlobalOptionSet": {
+            "@odata.type": "#Microsoft.Dynamics.CRM.OptionSetMetadata",
+            "Options": [
+                {
+                    "Value": 846040000,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "MHCLG",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "899c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "MHCLG",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "899c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "8b9c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "8b9c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+                {
+                    "Value": 846040001,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "Welsh Government",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "8c9c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "Welsh Government",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "8c9c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "8e9c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "8e9c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+                {
+                    "Value": 846040003,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "Secretary of State for Transport",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "929c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "Secretary of State for Transport",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "929c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "949c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "949c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+                {
+                    "Value": 846040004,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "BEIS",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "959c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "BEIS",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "959c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "979c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "979c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+                {
+                    "Value": 846040005,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "Council",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "989c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "Council",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "989c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "9a9c9260-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "9a9c9260-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+            ],
+            "MetadataId": "869c9260-3683-eb11-aac0-00224800be9c",
+        },
+    });
+};
+export default ApiResponse;

pages/api/lookups/pinswg_band.js

@@ -0,0 +1,157 @@
+const ApiResponse = (req, res) => {
+    res.statusCode = 200;
+    res.json({
+        "@odata.context":
+            "https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/$metadata#EntityDefinitions('pinswg_householderappealhas')/Attributes/Microsoft.Dynamics.CRM.PicklistAttributeMetadata(LogicalName,GlobalOptionSet,GlobalOptionSet(Options))/$entity",
+        "LogicalName": "pinswg_band",
+        "MetadataId": "bddafa01-7085-eb11-aac2-00224800be9c",
+        "GlobalOptionSet": {
+            "@odata.type": "#Microsoft.Dynamics.CRM.OptionSetMetadata",
+            "Options": [
+                {
+                    "Value": 846040000,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "Band 1",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "3d8e4173-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "Band 1",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "3d8e4173-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "3f8e4173-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "3f8e4173-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+                {
+                    "Value": 846040001,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "Band 2",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "408e4173-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "Band 2",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "408e4173-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "428e4173-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "428e4173-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+                {
+                    "Value": 846040002,
+                    "Label": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "Band 3",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "438e4173-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "Band 3",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "438e4173-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Description": {
+                        "LocalizedLabels": [
+                            {
+                                "Label": "",
+                                "LanguageCode": 1033,
+                                "IsManaged": false,
+                                "MetadataId":
+                                    "458e4173-3683-eb11-aac0-00224800be9c",
+                                "HasChanged": null,
+                            },
+                        ],
+                        "UserLocalizedLabel": {
+                            "Label": "",
+                            "LanguageCode": 1033,
+                            "IsManaged": false,
+                            "MetadataId":
+                                "458e4173-3683-eb11-aac0-00224800be9c",
+                            "HasChanged": null,
+                        },
+                    },
+                    "Color": "#0000ff",
+                    "IsManaged": false,
+                    "MetadataId": null,
+                    "HasChanged": null,
+                },
+            ],
+            "MetadataId": "3a8e4173-3683-eb11-aac0-00224800be9c",
+        },
+    });
+};
+export default ApiResponse;