Merged PR 963: update non val case details

update non val case details

Related work items: #8044

.env copy.local

@@ -0,0 +1,131 @@
+
+ 
+ACCESS_TOKEN_ENDPOINT = https://login.microsoftonline.com/
+//ESNR Tenant
+TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
+//WGO Tenant
+//TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
+GRANT_TYPE = "client_credentials"
+
+HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
+NEXT_PUBLIC_HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
+
+
+//Dev oauth ESNR
+CLIENT_ID = e082def0-3453-461f-9a5e-f4ab127dc015
+CLIENT_SECRET = qW.7Q~TSr3sZmLEnJQJPXEdOckb_yo2t1yJmY
+RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/
+RELAYURI = "dev-pedw-ns.servicebus.windows.net"
+RELAYPATH = "dev-pedw-hc"
+
+
+//Test Oauth ESNR
+//CLIENT_ID = 6619ad85-c908-490d-811b-de8c93c0f2aa
+//CLIENT_SECRET = qKo7Q~5QvLEplbwnBbint_I5lXqx_-kDm8Vj-
+//RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
+//RELAYURI = "test-pedw-ns.servicebus.windows.net"
+//RELAYPATH = "test-pedw-hc"
+
+
+//Preprod Oauth WGO
+//CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
+//CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
+//RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
+//RELAYURI = "pp-pedw-ns.servicebus.windows.net"
+//RELAYPATH = "pp-pedw-hc"
+
+
+
+//Prod Oauth WGO
+//CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
+//CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
+//RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
+//RELAYURI = "prod-pedw-ns.servicebus.windows.net"
+//RELAYPATH = "prod-pedw-hc"
+
+
+GOOGLE_TAG_MANAGER = GTM-T78CBC3
+SHOWLOGIN = "true"
+SHOWREPRESENTATIONS = false
+SHOWFILEUPLOAD = "false"
+SHOWMAPS = "true"
+//BASIC_AUTH_CREDENTIALS = pinswg:password|pinswg2:password2
+
+
+PORT= "3000"
+DEFAULT_DOMAIN = "localhost"
+I18N_DOMAIN = "cymru.local"
+//I18N_DOMAIN ="dev-gwaithcynllunio.gwasanaeth.llyw.cymru"
+//I18N_DOMAIN ="stage-gwaithcynllunio.gwasanaeth.llyw.cymru"
+//I18N_DOMAIN ="pp-gwaithcynllunio.gwasanaeth.llyw.cymru"s
+//I18N_DOMAIN ="gwaithcynllunio.gwasanaeth.llyw.cymru"
+
+
+//gov gateway 
+GG_PROVIDER_CONFIG_ENDPOINT = "https://api.ete.access.service.gov.uk/.well-known/openid-configuration"
+GG_CLIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ
+GG_CLIENT_SECRET = z1PGLAKPxIhjMBegTdzX22AayIORc1GsCbMQZ6mieBn7zChjzzxup5lkIByEmsYS
+//GG_REDIRECT_URI = "http://localhost:3000"
+GG_REDIRECT_URI = "https://dev-planningcasework.service.gov.wales"
+
+NEXT_PUBLIC_GG_CLIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ
+NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000"
+
+API_ROOT = "http://localhost:3000"
+
+
+GOOGLE_MAP_API_KEY = AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo
+
+
+//EMAIL_SERVER_HOST=smtp.livemail.co.uk
+//EMAIL_SERVER_PORT=465
+//EMAIL_SERVER_USER=rob@rdbsolutions.co.uk
+//EMAIL_SERVER_PASSWORD=R0b3rt72
+//EMAIL_FROM=rob@rdbsolutions.co.uk
+
+EMAIL_SERVER_HOST=smtp.sendgrid.net
+EMAIL_SERVER_PORT=465
+EMAIL_SERVER_USER=apikey
+EMAIL_SERVER_PASSWORD=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
+EMAIL_FROM=rob@rdbsolutions.co.uk
+
+
+
+
+
+NEXT_PUBLIC_MAGIC_PK=pk_live_674E13244D1BB0A4
+MAGIC_SK=sk_live_F0E74A9557051A65
+
+
+
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
+
+APPLE_ID=
+APPLE_TEAM_ID=
+APPLE_PRIVATE_KEY=
+APPLE_KEY_ID=
+
+AUTH0_ID=
+AUTH0_SECRET=
+AUTH0_ISSUER=
+
+FACEBOOK_ID=
+FACEBOOK_SECRET=
+
+GITHUB_ID=
+GITHUB_SECRET=
+
+GOOGLE_ID=
+GOOGLE_SECRET=
+
+TWITTER_ID=
+TWITTER_SECRET=
+
+//EMAIL_SERVER=smtp://username:password@smtp.example.com:587
+//EMAIL_FROM=NextAuth <noreply@example.com>
+
+//DATABASE_URL=sqlite://localhost/:memory:?synchronize=true
+DATABASE_URL=mysql://nextAuthAdmin:!Sky9fish1972@77.68.17.157:3306/nextauthDB?synchronise=true
+
+SECRET=SuperSecret

.env.local

@@ -1,31 +1,32 @@
-
- 
 ACCESS_TOKEN_ENDPOINT = https://login.microsoftonline.com/
-TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
+//ESNR Tenant
-//TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
+//TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
+//WGO Tenant
+TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
 GRANT_TYPE = "client_credentials"
 
 HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
 NEXT_PUBLIC_HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
 
 
-//Dev oauth 
+//Dev oauth ESNR
-//CLIENT_ID = e082def0-3453-461f-9a5e-f4ab127dc015
+CLIENT_ID = 9b834097-03d7-409b-b038-ecfec31a394a
-//CLIENT_SECRET = qW.7Q~TSr3sZmLEnJQJPXEdOckb_yo2t1yJmY
+//CLIENT_SECRET = 4Vt8Q~olL1hx7n01B0~tXf-N2YL5DyC_Fk6waagX
-//RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/
+CLIENT_SECRET = AU88Q~NBOVOXqwb4mBx9y.NMIZ9s1o7boqZoKcSE
-//RELAYURI = "dev-pedw-ns.servicebus.windows.net"
+RELAY_ROOT = https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/
-//RELAYPATH = "dev-pedw-hc"
+RELAYURI = "dev-pedw-ns.servicebus.windows.net"
+RELAYPATH = "dev-pedw-hc"
 
 
-//Test Oauth
+//Test Oauth ESNR
-CLIENT_ID = 6619ad85-c908-490d-811b-de8c93c0f2aa
+//CLIENT_ID = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
-CLIENT_SECRET = qKo7Q~5QvLEplbwnBbint_I5lXqx_-kDm8Vj-
+//CLIENT_SECRET = IXI8Q~D5oqsC-nrtayHHc~tUAfjQFzNiKVQ~fc2S
-RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
+//RELAY_ROOT = https://test-pedw-ns.servicebus.windows.net/test-pedw-hc/
-RELAYURI = "test-pedw-ns.servicebus.windows.net"
+//RELAYURI = "test-pedw-ns.servicebus.windows.net"
-RELAYPATH = "test-pedw-hc"
+//RELAYPATH = "test-pedw-hc"
 
 
-//Preprod Oauth
+//Preprod Oauth WGO
 //CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
 //CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
 //RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
@@ -34,9 +35,9 @@ RELAYPATH = "test-pedw-hc"
 
 
 
-//Prod Oauth
+//Prod Oauth WGO
-//CLIENT_ID = 01904c07-9035-4cf9-a535-3945f6e470d2
+//CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
-//CLIENT_SECRET = PRo7Q~GQoKSdARRqF-NOXQDx2Ka8UCINyvagk
+//CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
 //RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
 //RELAYURI = "prod-pedw-ns.servicebus.windows.net"
 //RELAYPATH = "prod-pedw-hc"
@@ -44,8 +45,10 @@ RELAYPATH = "test-pedw-hc"
 
 GOOGLE_TAG_MANAGER = GTM-T78CBC3
 SHOWLOGIN = "true"
-SHOWREPRESENTATIONS = "false"
+SHOWREPRESENTATIONS = false
-BASIC_AUTH_CREDENTIALS = pinswg:password|pinswg2:password2
+SHOWFILEUPLOAD = "false"
+SHOWMAPS = "true"
+//BASIC_AUTH_CREDENTIALS = pinswg:password|pinswg2:password2
 
 
 PORT= "3000"
@@ -61,7 +64,8 @@ I18N_DOMAIN = "cymru.local"
 GG_PROVIDER_CONFIG_ENDPOINT = "https://api.ete.access.service.gov.uk/.well-known/openid-configuration"
 GG_CLIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ
 GG_CLIENT_SECRET = z1PGLAKPxIhjMBegTdzX22AayIORc1GsCbMQZ6mieBn7zChjzzxup5lkIByEmsYS
-GG_REDIRECT_URI = "http://localhost:3000"
+//GG_REDIRECT_URI = "http://localhost:3000"
+GG_REDIRECT_URI = "https://dev-planningcasework.service.gov.wales"
 
 NEXT_PUBLIC_GG_CLIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ
 NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000"
@@ -69,3 +73,46 @@ NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000"
 API_ROOT = "http://localhost:3000"
 
 
+GOOGLE_MAP_API_KEY = AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo
+
+
+
+//Next Auth vars
+//EMAIL_SERVER_HOST=smtp.sendgrid.net
+//EMAIL_SERVER_PORT=465
+//EMAIL_SERVER_USER=apikey
+//EMAIL_SERVER_PASSWORD=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
+//EMAIL_FROM=rob@rdbsolutions.co.uk
+
+
+EMAIL_SERVER_HOST=rdbdigital.com
+EMAIL_SERVER_PORT=465
+EMAIL_SERVER_USER=rob@rdbdigital.com
+EMAIL_SERVER_PASSWORD=!Sky9fish2020
+EMAIL_FROM=no-reply@rdbdigital.com
+
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_URL_INTERNAL=http://localhost:3000 
+//DATABASE_URL=mysql://nextAuthAdmin:!Sky9fish1972@77.68.17.157:3306/nextauthDB?synchronise=true
+DATABASE_URL = sqlserver://pedw-dev-test-sql-svr.database.windows.net:1433;database=PEDWDev;user=RobBondSQL;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=false;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
+
+SECRET=SuperSecret
+
+
+//Azure Storage Account
+
+AZURE_CLIENT_ID	= $CLIENT_ID
+AZURE_TENANT_ID	= $TENANT
+AZURE_CLIENT_SECRET = $CLIENT_SECRET
+AZURE_STORAGE_ACCOUNT_KEY = JS3ZIXianhYhB1lZrHB+bXbdzaLlON0alCyKrFAb+jVEwr9iqo2dty92EBxwnufNFM+CSN/fKX2R+AStDn0byg==
+
+
+AZURE_PEDW_STORAGE_ENDPOINT = https://pedwdev.blob.core.windows.net
+AZURE_PEDW_CONTAINER = "pedwapplications"
+AZURE_PEDW_QUEUE_ENDPOINT = https://$AZURE_STORAGE_ACCOUNT_NAME.queue.core.windows.net
+
+
+
+//gov.notify
+
+NOTIFY_API_KEY = pedwnextauthkey-90f93710-9dae-423e-aea1-11eccd0dc132-0c9469d9-d671-444d-9e9d-3e5a62001043

.eslintrc

@@ -1,6 +1,9 @@
 {
-  "extends": "next",
+  "extends": "next/core-web-vitals",
   "rules": {
-    "@next/next/no-img-element": "off"
+    "@next/next/no-img-element": "off",
+    "react/no-unknown-property": "error"
   }
 }
+
+

actions/azurestorage.js

@@ -0,0 +1,569 @@
+import { v4 as uuidv4 } from "uuid";
+const {
+    ContainerClient,
+    BlockBlobClient,
+    BlobServiceClient,
+    BlobSASPermissions,
+    ContainerSASPermissions,
+    generateBlobSASQueryParameters,
+    SASProtocol,
+} = require("@azure/storage-blob");
+import { DefaultAzureCredential } from "@azure/identity";
+import { consoleLogger, conLog, hashAPIPath } from ".";
+import _ from "lodash";
+const STORAGE_PATH = process.env.AZURE_PEDW_STORAGE_ENDPOINT;
+const STORAGE_CONTAINER = process.env.AZURE_PEDW_CONTAINER;
+const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
+
+export const createContainerSas = async (containerName) => {
+    // Get environment variables
+
+    // Best practice: create time limits
+    const TEN_MINUTES = 10 * 60 * 1000;
+    const NOW = new Date();
+
+    // Best practice: set start time a little before current time to
+    // make sure any clock issues are avoided
+    const TEN_MINUTES_BEFORE_NOW = new Date(NOW.valueOf() - TEN_MINUTES);
+    const TEN_MINUTES_AFTER_NOW = new Date(NOW.valueOf() + TEN_MINUTES);
+
+    // Best practice: use managed identity - DefaultAzureCredential
+    const blobServiceClient = new BlobServiceClient(
+        `${STORAGE_PATH}`,
+        new DefaultAzureCredential()
+    );
+
+    // Best practice: delegation key is time-limited
+    // When using a user delegation key, container must already exist
+    const userDelegationKey = await blobServiceClient.getUserDelegationKey(
+        TEN_MINUTES_BEFORE_NOW,
+        TEN_MINUTES_AFTER_NOW
+    );
+
+    // Need only list permission to list blobs
+    const containerPermissions = "rcwltd";
+
+    // Best practice: SAS options are time-limited
+    const sasOptions = {
+        containerName,
+        permissions: ContainerSASPermissions.parse(containerPermissions),
+        protocol: SASProtocol.HttpsAndHttp,
+        startsOn: TEN_MINUTES_BEFORE_NOW,
+        expiresOn: TEN_MINUTES_AFTER_NOW,
+    };
+
+    //conLogJSON.stringify(sasOptions));
+
+    const sasToken = generateBlobSASQueryParameters(
+        sasOptions,
+        userDelegationKey,
+        accountName
+    ).toString();
+
+    return sasToken;
+};
+
+export const createBlobSas = async (containerName, blobName) => {
+    // Get environment variables
+    const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
+
+    // Best practice: create time limits
+    const TEN_MINUTES = 10 * 60 * 1000;
+    const NOW = new Date();
+
+    // Best practice: set start time a little before current time to
+    // make sure any clock issues are avoided
+    const TEN_MINUTES_BEFORE_NOW = new Date(NOW.valueOf() - TEN_MINUTES);
+    const TEN_MINUTES_AFTER_NOW = new Date(NOW.valueOf() + TEN_MINUTES);
+
+    // Best practice: use managed identity - DefaultAzureCredential
+    const blobServiceClient = new BlobServiceClient(
+        `https://${accountName}.blob.core.windows.net`,
+        new DefaultAzureCredential()
+    );
+
+    // Best practice: delegation key is time-limited
+    // When using a user delegation key, container must already exist
+    const userDelegationKey = await blobServiceClient.getUserDelegationKey(
+        TEN_MINUTES_BEFORE_NOW,
+        TEN_MINUTES_AFTER_NOW
+    );
+
+    // Need only create/write permission to upload file
+    const blobPermissionsForAnonymousUser = "rcwt";
+
+    // Best practice: SAS options are time-limited
+    const sasOptions = {
+        blobName,
+        containerName,
+        permissions: BlobSASPermissions.parse(blobPermissionsForAnonymousUser),
+        protocol: SASProtocol.HttpsAndHttp,
+        startsOn: TEN_MINUTES_BEFORE_NOW,
+        expiresOn: TEN_MINUTES_AFTER_NOW,
+    };
+
+    const sasToken = generateBlobSASQueryParameters(
+        sasOptions,
+        userDelegationKey,
+        accountName
+    ).toString();
+
+    return sasToken;
+};
+
+export const createContainer = async (containerName) => {
+    const creds = new DefaultAzureCredential();
+
+    //containerName = containerName.toLowerCase();
+
+    // console.log(
+    //     "container name:",
+    //     containerName,
+    //     STORAGE_PATH + "/" + containerName
+    // );
+
+    const containerClient = new ContainerClient(
+        `${STORAGE_PATH}/${containerName}`,
+        creds
+    );
+
+    const blobServiceClient = new BlobServiceClient(`${STORAGE_PATH}`, creds);
+
+    const createContainerResponse = await containerClient.createIfNotExists();
+
+    console.log(
+        "\n//////////////////\n container name :",
+        containerName,
+        "\n//////////////////\n"
+    );
+
+    return containerName;
+};
+
+export const getContainers = async () => {
+    const creds = new DefaultAzureCredential();
+    const blobServiceClient = new BlobServiceClient(`${STORAGE_PATH}`, creds);
+
+    console.log("Containers:");
+    for await (const container of blobServiceClient.listContainers()) {
+        console.log(`- ${container.name}`);
+    }
+};
+
+export const getBlobs = async (containerName, casefolderID) => {
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+
+    //conLog"getBlobs " + sasUrl);
+
+    const blobObj = [];
+    for await (const blob of containerClient.listBlobsFlat({
+        prefix: casefolderID + "/files/",
+    })) {
+        let blobDocumentType = blob.name
+            .split("/")[2]
+            .slice(0, blob.name.split("/")[2].indexOf("_"));
+
+        blobObj.push({
+            "name": blob.name.split("/")[2],
+            "path": blob.name,
+            "documentType": blobDocumentType,
+            "versionId": blob.versionId,
+            "caseObj": casefolderID + "/" + casefolderID + "_case.json",
+            "isCurrentVersion": blob.isCurrentVersion,
+            "contentLength": blob.properties.contentLength,
+            "contentType": blob.contentType,
+            "lastModified": blob.properties.lastModified,
+            "filepath":
+                "/api/file/downloadblob?container=" +
+                containerName +
+                "&casefolderID=" +
+                casefolderID +
+                "&blobname=" +
+                blob.name.split("/")[2],
+            "hashedfilepath": hashAPIPath(
+                "/api/file/downloadblob?container=" +
+                    containerName +
+                    "&casefolderID=" +
+                    casefolderID +
+                    "&blobname=" +
+                    blob.name.split("/")[2]
+            ),
+            "deletepath":
+                "/api/file/deleteblob?container=" +
+                containerName +
+                "&casefolderID=" +
+                casefolderID +
+                "&blobname=" +
+                blob.name.split("/")[2],
+            "hasheddeletepath": hashAPIPath(
+                "/api/file/deleteblob?container=" +
+                    containerName +
+                    "&casefolderID=" +
+                    casefolderID +
+                    "&blobname=" +
+                    blob.name.split("/")[2]
+            ),
+            "hashgetblobs": hashAPIPath(
+                "/api/file/getbloblist?container=" +
+                    containerName +
+                    "&casefolderID=" +
+                    casefolderID
+            ),
+        });
+    }
+    //console.log("blobObj:", blobObj);
+
+    return blobObj;
+};
+
+export const createBlob = async (formContent, containerName, caseref) => {
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+
+    formContent = JSON.parse(formContent);
+    let caseID = "";
+
+    caseID = _.has(formContent, "pinswg_name")
+        ? formContent.pinswg_name
+        : caseref;
+
+    const content = JSON.stringify(formContent);
+
+    console.log(content);
+    const blobName = caseID + "/" + caseID + "_appeal.json";
+
+    console.log("blobName:", blobName);
+    const blockBlobClient = containerClient.getBlockBlobClient(blobName);
+
+    const uploadBlobResponse = await blockBlobClient.upload(
+        content,
+        Buffer.byteLength(content)
+    );
+
+    const tags = {
+        containerid: containerName,
+        caseID: caseID,
+    };
+
+    console.log("the tags:", tags);
+    const withTags = await blockBlobClient.setTags(tags);
+    const withMeta = await blockBlobClient.setMetadata(tags);
+
+    return formContent.pinswg_name;
+};
+
+export const deleteBlob = async (containerName, blobName) => {
+    const creds = new DefaultAzureCredential();
+
+    const options = {
+        deleteSnapshots: "include", // or 'only'
+    };
+
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+
+    const blockBlobClient = containerClient.getBlockBlobClient(blobName);
+
+    await blockBlobClient.delete(options);
+
+    console.log(`deleted blob ${blobName}`);
+
+    return { "deleted": blobName };
+};
+
+export const deleteBlobCase = async (containerName, blobName) => {
+    const creds = new DefaultAzureCredential();
+
+    const options = {
+        deleteSnapshots: "include", // or 'only'
+    };
+
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+
+    //conLog"deleteBlobCase ");
+
+    console.log("blob to delete:", blobName);
+
+    for await (const blob of containerClient.listBlobsFlat({
+        prefix: blobName,
+    })) {
+        console.log(" ------ :", blob.name);
+        containerClient.deleteBlob(blob.name);
+    }
+
+    containerClient.deleteBlob(blobName);
+    console.log(`deleted blob ${blobName}`);
+    for await (const blob of containerClient.listBlobsFlat()) {
+        console.log(" ------ :", blob.name);
+    }
+    return { "deleted": blobName };
+};
+
+export const uploadFile = async (formContent, containerName, foldername) => {
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+
+    const files = formContent;
+
+    //console.log(...formContent);
+    console.log("files...", files, Object.keys(files).length, foldername);
+
+    for (const prop in files) {
+        console.log(`files[${prop}] = ${files[prop][0].size}`);
+        const blobName = foldername + "/files/" + files[prop][0].fieldName;
+
+        console.log(blobName);
+        const blockBlobClient = containerClient.getBlockBlobClient(blobName);
+        const uploadBlobResponse = await blockBlobClient.uploadFile(
+            files[prop][0].path,
+            files[prop].size
+        );
+        const tags = {
+            containerid: containerName,
+            caseID: foldername,
+            documentType: files[prop][0].fieldName.slice(
+                0,
+                files[prop][0].fieldName.indexOf("_")
+            ),
+        };
+        const withTags = await blockBlobClient.setTags(tags);
+        const withMeta = await blockBlobClient.setMetadata(tags);
+
+        console.log(
+            `Uploaded block blob ${files[prop][0].fieldName} successfully`,
+            uploadBlobResponse.requestId
+        );
+    }
+};
+
+export const downloadFile = async (containerName, blobName) => {
+    //console.log.apply(containerName, blobName);
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+    const blobClient = containerClient.getBlobClient(blobName);
+    const downloadedBlob = await blobClient.download(0);
+
+    const downloaded = await streamToBuffer(downloadedBlob.readableStreamBody);
+    return downloaded;
+};
+
+export const downloadProgressFile = async (
+    containerName,
+    blobName,
+    casefolderID
+) => {
+    //console.log.apply(containerName, blobName);
+
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+    const blobClient = containerClient.getBlobClient(blobName);
+    const downloadedBlob = await blobClient.download();
+
+    const downloaded = await streamToBuffer(downloadedBlob.readableStreamBody);
+
+    console.log("Downloaded blob content:", downloaded.toString());
+
+    return JSON.parse(downloaded.toString());
+};
+
+export const downloadAllProgressFiles = async (
+    containerName,
+    progressBlobObj
+) => {
+    console.log(
+        "/////////////////////////\n downloading files: " +
+            JSON.stringify(progressBlobObj) +
+            "\n/////////////////////////\n"
+    );
+
+    const containerToken = await createContainerSas(containerName);
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+    const containerClient = new ContainerClient(sasUrl);
+
+    let blobClient = {};
+    let downloadedBlob = {};
+    let downloaded = "";
+    let caseBlob = {};
+    let caseDownloaded = "";
+    let blobCount = 0;
+
+    for (const prop in progressBlobObj) {
+        console.log(`Progress - ${prop}: ${progressBlobObj[prop].path}`);
+        blobClient = containerClient.getBlobClient(progressBlobObj[prop].path);
+        downloadedBlob = await blobClient.download(0);
+        downloaded =
+            downloaded +
+            (await streamToBuffer(downloadedBlob.readableStreamBody)) +
+            ",";
+        blobCount++;
+    }
+
+    downloaded = downloaded.substring(0, downloaded.length - 1);
+
+    for (const prop in progressBlobObj) {
+        console.log(`Cases - ${prop}: ${progressBlobObj[prop].caseObj}`);
+        blobClient = containerClient.getBlobClient(
+            progressBlobObj[prop].caseObj
+        );
+        caseBlob = await blobClient.download(0);
+        caseDownloaded =
+            caseDownloaded +
+            (await streamToBuffer(caseBlob.readableStreamBody)) +
+            ",";
+    }
+
+    caseDownloaded = caseDownloaded.substring(0, caseDownloaded.length - 1);
+
+    return JSON.parse(
+        '{ "@odata.count": ' +
+            blobCount +
+            ',"value": [' +
+            downloaded +
+            '],"case":[' +
+            caseDownloaded +
+            "]}"
+    );
+};
+
+const streamToBuffer = async (readableStream) => {
+    return new Promise((resolve, reject) => {
+        const chunks = [];
+        readableStream.on("data", (data) => {
+            chunks.push(data instanceof Buffer ? data : Buffer.from(data));
+        });
+        readableStream.on("end", () => {
+            resolve(Buffer.concat(chunks));
+        });
+        readableStream.on("error", reject);
+    });
+};
+
+export const getCaseBlob = async (
+    containerName,
+    caseReference,
+    formContent
+) => {
+    const content = JSON.stringify(formContent);
+    const blobName = caseReference + "/case/" + caseReference + "_case.json";
+
+    const containerBlobToken = await createBlobSas(containerName, blobName);
+
+    const blobSasUrl = `${STORAGE_PATH}/${containerName}/${blobName}?${containerBlobToken}`;
+
+    const blockBlobClient = new BlockBlobClient(blobSasUrl);
+
+    const uploadBlobResponse = await blockBlobClient.upload(
+        content,
+        Buffer.byteLength(content)
+    );
+    return blobName;
+};
+
+export const getProgressBlobs = async (containerName, caseReference) => {
+    const containerToken = await createContainerSas(containerName);
+
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+
+    const containerClient = new ContainerClient(sasUrl);
+
+    let blobCount = 0;
+    for await (const blob of containerClient.listBlobsFlat({
+        prefix: caseReference,
+    })) {
+        blobCount++;
+    }
+
+    console.log("this is the caasefolder:", caseReference, blobCount);
+
+    let blobObj = [];
+    for await (const blob of containerClient.listBlobsFlat({
+        prefix: caseReference + "/" + caseReference + "_appeal.json",
+    })) {
+        console.log("in here");
+        blobObj.push({
+            "name": blob.name.split("/")[1],
+            "path": blob.name,
+            "versionId": blob.versionId,
+            "caseObj": caseReference + "/" + caseReference + "_case.json",
+            "isCurrentVersion": blob.isCurrentVersion,
+            "contentLength": blob.properties.contentLength,
+            "contentType": blob.contentType,
+            "lastModified": blob.properties.lastModified,
+            "hashedfilepath": hashAPIPath(
+                "/api/file/downloadblob?container=" +
+                    containerName +
+                    "&casefolderID=" +
+                    caseReference +
+                    "&blobname=" +
+                    blob.name.split("/")[1]
+            ),
+            "hasheddeletepath": hashAPIPath(
+                "/api/file/deleteblob?container=" +
+                    containerName +
+                    "&casefolderID=" +
+                    caseReference +
+                    "&blobname=" +
+                    blob.name.split("/")[1]
+            ),
+            "hashgetblobs": hashAPIPath(
+                "/api/file/getbloblist?container=" +
+                    containerName +
+                    "&casefolderID=" +
+                    caseReference
+            ),
+        });
+    }
+
+    blobObj = _.sortBy(blobObj, [
+        function (o) {
+            return o.lastModified;
+        },
+    ]).reverse()[0];
+
+    //console.log("blobObjwwwww:", blobObj);
+
+    return blobObj;
+};
+
+export const getAllProgressBlobs = async (containerName) => {
+    const containerToken = await createContainerSas(containerName);
+
+    const sasUrl = `${STORAGE_PATH}/${containerName}?${containerToken}`;
+
+    const containerClient = new ContainerClient(sasUrl);
+
+    let blobCount = 0;
+
+    let blobObj = [];
+    for await (const blob of containerClient.listBlobsFlat()) {
+        blob.name.split("/")[1].indexOf(".json") > 0 &&
+            blob.name.split("/")[1].indexOf("undefined") < 0 &&
+            blobObj.push({
+                "name": blob.name.split("/")[1],
+                "path": blob.name,
+                "versionId": blob.versionId,
+                "caseObj":
+                    blob.name.split("/")[0] +
+                    "/case/" +
+                    blob.name.split("/")[0] +
+                    "_case.json",
+                "isCurrentVersion": blob.isCurrentVersion,
+                "contentLength": blob.properties.contentLength,
+                "contentType": blob.contentType,
+                "lastModified": blob.properties.lastModified,
+            });
+    }
+
+    //console.log("blobObj:", blobObj);
+
+    return blobObj;
+};

actions/govgateway.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { hashAPIPath } from "./";
+import { hashAPIPath, consoleLogger } from "./";
 
 const configEndpoint = process.env.GG_PROVIDER_CONFIG_ENDPOINT;
 const ggClientID = process.env.GG_CLIENT_ID;
@@ -8,6 +8,19 @@ const WEBAPI_URL =
     process.env.RELAY_ROOT ||
     "https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/";
 
+const azureHeaders = (access_token) => {
+    return {
+        headers: {
+            "OData-MaxVersion": "4.0",
+            "OData-Version": "4.0",
+            "Accept": "application/json;odata.metadata=none",
+            "Prefer": 'odata.include-annotations="*",return=representation',
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + access_token,
+        },
+    };
+};
+
 export const getProviderConfig = () => {
     return axios
         .get(configEndpoint)
@@ -18,37 +31,6 @@ export const getProviderConfig = () => {
         });
 };
 
-export const getGGToken = (tokenURL, authCode, redirectUri) => {
-    const tokenBody =
-        "grant_type=authorization_code" +
-        "&code=" +
-        authCode +
-        "&redirect_uri=" +
-        redirectUri;
-
-    const basicAuthBase64 = (ggClientID + ":" + ggClientSecret).toString();
-    //console.log("base64 " + Base64.encode(basicAuthBase64));
-
-    const tokenConfig = {
-        headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-            "Authorization": "Basic " + Base64.encode(basicAuthBase64),
-        },
-    };
-
-    return axios
-        .post(tokenURL, tokenBody, tokenConfig)
-        .then((res) => res.data)
-        .catch((error) => {
-            // if (error.response) {
-            //     console.log(error.response.data);
-            //     console.log(error.response.status);
-            //     console.log(error.response.headers);
-            // }
-            return error.response;
-        });
-};
-
 export const getUserInfo = (userInfoURL, authToken) => {
     const tokenConfig = {
         headers: {
@@ -65,32 +47,6 @@ export const getUserInfo = (userInfoURL, authToken) => {
         });
 };
 
-export const getPortalLogin = (emailAddress, token) => {
-    var queryUrl =
-        "contacts?$filter=emailaddress1 eq '" +
-        emailAddress +
-        "'&$count=true&$select=emailaddress1,contactid,pinswg_custom_password,yomifullname,firstname,lastname";
-    return axios
-        .get(WEBAPI_URL + queryUrl + hashAPIPath(queryUrl), azureHeaders(token))
-        .then((res) => res.data)
-        .catch((error) => {
-            console.log("thiserror", error);
-        });
-};
-
-const azureHeaders = (access_token) => {
-    return {
-        headers: {
-            "OData-MaxVersion": "4.0",
-            "OData-Version": "4.0",
-            "Accept": "application/json;odata.metadata=none",
-            "Prefer": 'odata.include-annotations="*",return=representation',
-            "Content-Type": "application/json",
-            "Authorization": "Bearer " + access_token,
-        },
-    };
-};
-
 var Base64 = {
     _keyStr:
         "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

actions/selectQueryTypes.js

@@ -1,47 +1,63 @@
 export const getSelectQuery = (appealTypeName) => {
     switch (appealTypeName) {
         case "pinswg_advertses":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_procedure,pinswg_questionnaireduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_procedure,pinswg_questionnaireduedate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
             break;
         case "pinswg_callinss77s":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_startdate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_startdate,statuscode,pinswg_dateexportedtoiss,pinswg_startdateofevent,pinswg_typeofevent";
             break;
         case "pinswg_commonlands":
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode,pinswg_starttimeoftheevent,pinswg_typeofevent";
+            break;
         case "pinswg_environmentalpermittings":
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode,pinswg_startdateofevent,pinswg_typeofevent";
+            break;
         case "pinswg_hedgeshedgerowstreepreservationreplacems":
         case "pinswg_miscellaneouscaseworks":
         case "pinswg_wayleaves":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
             break;
         case "pinswg_communityinfrastructurelevys117118119s":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_procedure,pinswg_startdate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_procedure,pinswg_startdate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
             break;
         case "pinswg_compulsorypurchaseorderses":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddresscounty,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
+            break;
         case "pinswg_dnses":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_addresscounty,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_choiceofprocedure,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofdecision,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectdescription,pinswg_projectdescription,pinswg_projectlocation,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_suspensionenddates,pinswg_suspensionstartdates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode";
+            return "&$select=pinswg_anticipatedgridreferenceeastingtext,pinswg_anticipatedgridreferencenorthingtext,_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_addresscounty,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_choiceofprocedure,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofdecision,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectdescription,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_suspensionenddates,pinswg_suspensionstartdates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode,pinswg_casestage,_pinswg_dnsids_value,pinswg_startdateofevent,pinswg_typeofevent";
+            break;
         case "pinswg_electricityacts":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_addressline1,pinswg_addressline2,pinswg_postcode,pinswg_addresstown,_pinswg_associatedlpa_value,pinswg_applicationacceptedasvalid,pinswg_applicationrejectedasinvalid,pinswg_confirmrequesttovaryapplication,pinswg_dateeventrequested,pinswg_dateofrequesttovarytheapplication,pinswg_dateofsubmissionofapplication,pinswg_dateprojectpublishedonwebsite,pinswg_deadlineforsubmissionofapplication,pinswg_decision,pinswg_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode,pinswg_startdateofevent,pinswg_typeofevent";
+            break;
         case "pinswg_householderappealhases":
             return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_otherpartiesstatement,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode";
+            break;
         case "pinswg_enforcementnoticeappeals174s":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
+            break;
         case "pinswg_enforcementlistedbuildingconservationaps":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatements,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdates,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatements,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdates,pinswg_statementduedate,statuscode,pinswg_startdateofevent,pinswg_typeofevent";
+            break;
         case "pinswg_maintenanceoflands217s":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdates,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdates,pinswg_statementduedate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
+            break;
         case "pinswg_lawfuldevelopmentcertificates":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatements,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatements,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
+            break;
         case "pinswg_listedbuildingandconservationareaconsens":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_sitepostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_sitepostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode,pinswg_starttimeofevent,pinswg_typeofevent";
+            break;
         case "pinswg_planningappeals78s":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_finalcommentsduedate,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,pinswg_casedecisiondate,pinswg_dicision,pinswg_dateeventrequested,pinswg_finalcommentsduedate,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode,pinswg_startdatetimeiftheevent,pinswg_typeofevent";
+            break;
         case "pinswg_planningconditionss73s79s":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode,pinswg_startdateofevent,pinswg_typeofevent";
+            break;
         case "pinswg_planningobligationappeals106s":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatements,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatements,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
+            break;
         case "pinswg_rows":
-            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode";
+            return "&$select=_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,pinswg_casedecisiondate,pinswg_dateeventrequested,pinswg_decision,pinswg_finalcommentsduedate,pinswg_otherpartiesstatement,pinswg_procedure,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_questionnaireduedate,pinswg_relevantauthorityname,pinswg_startdate,statuscode,pinswg_startdateoftheevent,pinswg_typeofevent";
             break;
         default:
             return "";

api/applicant.json

@@ -1,2 +0,0 @@
-{"@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

@@ -1 +0,0 @@
-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"}]}

components/account/personaldetails.js

@@ -112,6 +112,17 @@ let PersonalDetails = (props) => {
                                     About you
                                 </h2>
                             </legend>
+                            <div className="govuk-form-group ">
+                                <span className="govuk-label ">
+                                    Role:{" "}
+                                    {
+                                        props.props.accountDetails
+                                            .accountDetails[
+                                            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </span>
+                            </div>
                             <Field
                                 name="firstname"
                                 id="firstname"

components/account/registerComplete.js

@@ -99,7 +99,10 @@ const RegisterComplete = (props) => {
                             <a
                                 className="govuk-link"
                                 onClick={() => {
-                                    setLogout(), window.localStorage.clear();
+                                    setLogout(),
+                                        window.localStorage.clear(),
+                                        destroyCookie({}, "pinsUser"),
+                                        signOut({ callbackUrl: "/logout" });
                                 }}
                             >
                                 {t(

components/account/registerform.js

@@ -195,7 +195,7 @@ const RegisterForm = (props) => {
                                 )}
                             />
 
-                            <Field
+                            {/* <Field
                                 name="pinswg_custom_password"
                                 id="pinswg_custom_password"
                                 component={RenderTextfield}
@@ -226,7 +226,7 @@ const RegisterForm = (props) => {
                                 errorMsg={t(
                                     "account:register-new-account-confirm-password-label-errormsg"
                                 )}
-                            />
+                            /> */}
                         </fieldset>
                         <fieldset className="govuk-fieldset">
                             <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">

components/breadcrumbs.js

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import LoadingOverlay from "react-loading-overlay";
+import { getSession, useSession } from "next-auth/react";
 
 const Breadcrumbs = (props) => {
     const { courseContent, slug, currentView } = props;
@@ -45,6 +46,9 @@ const Breadcrumbs = (props) => {
     //         ? setShowSpinnerState(false)
     //         : setShowSpinnerState(true);
     // };
+
+    const { data: session, status } = useSession();
+
     return (
         <>
             <nav
@@ -64,17 +68,9 @@ const Breadcrumbs = (props) => {
                             </Link>
                         </li> */}
                         <li className="govuk-breadcrumbs__list-item">
-                            <Link
+                            <Link href={"/"}>
-                                href={
-                                    router.pathname.includes("/dns/")
-                                        ? "/dns"
-                                        : "/"
-                                }
-                            >
                                 <a className="govuk-breadcrumbs__link">
-                                    {router.pathname.includes("/dns/")
+                                    {t("common:service-name-breadcrumb")}
-                                        ? t("dnsCommon:service-name")
-                                        : t("common:service-name-breadcrumb")}
                                 </a>
                             </Link>
                         </li>
@@ -238,6 +234,53 @@ const Breadcrumbs = (props) => {
                         ) : (
                             ""
                         )}
+                        {router.pathname == "/newappeal/[appealtypes]" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link
+                                        href={
+                                            router.locale != "en"
+                                                ? router.locale + "/myportal"
+                                                : "/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 == "/myportal/[appealtypes]" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link
+                                        href={
+                                            router.locale != "en"
+                                                ? router.locale + "/myportal"
+                                                : "/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>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {props.formTitle}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
                         {router.pathname == "/newappeal/selectappeal" ? (
                             <>
                                 <li className="govuk-breadcrumbs__list-item">
@@ -301,7 +344,9 @@ const Breadcrumbs = (props) => {
                                     <Link
                                         href={
                                             router.locale != "en"
-                                                ? router.locale + "/myportal"
+                                                ? "/" +
+                                                  router.locale +
+                                                  "/myportal"
                                                 : "/myportal"
                                         }
                                     >
@@ -311,7 +356,20 @@ const Breadcrumbs = (props) => {
                                     </Link>
                                 </li>
                                 <li className="govuk-breadcrumbs__list-item">
-                                    {currentView.viewName}
+                                    {currentView.viewKey ==
+                                        "awaitingSubmissionDetails" &&
+                                        t(
+                                            "myportal:awatitingsubmission-card-title"
+                                        )}
+                                    {currentView.viewKey == "watchedCases" &&
+                                        t("myportal:watchedcases-card-title")}
+                                    {currentView.viewKey == "myCases" &&
+                                        t("myportal:mycases-card-title")}
+                                    {currentView.viewKey ==
+                                        "myRepresentations" &&
+                                        t(
+                                            "myportal:myrepresentations-card-title"
+                                        )}
                                 </li>
                             </>
                         ) : (
@@ -356,6 +414,64 @@ const Breadcrumbs = (props) => {
                         ) : (
                             ""
                         )}
+
+                        {router.pathname == "/myportal/dnsapplications" ? (
+                            <>
+                                {" "}
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link
+                                        href={
+                                            router.locale != "en"
+                                                ? router.locale + "/myportal"
+                                                : "/myportal"
+                                        }
+                                    >
+                                        <a className="govuk-breadcrumbs__link">
+                                            {t("common:breadcrumb-my-portal")}
+                                        </a>
+                                    </Link>
+                                </li>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("dnsCommon:service-name")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+                        {router.pathname == "/myportal/dnsdetails" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link
+                                        href={
+                                            router.locale != "en"
+                                                ? router.locale + "/myportal"
+                                                : "/myportal"
+                                        }
+                                    >
+                                        <a className="govuk-breadcrumbs__link">
+                                            {t("common:breadcrumb-my-portal")}
+                                        </a>
+                                    </Link>
+                                </li>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    <Link href={"/myportal/dnsapplications"}>
+                                        <a className="govuk-breadcrumbs__link">
+                                            {t("dnsCommon:service-name")}
+                                        </a>
+                                    </Link>
+                                </li>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("common:breadcrumb-case-reference")}:{" "}
+                                    {
+                                        props.props.currentView.caseReference
+                                            .currentReference
+                                    }
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+
                         {router.pathname == "/case" ? (
                             <>
                                 <li className="govuk-breadcrumbs__list-item">
@@ -397,19 +513,24 @@ const Breadcrumbs = (props) => {
                         )}
                         {router.pathname == "/myportal/representation" ? (
                             <>
+                                {session != null && (
                                     <li className="govuk-breadcrumbs__list-item">
                                         <Link
                                             href={
                                                 router.locale != "en"
-                                                ? router.locale + "/myportal"
+                                                    ? router.locale +
+                                                      "/myportal"
                                                     : "/myportal"
                                             }
                                         >
                                             <a className="govuk-breadcrumbs__link">
-                                            {t("common:breadcrumb-my-portal")}
+                                                {t(
+                                                    "common:breadcrumb-my-portal"
+                                                )}
                                             </a>
                                         </Link>
                                     </li>
+                                )}
                                 <li className="govuk-breadcrumbs__list-item">
                                     Make representation for:{" "}
                                     {
@@ -475,13 +596,22 @@ const Breadcrumbs = (props) => {
                             ""
                         )}
                         {router.pathname == "/dns" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("dnsCommon:service-name")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+                        {router.pathname == "/dns/[developmentName]" ? (
                             <>
                                 <li className="govuk-breadcrumbs__list-item">
                                     <Link
                                         href={
-                                            router.locale != "en"
+                                            router.locale == "en"
-                                                ? router.locale + "/dns"
+                                                ? router.locale + "/../../dns"
-                                                : "/dns"
+                                                : "/../../dns"
                                         }
                                     >
                                         <a className="govuk-breadcrumbs__link">
@@ -489,6 +619,13 @@ const Breadcrumbs = (props) => {
                                         </a>
                                     </Link>
                                 </li>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("common:breadcrumb-case-reference")}:{" "}
+                                    {
+                                        props.props.currentView.caseReference
+                                            .currentReference
+                                    }
+                                </li>
                             </>
                         ) : (
                             ""
@@ -628,7 +765,34 @@ const Breadcrumbs = (props) => {
                         ) : (
                             ""
                         )}
-                        {!_.isEmpty(slug) ? (
+                        {router.pathname == "/auth/signin" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("auth:auth-page-title")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+                        {router.pathname == "/auth/verify-request" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("auth:auth-check-email-page-title")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+                        {router.pathname == "/auth/error" ? (
+                            <>
+                                <li className="govuk-breadcrumbs__list-item">
+                                    {t("auth:auth-error-signin-error-title")}
+                                </li>
+                            </>
+                        ) : (
+                            ""
+                        )}
+                        {/* {!_.isEmpty(slug) ? (
                             <>
                                 <li className="govuk-breadcrumbs__list-item">
                                     <Link
@@ -662,7 +826,7 @@ const Breadcrumbs = (props) => {
                             </>
                         ) : (
                             ""
-                        )}
+                        )} */}
 
                         <Breadcrumb />
                     </ol>

components/case.js

@@ -35,6 +35,8 @@ const Case = (props) => {
                         searchDetailsObj={props.searchDetailsObj}
                         searchString={props.searchString}
                         incidentid={props.incidentid}
+                        showMap={props.showMap}
+                        showLoginCheck={props.showLoginCheck}
                     />
                     <Documents
                         incidentid={props.incidentid}
@@ -42,7 +44,6 @@ const Case = (props) => {
                         searchResultsObj={props.searchResultsObj}
                         searchDetailsObj={props.searchDetailsObj}
                         documentDetailsObj={props.documentDetailsObj}
-                        documentHistoryObj={props.documentHistoryObj}
                     />
                     {showRepresentations == "true" && (
                         <RepresentationList
@@ -50,7 +51,6 @@ const Case = (props) => {
                             caseReference={props.caseReference}
                             representationsObj={props.representationsObj}
                             documentDetailsObj={props.documentDetailsObj}
-                            documentHistoryObj={props.documentHistoryObj}
                         />
                     )}
                 </div>

components/case/documents.js

@@ -2,27 +2,26 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import jsonpath from "jsonpath";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
 import PaginationControl from "./pagination";
 import LoadingOverlay from "react-loading-overlay";
 import CryptoJS from "crypto-js";
 
+import { setCurrentPage } from "../../store/currentView/action";
 import {
     getBasicSearch,
     getBasicSearchDetails,
     getSearchDocumentDetails,
-    getSearchDocumentHistory,
-    getSearchDocumentHistoryPaged,
     getSearchDocumentDetailsPaged,
+    getSearchDocumentTypes,
 } from "../../actions";
 
 import {
     setSearchResults,
     setSearchDetails,
     setDocumentDetails,
-    setDocumentHistory,
     getSearchResultsObj,
 } from "../../store/searchOutput/action";
 
@@ -35,9 +34,8 @@ const DocumentDetails = (props) => {
         searchResultsObj,
         searchDetailsObj,
         documentDetailsObj,
-        documentHistoryObj,
         setDocumentDetails,
-        setDocumentHistory,
+        setCurrentPage,
     } = props;
 
     const router = useRouter();
@@ -45,10 +43,13 @@ const DocumentDetails = (props) => {
 
     var documentDetailsArr = documentDetailsObj || [];
 
-    const DocumentView = (documentDetailsArr) => {
+    const [selectedOption, setSelectedOption] = useState(10);
-        //console.log(documentDetailsArr);
+    const [documentTypes, setDocumentTypes] = useState([{}]);
+    const [selectedDocumentType, setSelectedDocumentType] = useState("all");
 
+    const DocumentView = (documentDetailsArr) => {
         documentDetailsArr = documentDetailsArr.value;
+
         return (
             <>
                 <p>
@@ -60,23 +61,169 @@ const DocumentDetails = (props) => {
                         ? t("case:documents-count-label-2")
                         : t("case:documents-count-label-2a")}
                 </p>
+                <div className="documentFilters govuk-!-margin-top-5">
+                    <div
+                        id="recordDocumentTypeSelect"
+                        className="govuk-grid-row govuk-!-margin-left-0"
+                    >
+                        <div className="govuk-form-group">
+                            <label className="govuk-label-s " htmlFor="sort">
+                                {t("case:documents-show-label")}
+                                <select
+                                    onChange={(e) => {
+                                        setSelectedDocumentType(e.target.value);
+                                        setCurrentPage(1);
+                                    }}
+                                    value={selectedDocumentType}
+                                    className="govuk-select"
+                                    id="showDocumentType"
+                                    name="showDocumentType"
+                                >
+                                    <option value="all">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="All")].value_cy'
+                                              )
+                                            : "All"}
+                                    </option>
+                                    {documentTypes.map((item, key) => {
+                                        return (
+                                            <option
+                                                key={key}
+                                                value={
+                                                    item.pinswg_isharedocumentlocations
+                                                }
+                                            >
+                                                {router.locale == "cy"
+                                                    ? jsonpath.query(
+                                                          transLookup,
+                                                          '$..[?(@.value=="' +
+                                                              item.pinswg_isharedocumentlocationsLabel +
+                                                              '")].value_cy'
+                                                      )
+                                                    : item.pinswg_isharedocumentlocationsLabel ||
+                                                      t(
+                                                          "case:summary-no-date-entered-label"
+                                                      )}
+                                            </option>
+                                        );
+                                    })}
+                                </select>
+                                {t("case:documents-count-label-2")}
+                            </label>
+                        </div>
+                    </div>
+                    {documentDetailsObj["@odata.count"] > 5 && (
+                        <div
+                            id="recordCountSelect"
+                            className="govuk-grid-row govuk-!-margin-left-0"
+                        >
+                            <div className="govuk-form-group">
+                                <label
+                                    className="govuk-label-s "
+                                    htmlFor="sort"
+                                >
+                                    {t(
+                                        "search:searchresults-show-records-label-a"
+                                    )}
+                                    <select
+                                        onChange={(e) => {
+                                            setSelectedOption(e.target.value);
+                                            setCurrentPage(1);
+                                        }}
+                                        value={selectedOption}
+                                        className="govuk-select"
+                                        id="showNumberOfRecords"
+                                        name="showNumberOfRecords"
+                                    >
+                                        <option value="5">5</option>
+                                        <option value="10">10</option>
+                                        <option value="20">20</option>
+                                        <option value="30">30</option>
+                                        <option value="50">50</option>
+                                    </select>{" "}
+                                    {t(
+                                        "search:searchresults-show-records-label-b"
+                                    )}
+                                </label>
+                            </div>
+                        </div>
+                    )}
+                </div>
                 <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
                     <div className="govuk-summary-list__row results-headings">
                         <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
+                            <button
+                                type="button"
+                                onClick={() => sortDataBy("pinswg_name")}
+                                className={
+                                    orderByState == "pinswg_name"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("case:documents-name-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            {/* {t("case:documents-doc-type-label")} */}
+                            <button
+                                type="button"
+                                onClick={() =>
+                                    sortDataBy("pinswg_isharedocumentlocations")
+                                }
+                                className={
+                                    orderByState ==
+                                    "pinswg_isharedocumentlocations"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("case:documents-doc-type-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            {/* {t("case:documents-date-published-label")} */}
+                            <button
+                                type="button"
+                                onClick={() => sortDataBy("createdon")}
+                                className={
+                                    orderByState == "createdon"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("case:documents-date-published-label")}
+                            </button>
                         </dd>
                         {/* <dd className="govuk-summary-list__key govuk-!-font-size-16">
                         {t("case:documents-size-label")}
                     </dd> */}
                     </div>
-
+                    {showSpinnerState == true ? (
-                    {documentDetailsArr.map((item) => {
+                        <div className="govuk-summary-list__row">
+                            <div className="govuk-!-margin-top-4 govuk-!-margin-bottom-4 govuk-!-font-weight-bold govuk-!-font-size-20  ">
+                                {t("common:spinner-fetching-data")}
+                                <img
+                                    className="data-loading-icon"
+                                    src="/assets/images/loading.gif"
+                                    alt={
+                                        router.locale == "cy"
+                                            ? "Nôl data"
+                                            : "Fetching data"
+                                    }
+                                />
+                            </div>
+                        </div>
+                    ) : (
+                        documentDetailsArr.map((item, key) => {
                             let detailsObj = jsonpath.query(
                                 item,
                                 "$..[?(@._pinswg_documentids_value=='" +
@@ -84,29 +231,36 @@ const DocumentDetails = (props) => {
                                     "')]"
                             );
                             detailsObj = item;
-
+                            return (
-                        if (typeof detailsObj != "undefined") {
-                            var documentHistoryArr = documentHistoryObj || [];
-                            return documentHistoryArr.map(
-                                (historyItem, key) => {
-                                    let historyObj = jsonpath.query(
-                                        documentHistoryObj[key],
-                                        "$..value[?(@._pinswg_documentid_value=='" +
-                                            detailsObj.pinswg_documentid +
-                                            "')]"
-                                    );
-
-                                    historyObj = historyObj[0];
-                                    return !_.isEmpty(historyObj) ? (
                                 <div
                                     className="govuk-summary-list__row"
                                     key={key}
                                 >
                                     <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
-                                                <a
+                                        {showDownloadingState === key && (
-                                                    href={
+                                            <div className="coverLoadingLink downloading">
-                                                        detailsObj.pinswg_hashlink
+                                                {/* <img
+                                                                className="data-loading-icon"
+                                                                src="/assets/images/loading.gif"
+                                                                alt={
+                                                                    router.locale ==
+                                                                    "cy"
+                                                                        ? "Nôl data"
+                                                                        : "Fetching data"
                                                                 }
+                                                            /> */}
+                                            </div>
+                                        )}
+
+                                        <Link
+                                            scroll={false}
+                                            href={detailsObj.pinswg_hashlink}
+                                        >
+                                            <a
+                                                key={key}
+                                                onClick={() => {
+                                                    toggleDownLoadLink(key);
+                                                }}
                                             >
                                                 <span className="results-visually-hidden">
                                                     {t(
@@ -114,20 +268,18 @@ const DocumentDetails = (props) => {
                                                     )}
                                                     :
                                                 </span>
-                                                    {_.has(historyObj, [
+                                                {_.has(
-                                                        "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue",
+                                                    detailsObj,
-                                                    ])
+                                                    "pinswg_name"
-                                                        ? historyObj[
+                                                )
-                                                              "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue"
+                                                    ? detailsObj.pinswg_name
-                                                          ]
                                                     : ""}
                                             </a>
+                                        </Link>
                                     </dd>
                                     <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                         <span className="results-visually-hidden">
-                                                    {t(
+                                            {t("case:documents-doc-type-label")}
-                                                        "case:documents-doc-type-label"
-                                                    )}
                                             :
                                         </span>
 
@@ -155,13 +307,12 @@ const DocumentDetails = (props) => {
                                             :
                                         </span>
 
-                                                {_.has(historyObj, [
+                                        {_.has(
-                                                    "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
+                                            detailsObj,
-                                                ])
+                                            "pinswg_latestpublisheddate"
+                                        )
                                             ? formatDates(
-                                                          historyObj[
+                                                  detailsObj.pinswg_latestpublisheddate
-                                                              "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
-                                                          ]
                                               )
                                             : ""}
                                     </dd>
@@ -172,18 +323,17 @@ const DocumentDetails = (props) => {
                                         92
                                     </dd> */}
                                 </div>
-                                    ) : (
-                                        ""
                             );
-                                }
+                        })
-                            );
+                    )}
-                        }
-                    })}
                 </dl>
                 <PaginationControl
+                    showNoOfRecords={selectedOption}
                     currentPage={currentPage}
                     searchResultsObj={documentDetailsObj}
-                    // spinnerState={spinnerState}
+                    spinnerState={spinnerState}
+                    orderBy={orderByState}
+                    fieldSort={fieldSortState}
                     getDocumentResults={getDocumentResults}
                 />
             </>
@@ -191,110 +341,94 @@ const DocumentDetails = (props) => {
     };
 
     useEffect(() => {
+        getDocumentTypes();
+        if (selectedOption) {
+            setShowSpinnerState(true);
+            getDocumentResults(1, orderByState, fieldSortState);
+        }
+
+        if (selectedDocumentType) {
+            setShowSpinnerState(true);
+            getDocumentResults(
+                1,
+                orderByState,
+                fieldSortState,
+                selectedDocumentType
+            );
+        }
+
         const docDetailsObj = async () => {
-            let docObj = await getSearchDocumentDetails(incidentid)
+            let docObj = await getSearchDocumentDetails(incidentid).then(
-                .then((data) => {
+                (data) => {
                     //console.log(data);
                     setDocumentDetails(data);
-                    return data;
-                })
-                .then((data) => {
-                    let historyObj = getDocumentHistory(data.value).then(
-                        (result) => {
-                            setDocumentHistory(result);
                     setDocumentSearchState(true);
 
-                            return result;
+                    return data;
                 }
             );
 
-                    return data;
-                });
-
             return docObj;
         };
 
-        const getDocumentHistory = async (searchDocumentDetailsObj) => {
-            let historyArr = [];
-            searchDocumentDetailsObj = searchDocumentDetailsObj || [];
-
-            const detailsObj = searchDocumentDetailsObj.map(
-                (historyDetail, index) => {
-                    if (historyDetail.pinswg_publishtoweb != true) {
-                        console.log(historyDetail.pinswg_documentid);
-                    } else {
-                        historyArr.push(
-                            getSearchDocumentHistory(
-                                historyDetail.pinswg_documentid
-                            )
-                        );
-                    }
-                }
-            );
-            return Promise.all(historyArr);
-        };
         const searchDocumentResultsObj = docDetailsObj();
-    }, [incidentid, setDocumentHistory, setDocumentDetails]);
+    }, [
+        incidentid,
+        setDocumentDetails,
+        selectedOption,
+        selectedDocumentType,
+        fieldSortState,
+        orderByState,
+        getDocumentTypes,
+        getDocumentResults,
+    ]);
 
-    const getDocumentResults = (pageNumber) => {
+    const getDocumentTypes = useCallback(() => {
-        getSearchDocumentDetailsPaged(incidentid, pageNumber)
+        getSearchDocumentTypes(props.incidentid).then((data) => {
-            .then((data) => {
+            setDocumentTypes(data);
-                //console.log(data);
+        });
-                setDocumentDetails(data);
+    }, [props.incidentid]);
-                return data;
+
-            })
+    const getDocumentResults = useCallback(
+        (pageNumber, orderBy, fieldSort) => {
+            getSearchDocumentDetailsPaged(
+                props.incidentid,
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption,
+                selectedDocumentType
+            )
+                .then((data) => data)
                 .then((data) => {
                     //console.log("getting details", data);
-                return getDocumentHistory(data.value).then((data) => {
+                    setDocumentDetails(data);
-                    setDocumentHistory(data);
+                    setShowSpinnerState(false);
-                    //setShowSpinnerState(false);
                 });
-            });
+        },
-    };
+        [
+            props.incidentid,
+            selectedOption,
+            selectedDocumentType,
+            setDocumentDetails,
+        ]
+    );
 
     const getDocumentDetails = async () => {
-        let docObj = await getSearchDocumentDetailsPaged(incidentid, pageNumber)
+        let docObj = await getSearchDocumentDetailsPaged(
-            .then((data) => {
+            incidentid,
+            pageNumber,
+            orderBy,
+            fieldSort
+        ).then((data) => {
             //console.log(data);
             setDocumentDetails(data);
-                return data;
-            })
-            .then((data) => {
-                let historyObj = getDocumentHistory(
-                    data.value,
-                    pageNumber
-                ).then((result) => {
-                    setDocumentHistory(result);
-                    return result;
-                });
-
             return data;
         });
 
         return docObj;
     };
 
-    const getDocumentHistory = async (searchDocumentDetailsObj, pageNumber) => {
-        let historyArr = [];
-        searchDocumentDetailsObj = searchDocumentDetailsObj || [];
-
-        const detailsObj = searchDocumentDetailsObj.map(
-            (historyDetail, index) => {
-                if (historyDetail.pinswg_publishtoweb != true) {
-                    console.log(historyDetail.pinswg_documentid);
-                } else {
-                    historyArr.push(
-                        getSearchDocumentHistoryPaged(
-                            historyDetail.pinswg_documentid,
-                            pageNumber
-                        )
-                    );
-                }
-            }
-        );
-        return Promise.all(historyArr);
-    };
-
     function formatDates(dateObj) {
         var dateObj = new Date(dateObj);
         var dd = String(dateObj.getDate()).padStart(2, "0");
@@ -325,15 +459,30 @@ const DocumentDetails = (props) => {
               )
             : pagesCount;
 
-    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
 
-    // let spinnerState = () => {
+    const [showDownloadingState, setShowDownloadingState] = useState(null);
-    //     showSpinnerState == true
+
-    //         ? setShowSpinnerState(false)
+    const toggleDownLoadLink = (i) => {
-    //         : setShowSpinnerState(true);
+        setShowDownloadingState(i);
-    // };
+
+        const downloadTime = setTimeout(hideDownloadCover, 5000);
+        downloadTime;
+    };
+
+    function hideDownloadCover() {
+        setShowDownloadingState(null);
+    }
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
 
     const [showDocumentSearchState, setDocumentSearchState] = useState(false);
+    const [orderByState, setOrderbyState] = useState("createdon");
+    const [fieldSortState, setfieldSortState] = useState("asc");
 
     let documentSearchState = () => {
         showDocumentSearchState == true
@@ -341,13 +490,27 @@ const DocumentDetails = (props) => {
             : setDocumentSearchState(true);
     };
 
+    const sortDataBy = (whichField) => {
+        setOrderbyState(whichField);
+        setfieldSortState("asc");
+
+        getDocumentResults(1, whichField, fieldSortState);
+        whichField == orderByState
+            ? fieldSortState == "desc"
+                ? setfieldSortState("asc")
+                : setfieldSortState("desc")
+            : setfieldSortState("asc");
+        setCurrentPage(1);
+        setShowSpinnerState(true);
+    };
+
     return (
         <>
             <div>
                 <div className="govuk-grid-row">
                     <div className="govuk-grid-column-full">
                         <h2>{t("case:documents-heading-label")}</h2>
-                        {_.isEmpty(documentHistoryObj) ? (
+                        {_.isEmpty(documentDetailsObj.value) ? (
                             <div className="govuk-grid-row">
                                 <div className="govuk-grid-column-two-thirds">
                                     <h3>
@@ -385,8 +548,8 @@ const mapDispatchToProps = (dispatch) => {
         setDocumentDetails: (detailsObj) => {
             dispatch(setDocumentDetails(detailsObj));
         },
-        setDocumentHistory: (historyObj) => {
+        setCurrentPage: (currentPage) => {
-            dispatch(setDocumentHistory(historyObj));
+            dispatch(setCurrentPage(currentPage));
         },
     };
 };

components/case/pagination.js

@@ -1,21 +1,30 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useState } from "react";
+import { connect } from "react-redux";
+import { setCurrentPage } from "../../store/currentView/action";
 
 const PaginationControl = (props) => {
     const {
+        showNoOfRecords,
+        orderBy,
+        fieldSort,
         searchString,
         searchResultsObj,
         currentPage,
         spinnerState,
         getDocumentResults,
+        setCurrentPage,
     } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
+    const pagesCount = Math.ceil(
+        searchResultsObj["@odata.count"] / showNoOfRecords
+    );
 
     const getRange = (start, end) => {
         //console.log(start, end);
@@ -27,13 +36,15 @@ const PaginationControl = (props) => {
     const paginationNumbers = (currentPage, pageCount) => {
         //console.log(currentPage);
         let delta;
-        if (pageCount <= 10) {
+
+        if (pageCount <= 7) {
             // delta === 7: [1 2 3 4 5 6 7]
-            delta = 10;
+            delta = 7;
         } else {
             // delta === 2: [1 ... 4 5 6 ... 10]
             // delta === 4: [1 2 3 4 5 ... 10]
-            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6;
+            //delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
+            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
         }
 
         const range = {
@@ -69,20 +80,31 @@ const PaginationControl = (props) => {
         return pages;
     };
 
-    const paginationArray = paginationNumbers(currentPage, pagesCount);
+    const paginationArray = paginationNumbers(
-
+        props.currentView.currentPage,
+        pagesCount
+    );
     return (
         <>
-            {pagesCount > 1 ? (
+            {pagesCount > 1 && (
                 <div className="govuk-!-margin-bottom-7 ">
                     <div className="govuk-grid-row paginationWrapper">
                         <div className="govuk-grid-column-one-quarter paginationPrevious">
-                            {currentPage != 1 ? (
+                            {props.currentView.currentPage != 1 ? (
                                 <span
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                     onClick={() => {
-                                        // spinnerState(),
+                                        spinnerState(),
-                                        getDocumentResults(currentPage - 1);
+                                            setCurrentPage(
+                                                props.currentView.currentPage -
+                                                    1
+                                            ),
+                                            getDocumentResults(
+                                                props.currentView.currentPage -
+                                                    1,
+                                                orderBy,
+                                                fieldSort
+                                            );
                                     }}
                                 >
                                     {t("common:previous-link-button")}
@@ -95,7 +117,7 @@ const PaginationControl = (props) => {
                         </div>
                         <div className="govuk-grid-column-one-half paginationContainer">
                             {paginationArray.map((e, i) =>
-                                currentPage == i + 1 ? (
+                                props.currentView.currentPage == e ? (
                                     <span
                                         key={i}
                                         className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
@@ -114,9 +136,13 @@ const PaginationControl = (props) => {
                                         className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
                                         key={i}
                                         onClick={() => {
-                                            // spinnerState();
+                                            spinnerState();
-                                            console.log(i + 1);
+                                            setCurrentPage(e),
-                                            getDocumentResults(i + 1);
+                                                getDocumentResults(
+                                                    e,
+                                                    orderBy,
+                                                    fieldSort
+                                                );
                                         }}
                                     >
                                         {e}
@@ -125,12 +151,21 @@ const PaginationControl = (props) => {
                             )}
                         </div>
                         <div className="govuk-grid-column-one-quarter paginationNext">
-                            {currentPage != pagesCount ? (
+                            {props.currentView.currentPage < pagesCount ? (
                                 <span
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                     onClick={() => {
-                                        // spinnerState(),
+                                        spinnerState(),
-                                        getDocumentResults(currentPage + 1);
+                                            setCurrentPage(
+                                                props.currentView.currentPage +
+                                                    1
+                                            ),
+                                            getDocumentResults(
+                                                props.currentView.currentPage +
+                                                    1,
+                                                orderBy,
+                                                fieldSort
+                                            );
                                     }}
                                 >
                                     {t("common:next-link-button")}
@@ -148,11 +183,23 @@ const PaginationControl = (props) => {
                         {t("common:of-label")} {pagesCount}
                     </div>
                 </div>
-            ) : (
-                ""
             )}
         </>
     );
 };
 
-export default PaginationControl;
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PaginationControl);

components/case/representation/index.js

@@ -27,6 +27,7 @@ import RepAgent from "./representationAgent";
 import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
 import RepLandOwner from "./representationLandowner";
 import RepCompleteSubmit from "./representationCompleteSubmit";
+import { useSession, signIn, signOut } from "next-auth/react";
 
 import {
     RenderPickList,
@@ -39,6 +40,7 @@ let MakeRepresentation = (props) => {
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
     const [clearRepForm, setClearRepForm] = useState(false);
+    const { data: session } = useSession();
 
     const router = useRouter();
     const { locale } = router;
@@ -126,6 +128,7 @@ let MakeRepresentation = (props) => {
                         onHandleSubmit={onHandleSubmit}
                         currentView={currentView}
                         setSubmitBack={setSubmitBack}
+                        props={props}
                     />
                 );
                 break;
@@ -142,6 +145,7 @@ let MakeRepresentation = (props) => {
                         onHandleSubmit={onHandleSubmit}
                         currentView={currentView}
                         setSubmitBack={setSubmitBack}
+                        props={props}
                     />
                 );
                 break;
@@ -158,6 +162,7 @@ let MakeRepresentation = (props) => {
                         onHandleSubmit={onHandleSubmit}
                         currentView={currentView}
                         setSubmitBack={setSubmitBack}
+                        props={props}
                     />
                 );
                 break;
@@ -174,6 +179,7 @@ let MakeRepresentation = (props) => {
                         onHandleSubmit={onHandleSubmit}
                         currentView={currentView}
                         setSubmitBack={setSubmitBack}
+                        props={props}
                     />
                 );
                 break;
@@ -202,16 +208,18 @@ let MakeRepresentation = (props) => {
                         setRepresentationSubmit={setRepresentationSubmit}
                         currentView={currentView}
                         setSubmitBack={setSubmitBack}
+                        props={props}
                     />
                 );
         }
     };
 
     const onHandleSubmit = (values) => {
-        console.log(
+        // console.log(
-            values.representationCapacity,
+        //     values,
-            currentView.representationCapacity
+        //     values.representationCapacity,
-        );
+        //     currentView.representationCapacity
+        // );
 
         // console.log(_.isEmpty(currentView.representationCapacity));
         // console.log(
@@ -226,15 +234,22 @@ let MakeRepresentation = (props) => {
                       .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
                       .toLowerCase()
               )
-            : setRepresentationSubmit(true);
+            : setRepresentationSubmit("true");
+
+        window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
     };
 
     const repForm = props.props.form;
 
+    // console.log(
+    //     "waht is representationSubmit:",
+    //     currentView.representationSubmit
+    // );
+
     return (
         <div>
             <form onSubmit={handleSubmit(onHandleSubmit)}>
-                {representationSubmit == true ? (
+                {currentView.representationSubmit == "true" ? (
                     <RepCompleteSubmit
                         formObj={formObj}
                         capacityOptionsArr={capacityOptionsArr}
@@ -248,6 +263,25 @@ let MakeRepresentation = (props) => {
                             setRepresentationSubmitConfirmation
                         }
                     />
+                ) : (
+                    <>
+                        {!session ? (
+                            <>
+                                <div>
+                                    <p className="govuk-body">
+                                        Some text in here to explain about
+                                        raising a representation and why logging
+                                        in
+                                    </p>
+                                </div>
+                                <button
+                                    className="govuk-button withChevron govuk-button-cta"
+                                    type="button"
+                                    onClick={() => signIn("email")}
+                                >
+                                    Sign in to raise representation
+                                </button>
+                            </>
                         ) : (
                             <>
                                 <h1 className="govuk-heading-l">
@@ -257,6 +291,8 @@ let MakeRepresentation = (props) => {
                                 {whichControl()}
                             </>
                         )}
+                    </>
+                )}
             </form>
         </div>
     );

components/case/representation/representationAppellant.js

@@ -3,17 +3,20 @@ import { connect } from "react-redux";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { Field, reduxForm, reset } from "redux-form";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
 import {
     RenderPickList,
     RenderTextfield,
     RenderRadioList,
     RenderMultiline,
+    RenderFileUpload,
 } from "./representationElements";
 import { useDropzone } from "react-dropzone";
-import {
+// import {
-    setRepresentationCapacity,
+//     setRepresentationCapacity,
-    setRepresentationSubmit,
+//     setRepresentationSubmit,
-} from "../../../store/currentView/action";
+// } from "../../../store/currentView/action";
 
 const RepAppellant = (props) => {
     let { t } = useTranslation();
@@ -28,11 +31,8 @@ const RepAppellant = (props) => {
         currentView,
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
-    const files = acceptedFiles.map((file) => (
+
-        <li key={file.path}>
+    // console.log(props);
-            {file.path} - {file.size} bytes
-        </li>
-    ));
 
     return (
         <div id="rep-appellant">
@@ -141,7 +141,6 @@ const RepAppellant = (props) => {
                                         className="govuk-checkboxes__input"
                                         id="documentBox"
                                         name="documentBox"
-                                        value="email"
                                         data-aria-controls="documentBox"
                                         type="checkbox"
                                         component={RenderTextfield}
@@ -174,25 +173,28 @@ const RepAppellant = (props) => {
                                     }
                                     id="conditional-documentBox"
                                 >
-                                    <div className="govuk-form-group">
+                                    <h2 className="govuk-heading-s">
-                                        <section className="container">
+                                        {props.label}{" "}
-                                            <div
+                                    </h2>
-                                                {...getRootProps({
+                                    <Field
-                                                    className: "dropzone",
+                                        name="repsFiles"
-                                                })}
+                                        id="repsFiles"
-                                            >
+                                        component={RenderFileUpload}
-                                                <input {...getInputProps()} />
+                                        className="govuk-input govuk-input--width-20"
-                                                <p>
+                                        //validate={[required]}
-                                                    Drag and drop files here or
+                                        label={props.label}
-                                                    click to select files
+                                        errorMsg="Is required"
-                                                </p>
+                                        ticketnumber={props.caseReference}
-                                            </div>
+                                        documentTypeCode={
-                                            <aside>
+                                            props.documentTypeCode
-                                                <h4>Files</h4>
+                                        }
-                                                <ul>{files}</ul>
+                                        hint={props.hint}
-                                            </aside>
+                                        fileList={props.fileList}
-                                        </section>
+                                        setFilesForAppeal={
-                                    </div>
+                                            props.setFilesForAppeal
+                                        }
+                                        containerID={props.containerID}
+                                    />
                                 </div>
                             </div>
                         </fieldset>
@@ -209,11 +211,11 @@ const RepAppellant = (props) => {
                         </button>
                         {/* <a
                             onClick={() => {
-                                    setRepresentationSubmit(false);
+                                setRepresentationSubmit(true);
                             }}
                             className="govuk-button"
                         >
-                                Continue
+                            Continue ww
                         </a> */}
                         <a
                             onClick={() => {

components/case/representation/representationCapacitySelection.js

@@ -61,7 +61,7 @@ let RepCapacitySelection = (props) => {
                             options={capacityOptionsArr}
                             id="representationCapacity"
                             className="govuk-radios__input"
-                            errorMsg="Select an option"
+                            errorMsg={t("newappeal:select-an-option-label")}
                             component={RenderRadioList}
                             validate={[required]}
                         />

components/case/representation/representationComplete.js

@@ -39,10 +39,10 @@ const RepComplete = (props) => {
     return (
         <div id="rep-appellant">
             <div className="govuk-grid-column-full">
-                <div className="govuk-grid-row">
+                <div className="govuk-grid-row govuk-body">
-                    <h2 className="govuk-heading-m ">
+                    <h1 className="govuk-heading-m ">
                         Submission of Representation
-                    </h2>
+                    </h1>
                     <p>
                         Thank you for submitting your representation(s) using
                         the Appeals Casework Portal.

components/case/representation/representationCompleteSubmit.js

@@ -45,8 +45,8 @@ const RepCompleteSubmit = (props) => {
             ) : (
                 <div id="rep-appellant">
                     <div className="govuk-grid-column-full">
-                        <div className="govuk-grid-row">
+                        <div className="govuk-grid-row govuk-body">
-                            <h2 className="govuk-heading-m ">Submit</h2>
+                            <h1 className="govuk-heading-m ">Submit</h1>
                             <p>
                                 The gathering and subsequent processing of the
                                 personal data supplied by you in this form, is

components/case/representation/representationElements.js

@@ -1,6 +1,13 @@
-import { Field, reduxForm } from "redux-form";
+import { Field, Fields, reduxForm } from "redux-form";
 import router from "next/router";
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
+import useTranslation from "next-translate/useTranslation";
+import jsonpath from "jsonpath";
+import Dropzone, { useDropzone } from "react-dropzone";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
+import "react-quill/dist/quill.snow.css";
 
 export const RenderRadioList = ({
     datafieldname,
@@ -149,14 +156,40 @@ export const RenderMultiline = ({
     meta: { touched, error },
     ...custom
 }) => {
+    const [editValue, setEditValue] = useState(
+        input.value != null ? input.value : ""
+    );
+
+    const changeEdit = (valStr) => {
+        setEditValue(valStr);
+        input.onChange(valStr);
+    };
+
+    var modules = {
+        toolbar: [
+            [{ "header": [1, 2, false] }],
+            ["bold", "italic", "underline", "blockquote"],
+            [{ "list": "ordered" }, { "list": "bullet" }],
+            ["clean"],
+        ],
+    };
+
     return (
         <>
+            <ReactQuill
+                modules={modules}
+                theme="snow"
+                value={editValue}
+                onChange={changeEdit}
+            />
             <textarea
                 {...input}
                 id={id}
                 name={name}
                 rows={rows}
                 className={className}
+                value={editValue}
+                style={{ display: "none" }}
             ></textarea>
         </>
     );
@@ -192,3 +225,339 @@ export function MultiLinefield(props) {
         </div>
     );
 }
+
+const baseStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
+    borderWidth: 2,
+    borderRadius: 2,
+    borderColor: "#eeeeee",
+    borderStyle: "dashed",
+    backgroundColor: "#fafafa",
+    color: "#bdbdbd",
+    transition: "border .3s ease-in-out",
+};
+
+const activeStyle = {
+    borderColor: "#2196f3",
+};
+
+const acceptStyle = {
+    borderColor: "#00e676",
+};
+
+const rejectStyle = {
+    borderColor: "#ff1744",
+};
+
+export const RenderFileUpload = (field) => {
+    const files = field.input.value;
+    let { t } = useTranslation();
+
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            // ...(isDragActive ? activeStyle : {}),
+            // ...(isDragAccept ? acceptStyle : {}),
+            // ...(isDragReject ? rejectStyle : {}),
+        }),
+        []
+        // [isDragActive, isDragReject, isDragAccept]
+    );
+    const [filesList, setFilesList] = useState([]);
+
+    const thumbs = filesList.map((file) => (
+        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
+            <img src={file.preview} alt={file.name} width="50" /> -{" "}
+            <span className="govuk-body">
+                {file.name} ({file.size / 1024}kb)
+            </span>
+        </div>
+    ));
+
+    function bytesToSize(bytes) {
+        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        if (bytes == 0) return "0 Byte";
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
+    }
+
+    const getThumbnailIcon = (fileObj, fileType) => {
+        switch (fileType) {
+            case "text/html":
+                return "/assets/images/documenttypes/html.png";
+                break;
+            case "text/plain":
+                return "/assets/images/documenttypes/txt.png";
+                break;
+            case "application/msword":
+                return "/assets/images/documenttypes/doc.png";
+                break;
+            case "application/pdf":
+                return "/assets/images/documenttypes/pdf.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+                return "/assets/images/documenttypes/docx.png";
+                break;
+            case "text/csv":
+                return "/assets/images/documenttypes/csv.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                return "/assets/images/documenttypes/xlsx.png";
+                break;
+
+            case "application/zip":
+                return "/assets/images/documenttypes/zip.png";
+                break;
+            case "image/jpeg":
+            case "image/png":
+                return URL.createObjectURL(fileObj);
+                break;
+            default:
+                return "/assets/images/documenttypes/txt.png";
+                break;
+        }
+    };
+
+    const getThumbnailIconByExtension = (blobName) => {
+        let fileType = blobName.slice(blobName.lastIndexOf(".") + 1);
+
+        switch (fileType) {
+            case "html":
+                return "/assets/images/documenttypes/html.png";
+                break;
+            case "txt":
+                return "/assets/images/documenttypes/txt.png";
+                break;
+            case "doc":
+                return "/assets/images/documenttypes/doc.png";
+                break;
+            case "pdf":
+                return "/assets/images/documenttypes/pdf.png";
+                break;
+            case "docx":
+                return "/assets/images/documenttypes/docx.png";
+                break;
+            case "csv":
+                return "/assets/images/documenttypes/csv.png";
+                break;
+            case "xlsx":
+                return "/assets/images/documenttypes/xlsx.png";
+                break;
+
+            case "zip":
+                return "/assets/images/documenttypes/zip.png";
+                break;
+            case "jpeg":
+            case "jpg":
+                return "/assets/images/documenttypes/jpg.png";
+            case "png":
+                return "/assets/images/documenttypes/png.png";
+                break;
+            default:
+                return "/assets/images/documenttypes/txt.png";
+                break;
+        }
+    };
+
+    const getDocumentType = (docCode) => {
+        switch (docCode) {
+            case "000001":
+                return "000001";
+                break;
+            case "000002":
+                return "000002";
+                break;
+            case "000003":
+                return "000003";
+                break;
+            case "000004":
+                return "000004";
+                break;
+            case "000005":
+                return "000005";
+                break;
+            case "000006":
+                return "000006";
+                break;
+            case "000007":
+                return "000007";
+                break;
+            case "000008":
+                return "000008";
+                break;
+            case "000009":
+                return "000009";
+                break;
+            case "000010":
+                return "000010";
+                break;
+            case "000011":
+                return "000011";
+                break;
+            case "000012":
+                return "000012";
+                break;
+            case "000013":
+                return "000013";
+                break;
+            case "000014":
+                return "000014";
+                break;
+            case "000015":
+                return "000015";
+                break;
+
+            default:
+                return "000000";
+        }
+    };
+
+    const filelistObj = field.fileList || {};
+
+    const blobList = jsonpath.query(
+        filelistObj,
+        "$..[?(@.documentType=='" + field.documentTypeCode + "')]"
+    );
+
+    const deleteThisBlob = async (
+        containerName,
+        blobName,
+        deleteblobhash,
+        getblobshash,
+        casefolderID
+    ) => {
+        //console.log(containerName, blobName, deleteblobhash);
+        deleteBlob(containerName, blobName, deleteblobhash, casefolderID)
+            .then((data) => data)
+            .then(() => {
+                getFilesFromBlobHashed(
+                    containerName,
+                    getblobshash,
+                    casefolderID
+                ).then((newfilelist) => field.setFilesForAppeal(newfilelist));
+            });
+    };
+
+    return (
+        <>
+            <Dropzone
+                accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/tiff,image/jpeg,application/zip"
+                onDrop={(filesToUpload, e) => {
+                    const renamedAcceptedFiles = filesToUpload.map(
+                        (file) =>
+                            new File(
+                                [file],
+                                `${getDocumentType(field.documentTypeCode)}_${
+                                    file.name
+                                }`,
+                                {
+                                    type: file.type,
+                                }
+                            )
+                    );
+                    field.input.onChange(renamedAcceptedFiles);
+                }}
+            >
+                {({ getRootProps, getInputProps }) => (
+                    <>
+                        {/* {field.hint != false && (
+                            <div className="govuk-hint">ss{t(field.hint)}</div>
+                        )}
+                        <div className="govuk-form-group"></div> */}
+                        <section className="container">
+                            <div {...getRootProps({ style })}>
+                                {" "}
+                                <input id={field.id} {...getInputProps()} />
+                                <div>
+                                    {t(
+                                        "newappeal:new-appeal-fileupload-drop-label"
+                                    )}
+                                </div>
+                                <em>
+                                    (
+                                    {t(
+                                        "newappeal:new-appeal-fileupload-file-list-label"
+                                    )}
+                                    )
+                                </em>
+                            </div>
+                            <aside>{thumbs}</aside>
+                        </section>
+                    </>
+                )}
+            </Dropzone>
+            {field.meta.touched && field.meta.error && (
+                <span className="error">{field.meta.error}</span>
+            )}
+            {files && Array.isArray(files) && (
+                <ul>
+                    {files.map((file, i) => (
+                        <div
+                            key={file.name}
+                            className="govuk-!-margin-bottom-5 fileThumb"
+                        >
+                            <img
+                                src={getThumbnailIcon(file, file.type)}
+                                alt={file.name}
+                                width="50"
+                            />
+                            <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
+                                {file.name} ({bytesToSize(file.size)})
+                            </span>
+                        </div>
+                    ))}
+                </ul>
+            )}
+            {blobList.map((blob, i) => (
+                <div
+                    key={blob.name + "_" + i}
+                    className="govuk-!-margin-bottom-5 fileThumb govuk-!-margin-top-5"
+                >
+                    <div className="">
+                        <span
+                            className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
+                            onClick={() => {
+                                deleteThisBlob(
+                                    field.containerID,
+                                    blob.name,
+                                    blob.hasheddeletepath,
+                                    blob.hashgetblobs,
+                                    field.ticketnumber
+                                );
+                            }}
+                            title="Remove this file"
+                        >
+                            &minus;
+                        </span>
+                    </div>
+                    <img
+                        src={getThumbnailIconByExtension(blob.name)}
+                        alt={blob.name}
+                        width="50"
+                    />
+
+                    <Link
+                        key={i}
+                        scroll={false}
+                        href={
+                            "/api/file/downloadblob?container=" +
+                            field.containerID +
+                            "&casefolderID=" +
+                            field.ticketnumber +
+                            "&blobname=" +
+                            blob.name +
+                            blob.hashedfilepath
+                        }
+                    >
+                        <a className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5 govuk-link">
+                            {blob.name} ({bytesToSize(blob.contentLength)})
+                        </a>
+                    </Link>
+                </div>
+            ))}{" "}
+        </>
+    );
+};

components/case/representation/representationInterestedPartyPerson.js

@@ -294,7 +294,14 @@ const RepInterestedPartyPerson = (props) => {
                     </div>
                     <div className="govuk-grid-row">
                         <div className="govuk-button-group">
-                            <Link href="/representation">
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                            >
+                                Continue
+                            </button>
+                            {/* <Link href="/representation">
                                 <a
                                     onClick={() => {
                                         setRepresentationSubmit(true);
@@ -303,7 +310,7 @@ const RepInterestedPartyPerson = (props) => {
                                 >
                                     Continue
                                 </a>
-                            </Link>
+                            </Link> */}
                             <a
                                 onClick={() => {
                                     setRepresentationCapacity();

components/case/representation/representationLandowner.js

@@ -202,7 +202,14 @@ const RepLandOwner = (props) => {
                 </div>
                 <div className="govuk-grid-row">
                     <div className="govuk-button-group">
-                        <Link href="/representation">
+                        <button
+                            type="submit"
+                            className="govuk-button"
+                            data-module="govuk-button"
+                        >
+                            Continue
+                        </button>
+                        {/* <Link href="/representation">
                             <a
                                 onClick={() => {
                                     setRepresentationSubmit(true);
@@ -211,7 +218,7 @@ const RepLandOwner = (props) => {
                             >
                                 Continue
                             </a>
-                        </Link>
+                        </Link> */}
                         <a
                             onClick={() => {
                                 setRepresentationCapacity();

components/case/summary.js

@@ -15,6 +15,7 @@ import {
 } from "../../store/currentView/action";
 
 import { getFormCollectionByID } from "../utils";
+import { getSession, useSession } from "next-auth/react";
 
 import Pinswg_advertsid from "./summaryTypes/pinswg_advertsid";
 import Pinswg_callinss77id from "./summaryTypes/pinswg_callinss77id";
@@ -61,9 +62,13 @@ const CaseSummary = (props) => {
         setCurrentLinkedCases,
         linkedCasesReference,
         setCurrentReference,
+        showMap,
     } = props;
 
-    const noRepresentationLink = ["/case", "/dnsdetails"];
+    const { data: session, status } = useSession();
+    //console.log("session status:", status, session);
+
+    const noRepresentationLink = ["/dnsdetails", "/dns/[developmentName]"];
 
     let setCaseQueryObj = props[currentType];
     let setCaseDetailsObj = props[currentType + "Details"];
@@ -75,6 +80,16 @@ const CaseSummary = (props) => {
               searchResultsObj,
               '$..[?(@.title=="' + caseReference + '")]'
           ))
+        : currentType == "watchedCases"
+        ? (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.pinswg_title=="' + caseReference + '")]'
+          ))
+        : currentType == "myCases"
+        ? (casesObj = jsonpath.query(
+              setCaseQueryObj,
+              '$..[?(@.pinswg_title=="' + caseReference + '")]'
+          ))
         : (casesObj = jsonpath.query(
               setCaseQueryObj,
               '$..[?(@.reference=="' + caseReference + '")]'
@@ -113,7 +128,14 @@ const CaseSummary = (props) => {
                         <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")}
+                                    {getFormCollectionByID(appealTypeID)
+                                        .PrimaryIdAttribute == "pinswg_dnsid"
+                                        ? t("case:summary-applicantonly-label")
+                                        : getFormCollectionByID(appealTypeID)
+                                              .PrimaryIdAttribute ==
+                                          "pinswg_nonvalidationid"
+                                        ? t("case:summary-appellantonly-label")
+                                        : t("case:summary-applicant-label")}
                                 </dt>
                                 <dd className="govuk-summary-list__value">
                                     {detailsObj[
@@ -148,6 +170,23 @@ const CaseSummary = (props) => {
                                     {t("case:summary-site-address-label")}
                                 </dt>
                                 <dd className="govuk-summary-list__value">
+                                    {getFormCollectionByID(appealTypeID)
+                                        .PrimaryIdAttribute == "pinswg_dnsid"
+                                        ? detailsObj.pinswg_projectlocation !=
+                                          null
+                                            ? detailsObj.pinswg_projectlocation.indexOf(
+                                                  ";"
+                                              ) < 0
+                                                ? detailsObj.pinswg_projectlocation
+                                                : router.locale == "cy"
+                                                ? detailsObj.pinswg_projectlocation.split(
+                                                      ";"
+                                                  )[1]
+                                                : detailsObj.pinswg_projectlocation.split(
+                                                      ";"
+                                                  )[0]
+                                            : ""
+                                        : ""}
                                     {_.has(
                                         detailsObj,
                                         "pinswg_siteaddressline1"
@@ -201,14 +240,70 @@ const CaseSummary = (props) => {
                                         : ""}
                                 </dd>
                             </div>
+                            {casesObj.description != null && (
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-description-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {casesObj.description.indexOf(";") < 0
+                                            ? casesObj.description
+                                            : router.locale == "cy"
+                                            ? casesObj.description.split(";")[1]
+                                            : casesObj.description.split(
+                                                  ";"
+                                              )[0]}
+                                    </dd>
+                                </div>
+                            )}
+                            {detailsObj.pinswg_casestage != null && (
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-case-stage-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_casestage@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_casestage@OData.Community.Display.V1.FormattedValue"
+                                              ] ||
+                                              t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
+                            )}
                         </dl>
                     </div>
                 </div>
-                <div className="govuk-grid-row">
+                {/* 1{" "}
+                {_.has(detailsObj, "pinswg_startdatetimeiftheevent") &&
+                    detailsObj.pinswg_startdatetimeiftheevent}
+                2{" "}
+                {_.has(detailsObj, "pinswg_startdateoftheevent") &&
+                    detailsObj.pinswg_startdateoftheevent}
+                3{" "}
+                {_.has(detailsObj, "pinswg_startdateofevent") &&
+                    detailsObj.pinswg_startdateofevent}
+                4{" "}
+                {_.has(detailsObj, "pinswg_starttimeoftheevent") &&
+                    detailsObj.pinswg_starttimeoftheevent} */}
+                {/* <div className="govuk-grid-row">
                     <div className="govuk-grid-column-full">
                         <div className="govuk-button-group">
-                            {noRepresentationLink.includes(router.pathname) ==
+                            {props.currentView.caseReference.showreps !=
-                            true ? (
+                            "true" ? (
+                                ""
+                            ) : noRepresentationLink.includes(
+                                  router.pathname
+                              ) == true ? (
                                 ""
                             ) : (
                                 <Link href="/myportal/representation">
@@ -220,7 +315,7 @@ const CaseSummary = (props) => {
                                 </Link>
                             )}
 
-                            {/* <a
+                            <a
                                 onClick={() => {
                                     //spinnerState();
                                     router.back();
@@ -228,11 +323,10 @@ const CaseSummary = (props) => {
                                 className="govuk-button govuk-button--secondary"
                             >
                                 {t("case:summary-back-button-label")}
-                            </a> */}
+                            </a>
                         </div>
                     </div>
-                </div>
+                </div> */}
-
                 {showSummary(casesObj, detailsObj)}
             </div>
         ) : (
@@ -344,6 +438,7 @@ const CaseSummary = (props) => {
                         formatDates={formatDates}
                         linkedCasesList={linkedCasesList}
                         currentView={props.currentView}
+                        showMap={showMap}
                     />
                 );
                 break;
@@ -380,7 +475,7 @@ const CaseSummary = (props) => {
                     />
                 );
                 break;
-            case "pinswg_environmentalpermittingid":
+            case "pinswg_enforcementpermittingid":
                 return (
                     <Pinswg_environmentalpermittingid
                         casesObj={casesObj}
@@ -583,13 +678,22 @@ const CaseSummary = (props) => {
     //         : setShowSpinnerState(true);
     // };
 
-    function formatDates(dateObj) {
+    function formatDates(dateObj, showTime) {
         var dateObj = new Date(dateObj);
         var dd = String(dateObj.getDate()).padStart(2, "0");
         var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
         var yyyy = dateObj.getFullYear();
+        var hh = dateObj.getHours();
+        hh = ("0" + hh).slice(-2);
+        var mins = dateObj.getMinutes();
+        mins = ("0" + mins).slice(-2);
 
-        return dd + "/" + mm + "/" + yyyy;
+        const dateStr = showTime
+            ? hh == 0 && mins == 0
+                ? ""
+                : hh + ":" + mins
+            : dd + "/" + mm + "/" + yyyy + " ";
+        return dateStr;
     }
 
     function linkedCasesList(linkedCasesReference) {

components/case/summaryTypes/pinswg_advertsid.js

@@ -96,6 +96,25 @@ const Pinswg_advertsid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -324,6 +343,31 @@ const Pinswg_advertsid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_callinss77id.js

@@ -96,6 +96,25 @@ const Pinswg_callinss77id = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -259,6 +278,32 @@ const Pinswg_callinss77id = (props) => {
                                               )}
                                     </dd>
                                 </div>
+                                {/* <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-date-exported-to-iss-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_dateexportedtoiss"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_dateexportedtoiss
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_dateexportedtoiss
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div> */}
+
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
@@ -395,6 +440,31 @@ const Pinswg_callinss77id = (props) => {
                                               )}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_commonlandid.js

@@ -96,6 +96,25 @@ const Pinswg_commonlandid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -200,11 +219,16 @@ const Pinswg_commonlandid = (props) => {
                                         {router.locale == "cy"
                                             ? jsonpath.query(
                                                   transLookup,
-                                                  '$..[?(@.value=="' +
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                       detailsObj.pinswg_relevantauthorityname +
                                                       '")].value_cy'
                                               )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value'
+                                              ) ||
                                               t(
                                                   "case:summary-no-date-entered-label"
                                               )}
@@ -420,6 +444,31 @@ const Pinswg_commonlandid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_starttimeoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_starttimeoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_starttimeoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_communityinfrastructurelevyid.js

@@ -96,6 +96,25 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -323,6 +342,31 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_compulsorypurchaseordersid.js

@@ -78,6 +78,25 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -182,11 +201,16 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                         {router.locale == "cy"
                                             ? jsonpath.query(
                                                   transLookup,
-                                                  '$..[?(@.value=="' +
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                       detailsObj.pinswg_relevantauthorityname +
                                                       '")].value_cy'
                                               )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value'
+                                              ) ||
                                               t(
                                                   "case:summary-no-date-entered-label"
                                               )}
@@ -402,6 +426,31 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_electricityactid.js

@@ -136,6 +136,27 @@ const Pinswg_electricityactid = (props) => {
                                                   ] || ""}
                                         </dd>
                                     </div>
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-type-of-event-label"
+                                            )}
+                                        </dt>
+                                        <dd className="govuk-summary-list__value">
+                                            {router.locale == "cy"
+                                                ? jsonpath.query(
+                                                      transLookup,
+                                                      '$..[?(@.value=="' +
+                                                          detailsObj[
+                                                              "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                          ] +
+                                                          '")].value_cy'
+                                                  )
+                                                : detailsObj[
+                                                      "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                  ] || ""}
+                                        </dd>
+                                    </div>
                                     <div className="govuk-summary-list__row">
                                         <dt className="govuk-summary-list__key">
                                             {t("case:summary-status-label")}

components/case/summaryTypes/pinswg_enforcementlistedbuildingconseid.js

@@ -96,6 +96,25 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_enforcementnoticeappeals174id.js

@@ -96,6 +96,25 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_environmentalpermittingid.js

@@ -96,6 +96,25 @@ const Pinswg_environmentalpermittingid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -200,11 +219,16 @@ const Pinswg_environmentalpermittingid = (props) => {
                                         {router.locale == "cy"
                                             ? jsonpath.query(
                                                   transLookup,
-                                                  '$..[?(@.value=="' +
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                       detailsObj.pinswg_relevantauthorityname +
                                                       '")].value_cy'
                                               )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value'
+                                              ) ||
                                               t(
                                                   "case:summary-no-date-entered-label"
                                               )}
@@ -420,6 +444,31 @@ const Pinswg_environmentalpermittingid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_hedgeshedgerowstreepreservatioid.js

@@ -96,6 +96,25 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -200,11 +219,16 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                         {router.locale == "cy"
                                             ? jsonpath.query(
                                                   transLookup,
-                                                  '$..[?(@.value=="' +
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                       detailsObj.pinswg_relevantauthorityname +
                                                       '")].value_cy'
                                               )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value'
+                                              ) ||
                                               t(
                                                   "case:summary-no-date-entered-label"
                                               )}
@@ -420,6 +444,31 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_householderappealhasid.js

@@ -349,6 +349,31 @@ const Pinswg_householderappealhasid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_lawfuldevelopmentcertificatappid.js

@@ -96,6 +96,25 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_ldpid.js

@@ -96,6 +96,25 @@ const Pinswg_ldpid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_ldpid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_listedbuildingandconservationrid.js

@@ -96,6 +96,25 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_starttimeofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_starttimeofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_starttimeofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_maintenanceoflands217id.js

@@ -96,6 +96,25 @@ const Pinswg_maintenanceoflands217id = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_maintenanceoflands217id = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_miscellaneouscasewordid.js

@@ -96,6 +96,25 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -200,11 +219,16 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                         {router.locale == "cy"
                                             ? jsonpath.query(
                                                   transLookup,
-                                                  '$..[?(@.value=="' +
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                       detailsObj.pinswg_relevantauthorityname +
                                                       '")].value_cy'
                                               )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value'
+                                              ) ||
                                               t(
                                                   "case:summary-no-date-entered-label"
                                               )}
@@ -420,6 +444,31 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_nonvalidationid.js

@@ -77,7 +77,7 @@ const Pinswg_nonvalidationid = (props) => {
                                             : ""}
                                     </dd>
                                 </div>
-                                <div className="govuk-summary-list__row">
+                                {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-procedure-label")}
                                     </dt>
@@ -95,7 +95,7 @@ const Pinswg_nonvalidationid = (props) => {
                                                   "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                               ] || ""}
                                     </dd>
-                                </div>
+                                </div> */}
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -128,12 +128,12 @@ const Pinswg_nonvalidationid = (props) => {
                                                   transLookup,
                                                   '$..[?(@.value=="' +
                                                       detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                          "pinswg_decisionissued@OData.Community.Display.V1.FormattedValue"
                                                       ] +
                                                       '")].value_cy'
                                               )
                                             : detailsObj[
-                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                  "pinswg_decisionissued@OData.Community.Display.V1.FormattedValue"
                                               ] ||
                                               t(
                                                   "case:summary-no-date-entered-label"
@@ -164,12 +164,12 @@ const Pinswg_nonvalidationid = (props) => {
                                         {t("case:summary-start-date-label")}
                                     </dt>
                                     <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
+                                        {_.has(detailsObj, "pinswg_validdate")
                                             ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                                                  detailsObj.pinswg_validdate
                                               )
                                                 ? formatDates(
-                                                      detailsObj.pinswg_startdate
+                                                      detailsObj.pinswg_validdate
                                                   )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
@@ -200,13 +200,13 @@ const Pinswg_nonvalidationid = (props) => {
                                     <dd className="govuk-summary-list__value">
                                         {_.has(
                                             detailsObj,
-                                            "pinswg_casedecisiondate"
+                                            "pinswg_decisionissueddate"
                                         )
                                             ? !_.isEmpty(
-                                                  detailsObj.pinswg_casedecisiondate
+                                                  detailsObj.pinswg_decisionissueddate
                                               )
                                                 ? formatDates(
-                                                      detailsObj.pinswg_casedecisiondate
+                                                      detailsObj.pinswg_decisionissueddate
                                                   )
                                                 : t(
                                                       "case:summary-no-date-entered-label"

components/case/summaryTypes/pinswg_planningappeals78id.js

@@ -96,6 +96,25 @@ const Pinswg_planningappeals78id = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -128,12 +147,12 @@ const Pinswg_planningappeals78id = (props) => {
                                                   transLookup,
                                                   '$..[?(@.value=="' +
                                                       detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                          "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
                                                       ] +
                                                       '")].value_cy'
                                               )
                                             : detailsObj[
-                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                  "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
                                               ] ||
                                               t(
                                                   "case:summary-no-date-entered-label"
@@ -148,6 +167,29 @@ const Pinswg_planningappeals78id = (props) => {
                             </Link> */}
                                     </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">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_casedecisiondate"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_casedecisiondate
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_casedecisiondate
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 {casesObj.numberofchildincidents > 0 && (
                                     <div className="govuk-summary-list__row">
                                         <dt className="govuk-summary-list__key">
@@ -264,7 +306,7 @@ const Pinswg_planningappeals78id = (props) => {
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
-                                            "case:summary-statement-due-date-label"
+                                            "case:summary-statement-interested-party-due-date-label"
                                         )}
                                     </dt>
                                     <dd className="govuk-summary-list__value">
@@ -287,7 +329,7 @@ const Pinswg_planningappeals78id = (props) => {
                                     </dd>
                                 </div>
 
-                                <div className="govuk-summary-list__row">
+                                {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
                                             "case:summary-interested-party-date-label"
@@ -324,12 +366,12 @@ const Pinswg_planningappeals78id = (props) => {
                                                   "case:summary-no-date-entered-label"
                                               )}
                                     </dd>
-                                </div>
+                                </div> */}
 
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
-                                            "case:summary-applicant-final-comments-date-label"
+                                            "case:summary-final-comments-date-label"
                                         )}
                                     </dt>
                                     <dd className="govuk-summary-list__value">
@@ -376,7 +418,7 @@ const Pinswg_planningappeals78id = (props) => {
                                               )}
                                     </dd>
                                 </div> */}
-                                <div className="govuk-summary-list__row">
+                                {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-event-date-label")}
                                     </dt>
@@ -398,22 +440,22 @@ const Pinswg_planningappeals78id = (props) => {
                                                   "case:summary-no-date-entered-label"
                                               )}
                                     </dd>
-                                </div>
+                                </div> */}
 
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
-                                        {t("case:summary-decision-date-label")}
+                                        {t("case:summary-event-date-label")}
                                     </dt>
                                     <dd className="govuk-summary-list__value">
                                         {_.has(
                                             detailsObj,
-                                            "pinswg_casedecisiondate"
+                                            "pinswg_startdatetimeiftheevent"
                                         )
                                             ? !_.isEmpty(
-                                                  detailsObj.pinswg_casedecisiondate
+                                                  detailsObj.pinswg_startdatetimeiftheevent
                                               )
                                                 ? formatDates(
-                                                      detailsObj.pinswg_casedecisiondate
+                                                      detailsObj.pinswg_startdatetimeiftheevent
                                                   )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
@@ -423,6 +465,40 @@ const Pinswg_planningappeals78id = (props) => {
                                               )}
                                     </dd>
                                 </div>
+                                {detailsObj.pinswg_typeofevent == 846040002 ||
+                                detailsObj.pinswg_typeofevent == 846040007 ||
+                                detailsObj.pinswg_typeofevent == 846040012 ||
+                                detailsObj.pinswg_typeofevent == 846040009 ? (
+                                    <div className="govuk-summary-list__row">
+                                        <dt className="govuk-summary-list__key">
+                                            {t(
+                                                "case:summary-start-event-time-label"
+                                            )}
+                                        </dt>
+
+                                        <dd className="govuk-summary-list__value">
+                                            {_.has(
+                                                detailsObj,
+                                                "pinswg_startdatetimeiftheevent"
+                                            )
+                                                ? !_.isEmpty(
+                                                      detailsObj.pinswg_startdatetimeiftheevent
+                                                  )
+                                                    ? formatDates(
+                                                          detailsObj.pinswg_startdatetimeiftheevent,
+                                                          true
+                                                      )
+                                                    : t(
+                                                          "case:summary-no-date-entered-label"
+                                                      )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )}
+                                        </dd>
+                                    </div>
+                                ) : (
+                                    ""
+                                )}
                             </dl>
                         </div>
                     </div>

components/case/summaryTypes/pinswg_planningconditionss73s79id.js

@@ -96,6 +96,25 @@ const Pinswg_planningconditionss73s79id = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_planningconditionss73s79id = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_planningobligationappeals106id.js

@@ -96,6 +96,25 @@ const Pinswg_planningobligationappeals106id = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -400,6 +419,31 @@ const Pinswg_planningobligationappeals106id = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_rowid.js

@@ -96,6 +96,25 @@ const Pinswg_rowid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -200,11 +219,16 @@ const Pinswg_rowid = (props) => {
                                         {router.locale == "cy"
                                             ? jsonpath.query(
                                                   transLookup,
-                                                  '$..[?(@.value=="' +
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                       detailsObj.pinswg_relevantauthorityname +
                                                       '")].value_cy'
                                               )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value'
+                                              ) ||
                                               t(
                                                   "case:summary-no-date-entered-label"
                                               )}
@@ -420,6 +444,31 @@ const Pinswg_rowid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateoftheevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateoftheevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateoftheevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/case/summaryTypes/pinswg_wayleaveid.js

@@ -96,6 +96,25 @@ const Pinswg_wayleaveid = (props) => {
                                               ] || ""}
                                     </dd>
                                 </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:summary-type-of-event-label")}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy'
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-status-label")}
@@ -200,11 +219,16 @@ const Pinswg_wayleaveid = (props) => {
                                         {router.locale == "cy"
                                             ? jsonpath.query(
                                                   transLookup,
-                                                  '$..[?(@.value=="' +
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                       detailsObj.pinswg_relevantauthorityname +
                                                       '")].value_cy'
                                               )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath.query(
+                                                  transLookup,
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value'
+                                              ) ||
                                               t(
                                                   "case:summary-no-date-entered-label"
                                               )}
@@ -420,6 +444,31 @@ const Pinswg_wayleaveid = (props) => {
                                     </dd>
                                 </div>
 
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:summary-start-event-date-label"
+                                        )}
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_startdateofevent"
+                                        )
+                                            ? !_.isEmpty(
+                                                  detailsObj.pinswg_startdateofevent
+                                              )
+                                                ? formatDates(
+                                                      detailsObj.pinswg_startdateofevent
+                                                  )
+                                                : t(
+                                                      "case:summary-no-date-entered-label"
+                                                  )
+                                            : t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
                                 <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t("case:summary-decision-date-label")}

components/cookiemanager/index.js

@@ -205,7 +205,6 @@ const CookieManagementMain = (props) => {
                                                     name="usage"
                                                     className="govuk-radios__input"
                                                     id="usage-1"
-                                                    component="input"
                                                     type="radio"
                                                     value="revoked"
                                                     checked={
@@ -234,7 +233,6 @@ const CookieManagementMain = (props) => {
                                                     name="usage"
                                                     type="radio"
                                                     value="accepted"
-                                                    component="input"
                                                     checked={
                                                         usageState ===
                                                         "accepted"
@@ -352,7 +350,6 @@ const CookieManagementMain = (props) => {
                                                 name="settings"
                                                 type="radio"
                                                 value="revoked"
-                                                component="input"
                                                 checked={
                                                     settingsState === "revoked"
                                                 }
@@ -379,7 +376,6 @@ const CookieManagementMain = (props) => {
                                                 name="settings"
                                                 type="radio"
                                                 value="accepted"
-                                                component="input"
                                                 checked={
                                                     settingsState === "accepted"
                                                 }

components/dns/homepage/dnsLinks.js

@@ -13,7 +13,7 @@ const DNSLinks = (props) => {
                 <ul className="govuk-list">
                     <li>
                         <h3 className="govuk-heading-l govuk-!-font-size-27">
-                            <Link href="/dns/applications">
+                            <Link href="/dnsapplications">
                                 <a className="govuk-link govuk-link--no-underline">
                                     {t("dnsHome:links-applications-title")}
                                 </a>
@@ -25,7 +25,7 @@ const DNSLinks = (props) => {
                             </p>
                         </h3>
                     </li>
-                    <li>
+                    {/* <li>
                         <h3 className="govuk-heading-l govuk-!-font-size-27">
                             <Link href="/dns/help">
                                 <a className="govuk-link govuk-link--no-underline">
@@ -36,14 +36,14 @@ const DNSLinks = (props) => {
                                 {t("dnsHome:links-help-intro-paragraph")}
                             </p>
                         </h3>
-                    </li>
+                    </li> */}
                 </ul>
             </div>
             <div className="govuk-grid-column-one-half">
                 <ul className="govuk-list">
                     <li>
                         <h3 className="govuk-heading-l govuk-!-font-size-27">
-                            <Link href="/dns/application-process">
+                            <Link href="https://gov.wales/developments-national-significance-dns-guidance">
                                 <a className="govuk-link govuk-link--no-underline ">
                                     {t("dnsHome:links-help-title")}
                                 </a>
@@ -53,7 +53,7 @@ const DNSLinks = (props) => {
                             </p>
                         </h3>
                     </li>
-                    <li>
+                    {/* <li>
                         <h3 className="govuk-heading-l govuk-!-font-size-27">
                             <Link href="/dns/contact-us">
                                 <a className="govuk-link govuk-link--no-underline">
@@ -65,7 +65,7 @@ const DNSLinks = (props) => {
                                 {t("dnsHome:links-contactus-intro-paragraph")}
                             </p>
                         </h3>
-                    </li>
+                    </li> */}
                 </ul>
             </div>
         </div>

components/dns/homepage/latestApplications.js

@@ -4,9 +4,13 @@ import useTranslation from "next-translate/useTranslation";
 
 const LatestApplications = (props) => {
     let { t } = useTranslation();
+    const { dnsList } = props;
 
+    dnsList = dnsList.value;
+    let dnsListArr = dnsList.slice(0, 3);
     const router = useRouter();
     const { locale } = router;
+
     return (
         <div className="govuk-panel govuk-grid-column-one-third govuk-panel--latest">
             <h2 className="govuk-heading-m">
@@ -15,32 +19,25 @@ const LatestApplications = (props) => {
             </h2>
             <div className="govuk-panel__body">
                 <ul className="govuk-list">
-                    <li className="govuk-body-s ">
+                    {Object.keys(dnsListArr).map((key, index) => {
-                        {" "}
+                        return (
-                        <Link href="/dns/application-view">
+                            <li className="govuk-body-s " key={key}>
-                            <a href="">Brynrhyd Solar Farm</a>
+                                <Link
-                        </Link>
+                                    href={
-                    </li>
+                                        "/dns/" +
-                    <li className="govuk-body-s ">
+                                        (dnsList[key].title.indexOf(" - ") < 0
-                        {" "}
+                                            ? dnsList[key].title
-                        <Link href="/dns/application-view">
+                                            : dnsList[key].title
-                            <a href="">Brynrhyd Solar Farm</a>
+                                                  .split(" - ")[1]
-                        </Link>
+                                                  .split(" ")
-                    </li>
+                                                  .join("-"))
-
+                                    }
-                    <li className="govuk-body-s ">
+                                >
-                        {" "}
+                                    <a>{dnsList[key].title}</a>
-                        <Link href="/dns/application-view">
-                            <a href="">Brynrhyd Solar Farm</a>
-                        </Link>
-                    </li>
-
-                    <li className="govuk-body-s ">
-                        {" "}
-                        <Link href="/dns/application-view">
-                            <a href="">Brynrhyd Solar Farm</a>
                                 </Link>
                             </li>
+                        );
+                    })}
                 </ul>
             </div>
         </div>

components/dns/homepage/titleContent.js

@@ -1,75 +1,21 @@
-import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
 import AutoSuggest from "react-autosuggest";
 
-const dnsSites = [
+const TitleContent = (props) => {
-    { id: 1, name: "30MW Energy Plant - Wrexham" },
+    const { dnsList } = props;
-    { id: 1, name: "Abertillery Wind Farm" },
+
-    { id: 1, name: "Alaw Mon Solar Farm" },
+    const dnsSites = dnsList.value;
-    { id: 1, name: "Alwen Forest - Wind" },
-    { id: 1, name: "Blackberry Lane Solar Park" },
-    { id: 1, name: "Bretton Hall Solar Farm" },
-    { id: 1, name: "Brynllewelyn Farm - Renewable Energy Project" },
-    { id: 1, name: "Brynrhyd Solar Farm" },
-    { id: 1, name: "Brynwell Farm Renewable Energy Hub" },
-    { id: 1, name: "Buttington Quarry - ERF" },
-    { id: 1, name: "Coed Darcy - STOR" },
-    { id: 1, name: "Coity Road - STOR" },
-    { id: 1, name: "Craig Y Perchyll Solar" },
-    { id: 1, name: "Egnedol - Sustainable Energy" },
-    { id: 1, name: "Elwy Solar Energy" },
-    { id: 1, name: "Erebus - Floating Offshore Wind Demonstration Project" },
-    { id: 1, name: "Felindre Road - STOR" },
-    { id: 1, name: "Gaerwen Wind Farm" },
-    { id: 1, name: "Garn Fach Wind Farm" },
-    { id: 1, name: "Holyhead Harbour Revision Order" },
-    { id: 1, name: "Holyhead Marina Harbour Revision Order" },
-    { id: 1, name: "Holyhead Waterfront Regeneration Scheme HRO" },
-    { id: 1, name: "Legacy Substation Gas Peaking Plant" },
-    { id: 1, name: "Llantarnam - SToR" },
-    { id: 1, name: "Llanwern - Solar" },
-    { id: 1, name: "Lluest y Gwynt Wind Farm" },
-    { id: 1, name: "Llynfi Energy Recovery Facility" },
-    { id: 1, name: "Manmoel Wind Farm" },
-    { id: 1, name: "Môn Solar Farm" },
-    { id: 1, name: "Mor Hafren: Energy Recovery Facility" },
-    { id: 1, name: "Mynydd Carn-y-Cefn Wind Farm" },
-    { id: 1, name: "Mynydd Llanhilleth Wind Farm" },
-    { id: 1, name: "Pancross & Oaklands Solar Farm" },
-    { id: 1, name: "Parc Dyffryn Solar Park" },
-    { id: 1, name: "Parc Solar Traffwll" },
-    { id: 1, name: "Pen March Wind Farm" },
-    { id: 1, name: "Pen-y-Fan - Power Plant" },
-    { id: 1, name: "Pencaerlan Solar Farm" },
-    { id: 1, name: "Penderi Solar Farm" },
-    { id: 1, name: "Penpergwm Solar Farm" },
-    { id: 1, name: "Pentre Bach Solar Farm" },
-    { id: 1, name: "Plas Power Estate Solar Farm" },
-    { id: 1, name: "Project Valorous" },
-    { id: 1, name: "Rhoscrowther Wind Farm" },
-    { id: 1, name: "Rush Wall Solar Park Ltd" },
-    { id: 1, name: "Sudbrook - Peaking Gas" },
-    { id: 1, name: "TWA - Morlais Demonstration Zone" },
-    { id: 1, name: "Twyn Hywel Energy Park" },
-    { id: 1, name: "Tycroes Solar" },
-    { id: 1, name: "Upper Ogmore - Wind Turbines" },
-    { id: 1, name: "Valero - Cogeneration Facility" },
-    { id: 1, name: "Vattenfall - Renewable Energy" },
-    { id: 1, name: "Wauntysswg - Solar" },
-    { id: 1, name: "Wentlooge - renewable energy hub" },
-    { id: 1, name: "Y Bryn Wind Farm" },
-];
 
     const lowerCasedCompanies = dnsSites.map((company) => {
         return {
-        id: company.id,
+            id: company.ticketnumber,
-        name: company.name,
+            name: company.title,
         };
     });
 
-const TitleContent = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -92,12 +38,11 @@ const TitleContent = (props) => {
             <div className="govuk-panel__body">
                 <p className="govuk-body-s">{t("dnsHome:title-paragraph")}</p>
             </div>
-            <div className="govuk-form-group govuk-!-margin-bottom-0 flex-container">
+            <div className="govuk-form-group govuk-!-margin-bottom-0 flex-container react-autosuggest">
                 <AutoSuggest
                     suggestions={suggestions}
                     onSuggestionsClearRequested={() => setSuggestions([])}
                     onSuggestionsFetchRequested={({ value }) => {
-                        console.log(value);
                         setValue(value);
                         setSuggestions(getSuggestions(value));
                     }}
@@ -120,8 +65,15 @@ const TitleContent = (props) => {
                     }}
                     highlightFirstSuggestion={true}
                 />
-                <Link href="/dns/application-view">
+                <Link
-                    <a className="govuk-button govuk-!-margin-bottom-0 govuk-!-margin-left-2">
+                    href={
+                        "/dns/" +
+                        (value.indexOf(" - ") > 0
+                            ? value.split(" - ")[1].split(" ").join("-")
+                            : value)
+                    }
+                >
+                    <a className="govuk-button govuk-!-margin-bottom-0 ">
                         {t("dnsHome:title-application-search-button")}
                     </a>
                 </Link>

components/dns/main.js

@@ -7,7 +7,7 @@ import LatestApplications from "./homepage/latestApplications";
 import DNSLinks from "./homepage/dnsLinks";
 import ApplicationsForComment from "./homepage/applicationsForComment";
 
-export default function Main({ children, pages }) {
+export default function Main({ children, pages, props }) {
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -22,8 +22,12 @@ export default function Main({ children, pages }) {
             <div className="govuk-grid-row govuk-!-margin-bottom-0">
                 <div className="govuk-grid-column-full govuk-!-padding-bottom-0">
                     <div className="flex-container grid-row govuk-body govuk-!-margin-bottom-0 ">
-                        <TitleContent />
+                        <TitleContent
-                        <LatestApplications />
+                            dnsList={props.searchResultsObj.searchResultsObj}
+                        />
+                        <LatestApplications
+                            dnsList={props.searchResultsObj.searchResultsObj}
+                        />
                     </div>
                 </div>
             </div>
@@ -31,7 +35,7 @@ export default function Main({ children, pages }) {
                 <div className="govuk-grid-column-full">
                     <div className="flex-container grid-row govuk-body ">
                         <DNSLinks />
-                        <ApplicationsForComment />
+                        {/* <ApplicationsForComment /> */}
                     </div>
                 </div>
             </div>

components/dnssearchresults.js

@@ -7,7 +7,8 @@ import DNSSearchResults from "./search/dnssearchresults";
 import CRMError from "./crmError";
 
 export default function Search(props) {
-    const { searchString, searchResultsObj } = props;
+    const { searchString, searchResultsObj, myportal, watchedCases, showMap } =
+        props;
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -39,6 +40,10 @@ export default function Search(props) {
                                 searchDetailsObj={
                                     searchResultsObj.searchDetailsObj
                                 }
+                                dnsCoords={searchResultsObj.dnsCoordsObj.value}
+                                myportal={myportal}
+                                watchedCases={watchedCases}
+                                showMap={showMap}
                             />
                         </div>
                     </div>

components/footer.js

@@ -154,7 +154,7 @@ export default function Footer(props) {
                                                 "common:footer-contact-us-link"
                                             )}
                                             className="govuk-footer__link"
-                                            id="aAccess"
+                                            id="aContactUs"
                                         >
                                             {t(
                                                 "common:footer-contact-us-link-label"
@@ -176,7 +176,7 @@ export default function Footer(props) {
                                         >
                                             <a
                                                 className="govuk-footer__link"
-                                                id="aAccess"
+                                                id="aAccessibility"
                                             >
                                                 {t(
                                                     "common:footer-accessibility-link-label"

components/header.js

@@ -7,6 +7,9 @@ import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import { setLogout } from "../store/accountDetails/action";
 import _ from "lodash";
 import { parseCookies, setCookie, destroyCookie } from "nookies";
+
+import { useSession, signIn, signOut } from "next-auth/react";
+
 const Header = (props) => {
     let { t, lang } = useTranslation();
 
@@ -33,9 +36,11 @@ const Header = (props) => {
         "/myportal/error",
         "/accessibility",
         "/details-about-cookies",
+        "/auth/verify-request",
+        "/auth/signin",
+        "/auth/error",
     ];
     const hasContactLink = [
-        "/dns",
         "/dns/application-process",
         "/dns/help",
         "/dns/contact-us",
@@ -214,8 +219,9 @@ const Header = (props) => {
                             >
                                 <a
                                     onClick={() => {
+                                        window.localStorage.clear(),
                                             destroyCookie({}, "pinsUser"),
-                                            window.localStorage.clear();
+                                            signOut({ callbackUrl: "/logout" });
                                     }}
                                     className="govuk-header__link govuk-!-margin-right-3"
                                 >

components/homepage/login.js

@@ -9,6 +9,8 @@ import { getLogin } from "../../actions";
 import { setLoggedInUserId } from "../../store/accountDetails/action";
 import { parseCookies, setCookie, destroyCookie } from "nookies";
 
+import { useSession, signIn, signOut } from "next-auth/react";
+
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
 
@@ -54,7 +56,13 @@ const RenderTextfield = ({
                         {error}
                     </span>
                 )}
-                <input {...input} className={className} name={name} id={id} />
+                <input
+                    {...input}
+                    className={className}
+                    name={name}
+                    id={id}
+                    autoComplete="username"
+                />
             </div>
         </>
     );
@@ -100,6 +108,7 @@ const RenderPasswordfield = ({
                     className={className}
                     name={name}
                     id={id}
+                    autoComplete="current-password"
                 />
             </div>
         </>
@@ -108,15 +117,10 @@ const RenderPasswordfield = ({
 
 let Login = (props) => {
     let { t } = useTranslation();
-    const {
+    const { handleSubmit, pristine, reset, submitting, setLoggedInUserId } =
-        handleSubmit,
+        props;
-        pristine,
+
-        reset,
+    const { data: session } = useSession();
-        submitting,
-        setLoggedInUserId,
-        GG_CLIENT_ID,
-        GG_REDIRECT_URI,
-    } = props;
 
     const router = useRouter();
     const { locale } = router;
@@ -124,17 +128,6 @@ let Login = (props) => {
     // const [showSpinnerState, setShowSpinnerState] = useState(false);
     const [validLoginID, setValidLoginID] = useState(null);
 
-    // console.log(
-    //     "built login url path:",
-    //     props.govGateway.config.authorization_endpoint +
-    //         "?response_type=code&scope=openid&client_id=" +
-    //         GG_CLIENT_ID +
-    //         "&redirect_uri=" +
-    //         GG_REDIRECT_URI +
-    //         "&ui_locales=" +
-    //         (router.locale == "cy" ? "cy" : "en-GB")
-    // );
-
     // let spinnerState = () => {
     //     showSpinnerState == true
     //         ? setShowSpinnerState(false)
@@ -161,7 +154,6 @@ let Login = (props) => {
                   router.replace({
                       pathname:
                           router.locale == "cy" ? "/fymhorth" : "/myportal",
-                      shallow: true,
                   }))
                 : //setShowSpinnerState(false),
                   setValidLoginID(false);
@@ -179,35 +171,62 @@ let Login = (props) => {
             : "";
     }, [cookies.pinsUser, router]);
 
-    const govGatwayLoginRedirect = () => {
+    if (session === "loading") {
-        let ggUrl =
+        return <h1>loading...</h1>;
-            props.govGateway.config.authorization_endpoint +
+    }
-            "?response_type=code&scope=openid&client_id=" +
-            GG_CLIENT_ID +
-            "&redirect_uri=" +
-            GG_REDIRECT_URI +
-            "&ui_locales=" +
-            (router.locale == "cy" ? "cy" : "en-GB");
-
-        console.log("login Url:", ggUrl);
-
-        router.replace(ggUrl);
-    };
-
-    const govGatwayForgottenLink = () => {
-        let ggUrl =
-            props.govGateway.config.authorization_endpoint +
-            "/login/forgot-password";
-        router.replace(ggUrl);
-    };
 
+    if (session) {
+        <>
+            <div>Signed in as {session.user?.email}</div>
+            <br />
+            <button type="button" onClick={() => signOut()}>
+                Signout
+            </button>
+        </>;
+    }
     return (
+        <>
             <div className="card" id="login-card">
                 <div className="card-body active">
                     <h3 className="heading-small card-heading">
-                    {t("home:login-card-title")}
+                        {/* {t("home:login-card-title")} */}
+                        {t("home:login-card-title-temp")}
                     </h3>{" "}
-                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <div className="govuk-form-group govuk-!-margin-top-4">
+                        <div className="govuk-body">
+                            {session && "Signed in as " + session.user?.email}
+                        </div>
+                        <br />
+                        {!session && (
+                            <button
+                                className="govuk-button withChevron govuk-button-cta"
+                                type="button"
+                                onClick={() =>
+                                    signIn("email", {
+                                        callbackUrl: "/",
+                                    })
+                                }
+                            >
+                                {t("home:login-via-nextuth-label")}
+                            </button>
+                        )}
+                        {session && (
+                            <button
+                                className="govuk-button"
+                                type="button"
+                                onClick={() => signOut()}
+                            >
+                                Magic Link Sign Out
+                            </button>
+                        )}
+                    </div>
+                    <p className="govuk-body-s">
+                        {t("home:login-comingsoon-temp-1")}{" "}
+                    </p>
+                    <p className="govuk-body-s">
+                        {t("home:login-comingsoon-temp-1a")}{" "}
+                    </p>
+                    {/* <form onSubmit={handleSubmit(onHandleSubmit)}>
                         {validLoginID == false && (
                             <div className="govuk-error-message govuk-form-group--error">
                                 Incorrect username or password
@@ -233,14 +252,6 @@ let Login = (props) => {
                         />
 
                         <Field
-                        // validate={[
-                        //     required(
-                        //         t("home:casesearch-search-validation-required")
-                        //     ),
-                        //     minLength(
-                        //         t("home:casesearch-search-validation-minlength")
-                        //     ),
-                        // ]}
                             className="govuk-input"
                             component={RenderPasswordfield}
                             id="loginUserPassword"
@@ -254,9 +265,9 @@ let Login = (props) => {
                                 {t("home:login-card-button")}
                             </button>
                         </div>
-                </form>
+                    </form> */}
                     <div className="govuk-form-group govuk-!-margin-top-4">
-                    <p className="govuk-body-xs">
+                        {/*    <p className="govuk-body-xs">
                             <a
                                 onClick={() => {
                                     govGatwayLoginRedirect();
@@ -268,19 +279,19 @@ let Login = (props) => {
                         </p>
                         <p className="govuk-body-s">
                             {t("home:login-card-register-label")}{" "}
-                        <Link
+                            <a
                                 href={
                                     router.locale == "cy"
-                                    ? "/cyfrif/cofrestr"
+                                        ? "https://www.ete.access.service.gov.uk/login/create-account?lang=cy"
-                                    : "/account/register"
+                                        : "https://www.ete.access.service.gov.uk/login/create-account"
                                 }
+                                className="govuk-link--no-underline"
                             >
-                            <a className="govuk-link--no-underline">
                                 {t("home:login-card-register-link")}
                             </a>
-                        </Link>
                         </p>
-                    <p className="govuk-body-s">
+                        */}
+                        {/* <p className="govuk-body-s">
                             <a
                                 onClick={() => {
                                     govGatwayForgottenLink();
@@ -289,7 +300,7 @@ let Login = (props) => {
                             >
                                 {t("home:login-card-forgotten-label")}{" "}
                             </a>
-                    </p>
+                        </p> */}
                         <hr className="govuk-!-margin-bottom-4" />
                         <p className="govuk-body-s">
                             {t("home:login-comingsoon-temp-2")}
@@ -299,7 +310,9 @@ let Login = (props) => {
                                 <a
                                     className="govuk-link--no-underline"
                                     target="_blank"
-                                href={t("home:login-comingsoon-forms-link-1")}
+                                    href={t(
+                                        "home:login-comingsoon-forms-link-1"
+                                    )}
                                     rel="noreferrer"
                                 >
                                     {t("home:login-comingsoon-forms-label-1")}
@@ -310,7 +323,9 @@ let Login = (props) => {
                                 <a
                                     className="govuk-link--no-underline"
                                     target="_blank"
-                                href={t("home:login-comingsoon-forms-link-2")}
+                                    href={t(
+                                        "home:login-comingsoon-forms-link-2"
+                                    )}
                                     rel="noreferrer"
                                 >
                                     {t("home:login-comingsoon-forms-label-2")}
@@ -321,7 +336,9 @@ let Login = (props) => {
                                 <a
                                     className="govuk-link--no-underline"
                                     target="_blank"
-                                href={t("home:login-comingsoon-forms-link-3")}
+                                    href={t(
+                                        "home:login-comingsoon-forms-link-3"
+                                    )}
                                     rel="noreferrer"
                                 >
                                     {t("home:login-comingsoon-forms-label-3")}
@@ -332,7 +349,9 @@ let Login = (props) => {
                                 <a
                                     className="govuk-link--no-underline"
                                     target="_blank"
-                                href={t("home:login-comingsoon-forms-link-4")}
+                                    href={t(
+                                        "home:login-comingsoon-forms-link-4"
+                                    )}
                                     rel="noreferrer"
                                 >
                                     {t("home:login-comingsoon-forms-label-4")}
@@ -359,6 +378,7 @@ let Login = (props) => {
                 text="Logging in"
             /> */}
             </div>
+        </>
     );
 };
 
@@ -374,7 +394,6 @@ const mapStateToProps = (state) => {
         watchedCases: state.watchedCases,
         myRepresentations: state.myRepresentations,
         awaitingSubmission: state.awaitingSubmission,
-        govGateway: state.govGateway,
     };
 };
 

components/main.js

@@ -12,7 +12,7 @@ import Dns from "./homepage/dns";
 const MainHome = (props) => {
     let { t } = useTranslation();
 
-    const { showLogin, GG_REDIRECT_URI, GG_CLIENT_ID } = props;
+    const { showLogin, session } = props;
     const router = useRouter();
     const { locale } = router;
 
@@ -25,16 +25,20 @@ const MainHome = (props) => {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <div className="flex-container grid-row govuk-body ">
+                        {showLogin != "true" && (
+                            <>
                                 <LoginSoon />
                                 <CaseSearch />
+                            </>
+                        )}
+                        {showLogin == "true" && (
+                            <>
+                                <CaseSearch />
+                                <Login session={session} />
+                            </>
+                        )}{" "}
                         <CaseComment />
                         <Dns />
-                        {showLogin == "true" && (
-                            <Login
-                                GG_CLIENT_ID={GG_CLIENT_ID}
-                                GG_REDIRECT_URI={GG_REDIRECT_URI}
-                            />
-                        )}
                         {/*   <Inspectorate /> */}
                     </div>
                 </div>

components/mapping/index.js

@@ -0,0 +1,43 @@
+import GoogleMapReact from "google-map-react";
+const GoogleMapComponent = (props) => {
+    const { center, zoom } = props;
+
+    let data = [center];
+
+    const ModelsMap = (map, maps) => {
+        //instantiate array that will hold your Json Data
+        let dataArray = [];
+        //push your Json Data in the array
+        {
+            data.map((markerJson) => dataArray.push(markerJson));
+        }
+
+        //Loop through the dataArray to create a marker per data using the coordinates in the json
+        for (let i = 0; i < dataArray.length; i++) {
+            let marker = new maps.Marker({
+                position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+                map,
+                label: dataArray[i].id,
+            });
+        }
+    };
+    return (
+        <GoogleMapReact
+            options={function (maps) {
+                return {
+                    overviewMapControl: true,
+                    mapTypeControl: true,
+                };
+            }}
+            bootstrapURLKeys={{
+                key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
+            }}
+            defaultCenter={center}
+            defaultZoom={zoom}
+            yesIWantToUseGoogleMapApiInternals
+            onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
+        ></GoogleMapReact>
+    );
+};
+
+export default GoogleMapComponent;

components/mapping/osm.js

@@ -0,0 +1,38 @@
+import L from "leaflet";
+import { useRef, useMemo } from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+
+const OSMapComponent = (props) => {
+    const { center, zoom } = props;
+    const markerRef = useRef(null);
+    let data = [center];
+
+    // const ModelsMap = (map, maps) => {
+    //     //instantiate array that will hold your Json Data
+    //     let dataArray = [];
+    //     //push your Json Data in the array
+    //     {
+    //         data.map((markerJson) => dataArray.push(markerJson));
+    //     }
+
+    //     //Loop through the dataArray to create a marker per data using the coordinates in the json
+    //     for (let i = 0; i < dataArray.length; i++) {
+    //         let marker = new maps.Marker({
+    //             position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+    //             map,
+    //             label: dataArray[i].id,
+    //         });
+    //     }
+    // };
+
+    return (
+        <MapContainer center={center} zoom={zoom}>
+            <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+
+            <Marker position={center} ref={markerRef}>
+                <Popup>hello</Popup>
+            </Marker>
+        </MapContainer>
+    );
+};
+export default OSMapComponent;

components/myportal.js

@@ -1,58 +1,32 @@
+import { signOut } from "next-auth/react";
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useContext } from "react";
+import { destroyCookie } from "nookies";
-import useTranslation from "next-translate/useTranslation";
+import TimeOut from "../components/timeout";
+import AwaitingSubmission from "./myportal/awaitingsubmission";
+import AwaitingSubmissionFromBlob from "./myportal/awaitingsubmissionfromblob";
+
+import Dns from "./myportal/dns";
 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 SearchCases from "./myportal/searchcases";
+import UploadFile from "./myportal/uploadFile";
 import WatchedCases from "./myportal/watchedcases";
-import YourAccount from "./myportal/youraccount";
-import { parseCookies, setCookie, destroyCookie } from "nookies";
-
-import IdleTimer from "react-idle-timer";
-import TimeoutModal from "../components/timeoutmodal";
-import { useState } from "react";
 
 const MyPortal = (props) => {
+    const { showFileUpload } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    const [showModal, setShowModal] = useState(false);
-    const inactiveTimeOut = 12000; // in seconds
-    const reminderTimeout = 60; // in seconds
-
-    let idleTimer = null;
-    let logoutTimer = null;
-
-    let onIdle = () => {
-        togglePopup();
-        logoutTimer = setTimeout(() => {
-            handleLogout();
-        }, 1000 * reminderTimeout * 1);
-    };
-
-    let togglePopup = () => {
-        showModal == true ? setShowModal(false) : setShowModal(true);
-    };
-
-    let handleStayLoggedIn = () => {
-        if (logoutTimer) {
-            clearTimeout(logoutTimer);
-            logoutTimer = null;
-        }
-        idleTimer.reset();
-        togglePopup();
-    };
-
     const handleLogout = () => {
-        console.log("////////////", "\n", "logout", "\n", "//////////");
+        console.info("////////////\n" + "logout" + "\n////////////");
-        destroyCookie({}, "pinsUser"),
         window.localStorage.clear(),
-            router.replace(props.ggLogout);
+            destroyCookie({}, "pinsUser"),
+            signOut({ callbackUrl: "/logout" });
     };
 
     return (
@@ -81,8 +55,24 @@ const MyPortal = (props) => {
                             alt={router.locale == "cy" ? "Defnyddiwr" : "User"}
                         />{" "}
                         <div className="serviceBanner_userDetails_name">
-                            {props.accountDetails.accountDetails.firstname}{" "}
+                            <Link href="/account/personaldetails">
-                            {props.accountDetails.accountDetails.lastname}
+                                <a className="govuk-button-secondary">
+                                    {
+                                        props.accountDetails.accountDetails
+                                            .firstname
+                                    }{" "}
+                                    {
+                                        props.accountDetails.accountDetails
+                                            .lastname
+                                    }
+                                    {" - "}
+                                    {
+                                        props.accountDetails.accountDetails[
+                                            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </a>
+                            </Link>
                         </div>
                         <div>
                             <Link
@@ -108,39 +98,51 @@ const MyPortal = (props) => {
                     <div className="govuk-grid-column-full">
                         <div className="flex-container grid-row govuk-body ">
                             <MakeNewAppeal />
-                            <MyCases myCases={props.myCases} />
                             <SearchCases />
+                            {/* {props.awaitingSubmission.awaitingSubmission[
+                                "@odata.count"
+                            ] > 0 && (
                                 <AwaitingSubmission
-                                awaitingSubmission={props.awaitingSubmission}
+                                    awaitingSubmission={
+                                        props.awaitingSubmission
+                                    }
                                 />
+                            )} */}
+                            {props.awaitingSubmission
+                                .awaitingSubmissionFromBlob["@odata.count"] >
+                                0 && (
+                                <AwaitingSubmissionFromBlob
+                                    containerID={props.containerID}
+                                    awaitingSubmissionFromBlob={
+                                        props.awaitingSubmission
+                                            .awaitingSubmissionFromBlob
+                                    }
+                                />
+                            )}
+                            {props.myCases.myCases["@odata.count"] > 0 && (
+                                <MyCases myCases={props.myCases} />
+                            )}
+                            {props.watchedCases.watchedCases["@odata.count"] >
+                                0 && (
+                                <WatchedCases
+                                    watchedCases={props.watchedCases}
+                                />
+                            )}
+                            {props.myRepresentations.myRepresentations[
+                                "@odata.count"
+                            ] > 0 && (
                                 <MyRepresentations
                                     myRepresentations={props.myRepresentations}
                                 />
-                            <WatchedCases watchedCases={props.watchedCases} />
+                            )}
-                        </div>
+                            <Dns />
-                        <div className="flex-container grid-row govuk-body ">
+                            {/* <YourAccount /> */}
-                            <YourAccount />
+                            {showFileUpload == "true" && <UploadFile />}
                         </div>
                     </div>
                 </div>
             </main>
-            <IdleTimer
+            <TimeOut />
-                ref={(ref) => {
-                    idleTimer = ref;
-                }}
-                element={document}
-                stopOnIdle={true}
-                onActive={console.log(" bbis active", idleTimer)}
-                onIdle={onIdle}
-                timeout={1000 * inactiveTimeOut * 1}
-            />
-
-            <TimeoutModal
-                remainingCountdown={reminderTimeout}
-                showModal={showModal}
-                togglePopup={togglePopup}
-                handleStayLoggedIn={handleStayLoggedIn}
-            />
         </>
     );
 };

components/myportal/advancedsearch.js

@@ -0,0 +1,513 @@
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { reduxForm, formValueSelector, Field } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import jsonpath from "jsonpath";
+import data from "../../data/collections.json";
+import LoadingOverlay from "react-loading-overlay";
+import transLookup from "../../data/lookuptranslations.json";
+
+const required = (errorMsg) => (value) =>
+    value || typeof value === "number" ? undefined : errorMsg;
+
+export const minLength = (errorMsg) => (value) =>
+    value && value.length < 4
+        ? errorMsg //`Must be ${min} characters or more`
+        : undefined;
+
+let AdvancedSearch = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { LPAData, onSubmit, handleSubmit } = props;
+
+    console.log("props here:", props.props);
+
+    const appealOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.appealType)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions.value)
+        ? [{}]
+        : props.appealType.appealTypeOptions.value;
+
+    let lpaOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : props.LPAData.LPAData.value;
+
+    const RenderTextfield = ({
+        id,
+        className,
+        rows,
+        datafieldname,
+        name,
+        label,
+        input,
+        hint1,
+        hint2,
+        hint3,
+        meta: { touched, error },
+        ...custom
+    }) => {
+        return (
+            <>
+                <div className="govuk-form-group">
+                    <div id="basicSearch-hint" className="govuk-hint ">
+                        <label className="govuk-label" htmlFor="caseRef">
+                            {t("search:casereference-label")}
+                        </label>
+                    </div>
+
+                    <div>
+                        <input
+                            {...input}
+                            className={className}
+                            name={name}
+                            id={id}
+                        />
+                        {touched && error && (
+                            <span
+                                id={id + "-error"}
+                                className="govuk-error-message govuk-form-group--error"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                {error}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    const RenderLPAList = ({
+        name,
+        id,
+        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={id}>
+                        {label}
+                    </label>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errormsg}
+                        </span>
+                    )}
+                    <div>
+                        <select
+                            {...input}
+                            className="govuk-select govuk-input--error"
+                            id={id}
+                            name={name}
+                            //onChange={(e) => props.onChangeSelectLPA(e)}
+                        >
+                            <option value="" disabled defaultValue>
+                                {t("common:drop-down-select")}
+                            </option>
+                            {_.isEmpty(optionsObj)
+                                ? ""
+                                : Object.keys(optionsObj).map((key, index) => {
+                                      return (
+                                          <option
+                                              key={key}
+                                              value={optionsObj[key].accountid}
+                                          >
+                                              {/* {optionsObj[key].name} */}
+
+                                              {router.locale == "cy"
+                                                  ? jsonpath.query(
+                                                        transLookup,
+                                                        '$..[?(@.value=="' +
+                                                            optionsObj[key]
+                                                                .name +
+                                                            '")].value_cy'
+                                                    )
+                                                  : optionsObj[key].name ||
+                                                    t(
+                                                        "case:summary-no-date-entered-label"
+                                                    )}
+                                          </option>
+                                      );
+                                  })}
+                        </select>
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    const RenderAppealTypeList = ({
+        name,
+        id,
+        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={id}>
+                        {label}
+                        {name}
+                    </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={id}
+                            name={name}
+                            //onChange={(e) => props.onChangeSelectAppealType(e)}
+                        >
+                            <option value="" disabled defaultValue>
+                                {t("common:drop-down-select")}
+                            </option>
+                            {_.isEmpty(optionsObj)
+                                ? ""
+                                : Object.keys(optionsObj).map((key, index) => {
+                                      return (
+                                          <option
+                                              key={key}
+                                              value={
+                                                  _.isEmpty(optionsObj[key])
+                                                      ? ""
+                                                      : _.isEmpty(
+                                                            optionsObj[key]
+                                                        )
+                                                      ? ""
+                                                      : _.isEmpty(
+                                                            optionsObj[key]
+                                                                .value
+                                                        )
+                                                      ? ""
+                                                      : optionsObj[key]
+                                                            .attributevalue +
+                                                        "," +
+                                                        optionsObj[key].value
+                                                            .replace(
+                                                                /(\band|[\s\-\+\(\)\,\&])/g,
+                                                                ""
+                                                            )
+                                                            .toLowerCase()
+                                              }
+                                          >
+                                              {_.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : _.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : _.isEmpty(
+                                                        optionsObj[key].value
+                                                    )
+                                                  ? ""
+                                                  : router.locale == "cy"
+                                                  ? jsonpath.query(
+                                                        transLookup,
+                                                        '$..[?(@.value=="' +
+                                                            optionsObj[key]
+                                                                .value +
+                                                            '")].value_cy'
+                                                    )
+                                                  : optionsObj[key].value ||
+                                                    t(
+                                                        "case:summary-no-date-entered-label"
+                                                    )}
+                                          </option>
+                                      );
+                                  })}
+                        </select>
+                    </div>
+                </div>
+            </>
+        );
+    };
+
+    // const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    // let spinnerState = () => {
+    //     showSpinnerState == true
+    //         ? setShowSpinnerState(false)
+    //         : setShowSpinnerState(true);
+    // };
+
+    const onHandleSubmit = (values) => {
+        event.preventDefault();
+        //spinnerState();
+
+        var searchString = "";
+
+        searchString +=
+            values.caseRef != null ? "?q=" + values.caseRef.trim() : "";
+        searchString +=
+            values.lpaTypes != null
+                ? (typeof values.caseRef == "undefined" ? "?" : "&") +
+                  "lpa=" +
+                  values.lpaTypes
+                : "";
+
+        searchString +=
+            values.appealTypes != null
+                ? (typeof values.caseRef == "undefined" &&
+                  typeof values.lpaTypes == "undefined"
+                      ? "?"
+                      : "&") +
+                  ("apt=" + values.appealTypes.split(",")[0])
+                : "";
+
+        router.replace(
+            (router.locale == "cy"
+                ? "/fymhorth/canlyniadauchwiliouwch"
+                : "/myportal/advancedsearchresults") + searchString,
+            null,
+            {
+                shallow: true,
+            }
+        );
+    };
+
+    return (
+        <>
+            <div>
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <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>
+
+                                        <Field
+                                            validate={[
+                                                minLength(
+                                                    t(
+                                                        "myportal:searchcases-validation-minlength"
+                                                    )
+                                                ),
+                                            ]}
+                                            className="govuk-input govuk-!-width-two-thirds"
+                                            component={RenderTextfield}
+                                            id="caseRef"
+                                            name="caseRef"
+                                            type="text"
+                                            aria-describedby="caseRef-hint"
+                                            hint1={t(
+                                                "myportal:searchcases-card-search-hint"
+                                            )}
+                                            hint2={t(
+                                                "myportal:searchcases-card-search-example-label-1"
+                                            )}
+                                            hint3={t(
+                                                "myportal:searchcases-card-search-example-label-2"
+                                            )}
+                                        />
+
+                                        <Field
+                                            name="appealTypes"
+                                            id="appealTypes"
+                                            component={RenderAppealTypeList}
+                                            optionsObj={appealOptionsObj}
+                                            // validate={[required]}
+                                            label={t("search:appealtype-label")}
+                                            errormsg="Appeal type is required"
+                                        />
+                                        <Field
+                                            name="lpaTypes"
+                                            id="lpaTypes"
+                                            component={RenderLPAList}
+                                            optionsObj={lpaOptionsObj}
+                                            //validate={[required]}
+                                            label={t("search:lpa-label")}
+                                            errormsg="Local authority is required"
+                                        />
+                                        {/* <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>
+                                </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"
+                                >
+                                    {t("common:search-button")}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </form>
+            </div>
+            {/* <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-searching")}
+            /> */}
+        </>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        LPAData: state.LPAData,
+        //form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+const selector = formValueSelector("advancedSearchForm"); // <-- same as form name
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "advancedSearchForm",
+        destroyOnUnmount: false,
+    })(AdvancedSearch)
+);

components/myportal/awaitingsubmission.js

@@ -13,7 +13,7 @@ const AwaitingSubmission = (props) => {
     const { setCurrentView } = props;
 
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:awatitingsubmission-card-title")}
@@ -23,9 +23,14 @@ const AwaitingSubmission = (props) => {
                         showTopThree={
                             props.awaitingSubmission.awaitingSubmission
                         }
+                        showDetails={
+                            props.awaitingSubmission.awaitingSubmissionDetails
+                        }
                         topThreeType={"awaitingSubmission"}
                     />
                 </div>
+                {props.awaitingSubmission.awaitingSubmission["@odata.count"] >
+                    3 && (
                     <div className="cardVieAll">
                         <Link href="/myportal/viewall">
                             <a
@@ -41,6 +46,7 @@ const AwaitingSubmission = (props) => {
                             </a>
                         </Link>
                     </div>
+                )}
             </div>
         </div>
     );

components/myportal/awaitingsubmissionfromblob.js

@@ -0,0 +1,252 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import TopThree from "./topthree";
+import { connect } from "react-redux";
+import {
+    setCurrentView,
+    setCurrentReference,
+} from "../../store/currentView/action";
+import jsonpath from "jsonpath";
+import transLookup from "../../data/lookuptranslations.json";
+import {
+    deleteAwaitingSubmissionsFromBlob,
+    getAwaitingSubmissionFromBlobProxy,
+} from "../../actions";
+import { setAwaitingSubmissionFromBlob } from "../../store/awaitingSubmission/action";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
+import { getFormCollectionByID } from "../../components/utils";
+
+const AwaitingSubmissionFromBlob = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { setCurrentView } = props;
+
+    let topthreeRow = [];
+    let showTopThreeArr = props.awaitingSubmissionFromBlob.value;
+    let showTopThreeArrDets = props.awaitingSubmissionFromBlob.case;
+
+    const deleteCaseItem = (containerID, caseID) => {
+        let cookies = parseCookies();
+        console.log("sssss", containerID, caseID);
+
+        deleteAwaitingSubmissionsFromBlob(containerID, caseID)
+            .then((data) => {
+                return data;
+            })
+            .then(() => {
+                getAwaitingSubmissionFromBlobProxy(containerID).then((data) => {
+                    props.setAwaitingSubmissionFromBlob(data);
+                });
+            });
+    };
+
+    let topThreeOnlyArr = showTopThreeArr.slice(0, 3);
+    //console.log(showTopThreeArr);
+    Object.keys(topThreeOnlyArr).map((key, index) => {
+        //console.log(key, showTopThreeArr[key].pinswg_appealcasetype);
+        //console.log("subsssss:", showTopThreeArr[key]);
+        let urlname = getFormCollectionByID(
+            showTopThreeArr[key].pinswg_appealcasetype
+        ).UrlName;
+
+        topthreeRow.push(
+            <div className="cardModuleItem" key={index}>
+                <div className="cardModuleDetails">
+                    <div className="cardModuleReference">
+                        <b>{t("myportal:case-reference")}:</b>
+
+                        <Link
+                            href={
+                                router.locale == "cy"
+                                    ? "/fymhorth/parhauigyflwyno"
+                                    : "/myportal" +
+                                      "/" +
+                                      urlname +
+                                      "?lpa=" +
+                                      showTopThreeArr[key][
+                                          "_pinswg_associatedlpa_value"
+                                      ] +
+                                      "&apt=" +
+                                      showTopThreeArr[key]
+                                          .pinswg_appealcasetype +
+                                      "&casereference=" +
+                                      showTopThreeArr[key].pinswg_name +
+                                      "&inid=" +
+                                      showTopThreeArr[key].incidentid
+                            }
+                        >
+                            <a
+                                className="govuk-link--no-underline"
+                                data-id={index}
+                                onClick={() => {
+                                    props.setCurrentReference({
+                                        "currentReference":
+                                            showTopThreeArr[key].ticketnumber,
+
+                                        "currentType": "awaitingSubmission",
+
+                                        "incidentid":
+                                            showTopThreeArr[key].incidentid,
+
+                                        "appealType":
+                                            showTopThreeArr[key]
+                                                .pinswg_appealcasetype,
+                                    });
+                                }}
+                            >
+                                {showTopThreeArr[index].pinswg_name}
+                            </a>
+                        </Link>
+                    </div>
+                    <div>
+                        <b>{t("myportal:appeal-type-label")}:</b>{" "}
+                        {
+                            getFormCollectionByID(
+                                showTopThreeArr[key].pinswg_appealcasetype
+                            ).value
+                        }
+                    </div>
+                    <div className="carModuleAddress">
+                        <b>{t("myportal:case-address")}:</b>{" "}
+                        {_.isEmpty(showTopThreeArr)
+                            ? t("myportal:case-address-not-entered")
+                            : _.isEmpty(showTopThreeArr[index])
+                            ? t("myportal:case-address-not-entered")
+                            : _.isEmpty(showTopThreeArr[index])
+                            ? t("myportal:case-address-not-entered")
+                            : _.isEmpty(
+                                  showTopThreeArr[index].pinswg_siteaddressline1
+                              )
+                            ? t("myportal:case-address-not-entered")
+                            : showTopThreeArr[index].pinswg_siteaddressline1 +
+                              (!_.isEmpty(
+                                  showTopThreeArr[index].pinswg_siteaddressline2
+                              )
+                                  ? ", " +
+                                    showTopThreeArr[index]
+                                        .pinswg_siteaddressline2
+                                  : "") +
+                              (!_.isEmpty(
+                                  showTopThreeArr[index].pinswg_siteaddresstown
+                              )
+                                  ? ", " +
+                                    showTopThreeArr[index]
+                                        .pinswg_siteaddresstown
+                                  : "")}
+                    </div>
+                    {showTopThreeArrDets[key].pinswg_appellantagent != null && (
+                        <div>
+                            {showTopThreeArrDets[key].pinswg_appellantagent !=
+                                846040000 && (
+                                <b>{t("myportal:raised-by-label")}: </b>
+                            )}
+                            {showTopThreeArrDets[key].pinswg_appellantagent !=
+                                846040000 &&
+                                (showTopThreeArrDets[key]
+                                    .pinswg_agentcompanyname != null &&
+                                    showTopThreeArrDets[key]
+                                        .pinswg_agentcompanyname + ", ") +
+                                    showTopThreeArrDets[key]
+                                        .pinswg_agentfirstname +
+                                    " " +
+                                    showTopThreeArrDets[key]
+                                        .pinswg_agentlastname}
+                        </div>
+                    )}
+                    {showTopThreeArrDets[key].pinswg_appellantfirstname !=
+                        null && (
+                        <div>
+                            <b>{t("myportal:on-behalf-of-label")}: </b>
+                            {showTopThreeArrDets[key]
+                                .pinswg_appellantfirstname +
+                                " " +
+                                showTopThreeArrDets[key]
+                                    .pinswg_appellantlastname}
+                        </div>
+                    )}
+                    {router.locale == "cy"
+                        ? jsonpath.query(
+                              transLookup,
+                              '$..[?(@.value=="' +
+                                  showTopThreeArrDets[key]["pinswg_lpaname"] +
+                                  '")].value_cy'
+                          )
+                        : showTopThreeArrDets[key]["pinswg_lpaname"] || ""}
+                </div>
+                <div className="">
+                    <a
+                        href="#"
+                        className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
+                        onClick={() => {
+                            event.preventDefault();
+                            deleteCaseItem(
+                                props.containerID,
+                                showTopThreeArr[key].pinswg_name
+                            );
+                            alert(
+                                "You have deleted case " +
+                                    showTopThreeArr[key].pinswg_name
+                            );
+                        }}
+                    >
+                        &mdash;
+                    </a>
+                </div>
+            </div>
+        );
+    });
+
+    return (
+        <div className="card" id="casescomment-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("myportal:awatitingsubmission-card-title")}
+                </h3>
+                <div className="cardModuleContainer">
+                    {topthreeRow}
+                    {/* <TopThree
+                        showTopThree={props.awaitingSubmissionFromBlob}
+                        showDetails={props.awaitingSubmissionFromBlob}
+                        topThreeType={"awaitingSubmissionFromBlob"}
+                    /> */}
+                </div>
+                {props.awaitingSubmissionFromBlob["@odata.count"] > 3 && (
+                    <div className="cardVieAll">
+                        <Link href="/myportal/viewall">
+                            <a
+                                className="govuk-link--no-underline"
+                                onClick={() => {
+                                    setCurrentView({
+                                        "viewName": "Awaiting Submission",
+                                        "viewKey": "awaitingSubmissionDetails",
+                                    });
+                                }}
+                            >
+                                {t("myportal:viewall-link")}
+                            </a>
+                        </Link>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentView: (currentView) => {
+            dispatch(setCurrentView(currentView));
+        },
+        setCurrentReference: (currentReference) => {
+            dispatch(setCurrentReference(currentReference));
+        },
+        setAwaitingSubmissionFromBlob: (awaitingSubmission) => {
+            dispatch(setAwaitingSubmissionFromBlob(awaitingSubmission));
+        },
+    };
+};
+
+export default connect(null, mapDispatchToProps)(AwaitingSubmissionFromBlob);

components/myportal/dns.js

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import LoadingOverlay from "react-loading-overlay";
+
+export default function Dns() {
+    let { t } = useTranslation();
+    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+
+    const router = useRouter();
+    const { locale } = router;
+
+    // let spinnerState = () => {
+    //     showSpinnerState == true
+    //         ? setShowSpinnerState(false)
+    //         : setShowSpinnerState(true);
+    // };
+    return (
+        <div className="card" id="casesearch-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">
+                    {t("home:dns-card-title")}
+                </h3>
+                <div className="govuk-form-group">
+                    <p className="govuk-body-s">
+                        {t("home:dns-card-paragraph")}
+                    </p>
+                </div>
+                <div className="govuk-form-group">
+                    <Link
+                        href={
+                            router.locale == "cy"
+                                ? "/fymhorth/ceisiadaudns"
+                                : "/myportal/dnsapplications"
+                        }
+                    >
+                        <a
+                            className="govuk-button withChevron govuk-button-cta"
+                            // onClick={() => {
+                            //     spinnerState();
+                            // }}
+                        >
+                            {t("home:dns-card-button")}
+                        </a>
+                    </Link>
+                </div>
+            </div>
+            {/* <LoadingOverlay
+                active={showSpinnerState}
+                spinner
+                text={t("common:spinner-loading")}
+            /> */}
+        </div>
+    );
+}

components/myportal/makenewappeal.js

@@ -8,7 +8,7 @@ export default function MakeNewAppeal() {
     const router = useRouter();
     const { locale } = router;
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h2 className="govuk-heading-s">
                     {t("myportal:makenewappeal-card-title")}
@@ -20,11 +20,7 @@ export default function MakeNewAppeal() {
                     {t("myportal:makenewappeal-card-paragraph-two")}
                 </p>
                 <div>
-                    <Link
+                    <Link href={"/newappeal"}>
-                        href={
-                            router.locale == "cy" ? "/apelnewydd" : "/newappeal"
-                        }
-                    >
                         <a className="govuk-button">
                             {t("myportal:makenewappeal-card-button-label")}
                         </a>

components/myportal/mycases.js

@@ -12,7 +12,7 @@ const MyCases = (props) => {
     const { locale } = router;
     const { setCurrentView } = props;
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:mycases-card-title")}
@@ -24,9 +24,9 @@ const MyCases = (props) => {
                         topThreeType={"myCases"}
                     />
                 </div>
-                {props.myCases.myCases["@odata.count"] != 0 && (
+                {props.myCases.myCases["@odata.count"] > 3 && (
                     <div className="cardVieAll">
-                        <Link href="/myportal/viewall" shallow>
+                        <Link href="/myportal/viewall">
                             <a
                                 className="govuk-link--no-underline"
                                 onClick={() => {

components/myportal/myrepresentations.js

@@ -13,7 +13,7 @@ const MyRepresentations = (props) => {
     const { setCurrentView } = props;
 
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:myrepresentations-card-title")}
@@ -21,12 +21,15 @@ const MyRepresentations = (props) => {
                 <div className="cardModuleContainer">
                     <TopThree
                         showTopThree={props.myRepresentations.myRepresentations}
+                        showDetails={
+                            props.myRepresentations.myRepresentationsDetails
+                        }
                         topThreeType={"myRepresentations"}
                     />
                 </div>
 
-                {props.myRepresentations.myRepresentations["@odata.count"] !=
+                {props.myRepresentations.myRepresentations["@odata.count"] >
-                    0 && (
+                    3 && (
                     <div className="cardVieAll">
                         <Link href="/myportal/viewall" shallow>
                             <a

components/myportal/searchcases.js

@@ -98,7 +98,7 @@ let CaseSearch = (props) => {
 
     return (
         <>
-            <div className="card card-3" id="casesearch-card">
+            <div className="card" id="casesearch-card">
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
                     <div className="card-body">
                         <h3 className="heading-small card-heading">

components/myportal/topthree.js

@@ -9,12 +9,19 @@ import {
     getWatchedCasesProxy,
     getPortalModuleDetailsProxy,
     deleteWatchedCases,
+    deleteAwaitingSubmissions,
+    getAwaitingSubmissionProxy,
 } from "../../actions";
-
+import jsonpath from "jsonpath";
+import transLookup from "../../data/lookuptranslations.json";
 import {
     setWatchedCases,
     setWatchedCasesDetails,
 } from "../../store/watchedCases/action";
+import {
+    setAwaitingSubmission,
+    setAwaitingSubmissionDetails,
+} from "../../store/awaitingSubmission/action";
 import { getFormCollectionByID } from "../../components/utils";
 
 const TopThree = (props) => {
@@ -26,6 +33,8 @@ const TopThree = (props) => {
         topThreeType,
         setWatchedCases,
         setWatchedCasesDetails,
+        setAwaitingSubmission,
+        setAwaitingSubmissionDetails,
     } = props;
 
     const router = useRouter();
@@ -37,6 +46,7 @@ const TopThree = (props) => {
 
     const deleteItem = (caseID, topThreeType) => {
         let cookies = parseCookies();
+        //console.log("sssss", caseID, topThreeType);
         topThreeType == "watchedCases" &&
             deleteWatchedCases(caseID)
                 .then((data) => data)
@@ -48,6 +58,28 @@ const TopThree = (props) => {
                             });
                     });
                 });
+
+        topThreeType == "awaitingSubmission" &&
+            deleteAwaitingSubmissions(caseID)
+                .then((data) => {
+                    return data;
+                })
+                .then(() => {
+                    getAwaitingSubmissionProxy(cookies.pinsUser).then(
+                        (data) => {
+                            setAwaitingSubmission(data),
+                                getDetails(data, "awaitingSubmission").then(
+                                    (data) => {
+                                        // console.log(
+                                        //     "submission get details:",
+                                        //     data
+                                        // );
+                                        setAwaitingSubmissionDetails(data);
+                                    }
+                                );
+                        }
+                    );
+                });
     };
 
     const getDetails = (resultsObj, detailsType) => {
@@ -94,6 +126,7 @@ const TopThree = (props) => {
                 return objArr.ticketnumber;
                 break;
             case "awaitingSubmission":
+                return objArr.ticketnumber;
                 break;
             default:
             // code block
@@ -106,13 +139,30 @@ const TopThree = (props) => {
             <div className="cardModuleItem" key={index}>
                 <div className="cardModuleDetails">
                     <div className="cardModuleReference">
-                        <b>{t("myportal:case-reference")}:</b>{" "}
+                        <b>{t("myportal:case-reference")}:</b>
                         <Link
                             href={
-                                topThreeType == "awaitingSubmission"
+                                topThreeType == "awaitingSubmission" ||
+                                topThreeType == "awaitingSubmissionFromBlob"
                                     ? router.locale == "cy"
-                                        ? "/fymhorth/cynrychiolaeth"
+                                        ? "/fymhorth/parhauigyflwyno"
-                                        : "/myportal/representation"
+                                        : "/myportal" +
+                                          "/" +
+                                          getFormCollectionByID(
+                                              showTopThreeArr[key]
+                                                  .pinswg_appealcasetype
+                                          ).UrlName +
+                                          "?lpa=" +
+                                          showTopThreeArr[key][
+                                              "_pinswg_associatedlpa_value"
+                                          ] +
+                                          "&apt=" +
+                                          showTopThreeArr[key]
+                                              .pinswg_appealcasetype +
+                                          "&casereference=" +
+                                          showTopThreeArr[key].pinswg_title +
+                                          "&inid=" +
+                                          showTopThreeArr[key].incidentid
                                     : router.locale == "cy"
                                     ? "/fymhorth/achos"
                                     : "/myportal/case"
@@ -156,11 +206,22 @@ const TopThree = (props) => {
                                           ]
                                     : showTopThreeArr[key][
                                           "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
-                                      ]}
+                                      ]}{" "}
                             </a>
                         </Link>
                     </div>
-                    {topThreeType != "awaitingSubmission" ? (
+                    {/* {(topThreeType == "awaitingSubmission" ||
+                        topThreeType == "watchedCases") && ( */}
+                    <div>
+                        <b>{t("myportal:appeal-type-label")}:</b>{" "}
+                        {
+                            showTopThreeArr[key][
+                                "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                            ]
+                        }
+                    </div>
+                    {/* )} */}
+                    {/* {topThreeType != "awaitingSubmission" ? ( */}
                     <div className="carModuleAddress">
                         <b>{t("myportal:case-address")}:</b>{" "}
                         {_.isEmpty(showDetails)
@@ -175,22 +236,71 @@ const TopThree = (props) => {
                               )
                             ? t("myportal:case-address-not-entered")
                             : showDetails[index].value[0]
-                                      .pinswg_siteaddressline1}
+                                  .pinswg_siteaddressline1 +
+                              (!_.isEmpty(
+                                  showDetails[index].value[0]
+                                      .pinswg_siteaddressline2
+                              )
+                                  ? ", " +
+                                    showDetails[index].value[0]
+                                        .pinswg_siteaddressline2
+                                  : "") +
+                              (!_.isEmpty(
+                                  showDetails[index].value[0]
+                                      .pinswg_siteaddresstown
+                              )
+                                  ? ", " +
+                                    showDetails[index].value[0]
+                                        .pinswg_siteaddresstown
+                                  : "")}
+                    </div>
+
+                    {showTopThreeArr[key].pinswg_appellantagent != null && (
+                        <div>
+                            {showTopThreeArr[key].pinswg_appellantagent !=
+                                846040000 && (
+                                <b>{t("myportal:raised-by-label")}</b>
+                            )}
+                            {showTopThreeArr[key].pinswg_appellantagent !=
+                                846040000 &&
+                                (showTopThreeArr[key].pinswg_agentcompanyname !=
+                                    null &&
+                                    showTopThreeArr[key]
+                                        .pinswg_agentcompanyname + ", ") +
+                                    showTopThreeArr[key].pinswg_agentfirstname +
+                                    " " +
+                                    showTopThreeArr[key].pinswg_agentlastname}
+                        </div>
+                    )}
+                    {showTopThreeArr[key].pinswg_appellantfirstname != null && (
+                        <div>
+                            <b>{t("myportal:on-behalf-of-label")}: </b>
+                            {showTopThreeArr[key].pinswg_appellantfirstname +
+                                " " +
+                                showTopThreeArr[key].pinswg_appellantlastname}
                         </div>
-                    ) : (
-                        ""
                     )}
 
+                    {router.locale == "cy"
+                        ? jsonpath.query(
+                              transLookup,
+                              '$..[?(@.value=="' +
+                                  showTopThreeArr[key][
+                                      "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
+                                  ] +
+                                  '")].value_cy'
+                          )
+                        : showTopThreeArr[key][
+                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
+                          ] || ""}
                     {topThreeType == "awaitingSubmission" ? (
                         <div className="carModuleAddress">
-                            Make Representation on Case Incomplete, not
+                            Case Incomplete, not submitted
-                            submitted
                         </div>
                     ) : (
                         ""
                     )}
                 </div>
-
                 {topThreeType == "watchedCases" && (
                     <div className="">
                         <a
@@ -214,6 +324,27 @@ const TopThree = (props) => {
                         </a>
                     </div>
                 )}
+                {topThreeType == "awaitingSubmission" && (
+                    <div className="">
+                        <a
+                            href="#"
+                            className=" cardModuleRemoveCase govuk-link govuk-link--no-underline govuk-link--inverse "
+                            onClick={() => {
+                                event.preventDefault();
+                                deleteItem(
+                                    showTopThreeArr[key].incidentid,
+                                    "awaitingSubmission"
+                                );
+                                alert(
+                                    "You have deleted case " +
+                                        showTopThreeArr[key].ticketnumber
+                                );
+                            }}
+                        >
+                            &mdash;
+                        </a>
+                    </div>
+                )}
             </div>
         );
     });
@@ -255,6 +386,12 @@ const mapDispatchToProps = (dispatch) => {
         setWatchedCasesDetails: (watchedCasesDetails) => {
             dispatch(setWatchedCasesDetails(watchedCasesDetails));
         },
+        setAwaitingSubmission: (awaitingSubmission) => {
+            dispatch(setAwaitingSubmission(awaitingSubmission));
+        },
+        setAwaitingSubmissionDetails: (awaitingSubmissionDetails) => {
+            dispatch(setAwaitingSubmissionDetails(awaitingSubmissionDetails));
+        },
     };
 };
 

components/myportal/uploadFile.js

@@ -0,0 +1,462 @@
+import Link from "next/link";
+import { useState, useMemo } from "react";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import LoadingOverlay from "react-loading-overlay";
+import DropzoneComponent from "../newappeal/fileupload";
+import { Field, reduxForm } from "redux-form";
+import { connect } from "react-redux";
+import Dropzone, { useDropzone } from "react-dropzone";
+import { uploadFiles } from "../../actions";
+import { getContainers } from "../../actions/azurestorage";
+
+const required = (errorMsg) => (value) =>
+    value || typeof value === "number" ? undefined : errorMsg;
+
+export const minLength = (errorMsg) => (value) =>
+    value && value.length < 4
+        ? errorMsg //`Must be ${min} characters or more`
+        : undefined;
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    hint1,
+    hint2,
+    hint3,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div className="govuk-form-group">
+                <div id="basicSearch-hint" className="govuk-hint ">
+                    <label
+                        className="govuk-label "
+                        htmlFor={id}
+                        id={id + "_label"}
+                    >
+                        <span className="govuk-body-s">{hint1}</span>
+                    </label>
+                </div>
+
+                <div>
+                    <input
+                        {...input}
+                        className={className}
+                        name={name}
+                        id={id}
+                    />
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message govuk-form-group--error"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {error}
+                        </span>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const baseStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
+    borderWidth: 2,
+    borderRadius: 2,
+    borderColor: "#eeeeee",
+    borderStyle: "dashed",
+    backgroundColor: "#fafafa",
+    color: "#bdbdbd",
+    transition: "border .3s ease-in-out",
+    width: "80%",
+    margin: "20px auto 30px",
+};
+
+const activeStyle = {
+    borderColor: "#2196f3",
+};
+
+const acceptStyle = {
+    borderColor: "#00e676",
+};
+
+const rejectStyle = {
+    borderColor: "#ff1744",
+};
+const RenderFileUpload = (field) => {
+    const files = field.input.value;
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            // ...(isDragActive ? activeStyle : {}),
+            // ...(isDragAccept ? acceptStyle : {}),
+            // ...(isDragReject ? rejectStyle : {}),
+        }),
+        []
+        // [isDragActive, isDragReject, isDragAccept]
+    );
+    const [filesList, setFilesList] = useState([]);
+
+    const thumbs = filesList.map((file) => (
+        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
+            <img src={file.preview} alt={file.name} width="50" /> -{" "}
+            <span className="govuk-body">
+                {file.name} ({file.size / 1024}kb)
+            </span>
+        </div>
+    ));
+
+    function bytesToSize(bytes) {
+        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        if (bytes == 0) return "0 Byte";
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
+    }
+
+    const getThumbnailIcon = (fileObj, fileType) => {
+        switch (fileType) {
+            case "text/html":
+                return "/assets/images/documenttypes/html.png";
+                break;
+            case "text/plain":
+                return "/assets/images/documenttypes/txt.png";
+                break;
+            case "application/msword":
+                return "/assets/images/documenttypes/doc.png";
+                break;
+            case "application/pdf":
+                return "/assets/images/documenttypes/pdf.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+                return "/assets/images/documenttypes/docx.png";
+                break;
+            case "text/csv":
+                return "/assets/images/documenttypes/csv.png";
+                break;
+            case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+                return "/assets/images/documenttypes/xlsx.png";
+                break;
+
+            case "application/zip":
+                return "/assets/images/documenttypes/zip.png";
+                break;
+            case "image/jpeg":
+            case "image/png":
+                return URL.createObjectURL(fileObj);
+                break;
+        }
+    };
+
+    const getDocumentType = (docCode) => {
+        switch (docCode) {
+            case "000001":
+                return "000001";
+                break;
+            case "000002":
+                return "000002";
+                break;
+            case "000003":
+                return "000003";
+                break;
+            case "000004":
+                return "000004";
+                break;
+            case "000005":
+                return "000005";
+                break;
+            case "000006":
+                return "000006";
+                break;
+            case "000007":
+                return "000007";
+                break;
+            case "000008":
+                return "000008";
+                break;
+            case "000009":
+                return "000009";
+                break;
+            case "000010":
+                return "000010";
+                break;
+            case "000011":
+                return "000011";
+                break;
+            case "000012":
+                return "000012";
+                break;
+            case "000013":
+                return "000013";
+                break;
+            case "000014":
+                return "000014";
+                break;
+            case "000015":
+                return "000015";
+                break;
+
+            default:
+                return "000000";
+        }
+    };
+
+    return (
+        <div>
+            <Dropzone
+                // onDrop={(filesToUpload, e) =>
+                //     field.input.onChange(filesToUpload)
+                // }
+
+                onDrop={(filesToUpload, e) => {
+                    console.log(field.ticketnumber, field.documentTypeCode);
+                    const renamedAcceptedFiles = filesToUpload.map(
+                        (file) =>
+                            new File(
+                                [file],
+                                `${field.ticketnumber}_${getDocumentType(
+                                    field.documentTypeCode
+                                )}_${file.name}`,
+                                {
+                                    type: file.type,
+                                }
+                            )
+                    );
+                    field.input.onChange(renamedAcceptedFiles);
+                }}
+            >
+                {({ getRootProps, getInputProps }) => (
+                    <div className="govuk-grid-row">
+                        <div className="govuk-form-group"></div>
+                        <section className="container">
+                            <div {...getRootProps({ style })}>
+                                {" "}
+                                <input {...getInputProps()} />
+                                <div>Drag and drop your files here.</div>
+                            </div>
+                            <aside>{thumbs}</aside>
+                        </section>
+                    </div>
+                )}
+            </Dropzone>
+
+            {field.meta.touched && field.meta.error && (
+                <span className="error">{field.meta.error}</span>
+            )}
+            {files && Array.isArray(files) && (
+                <ul>
+                    {files.map((file, i) => (
+                        <div
+                            key={file.name}
+                            className="govuk-!-margin-bottom-5 fileThumb"
+                        >
+                            <img
+                                src={getThumbnailIcon(file, file.type)}
+                                alt={file.name}
+                                width="50"
+                            />{" "}
+                            {"  "}
+                            <span className="govuk-body govuk-!-padding-left-5">
+                                {file.name} ({bytesToSize(file.size)})
+                            </span>
+                        </div>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+let UploadFile = (props) => {
+    let { t } = useTranslation();
+    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const { handleSubmit, pristine, reset, submitting, formContent } = props;
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const onHandleSubmit = async (values) => {
+        //spinnerState();
+        console.log(values);
+        console.log(formContent);
+        // getContainers();
+
+        var dataObj = Object.assign(values, formContent);
+        var fileObj = dataObj.fileList;
+
+        delete dataObj.fileList;
+
+        const uploadAction = await uploadFiles(dataObj, fileObj).then(
+            (data) => {
+                console.log("hello", data);
+            }
+        );
+        // router.push({
+        //     pathname:
+        //         router.locale == "cy"
+        //             ? "/fymhorth/canlyniadauchwilio"
+        //             : "/myportal/searchresults",
+        //     query: { q: values.basicSearch },
+        //     shallow: true,
+        // });
+    };
+
+    return (
+        <div className="card" id="casesearch-card">
+            <div className="card-body">
+                <h3 className="heading-small card-heading">Upload a file</h3>
+                <div className="govuk-form-group">
+                    <p className="govuk-body-s">reqweqwe eqwe qwe qwe qwe</p>
+                </div>
+                <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    <div className="govuk-form-group">
+                        <Field
+                            validate={[
+                                required(
+                                    t(
+                                        "myportal:searchcases-validation-required"
+                                    )
+                                ),
+                                minLength(
+                                    t(
+                                        "myportal:searchcases-validation-minlength"
+                                    )
+                                ),
+                            ]}
+                            className="govuk-input"
+                            component={RenderTextfield}
+                            id="caseReference"
+                            name="caseReference"
+                            type="text"
+                            aria-describedby="caseReference-hint"
+                            hint1="Case Reference"
+                            value="CAS-00764-L0Q9W2"
+                        />
+                    </div>
+                    <div className="govuk-grid-row">
+                        <Field
+                            name="fileList"
+                            id="fileList"
+                            component={RenderFileUpload}
+                            className="govuk-input govuk-input--width-20"
+                            //validate={[required]}
+                            label={props.label}
+                            errorMsg="Is required"
+                            ticketnumber="CAS-00764-L0Q9W2"
+                        />
+                    </div>
+                    <div className="govuk-form-group">
+                        <button type="submit" className="govuk-button">
+                            Add Files
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+        myCases: state.myCases,
+        watchedCases: state.watchedCases,
+        myRepresentations: state.myRepresentations,
+        awaitingSubmission: state.awaitingSubmission,
+        formContent: {
+            "pinswg_caserecovered": "No",
+            "pinswg_siteaddresspostcode": "Site Address Postcode",
+            "pinswg_inspectorneededonsite": "Yes",
+            "pinswg_sitewithingreenbelt": "No",
+            "pinswg_siteaddressline2": "Site Address Line 2",
+            "pinswg_siteaddressline1": "Site Address Line 1",
+            "pinswg_s106unilateralsubmitted": "No",
+            "modifiedon": "2022-06-28T13:11:34Z",
+            "pinswg_developmentaffectsettingofalisted": "No",
+            "pinswg_planningappeals78id":
+                "57b533aa-43f1-ec11-aade-00224800be9c",
+            "pinswg_name": "CAS-00764-L0Q9W2",
+            "pinswg_whyisinspectorneededonsite": "to be nosey",
+            "pinswg_sitewithinsssi": "No",
+            "pinswg_healthandsafetyissuesonsite": "No",
+            "pinswg_developmentdescriptionchanged": "Yes",
+            "_stageid_value": "126e9c46-d51c-4623-aabf-aa30b34bfa54",
+            "traversedpath": "126e9c46-d51c-4623-aabf-aa30b34bfa54",
+            "createdon": "2022-06-21T09:22:29Z",
+            "timezoneruleversionnumber": 0,
+            "processid": "e4f065a6-157e-42f9-963a-9292d5041509",
+            "pinswg_priornotificationpriorapproval": "No",
+            "pinswg_predeterminedindicator": "No",
+            "pinswg_protectedspecies": "No",
+            "versionnumber": 912609,
+            "pinswg_siteaddresscounty": "Site Address County",
+            "pinswg_procedure": 846040000,
+            "pinswg_dateoflpadecision": "2022-06-22T23:00:00Z",
+            "pinswg_eiarequired": "No",
+            "pinswg_costappliedforindicator": "No",
+            "pinswg_areaofsiteinhectaresdec": 22,
+            "pinswg_detailedeiascreeningrequired": "No",
+            "pinswg_casepublishflag": "No",
+            "pinswg_siteaddresstown": "Site Address Town",
+            "utcconversiontimezonecode": 85,
+            "pinswg_caseworkreason": 846040005,
+            "pinswg_ownershipcertificate": 846040002,
+            "pinswg_lpadecisiononapplicationmade": "Yes",
+            "pinswg_floorspaceinsquaremeters": 111,
+            "_modifiedby_value": "149b3e11-5206-ec11-aac8-00224800be9c",
+            "pinswg_dateofapplication": "2022-06-20T23:00:00Z",
+            "pinswg_incarelatestoca": "No",
+            "_createdby_value": "149b3e11-5206-ec11-aac8-00224800be9c",
+            "pinswg_additionalappealsmade": "No",
+            "statuscode": 1,
+            "pinswg_siteviewablefromroad": "Yes",
+            "_pinswg_localplanningauthority_value":
+                "744c69f4-48da-eb11-aac5-00224800be9c",
+            "pinswg_lpaapplicationreference": "11111weweqweqwe",
+            "pinswg_recovered": "No",
+            "statecode": 0,
+            "pinswg_isfloodingandissue": "No",
+            "pinswg_isthesitewithinanaonb": "No",
+            "_organizationid_value": "01191a4d-105f-eb11-aaba-00224800be9c",
+            "pinswg_developmentdescription": "something to go here",
+            "pinswg_agriculturalholding": 846040000,
+            "_pinswg_planningappeals78ids_value":
+                "50b533aa-43f1-ec11-aade-00224800be9c",
+        },
+        initialValues: {
+            caseReference: "CAS-00764-L0Q9W2",
+        },
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "uploadFileForm",
+        destroyOnUnmount: false,
+        enableReinitialize: true, // this is needed!!
+    })(UploadFile)
+);

components/myportal/viewall.js

@@ -3,6 +3,9 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { setCurrentReference } from "../../store/currentView/action";
 import { connect } from "react-redux";
+import jsonpath from "jsonpath";
+import transLookup from "../../data/lookuptranslations.json";
+import { getFormCollectionByID } from "../../components/utils";
 
 const ViewAllResults = (props) => {
     const {
@@ -18,17 +21,63 @@ const ViewAllResults = (props) => {
     const router = useRouter();
     const { locale } = router;
 
-    var resultsArr = props[currentView.viewKey][currentView.viewKey].value || [
+    var resultsArr =
-        {},
+        currentView.viewKey == "awaitingSubmissionDetails"
-    ];
+            ? props["awaitingSubmission"].awaitingSubmissionDetails.case
+            : props[currentView.viewKey][currentView.viewKey].value || [];
+
+    function formatDates(dateObj) {
+        var dateObj = new Date(dateObj);
+        var dd = String(dateObj.getDate()).padStart(2, "0");
+        var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
+        var yyyy = dateObj.getFullYear();
+
+        return dd + "/" + mm + "/" + yyyy;
+    }
+
+    // console.log(
+    //     currentView.viewKey,
+    //     props[currentView.viewKey],
+    //     props[currentView.viewKey][currentView.viewKey].value
+    // );
+
+    var searchDetailsObj =
+        currentView.viewKey == "awaitingSubmissionDetails"
+            ? props["awaitingSubmission"].awaitingSubmissionDetails.value
+            : props[currentView.viewKey][currentView.viewKey + "Details"] || [];
+
     let resultsRowArr = [];
-    Object.keys(resultsArr).map((key, index) => {
+    resultsArr.map((item, key) => {
+        let detailsObj = jsonpath.query(
+            searchDetailsObj,
+            '$..value[?(@.pinswg_name=="' + item.pinswg_title + '")]'
+        );
+        detailsObj = detailsObj[0];
+
         resultsRowArr.push(
             <div className="govuk-summary-list__row" key={key}>
                 <dd className="govuk-summary-list__value govuk-!-font-size-16  govuk-!-padding-left-2">
                     <Link
                         href={
-                            router.locale == "cy"
+                            currentView.viewKey == "awaitingSubmissionDetails"
+                                ? router.locale == "cy"
+                                    ? "/fymhorth/parhauigyflwyno"
+                                    : "/myportal" +
+                                      "/" +
+                                      getFormCollectionByID(
+                                          resultsArr[key].pinswg_appealcasetype
+                                      ).UrlName +
+                                      "?lpa=" +
+                                      resultsArr[key][
+                                          "_pinswg_associatedlpa_value"
+                                      ] +
+                                      "&apt=" +
+                                      resultsArr[key].pinswg_appealcasetype +
+                                      "&casereference=" +
+                                      resultsArr[key].title +
+                                      "&inid=" +
+                                      resultsArr[key].incidentid
+                                : router.locale == "cy"
                                 ? myportal == true
                                     ? "/fymhorth/achos"
                                     : "/achos"
@@ -42,21 +91,21 @@ const ViewAllResults = (props) => {
                                 setCurrentReference({
                                     "currentReference":
                                         currentView.viewKey != "watchedCases"
-                                            ? resultsArr[index].ticketnumber
+                                            ? resultsArr[key].ticketnumber
-                                            : resultsArr[index][
+                                            : resultsArr[key][
                                                   "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                               ],
 
                                     "currentType": currentView.viewKey,
                                     "incidentid":
                                         currentView.viewKey != "watchedCases"
-                                            ? resultsArr[index].incidentid
+                                            ? resultsArr[key].incidentid
-                                            : resultsArr[index][
+                                            : resultsArr[key][
                                                   "_pinswg_watchedcase_value"
                                               ],
 
                                     "appealType":
-                                        resultsArr[index].pinswg_appealcasetype,
+                                        resultsArr[key].pinswg_appealcasetype,
                                 });
                             }}
                         >
@@ -65,8 +114,8 @@ const ViewAllResults = (props) => {
                             </span>
 
                             {currentView.viewKey != "watchedCases"
-                                ? resultsArr[index].ticketnumber
+                                ? resultsArr[key].ticketnumber
-                                : resultsArr[index][
+                                : resultsArr[key][
                                       "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
                                   ]}
                         </a>
@@ -74,42 +123,225 @@ const ViewAllResults = (props) => {
                 </dd>
                 <dd className="govuk-summary-list__value govuk-!-font-size-16">
                     <span className="results-visually-hidden">
-                        Site Address:{" "}
+                        {t("search:searchresults-site-address-label")}:
                     </span>
-                    {resultsArr[index].address1}
+                    {/* {getFormCollectionByID(appealTypeID).PrimaryIdAttribute ==
-                    <br /> {resultsArr[index].town}
+                    "pinswg_dnsid"
-                    <br />
+                        ? detailsObj.pinswg_projectlocation != null
-                    {resultsArr[index].postcode}
+                            ? detailsObj.pinswg_projectlocation.indexOf(";") < 0
+                                ? detailsObj.pinswg_projectlocation
+                                : router.locale == "cy"
+                                ? detailsObj.pinswg_projectlocation.split(
+                                      ";"
+                                  )[1]
+                                : detailsObj.pinswg_projectlocation.split(
+                                      ";"
+                                  )[0]
+                            : ""
+                        : ""} */}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                    _.has(searchDetailsObj[key], "pinswg_siteaddressline1")
+                        ? searchDetailsObj[key].pinswg_siteaddressline1
+                        : ""}
+
+                    {_.has(detailsObj, "pinswg_siteaddressline1")
+                        ? detailsObj.pinswg_siteaddressline1
+                        : ""}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                        _.has(
+                            searchDetailsObj[key],
+                            "pinswg_siteaddressline1"
+                        ) &&
+                        searchDetailsObj[key].pinswg_siteaddressline1 !=
+                            null && <br />}
+
+                    {_.has(detailsObj, "pinswg_siteaddressline1") &&
+                        detailsObj.pinswg_siteaddressline1 != null && <br />}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                    _.has(searchDetailsObj[key], "pinswg_siteaddressline1")
+                        ? searchDetailsObj[key].pinswg_siteaddressline2
+                        : ""}
+
+                    {_.has(detailsObj, "pinswg_siteaddressline1")
+                        ? detailsObj.pinswg_siteaddressline2
+                        : ""}
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                        _.has(
+                            searchDetailsObj[key],
+                            "pinswg_siteaddressline2"
+                        ) &&
+                        searchDetailsObj[key].pinswg_siteaddressline2 !=
+                            null && <br />}
+
+                    {_.has(detailsObj, "pinswg_siteaddressline2") &&
+                        detailsObj.pinswg_siteaddressline2 != null && <br />}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                    _.has(searchDetailsObj[key], "pinswg_siteaddresstown")
+                        ? searchDetailsObj[key].pinswg_siteaddresstown
+                        : ""}
+
+                    {_.has(detailsObj, "pinswg_siteaddresstown")
+                        ? detailsObj.pinswg_siteaddresstown
+                        : ""}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                        _.has(
+                            searchDetailsObj[key],
+                            "pinswg_siteaddresstown"
+                        ) &&
+                        searchDetailsObj[key].pinswg_siteaddresstown !=
+                            null && <br />}
+
+                    {_.has(detailsObj, "pinswg_siteaddresstown") &&
+                        detailsObj.pinswg_siteaddresstown != null && <br />}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                    _.has(searchDetailsObj[key], "pinswg_siteaddresscounty")
+                        ? searchDetailsObj[key].pinswg_siteaddresscounty
+                        : ""}
+
+                    {_.has(detailsObj, "pinswg_siteaddresscounty")
+                        ? detailsObj.pinswg_siteaddresscounty
+                        : ""}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                        _.has(
+                            searchDetailsObj[key],
+                            "pinswg_siteaddresscounty"
+                        ) &&
+                        searchDetailsObj[key].pinswg_siteaddresscounty !=
+                            null && <br />}
+
+                    {_.has(detailsObj, "pinswg_siteaddresscounty") &&
+                        detailsObj.pinswg_siteaddresscounty != null && <br />}
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                    _.has(searchDetailsObj[key], "pinswg_siteaddresspostcode")
+                        ? searchDetailsObj[key].pinswg_siteaddresspostcode
+                        : ""}
+
+                    {_.has(detailsObj, "pinswg_siteaddresspostcode")
+                        ? detailsObj.pinswg_siteaddresspostcode
+                        : ""}
                 </dd>
                 <dd className="govuk-summary-list__value govuk-!-font-size-16">
                     <span className="results-visually-hidden">
-                        Appellant/Applicant:
+                        {currentView.viewKey == "awaitingSubmissionDetails"
+                            ? t("search:searchresults-created-on-label")
+                            : t("search:searchresults-applicant-label")}
                     </span>
-                    Mr smith
+
-                </dd>
+                    {currentView.viewKey == "awaitingSubmissionDetails"
-                <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                        ? formatDates(item.createdon)
-                    <span className="results-visually-hidden">Authority:</span>
+                        : _.has(detailsObj, [
-                    {
+                              "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue",
-                        resultsArr[index][
+                          ])
+                        ? detailsObj[
+                              "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
+                          ]
+                        : resultsArr[key][
                               "_customerid_value@OData.Community.Display.V1.FormattedValue"
-                        ]
+                          ]}
-                    }
                 </dd>
                 <dd className="govuk-summary-list__value govuk-!-font-size-16">
-                    <span className="results-visually-hidden">Case Type:</span>
+                    <span className="results-visually-hidden">
-                    {
+                        {t("search:searchresults-authority-label")}:
-                        resultsArr[index][
+                    </span>
+
+                    {currentView.viewKey == "awaitingSubmissionDetails" &&
+                    _.has(resultsArr[key], "pinswg_lpaname")
+                        ? router.locale == "cy"
+                            ? jsonpath.query(
+                                  transLookup,
+                                  '$..[?(@.value=="' +
+                                      resultsArr[key].pinswg_lpaname +
+                                      '")].value_cy'
+                              )
+                            : resultsArr[key].pinswg_lpaname || "N/A"
+                        : ""}
+
+                    {_.has(resultsArr[key], [
+                        "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue",
+                    ])
+                        ? router.locale == "cy"
+                            ? jsonpath.query(
+                                  transLookup,
+                                  '$..[?(@.value=="' +
+                                      resultsArr[key][
+                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
+                                      ] +
+                                      '")].value_cy'
+                              )
+                            : resultsArr[key][
+                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
+                              ] || "N/A"
+                        : ""}
+                </dd>
+                <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                    <span className="results-visually-hidden">
+                        {t("search:searchresults-case-type-label")}:
+                    </span>
+
+                    {currentView.viewKey == "awaitingSubmissionDetails"
+                        ? router.locale == "cy"
+                            ? jsonpath.query(
+                                  transLookup,
+                                  '$..[?(@.value=="' +
+                                      getFormCollectionByID(
+                                          item.pinswg_appealcasetype
+                                      ).value +
+                                      '")].value_cy'
+                              )
+                            : getFormCollectionByID(item.pinswg_appealcasetype)
+                                  .value || "N/A"
+                        : router.locale == "cy"
+                        ? jsonpath.query(
+                              transLookup,
+                              '$..[?(@.value=="' +
+                                  item[
                                       "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                        ]
+                                  ] +
-                    }
+                                  '")].value_cy'
+                          )
+                        : item[
+                              "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                          ] || "N/A"}
                 </dd>
                 <dd className="govuk-summary-list__value govuk-!-font-size-16">
-                    <span className="results-visually-hidden">Status:</span>
+                    <span className="results-visually-hidden">
-                    {
+                        {t("search:searchresults-status-label")}:
-                        resultsArr[index][
+                    </span>
+
+                    {currentView.viewKey == "awaitingSubmissionDetails"
+                        ? router.locale == "cy"
+                            ? jsonpath.query(
+                                  transLookup,
+                                  '$..[?(@.statuscode=="' +
+                                      item.statuscode +
+                                      '")].value_cy'
+                              )
+                            : jsonpath.query(
+                                  transLookup,
+                                  '$..[?(@.statuscode=="' +
+                                      item.statuscode +
+                                      '")].value'
+                              ) || "N/A"
+                        : router.locale == "cy"
+                        ? jsonpath.query(
+                              transLookup,
+                              '$..[?(@.value=="' +
+                                  item[
                                       "statuscode@OData.Community.Display.V1.FormattedValue"
-                        ]
+                                  ] +
-                    }
+                                  '")].value_cy'
+                          )
+                        : item[
+                              "statuscode@OData.Community.Display.V1.FormattedValue"
+                          ] || "N/A"}
                 </dd>
             </div>
         );
@@ -120,7 +352,14 @@ const ViewAllResults = (props) => {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
-                        {currentView.viewName}
+                        {currentView.viewKey == "awaitingSubmissionDetails" &&
+                            t("myportal:awatitingsubmission-card-title")}
+                        {currentView.viewKey == "watchedCases" &&
+                            t("myportal:watchedcases-card-title")}
+                        {currentView.viewKey == "myCases" &&
+                            t("myportal:mycases-card-title")}
+                        {currentView.viewKey == "myRepresentations" &&
+                            t("myportal:myrepresentations-card-title")}
                     </h1>
 
                     <dl className="govuk-summary-list govuk-!-margin-bottom-9 results">
@@ -131,9 +370,16 @@ const ViewAllResults = (props) => {
                             <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                 {t("search:searchresults-site-address-label")}
                             </dd>
+                            {currentView.viewKey ==
+                            "awaitingSubmissionDetails" ? (
+                                <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                                    {t("search:searchresults-created-on-label")}{" "}
+                                </dd>
+                            ) : (
                                 <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                     {t("search:searchresults-applicant-label")}
                                 </dd>
+                            )}
                             <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                 {t("search:searchresults-authority-label")}
                             </dd>

components/myportal/watchedcases.js

@@ -13,7 +13,7 @@ const WatchedCases = (props) => {
     const { setCurrentView } = props;
 
     return (
-        <div className="card card-3" id="casescomment-card">
+        <div className="card" id="casescomment-card">
             <div className="card-body">
                 <h3 className="heading-small card-heading">
                     {t("myportal:watchedcases-card-title")}
@@ -21,11 +21,12 @@ const WatchedCases = (props) => {
                 <div className="cardModuleContainer">
                     <TopThree
                         showTopThree={props.watchedCases.watchedCases}
+                        showDetails={props.watchedCases.watchedCasesDetails}
                         topThreeType={"watchedCases"}
                     />
                 </div>
 
-                {props.watchedCases.watchedCases["@odata.count"] != 0 && (
+                {props.watchedCases.watchedCases["@odata.count"] > 3 && (
                     <div className="cardVieAll">
                         <Link href="/myportal/viewall" shallow>
                             <a

components/myportal/youraccount.js

@@ -26,9 +26,8 @@ export default function YourAccount() {
                         </Link>
                     </div>
                 </div>
-            </div>
+
-            <div className="card" id="casescomment-card">
+                {/* <div className="card-body">
-                <div className="card-body">
                     <h3 className="heading-small card-heading">
                         {t("myportal:changepassword-card-title")}
                     </h3>
@@ -44,7 +43,7 @@ export default function YourAccount() {
                             </a>
                         </Link>
                     </div>
-                </div>
+                </div> */}
             </div>
         </>
     );

components/newappeal.js

@@ -1,34 +0,0 @@
-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/aboutyou.js

@@ -0,0 +1,812 @@
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { connect } from "react-redux";
+import { useEffect } from "react";
+import { Field, formValueSelector, reduxForm, change } from "redux-form";
+import {
+    FieldsTranslations,
+    Radiofield,
+    Textfield,
+    MultiLinefield,
+} from "../elements";
+
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    type,
+    errorMsg,
+    disabled,
+    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}
+                    disabled={disabled ? true : false}
+                />
+            </div>
+        </>
+    );
+};
+
+const RenderMultiline = ({
+    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>{" "}
+                        {touched &&
+                            ((error && (
+                                <span>{errorMsg ? errorMsg : error}</span>
+                            )) ||
+                                (warning && <span>{warning}</span>))}
+                    </span>
+                )}
+                <textarea
+                    {...input}
+                    rows={rows}
+                    className={className}
+                ></textarea>
+            </div>
+        </>
+    );
+};
+
+let AboutYou = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        onSubmit,
+        handleSubmit,
+        appellantAgentValue,
+        setFormStep,
+        updateField,
+    } = props;
+
+    const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
+    const appellantAgent =
+        router.locale == "cy" ? ["Apelydd", "Asiant"] : ["Appellant", "Agent"];
+    const contactPref =
+        router.locale == "cy" ? ["Ebost", "Post"] : ["Email", "Post"];
+
+    const required = (value) => (value ? undefined : "Is required");
+    const emailRegex =
+        /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
+
+    const email = (value) =>
+        value && !emailRegex.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 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>
+            </>
+        );
+    };
+
+    const RenderRadio = ({
+        datafieldname,
+        name,
+        label,
+        id,
+        errorMsg,
+        options,
+        input: { onChange, value },
+        meta: { touched, error },
+        ...custom
+    }) => {
+        let { t } = useTranslation();
+        const required = (value) => (value ? undefined : "Required");
+
+        return (
+            <>
+                <div
+                    className={
+                        touched && error
+                            ? "govuk-form-group govuk-form-group--error"
+                            : "govuk-form-group "
+                    }
+                >
+                    <fieldset
+                        className="govuk-fieldset"
+                        aria-describedby={datafieldname + "-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={
+                                custom.inline == false
+                                    ? "govuk-radios govuk-radios--small"
+                                    : "govuk-radios govuk-radios--inline govuk-radios--small"
+                            }
+                        >
+                            {" "}
+                            {custom.hint != false ||
+                                (custom.hint != undefined && (
+                                    <div className="govuk-hint">
+                                        {t(custom.hint)}
+                                    </div>
+                                ))}
+                            {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].split("|")[0]}
+                                        validate={[required]}
+                                        // checked={
+                                        //     value ==
+                                        //     parseInt(options[key].split("|")[0])
+                                        // }
+                                        onChange={(e) => {
+                                            let docListObj =
+                                                custom.documentList;
+                                            if (
+                                                custom.requiredDocumentValue ==
+                                                "Yes"
+                                            ) {
+                                                e.target.value != "846040000"
+                                                    ? (docListObj =
+                                                          Object.assign(
+                                                              docListObj,
+                                                              {
+                                                                  ["documentCheckList_" +
+                                                                  id]:
+                                                                      custom.requiredDocumentLabel,
+                                                              }
+                                                          ))
+                                                    : delete docListObj[
+                                                          "documentCheckList_" +
+                                                              id
+                                                      ];
+                                                custom.setDocumentsList(
+                                                    docListObj
+                                                );
+                                            }
+                                        }}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-radios__label"
+                                        htmlFor={id + "_" + index}
+                                    >
+                                        {t(options[key].split("|")[1])}
+                                    </label>
+                                </div>
+                            ))}
+                        </div>
+                    </fieldset>
+                </div>
+            </>
+        );
+    };
+
+    function Radiofield(props) {
+        const {
+            name,
+            label,
+            datafieldname,
+            parentField,
+            form,
+            formProps,
+            parentFieldShowOnValue,
+            validation,
+        } = props;
+
+        const router = useRouter();
+        const required = (value) => (value ? undefined : "Required");
+        // console.log(props.options);
+
+        const fieldOptions = props.options
+            .slice(1, props.options.length - 1)
+            .split(",");
+
+        //parentFieldShowOnValue
+        var showIfHasParentShowValue = parentField != false;
+        //debugger;
+        // parentField != false &&
+        // !_.isEmpty(formProps[form]) &&
+        // _.has(formProps[form].values, parentField) &&
+        // parentFieldShowOnValue.indexOf(
+        //     formProps[form].values[parentField].toString()
+        // ) > -1;
+
+        (showIfHasParentShowValue == parentField) != false &&
+            showIfHasParentShowValue;
+
+        // console.log(
+        //     datafieldname,
+        //     showIfHasParentShowValue,
+        //     formProps[form].values[parentField]
+        // );
+
+        return (
+            <>
+                {parentField != false ? (
+                    showIfHasParentShowValue && (
+                        <Field
+                            name={name}
+                            datafieldname={datafieldname}
+                            label={label}
+                            options={fieldOptions}
+                            id={name}
+                            validate={[required]}
+                            errorMsg={t("newappeal:select-an-option-label")}
+                            component={RenderRadio}
+                            inline={props.inline}
+                            hint={props.hint}
+                            //validate={eval(validation)}
+                            requiredDocumentLabel={props.requiredDocumentLabel}
+                            requiredDocumentValue={props.requiredDocumentValue}
+                            setDocumentsList={props.setDocumentsList}
+                            documentList={props.documentList}
+                        />
+                    )
+                ) : (
+                    <Field
+                        name={name}
+                        datafieldname={datafieldname}
+                        label={label}
+                        options={fieldOptions}
+                        id={name}
+                        validate={[required]}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                        component={RenderRadio}
+                        inline={props.inline}
+                        hint={props.hint}
+                        //validate={eval(validation)}
+                        requiredDocumentLabel={props.requiredDocumentLabel}
+                        requiredDocumentValue={props.requiredDocumentValue}
+                        setDocumentsList={props.setDocumentsList}
+                        documentList={props.documentList}
+                    />
+                )}
+            </>
+        );
+    }
+    const onHandleSubmit = (values) => {
+        event.preventDefault();
+        console.log(JSON.stringify(values));
+        setFormStep(1);
+    };
+
+    const handlePartialUpdate = () => {
+        if (appellantAgentValue == "846040001") {
+            updateField("caseForm", "pinswg_appellantfirstname", "");
+            updateField("caseForm", "pinswg_appellantlastname", "");
+            updateField("caseForm", "pinswg_appellantemailaddress", "");
+            updateField("caseForm", "pinswg_appellantaddress", "");
+            updateField("caseForm", "pinswg_appellantphonenumber", "");
+        } else {
+            updateField(
+                "caseForm",
+                "pinswg_appellantfirstname",
+                props.initialValues.pinswg_appellantfirstname
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantlastname",
+                props.initialValues.pinswg_appellantlastname
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantemailaddress",
+                props.initialValues.pinswg_appellantemailaddress
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantaddress",
+                props.initialValues.pinswg_appellantaddress
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantphonenumber",
+                props.initialValues.pinswg_appellantphonenumber
+            );
+        }
+    };
+
+    useEffect(() => {
+        handlePartialUpdate();
+    });
+
+    return (
+        <form onSubmit={handleSubmit(onHandleSubmit)}>
+            <Field
+                name={"pinswg_onbehalfof"}
+                id={"pinswg_onbehalfof"}
+                component={RenderTextfield}
+                type="text"
+                className="govuk-input govuk-input--width-20"
+                validate={[required]}
+                label={t("newappeal:about-you-on-behalf-label")}
+            />
+            <div className="govuk-form-group">
+                <details className="govuk-details" data-module="govuk-details">
+                    <summary className="govuk-details__summary">
+                        <span className="govuk-details__summary-text">
+                            {t("newappeal:about-you-who-can-appeal-label")}
+                        </span>
+                    </summary>
+                    <div className="govuk-details__text">
+                        {t("newappeal:about-you-who-can-appeal-paragraph")}
+                    </div>
+                </details>
+            </div>
+
+            <Radiofield
+                name={"pinswg_appellantagent"}
+                datafieldname={"pinswg_appellantagent"}
+                label={t("newappeal:about-you-who-are-you-label")}
+                options="[846040000|newappeal:about-you-who-are-you-label-appellant,846040001|newappeal:about-you-who-are-you-label-agent]"
+                id={"pinswg_appellantagent"}
+                className="govuk-radios__input"
+                validate={"[required]"}
+                errorMsg={t("newappeal:select-an-option-label")}
+            />
+
+            {appellantAgentValue == "846040000" && (
+                <>
+                    <h2 className="govuk-heading-s">
+                        {t("newappeal:about-you-appellant-contact-details")}
+                    </h2>
+                    <Field
+                        name={"[pinswg_appellantfirstname"}
+                        id={"pinswg_appellantfirstname"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-firstname-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_appellantlastname"}
+                        id={"pinswg_appellantlastname"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-lastname-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_appellantaddress"}
+                        id={"pinswg_appellantaddress"}
+                        component={RenderMultiline}
+                        type="textarea"
+                        className="govuk-textarea govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-address-label"
+                        )}
+                        rows={4}
+                    />
+                    <Field
+                        name={"pinswg_appellantemailaddress"}
+                        id={"pinswg_appellantemailaddress"}
+                        component={RenderTextfield}
+                        type="email"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required, email]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-email-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_appellantphonenumber"}
+                        id={"pinswg_appellantphonenumber"}
+                        component={RenderTextfield}
+                        type="number"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required, phoneNumber]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-phone-label"
+                        )}
+                    />
+
+                    <Radiofield
+                        name={"pinswg_contactprefs"}
+                        datafieldname={"pinswg_contactprefs"}
+                        label={t(
+                            "newappeal:about-you-agent-contact-preferences-label"
+                        )}
+                        options="[846040000|newappeal:about-you-agent-contact-preferences-value-email,846040001|newappeal:about-you-agent-contact-preferences-value-post]"
+                        id={"pinswg_contactprefs"}
+                        className="govuk-radios__input"
+                        validate={"[required]"}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                    />
+                    <Radiofield
+                        name={"pinswg_languagepreference"}
+                        datafieldname={"pinswg_languagepreference"}
+                        label={t(
+                            "newappeal:about-you-appellant-language-preferences-label"
+                        )}
+                        options="[846040000|newappeal:about-you-agent-language-preferences-value-english,846040001|newappeal:about-you-agent-language-preferences-value-welsh]"
+                        id={"pinswg_languagepreference"}
+                        className="govuk-radios__input"
+                        validate={"[required]"}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                    />
+                </>
+            )}
+            {appellantAgentValue == "846040001" && (
+                <>
+                    <h2 className="govuk-heading-s">
+                        {t("newappeal:about-you-appellant-contact-details")}
+                    </h2>
+                    <Field
+                        name={"pinswg_appellantfirstname"}
+                        id={"appellantfirstname"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-firstname-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_appellantlastname"}
+                        id={"pinswg_appellantlastname"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-lastname-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_appellantaddress"}
+                        id={"pinswg_appellantaddress"}
+                        component={RenderMultiline}
+                        type="textarea"
+                        className="govuk-textarea govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-address-label"
+                        )}
+                        rows={4}
+                    />
+                    <Field
+                        name={"pinswg_appellantemailaddress"}
+                        id={"pinswg_appellantemailaddress"}
+                        component={RenderTextfield}
+                        type="email"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-email-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_appellantphonenumber"}
+                        id={"pinswg_appellantphonenumber"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required, phoneNumber]}
+                        label={t(
+                            "newappeal:about-you-appellant-contact-details-phone-label"
+                        )}
+                    />
+                    <h2 className="govuk-heading-s">
+                        {t("newappeal:about-you-agent-contact-details")}
+                    </h2>{" "}
+                    <Field
+                        name={"pinswg_agentcompanyname"}
+                        id={"pinswg_agentcompanyname"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-agent-contact-details-companyname-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_agentfirstname"}
+                        id={"pinswg_agentfirstname"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-agent-contact-details-firstname-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_agentlastname"}
+                        id={"pinswg_agentlastname"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-agent-contact-details-lastname-label"
+                        )}
+                    />{" "}
+                    <Field
+                        name={"pinswg_agentaddress"}
+                        id={"pinswg_agentaddress"}
+                        component={RenderMultiline}
+                        type="textarea"
+                        className="govuk-textarea govuk-input--width-20"
+                        validate={[required]}
+                        label={t(
+                            "newappeal:about-you-agent-contact-details-address-label"
+                        )}
+                        rows={4}
+                    />
+                    <Field
+                        name={"pinswg_agentemailaddress"}
+                        id={"pinswg_agentemailaddress"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required, email]}
+                        label={t(
+                            "newappeal:about-you-agent-contact-details-email-label"
+                        )}
+                    />
+                    <Field
+                        name={"pinswg_agentphonenumber"}
+                        id={"pinswg_agentphonenumber"}
+                        component={RenderTextfield}
+                        type="number"
+                        className="govuk-input govuk-input--width-20"
+                        validate={[required, phoneNumber]}
+                        label={t(
+                            "newappeal:about-you-agent-contact-details-phone-label"
+                        )}
+                    />
+                    <Radiofield
+                        name={"pinswg_contactprefs"}
+                        datafieldname={"pinswg_contactprefs"}
+                        label={t(
+                            "newappeal:about-you-agent-contact-preferences-label"
+                        )}
+                        options="[846040000|newappeal:about-you-agent-contact-preferences-value-email,846040001|newappeal:about-you-agent-contact-preferences-value-post]"
+                        id={"pinswg_contactprefs"}
+                        className="govuk-radios__input"
+                        validate={[required]}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                    />
+                    <Radiofield
+                        name={"pinswg_languagepreference"}
+                        datafieldname={"pinswg_languagepreference"}
+                        label={t(
+                            "newappeal:about-you-agent-language-preferences-label"
+                        )}
+                        options="[846040000|newappeal:about-you-agent-language-preferences-value-english,846040001|newappeal:about-you-agent-language-preferences-value-welsh]"
+                        id={"pinswg_languagepreference"}
+                        className="govuk-radios__input"
+                        validate={[required]}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                    />
+                </>
+            )}
+
+            <button
+                type="submit"
+                className="govuk-button"
+                data-module="govuk-button"
+            >
+                {t("common:continue-button")}
+            </button>
+        </form>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+
+        initialValues: {
+            pinswg_appellantfirstname:
+                state.accountDetails.accountDetails.firstname,
+            pinswg_appellantlastname:
+                state.accountDetails.accountDetails.lastname,
+            pinswg_appellantemailaddress:
+                state.accountDetails.accountDetails.emailaddress1,
+            pinswg_appellantaddress:
+                state.accountDetails.accountDetails.address1_composite,
+            pinswg_appellantphonenumber:
+                state.accountDetails.accountDetails.telephone1,
+        },
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateField: (form, field, newValue) =>
+            dispatch(change(form, field, newValue)),
+    };
+};
+
+// AboutYou = reduxForm({
+//     form: "caseForm", // a unique identifier for this form
+//     destroyOnUnmount: false,
+// })(AboutYou);
+
+const selector = formValueSelector("caseForm"); // <-- same as form name
+
+AboutYou = connect((state) => {
+    // can select values individually
+    const appellantAgentValue = selector(state, "pinswg_appellantagent");
+
+    return {
+        appellantAgentValue,
+    };
+})(AboutYou);
+
+//export default AboutYou;
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "caseForm",
+        enableReinitialize: true, // this is needed!!
+
+        destroyOnUnmount: false,
+    })(AboutYou)
+);

components/newappeal/advertapplication.js

@@ -1,27 +0,0 @@
-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

@@ -36,6 +36,9 @@ export default function BuildField(props) {
             case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
                 return <>{fieldValue}</>;
                 break;
+            case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return <>{fieldValue}</>;
+                break;
             case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
                 return <>{fieldValue}</>;
                 break;
@@ -55,8 +58,12 @@ export default function BuildField(props) {
             case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
                 return <>{fieldValue}</>;
                 break;
+            case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
+                return <> docs {fieldValue}</>;
+                break;
+
             default:
-                return <>{fieldValue}</>;
+                return <>ss{fieldValue}</>;
         }
     };
 

components/newappeal/buildcheckrow.js

@@ -6,6 +6,11 @@ import jsonpath from "jsonpath";
 import BuildCheckField from "./buildCheckfield";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import fieldLookup from "../../data/crmfieldlookuptranslations.json";
+import {
+    getFormCollectionByID,
+    getPickListLabel,
+    getRadioLabel,
+} from "../../components/utils";
 
 import {
     setCaseReference,
@@ -90,37 +95,107 @@ let BuildCheckRow = (props) => {
                             "')]"
                     );
 
-                    if (isRequiredField[0].RequiredLevel.Value != "None") {
+                    // if (datafieldname[0].value.indexOf("fileUpload") > 0) {
+                    //     isRequiredField.push({
+                    //         "LogicalName": datafieldname[0].value,
+                    //         "RequiredLevel": {
+                    //             "Value": "Recommended",
+                    //             "CanBeChanged": true,
+                    //             "ManagedPropertyLogicalName":
+                    //                 "canmodifyrequirementlevelsettings",
+                    //         },
+                    //         "MetadataId":
+                    //             "32a7e6fc-4283-eb11-aac0-00224800be9c",
+                    //     });
+                    // }
+
+                    // console.log(
+                    //     datafieldname[0].value.indexOf("fileUpload") > 0,
+                    //     isRequiredField,
+                    //     props.props.form["appealForm"].values[
+                    //         datafieldname[0].value
+                    //     ]
+                    // );
+
+                    if (
+                        typeof props.props.form["appealForm"].values[
+                            datafieldname[0].value
+                        ] != "undefined"
+                    ) {
+                        if (typeof isRequiredField[0] != "undefined") {
+                            if (
+                                isRequiredField[0].RequiredLevel.Value != "None"
+                            ) {
                                 return (
-                            <div className="govuk-summary-list__row" key={key}>
+                                    <div
+                                        className="govuk-summary-list__row"
+                                        key={key}
+                                    >
                                         <dt className="govuk-summary-list__key">
                                             {FieldsTranslations(rows[0].value)}
                                         </dt>
+
                                         <dd className="govuk-summary-list__value">
                                             {fieldtype[0].value ==
                                             "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
                                                 ? formatDate(
-                                              props.props.form["appealForm"]
+                                                      props.props.form[
-                                                  .values[
+                                                          "appealForm"
+                                                      ].values[
                                                           datafieldname[0].value
                                                       ]
                                                   )
-                                        : props.props.form["appealForm"].values[
+                                                : fieldtype[0].value ==
+                                                  "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
+                                                ? getPickListLabel(
+                                                      props.props.formData
+                                                          .pickListData,
+                                                      datafieldname[0].value,
+                                                      props.props.form[
+                                                          "appealForm"
+                                                      ].values[
+                                                          datafieldname[0].value
+                                                      ]
+                                                  )
+                                                : fieldtype[0].value ==
+                                                  "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}"
+                                                ? getRadioLabel(
+                                                      props.props.formData
+                                                          .pickListData,
+                                                      datafieldname[0].value,
+                                                      props.props.form[
+                                                          "appealForm"
+                                                      ].values[
+                                                          datafieldname[0].value
+                                                      ]
+                                                  )
+                                                : fieldtype[0].value ==
+                                                  "{16D63FD6-119B-4353-BDCA-18358721C3FE}"
+                                                ? "ssss"
+                                                : props.props.form["appealForm"]
+                                                      .values[
                                                       datafieldname[0].value
                                                   ]}
                                         </dd>
+
                                         <dd className="govuk-summary-list__actions">
                                             <a
                                                 className="govuk-link"
                                                 href="#"
                                                 onClick={() => {
-                                            updateCurrentSection(whichSection);
+                                                    updateCurrentSection(
+                                                        whichSection
+                                                    );
                                                 }}
                                             >
-                                        {t("newappeal:change-link-label")}
+                                                {t(
+                                                    "newappeal:change-link-label"
+                                                )}
                                                 <span className="govuk-visually-hidden">
                                                     {" "}
-                                            {FieldsTranslations(rows[0].value)}
+                                                    {FieldsTranslations(
+                                                        rows[0].value
+                                                    )}
                                                 </span>
                                             </a>
                                         </dd>
@@ -129,6 +204,12 @@ let BuildCheckRow = (props) => {
                             } else {
                                 return null;
                             }
+                        } else {
+                            return null;
+                        }
+                    } else {
+                        return null;
+                    }
                 }
             })}
         </>

components/newappeal/buildchecksection.js

@@ -28,6 +28,7 @@ let BuildCheckSection = (props) => {
         handleSubmit,
         formTitle,
         setCurrentSection,
+        updateCurrentSection,
         mandatoryFieldsData,
     } = props;
 
@@ -55,8 +56,64 @@ let BuildCheckSection = (props) => {
         // /searchresults
     };
 
+    const onHandleSubmit = (values) => {
+        //alert(1);
+        //updateCaseProgress(values);
+        // setCurrentSection(9999);
+
+        alert(1);
+    };
+
+    function bytesToSize(bytes) {
+        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+        if (bytes == 0) return "0 Byte";
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
+        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
+    }
+
+    const getThumbnailIconByExtension = (blobName) => {
+        let fileType = blobName.slice(blobName.lastIndexOf(".") + 1);
+
+        switch (fileType) {
+            case "html":
+                return "/assets/images/documenttypes/html.png";
+                break;
+            case "txt":
+                return "/assets/images/documenttypes/txt.png";
+                break;
+            case "doc":
+                return "/assets/images/documenttypes/doc.png";
+                break;
+            case "pdf":
+                return "/assets/images/documenttypes/pdf.png";
+                break;
+            case "docx":
+                return "/assets/images/documenttypes/docx.png";
+                break;
+            case "csv":
+                return "/assets/images/documenttypes/csv.png";
+                break;
+            case "xlsx":
+                return "/assets/images/documenttypes/xlsx.png";
+                break;
+
+            case "zip":
+                return "/assets/images/documenttypes/zip.png";
+                break;
+            case "jpeg":
+            case "jpg":
+                return "/assets/images/documenttypes/jpg.png";
+            case "png":
+                return "/assets/images/documenttypes/png.png";
+                break;
+            default:
+                return "/assets/images/documenttypes/txt.png";
+                break;
+        }
+    };
+
     return (
-        <div className="govuk-grid-row">
+        <div className="govuk-grid-row" key={1222}>
             <div className="govuk-grid-column-full">
                 <div>
                     <h1 className="govuk-heading-m">
@@ -64,10 +121,10 @@ let BuildCheckSection = (props) => {
                     </h1>
                     <dl className="govuk-summary-list ">
                         {Object.keys(titles).map((key) => (
-                            <>
+                            <div key={key}>
-                                {/* <h2 className="govuk-heading-m">
+                                <h2 className="govuk-heading-m govuk-!-margin-top-9">
                                     {titles[key].value}
-                            </h2> */}
+                                </h2>
 
                                 <BuildCheckRow
                                     formXML={formXML}
@@ -77,10 +134,62 @@ let BuildCheckSection = (props) => {
                                     key={key}
                                     mandatoryFieldsData={mandatoryFieldsData}
                                 />
-                            </>
+                            </div>
                         ))}
                     </dl>
-                    <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
+                    <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list">
+                        <div className="govuk-summary-list__row" key={"9999"}>
+                            <dt className="govuk-summary-list__key">
+                                {props.props.appealType.fileList.files.length >
+                                0
+                                    ? props.props.appealType.fileList.files.map(
+                                          (blob, i) => (
+                                              <div
+                                                  key={blob.name + "_" + i}
+                                                  className="govuk-!-margin-bottom-5 fileThumb "
+                                              >
+                                                  <img
+                                                      src={getThumbnailIconByExtension(
+                                                          blob.name
+                                                      )}
+                                                      alt={blob.name.slice(
+                                                          blob.name.indexOf(
+                                                              "_"
+                                                          ) + 1
+                                                      )}
+                                                      width="50"
+                                                  />
+
+                                                  <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
+                                                      {blob.name.slice(
+                                                          blob.name.indexOf(
+                                                              "_"
+                                                          ) + 1
+                                                      )}
+                                                      (
+                                                      {bytesToSize(
+                                                          blob.contentLength
+                                                      )}
+                                                      )
+                                                  </span>
+                                              </div>
+                                          )
+                                      )
+                                    : ""}
+                            </dt>
+                            <dd className="govuk-summary-list__actions">
+                                <a
+                                    className="govuk-link"
+                                    href="#"
+                                    onClick={() => {
+                                        updateCurrentSection(sectionCount);
+                                    }}
+                                >
+                                    {t("newappeal:change-link-label")}
+                                </a>
+                            </dd>
+                        </div>
+                    </dl>
                 </div>
                 <div className="govuk-button-group">
                     <a
@@ -111,6 +220,10 @@ const mapDispatchToProps = (dispatch) => {
         setCurrentSection: (currentSection) => {
             dispatch(setCurrentSection(currentSection));
         },
+        updateCurrentSection: (whichSection) => {
+            dispatch(setCurrentSection(whichSection));
+            dispatch(setFormComplete("true"));
+        },
     };
 };
 

components/newappeal/buildfield.js

@@ -1,18 +1,17 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import xpath from "xpath";
+import { useRouter } from "next/router";
-
 import {
-    Textfield,
+    CheckBoxfield,
-    DateField,
     DateFieldPicker,
-    YesNofield,
+    DecimalField,
-    PickList,
+    FileUploadField,
     MultiLinefield,
     NumericField,
+    PickList,
+    Radiofield,
     ReadOnlyfield,
-    DecimalField,
+    Textfield,
+    YesNofield,
 } from "../elements";
 
 export default function BuildField(props) {
@@ -25,7 +24,11 @@ export default function BuildField(props) {
 
     const parser = new DOMParser();
 
+    //console.log(props);
+
     const whichFieldType = (classid) => {
+        //console.log(props.datafieldname, classid);
+
         switch (classid) {
             case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
                 return (
@@ -51,6 +54,7 @@ export default function BuildField(props) {
                         label={props.label}
                         datafieldname={props.datafieldname}
                         picklistData={props.picklistData}
+                        validation={props.validation}
                     />
                 );
                 break;
@@ -59,10 +63,42 @@ export default function BuildField(props) {
                     <YesNofield
                         name={props.datafieldname}
                         label={props.label}
+                        requiredDocumentValue={props.requiredDocumentValue}
+                        requiredDocumentLabel={props.requiredDocumentLabel}
+                        validation={props.validation}
+                        setDocumentsList={props.setDocumentsList}
+                        documentList={props.documentList}
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
+                    />
+                );
+                break;
+            case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return (
+                    <Radiofield
+                        name={props.datafieldname}
+                        label={props.label}
+                        datafieldname={props.datafieldname}
+                        options={props.datafieldcontent}
+                        inline={false}
+                        hint={props.hint}
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
+                        validation={props.validation}
+                        setDocumentsList={props.setDocumentsList}
+                        documentList={props.documentList}
+                        requiredDocumentValue={props.requiredDocumentValue}
+                        requiredDocumentLabel={props.requiredDocumentLabel}
                     />
                 );
                 break;
             case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
+                const required = (value) => (value ? undefined : "Is required");
+
                 return (
                     <Textfield
                         name={props.datafieldname}
@@ -72,6 +108,12 @@ export default function BuildField(props) {
                             props.props.props.appealType.caseReference
                                 .ticketnumber
                         }
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
+                        validation={props.validation}
+                        hint={props.hint}
                     />
                 );
                 break;
@@ -80,6 +122,13 @@ export default function BuildField(props) {
                     <DateFieldPicker
                         name={props.datafieldname}
                         label={props.label}
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
+                        validation={props.validation}
+                        dateStart={props.dateStart}
+                        dateEnd={props.dateEnd}
                     />
                 );
                 break;
@@ -88,6 +137,11 @@ export default function BuildField(props) {
                     <MultiLinefield
                         name={props.datafieldname}
                         label={props.label}
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
+                        validation={props.validation}
                     />
                 );
                 break;
@@ -96,6 +150,11 @@ export default function BuildField(props) {
                     <NumericField
                         name={props.datafieldname}
                         label={props.label}
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        validation={props.validation}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
                     />
                 );
                 break;
@@ -104,6 +163,52 @@ export default function BuildField(props) {
                     <DecimalField
                         name={props.datafieldname}
                         label={props.label}
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        validation={props.validation}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
+                    />
+                );
+                break;
+            case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
+                return (
+                    <div className="govuk-!-margin-bottom-9">
+                        <FileUploadField
+                            name={props.datafieldname}
+                            label={props.label}
+                            ticketnumber={
+                                props.props.props.props.appealType.caseReference
+                                    .ticketnumber
+                            }
+                            documentTypeCode={props.documentTypeCode}
+                            hint={props.hint}
+                            fileList={
+                                props.props.props.props.appealType.fileList
+                            }
+                            setFilesForAppeal={
+                                props.props.props.setFilesForAppeal
+                            }
+                            containerID={
+                                props.props.props.props.accountDetails
+                                    .containerID
+                            }
+                        />
+                    </div>
+                );
+                break;
+
+            case "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
+                return (
+                    <CheckBoxfield
+                        name={props.datafieldname}
+                        label={props.label}
+                        props={props}
+                        form={props.props.props.form}
+                        formProps={props.props.props.props.form}
+                        parentField={props.parentField}
+                        parentFieldShowOnValue={props.parentFieldShowOnValue}
+                        validation={props.validation}
                     />
                 );
                 break;

components/newappeal/buildprogress.js

@@ -0,0 +1,219 @@
+import jsonpath from "jsonpath";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { connect } from "react-redux";
+import xpath from "xpath";
+import { setCurrentSection } from "../../store/appealType/action";
+import { FieldsTranslations } from "../elements";
+import { getProgressObj } from "../utils";
+
+const BuildProgress = (props) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        progObj,
+        titleList,
+        currentSection,
+        documentListObj,
+        formObjXML,
+        mandatoryFieldsData,
+        gotoSection,
+        setCurrentSection,
+    } = props;
+    const parser = new DOMParser();
+
+    // const progObj = getProgressObj(
+    //     formObjXML,
+    //     titleList,
+    //     mandatoryFieldsData,
+    //     props
+    // );
+
+    //console.log(progObj);
+
+    return (
+        <>
+            <nav
+                role="navigation"
+                aria-labelledby="progress-list"
+                className="at-nav"
+            >
+                <h2 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
+                    {t("newappeal:new-appeal-progress-nav-label")}:{" "}
+                    <span className="progress-case-reference">
+                        {props.props.appealType.caseReference.ticketnumber}
+                    </span>
+                </h2>
+
+                {/* <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" /> */}
+
+                <div
+                    id="step-by-step-navigation"
+                    data-module="gemstepnav"
+                    className="app-step-nav  app-step-nav--active"
+                    data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
+                    data-show-text="show"
+                    data-hide-text="hide"
+                    data-show-all-text="Show all"
+                    data-hide-all-text="Hide all"
+                >
+                    <ol className="app-step-nav__steps">
+                        {Object.keys(progObj).map((key, index) => (
+                            <li
+                                key={key}
+                                className={
+                                    "app-step-nav__step js-step app-step-nav__step--active" +
+                                    (progObj[index].allFieldsComplete
+                                        ? " sectionComplete"
+                                        : " sectionIncomplete")
+                                }
+                                aria-current="step"
+                                data-show=""
+                                id="check-youre-allowed-to-drive"
+                            >
+                                <div
+                                    className="app-step-nav__header js-toggle-panel "
+                                    data-position={index}
+                                >
+                                    <h3 className="app-step-nav__title ">
+                                        <span className="app-step-nav__circle app-step-nav__circle--number">
+                                            <span className="app-step-nav__circle-inner">
+                                                <span className="app-step-nav__circle-background">
+                                                    <span className="app-step-nav__circle-step-label govuk-visually-hidden">
+                                                        Step
+                                                    </span>{" "}
+                                                    {index + 1}
+                                                    <span
+                                                        className="app-step-nav__circle-step-colon govuk-visually-hidden"
+                                                        aria-hidden="true"
+                                                    >
+                                                        :
+                                                    </span>
+                                                </span>
+                                            </span>
+                                        </span>
+
+                                        <span className="js-step-title">
+                                            <a
+                                                href="#"
+                                                onClick={() => {
+                                                    gotoSection(
+                                                        parseInt(key) + 1
+                                                    );
+                                                }}
+                                                className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                                aria-expanded="false"
+                                                aria-controls="step-panel-check-youre-allowed-to-drive-1"
+                                            >
+                                                <span className="js-step-title-text govuk-!-font-size-16">
+                                                    {FieldsTranslations(
+                                                        progObj[index].title
+                                                    )}
+                                                </span>
+                                            </a>
+                                        </span>
+                                    </h3>
+                                </div>
+                            </li>
+                        ))}
+                    </ol>
+                </div>
+
+                {/* <ol className="govuk-list" id="progress-list">
+                    <ul className="govuk-list ">
+                        <li className="at-nav__page">
+                            <ol className="govuk-list">
+                                {Object.keys(progObj).map((key, index) =>
+                                    parseInt(key) + 1 == currentSection ? (
+                                        <li key={key}>
+                                            <b>
+                                                {FieldsTranslations(
+                                                    progObj[index].title
+                                                )}
+                                            </b>
+                                        </li>
+                                    ) : (
+                                        <li key={key}>
+                                            {" "}
+                                            <span
+                                                title={
+                                                    progObj[index].title +
+                                                    ` complete`
+                                                }
+                                                className={
+                                                    progObj[index]
+                                                        .allFieldsComplete ==
+                                                    true
+                                                        ? `sectionCompleteTick`
+                                                        : `sectionIncomplete`
+                                                }
+                                            ></span>
+                                            <a
+                                                className="govuk-link"
+                                                href="#"
+                                                onClick={() => {
+                                                    gotoSection(
+                                                        parseInt(key) + 1
+                                                    );
+                                                }}
+                                            >
+                                                {FieldsTranslations(
+                                                    progObj[index].title
+                                                )}
+                                            </a>
+                                        </li>
+                                    )
+                                )}
+                            </ol>
+                        </li>
+                    </ul>
+                </ol> */}
+            </nav>
+
+            {Object.keys(documentListObj).length > 0 && (
+                <div>
+                    <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
+                        {t("newappeal:new-appeal-documentlist-nav")}:
+                    </h3>
+                    <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
+                    <ol className="govuk-list document-list">
+                        <ul className="govuk-list ">
+                            <li className="at-nav__page">
+                                <ol className="govuk-list govuk-list--bullet">
+                                    {Object.entries(documentListObj).map(
+                                        ([key, value]) => {
+                                            return <li key={key}>{value}</li>;
+                                        }
+                                    )}
+                                </ol>
+                            </li>
+                        </ul>
+                    </ol>
+                </div>
+            )}
+        </>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        initialValues: state.appealType.caseReference.caseDetails,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        gotoSection: (thisSection) => {
+            dispatch(setCurrentSection(thisSection));
+        },
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(BuildProgress);

components/newappeal/buildrow.js

@@ -5,6 +5,7 @@ import useTranslation from "next-translate/useTranslation";
 import xpath from "xpath";
 import BuildField from "./buildfield";
 import jsonpath from "jsonpath";
+import FileUpload from "./fileupload";
 
 export default function BuildRow(props) {
     let { t } = useTranslation();
@@ -34,7 +35,70 @@ export default function BuildRow(props) {
                 } else {
                     var rows = xpath.select("//label/@description", doc);
                     var fieldtype = xpath.select("//@classid", doc);
+                    var validation = xpath.select("//@validation", doc);
                     var datafieldname = xpath.select("//@datafieldname", doc);
+                    var datafieldcontent = xpath.select(
+                        "//@datafieldcontent",
+                        doc
+                    );
+                    var parentField = xpath.select("//@parentField", doc);
+
+                    var parentFieldShowOnValue = xpath.select(
+                        "//@parentFieldShowOnValue",
+                        doc
+                    );
+
+                    var requiredDocumentValue = xpath.select(
+                        "//@requiredDocumentValue",
+                        doc
+                    );
+
+                    var requiredDocumentLabel = xpath.select(
+                        "//@requiredDocumentLabel",
+                        doc
+                    );
+
+                    var documentTypeCode = xpath.select(
+                        "//@ishareDocumentCode",
+                        doc
+                    );
+
+                    var hint = xpath.select("//label/@hint", doc);
+                    var dateStart = xpath.select("//@dateStart", doc);
+                    var dateEnd = xpath.select("//@dateEnd", doc);
+
+                    hint = !_.isEmpty(hint) && hint[0].value;
+
+                    validation = !_.isEmpty(validation)
+                        ? validation[0].value
+                        : [];
+
+                    parentField =
+                        !_.isEmpty(parentField) && parentField[0].value;
+
+                    parentFieldShowOnValue =
+                        !_.isEmpty(parentFieldShowOnValue) &&
+                        parentFieldShowOnValue[0].value;
+
+                    datafieldcontent =
+                        !_.isEmpty(datafieldcontent) &&
+                        datafieldcontent[0].value;
+
+                    requiredDocumentValue =
+                        !_.isEmpty(requiredDocumentValue) &&
+                        requiredDocumentValue[0].value;
+
+                    requiredDocumentLabel =
+                        !_.isEmpty(requiredDocumentLabel) &&
+                        requiredDocumentLabel[0].value;
+
+                    documentTypeCode =
+                        !_.isEmpty(documentTypeCode) &&
+                        documentTypeCode[0].value;
+
+                    dateStart = !_.isEmpty(dateStart) && dateStart[0].value;
+
+                    dateEnd = !_.isEmpty(dateEnd) && dateEnd[0].value;
 
                     const isRequiredField = jsonpath.query(
                         mandatoryFieldsData,
@@ -43,7 +107,7 @@ export default function BuildRow(props) {
                             "')]"
                     );
 
-                    if (isRequiredField[0].RequiredLevel.Value != "None") {
+                    if (datafieldname[0].value == "pinswg_fileUpload") {
                         return (
                             <BuildField
                                 fieldType={fieldtype[0].value}
@@ -55,10 +119,55 @@ export default function BuildRow(props) {
                                     props.props.props.formData.pickListData
                                 }
                                 mandatoryFieldsData={mandatoryFieldsData}
+                                documentTypeCode={documentTypeCode}
                             />
                         );
                     } else {
-                        return null;
+                        // console.log(
+                        //     datafieldname[0].value,
+                        //     isRequiredField[0].RequiredLevel.Value
+                        // );
+                        // if (typeof isRequiredField[0] != "undefined") {
+                        // if (
+                        //     isRequiredField[0].RequiredLevel.Value != "None"
+                        // ) {
+                        //console.log(datafieldname[0].value, validation);
+                        return (
+                            <BuildField
+                                fieldType={fieldtype[0].value}
+                                label={rows[0].value}
+                                datafieldname={datafieldname[0].value}
+                                datafieldcontent={datafieldcontent}
+                                parentField={parentField}
+                                parentFieldShowOnValue={parentFieldShowOnValue}
+                                key={key}
+                                props={props}
+                                picklistData={
+                                    props.props.props.formData.pickListData
+                                }
+                                mandatoryFieldsData={mandatoryFieldsData}
+                                hint={hint}
+                                requiredDocumentLabel={requiredDocumentLabel}
+                                requiredDocumentValue={requiredDocumentValue}
+                                validation={validation}
+                                dateStart={dateStart}
+                                dateEnd={dateEnd}
+                                setDocumentsList={props.props.setDocumentsList}
+                                documentList={
+                                    props.props.appealType.documentList
+                                }
+                                documentTypeCode={documentTypeCode}
+                                setFilesForAppeal={
+                                    props.props.setFilesForAppeal
+                                }
+                            />
+                        );
+                        // } else {
+                        //     return null;
+                        // }
+                        // } else {
+                        //     return null;
+                        // }
                     }
                 }
             })}

components/newappeal/buildsection.js

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import _, { has } from "lodash";
+import _, { has, last } from "lodash";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import { useState, useEffect } from "react";
@@ -10,13 +10,22 @@ import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import {
     setCaseReference,
     setCurrentSection,
+    setDocumentsList,
+    setFilesForAppeal,
+    setNewAppealProgress,
 } from "../../store/appealType/action";
-import { query } from "jsonpath";
+import { getFormCollectionByID, getProgressObj } from "../utils";
+import { updateCase, patchCase, uploadFiles, sendEmail } from "../../actions";
+
+import { FieldsTranslations } from "../elements";
+import jsonpath from "jsonpath";
+import BuildProgress from "./buildprogress";
 
 let BuildSection = (props) => {
-    // useEffect(() => {
+    const [currentSectionSelected, setCurrentSectionSelected] = useState(1);
-    //     window.scrollTo(0, 0);
+    const [pickupWhereLeftOff, setPickupWhereLeftOff] = useState(true);
-    // });
+
+    const [savingStatus, setSavingStatus] = useState(false);
 
     let { t } = useTranslation();
 
@@ -28,6 +37,9 @@ let BuildSection = (props) => {
         sectionCount,
         onSubmit,
         handleSubmit,
+        load,
+        pristine,
+        reset,
         formTitle,
         setCurrentSection,
         refno,
@@ -35,29 +47,172 @@ let BuildSection = (props) => {
         mandatoryFieldsData,
     } = props;
 
+    const documentListObj = props.appealType.documentList;
     const currentSection = props.appealType.currentSection;
+
     const parser = new DOMParser();
     var doc = parser.parseFromString(props.formXML, "text/xml");
-    // var titles = xpath.select(
+    var titles = xpath.select(
-    //     "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
+        "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
-    //     doc
-    // );
-    var rowXML = xpath.select(
-        // "/form/tabs/tab[" +
-        //     currentSection +
-        //     "]/columns//sections/section/rows/row",
-        "/form/tabs/tab/columns//sections/section/rows/row",
         doc
     );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            currentSection +
+            "]/columns//sections/section/rows/row",
+        //"/form/tabs/tab/columns//sections/section/rows/row",
+        doc
+    );
+
+    var formObjXML = xpath.select("/form/tabs", doc);
 
     var titleList = xpath.select(
         "//form/tabs/tab[*]/labels/label/@description",
         doc
     );
 
+    const progObj = getProgressObj(
+        formXML,
+        titleList,
+        mandatoryFieldsData,
+        props
+    );
+
+    const isProgressComplete = (progObj) => {
+        const progressCount = 0;
+
+        for (let key in progObj) {
+            progObj[key].allFieldsComplete === true && progressCount++;
+        }
+
+        return progObj.length == progressCount;
+    };
+
+    const lastIndex = progObj
+        .map((whichIsLast) => whichIsLast.allFieldsComplete == true)
+        .lastIndexOf(true);
+
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
+    const uploadAppealFiles = (values) => {
+        // get filelists from values object
+        let fileListObj = _.filter(values, function (v, key) {
+            return _.includes(key, "pinswg_fileUpload");
+        });
+
+        //console.log(fileListObj);
+
+        console.log(
+            "\n////////////////////////\n upload files:",
+            props.props.accountDetails.containerID
+        );
+
+        var dataObj = values;
+
+        for (let key in dataObj) {
+            _.includes(key, "pinswg_fileUpload") == true && delete dataObj[key];
+        }
+
+        uploadFiles(
+            dataObj,
+            fileListObj,
+            props.props.accountDetails.containerID,
+            props.props.appealType.caseReference.ticketnumber
+        ).then((data) => {
+            //console.log("hello", data);
+
+            return data;
+        });
+    };
+
+    const updateCaseProgress = async (
+        values,
+        sendSavedEmail,
+        useSaveStatus
+    ) => {
+        let incidentId = props.appealType.caseReference.incidentid;
+        let updateBody = values || {};
+
+        setSavingStatus(useSaveStatus);
+        uploadAppealFiles(values);
+        props.setNewAppealProgress(
+            getProgressObj(formXML, titleList, mandatoryFieldsData, props)
+        );
+
+        let appTypeCollection = getFormCollectionByID(
+            props.appealType.appealTypeID
+        );
+        let updateBindAppealTypeToIncident =
+            appTypeCollection.NavigationProperty;
+
+        Object.assign(updateBody, {
+            "pinswg_appealcasetype": props.appealType.appealTypeID,
+            "pinswg_Appellant@odata.bind":
+                "/contacts(" + props.props.accountDetails.loggedinUserId + ")",
+            "pinswg_name": props.appealType.caseReference.ticketnumber,
+            [updateBindAppealTypeToIncident + "@odata.bind"]:
+                "/incidents(" + incidentId + ")",
+        });
+
+        updateBody = JSON.stringify(updateBody);
+        updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
+        updateBody = updateBody.replace(/:"No"/gm, `:false`);
+        updateBody = JSON.parse(updateBody);
+
+        Object.keys(updateBody).forEach((key) => {
+            if (updateBody[key] === null) {
+                delete updateBody[key];
+            }
+            if (key.indexOf("_") == 0) {
+                delete updateBody[key];
+            }
+        });
+
+        //console.log(updateBody);
+
+        let updateFormCollection = appTypeCollection.LogicalCollectionName;
+        let primaryAttribute = appTypeCollection.PrimaryIdAttribute;
+
+        const reference = "PEDW-PARTIAL";
+        const templateId = "021b0a7b-df00-41f1-b94e-c269bee98c75";
+        const emailAddress = props.props.accountDetails.loggedinUserEmail;
+        const personalisation = {
+            "caseReference": props.appealType.caseReference.ticketnumber,
+            "emailAddress": props.props.accountDetails.loggedinUserEmail,
+            "returnLink":
+                props.props.url +
+                "/myportal/" +
+                appTypeCollection.UrlName +
+                "?lpa=" +
+                props.appealType.appealLPA +
+                "&apt=" +
+                appTypeCollection.appealTypeID +
+                "&casereference=" +
+                props.appealType.caseReference.ticketnumber +
+                "&inid=" +
+                props.appealType.caseReference.incidentid,
+            "linkExpiry": 10 * 60,
+        };
+
+        sendSavedEmail == true &&
+            sendEmail(templateId, emailAddress, personalisation, reference);
+
+        useSaveStatus &&
+            router.replace(
+                router.locale != "en"
+                    ? router.locale + "/myportal"
+                    : "/myportal"
+            );
+    };
+
     const onHandleSubmit = (values) => {
+        //if (currentSection == sectionCount) {
+        let valuesObj = values || {};
+
+        delete valuesObj["_pinswg_appellant_value"];
+        console.log("has errors:", props.invalid);
+        props.invalid == false && updateCaseProgress(valuesObj, false, false);
+
         setCurrentSection(currentSection + 1);
     };
 
@@ -65,7 +220,7 @@ let BuildSection = (props) => {
 
     const getErrors = () => {
         let errorsobj = props.props.form["appealForm"];
-        setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
+        //setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
         window.scrollTo(0, 0);
     };
 
@@ -131,8 +286,7 @@ let BuildSection = (props) => {
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds">
                 <h1 className="govuk-heading-m  govuk-!-margin-top-5">
-                    {/* {titles[0].value}{" "} */}
+                    {FieldsTranslations(titles[0].value)}
-                    Enter your appeal information
                 </h1>
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
                     {hasErrors == true ? (
@@ -152,29 +306,45 @@ let BuildSection = (props) => {
                         mandatoryFieldsData={mandatoryFieldsData}
                         props={props}
                     />
-                    {}
+
                     <div className="govuk-button-group">
-                        {/* {props.sectionCount != currentSection ? (
+                        {props.sectionCount != currentSection ? (
                             <button
                                 type="submit"
                                 className="govuk-button"
                                 data-module="govuk-button"
-                                onClick={() => getErrors()}
+                                onClick={() => {
+                                    getErrors();
+                                    let valuesObj = _.has(
+                                        props.props.form[props.form],
+                                        "values"
+                                    )
+                                        ? props.props.form[props.form].values
+                                        : {};
+
+                                    //console.log("valuesobj:", valuesObj);
+
+                                    delete valuesObj["_pinswg_appellant_value"];
+
+                                    //console.log("on save:", valuesObj);
+                                    updateCaseProgress(valuesObj, false, false);
+                                }}
                             >
-                                Continue
+                                {t("common:continue-button")}
                             </button>
                         ) : (
                             ""
                         )}
-                        {props.sectionCount == currentSection ? ( */}
+                        {props.sectionCount == currentSection ? (
                             <button
+                                disabled={!isProgressComplete(progObj)}
                                 type="submit"
                                 className="govuk-button"
                                 data-module="govuk-button"
                             >
-                            Submit
+                                {t("common:submit-button")}
                             </button>
-                        {/* ) : (
+                        ) : (
                             ""
                         )}
                         {currentSection > 1 ? (
@@ -185,64 +355,66 @@ let BuildSection = (props) => {
                                     setCurrentSection(currentSection - 1)
                                 }
                             >
-                                Back
+                                {t("common:back-link")}
                             </a>
                         ) : (
                             ""
-                        )} */}
+                        )}
                     </div>
                 </form>
             </div>
-            {/* <div className="govuk-grid-column-one-third">
+            <div className="govuk-grid-column-one-third">
-                <nav
+                <div className="at-nav-container">
-                    role="navigation"
+                    {/* <span>
-                    aria-labelledby="progress-list"
+                        Last section is {lastIndex} - {currentSection}
-                    className="at-nav"
+                    </span> */}
-                >
+                    <BuildProgress
-                    <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
+                        progObj={progObj}
-                        Progress:
+                        props={props}
-                    </h3>
+                        titleList={titleList}
+                        documentListObj={documentListObj}
+                        formObjXML={formXML}
+                        mandatoryFieldsData={mandatoryFieldsData}
+                        currentSection={currentSection}
+                        initialValues={props.initialValues}
+                        setCurrentSection={setCurrentSection}
+                    />
+
                     <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
 
-                    <ol className="govuk-list">
+                    {savingStatus ? (
-                        <ul className="govuk-list ">
+                        <span className=" progress-save-active">
-                            <li className="at-nav__page">
+                            Saving data
-                                <ol className="govuk-list">
+                            <img
-                                    {Object.keys(titleList).map((key) =>
+                                className="data-loading-icon"
-                                        parseInt(key) + 1 == currentSection ? (
+                                src="/assets/images/loading.gif"
-                                            <li key={key}>
+                                alt={
-                                                <b>{titleList[key].value} </b>
+                                    router.locale == "cy"
-                                            </li>
+                                        ? "Nôl data"
+                                        : "Saving data"
+                                }
+                            />
+                        </span>
                     ) : (
-                                            <li key={key}>
+                        <button
-                                                {props.appealType
+                            className="govuk-button govuk-button--secondary progress-save "
-                                                    .formComplete == "true" ||
-                                                parseInt(key) + 1 <
-                                                    currentSection ? (
-                                                    <a
-                                                        className="govuk-link"
-                                                        href="#"
                             onClick={() => {
-                                                            gotoSection(
+                                let valuesObj =
-                                                                parseInt(key) +
+                                    props.props.form[props.form].values || {};
-                                                                    1
+
-                                                            );
+                                console.log("valuesobj:", valuesObj);
+
+                                delete valuesObj["_pinswg_appellant_value"];
+
+                                console.log("on save:", valuesObj);
+                                updateCaseProgress(valuesObj, true, true);
                             }}
                         >
-                                                        {titleList[key].value}
+                            {t("common:save-exit-button")}
-                                                    </a>
+                        </button>
-                                                ) : (
-                                                    titleList[key].value
                     )}
-                                            </li>
+                </div>
-                                        )
+            </div>
-                                    )}
-                                </ol>
-                            </li>
-                        </ul>
-                    </ol>
-                </nav>
-            </div> */}
         </div>
     );
 };
@@ -253,6 +425,7 @@ const mapStateToProps = (state) => {
         searchResultsObj: state.searchResultsObj,
         formData: state.formData,
         appealType: state.appealType,
+        initialValues: state.appealType.caseReference.caseDetails,
         //form: state.form,
     };
 };
@@ -265,6 +438,15 @@ const mapDispatchToProps = (dispatch) => {
         gotoSection: (thisSection) => {
             dispatch(setCurrentSection(thisSection));
         },
+        setDocumentsList: (documentList) => {
+            dispatch(setDocumentsList(documentList));
+        },
+        setFilesForAppeal: (blobList) => {
+            dispatch(setFilesForAppeal(blobList));
+        },
+        setNewAppealProgress: (progressObj) => {
+            dispatch(setNewAppealProgress(progressObj));
+        },
     };
 };
 
@@ -277,5 +459,6 @@ export default connect(
     reduxForm({
         form: "appealForm",
         destroyOnUnmount: false,
+        enableReinitialize: true, // this is needed!!
     })(BuildSection)
 );

components/newappeal/complete.js

@@ -1,20 +1,17 @@
+import jsonpath from "jsonpath";
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
+import { useEffect } from "react";
-import { useState, useEffect } from "react";
+import { connect } from "react-redux";
+import { formValueSelector } from "redux-form";
 import xpath from "xpath";
-import BuildRow from "./buildrow";
+import { updateCase, patchCase, sendEmail } from "../../actions";
-import { reduxForm, formValueSelector } from "redux-form";
+import data from "../../data/collections.json";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import { setCurrentSection } from "../../store/appealType/action";
-import { updateCase } from "../../actions";
-import jsonpath from "jsonpath";
 import { getFormCollectionByID } from "../utils";
 
-import data from "../../data/collections.json";
-
 let CompleteAppeal = (props) => {
-    // un comment to update incident with an appealtype id
     useEffect(() => {
         let incidentId = props.appealType.caseReference.incidentid;
         let updateBody = props.props.form.appealForm.values;
@@ -23,12 +20,14 @@ let CompleteAppeal = (props) => {
             props.appealType.appealTypeID
         );
         let updateBindAppealTypeToIncident =
-            appTypeCollection.LogicalName + "Ids";
+            appTypeCollection.NavigationProperty;
+
+        console.log(props.appealType.appealTypeID, appTypeCollection);
 
         Object.assign(updateBody, {
             "pinswg_Appellant@odata.bind":
                 "/contacts(" + props.props.accountDetails.loggedinUserId + ")",
-            "pinswg_AssociatedLPA@odata.bind":
+            "pinswg_LocalPlanningAuthority@odata.bind":
                 "/accounts(" + props.appealType.appealLPA + ")",
             "pinswg_name": props.appealType.caseReference.ticketnumber,
             [updateBindAppealTypeToIncident + "@odata.bind"]:
@@ -36,7 +35,6 @@ let CompleteAppeal = (props) => {
         });
 
         updateBody = JSON.stringify(updateBody);
-
         updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
         updateBody = updateBody.replace(/:"No"/gm, `:false`);
         updateBody = JSON.parse(updateBody);
@@ -51,31 +49,28 @@ let CompleteAppeal = (props) => {
             primaryAttribute,
             props.appealType.caseReference.ticketnumber
         );
+
+        const reference = "PEDW-COMPLETE";
+        const templateId = "618e0463-b092-4733-a024-bf8a3bbde808";
+        const emailAddress = props.props.accountDetails.loggedinUserEmail;
+        const personalisation = {
+            "caseReference": props.appealType.caseReference.ticketnumber,
+            "emailAddress": props.props.accountDetails.loggedinUserEmail,
+            "linkExpiry": 10 * 60,
+        };
+        sendEmail(templateId, emailAddress, personalisation, reference);
+
+        console.log("patching////////");
+        patchCase(incidentId);
     }, [
         props.appealType.caseReference,
         props.props.form.appealForm.values,
         props.appealType.appealLPA,
         props.props.accountDetails.loggedinUserId,
         props.appealType.appealTypeID,
+        props.props.accountDetails.loggedinUserEmail,
     ]);
 
-    const getFormCollection = (formtype) => {
-        const collectionName = jsonpath.query(
-            data,
-            "$..[?(@.LogicalName=='" + formtype + "')]"
-        );
-        //console.log(collectionName[0]);
-        return collectionName[0];
-    };
-
-    const getPrimaryAttr = (formtype) => {
-        const attrName = jsonpath.query(
-            data,
-            "$..[?(@.LogicalName=='" + formtype + "')].PrimaryIdAttribute"
-        );
-        return attrName[0];
-    };
-
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -91,23 +86,6 @@ let CompleteAppeal = (props) => {
     } = 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);
 

components/newappeal/createCase.js

@@ -1,23 +1,21 @@
-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 transLookup from "../../data/lookuptranslations.json";
+import useTranslation from "next-translate/useTranslation";
-import { getFormCollectionByID } from "../utils";
+import { useRouter } from "next/router";
+import { connect } from "react-redux";
+import { Field, formValueSelector, reduxForm } from "redux-form";
+import { useState } from "react";
 
-import data from "../../data/collections.json";
+import transLookup from "../../data/lookuptranslations.json";
 import {
-    setAppealType,
-    setAppealTypeTitle,
-    setAppealTypeID,
     setAppealLPA,
-    getAppealTypeObj,
+    setAppealTypeID,
+    setAppealTypeTitle,
 } from "../../store/appealType/action";
+import { getFormCollectionByID } from "../utils";
+import FileUpload from "./fileupload";
+import Aboutyou from "./aboutyou";
+import { createNewCase, createNewCaseBlob, consoleLogger } from "../../actions";
+import { FieldsTranslations } from "../elements";
 
 let CreateCase = (props) => {
     // useEffect(() => {
@@ -29,7 +27,7 @@ let CreateCase = (props) => {
     const router = useRouter();
     const { locale } = router;
 
-    const { LPAData, onSubmit, handleSubmit } = props;
+    const { LPAData, onSubmit, handleSubmit, formData } = props;
 
     const appealOptionsObj = _.isEmpty(props)
         ? [{}]
@@ -212,31 +210,316 @@ let CreateCase = (props) => {
         );
     };
 
+    const RenderRadio = ({
+        datafieldname,
+        name,
+        label,
+        id,
+        errorMsg,
+        options,
+        input: { onChange, value },
+        meta: { touched, error },
+        ...custom
+    }) => {
+        let { t } = useTranslation();
         const required = (value) => (value ? undefined : "Required");
+        return (
+            <>
+                <div
+                    className={
+                        touched && error
+                            ? "govuk-form-group govuk-form-group--error"
+                            : "govuk-form-group "
+                    }
+                >
+                    <fieldset
+                        className="govuk-fieldset"
+                        aria-describedby={datafieldname + "-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={
+                                custom.inline == false
+                                    ? "govuk-radios govuk-radios--small"
+                                    : "govuk-radios govuk-radios--inline govuk-radios--small"
+                            }
+                        >
+                            {" "}
+                            {custom.hint != undefined && (
+                                <div className="govuk-hint">{custom.hint}</div>
+                            )}
+                            {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"
+                                        hint={custom.hint}
+                                        className="govuk-radios__input"
+                                        value={options[key].split("|")[0]}
+                                        validate={[required]}
+                                        // checked={
+                                        //     value ==
+                                        //     parseInt(options[key].split("|")[0])
+                                        // }
+                                        onChange={(e) => {
+                                            let docListObj =
+                                                custom.documentList;
+                                            if (
+                                                custom.requiredDocumentValue ==
+                                                "Yes"
+                                            ) {
+                                                e.target.value != "846040000"
+                                                    ? (docListObj =
+                                                          Object.assign(
+                                                              docListObj,
+                                                              {
+                                                                  ["documentCheckList_" +
+                                                                  id]:
+                                                                      custom.requiredDocumentLabel,
+                                                              }
+                                                          ))
+                                                    : delete docListObj[
+                                                          "documentCheckList_" +
+                                                              id
+                                                      ];
+                                                custom.setDocumentsList(
+                                                    docListObj
+                                                );
+                                            }
+                                        }}
+                                    />
+                                    <label
+                                        className="govuk-label govuk-radios__label"
+                                        htmlFor={id + "_" + index}
+                                    >
+                                        {t(options[key].split("|")[1])}
+                                    </label>
+                                </div>
+                            ))}
+                        </div>
+                    </fieldset>
+                </div>
+            </>
+        );
+    };
+
+    function Radiofield(props) {
+        const {
+            name,
+            label,
+            datafieldname,
+            parentField,
+            form,
+            formProps,
+            parentFieldShowOnValue,
+            validation,
+        } = props;
+
+        const router = useRouter();
+        const required = (value) => (value ? undefined : "Required");
+        // console.log(props.options);
+
+        const fieldOptions = props.options
+            .slice(1, props.options.length - 1)
+            .split(",");
+
+        //parentFieldShowOnValue
+        var showIfHasParentShowValue = parentField != false;
+        //debugger;
+        // parentField != false &&
+        // !_.isEmpty(formProps[form]) &&
+        // _.has(formProps[form].values, parentField) &&
+        // parentFieldShowOnValue.indexOf(
+        //     formProps[form].values[parentField].toString()
+        // ) > -1;
+
+        (showIfHasParentShowValue == parentField) != false &&
+            showIfHasParentShowValue;
+
+        // console.log(
+        //     datafieldname,
+        //     showIfHasParentShowValue,
+        //     formProps[form].values[parentField]
+        // );
+
+        return (
+            <>
+                {parentField != false ? (
+                    showIfHasParentShowValue && (
+                        <Field
+                            name={name}
+                            datafieldname={datafieldname}
+                            label={label}
+                            options={fieldOptions}
+                            id={name}
+                            validate={[required]}
+                            errorMsg={t("newappeal:select-an-option-label")}
+                            component={RenderRadio}
+                            inline={props.inline}
+                            hint={props.hint}
+                            //validate={eval(validation)}
+                            requiredDocumentLabel={props.requiredDocumentLabel}
+                            requiredDocumentValue={props.requiredDocumentValue}
+                            setDocumentsList={props.setDocumentsList}
+                            documentList={props.documentList}
+                        />
+                    )
+                ) : (
+                    <Field
+                        name={name}
+                        datafieldname={datafieldname}
+                        label={label}
+                        options={fieldOptions}
+                        id={name}
+                        validate={[required]}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                        component={RenderRadio}
+                        inline={props.inline}
+                        hint={props.hint}
+                        //validate={eval(validation)}
+                        requiredDocumentLabel={props.requiredDocumentLabel}
+                        requiredDocumentValue={props.requiredDocumentValue}
+                        setDocumentsList={props.setDocumentsList}
+                        documentList={props.documentList}
+                    />
+                )}
+            </>
+        );
+    }
+
+    const required = (value) => (value ? undefined : "Required");
+
+    const [formStep, setFormStep] = useState(0);
 
     const onHandleSubmit = (values) => {
         event.preventDefault();
 
         var appTypeCollection = values.appealTypes;
 
-        appTypeCollection = getFormCollectionByID(appTypeCollection);
+        formStep == 0 && setFormStep(1);
 
+        whichAppealType =
+            values.appealTypes == "846040004" && values.confirmHASCAS == "true"
+                ? "846040004"
+                : values.appealTypes == "846040004" &&
+                  values.confirmHASCAS == "false"
+                ? "846040000"
+                : values.appealTypes;
+
+        var whichAppealType = whichAppealType;
+
+        appTypeCollection = getFormCollectionByID(whichAppealType);
+
+        // console.log(
+        //     "/newappeal" +
+        //         "/" +
+        //         appTypeCollection.UrlName +
+        //         "?lpa=" +
+        //         values.lpaTypes +
+        //         "&apt=" +
+        //         whichAppealType +
+        //         "&id=" //+
+        //     //  data.incidentid
+        // );
+
+        delete values.confirmHASCAS;
+
+        // createNewCase(
+        //     appTypeCollection.appealTypeID,
+        //     values.lpaTypes,
+        //     props.loggedInUser,
+        //     values,
+        //     props.containerID
+        // )
+        createNewCaseBlob(
+            appTypeCollection.appealTypeID,
+            values.lpaTypes,
+            props.loggedInUser,
+            values,
+            props.containerID,
+            props.LPAData.LPAData.value.filter((obj) => {
+                return obj.accountid === values.lpaTypes;
+            })[0].name
+        )
+            .then((data) => {
                 router.replace(
-            (router.locale = "cy" ? "/apelnewydd" : "/newappeal") +
+                    "/newappeal" +
                         "/" +
                         appTypeCollection.UrlName +
                         "?lpa=" +
                         values.lpaTypes +
                         "&apt=" +
-                values.appealTypes.split(",")[0],
+                        whichAppealType +
-            null,
+                        "&id=" +
-            {
+                        data.ticketnumber
-                shallow: true,
-            }
                 );
+                return data;
+            })
+            .catch((err) => {
+                console.log(consoleLogger(err));
+            });
+
+        // router.replace(
+        //     "/newappeal" +
+        //         "/" +
+        //         appTypeCollection.UrlName +
+        //         "?lpa=" +
+        //         values.lpaTypes +
+        //         "&apt=" +
+        //         values.appealTypes.split(",")[0],
+        //     null,
+        //     {
+        //         shallow: true,
+        //     }
+        // );
     };
+    const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
+
+    var parentField = "appealTypes",
+        formProps = props.whichForm,
+        form = "caseForm",
+        parentFieldShowOnValue = "846040004";
+
+    var showIfHasParentShowValue =
+        parentField != false &&
+        !_.isEmpty(formProps[form]) &&
+        _.has(formProps[form].values, parentField) &&
+        parentFieldShowOnValue.indexOf(
+            formProps[form].values[parentField].toString()
+        ) > -1;
+
+    (showIfHasParentShowValue == parentField) != false &&
+        showIfHasParentShowValue;
 
     return (
+        <>
+            {formStep == 0 ? (
+                <Aboutyou setFormStep={setFormStep} />
+            ) : (
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
                     <Field
                         name="lpaTypes"
@@ -246,16 +529,30 @@ let CreateCase = (props) => {
                         label={t("newappeal:select-lpa-label")}
                         errorMsg={t("newappeal:select-lpa-label-error-msg")}
                     />
-
                     <Field
                         name="appealTypes"
                         component={RenderAppealTypeList}
                         optionsObj={appealOptionsObj}
                         validate={[required]}
                         label={t("newappeal:select-appeal-type-label")}
-                errorMsg={t("newappeal:select-appeal-type-label-error-msg")}
+                        errorMsg={t(
+                            "newappeal:select-appeal-type-label-error-msg"
+                        )}
                     />
 
+                    {showIfHasParentShowValue && (
+                        <Radiofield
+                            name={"confirmHASCAS"}
+                            datafieldname={"confirmHASCAS"}
+                            label={t("newappeal:hascas-confirmation-label")}
+                            hint={t("newappeal:hascas-confirmation-hint")}
+                            options="[true|newappeal:yes-option-label,false|newappeal:no-option-label]"
+                            id={"confirmHASCAS"}
+                            className="govuk-radios__input"
+                            validate={"[required]"}
+                            errorMsg={t("newappeal:select-an-option-label")}
+                        />
+                    )}
                     <button
                         type="submit"
                         className="govuk-button"
@@ -264,6 +561,8 @@ let CreateCase = (props) => {
                         {t("common:continue-button")}
                     </button>
                 </form>
+            )}
+        </>
     );
 };
 

components/newappeal/enforcementnotice.js

@@ -1,24 +0,0 @@
-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/fileupload.js

@@ -0,0 +1,137 @@
+// import { useDropzone } from "react-dropzone";
+// import Link from "next/link";
+// import { useState, useEffect } from "react";
+// import { useRouter } from "next/router";
+// import useTranslation from "next-translate/useTranslation";
+// import jsonpath from "jsonpath";
+// import _ from "lodash";
+
+// const FileUpload = () => {
+//     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+//     const files = acceptedFiles.map((file) => (
+//         <li key={file.path}>
+//             {file.path} - {file.size} bytes
+//         </li>
+//     ));
+//     return (
+//         <div className="govuk-grid-column-full">
+//             <div className="govuk-grid-row">
+//                 <div className="govuk-form-group">
+//                     <section className="container">
+//                         <div
+//                             {...getRootProps({
+//                                 className: "dropzone",
+//                             })}
+//                         >
+//                             <input {...getInputProps()} />
+//                             <p>
+//                                 Drag and drop files here or click to select
+//                                 files
+//                             </p>
+//                         </div>
+//                         <aside>
+//                             <h4>Files</h4>
+//                             <ul>{files}</ul>
+//                         </aside>
+//                     </section>
+//                 </div>
+//             </div>
+//         </div>
+//     );
+// };
+// export default FileUpload;
+
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useDropzone } from "react-dropzone";
+
+const baseStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "20px",
+    borderWidth: 2,
+    borderRadius: 2,
+    borderColor: "#eeeeee",
+    borderStyle: "dashed",
+    backgroundColor: "#fafafa",
+    color: "#bdbdbd",
+    transition: "border .3s ease-in-out",
+};
+
+const activeStyle = {
+    borderColor: "#2196f3",
+};
+
+const acceptStyle = {
+    borderColor: "#00e676",
+};
+
+const rejectStyle = {
+    borderColor: "#ff1744",
+};
+
+function DropzoneComponent(props) {
+    const [files, setFiles] = useState([]);
+
+    const onDrop = useCallback((acceptedFiles) => {
+        setFiles(
+            acceptedFiles.map((file) =>
+                Object.assign(file, {
+                    preview: URL.createObjectURL(file),
+                })
+            )
+        );
+    }, []);
+
+    const {
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject,
+    } = useDropzone({
+        onDrop,
+    });
+
+    const style = useMemo(
+        () => ({
+            ...baseStyle,
+            ...(isDragActive ? activeStyle : {}),
+            ...(isDragAccept ? acceptStyle : {}),
+            ...(isDragReject ? rejectStyle : {}),
+        }),
+        [isDragActive, isDragReject, isDragAccept]
+    );
+
+    const thumbs = files.map((file) => (
+        <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
+            <img src={file.preview} alt={file.name} width="50" /> -{" "}
+            <span className="govuk-body">
+                {file.name} ({file.size / 1024}kb)
+            </span>
+        </div>
+    ));
+
+    // clean up
+    useEffect(
+        () => () => {
+            files.forEach((file) => URL.revokeObjectURL(file.preview));
+        },
+        [files]
+    );
+
+    return (
+        <div className="govuk-grid-row ">
+            <div className="govuk-form-group"></div>
+            <section className="container">
+                <div {...getRootProps({ style, className: "dropzone" })}>
+                    <input {...getInputProps()} />
+                    <p>Drag and drop files here or click to select files</p>
+                </div>
+            </section>{" "}
+            <aside>{thumbs}</aside>
+        </div>
+    );
+}
+
+export default DropzoneComponent;

components/newappeal/ldc.js

@@ -1,27 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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/noticebanner.js

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

components/representation.js

@@ -4,7 +4,7 @@ import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
 import Summary from "./case/representation";
 
-const CaseSummary = (props) => {
+const CaseRepresentation = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
@@ -35,4 +35,4 @@ const CaseSummary = (props) => {
     );
 };
 
-export default CaseSummary;
+export default CaseRepresentation;

components/search.js

@@ -5,11 +5,12 @@ import useTranslation from "next-translate/useTranslation";
 import SearchForCase from "./search/searchforcase";
 import AdvancedSearch from "./search/advancedsearch";
 
-export default function Search({ children, pages }) {
+export default function Search(props) {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    console.log("props here:", props.myportal || false);
 
     return (
         <main
@@ -17,7 +18,7 @@ export default function Search({ children, pages }) {
             id="main-content"
             role="main"
         >
-            <AdvancedSearch />
+            <AdvancedSearch myportal={props.myportal || false} />
         </main>
     );
 }

components/search/advancedsearch.js

@@ -17,33 +17,7 @@ export const minLength = (errorMsg) => (value) =>
         ? errorMsg //`Must be ${min} characters or more`
         : undefined;
 
-let AdvancedSearch = (props) => {
+export const leastOneValue = (errorMsg) => {};
-    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.value)
-        ? [{}]
-        : props.appealType.appealTypeOptions.value;
-
-    let lpaOptionsObj = _.isEmpty(props)
-        ? [{}]
-        : _.isEmpty(props.LPAData)
-        ? [{}]
-        : _.isEmpty(props.LPAData.LPAData)
-        ? [{}]
-        : _.isEmpty(props.LPAData.LPAData)
-        ? [{}]
-        : props.LPAData.LPAData.value;
 
 const RenderTextfield = ({
     id,
@@ -59,6 +33,8 @@ let AdvancedSearch = (props) => {
     meta: { touched, error },
     ...custom
 }) => {
+    let { t } = useTranslation();
+
     return (
         <>
             <div className="govuk-form-group">
@@ -92,6 +68,128 @@ let AdvancedSearch = (props) => {
     );
 };
 
+const RenderCaseStatusList = ({
+    name,
+    id,
+    input,
+    optionsObj,
+    meta: { touched, error },
+    label,
+    errormsg,
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label" htmlFor={id}>
+                    {label}
+                    {name}
+                </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={id}
+                        name={name}
+                        //onChange={(e) => props.onChangeSelectAppealType(e)}
+                    >
+                        <option value="" disabled defaultValue>
+                            {t("common:drop-down-select")}
+                        </option>
+                        {_.isEmpty(optionsObj)
+                            ? ""
+                            : Object.keys(optionsObj).map((key, index) => {
+                                  return (
+                                      <option
+                                          key={key}
+                                          value={
+                                              _.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : optionsObj[key].statuscode
+                                          }
+                                      >
+                                          {_.isEmpty(optionsObj[key])
+                                              ? ""
+                                              : _.isEmpty(optionsObj[key])
+                                              ? ""
+                                              : _.isEmpty(optionsObj[key].value)
+                                              ? ""
+                                              : router.locale == "cy"
+                                              ? jsonpath.query(
+                                                    optionsObj,
+                                                    '$..[?(@.statuscode=="' +
+                                                        optionsObj[key]
+                                                            .statuscode +
+                                                        '")].value_cy'
+                                                )
+                                              : optionsObj[key].value ||
+                                                t(
+                                                    "case:summary-no-date-entered-label"
+                                                )}
+                                      </option>
+                                  );
+                              })}
+                    </select>
+                </div>
+            </div>
+        </>
+    );
+};
+
+let AdvancedSearch = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        LPAData,
+        onSubmit,
+        handleSubmit,
+        myportal,
+        error,
+        pristine,
+        reset,
+        submitting,
+    } = props;
+
+    const appealOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.appealType)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions.value)
+        ? [{}]
+        : props.appealType.appealTypeOptions.value;
+
+    let lpaOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : props.LPAData.LPAData.value;
+
     const RenderLPAList = ({
         name,
         id,
@@ -286,31 +384,33 @@ let AdvancedSearch = (props) => {
         var searchString = "";
 
         searchString +=
-            values.caseRef != null ? "?q=" + values.caseRef.trim() : "";
+            values.caseRef != null ? "q=" + values.caseRef.trim() + "&" : "";
+
         searchString +=
-            values.lpaTypes != null
+            values.lpaTypes != null ? "lpa=" + values.lpaTypes + "&" : "";
-                ? (typeof values.caseRef == "undefined" ? "?" : "&") +
-                  "lpa=" +
-                  values.lpaTypes
-                : "";
 
         searchString +=
             values.appealTypes != null
-                ? (typeof values.caseRef == "undefined" &&
+                ? "apt=" + values.appealTypes.split(",")[0] + "&"
-                  typeof values.lpaTypes == "undefined"
-                      ? "?"
-                      : "&") +
-                  ("apt=" + values.appealTypes.split(",")[0])
                 : "";
 
+        searchString +=
+            values.statusCode != null
+                ? "statuscode=" + values.statusCode + "&"
+                : "";
+
+        searchString = "?" + searchString.slice(0, -1);
+
+        console.log(searchString);
+
         router.replace(
-            (router.locale == "cy"
+            router.locale == "cy"
-                ? "/fymhorth/canlyniadauchwiliouwch"
+                ? (myportal == true ? "/fymhorth" : "") +
-                : "/myportal/advancedsearchresults") + searchString,
+                      "/canlyniadauchwiliouwch" +
-            null,
+                      searchString
-            {
+                : (myportal == true ? "/myportal" : "") +
-                shallow: true,
+                      "/advancedsearchresults" +
-            }
+                      searchString
         );
     };
 
@@ -372,6 +472,49 @@ let AdvancedSearch = (props) => {
                                             label={t("search:lpa-label")}
                                             errormsg="Local authority is required"
                                         />
+
+                                        <Field
+                                            name="statusCode"
+                                            id="statusCode"
+                                            component={RenderCaseStatusList}
+                                            optionsObj={[
+                                                {
+                                                    "value": "In Progress",
+                                                    "value_cy": "Ar y gweill",
+                                                    "statuscode": 1,
+                                                },
+                                                {
+                                                    "value": "On Hold",
+                                                    "value_cy": "Ar Dal",
+                                                    "statuscode": 2,
+                                                },
+                                                {
+                                                    "value":
+                                                        "Waiting for details",
+                                                    "value_cy":
+                                                        "Aros am fanylion",
+                                                    "statuscode": 3,
+                                                },
+                                                {
+                                                    "value": "Researching",
+                                                    "value_cy": "Ymchwilio",
+                                                    "statuscode": 4,
+                                                },
+                                                {
+                                                    "value": "Case Closed",
+                                                    "value_cy": "Achos ar Gau",
+                                                    "statuscode": 5,
+                                                },
+                                                {
+                                                    "value": "Canceled",
+                                                    "value_cy": "Wedi'i ganslo",
+                                                    "statuscode": 6,
+                                                },
+                                            ]}
+                                            //validate={[required]}
+                                            label={"Case Status"}
+                                            errormsg="Local authority is required"
+                                        />
                                         {/* <fieldset className="govuk-fieldset">
                                             <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
                                                 <h3 className="govuk-heading-m">
@@ -461,6 +604,7 @@ let AdvancedSearch = (props) => {
                                     type="submit"
                                     name="search"
                                     className="govuk-button"
+                                    disabled={pristine}
                                 >
                                     {t("common:search-button")}
                                 </button>

components/search/dnssearchresults.js

@@ -1,13 +1,12 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { setCurrentReference } from "../../store/currentView/action";
 import { connect } from "react-redux";
 import jsonpath from "jsonpath";
 import _ from "lodash";
 import transLookup from "../../data/lookuptranslations.json";
 import PaginationControl from "./pagination";
-import { useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 import LoadingOverlay from "react-loading-overlay";
 import {
     getBasicDNSSearchPaged,
@@ -19,7 +18,25 @@ import {
     setSearchResults,
     setSearchDetails,
 } from "../../store/searchOutput/action";
-import { getSearchDetailsPaged } from "../utils";
+import { getSearchDetailsPaged, getFormCollectionByID } from "../utils";
+import {
+    currentViewActionTypes,
+    setCurrentReference,
+    setCurrentPage,
+} from "../../store/currentView/action";
+import GoogleMapReact from "google-map-react";
+import { parseCookies, setCookie, destroyCookie } from "nookies";
+import {
+    setWatchedCases,
+    setWatchedCasesDetails,
+} from "../../store/watchedCases/action";
+import {
+    createWatchedCases,
+    getWatchedCasesProxy,
+    getPortalModuleDetailsProxy,
+    deleteWatchedCases,
+} from "../../actions";
+import OSPoint from "ospoint";
 
 const DNSSearchResults = (props) => {
     const {
@@ -30,6 +47,13 @@ const DNSSearchResults = (props) => {
         setSearchResults,
         setSearchDetails,
         advancedSearch,
+        setCurrentPage,
+        dnsCoords,
+        myportal,
+        watchedCases,
+        setWatchedCases,
+        setWatchedCasesDetails,
+        showMap,
     } = props;
     let { t } = useTranslation();
 
@@ -38,13 +62,172 @@ const DNSSearchResults = (props) => {
 
     var resultsArr = searchResultsObj.value || [];
 
-    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [searchLoaded, setSearchLoaded] = useState(false);
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
 
-    // let spinnerState = () => {
+    let dataArray = [];
-    //     showSpinnerState == true
+    //push your Json Data in the array
-    //         ? setShowSpinnerState(false)
+    if (showMap == "true") {
-    //         : setShowSpinnerState(true);
+        dnsCoords.map((item) => {
-    // };
+            let point = new OSPoint(
+                item.pinswg_anticipatedgridreferencenorthingtext || 0,
+                item.pinswg_anticipatedgridreferenceeastingtext || 0
+            );
+            let siteCoords = point.toOSGB36();
+            //console.log(siteCoords);
+            //console.log(item);
+            dataArray.push({
+                appellant:
+                    item[
+                        "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
+                    ],
+                name: item.pinswg_projectname,
+                lat: parseFloat(siteCoords.latitude),
+                lng: parseFloat(siteCoords.longitude),
+                title: item.pinswg_name,
+            });
+        });
+    }
+
+    //console.log(dataArray);
+
+    const ModelsMap = (map, maps) => {
+        //instantiate array that will hold your Json Data
+        //console.log("here");
+        var prev_infowindow = false;
+        //Loop through the dataArray to create a marker per data using the coordinates in the json
+        console.log(dataArray.length);
+        for (let i = 0; i < dataArray.length; i++) {
+            const infowindow = new google.maps.InfoWindow({
+                content:
+                    "<div>" +
+                    (_.isEmpty(dataArray[i].name)
+                        ? ""
+                        : dataArray[i].name.indexOf(";") > 0
+                        ? router.locale == "cy"
+                            ? dataArray[i].name.split(";")[1]
+                            : dataArray[i].name.split(";")[0]
+                        : dataArray[i].name) +
+                    "</div>" +
+                    (dataArray[i].appellant != null
+                        ? "<div>" + dataArray[i].appellant + "</div>"
+                        : "") +
+                    "<div>" +
+                    dataArray[i].title +
+                    "</div>",
+            });
+            let marker = new maps.Marker({
+                position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
+                title: _.isEmpty(dataArray[i].name)
+                    ? ""
+                    : dataArray[i].name.indexOf(";") > 0
+                    ? router.locale == "cy"
+                        ? dataArray[i].name.split(";")[1]
+                        : dataArray[i].name.split(";")[0]
+                    : dataArray[i].name,
+                map,
+            });
+            marker.addListener("click", () => {
+                if (prev_infowindow) {
+                    prev_infowindow.close();
+                }
+
+                prev_infowindow = infowindow;
+                infowindow.open({
+                    anchor: marker,
+                    map,
+                    shouldFocus: true,
+                });
+            });
+        }
+    };
+
+    let spinnerState = () => {
+        showSpinnerState == true
+            ? setShowSpinnerState(false)
+            : setShowSpinnerState(true);
+    };
+
+    const [orderByState, setOrderbyState] = useState("createdon");
+    const [fieldSortState, setfieldSortState] = useState("asc");
+    const [selectedOption, setSelectedOption] = useState(10);
+
+    const cookies = parseCookies();
+
+    const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
+        let updateBody = {
+            "pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
+            "pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
+            "pinswg_appealcasetype": +appealType,
+        };
+
+        createWatchedCases(updateBody)
+            .then((data) => data)
+            .then(() => {
+                getWatchedCasesProxy(cookies.pinsUser).then((data) => {
+                    setWatchedCases(data),
+                        getDetails(data, "myWatchedCases").then((data) => {
+                            setWatchedCasesDetails(data);
+                        });
+                });
+            });
+    };
+
+    const isWatchedCase = (whichIncident) => {
+        let isWatched = jsonpath.query(
+            watchedCases,
+            "$..value[?(@._pinswg_watchedcase_value=='" + whichIncident + "')]"
+        );
+
+        return isWatched;
+    };
+
+    const deleteItem = (caseID, topThreeType) => {
+        let cookies = parseCookies();
+        topThreeType == "watchedCases" &&
+            deleteWatchedCases(caseID)
+                .then((data) => data)
+                .then(() => {
+                    getWatchedCasesProxy(cookies.pinsUser).then((data) => {
+                        setWatchedCases(data),
+                            getDetails(data, "myWatchedCases").then((data) => {
+                                setWatchedCasesDetails(data);
+                            });
+                    });
+                });
+    };
+
+    const getDetails = (resultsObj, detailsType) => {
+        //console.log(resultsObj);
+        let detailsArr = [];
+        resultsObj = resultsObj.value;
+        const detailsObj = resultsObj.map((searchDetail, index) => {
+            if (searchDetail.pinswg_appealcasetype == null) {
+                console.log(
+                    detailsType != "myWatchedCases"
+                        ? searchDetail.ticketnumber
+                        : searchDetail[
+                              "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                          ]
+                );
+            } else {
+                detailsArr.push(
+                    getPortalModuleDetailsProxy(
+                        getFormCollectionByID(
+                            searchDetail.pinswg_appealcasetype
+                        ).LogicalCollectionName,
+                        detailsType != "myWatchedCases"
+                            ? searchDetail.ticketnumber
+                            : searchDetail[
+                                  "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
+                              ]
+                    )
+                );
+            }
+        });
+        //console.log(detailsArr);
+        return Promise.all(detailsArr);
+    };
 
     const ResultsView = (resultsArr) => {
         return (
@@ -53,29 +236,105 @@ const DNSSearchResults = (props) => {
                     <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-16 results_wider  ">
-                                {t("search:searchresults-case-reference-label")}
+                                <button
+                                    type="button"
+                                    onClick={() => sortDataBy("title")}
+                                    className={
+                                        orderByState == "title"
+                                            ? fieldSortState == "asc"
+                                                ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                                : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                    }
+                                >
+                                    {t(
+                                        "search:searchresults-case-reference-label"
+                                    )}
+                                </button>
                             </dd>
                             <dd className="govuk-summary-list__key govuk-!-font-size-16">
                                 {t("search:searchresults-site-address-label")}
                             </dd>
                             <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                                <button
+                                    type="button"
+                                    onClick={() =>
+                                        sortDataBy("_customerid_value")
+                                    }
+                                    className={
+                                        orderByState == "_customerid_value"
+                                            ? fieldSortState == "asc"
+                                                ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                                : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                    }
+                                >
                                     {t("search:searchresults-applicant-label")}
+                                </button>
                             </dd>
                             <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                                <button
+                                    type="button"
+                                    onClick={() =>
+                                        sortDataBy(
+                                            "_pinswg_associatedlpa_value"
+                                        )
+                                    }
+                                    className={
+                                        orderByState ==
+                                        "_pinswg_associatedlpa_value"
+                                            ? fieldSortState == "asc"
+                                                ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                                : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                    }
+                                >
                                     {t("search:searchresults-authority-label")}
+                                </button>
                             </dd>
 
                             <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                                <button
+                                    type="button"
+                                    onClick={() => sortDataBy("statuscode")}
+                                    className={
+                                        orderByState == "statuscode"
+                                            ? fieldSortState == "asc"
+                                                ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                                : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                    }
+                                >
                                     {t("search:searchresults-status-label")}
+                                </button>
                             </dd>
+                            {myportal == true && (
+                                <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
+                            )}
                         </div>
 
-                        {resultsArr.map((item, key) => {
+                        {showSpinnerState == true ? (
+                            <div className="govuk-summary-list__row">
+                                <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9 govuk-!-font-weight-bold govuk-!-font-size-20  ">
+                                    {t("common:spinner-fetching-data")}
+                                    <img
+                                        className="data-loading-icon"
+                                        src="/assets/images/loading.gif"
+                                        alt={
+                                            router.locale == "cy"
+                                                ? "Nôl data"
+                                                : "Fetching data"
+                                        }
+                                    />
+                                </div>
+                            </div>
+                        ) : (
+                            resultsArr.map((item, key) => {
                                 let detailsObj = jsonpath.query(
                                     searchDetailsObj,
-                                "$..value[?(@.pinswg_name=='" +
+                                    '$..value[?(@.pinswg_name=="' +
                                         item.title +
-                                    "')]"
+                                        '")]'
                                 );
                                 detailsObj = detailsObj[0];
 
@@ -88,8 +347,14 @@ const DNSSearchResults = (props) => {
                                             <Link
                                                 href={
                                                     router.locale == "cy"
-                                                    ? "/manyliondns"
+                                                        ? (myportal == true
-                                                    : "/dnsdetails"
+                                                              ? "/fymhorth"
+                                                              : "") +
+                                                          "/manyliondns"
+                                                        : (myportal == true
+                                                              ? "/myportal"
+                                                              : "") +
+                                                          "/dnsdetails"
                                                 }
                                             >
                                                 <a
@@ -104,6 +369,7 @@ const DNSSearchResults = (props) => {
                                                                 item.incidentid,
                                                             "appealType":
                                                                 item.pinswg_appealcasetype,
+                                                            "showMap": showMap,
                                                         });
                                                     }}
                                                 >
@@ -126,32 +392,71 @@ const DNSSearchResults = (props) => {
                                             </span>
                                             {_.has(
                                                 detailsObj,
-                                            "pinswg_siteaddressline1"
+                                                "pinswg_projectlocation"
                                             )
-                                            ? detailsObj.pinswg_siteaddressline1
+                                                ? detailsObj.pinswg_projectlocation !=
+                                                  null
+                                                    ? detailsObj.pinswg_projectlocation.indexOf(
+                                                          ";"
+                                                      ) < 0
+                                                        ? detailsObj.pinswg_projectlocation
+                                                        : router.locale == "cy"
+                                                        ? detailsObj.pinswg_projectlocation.split(
+                                                              ";"
+                                                          )[1]
+                                                        : detailsObj.pinswg_projectlocation.split(
+                                                              ";"
+                                                          )[0]
+                                                    : ""
                                                 : ""}
-                                        <br />
                                             {_.has(
                                                 detailsObj,
                                                 "pinswg_siteaddressline1"
+                                            )
+                                                ? detailsObj.pinswg_siteaddressline1
+                                                : ""}
+                                            {_.has(
+                                                detailsObj,
+                                                "pinswg_siteaddressline1"
+                                            ) &&
+                                                detailsObj.pinswg_siteaddressline1 !=
+                                                    null && <br />}
+                                            {_.has(
+                                                detailsObj,
+                                                "pinswg_siteaddressline2"
                                             )
                                                 ? detailsObj.pinswg_siteaddressline2
                                                 : ""}
-                                        <br />
+                                            {_.has(
+                                                detailsObj,
+                                                "pinswg_siteaddressline2"
+                                            ) &&
+                                                detailsObj.pinswg_siteaddressline2 !=
+                                                    null && <br />}
                                             {_.has(
                                                 detailsObj,
                                                 "pinswg_siteaddressline1"
                                             )
                                                 ? detailsObj.pinswg_siteaddresstown
                                                 : ""}
-                                        <br />
+                                            {_.has(
+                                                detailsObj,
+                                                "pinswg_siteaddresstown"
+                                            ) &&
+                                                detailsObj.pinswg_siteaddresstown !=
+                                                    null && <br />}
                                             {_.has(
                                                 detailsObj,
                                                 "pinswg_siteaddressline1"
                                             )
                                                 ? detailsObj.pinswg_siteaddresscounty
                                                 : ""}
-                                        <br />
+                                            {_.has(
+                                                detailsObj,
+                                                "pinswg_siteaddresscounty"
+                                            ) &&
+                                                detailsObj.pinswg_siteaddresscounty !=
+                                                    null && <br />}
                                             {_.has(
                                                 detailsObj,
                                                 "pinswg_siteaddressline1"
@@ -219,14 +524,65 @@ const DNSSearchResults = (props) => {
                                                       "statuscode@OData.Community.Display.V1.FormattedValue"
                                                   ] || "N/A"}
                                         </dd>
+                                        {myportal == true && (
+                                            <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
+                                                {isWatchedCase(item.incidentid)
+                                                    .length >
+                                                    0 ==
+                                                true ? (
+                                                    <span
+                                                        className="govuk-summary-list__actionLink watched_link"
+                                                        onClick={() => {
+                                                            deleteItem(
+                                                                isWatchedCase(
+                                                                    item.incidentid
+                                                                )[0]
+                                                                    .pinswg_watchlistid,
+
+                                                                "watchedCases"
+                                                            );
+                                                            alert(
+                                                                "You have stopped watching case " +
+                                                                    item.title
+                                                            );
+                                                        }}
+                                                        title="Stop watching this case"
+                                                    >
+                                                        <span className="eye"></span>
+                                                    </span>
+                                                ) : (
+                                                    <span
+                                                        className="govuk-summary-list__actionLink watchLink"
+                                                        onClick={() => {
+                                                            selectWatchedCase(
+                                                                cookies.pinsUser,
+                                                                item.incidentid,
+                                                                item.pinswg_appealcasetype
+                                                            );
+                                                            alert(
+                                                                "You are watching case " +
+                                                                    item.title
+                                                            );
+                                                        }}
+                                                        title="Watch this case"
+                                                    >
+                                                        <span className="eye"></span>
+                                                    </span>
+                                                )}
+                                            </dd>
+                                        )}
                                     </div>
                                 );
-                        })}
+                            })
+                        )}
                     </dl>
                     <PaginationControl
+                        showNoOfRecords={selectedOption}
                         currentPage={currentPage}
                         searchResultsObj={searchResultsObj}
-                        // spinnerState={spinnerState}
+                        orderBy={orderByState}
+                        fieldSort={fieldSortState}
+                        spinnerState={spinnerState}
                         getSearchPageResults={getSearchPageResults}
                     />
                 </div>
@@ -255,27 +611,71 @@ const DNSSearchResults = (props) => {
               )
             : pagesCount;
 
-    const getSearchPageResults = (pageNumber) => {
+    const getSearchPageResults = useCallback(
+        (pageNumber, orderBy, fieldSort) => {
             //console.log(advancedSearch, searchString, pageNumber);
 
-        getBasicDNSSearchPaged(pageNumber)
+            getBasicDNSSearchPaged(
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption
+            )
                 .then((data) => {
-                setSearchResults(data);
                     return data;
                 })
                 .then((data) => {
-                //console.log("getting details", data);
+                    setSearchResults(data);
                     return getSearchDetailsPaged(data).then((data) => {
                         setSearchDetails(data);
-                    //setShowSpinnerState(false);
+                        setShowSpinnerState(false);
                     });
                 });
+        },
+        [selectedOption, setSearchDetails, setSearchResults]
+    );
+
+    const sortDataBy = (whichField) => {
+        setOrderbyState(whichField);
+        setfieldSortState("asc");
+
+        getSearchPageResults(1, whichField, fieldSortState);
+        whichField == orderByState
+            ? fieldSortState == "desc"
+                ? setfieldSortState("asc")
+                : setfieldSortState("desc")
+            : setfieldSortState("asc");
+        setCurrentPage(1);
+        setShowSpinnerState(true);
     };
 
+    useEffect(() => {
+        if (searchLoaded) {
+            if (selectedOption) {
+                setShowSpinnerState(true);
+                getSearchPageResults(1, orderByState, fieldSortState);
+            }
+        } else {
+            setSearchLoaded(true);
+        }
+    }, [
+        selectedOption,
+        fieldSortState,
+        orderByState,
+        searchLoaded,
+        getSearchPageResults,
+    ]);
     return (
         <>
             <div className="govuk-grid-row">
-                <div className="govuk-grid-column-two-thirds">
+                <div className="flex-container grid-row govuk-body case">
+                    <div
+                        className={
+                            showMap == "true"
+                                ? "govuk-grid-column-one-half"
+                                : "govuk-grid-column-two-thirds"
+                        }
+                    >
                         <h1 className="govuk-heading-l">
                             {t("dnsApplications:page-title")}
                         </h1>
@@ -283,14 +683,82 @@ const DNSSearchResults = (props) => {
                             {t("dnsApplications:page-intro-paragraph-1")}
                         </p>
                         <ul className="govuk-list govuk-list--bullet">
-                        <li> {t("dnsApplications:page-intro-list-item-1")}</li>
+                            <li>
+                                {" "}
+                                {t("dnsApplications:page-intro-list-item-1")}
+                            </li>
 
-                        <li> {t("dnsApplications:page-intro-list-item-2")}</li>
+                            <li>
+                                {" "}
+                                {t("dnsApplications:page-intro-list-item-2")}
+                            </li>
 
-                        <li> {t("dnsApplications:page-intro-list-item-3")}</li>
+                            <li>
+                                {" "}
+                                {t("dnsApplications:page-intro-list-item-3")}
+                            </li>
                         </ul>
                     </div>
+
+                    {showMap == "true" && (
+                        <div className="govuk-grid-column-one-half">
+                            <div
+                                style={{
+                                    height: "45vh",
+                                    width: "100%",
+                                }}
+                            >
+                                <GoogleMapReact
+                                    options={function (maps) {
+                                        return {
+                                            overviewMapControl: true,
+                                            mapTypeControl: true,
+                                        };
+                                    }}
+                                    bootstrapURLKeys={{
+                                        key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
+                                    }}
+                                    defaultCenter={{
+                                        id: "",
+                                        lat: 52.412272,
+                                        lng: -3.437989,
+                                    }}
+                                    defaultZoom={7}
+                                    onGoogleApiLoaded={({ map, maps }) =>
+                                        ModelsMap(map, maps)
+                                    }
+                                />
                             </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+            {searchResultsObj["@odata.count"] > 5 && (
+                <div id="recordCountSelect" className="govuk-grid-row">
+                    <div className="govuk-form-group">
+                        <label className="govuk-label-s " htmlFor="sort">
+                            {t("search:searchresults-show-records-label-a")}
+                            <select
+                                onChange={(e) => {
+                                    setSelectedOption(e.target.value);
+                                    setCurrentPage(1);
+                                }}
+                                value={selectedOption}
+                                className="govuk-select"
+                                id="showNumberOfRecords"
+                                name="showNumberOfRecords"
+                            >
+                                <option value="5">5</option>
+                                <option value="10">10</option>
+                                <option value="20">20</option>
+                                <option value="30">30</option>
+                                <option value="50">50</option>
+                            </select>{" "}
+                            {t("search:searchresults-show-records-label-b")}
+                        </label>
+                    </div>
+                </div>
+            )}
             {resultsArr.length > 0 ? (
                 ResultsView(resultsArr)
             ) : (
@@ -320,6 +788,15 @@ const mapDispatchToProps = (dispatch) => {
         setSearchDetails: (searchDetailsObj) => {
             dispatch(setSearchDetails(searchDetailsObj));
         },
+        setWatchedCases: (watchedCases) => {
+            dispatch(setWatchedCases(watchedCases));
+        },
+        setWatchedCasesDetails: (watchedCasesDetails) => {
+            dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        },
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
     };
 };
 

components/search/pagination.js

@@ -1,21 +1,30 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useState } from "react";
+import { connect } from "react-redux";
+import { setCurrentPage } from "../../store/currentView/action";
 
 const PaginationControl = (props) => {
     const {
+        showNoOfRecords,
+        orderBy,
+        fieldSort,
         searchString,
         searchResultsObj,
         currentPage,
-        // spinnerState,
+        spinnerState,
         getSearchPageResults,
+        setCurrentPage,
     } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    const pagesCount = Math.ceil(searchResultsObj["@odata.count"] / 10);
+    const pagesCount = Math.ceil(
+        searchResultsObj["@odata.count"] / showNoOfRecords
+    );
 
     const getRange = (start, end) => {
         //console.log(start, end);
@@ -27,13 +36,15 @@ const PaginationControl = (props) => {
     const paginationNumbers = (currentPage, pageCount) => {
         //console.log(currentPage);
         let delta;
-        if (pageCount <= 10) {
+
+        if (pageCount <= 7) {
             // delta === 7: [1 2 3 4 5 6 7]
-            delta = 10;
+            delta = 7;
         } else {
             // delta === 2: [1 ... 4 5 6 ... 10]
             // delta === 4: [1 2 3 4 5 ... 10]
-            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 6;
+            //delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
+            delta = currentPage > 4 && currentPage < pageCount - 3 ? 4 : 4;
         }
 
         const range = {
@@ -69,20 +80,31 @@ const PaginationControl = (props) => {
         return pages;
     };
 
-    const paginationArray = paginationNumbers(currentPage, pagesCount);
+    const paginationArray = paginationNumbers(
-
+        props.currentView.currentPage,
+        pagesCount
+    );
     return (
         <>
-            {" "}
+            {pagesCount > 1 && (
                 <div className="govuk-!-margin-bottom-7 ">
                     <div className="govuk-grid-row paginationWrapper">
                         <div className="govuk-grid-column-one-quarter paginationPrevious">
-                        {currentPage != 1 ? (
+                            {props.currentView.currentPage != 1 ? (
                                 <span
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                     onClick={() => {
-                                    // spinnerState(),
+                                        spinnerState(),
-                                    getSearchPageResults(currentPage - 1);
+                                            setCurrentPage(
+                                                props.currentView.currentPage -
+                                                    1
+                                            ),
+                                            getSearchPageResults(
+                                                props.currentView.currentPage -
+                                                    1,
+                                                orderBy,
+                                                fieldSort
+                                            );
                                     }}
                                 >
                                     {t("common:previous-link-button")}
@@ -95,7 +117,7 @@ const PaginationControl = (props) => {
                         </div>
                         <div className="govuk-grid-column-one-half paginationContainer">
                             {paginationArray.map((e, i) =>
-                            currentPage == i + 1 ? (
+                                props.currentView.currentPage == e ? (
                                     <span
                                         key={i}
                                         className=" govuk-body govuk-!-padding-2 govuk-!-font-weight-bold "
@@ -114,9 +136,13 @@ const PaginationControl = (props) => {
                                         className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
                                         key={i}
                                         onClick={() => {
-                                        // spinnerState();
+                                            spinnerState(),
-                                        console.log(i + 1);
+                                                setCurrentPage(e),
-                                        getSearchPageResults(i + 1);
+                                                getSearchPageResults(
+                                                    e,
+                                                    orderBy,
+                                                    fieldSort
+                                                );
                                         }}
                                     >
                                         {e}
@@ -125,12 +151,21 @@ const PaginationControl = (props) => {
                             )}
                         </div>
                         <div className="govuk-grid-column-one-quarter paginationNext">
-                        {currentPage != pagesCount ? (
+                            {props.currentView.currentPage < pagesCount ? (
                                 <span
                                     className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                     onClick={() => {
-                                    // spinnerState(),
+                                        spinnerState(),
-                                    getSearchPageResults(currentPage + 1);
+                                            setCurrentPage(
+                                                props.currentView.currentPage +
+                                                    1
+                                            ),
+                                            getSearchPageResults(
+                                                props.currentView.currentPage +
+                                                    1,
+                                                orderBy,
+                                                fieldSort
+                                            );
                                     }}
                                 >
                                     {t("common:next-link-button")}
@@ -148,8 +183,23 @@ const PaginationControl = (props) => {
                         {t("common:of-label")} {pagesCount}
                     </div>
                 </div>
+            )}
         </>
     );
 };
 
-export default PaginationControl;
+const mapStateToProps = (state) => {
+    return {
+        currentView: state.currentView,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PaginationControl);

components/search/searchresults.js

@@ -4,6 +4,7 @@ import useTranslation from "next-translate/useTranslation";
 import {
     currentViewActionTypes,
     setCurrentReference,
+    setCurrentPage,
 } from "../../store/currentView/action";
 import { connect } from "react-redux";
 import jsonpath from "jsonpath";
@@ -16,7 +17,7 @@ import {
     getAdvancedSearchPaged,
 } from "../../actions";
 import data from "../../data/collections.json";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import LoadingOverlay from "react-loading-overlay";
 
 import {
@@ -43,6 +44,7 @@ import {
     getPortalModuleDetailsProxy,
     deleteWatchedCases,
 } from "../../actions";
+import { useSession, signIn, signOut } from "next-auth/react";
 
 const SearchResults = (props) => {
     const {
@@ -58,21 +60,28 @@ const SearchResults = (props) => {
         setWatchedCases,
         setWatchedCasesDetails,
         isLinkedCase,
+        setCurrentPage,
+        showLoginCheck,
     } = props;
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const { data: session } = useSession();
 
     var resultsArr = searchResultsObj.value || [];
 
-    // const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [searchLoaded, setSearchLoaded] = useState(false);
+    const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(10);
+    const [orderByState, setOrderbyState] = useState("createdon");
+    const [fieldSortState, setfieldSortState] = useState("asc");
 
-    // let spinnerState = () => {
+    let spinnerState = () => {
-    //     showSpinnerState == true
+        showSpinnerState == true
-    //         ? setShowSpinnerState(false)
+            ? setShowSpinnerState(false)
-    //         : setShowSpinnerState(true);
+            : setShowSpinnerState(true);
-    // };
+    };
 
     const cookies = parseCookies();
 
@@ -157,36 +166,122 @@ const SearchResults = (props) => {
                 <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-16 results_wider  ">
+                            <button
+                                type="button"
+                                onClick={() => sortDataBy("title")}
+                                className={
+                                    orderByState == "title"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("search:searchresults-case-reference-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
                             {t("search:searchresults-site-address-label")}
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            <button
+                                type="button"
+                                onClick={() => sortDataBy("_customerid_value")}
+                                className={
+                                    orderByState == "_customerid_value"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("search:searchresults-applicant-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            <button
+                                type="button"
+                                onClick={() =>
+                                    sortDataBy("_pinswg_associatedlpa_value")
+                                }
+                                className={
+                                    orderByState ==
+                                    "_pinswg_associatedlpa_value"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("search:searchresults-authority-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            <button
+                                type="button"
+                                onClick={() =>
+                                    sortDataBy("pinswg_appealcasetype")
+                                }
+                                className={
+                                    orderByState == "pinswg_appealcasetype"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("search:searchresults-case-type-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
+                            {/* {t("search:searchresults-status-label")} */}
+                            <button
+                                type="button"
+                                onClick={() => sortDataBy("statuscode")}
+                                className={
+                                    orderByState == "statuscode"
+                                        ? fieldSortState == "asc"
+                                            ? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
+                                            : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
+                                        : `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
+                                }
+                            >
                                 {t("search:searchresults-status-label")}
+                            </button>
                         </dd>
                         {myportal == true && (
                             <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
                         )}
                     </div>
-
+                    {showSpinnerState == true ? (
-                    {resultsArr.map((item, key) => {
+                        <div className="govuk-summary-list__row">
+                            <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9 govuk-!-font-weight-bold govuk-!-font-size-20  ">
+                                {t("common:spinner-fetching-data")}
+                                <img
+                                    className="data-loading-icon"
+                                    src="/assets/images/loading.gif"
+                                    alt={
+                                        router.locale == "cy"
+                                            ? "Nôl data"
+                                            : "Fetching data"
+                                    }
+                                />
+                            </div>
+                        </div>
+                    ) : (
+                        resultsArr.map((item, key) => {
                             let detailsObj = jsonpath.query(
                                 searchDetailsObj,
-                            "$..value[?(@.pinswg_name=='" + item.title + "')]"
+                                '$..value[?(@.pinswg_name=="' +
+                                    item.title +
+                                    '")]'
                             );
                             detailsObj = detailsObj[0];
                             return (
-                            <div className="govuk-summary-list__row" key={key}>
+                                <div
+                                    className="govuk-summary-list__row"
+                                    key={key}
+                                >
                                     <dd className="govuk-summary-list__value govuk-!-font-size-16  ">
                                         <Link
                                             href={
@@ -211,6 +306,8 @@ const SearchResults = (props) => {
                                                             item.incidentid,
                                                         "appealType":
                                                             item.pinswg_appealcasetype,
+                                                        "showreps":
+                                                            props.showLoginCheck,
                                                     });
                                                 }}
                                             >
@@ -231,6 +328,25 @@ const SearchResults = (props) => {
                                             )}
                                             :
                                         </span>
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_projectlocation"
+                                        )
+                                            ? detailsObj.pinswg_projectlocation !=
+                                              null
+                                                ? detailsObj.pinswg_projectlocation.indexOf(
+                                                      ";"
+                                                  ) < 0
+                                                    ? detailsObj.pinswg_projectlocation
+                                                    : router.locale == "cy"
+                                                    ? detailsObj.pinswg_projectlocation.split(
+                                                          ";"
+                                                      )[1]
+                                                    : detailsObj.pinswg_projectlocation.split(
+                                                          ";"
+                                                      )[0]
+                                                : ""
+                                            : ""}
                                         {_.has(
                                             detailsObj,
                                             "pinswg_siteaddressline1"
@@ -261,7 +377,10 @@ const SearchResults = (props) => {
                                         ) &&
                                             detailsObj.pinswg_siteaddressline2 !=
                                                 null && <br />}
-                                    {_.has(detailsObj, "pinswg_siteaddresstown")
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_siteaddresstown"
+                                        )
                                             ? detailsObj.pinswg_siteaddresstown
                                             : ""}
                                         {_.has(
@@ -351,7 +470,9 @@ const SearchResults = (props) => {
                                     </dd>
                                     <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                         <span className="results-visually-hidden">
-                                        {t("search:searchresults-status-label")}
+                                            {t(
+                                                "search:searchresults-status-label"
+                                            )}
                                             :
                                         </span>
 
@@ -370,7 +491,8 @@ const SearchResults = (props) => {
                                     </dd>
                                     {myportal == true && (
                                         <dd className="govuk-summary-list__value govuk-!-font-size-14 govuk-summary-list__action">
-                                        {isWatchedCase(item.incidentid).length >
+                                            {isWatchedCase(item.incidentid)
+                                                .length >
                                                 0 ==
                                             true ? (
                                                 <span
@@ -379,7 +501,8 @@ const SearchResults = (props) => {
                                                         deleteItem(
                                                             isWatchedCase(
                                                                 item.incidentid
-                                                        )[0].pinswg_watchlistid,
+                                                            )[0]
+                                                                .pinswg_watchlistid,
 
                                                             "watchedCases"
                                                         );
@@ -390,11 +513,11 @@ const SearchResults = (props) => {
                                                     }}
                                                     title="Stop watching this case"
                                                 >
-                                                &minus;
+                                                    <span className="eye"></span>
                                                 </span>
                                             ) : (
                                                 <span
-                                                className="govuk-summary-list__actionLink"
+                                                    className="govuk-summary-list__actionLink watchLink"
                                                     onClick={() => {
                                                         selectWatchedCase(
                                                             cookies.pinsUser,
@@ -408,19 +531,46 @@ const SearchResults = (props) => {
                                                     }}
                                                     title="Watch this case"
                                                 >
-                                                +
+                                                    <span className="eye"></span>
                                                 </span>
                                             )}
                                         </dd>
                                     )}
+                                    {showLoginCheck == "true" && !session && (
+                                        <dd>
+                                            <span
+                                                className="govuk-summary-list__actionLink watchLink"
+                                                onClick={() => {
+                                                    signIn("email");
+                                                    // selectWatchedCase(
+                                                    //     cookies.pinsUser,
+                                                    //     item.incidentid,
+                                                    //     item.pinswg_appealcasetype
+                                                    // );
+                                                    alert(
+                                                        "Trying to watch case " +
+                                                            item.title
+                                                    );
+                                                }}
+                                                title="Watch this case"
+                                            >
+                                                <span className="eye"></span>
+                                            </span>
+                                        </dd>
+                                    )}
                                 </div>
                             );
-                    })}
+                        })
+                    )}
                 </dl>
+
                 <PaginationControl
+                    showNoOfRecords={selectedOption}
                     currentPage={currentPage}
                     searchResultsObj={searchResultsObj}
-                    //  spinnerState={spinnerState}
+                    orderBy={orderByState}
+                    fieldSort={fieldSortState}
+                    spinnerState={spinnerState}
                     getSearchPageResults={getSearchPageResults}
                 />
             </>
@@ -448,7 +598,8 @@ const SearchResults = (props) => {
               )
             : pagesCount;
 
-    const getSearchPageResults = (pageNumber) => {
+    const getSearchPageResults = useCallback(
+        (pageNumber, orderBy, fieldSort) => {
             //console.log(advancedSearch, searchString, pageNumber);
 
             if (advancedSearch) {
@@ -456,36 +607,86 @@ const SearchResults = (props) => {
                     ...searchString.map(([key, val]) => ({ [key]: val }))
                 );
 
-            getAdvancedSearchPaged(searchoObj, pageNumber)
+                getAdvancedSearchPaged(
-                .then((data) => {
+                    searchoObj,
-                    //console.log(data);
+                    pageNumber,
-                    setSearchResults(data);
+                    orderBy,
-                    return data;
+                    fieldSort,
-                })
+                    selectedOption
+                )
+                    .then((data) => data)
                     .then((data) => {
                         //console.log("getting details", data);
+                        setSearchResults(data);
                         return getSearchDetailsPaged(data).then((data) => {
                             setSearchDetails(data);
-                        //setShowSpinnerState(false);
+                            setShowSpinnerState(false);
                         });
                     });
             } else {
-            getBasicSearchPaged(searchString, pageNumber)
+                getBasicSearchPaged(
-                .then((data) => {
+                    searchString,
-                    //console.log(data);
+                    pageNumber,
-                    setSearchResults(data);
+                    orderBy,
-                    return data;
+                    fieldSort,
-                })
+                    selectedOption
+                )
+                    .then((data) => data)
                     .then((data) => {
                         //console.log("getting details", data);
+                        setSearchResults(data);
                         return getSearchDetailsPaged(data).then((data) => {
                             setSearchDetails(data);
-                        //setShowSpinnerState(false);
+                            setShowSpinnerState(false);
                         });
                     });
             }
+        },
+        [
+            advancedSearch,
+            searchString,
+            selectedOption,
+            setSearchDetails,
+            setSearchResults,
+        ]
+    );
+
+    const sortDataBy = (whichField) => {
+        setOrderbyState(whichField);
+        setfieldSortState("asc");
+
+        getSearchPageResults(1, whichField, fieldSortState);
+        whichField == orderByState
+            ? fieldSortState == "desc"
+                ? setfieldSortState("asc")
+                : setfieldSortState("desc")
+            : setfieldSortState("asc");
+        setCurrentPage(1);
+        setShowSpinnerState(true);
     };
 
+    useEffect(() => {
+        if (searchLoaded) {
+            if (selectedOption) {
+                setShowSpinnerState(true);
+                getSearchPageResults(1, orderByState, fieldSortState);
+            }
+        } else {
+            setSearchLoaded(true);
+        }
+    }, [
+        selectedOption,
+        fieldSortState,
+        orderByState,
+        searchLoaded,
+        getSearchPageResults,
+    ]);
+    // console.log(
+    //     "page is here ",
+    //     currentPage,
+    //     orderByState + " " + fieldSortState
+    // );
+
     return (
         <>
             <div className="govuk-grid-row">
@@ -519,6 +720,39 @@ const SearchResults = (props) => {
                             )}
                         </p>
                     )}
+                    {searchResultsObj["@odata.count"] > 5 && (
+                        <div id="recordCountSelect" className="">
+                            <div className="govuk-form-group">
+                                <label
+                                    className="govuk-label-s "
+                                    htmlFor="sort"
+                                >
+                                    {t(
+                                        "search:searchresults-show-records-label-a"
+                                    )}
+                                    <select
+                                        onChange={(e) => {
+                                            setSelectedOption(e.target.value);
+                                            setCurrentPage(1);
+                                        }}
+                                        value={selectedOption}
+                                        className="govuk-select"
+                                        id="showNumberOfRecords"
+                                        name="showNumberOfRecords"
+                                    >
+                                        <option value="5">5</option>
+                                        <option value="10">10</option>
+                                        <option value="20">20</option>
+                                        <option value="30">30</option>
+                                        <option value="50">50</option>
+                                    </select>{" "}
+                                    {t(
+                                        "search:searchresults-show-records-label-b"
+                                    )}
+                                </label>
+                            </div>
+                        </div>
+                    )}
                     {resultsArr.length > 0 ? (
                         ResultsView(resultsArr)
                     ) : (
@@ -558,6 +792,9 @@ const mapDispatchToProps = (dispatch) => {
         setWatchedCasesDetails: (watchedCasesDetails) => {
             dispatch(setWatchedCasesDetails(watchedCasesDetails));
         },
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        },
     };
 };
 

components/searchresults.js

@@ -14,6 +14,7 @@ export default function Search(props) {
         myportal,
         watchedCases,
         isLinkedCase,
+        showLoginCheck,
     } = props;
     let { t } = useTranslation();
 
@@ -50,6 +51,7 @@ export default function Search(props) {
                                 myportal={myportal}
                                 watchedCases={watchedCases}
                                 isLinkedCase={isLinkedCase}
+                                showLoginCheck={showLoginCheck}
                             />
                         </div>
                     </div>

components/timeout/index.js

@@ -0,0 +1,70 @@
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { destroyCookie } from "nookies";
+import { useState } from "react";
+import IdleTimer from "react-idle-timer";
+import TimeoutModal from "./timeoutmodal";
+import { useSession, signIn, signOut } from "next-auth/react";
+
+const TimeOut = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const [showModal, setShowModal] = useState(false);
+    const inactiveTimeOut = 1200; // in seconds
+    const reminderTimeout = 60; // in seconds
+
+    let idleTimer = null;
+    let logoutTimer = null;
+
+    let onIdle = () => {
+        togglePopup();
+        logoutTimer = setTimeout(() => {
+            handleLogout();
+        }, 1000 * reminderTimeout * 1);
+    };
+
+    let togglePopup = () => {
+        showModal == true ? setShowModal(false) : setShowModal(true);
+    };
+
+    let handleStayLoggedIn = () => {
+        if (logoutTimer) {
+            clearTimeout(logoutTimer);
+            logoutTimer = null;
+        }
+        idleTimer.reset();
+        togglePopup();
+    };
+
+    const handleLogout = () => {
+        console.info("////////////\n" + "logout" + "\n////////////");
+        window.localStorage.clear(),
+            destroyCookie({}, "pinsUser"),
+            signOut({ callbackUrl: "/logout" });
+    };
+
+    return (
+        <>
+            <IdleTimer
+                ref={(ref) => {
+                    idleTimer = ref;
+                }}
+                element={document}
+                stopOnIdle={true}
+                //onActive={console.log(" bbis active", idleTimer)}
+                onIdle={onIdle}
+                timeout={1000 * inactiveTimeOut * 1}
+            />
+            <TimeoutModal
+                remainingCountdown={reminderTimeout}
+                showModal={showModal}
+                togglePopup={togglePopup}
+                handleStayLoggedIn={handleStayLoggedIn}
+            />
+        </>
+    );
+};
+
+export default TimeOut;