Merged PR 1265: when click change linik values persisted

when click change linik values persisted Related work items: #12438
when click change linik values persisted
2024-10-22 07:50:47 +00:00 · 2024-10-21 15:39:28 +01:00 · 2024-10-16 11:44:21 +00:00 · 2024-10-16 12:41:37 +01:00 · 2024-10-10 10:32:20 +00:00 · 2024-10-10 11:30:02 +01:00
518 changed files with 234403 additions and 14530 deletions
@@ -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
@@ -0,0 +1,119 @@
+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 = 9b834097-03d7-409b-b038-ecfec31a394a
+//CLIENT_SECRET = 4Vt8Q~olL1hx7n01B0~tXf-N2YL5DyC_Fk6waagX
+CLIENT_SECRET = AU88Q~NBOVOXqwb4mBx9y.NMIZ9s1o7boqZoKcSE
+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 = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
+//CLIENT_SECRET = IXI8Q~D5oqsC-nrtayHHc~tUAfjQFzNiKVQ~fc2S
+//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 = true 
+SHOWFILEUPLOAD = "false"
+SHOWMAPS = "false"
+//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
+
+
+
+//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_NAME= "pedwdev"
+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
@@ -1,71 +1,142 @@
-
- 
 ACCESS_TOKEN_ENDPOINT = https://login.microsoftonline.com/
-TENANT = a8d860de-d5e1-45af-8376-d93f02e6b502
-//TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
+TENANT = 9ac1a5ab-cd58-409e-a1b6-6b10422a68f5
 GRANT_TYPE = "client_credentials"

 HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c
-NEXT_PUBLIC_HASHKEY = 028ffbae928d7191c0017f298260995f901d78eabde1436c0af0423459cc3715832136d84f68818d3a96399467b52143e273d4f3bf4ae190848891535421cd6c

+//CNR oauth CNR
+CLIENT_ID = 3125ac03-91ac-46a7-a166-0086f0ed90b3
+CLIENT_SECRET = bFq8Q~9VX5Ra3lKnGGIXsB.G6-ZGMx7LqyqXjdr4
+RELAY_ROOT = https://ar-ns-lz-pedw-cnr-uks-01.servicebus.windows.net/ar-hc-lz-pedw-cnr-uks-01/  
+RELAYURI = "ar-ns-lz-pedw-cnr-uks-01.servicebus.windows.net"
+RELAYPATH = "ar-hc-lz-pedw-cnr-uks-01"
+CRMURL = "devcrm2016.llcdt.gov.wales/DVPINS"

-//Dev oauth 
-//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"
+//New Dev oauth ESNR
+CLIENT_ID = 9b834097-03d7-409b-b038-ecfec31a394a
+CLIENT_SECRET = .Jf8Q~tKMObCJjhh_hy3J5AIctFrBalU4FS~tdxk
+RELAY_ROOT = https://ar-ns-lz-pedw-dev-uks-01.servicebus.windows.net/ar-hc-lz-pedw-dev-uks-01/  
+RELAYURI = "ar-ns-lz-pedw-dev-uks-01.servicebus.windows.net"
+RELAYPATH = "ar-hc-lz-pedw-dev-uks-01"
+CRMURL = "devcrm2016.llcdt.gov.wales/DVPINS"

+//New Test  
+CLIENT_ID = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
+CLIENT_SECRET = 6hT8Q~glL~jloWpGmvXw3UY37QFwjUE0r._jobEM
+RELAY_ROOT = https://ar-ns-lz-pedw-test-uks-01.servicebus.windows.net/ar-hc-lz-pedw-test-uks-01/  
+RELAYURI = "ar-ns-lz-pedw-test-uks-01.servicebus.windows.net"
+RELAYPATH = "ar-hc-lz-pedw-test-uks-01"
+CRMURL = "tscrm2016.llcdt.gov.wales/UATPINS"

-//Test Oauth
-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
+//Preprod Oauth WGO 
 //CLIENT_ID = ab6c4678-b31a-4eb3-b429-e039120e488a
-//CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
+////CLIENT_SECRET = Ioo7Q~RJfhWsE45wPsuHm1CzRk1SppnNN3lZF
+//CLIENT_SECRET = V288Q~P1lFMvvX9Xnkx2pLixK~GOREH983Owqc1E
 //RELAY_ROOT = https://pp-pedw-ns.servicebus.windows.net/pp-pedw-hc/
 //RELAYURI = "pp-pedw-ns.servicebus.windows.net"
 //RELAYPATH = "pp-pedw-hc"
+//CRMURL = "ppcrm2016.llc.gov.wales/PPPINSWales"

-
-
-//Prod Oauth
-//CLIENT_ID = 01904c07-9035-4cf9-a535-3945f6e470d2
-//CLIENT_SECRET = PRo7Q~GQoKSdARRqF-NOXQDx2Ka8UCINyvagk
+//Prod Oauth WGO
+//CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
+////CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
+//CLIENT_SECRET = tFk8Q~E.R-HFjROTu1sRKqwb_ONzy05uPYoF6awR
 //RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
 //RELAYURI = "prod-pedw-ns.servicebus.windows.net"
 //RELAYPATH = "prod-pedw-hc"
+//CRMURL = "crm2016.llc.gov.wales/PEDW"


-GOOGLE_TAG_MANAGER = GTM-T78CBC3
-SHOWLOGIN = "true"
-SHOWREPRESENTATIONS = "false"
-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"
-
-NEXT_PUBLIC_GG_CLIENT_ID = 5vTukeSpN7d6uBV7YLb7A5wOctzzkZ
-NEXT_PUBLIC_GG_REDIRECT_URI = "http://localhost:3000"
-
+//GOOGLE_TAG_MANAGER = GTM-T78CBC3
+GOOGLE_TAG_MANAGER = G-GTWW3JT03Z
+SHOWLOGIN = true
+SHOWREPRESENTATIONS = true 
+SHOWFILEUPLOAD = "false"
+SHOWMAPS = "false"
 API_ROOT = "http://localhost:3000"
+CY_API_ROOT = "http://cymru.local:3000"
+I18N_DOMAIN = "cymru.local"
+DOCAPI_OFFLINE = "12:00:00,14:00:00"


+// Next Auth vars
+NEXTAUTH_URL = $API_ROOT
+NEXTAUTH_URL_INTERNAL = $API_ROOT
+NEXTAUTH_SECRET = SuperSecret
+
+// CNR sql server 
+DATABASE_URL = sqlserver://sql-srv-plt-pedw-cnr-uks-01.database.windows.net:1433;database=PEDW;user=PedwSqlAdmin;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
+
+
+// dev test sql server 
+//DATABASE_URL = sqlserver://pedw-dev-test-sql-svr.database.windows.net:1433;database=PEDWDev;user=RobBondSQL;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
+
+// Pre prod sql server
+//DATABASE_URL = sqlserver://pp-pedw-sql.database.windows.net:1433;database=PEDWPreProd;user=RobBondSQL;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
+////DATABASE_URL = sqlserver://pp-pedw-sql.database.windows.net:1433;database=PEDWPreProd;user=pp-pedw-ukw;password=jscw4+896w9YaiXruOA3mtpNkio1oUZxBZcFJ9Awdz4=;encrypt=true;trustservercertificate=false;hostnameincertificate=*.database.windows.net;logintimeout=30;authentication=SqlPassword
+//DATABASE_URL = sqlserver://pp-pedw-sql.database.windows.net:1433;database=PEDWPreProd;user=RobBondSQL;password=GhWKr62F5sQ69dZx;encrypt=true;trustservercertificate=false;hostnameincertificate=*.database.windows.net;logintimeout=30
+//DATABASE_URL = sqlserver://pp-pedw-sql.privatelink.database.windows.net:1433;database=PEDWPreProd;user=RobBondSQL;password=GhWKr62F5sQ69dZx;encrypt=true;trustservercertificate=false;hostnameincertificate=*.database.windows.net;logintimeout=30
+
+
+
+// Prod sql server
+//DATABASE_URL = sqlserver://pp-pedw-sql.database.windows.net:1433;database=PEDWPreProd;user=RobBondSQL;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;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
+
+// CNR key
+# AZURE_STORAGE_ACCOUNT_NAME = "sapltpedwcnruks"
+# AZURE_STORAGE_ACCOUNT_KEY = hRffHq4IwctpaTKdS/U33Xq6nyTDF1t++WJgIwsw7gzstktZin/rRwbTIAL9KKqesVsK7EHrTTG6+ASt4+7skw==
+# AZURE_PEDW_STORAGE_ENDPOINT = https://sapltpedwcnruks.blob.core.windows.net
+
+// new dev key
+AZURE_STORAGE_ACCOUNT_NAME = "sapltpedwdevuks"
+AZURE_STORAGE_ACCOUNT_KEY = MmrsrCjBfop9pI2oImsP/+lJUWU2DrXsAB8nq5bOVROTmPovSGxjCjKw9+TAFr00k8WDUK9r6mVx+AStcMLyAA==
+AZURE_PEDW_STORAGE_ENDPOINT = https://sapltpedwdevuks.blob.core.windows.net
+
+// New test key
+AZURE_STORAGE_ACCOUNT_NAME = "sapltpedwtestuks"
+AZURE_STORAGE_ACCOUNT_KEY = bqJAz5pYQVGee8dnVhlsqW+xHwinNTjgY2AmojNyB+d4uAotMR20WcO4Op13yB+9dFaXAkkjtIA4+AStHT/IYg==
+AZURE_PEDW_STORAGE_ENDPOINT = https://sapltpedwtestuks.blob.core.windows.net
+
+
+// preprod key
+//AZURE_STORAGE_ACCOUNT_NAME = "pedwpp"
+//AZURE_STORAGE_ACCOUNT_KEY = koZ46STRqapSa2Dod8MLL6aju1eYLhhyJ6DXpCLMTnFLJvbDT6CHUv/jwr5U/Ta8a60MWzwToHQy+AStADO7sg==
+//AZURE_PEDW_STORAGE_ENDPOINT = https://pedwpp.blob.core.windows.net
+
+
+// PROD key
+//AZURE_STORAGE_ACCOUNT_NAME = "pedwprod"
+//AZURE_STORAGE_ACCOUNT_KEY = koZ46STRqapSa2Dod8MLL6aju1eYLhhyJ6DXpCLMTnFLJvbDT6CHUv/jwr5U/Ta8a60MWzwToHQy+AStADO7sg==
+//AZURE_PEDW_STORAGE_ENDPOINT = https://pedwprod.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
+ 
+SHOW_DEBUG = true
+
+
+// DEV Connection string
+//NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=4b7568b3-70bd-4591-9dc2-267c0a6501d1;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=447d38b5-5d40-4238-8fb3-0ef4741b3db1
+ 
+// Test Connection string
+//NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=cc60e8e7-5b30-4c2b-a176-8b96b21b12df;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=2a4094be-6fd1-46ab-a67d-5f241692b129
+ 
+// Preprod Connection string
+NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=7370f0f9-834d-4c7a-b3c4-9951fcad5ad2;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=04362cb7-6dfc-469e-8274-12243e8be851
+ 
+// Prod Connection string
+//NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=61f358c2-8075-4164-b897-17bc6dd31fee;IngestionEndpoint=https://ukwest-0.in.applicationinsights.azure.com/;LiveEndpoint=https://ukwest.livediagnostics.monitor.azure.com/;ApplicationId=0c297349-396b-4dc6-8b56-85f5c680adc6
@@ -1,6 +1,34 @@
 {
-  "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"
+
+  }//,
+      //...your configuration
+  // "overrides": [
+  //   //...your overrides
+  //   {
+  //       // Force the setting of a swagger description on each api endpoint
+  //       "files": ["pages/api/**/*.js"], 
+  //       "plugins": ["jsdoc"],
+  //       "rules": {
+  //           "jsdoc/no-missing-syntax": [
+  //           "error",
+  //           {
+  //               "contexts": [
+  //               {
+  //                   "comment": "JsdocBlock:has(JsdocTag[tag=swagger])",
+  //                   "context": "any",
+  //                   "message": "@swagger documentation is required on each API. Check this out for syntax info: https://github.com/jellydn/next-swagger-doc"
+  //               }
+  //               ]
+  //           }
+  //       ]
+  //   }
+  // }
+  // ]
+
 }
+
+
@@ -13,7 +13,22 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.yarn

 #lock files
 yarn.lock
-package-lock.json
+package-lock.json
+
+tmp
+
+*env*.sample
+docker
+dockerfile*
+.dockerignore
+Makefile
+docker*.yml
+
+# Polling 
+
+pages/api/poll-queue.js
+pages/polling.js
@@ -4,12 +4,18 @@
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
-        {
+        { 
+            "name": "Next.js: debug server-side",
+            "type": "node-terminal",
+            "request": "launch",
+            "command": "yarn run dev"
+        },
+        {"name": "Launch Chrome against localhost",
            "type": "pwa-chrome",
            "request": "launch",
-            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
+        
    ]
 }
@@ -1,191 +0,0 @@
-import axios from "axios";
-import { hashAPIPath } from "./";
-
-const configEndpoint = process.env.GG_PROVIDER_CONFIG_ENDPOINT;
-const ggClientID = process.env.GG_CLIENT_ID;
-const ggClientSecret = process.env.GG_CLIENT_SECRET;
-const WEBAPI_URL =
-    process.env.RELAY_ROOT ||
-    "https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/";
-
-export const getProviderConfig = () => {
-    return axios
-        .get(configEndpoint)
-        .then((res) => res.data)
-        .catch((error) => {
-            console.log("error :", error.response);
-            // return error;
-        });
-};
-
-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: {
-            "Authorization": "Bearer " + authToken,
-        },
-    };
-
-    return axios
-        .get(userInfoURL, tokenConfig)
-        .then((res) => res)
-        .catch((error) => {
-            //console.log(`Error: ${err?.response?.data}`);
-            //return error;
-        });
-};
-
-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+/=",
-    encode: function (e) {
-        var t = "";
-        var n, r, i, s, o, u, a;
-        var f = 0;
-        e = Base64._utf8_encode(e);
-        while (f < e.length) {
-            n = e.charCodeAt(f++);
-            r = e.charCodeAt(f++);
-            i = e.charCodeAt(f++);
-            s = n >> 2;
-            o = ((n & 3) << 4) | (r >> 4);
-            u = ((r & 15) << 2) | (i >> 6);
-            a = i & 63;
-            if (isNaN(r)) {
-                u = a = 64;
-            } else if (isNaN(i)) {
-                a = 64;
-            }
-            t =
-                t +
-                this._keyStr.charAt(s) +
-                this._keyStr.charAt(o) +
-                this._keyStr.charAt(u) +
-                this._keyStr.charAt(a);
-        }
-        return t;
-    },
-    decode: function (e) {
-        var t = "";
-        var n, r, i;
-        var s, o, u, a;
-        var f = 0;
-        //e = e.replace(/[^A-Za-z0-9\+\/\=]/g, "");
-        while (f < e.length) {
-            s = this._keyStr.indexOf(e.charAt(f++));
-            o = this._keyStr.indexOf(e.charAt(f++));
-            u = this._keyStr.indexOf(e.charAt(f++));
-            a = this._keyStr.indexOf(e.charAt(f++));
-            n = (s << 2) | (o >> 4);
-            r = ((o & 15) << 4) | (u >> 2);
-            i = ((u & 3) << 6) | a;
-            t = t + String.fromCharCode(n);
-            if (u != 64) {
-                t = t + String.fromCharCode(r);
-            }
-            if (a != 64) {
-                t = t + String.fromCharCode(i);
-            }
-        }
-        t = Base64._utf8_decode(t);
-        return t;
-    },
-    _utf8_encode: function (e) {
-        e = e.replace(/\r\n/g, "\n");
-        var t = "";
-        for (var n = 0; n < e.length; n++) {
-            var r = e.charCodeAt(n);
-            if (r < 128) {
-                t += String.fromCharCode(r);
-            } else if (r > 127 && r < 2048) {
-                t += String.fromCharCode((r >> 6) | 192);
-                t += String.fromCharCode((r & 63) | 128);
-            } else {
-                t += String.fromCharCode((r >> 12) | 224);
-                t += String.fromCharCode(((r >> 6) & 63) | 128);
-                t += String.fromCharCode((r & 63) | 128);
-            }
-        }
-        return t;
-    },
-    _utf8_decode: function (e) {
-        var t = "";
-        var n = 0;
-        var r = (c1 = c2 = 0);
-        while (n < e.length) {
-            r = e.charCodeAt(n);
-            if (r < 128) {
-                t += String.fromCharCode(r);
-                n++;
-            } else if (r > 191 && r < 224) {
-                c2 = e.charCodeAt(n + 1);
-                t += String.fromCharCode(((r & 31) << 6) | (c2 & 63));
-                n += 2;
-            } else {
-                c2 = e.charCodeAt(n + 1);
-                c3 = e.charCodeAt(n + 2);
-                t += String.fromCharCode(
-                    ((r & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)
-                );
-                n += 3;
-            }
-        }
-        return t;
-    },
-};
@@ -1,47 +1,77 @@
 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_speacialistcaseprocess,modifiedon,_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,pinswg_startdate,pinswg_otherpartiesstatement,pinswg_finalcommentsduedate,pinswg_proofsofevidencewrittenstatementsofeviden,pinswg_speacialistcaseprocess,pinswg_statementduedate";
            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=modifiedon,_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=modifiedon,_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,pinswg_statementsduedate";
+            break;
        case "pinswg_environmentalpermittings":
+            return "&$select=modifiedon,_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":
+            return "&$select=pinswg_specialistcaseprocess,modifiedon,_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,pinswg_statementduedate,pinswg_specialistcaseprocess";
+            break;
        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=modifiedon,_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,pinswg_statementduedate";
            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=modifiedon,_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=modifiedon,_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,pinswg_statementduedate";
+            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=modifiedon,_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";
+            return "&$select=modifiedon,_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_otherpartiesstmt,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=modifiedon,_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=modifiedon,_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=modifiedon,_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=modifiedon,_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=modifiedon,_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";
+            //console.log(
+            //     "///////////////\n path:",
+            //     process.env.RELAYPATH == "test-pedw-hc"
+            // );
+            return process.env.RELAYPATH == "dev-pedw-hc"
+                ? "&$select=modifiedon,_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_localplanningauthority_value,pinswg_casedecisiondate,pinswg_dicision,pinswg_dateeventrequested,pinswg_finalcommentsduedate,pinswg_procedure,pinswg_questionnaireduedate,pinswg_startdate,pinswg_statementduedate,statuscode,pinswg_startdatetimeiftheevent,pinswg_representation_period_end_date,pinswg_extend_representation_date,pinswg_typeofevent"
+                : "&$select=modifiedon,_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_localplanningauthority_value,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=modifiedon,_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=modifiedon,_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_specialistcaseprocess,modifiedon,_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,pinswg_statementduedate,pinswg_specialistcaseprocess";
+            break;
+        case "pinswg_ldps":
+            return "&$select=modifiedon,pinswg_name";
+            break;
+        case "pinswg_nonvalidations":
+            return "&$select=modifiedon,_pinswg_appellant_value,pinswg_name,pinswg_siteaddressline1,pinswg_siteaddressline2,pinswg_siteaddresspostcode,pinswg_siteaddresstown,_pinswg_associatedlpa_value,statuscode";
            break;
        default:
            return "";
@@ -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
-    
@@ -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"}]}
@@ -1,8 +1,7 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import AccessibilityEN from "./footerDocs/accessibility_en";
+import { useRouter } from "next/router";
 import AccessibilityCY from "./footerDocs/accessibility_cy";
+import AccessibilityEN from "./footerDocs/accessibility_en";

 const AccessibilityStatement = (props) => {
    let { t } = useTranslation();
@@ -1,15 +1,9 @@
-import Link from "next/link";
-import _ from "lodash";
-import React, { useState, useEffect } from "react";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    getFormSubmitErrors,
-} from "redux-form";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { Field, formValueSelector, reduxForm } from "redux-form";
 import { updatePassword } from "../../actions";

 const RenderTextfield = ({
@@ -133,8 +127,9 @@ const ChangePassword = (props) => {
                                "/myportal?q=" +
                                props.accountDetails.loggedinUserId
                            }
+                            className="govuk-link"
                        >
-                            <a className="govuk-link">Cancel</a>
+                            Cancel
                        </Link>
                    </div>
                </form>
@@ -146,8 +141,9 @@ const ChangePassword = (props) => {
                                "/myportal?q=" +
                                props.accountDetails.loggedinUserId
                            }
+                            className="govuk-link"
                        >
-                            <a className="govuk-link">Go to My Portal</a>
+                            Go to My Portal
                        </Link>
                    </p>
                </>
@@ -1,15 +1,9 @@
-import _ from "lodash";
-import Link from "next/link";
-import React, { useState } from "react";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    getFormSubmitErrors,
-} from "redux-form";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { Field, formValueSelector, reduxForm } from "redux-form";

 import BuildCheckPersonalDetails from "./personaldetailsCheck";
 import PersonalDetailsComplete from "./personaldetailsComplete";
@@ -63,6 +57,139 @@ const RenderTextfield = ({
    );
 };

+const RenderRadioList = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    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={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--small govuk-radios--inline">
+                        {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 RenderPickList = ({
+    datafieldname,
+    name,
+    label,
+    input,
+    optionsArr,
+    meta: { touched, error },
+    errorMsg,
+}) => {
+    let { t, lang } = useTranslation();
+    optionsArr = [
+        t("account:account-preferred-language-english") + ":846040001",
+        t("account:account-preferred-language-welsh") + ":846040000",
+    ];
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label" htmlFor={datafieldname}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={name + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {errorMsg}
+                    </span>
+                )}
+
+                <div>
+                    <select
+                        {...input}
+                        className="govuk-select "
+                        id={datafieldname}
+                        name={datafieldname}
+                    >
+                        <option>Select...</option>
+                        {Object.keys(optionsArr).map((key, index) => {
+                            return (
+                                <option
+                                    key={key}
+                                    value={optionsArr[key].split(":")[1]}
+                                >
+                                    {optionsArr[key].split(":")[0]}
+                                </option>
+                            );
+                        })}
+                    </select>
+                </div>
+            </div>
+        </>
+    );
+};
+
 let PersonalDetails = (props) => {
    const {
        handleSubmit,
@@ -81,7 +208,10 @@ let PersonalDetails = (props) => {

    let errorsobj = {};

-    const required = (value) => (value ? undefined : "Is required");
+    const required = (value) =>
+        value
+            ? undefined
+            : t("account:register-new-account-postcode-label-errormsg");
    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;

@@ -95,6 +225,14 @@ let PersonalDetails = (props) => {
            ? "Invalid phone number"
            : undefined;

+    const postcode = (value) =>
+        value &&
+        !/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
+            value
+        )
+            ? t("account:register-new-account-postcode-invalid-label-errormsg")
+            : undefined;
+
    const [hasErrors, setHasErrors] = useState("");

    const onHandleSubmit = (values) => {
@@ -109,9 +247,33 @@ let PersonalDetails = (props) => {
                        <fieldset className="govuk-fieldset">
                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                <h2 className="govuk-fieldset__heading">
-                                    About you
+                                    {t("account:account-about-you-label")}
                                </h2>
                            </legend>
+                            <div className="govuk-form-group ">
+                                <span className="govuk-label ">
+                                    {t("account:account-role-label")}:{" "}
+                                    {
+                                        props.props.accountDetails
+                                            .accountDetails[
+                                            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
+                                        ]
+                                    }
+                                </span>
+                            </div>
+                            <Field
+                                name="pinswg_preferredlanguage"
+                                component={RenderPickList}
+                                datafieldname={"pinswg_preferredlanguage"}
+                                optionsArr={["English", "Welsh"]}
+                                className="govuk-input govuk-input--width-20 govuk-radios--inline"
+                                validate={[required]}
+                                label={t(
+                                    "account:account-preferred-language-label"
+                                )}
+                                errorMsg="Is required"
+                            />
+
                            <Field
                                name="firstname"
                                id="firstname"
@@ -119,7 +281,7 @@ let PersonalDetails = (props) => {
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                validate={[required]}
-                                label="First name"
+                                label={t("account:account-first-name-label")}
                                errorMsg="Is required"
                            />
                            <Field
@@ -129,7 +291,7 @@ let PersonalDetails = (props) => {
                                type="text"
                                className="govuk-input govuk-input--width-20"
                                validate={[required]}
-                                label="Last name"
+                                label={t("account:account-last-name-label")}
                                errorMsg="Is required"
                            />
                            <Field
@@ -139,7 +301,7 @@ let PersonalDetails = (props) => {
                                type="email"
                                className="govuk-input govuk-input--width-20"
                                validate={[required, email]}
-                                label="Email address"
+                                label={t("account:account-email-address-label")}
                                disabled
                            />
                            <Field
@@ -149,23 +311,22 @@ let PersonalDetails = (props) => {
                                type="number"
                                className="govuk-input govuk-input--width-20"
                                validate={[required, phoneNumber]}
-                                label="Telephone"
+                                label={t("account:account-telephone-label")}
                            />
-
                            <Field
                                name="company"
                                id="company"
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
-                                label="Company/Group"
+                                label={t("account:account-company-group-label")}
                                errorMsg="Is required"
                            />
                        </fieldset>
                        <fieldset className="govuk-fieldset">
                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                <h2 className="govuk-fieldset__heading">
-                                    What is your address?
+                                    {t("account:account-your-address-label")}
                                </h2>
                            </legend>

@@ -175,7 +336,9 @@ let PersonalDetails = (props) => {
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
-                                label="Address line 1"
+                                label={t(
+                                    "account:account-address-line-1-label"
+                                )}
                                validate={[required]}
                                errorMsg="Is required"
                            />
@@ -185,7 +348,9 @@ let PersonalDetails = (props) => {
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-20"
-                                label="Address line 2"
+                                label={t(
+                                    "account:account-address-line-2-label"
+                                )}
                                errorMsg="Is required"
                            />
                            <Field
@@ -194,7 +359,7 @@ let PersonalDetails = (props) => {
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-10"
-                                label="Town/City"
+                                label={t("account:account-town-city-label")}
                                validate={[required]}
                                errorMsg="Is required"
                            />
@@ -204,7 +369,7 @@ let PersonalDetails = (props) => {
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-10"
-                                label="County"
+                                label={t("account:account-county-label")}
                                validate={[required]}
                                errorMsg="Is required"
                            />
@@ -214,9 +379,8 @@ let PersonalDetails = (props) => {
                                component={RenderTextfield}
                                type="text"
                                className="govuk-input govuk-input--width-5"
-                                label="Postcode"
-                                validate={[required]}
-                                errorMsg="Is required"
+                                label={t("account:account-postcode-label")}
+                                validate={[required, postcode]}
                            />
                        </fieldset>
                        <div className="govuk-button-group">
@@ -225,15 +389,16 @@ let PersonalDetails = (props) => {
                                className="govuk-button"
                                data-module="govuk-button"
                            >
-                                Continue
+                                {t("common:continue-button")}
                            </button>
                            <Link
                                href={
                                    "/myportal?q=" +
                                    props.props.accountDetails.loggedinUserId
                                }
+                                className="govuk-link"
                            >
-                                <a className="govuk-link">Cancel</a>
+                                {t("common:cancel-link")}
                            </Link>
                        </div>
                    </form>
@@ -1,15 +1,8 @@
-import _ from "lodash";
-import Link from "next/link";
-import React, { useState } from "react";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    getFormSubmitErrors,
-} from "redux-form";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+import { connect } from "react-redux";

 const BuildCheckPersonalDetails = (props) => {
    const {
@@ -25,12 +18,22 @@ const BuildCheckPersonalDetails = (props) => {
    const router = useRouter();
    const { locale } = router;

+    const getPreferredLanguageLabel = (id) => {
+        return id == 846040001
+            ? t("account:account-preferred-language-english")
+            : t("account:account-preferred-language-welsh");
+    };
+
    return (
        <>
-            <h2 className="govuk-heading-m">About you</h2>
+            <h2 className="govuk-heading-m">
+                {t("account:account-about-you-label")}
+            </h2>
            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">First name</dt>
+                    <dt className="govuk-summary-list__key">
+                        {t("account:account-first-name-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -45,15 +48,18 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
-                                first name
+                                {t("account:account-first-name-label")}{" "}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Last name</dt>
+                    <dt className="govuk-summary-list__key">
+                        {" "}
+                        {t("account:account-last-name-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -68,16 +74,19 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                last name
+                                {t("account:account-last-name-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Email address</dt>
+                    <dt className="govuk-summary-list__key">
+                        {" "}
+                        {t("account:account-email-address-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -92,16 +101,18 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                email address
+                                {t("account:account-email-address-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Telephone</dt>
+                    <dt className="govuk-summary-list__key">
+                        {t("account:account-telephone-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -116,15 +127,18 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
-                                telephone
+                                {t("account:account-telephone-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Company/Group</dt>
+                    <dt className="govuk-summary-list__key">
+                        {" "}
+                        {t("account:account-company-group-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -139,20 +153,50 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                company/group
+                                {t("account:account-company-group-label")}
+                            </span>
+                        </a>
+                    </dd>
+                </div>
+                <div className="govuk-summary-list__row">
+                    <dt className="govuk-summary-list__key">
+                        {t("account:account-preferred-language-label")}
+                    </dt>
+                    <dd className="govuk-summary-list__value">
+                        {getPreferredLanguageLabel(
+                            props.props.props.form.personalDetailsForm.values
+                                .pinswg_preferredlanguage
+                        )}
+                    </dd>
+                    <dd className="govuk-summary-list__actions">
+                        <a
+                            className="govuk-link"
+                            href="#company"
+                            onClick={() => {
+                                setPersonalDetailsComplete(false);
+                            }}
+                        >
+                            {t("common:change-link-label")}
+                            <span className="govuk-visually-hidden">
+                                {" "}
+                                {t("account:account-preferred-language-label")}
                            </span>
                        </a>
                    </dd>
                </div>
            </dl>
+            <h2 className="govuk-heading-m">
+                {" "}
+                {t("account:account-your-address-label")}
+            </h2>
            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
-                <h2 className="govuk-heading-m">Your address</h2>
-
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Address Line 1</dt>
+                    <dt className="govuk-summary-list__key">
+                        {t("account:account-address-line-1-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -167,16 +211,18 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                address line 1
+                                {t("account:account-address-line-1-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Address line 2</dt>
+                    <dt className="govuk-summary-list__key">
+                        {t("account:account-address-line-2-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -191,16 +237,18 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                address line 2
+                                {t("account:account-address-line-2-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Town/City</dt>
+                    <dt className="govuk-summary-list__key">
+                        {t("account:account-town-city-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -215,16 +263,19 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                town/city
+                                {t("account:account-town-city-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">County</dt>
+                    <dt className="govuk-summary-list__key">
+                        {" "}
+                        {t("account:account-county-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -239,16 +290,19 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                county
+                                {t("account:account-county-label")}
                            </span>
                        </a>
                    </dd>
                </div>
                <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Postcode</dt>
+                    <dt className="govuk-summary-list__key">
+                        {" "}
+                        {t("account:account-postcode-label")}
+                    </dt>
                    <dd className="govuk-summary-list__value">
                        {
                            props.props.props.form.personalDetailsForm.values
@@ -263,10 +317,10 @@ const BuildCheckPersonalDetails = (props) => {
                                setPersonalDetailsComplete(false);
                            }}
                        >
-                            Change
+                            {t("common:change-link-label")}
                            <span className="govuk-visually-hidden">
                                {" "}
-                                postcode
+                                {t("account:account-postcode-label")}
                            </span>
                        </a>
                    </dd>
@@ -281,12 +335,13 @@ const BuildCheckPersonalDetails = (props) => {
                        setAccountUpdatedComplete(true);
                    }}
                >
-                    Continue
+                    {t("common:continue-button")}
                </button>
                <Link
                    href={"/myportal?q=" + props.accountDetails.loggedinUserId}
+                    className="govuk-link"
                >
-                    <a className="govuk-link">Cancel</a>
+                    {t("common:back-link")}
                </Link>
            </div>
        </>
@@ -1,22 +1,8 @@
-import _ from "lodash";
-import Link from "next/link";
-import React, { useState, useEffect } from "react";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    getFormSubmitErrors,
-} from "redux-form";
-import {
-    useDispatch,
-    useSelector,
-    shallowEqual,
-    connect,
-    setRegisterFormComplete,
-    setAccountCreatedComplete,
-} from "react-redux";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
 import { updateAccount } from "../../actions";

 const PersonalDetailsComplete = (props) => {
@@ -42,19 +28,17 @@ const PersonalDetailsComplete = (props) => {

    return (
        <>
-            <p className="govuk-body">Your details have been updated</p>
+            <p className="govuk-body">{t("account:account-complete-para-1")}</p>

-            <p className="govuk-body">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a
-                metus non quam mollis egestas. Integer ac leo cursus, laoreet
-                nulla sed, tempus tellus. Mauris condimentum erat arcu.
-            </p>
+            <p className="govuk-body">{t("account:account-complete-para-2")}</p>

            <p className="govuk-body">
                <Link
                    href={"/myportal?q=" + props.accountDetails.loggedinUserId}
+                    className="govuk-link"
                >
-                    <a className="govuk-link">Return to My Portal</a>
+                    {" "}
+                    {t("account:account-complete-return-to-portal-link")}
                </Link>
            </p>
        </>
@@ -1,14 +1,7 @@
-import _ from "lodash";
-import React, { useState } from "react";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    getFormSubmitErrors,
-} from "redux-form";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { useRouter } from "next/router";
+import React from "react";
+import { connect } from "react-redux";
 import { setAccCr } from "../../store/accountDetails/action";

 const RegisterFormCheck = (props) => {
@@ -144,30 +137,6 @@ const RegisterFormCheck = (props) => {
                        </a>
                    </dd>
                </div>
-                {/* <div className="govuk-summary-list__row">
-                    <dt className="govuk-summary-list__key">Company/Group</dt>
-                    <dd className="govuk-summary-list__value">
-                        {
-                            props.props.props.form.accountRegisterForm.values
-                                .companygroup
-                        }
-                    </dd>
-                    <dd className="govuk-summary-list__actions">
-                        <a
-                            className="govuk-link"
-                            href="#"
-                            onClick={() => {
-                                setRegisterFormComplete(false);
-                            }}
-                        >
-                            Change
-                            <span className="govuk-visually-hidden">
-                                {" "}
-                                company/group
-                            </span>
-                        </a>
-                    </dd>
-                </div> */}
            </dl>
            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
                <h2 className="govuk-heading-m">
@@ -1,28 +1,14 @@
 import _ from "lodash";
-import Link from "next/link";
-import React, { useEffect, 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 React, { useEffect, useState } from "react";

-import jsonpath from "jsonpath";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    getFormSubmitErrors,
-} from "redux-form";
-import {
-    useDispatch,
-    useSelector,
-    shallowEqual,
-    connect,
-    setRegisterFormComplete,
-    setAccountCreatedComplete,
-} from "react-redux";
+import { connect } from "react-redux";

 import { setAccCr, setLogout } from "../../store/accountDetails/action";

-import { getEmailAccountCheck, createAccount } from "../../actions";
+import { createAccount, getEmailAccountCheck } from "../../actions";

 const RegisterComplete = (props) => {
    const {
@@ -53,6 +39,7 @@ const RegisterComplete = (props) => {

        let checkEmailObj = {};

+        console.log("props.accountDetails.accCr :", props.accountDetails.accCr);
        switch (props.accountDetails.accCr) {
            case "created":
            case "exists":
@@ -66,7 +53,6 @@ const RegisterComplete = (props) => {
                        ? setAccCr("exists")
                        : (checkEmailObj = createAccount(accountBody).then(
                              (data) => {
-                                  //console.log(data);
                                  setAccCr("created");
                              }
                          ));
@@ -95,17 +81,8 @@ const RegisterComplete = (props) => {
                    </p>

                    <p className="govuk-body">
-                        <Link href="/">
-                            <a
-                                className="govuk-link"
-                                onClick={() => {
-                                    setLogout(), window.localStorage.clear();
-                                }}
-                            >
-                                {t(
-                                    "account:register-new-account-my-portal-link"
-                                )}
-                            </a>
+                        <Link href="/" className="govuk-link">
+                            {t("account:register-new-account-my-portal-link")}
                        </Link>
                    </p>
                </>
@@ -1,14 +1,8 @@
-import _ from "lodash";
-import React, { useState } from "react";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    getFormSubmitErrors,
-} from "redux-form";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { Field, formValueSelector, reduxForm } from "redux-form";

 import RegisterFormCheck from "./registerCheck";
 import RegisterComplete from "./registerComplete";
@@ -84,7 +78,10 @@ const RegisterForm = (props) => {
    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 required = (value) => (value ? undefined : "Is required");
+    const required = (value) =>
+        value
+            ? undefined
+            : t("account:register-new-account-postcode-label-errormsg");
    const email = (value) =>
        value && !emailRegex.test(value) ? "Invalid email address" : undefined;
    const phoneNumber = (value) =>
@@ -106,14 +103,20 @@ const RegisterForm = (props) => {
            : undefined;
    const minLength5 = minLength(5);

+    const postcode = (value) =>
+        value &&
+        !/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
+            value
+        )
+            ? t("account:register-new-account-postcode-invalid-label-errormsg")
+            : undefined;
+
    const [hasErrors, setHasErrors] = useState("");

    const onHandleSubmit = (values) => {
-        //console.log(values);
        setRegisterFormComplete(true);
    };

-    //console.log(pristine);
    return (
        <>
            {!pristine && !valid && (
@@ -194,39 +197,6 @@ const RegisterForm = (props) => {
                                    "account:register-new-account-phone-label"
                                )}
                            />
-
-                            <Field
-                                name="pinswg_custom_password"
-                                id="pinswg_custom_password"
-                                component={RenderTextfield}
-                                type="password"
-                                className="govuk-input govuk-input--width-20"
-                                label={t(
-                                    "account:register-new-account-password-label"
-                                )}
-                                validate={[required, minLength5]}
-                                errorMsg={t(
-                                    "account:register-new-account-password-label-errormsg"
-                                )}
-                            />
-                            <Field
-                                name="custom_password_check"
-                                id="custom_password_check"
-                                component={RenderTextfield}
-                                type="password"
-                                className="govuk-input govuk-input--width-20"
-                                label={t(
-                                    "account:register-new-account-confirm-password-label"
-                                )}
-                                validate={[
-                                    required,
-                                    passwordsMatch,
-                                    minLength5,
-                                ]}
-                                errorMsg={t(
-                                    "account:register-new-account-confirm-password-label-errormsg"
-                                )}
-                            />
                        </fieldset>
                        <fieldset className="govuk-fieldset">
                            <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -298,10 +268,7 @@ const RegisterForm = (props) => {
                                label={t(
                                    "account:register-new-account-postcode-label"
                                )}
-                                validate={[required]}
-                                errorMsg={t(
-                                    "account:register-new-account-postcode-label-errormsg"
-                                )}
+                                validate={[required, postcode]}
                            />
                        </fieldset>

@@ -0,0 +1,21 @@
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import AddressSearch from "./search/addresssearch";
+
+export default function Search(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    //console.log("props here:", props.myportal || false);
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            <AddressSearch myportal={props.myportal || false} />
+        </main>
+    );
+}
@@ -0,0 +1,78 @@
+import useTranslation from "next-translate/useTranslation";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import CRMError from "./crmError";
+import SearchResults from "./search/addresssearchresults";
+
+export default function Search(props) {
+    const {
+        searchString,
+        searchResultsObj,
+        advancedSearch,
+        myportal,
+        watchedCases,
+        isLinkedCase,
+        showLoginCheck,
+    } = props;
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    var hasError = _.has(searchResultsObj.searchResultsObj, "errorCode")
+        ? true
+        : false;
+
+    //console.log("has an error", hasError);
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            {hasError ? (
+                <CRMError props={props} />
+            ) : (
+                <>
+                    <div className="govuk-grid-row">
+                        <div className="govuk-grid-column-full">
+                            <SearchResults
+                                advancedSearch={advancedSearch}
+                                searchString={searchString}
+                                searchResultsObj={
+                                    searchResultsObj.searchResultsObj
+                                }
+                                searchDetailsObj={
+                                    searchResultsObj.searchDetailsObj
+                                }
+                                myportal={myportal}
+                                watchedCases={watchedCases}
+                                isLinkedCase={isLinkedCase}
+                                showLoginCheck={showLoginCheck}
+                            />
+                        </div>
+                    </div>
+                    <div className="govuk-grid-row">
+                        <div className="govuk-grid-column-full">
+                            <div className="govuk-button-group">
+                                <Link
+                                    href="/addresssearch"
+                                    className="govuk-button"
+                                >
+                                    {t("common:breadcrumb-address-search")}
+                                </Link>
+                                {/* <a
+                            onClick={() => router.back()}
+                            className="govuk-button govuk-button--secondary"
+                        >
+                            {t("search:searchresults-new-search-button-label")}
+                        </a> */}
+                            </div>
+                        </div>
+                    </div>
+                </>
+            )}
+        </main>
+    );
+}
@@ -0,0 +1,33 @@
+import React from "react";
+import { ApplicationInsights } from "@microsoft/applicationinsights-web";
+import {
+    ReactPlugin,
+    withAITracking,
+    AppInsightsContext,
+} from "@microsoft/applicationinsights-react-js";
+
+let reactPlugin = new ReactPlugin();
+let appInsights = new ApplicationInsights({
+    config: {
+        connectionString: process.env.NEXT_PUBLIC_APP_INSIGHT,
+        enableAutoRouteTracking: true,
+        enableCorsCorrelation: true,
+        enableRequestHeaderTracking: true,
+        enableResponseHeaderTracking: true,
+        enableAjaxPerfTracking: true,
+        isBrowserLinkTrackingEnabled: true,
+        extensions: [reactPlugin],
+    },
+});
+
+appInsights.loadAppInsights();
+
+const AzureAppInsights = ({ children }) => {
+    return (
+        <AppInsightsContext.Provider value={reactPlugin}>
+            {children}
+        </AppInsightsContext.Provider>
+    );
+};
+
+export default withAITracking(reactPlugin, AzureAppInsights);
@@ -1,4 +1,3 @@
-import Link from "next/link";
 import useTranslation from "next-translate/useTranslation";

 export default function Banner() {
@@ -1,10 +1,8 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
-import Summary from "./case/summary";
+import { useRouter } from "next/router";
 import Documents from "./case/documents";
 import RepresentationList from "./case/representationList";
+import Summary from "./case/summary";

 const Case = (props) => {
    const { showRepresentations } = props;
@@ -32,9 +30,13 @@ const Case = (props) => {
                        currentType={props.currentType}
                        appealTypeID={props.appealTypeID}
                        searchResultsObj={props.searchResultsObj}
+                        directSearchResultsObj={props.directSearchResultsObj}
                        searchDetailsObj={props.searchDetailsObj}
                        searchString={props.searchString}
                        incidentid={props.incidentid}
+                        showMap={props.showMap}
+                        currentView={props.currentView}
+                        messagesObj={props.messagesObj}
                    />
                    <Documents
                        incidentid={props.incidentid}
@@ -42,15 +44,14 @@ const Case = (props) => {
                        searchResultsObj={props.searchResultsObj}
                        searchDetailsObj={props.searchDetailsObj}
                        documentDetailsObj={props.documentDetailsObj}
-                        documentHistoryObj={props.documentHistoryObj}
+                        docsOffline={props.props.docsOffline}
                    />
-                    {showRepresentations == "true" && (
+                    {showRepresentations == true && (
                        <RepresentationList
                            incidentid={props.incidentid}
                            caseReference={props.caseReference}
                            representationsObj={props.representationsObj}
                            documentDetailsObj={props.documentDetailsObj}
-                            documentHistoryObj={props.documentHistoryObj}
                        />
                    )}
                </div>
@@ -0,0 +1,83 @@
+import cookie from "cookie-cutter";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { formatDates } from "../utils";
+export default function CaseNoticeBanner(props) {
+    let { t, lang } = useTranslation();
+
+    const { messagesObj } = props;
+    const router = useRouter();
+
+    const noticeContent = messagesObj.value[0].description;
+    const noticeTitle = messagesObj.value[0].subject.split("Banner ")[1];
+
+    const bannerOpenCookie = typeof cookie.get("pedwNotice") == "undefined";
+    let messagesObjArr = messagesObj.value;
+
+    return (
+        <>
+            {messagesObjArr.map((message, index) => (
+                <div className="govuk-warning-text noticebanner" key={index}>
+                    <strong className="govuk-warning-text__text">
+                        <span className="govuk-visually-hidden">Warning</span>
+                    </strong>
+                    <div>
+                        <div className=" govuk-body-s">
+                            <h2 className="govuk-heading-s">
+                                {(
+                                    message.subject.match(
+                                        new RegExp(">>>", "g")
+                                    ) || []
+                                ).length > 0
+                                    ? router.locale == "cy"
+                                        ? message.subject
+                                              .split("Banner ")[1]
+                                              .split(">>>")[1]
+                                        : message.subject
+                                              .split("Banner ")[1]
+                                              .split(">>>")[0]
+                                    : (
+                                          message.subject.match(
+                                              new RegExp(";", "g")
+                                          ) || []
+                                      ).length > 0
+                                    ? router.locale == "cy"
+                                        ? message.subject
+                                              .split("Banner ")[1]
+                                              .split(";")[1]
+                                        : message.subject
+                                              .split("Banner ")[1]
+                                              .split(";")[0]
+                                    : message.subject.split("Banner ")[1]}
+                            </h2>
+                        </div>
+                        <div className="govuk-body-s">
+                            {(
+                                message.description.match(
+                                    new RegExp(">>>", "g")
+                                ) || []
+                            ).length > 0
+                                ? router.locale == "cy"
+                                    ? message.description.split(">>>")[1]
+                                    : message.description.split(">>>")[0]
+                                : (
+                                      message.description.match(
+                                          new RegExp(";", "g")
+                                      ) || []
+                                  ).length > 0
+                                ? router.locale == "cy"
+                                    ? message.description.split(";")[1]
+                                    : message.description.split(";")[0]
+                                : message.description}
+                        </div>
+                        <div className="govuk-body-xs govuk-!-margin-bottom-0 ">
+                            {t("case:date-raised")}:{" "}
+                            {formatDates(message.createdon)}
+                        </div>
+                    </div>
+                </div>
+            ))}
+        </>
+    );
+}
@@ -1,30 +1,22 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+import useTranslation from "next-translate/useTranslation";
 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 { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
+import { formatDates } from "../utils";
 import PaginationControl from "./pagination";
-import LoadingOverlay from "react-loading-overlay";
-import CryptoJS from "crypto-js";
+import { sendGAEvent } from "@next/third-parties/google";

 import {
-    getBasicSearch,
-    getBasicSearchDetails,
    getSearchDocumentDetails,
-    getSearchDocumentHistory,
-    getSearchDocumentHistoryPaged,
    getSearchDocumentDetailsPaged,
+    getSearchDocumentTypes,
 } from "../../actions";
+import { setCurrentPage } from "../../store/currentView/action";

-import {
-    setSearchResults,
-    setSearchDetails,
-    setDocumentDetails,
-    setDocumentHistory,
-    getSearchResultsObj,
-} from "../../store/searchOutput/action";
+import { setDocumentDetails } from "../../store/searchOutput/action";

 const DocumentDetails = (props) => {
    let { t } = useTranslation();
@@ -35,9 +27,9 @@ const DocumentDetails = (props) => {
        searchResultsObj,
        searchDetailsObj,
        documentDetailsObj,
-        documentHistoryObj,
        setDocumentDetails,
-        setDocumentHistory,
+        setCurrentPage,
+        docsOffline,
    } = props;

    const router = useRouter();
@@ -45,10 +37,44 @@ const DocumentDetails = (props) => {

    var documentDetailsArr = documentDetailsObj || [];

-    const DocumentView = (documentDetailsArr) => {
-        //console.log(documentDetailsArr);
+    const [selectedOption, setSelectedOption] = useState(10);
+    const [documentTypes, setDocumentTypes] = useState([{}]);
+    const [selectedDocumentType, setSelectedDocumentType] = useState("all");
+    let ShowDocLinks = false;
+    let checkShowDocLinks = docsOffline != false ? true : false;

+    const getDocLink = (docsOffline) => {
+        var startTime = docsOffline.split(",")[0];
+        var endTime = docsOffline.split(",")[1];
+
+        // console.log(startTime);
+        // console.log(endTime);
+
+        var currentDate = new Date();
+
+        var startDate = new Date(currentDate.getTime());
+        startDate.setHours(startTime.split(":")[0]);
+        startDate.setMinutes(startTime.split(":")[1]);
+        startDate.setSeconds(startTime.split(":")[2]);
+
+        var endDate = new Date(currentDate.getTime());
+        endDate.setHours(endTime.split(":")[0]);
+        endDate.setMinutes(endTime.split(":")[1]);
+        endDate.setSeconds(endTime.split(":")[2]);
+
+        // console.log(startDate);
+        // console.log(endDate);
+        // console.log(currentDate);
+
+        var valid = startDate < currentDate && endDate > currentDate;
+        ShowDocLinks = valid;
+    };
+
+    checkShowDocLinks && getDocLink(docsOffline);
+
+    const DocumentView = (documentDetailsArr) => {
        documentDetailsArr = documentDetailsArr.value;
+
        return (
            <>
                <p>
@@ -60,250 +86,375 @@ const DocumentDetails = (props) => {
                        ? t("case:documents-count-label-2")
                        : t("case:documents-count-label-2a")}
                </p>
-                <dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
-                    <div className="govuk-summary-list__row results-headings">
-                        <dd className="govuk-summary-list__key govuk-!-font-size-16 ">
-                            {t("case:documents-name-label")}
-                        </dd>
-                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                            {t("case:documents-doc-type-label")}
-                        </dd>
-                        <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                            {t("case:documents-date-published-label")}
-                        </dd>
-                        {/* <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                        {t("case:documents-size-label")}
-                    </dd> */}
-                    </div>
-
-                    {documentDetailsArr.map((item) => {
-                        let detailsObj = jsonpath.query(
-                            item,
-                            "$..[?(@._pinswg_documentids_value=='" +
-                                incidentid +
-                                "')]"
-                        );
-                        detailsObj = item;
-
-                        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
-                                                    href={
-                                                        detailsObj.pinswg_hashlink
-                                                    }
-                                                >
-                                                    <span className="results-visually-hidden">
-                                                        {t(
-                                                            "case:documents-name-label"
-                                                        )}
-                                                        :
-                                                    </span>
-                                                    {_.has(historyObj, [
-                                                        "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue",
-                                                    ])
-                                                        ? historyObj[
-                                                              "_pinswg_documentid_value@OData.Community.Display.V1.FormattedValue"
-                                                          ]
-                                                        : ""}
-                                                </a>
-                                            </dd>
-                                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
-                                                <span className="results-visually-hidden">
-                                                    {t(
-                                                        "case:documents-doc-type-label"
-                                                    )}
-                                                    :
-                                                </span>
-
+                <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="showDocumentType"
+                            >
+                                {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(
+                                                  '$..[?(@.value=="All")].value_cy',
+                                                  transLookup
+                                              )
+                                            : "All"}
+                                    </option>
+                                    {documentTypes.map((item, key) => {
+                                        return (
+                                            <option
+                                                key={key}
+                                                value={
+                                                    item.pinswg_isharedocumentlocations
+                                                }
+                                            >
                                                {router.locale == "cy"
-                                                    ? jsonpath.query(
-                                                          transLookup,
+                                                    ? jsonpath(
                                                          '$..[?(@.value=="' +
-                                                              detailsObj[
-                                                                  "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
-                                                              ] +
-                                                              '")].value_cy'
+                                                              item.pinswg_isharedocumentlocationsLabel +
+                                                              '")].value_cy',
+                                                          transLookup
                                                      )
-                                                    : detailsObj[
-                                                          "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
-                                                      ] ||
+                                                    : item.pinswg_isharedocumentlocationsLabel ||
                                                      t(
                                                          "case:summary-no-date-entered-label"
                                                      )}
-                                            </dd>
-                                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                            </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="showNumberOfRecords"
+                                >
+                                    {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>
+                {ShowDocLinks && (
+                    <div className="govuk-warning-text ">
+                        <span
+                            className="govuk-warning-text__icon"
+                            aria-hidden="true"
+                        >
+                            !
+                        </span>
+                        <strong className="govuk-warning-text__text govuk-!-margin-top-2">
+                            <span className="govuk-visually-hidden">
+                                Notice
+                            </span>
+
+                            {t("case:documents-not-available-label")}
+                        </strong>
+                    </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 ? (
+                        <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(
+                                "$..[?(@._pinswg_documentids_value=='" +
+                                    incidentid +
+                                    "')]",
+                                item
+                            );
+                            detailsObj = item;
+                            return (
+                                <div
+                                    className="govuk-summary-list__row"
+                                    key={key}
+                                >
+                                    <dd className="govuk-summary-list__value govuk-!-font-size-16 ">
+                                        {showDownloadingState === key && (
+                                            <div className="coverLoadingLink downloading">
+                                                {/* <img
+                                                            className="data-loading-icon"
+                                                            src="/assets/images/loading.gif"
+                                                            alt={
+                                                                router.locale ==
+                                                                "cy"
+                                                                    ? "Nôl data"
+                                                                    : "Fetching data"
+                                                            }
+                                                        /> */}
+                                            </div>
+                                        )}
+
+                                        {!ShowDocLinks ? (
+                                            <Link
+                                                scroll={false}
+                                                href={
+                                                    detailsObj.pinswg_hashlink
+                                                }
+                                                key={key}
+                                                onClick={() => {
+                                                    toggleDownLoadLink(key),
+                                                        sendGAEvent(
+                                                            "event",
+                                                            "DownloadedFile",
+                                                            {
+                                                                caseReference:
+                                                                    props.caseReference,
+                                                                filename:
+                                                                    detailsObj.pinswg_name,
+                                                            }
+                                                        );
+                                                }}
+                                            >
                                                <span className="results-visually-hidden">
                                                    {t(
-                                                        "case:documents-date-published-label"
+                                                        "case:documents-name-label"
                                                    )}
                                                    :
                                                </span>
-
-                                                {_.has(historyObj, [
-                                                    "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue",
-                                                ])
-                                                    ? formatDates(
-                                                          historyObj[
-                                                              "pinswg_publisheddate@OData.Community.Display.V1.FormattedValue"
-                                                          ]
-                                                      )
+                                                {_.has(
+                                                    detailsObj,
+                                                    "pinswg_name"
+                                                )
+                                                    ? detailsObj.pinswg_name
                                                    : ""}
-                                            </dd>
-                                            {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                            </Link>
+                                        ) : (
+                                            <>
+                                                <span className="results-visually-hidden">
+                                                    {t(
+                                                        "case:documents-name-label"
+                                                    )}
+                                                    :
+                                                </span>
+                                                {_.has(
+                                                    detailsObj,
+                                                    "pinswg_name"
+                                                )
+                                                    ? detailsObj.pinswg_name
+                                                    : ""}
+                                            </>
+                                        )}
+                                    </dd>
+                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                        <span className="results-visually-hidden">
-                                            {t("case:documents-size-label")}:
+                                            {t("case:documents-doc-type-label")}
+                                            :
                                        </span>
-                                        92
-                                    </dd> */}
-                                        </div>
-                                    ) : (
-                                        ""
-                                    );
-                                }
+
+                                        {router.locale == "cy"
+                                            ? jsonpath(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
+                                              ] ||
+                                              t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                    <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                        <span className="results-visually-hidden">
+                                            {t(
+                                                "case:documents-date-published-label"
+                                            )}
+                                            :
+                                        </span>
+
+                                        {_.has(
+                                            detailsObj,
+                                            "pinswg_latestpublisheddate"
+                                        )
+                                            ? formatDates(
+                                                  detailsObj.pinswg_latestpublisheddate
+                                              )
+                                            : ""}
+                                    </dd>
+                                    {/* <dd className="govuk-summary-list__value govuk-!-font-size-16">
+                                    <span className="results-visually-hidden">
+                                        {t("case:documents-size-label")}:
+                                    </span>
+                                    92
+                                </dd> */}
+                                </div>
                            );
-                        }
-                    })}
+                        })
+                    )}
                </dl>
                <PaginationControl
+                    showNoOfRecords={selectedOption}
                    currentPage={currentPage}
                    searchResultsObj={documentDetailsObj}
-                    // spinnerState={spinnerState}
+                    spinnerState={spinnerState}
+                    orderBy={orderByState}
+                    fieldSort={fieldSortState}
                    getDocumentResults={getDocumentResults}
                />
            </>
        );
    };

-    useEffect(() => {
-        const docDetailsObj = async () => {
-            let docObj = await getSearchDocumentDetails(incidentid)
+    const getDocumentTypes = useCallback(() => {
+        getSearchDocumentTypes(props.incidentid).then((data) => {
+            setDocumentTypes(data);
+        });
+    }, [props.incidentid]);
+
+    const getDocumentResults = useCallback(
+        (pageNumber, orderBy, fieldSort) => {
+            getSearchDocumentDetailsPaged(
+                props.incidentid,
+                pageNumber,
+                orderBy,
+                fieldSort,
+                selectedOption,
+                selectedDocumentType
+            )
+                .then((data) => data)
                .then((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;
+                    setShowSpinnerState(false);
                });
-
-            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]);
-
-    const getDocumentResults = (pageNumber) => {
-        getSearchDocumentDetailsPaged(incidentid, pageNumber)
-            .then((data) => {
-                //console.log(data);
-                setDocumentDetails(data);
-                return data;
-            })
-            .then((data) => {
-                //console.log("getting details", data);
-                return getDocumentHistory(data.value).then((data) => {
-                    setDocumentHistory(data);
-                    //setShowSpinnerState(false);
-                });
-            });
-    };
+        },
+        [
+            props.incidentid,
+            selectedOption,
+            selectedDocumentType,
+            setDocumentDetails,
+        ]
+    );

    const getDocumentDetails = async () => {
-        let docObj = await getSearchDocumentDetailsPaged(incidentid, pageNumber)
-            .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;
-            });
+        let docObj = await getSearchDocumentDetailsPaged(
+            incidentid,
+            pageNumber,
+            orderBy,
+            fieldSort
+        ).then((data) => {
+            setDocumentDetails(data);
+            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");
-        var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
-        var yyyy = dateObj.getFullYear();
-
-        return dd + "/" + mm + "/" + yyyy;
-    }
-
    const pagesCount = Math.ceil(documentDetailsObj["@odata.count"] / 10);

    let currentPage = 0;
@@ -325,15 +476,30 @@ const DocumentDetails = (props) => {
              )
            : pagesCount;

-    //const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [showSpinnerState, setShowSpinnerState] = useState(false);

-    // let spinnerState = () => {
-    //     showSpinnerState == true
-    //         ? setShowSpinnerState(false)
-    //         : setShowSpinnerState(true);
-    // };
+    const [showDownloadingState, setShowDownloadingState] = useState(null);
+
+    const toggleDownLoadLink = (i) => {
+        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 +507,68 @@ 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);
+    };
+
+    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).then(
+                (data) => {
+                    setDocumentDetails(data);
+                    setDocumentSearchState(true);
+
+                    return data;
+                }
+            );
+
+            return docObj;
+        };
+
+        const searchDocumentResultsObj = docDetailsObj();
+    }, [
+        incidentid,
+        setDocumentDetails,
+        selectedOption,
+        selectedDocumentType,
+        fieldSortState,
+        orderByState,
+        getDocumentTypes,
+        getDocumentResults,
+    ]);
    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>
@@ -365,11 +586,6 @@ const DocumentDetails = (props) => {
                    </div>
                </div>
            </div>
-            {/* <LoadingOverlay
-                active={showSpinnerState}
-                spinner
-                text={t("common:spinner-searching")}
-            /> */}
        </>
    );
 };
@@ -385,8 +601,8 @@ const mapDispatchToProps = (dispatch) => {
        setDocumentDetails: (detailsObj) => {
            dispatch(setDocumentDetails(detailsObj));
        },
-        setDocumentHistory: (historyObj) => {
-            dispatch(setDocumentHistory(historyObj));
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
        },
    };
 };
@@ -1,39 +1,46 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+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);
        return Array(end - start + 1)
            .fill()
            .map((v, i) => i + start);
    };

    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 = {
@@ -65,24 +72,34 @@ const PaginationControl = (props) => {
            pages = pages.concat(withDots(pageCount, ["...", pageCount]));
        }

-        //console.log(pages);
        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(),
-                                        getDocumentResults(currentPage - 1);
+                                        spinnerState(),
+                                            setCurrentPage(
+                                                props.currentView.currentPage -
+                                                    1
+                                            ),
+                                            getDocumentResults(
+                                                props.currentView.currentPage -
+                                                    1,
+                                                orderBy,
+                                                fieldSort
+                                            );
                                    }}
                                >
                                    {t("common:previous-link-button")}
@@ -95,7 +112,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 +131,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();
-                                            console.log(i + 1);
-                                            getDocumentResults(i + 1);
+                                            spinnerState();
+                                            setCurrentPage(e),
+                                                getDocumentResults(
+                                                    e,
+                                                    orderBy,
+                                                    fieldSort
+                                                );
                                        }}
                                    >
                                        {e}
@@ -125,12 +146,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(),
-                                        getDocumentResults(currentPage + 1);
+                                        spinnerState(),
+                                            setCurrentPage(
+                                                props.currentView.currentPage +
+                                                    1
+                                            ),
+                                            getDocumentResults(
+                                                props.currentView.currentPage +
+                                                    1,
+                                                orderBy,
+                                                fieldSort
+                                            );
                                    }}
                                >
                                    {t("common:next-link-button")}
@@ -148,11 +178,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);
@@ -1,212 +0,0 @@
-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";
-import { Field, FieldArray, reduxForm, formValueSelector } from "redux-form";
-import { connect } from "react-redux";
-import { useDropzone } from "react-dropzone";
-
-import { setRepresentationCapacity } from "../../../store/currentView/action";
-import RepCapacitySelection from "./representationCapacitySelection";
-import RepDetails from "./representationDetails";
-import RepAppellant from "./representationAppellant";
-import RepAgent from "./representationAgent";
-import RepInterestedPartyPerson from "./representationInterestedPartyPerson";
-import RepLandOwner from "./representationLandowner";
-import {
-    RenderPickList,
-    RenderRadioList,
-    RenderTextfield,
-} from "./representationElements";
-
-let MakeRepresentation = (props) => {
-    let { t } = useTranslation();
-    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
-
-    const [clearRepForm, setClearRepForm] = useState(false);
-
-    const router = useRouter();
-    const { locale } = router;
-    const {
-        caseReference,
-        myCases,
-        myRepresentations,
-        watchedCases,
-        awaitingSubmission,
-        searchResultsObj,
-        currentType,
-        currentView,
-        setRepresentationCapacity,
-    } = props;
-    const formObj = props.props.form;
-    let setCaseQueryObj = props[currentType];
-    var casesObj = {};
-
-    currentType == "searchResultsObj"
-        ? (casesObj = jsonpath.query(
-              setCaseQueryObj,
-              '$..[?(@.title=="' + caseReference + '")]'
-          ))
-        : (casesObj = jsonpath.query(
-              setCaseQueryObj,
-              '$..[?(@.reference=="' + caseReference + '")]'
-          ));
-
-    casesObj = Object.assign({}, ...casesObj);
-
-    const capacityOptionsArr = [
-        "Appellant",
-        "Agent",
-        "Interested Party/Person",
-        "Land Owner",
-    ];
-
-    const appellantApplicantRepresentationArr = [
-        "Other",
-        "Statement",
-        "Statement of common ground",
-        "Written statement of evidence",
-    ];
-
-    const interestedPersonRepresentationArr = [
-        "Interested Party/Person correspondence",
-    ];
-
-    const landOwnerRepresentationArr = [
-        "Other",
-        "Statement",
-        "Written statement of evidence",
-    ];
-
-    const repCapacityType = () => {
-        currentView.representationCapacity == false
-            ? false
-            : _.isEmpty(formObj["representationForm"])
-            ? false
-            : _.isEmpty(formObj["representationForm"].values)
-            ? false
-            : _.isEmpty(
-                  formObj["representationForm"].values.representationCapacity
-              )
-            ? setRepresentationCapacity(false)
-            : setRepresentationCapacity(
-                  formObj["representationForm"].values.representationCapacity
-                      .replace(/(\band|[\s\-\+\(\)\,\&])/g, "")
-                      .toLowerCase()
-              );
-
-        return currentView.representationCapacity;
-    };
-
-    const whichControl = () => {
-        repCapacityType();
-        switch (currentView.representationCapacity) {
-            case false:
-                return (
-                    <RepCapacitySelection
-                        formObj={formObj}
-                        capacityOptionsArr={capacityOptionsArr}
-                        currentType={currentType}
-                        casesObj={casesObj}
-                        setRepresentationCapacity={setRepresentationCapacity}
-                    />
-                );
-                break;
-            case "appellant":
-                setRepresentationCapacity("appellant");
-                return (
-                    <RepAppellant
-                        formObj={formObj}
-                        appellantApplicantRepresentationArr={
-                            appellantApplicantRepresentationArr
-                        }
-                        setRepresentationCapacity={setRepresentationCapacity}
-                    />
-                );
-                break;
-            case "agent":
-                setRepresentationCapacity("agent");
-                return (
-                    <RepAgent
-                        formObj={formObj}
-                        appellantApplicantRepresentationArr={
-                            appellantApplicantRepresentationArr
-                        }
-                        setRepresentationCapacity={setRepresentationCapacity}
-                    />
-                );
-                break;
-            case "interestedpartyperson":
-                setRepresentationCapacity("interestedpartyperson");
-                return (
-                    <RepInterestedPartyPerson
-                        formObj={formObj}
-                        interestedPersonRepresentationArr={
-                            interestedPersonRepresentationArr
-                        }
-                        setRepresentationCapacity={setRepresentationCapacity}
-                    />
-                );
-                break;
-            case "landowner":
-                setRepresentationCapacity("landowner");
-                return (
-                    <RepLandOwner
-                        formObj={formObj}
-                        landOwnerRepresentationArr={landOwnerRepresentationArr}
-                        setRepresentationCapacity={setRepresentationCapacity}
-                    />
-                );
-                break;
-            default:
-                return (
-                    <RepCapacitySelection
-                        formObj={formObj}
-                        capacityOptionsArr={capacityOptionsArr}
-                        currentType={currentType}
-                        casesObj={casesObj}
-                        setRepresentationCapacity={setRepresentationCapacity}
-                    />
-                );
-        }
-    };
-
-    return (
-        <div>
-            {whichControl()} - {props.firstValue}
-        </div>
-    );
-};
-
-const mapStateToProps = (state) => {
-    return {
-        search: state.search,
-        searchResultsObj: state.searchResultsObj,
-        formData: state.formData,
-        appealType: state.appealType,
-        currentView: state.currentView,
-        //form: state.form,
-    };
-};
-
-const mapDispatchToProps = (dispatch) => {
-    return {
-        setRepresentationCapacity: (representationCapacity) => {
-            dispatch(setRepresentationCapacity(representationCapacity));
-        },
-    };
-};
-
-const selector = formValueSelector("representationForm");
-
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(
-    reduxForm({
-        form: "representationForm",
-        destroyOnUnmount: false,
-    })(MakeRepresentation)
-);
@@ -1,17 +1,17 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
+import { useRouter } from "next/router";
+import { connect } from "react-redux";
+import { Field, change, reduxForm } from "redux-form";
+import { useState } from "react";
+
+import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
+    FileUploadField,
+    RenderCondtionalRadioList,
    RenderPickList,
-    RenderTextfield,
-    RenderRadioList,
-    RenderMultiline,
+    RenderRichMultiline,
 } from "./representationElements";
-import {
-    setRepresentationCapacity,
-    setRepresentationSubmit,
-} from "../../../store/currentView/action";
+
 import { useDropzone } from "react-dropzone";

 const RepAgent = (props) => {
@@ -25,180 +25,194 @@ const RepAgent = (props) => {
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
+        setRepFileName,
+        updateRepresentation,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const [savingStatus, setSavingStatus] = useState(false);
+
+    setRepFileName(formObj.representationForm.values);
+
+    let filterFilesList =
+        props.currentView.caseReference.repDetails.filesList.filter(function (
+            el
+        ) {
+            return el != null;
+        });
+
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));
+    const required = (value) => (value ? undefined : "Required");

    return (
-        <div id="rep-appellant">
-            <div className="govuk-grid-column-full">
-                <div className="govuk-grid-row">
-                    <h2 className="govuk-heading-m ">Representation - agent</h2>
+        <>
+            <div className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    {typeof formObj.representationForm.values
+                        .representationType == "undefined" &&
+                    props.representationType != "Select..." ? (
+                        <>
+                            <h2 className="govuk-heading-m ">
+                                {t(
+                                    "myrepresentations:representation-from-an-agent-heading"
+                                )}
+                            </h2>

-                    <div className="govuk-form-group">
-                        <label
-                            className="govuk-label govuk-body-m"
-                            htmlFor="representationType"
-                        >
-                            What kind of representation are you making?
-                        </label>
-                        <Field
-                            name="representationType"
-                            component={RenderPickList}
-                            datafieldname="representationType"
-                            optionsArr={appellantApplicantRepresentationArr}
-                        />
-                    </div>
-                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-form-group">
-                        <Field
-                            className="govuk-input govuk-!-width-three-quarters"
-                            id="representationDescription"
-                            name="representationDescription"
-                            value="email"
-                            data-aria-controls="representationDescription"
-                            type="text"
-                            component={RenderTextfield}
-                            label="Description of representation"
-                        />
-                    </div>
-                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-form-group">
-                        <p className="govuk-body">
-                            You can enter your comments in the space provided or
-                            attach a separate document.
-                        </p>
-                        <fieldset
-                            className="govuk-fieldset"
-                            aria-describedby="commentBox-hint"
-                        >
-                            <div id="commentBox-hint" className="govuk-hint">
-                                My comments are set out in:*
-                            </div>
-                            <div
-                                className="govuk-checkboxes"
-                                data-module="govuk-checkboxes"
+                            <label
+                                className="govuk-label govuk-body-m"
+                                htmlFor="representationType"
                            >
-                                <div className="govuk-checkboxes__item">
-                                    <Field
-                                        className="govuk-checkboxes__input"
-                                        id="commentBox"
-                                        name="commentBox"
-                                        value="email"
-                                        data-aria-controls="commentBox"
-                                        type="checkbox"
-                                        component={RenderTextfield}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-checkboxes__label"
-                                        htmlFor="commentBox"
-                                    >
-                                        the box below{" "}
-                                    </label>
-                                </div>
-                                <div
-                                    className={
-                                        _.isEmpty(formObj["representationForm"])
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values
-                                              )
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values.commentBox
-                                              )
-                                            ? formObj["representationForm"]
-                                                  .values.commentBox == false
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                : "govuk-checkboxes__conditional"
-                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
-                                    }
-                                    id="conditional-commentBox"
-                                >
-                                    <div className="govuk-form-group">
-                                        <Field
-                                            name="representationComments"
-                                            id="representationComments"
-                                            component={RenderMultiline}
-                                            type="text"
-                                            rows="5"
-                                            className="govuk-textarea govuk-input--width-30"
-                                            aria-describedby={
-                                                props.name + "-hint"
-                                            }
-                                        />
-                                    </div>
-                                </div>
-                                <div className="govuk-checkboxes__item">
-                                    <Field
-                                        className="govuk-checkboxes__input"
-                                        id="documentBox"
-                                        name="documentBox"
-                                        value="email"
-                                        data-aria-controls="documentBox"
-                                        type="checkbox"
-                                        component={RenderTextfield}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-checkboxes__label"
-                                        htmlFor="documentBox"
-                                    >
-                                        separate documents
-                                    </label>
-                                </div>
-                                <div
-                                    className={
-                                        _.isEmpty(formObj["representationForm"])
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values
-                                              )
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values.documentBox
-                                              )
-                                            ? formObj["representationForm"]
-                                                  .values.documentBox == false
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                : "govuk-checkboxes__conditional"
-                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
-                                    }
-                                    id="conditional-documentBox"
-                                >
-                                    <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>
-                        </fieldset>
-                    </div>{" "}
+                                {t("myrepresentations:kind-of-rep-label")}
+                            </label>
+
+                            <Field
+                                name="representationType"
+                                component={RenderPickList}
+                                datafieldname="representationType"
+                                optionsArr={appellantApplicantRepresentationArr}
+                            />
+                        </>
+                    ) : (
+                        <label className="govuk-label govuk-body-m">
+                            {t("myrepresentations:representation-type")}:{" "}
+                            {router.locale == "cy"
+                                ? formObj.representationForm.values
+                                      .representationType == "Questionnaire"
+                                    ? "Holiadur"
+                                    : formObj.representationForm.values
+                                          .representationType == "Statement"
+                                    ? "Datganiad"
+                                    : formObj.representationForm.values
+                                          .representationType ==
+                                      "Final comments"
+                                    ? "Sylwadau terfynol"
+                                    : formObj.representationForm.values
+                                          .representationType
+                                : formObj.representationForm.values
+                                      .representationType}
+                        </label>
+                    )}
                </div>
+            </div>
+            {(typeof props.representationType != "undefined" ||
+                typeof formObj.representationForm.values.representationType !=
+                    "undefined") && (
+                <>
+                    <div className="govuk-grid-row">
+                        <div className="govuk-form-group">
+                            <Field
+                                name="representationOnBehalfOf"
+                                datafieldname="representationOnBehalfOf"
+                                // label={t("myrepresentations:capacity-select-what-capacity-label")}
+                                options={["Yes", "No"]}
+                                id="representationOnBehalfOf"
+                                className="govuk-radios__input"
+                                errorMsg={t(
+                                    "myrepresentations:select-an-option-label"
+                                )}
+                                component={RenderCondtionalRadioList}
+                                validate={[required]}
+                                legend={
+                                    "Are you acting on behalf of a company, group or organisation?"
+                                }
+                            />
+                        </div>
+                    </div>
+
+                    <div className="govuk-grid-row">
+                        <div className="govuk-form-group">
+                            <p className="govuk-body">
+                                {t("myrepresentations:enter-comment-label")}
+                            </p>
+                            <fieldset
+                                className="govuk-fieldset"
+                                aria-describedby="commentBox-hint"
+                            >
+                                <div
+                                    id="commentBox-hint"
+                                    className="govuk-hint"
+                                >
+                                    {t(
+                                        "myrepresentations:comments-set-out-label"
+                                    )}
+                                    :
+                                </div>
+                                <div className="govuk-form-group">
+                                    <Field
+                                        name="representationComments"
+                                        id="representationComments"
+                                        component={RenderRichMultiline}
+                                        type="text"
+                                        rows="5"
+                                        className="govuk-textarea govuk-input--width-30"
+                                        aria-describedby={props.name + "-hint"}
+                                    />
+                                    <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
+                                        {t(
+                                            "myrepresentations:publish-policy-label"
+                                        )}
+                                        <a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
+                                            https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
+                                        </a>
+                                    </p>
+                                </div>
+                                <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                    <FileUploadField
+                                        name={"representationDocuments"}
+                                        id={"representationDocuments"}
+                                        label={t(
+                                            "myrepresentations:add-files-label"
+                                        )}
+                                        ticketnumber={props.props.caseReference}
+                                        hint={"sdsd"}
+                                        fileList={[]}
+                                        setFilesForRepresentation={[]}
+                                        containerID={
+                                            props.props.props.accountDetails
+                                                .containerID
+                                        }
+                                        filenamePrefix={props}
+                                    />
+                                </div>
+                                {props.currentView.caseReference.hasOwnProperty(
+                                    "repDetails"
+                                ) &&
+                                props.currentView.caseReference.repDetails
+                                    .filesList.length > 0 ? (
+                                    <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                        {filterFilesList.map((blob, i) => (
+                                            <div
+                                                key={blob.name + "_" + i}
+                                                className="govuk-!-margin-bottom-5 fileThumb "
+                                            >
+                                                <img
+                                                    src={getThumbnailIconByExtension(
+                                                        blob.name
+                                                    )}
+                                                    alt={blob.name}
+                                                    width="50"
+                                                />
+
+                                                <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
+                                                    {blob.name} (
+                                                    {bytesToSize(blob.size)})
+                                                </span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                ) : (
+                                    ""
+                                )}
+                            </fieldset>
+                        </div>{" "}
+                    </div>
+                </>
+            )}
+            {typeof formObj.representationForm.values.representationType !=
+                "undefined" && (
                <div className="govuk-grid-row">
                    <div className="govuk-button-group">
                        <button
@@ -206,30 +220,80 @@ const RepAgent = (props) => {
                            className="govuk-button"
                            data-module="govuk-button"
                        >
-                            Continue
+                            {t("common:continue-button")}
                        </button>
-                        {/* <a
-                            onClick={() => {
-                                setRepresentationSubmit(false);
-                            }}
-                            className="govuk-button"
-                        >
-                            Continue
-                        </a> */}
+                        {/* {router.query.state != "edit" && (
+                            <a
+                                onClick={() => {
+                                    setRepresentationCapacity();
+                                    props.updateField(
+                                        "representationForm",
+                                        "representationCapacity",
+                                        ""
+                                    );
+                                }}
+                                className="govuk-link"
+                            >
+                                {t("common:back-link")}
+                            </a>
+                        )} */}
+                        {savingStatus ? (
+                            <span className=" progress-save-active">
+                                {router.locale == "cy"
+                                    ? "Nôl data"
+                                    : "Saving data"}
+                                <img
+                                    className="data-loading-icon"
+                                    src="/assets/images/loading.gif"
+                                    alt={
+                                        router.locale == "cy"
+                                            ? "Nôl data"
+                                            : "Saving data"
+                                    }
+                                />
+                            </span>
+                        ) : (
+                            <button
+                                className="govuk-button progress-save "
+                                onClick={() => {
+                                    let valuesObj =
+                                        props.props.props.form[props.form]
+                                            .values || {};

-                        <a
-                            onClick={() => {
-                                setRepresentationCapacity();
-                            }}
-                            className="govuk-link"
-                        >
-                            Back
-                        </a>
+                                    console.log("valuesobj:", valuesObj);
+
+                                    delete valuesObj["_pinswg_appellant_value"];
+
+                                    console.log("on save:", valuesObj);
+                                    updateRepresentation(
+                                        valuesObj,
+                                        false,
+                                        true
+                                    );
+                                }}
+                            >
+                                {t("common:save-exit-button")}
+                            </button>
+                        )}
                    </div>
                </div>
-            </div>
-        </div>
+            )}
+        </>
    );
 };

-export default RepAgent;
+const mapDispatchToProps = (dispatch) => ({
+    updateField: (form, field, newValue) =>
+        dispatch(change(form, field, newValue)),
+});
+
+export default connect(
+    null,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "representationForm",
+        enableReinitialize: true,
+        destroyOnUnmount: false,
+    })(RepAgent)
+);
@@ -1,19 +1,22 @@
-import Link from "next/link";
-import { connect } from "react-redux";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm, reset } from "redux-form";
+import { useRouter } from "next/router";
+import React from "react";
+import { connect } from "react-redux";
+import { Field, change, reduxForm } from "redux-form";
+import { useState } from "react";
+
+import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
+    FileUploadField,
    RenderPickList,
-    RenderTextfield,
-    RenderRadioList,
-    RenderMultiline,
+    RenderRichMultiline,
 } from "./representationElements";
+
 import { useDropzone } from "react-dropzone";
-import {
-    setRepresentationCapacity,
-    setRepresentationSubmit,
-} from "../../../store/currentView/action";
+// import {
+//     setRepresentationCapacity,
+//     setRepresentationSubmit,
+// } from "../../../store/currentView/action";

 const RepAppellant = (props) => {
    let { t } = useTranslation();
@@ -26,178 +29,168 @@ const RepAppellant = (props) => {
        setRepresentationCapacity,
        setRepresentationSubmit,
        currentView,
+        setRepFileName,
+        updateRepresentation,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
-    const files = acceptedFiles.map((file) => (
-        <li key={file.path}>
-            {file.path} - {file.size} bytes
-        </li>
-    ));
+    const [savingStatus, setSavingStatus] = useState(false);
+
+    setRepFileName(formObj.representationForm.values);
+
+    let filterFilesList =
+        props.currentView.caseReference.repDetails.filesList.filter(function (
+            el
+        ) {
+            return el != null;
+        });

    return (
-        <div id="rep-appellant">
-            <div className="govuk-grid-column-full">
-                <div className="govuk-grid-row">
-                    <div className="govuk-form-group">
-                        <label
-                            className="govuk-label govuk-body-m"
-                            htmlFor="representationType"
-                        >
-                            What kind of representation are you making?
+        <>
+            <div className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    {typeof formObj.representationForm.values
+                        .representationType == "undefined" &&
+                    props.representationType != "Select..." ? (
+                        <>
+                            <h2 className="govuk-heading-m ">
+                                {t(
+                                    "myrepresentations:representation-from-an-appellant-heading"
+                                )}
+                            </h2>
+                            <label
+                                className="govuk-label govuk-body-m"
+                                htmlFor="representationType"
+                            >
+                                {t("myrepresentations:kind-of-rep-label")}
+                            </label>
+                            <Field
+                                name="representationType"
+                                component={RenderPickList}
+                                datafieldname="representationType"
+                                optionsArr={appellantApplicantRepresentationArr}
+                            />
+                        </>
+                    ) : (
+                        <label className="govuk-label govuk-body-m">
+                            {t("myrepresentations:representation-type")}:{" "}
+                            {router.locale == "cy"
+                                ? formObj.representationForm.values
+                                      .representationType == "Questionnaire"
+                                    ? "Holiadur"
+                                    : formObj.representationForm.values
+                                          .representationType == "Statement"
+                                    ? "Datganiad"
+                                    : formObj.representationForm.values
+                                          .representationType ==
+                                      "Final comments"
+                                    ? "Sylwadau terfynol"
+                                    : formObj.representationForm.values
+                                          .representationType
+                                : formObj.representationForm.values
+                                      .representationType}
                        </label>
-                        <Field
-                            name="representationType"
-                            component={RenderPickList}
-                            datafieldname="representationType"
-                            optionsArr={appellantApplicantRepresentationArr}
-                        />
-                    </div>
-                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-form-group">
-                        <Field
-                            className="govuk-input govuk-!-width-three-quarters"
-                            id="representationDescription"
-                            name="representationDescription"
-                            value="email"
-                            data-aria-controls="representationDescription"
-                            type="text"
-                            component={RenderTextfield}
-                            label="Description of representation"
-                        />
-                    </div>
+                    )}
                </div>
+            </div>
+            {(typeof props.representationType != "undefined" ||
+                typeof formObj.representationForm.values.representationType !=
+                    "undefined") && (
                <div className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <p className="govuk-body">
-                            You can enter your comments in the space provided or
-                            attach a separate document.
+                            {t("myrepresentations:enter-comment-label")}
                        </p>
                        <fieldset
                            className="govuk-fieldset"
                            aria-describedby="commentBox-hint"
                        >
                            <div id="commentBox-hint" className="govuk-hint">
-                                My comments are set out in:*
+                                {t("myrepresentations:comments-set-out-label")}:
                            </div>
-                            <div
-                                className="govuk-checkboxes"
-                                data-module="govuk-checkboxes"
-                            >
-                                <div className="govuk-checkboxes__item">
-                                    <Field
-                                        className="govuk-checkboxes__input"
-                                        id="commentBox"
-                                        name="commentBox"
-                                        value="email"
-                                        data-aria-controls="commentBox"
-                                        type="checkbox"
-                                        component={RenderTextfield}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-checkboxes__label"
-                                        htmlFor="commentBox"
-                                    >
-                                        the box below{" "}
-                                    </label>
-                                </div>
-                                <div
-                                    className={
-                                        _.isEmpty(formObj["representationForm"])
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values
-                                              )
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values.commentBox
-                                              )
-                                            ? formObj["representationForm"]
-                                                  .values.commentBox == false
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                : "govuk-checkboxes__conditional"
-                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
-                                    }
-                                    id="conditional-commentBox"
-                                >
-                                    <div className="govuk-form-group">
-                                        <Field
-                                            name="representationComments"
-                                            id="representationComments"
-                                            component={RenderMultiline}
-                                            type="text"
-                                            rows="5"
-                                            className="govuk-textarea govuk-input--width-30"
-                                            aria-describedby={
-                                                props.name + "-hint"
-                                            }
-                                        />
-                                    </div>
-                                </div>
-                                <div className="govuk-checkboxes__item">
-                                    <Field
-                                        className="govuk-checkboxes__input"
-                                        id="documentBox"
-                                        name="documentBox"
-                                        value="email"
-                                        data-aria-controls="documentBox"
-                                        type="checkbox"
-                                        component={RenderTextfield}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-checkboxes__label"
-                                        htmlFor="documentBox"
-                                    >
-                                        separate documents
-                                    </label>
-                                </div>
-                                <div
-                                    className={
-                                        _.isEmpty(formObj["representationForm"])
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values
-                                              )
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values.documentBox
-                                              )
-                                            ? formObj["representationForm"]
-                                                  .values.documentBox == false
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                : "govuk-checkboxes__conditional"
-                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
-                                    }
-                                    id="conditional-documentBox"
-                                >
-                                    <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 className="govuk-form-group">
+                                <Field
+                                    name="representationComments"
+                                    id="representationComments"
+                                    component={RenderRichMultiline}
+                                    type="text"
+                                    rows="5"
+                                    className="govuk-textarea govuk-input--width-30"
+                                    aria-describedby={props.name + "-hint"}
+                                />
+                                {formObj.representationForm.values.appealType ==
+                                "846040004" ? (
+                                    <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
+                                        {t(
+                                            "myrepresentations:questionnaire-publish-policy-label"
+                                        )}{" "}
+                                        <a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
+                                            https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
+                                        </a>
+                                    </p>
+                                ) : (
+                                    <p className="govuk-hint govuk-!-font-size-14 govuk-!-margin-top-5">
+                                        {t(
+                                            "myrepresentations:publish-policy-label"
+                                        )}{" "}
+                                        <a href="https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html">
+                                            https://gov.wales/planning-and-environment-decisions-wales-publishing-policy-html
+                                        </a>
+                                    </p>
+                                )}
                            </div>
+                            <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                <FileUploadField
+                                    name={"representationDocuments"}
+                                    id={"representationDocuments"}
+                                    label={t(
+                                        "myrepresentations:add-files-label"
+                                    )}
+                                    ticketnumber={props.props.caseReference}
+                                    hint={"sdsd"}
+                                    fileList={[]}
+                                    setFilesForRepresentation={[]}
+                                    containerID={
+                                        props.props.props.accountDetails
+                                            .containerID
+                                    }
+                                    filenamePrefix={props}
+                                />
+                            </div>
+                            {props.currentView.caseReference.hasOwnProperty(
+                                "repDetails"
+                            ) &&
+                            props.currentView.caseReference.repDetails.filesList
+                                .length > 0 ? (
+                                <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                    {filterFilesList.map((blob, i) => (
+                                        <div
+                                            key={blob.name + "_" + i}
+                                            className="govuk-!-margin-bottom-5 fileThumb "
+                                        >
+                                            <img
+                                                src={getThumbnailIconByExtension(
+                                                    blob.name
+                                                )}
+                                                alt={blob.name}
+                                                width="50"
+                                            />
+
+                                            <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
+                                                {blob.name} (
+                                                {bytesToSize(blob.size)})
+                                            </span>
+                                        </div>
+                                    ))}
+                                </div>
+                            ) : (
+                                ""
+                            )}
                        </fieldset>
                    </div>{" "}
                </div>
+            )}
+            {typeof formObj.representationForm.values.representationType !=
+                "undefined" && (
                <div className="govuk-grid-row">
                    <div className="govuk-button-group">
                        <button
@@ -205,29 +198,83 @@ const RepAppellant = (props) => {
                            className="govuk-button"
                            data-module="govuk-button"
                        >
-                            Continue
+                            {t("common:continue-button")}
                        </button>
-                        {/* <a
+                        {/* {router.query.state != "edit" && (
+                            <a
                                onClick={() => {
-                                    setRepresentationSubmit(false);
+                                    setRepresentationCapacity();
+                                    props.updateField(
+                                        "representationForm",
+                                        "representationType",
+                                        ""
+                                    );
                                }}
-                                className="govuk-button"
+                                className="govuk-link"
                            >
-                                Continue
-                            </a> */}
-                        <a
-                            onClick={() => {
-                                setRepresentationCapacity();
-                            }}
-                            className="govuk-link"
-                        >
-                            Back
-                        </a>
+                                {t("common:back-link")}
+                            </a>
+                        )} */}
+
+                        {savingStatus ? (
+                            <span className=" progress-save-active">
+                                {router.locale == "cy"
+                                    ? "Nôl data"
+                                    : "Saving data"}
+                                <img
+                                    className="data-loading-icon"
+                                    src="/assets/images/loading.gif"
+                                    alt={
+                                        router.locale == "cy"
+                                            ? "Nôl data"
+                                            : "Saving data"
+                                    }
+                                />
+                            </span>
+                        ) : (
+                            <button
+                                className="govuk-button progress-save "
+                                onClick={() => {
+                                    let valuesObj =
+                                        props.props.props.form[props.form]
+                                            .values || {};
+
+                                    console.log("valuesobj:", valuesObj);
+
+                                    delete valuesObj["_pinswg_appellant_value"];
+
+                                    console.log("on save:", valuesObj);
+                                    updateRepresentation(
+                                        valuesObj,
+                                        false,
+                                        true
+                                    );
+                                }}
+                            >
+                                {t("common:save-exit-button")}
+                            </button>
+                        )}
                    </div>
                </div>
-            </div>
-        </div>
+            )}
+        </>
    );
 };

-export default RepAppellant;
+//const mapStateToProps = (state, props) => {};
+
+const mapDispatchToProps = (dispatch) => ({
+    updateField: (form, field, newValue) =>
+        dispatch(change(form, field, newValue)),
+});
+
+export default connect(
+    null,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "representationForm",
+        enableReinitialize: true,
+        destroyOnUnmount: false,
+    })(RepAppellant)
+);
@@ -1,23 +1,9 @@
-import Link from "next/link";
-import { connect } from "react-redux";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import {
-    Field,
-    reduxForm,
-    formValueSelector,
-    handleSubmit,
-    reset,
-} from "redux-form";
-import {
-    RenderPickList,
-    RenderTextfield,
-    RenderRadioList,
-    RenderMultiline,
-} from "./representationElements";
+import { useRouter } from "next/router";
 import { useDropzone } from "react-dropzone";
+import { Field } from "redux-form";
 import RepDetails from "./representationDetails";
-import { setRepresentationCapacity } from "../../../store/currentView/action";
+import { RenderRadioListWithText } from "./representationElements";

 let RepCapacitySelection = (props) => {
    let { t } = useTranslation();
@@ -47,22 +33,33 @@ let RepCapacitySelection = (props) => {
                formObj={formObj}
                currentType={currentType}
                casesObj={casesObj}
+                caseReference={props.props.caseReference}
+                searchResultsObj={props.props.searchResultsObj}
+                myRepresentations={props.props.myRepresentations}
+                props={props}
            />{" "}
-            <div id="rep-details" className="vo_hiddens">
+            <div id="rep-details" className="">
                <div className="govuk-grid-column-full">
                    <div className="govuk-grid-row">
                        <h2 className="govuk-heading-m ">
-                            Your details - {props.firstValue}
+                            {t(
+                                "myrepresentations:capacity-select-your-details"
+                            )}{" "}
+                            - {props.firstValue}
                        </h2>
                        <Field
                            name="representationCapacity"
                            datafieldname="representationCapacity"
-                            label="In what capacity do you wish to make representations on this case?"
+                            label={t(
+                                "myrepresentations:capacity-select-what-capacity-label"
+                            )}
                            options={capacityOptionsArr}
                            id="representationCapacity"
                            className="govuk-radios__input"
-                            errorMsg="Select an option"
-                            component={RenderRadioList}
+                            errorMsg={t(
+                                "myrepresentations:select-an-option-label"
+                            )}
+                            component={RenderRadioListWithText}
                            validate={[required]}
                        />
                    </div>
@@ -75,7 +72,7 @@ let RepCapacitySelection = (props) => {
                                className="govuk-button"
                                data-module="govuk-button"
                            >
-                                Continue
+                                {t("common:continue-button")}
                            </button>
                        </div>
                    </div>
@@ -1,19 +1,17 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
-import {
-    RenderPickList,
-    RenderTextfield,
-    RenderRadioList,
-    RenderMultiline,
-} from "./representationElements";
-import {
-    setRepresentationCapacity,
-    setRepresentationSubmit,
-    setSubmitBack,
-} from "../../../store/currentView/action";
+import { useEffect } from "react";
+import { connect } from "react-redux";
+
 import { useDropzone } from "react-dropzone";
+import {
+    createWatchedCases,
+    sendEmail,
+    sendRepCompleteMessage,
+    setRepInvolvment,
+} from "../../../actions";
+import { setRepresentationReset } from "../../../store/currentView/action";

 const RepComplete = (props) => {
    let { t } = useTranslation();
@@ -28,6 +26,8 @@ const RepComplete = (props) => {
        currentView,
        setSubmitBack,
        setRepresentationSubmitConfirmation,
+        setRepresentationMessageSent,
+        repFormData,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
@@ -36,35 +36,75 @@ const RepComplete = (props) => {
        </li>
    ));

+    useEffect(() => {
+        const reference = "PEDW-REPRESENTATION-COMPLETE";
+        const templateId = "c49785e7-3217-40b6-b33f-dffc4e58d5c1";
+        const emailAddress =
+            props.props.props.props.accountDetails.accountDetails.emailaddress1;
+        const personalisation = {
+            "caseReference":
+                props.props.currentView.caseReference.currentReference,
+            "emailAddress":
+                props.props.props.props.accountDetails.accountDetails
+                    .emailaddress1,
+            "linkExpiry": 10 * 60,
+        };
+
+        props.props.currentView.representationMessageSent != true &&
+            (setRepInvolvment(
+                props.props.currentView.caseReference.incidentid,
+                props.props.props.props.accountDetails.loggedinUserId
+            ),
+            sendRepCompleteMessage(
+                props.props.props.props.accountDetails.containerID,
+                props.props.currentView.caseReference.currentReference,
+                props.repFormData.repfile_name
+            ),
+            sendEmail(templateId, emailAddress, personalisation, reference),
+            createWatchedCases({
+                "pinswg_WatchedCase@odata.bind":
+                    "/incidents(" +
+                    props.props.currentView.caseReference.incidentid +
+                    ")",
+                "pinswg_Contact@odata.bind":
+                    "/contacts(" +
+                    props.props.props.props.accountDetails.loggedinUserId +
+                    ")",
+                "pinswg_appealcasetype":
+                    props.props.currentView.caseReference.appealType,
+                "pinswg_representationsubmitted": new Date(Date.now()),
+                "pinswg_representationtype":
+                    props.props.currentView.caseReference.hasOwnProperty(
+                        "repDetails"
+                    )
+                        ? props.props.currentView.caseReference.repDetails
+                              .representationType
+                        : props.props.currentView.caseReference
+                              .representationType,
+            }),
+            setRepresentationMessageSent(true));
+    });
    return (
        <div id="rep-appellant">
            <div className="govuk-grid-column-full">
-                <div className="govuk-grid-row">
-                    <h2 className="govuk-heading-m ">
-                        Submission of Representation
-                    </h2>
-                    <p>
-                        Thank you for submitting your representation(s) using
-                        the Appeals Casework Portal.
-                    </p>
+                <div className="govuk-grid-row govuk-body">
+                    <h1 className="govuk-heading-m ">
+                        {t("myrepresentations:rep-complete-heading")}
+                    </h1>
+                    <p>{t("myrepresentations:rep-complete-para-one")}</p>

-                    <p>
-                        Please remember that any supporting documentation needs
-                        to be received by us within the appropriate deadline for
-                        the case. Anything you send to us must be clearly marked
-                        with the case reference number and the site address
-                        (including the postcode, where known).
-                    </p>
+                    <p>{t("myrepresentations:rep-complete-para-two")}</p>

-                    <p>
-                        You will shortly receive confirmation to the email
-                        address you have provided.
-                    </p>
+                    <p> {t("myrepresentations:rep-complete-para-three")}</p>
                </div>
                <div className="govuk-grid-row">
                    <div className="govuk-button-group">
-                        <Link href="/myportal">
-                            <a className="govuk-button">Continue</a>
+                        <Link
+                            href="/"
+                            onClick={() => setRepresentationReset()}
+                            className="govuk-button"
+                        >
+                            {t("common:continue-button")}
                        </Link>
                    </div>
                </div>
@@ -73,4 +113,22 @@ const RepComplete = (props) => {
    );
 };

-export default RepComplete;
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        currentView: state.currentView,
+        myRepresentations: state.myRepresentations,
+        initialValues: state.currentView.caseReference.repDetails,
+        accountDetails: state.accountDetails,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RepComplete);
@@ -1,21 +1,14 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
+import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
-import {
-    RenderPickList,
-    RenderTextfield,
-    RenderRadioList,
-    RenderMultiline,
-} from "./representationElements";
-import {
-    setRepresentationCapacity,
-    setRepresentationSubmit,
-    setSubmitBack,
-    setRepresentationSubmitConfirmation,
-} from "../../../store/currentView/action";
+import { useRouter } from "next/router";
+import { useState } from "react";
 import { useDropzone } from "react-dropzone";
+import { connect } from "react-redux";
 import RepComplete from "./representationComplete";
+import RepLPAQuestionnaireCheck_enforcement from "./representationQuestionnairesCheck/representationLPAQuestionnaireCheck_enforcement";
+import RepLPAQuestionnaireCheck_s78 from "./representationQuestionnairesCheck/representationLPAQuestionnaireCheck_s78";
+
+import { bytesToSize, getThumbnailIconByExtension } from "../../utils";

 const RepCompleteSubmit = (props) => {
    let { t } = useTranslation();
@@ -30,6 +23,8 @@ const RepCompleteSubmit = (props) => {
        currentView,
        setSubmitBack,
        setRepresentationSubmitConfirmation,
+        setRepresentationMessageSent,
+        setRepresentationReset,
    } = props;
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
    const files = acceptedFiles.map((file) => (
@@ -38,43 +33,427 @@ const RepCompleteSubmit = (props) => {
        </li>
    ));

+    const [confirmSections, setConfirmSections] = useState(false);
+
+    const repFormData = formObj.representationForm.values;
+
+    //const repDate = new Date();
+
+    // let day = repDate.getDate();
+    // let month = repDate.getMonth() + 1;
+    // let year = repDate.getFullYear();
+
+    // let repType = "";
+    // switch (repFormData.representationCapacity) {
+    //     case t("myrepresentations:capacity-options-arr-appellant"):
+    //         repType = "APP";
+    //         break;
+    //     case t("myrepresentations:capacity-options-arr-agent"):
+    //         repType = "AGENT";
+    //         break;
+    //     case t("myrepresentations:capacity-options-arr-interested"):
+    //         repType = "IP";
+    //         break;
+    //     case "Land Owner":
+    //         repType = "LO";
+    //         break;
+    //     case "lpa":
+    //         repType = "LPA";
+    //         break;
+
+    //     default:
+    //     // code block
+    // }
+
+    // Object.assign(repFormData, {
+    //     "repfile_name": repFormData.hasOwnProperty("repfile_name")
+    //         ? repFormData.repfile_name
+    //         : year +
+    //           "-" +
+    //           month +
+    //           "-" +
+    //           day +
+    //           "-" +
+    //           repDate.getHours() +
+    //           repDate.getMinutes() +
+    //           repDate.getSeconds() +
+    //           "_" +
+    //           repType +
+    //           "_" +
+    //           props.props.props.accountDetails.accountDetails.lastname +
+    //           "_" +
+    //           props.props.props.accountDetails.accountDetails.firstname,
+    //     "pinswg_name": props.props.currentView.caseReference.currentReference,
+    //     "containerID": props.props.props.accountDetails.containerID,
+    //     "appealType": props.props.currentView.caseReference.appealType,
+    //     "incidentID": props.props.currentView.caseReference.incidentid,
+    //     "caseRef": props.props.currentView.caseReference.currentReference,
+    // });
+
+    console.log("///////// repFormData:", repFormData);
+
+    const whichQuestionnaireCheck = () => {
+        {
+            switch (currentView.caseReference.appealType) {
+                case 846040000:
+                case 846040001:
+                case 846040006:
+                case 846040025:
+                case 846040004:
+                case 846040018:
+                case 846040003:
+                case 846040009:
+                case 846040008:
+                case 846040017:
+                    return (
+                        <RepLPAQuestionnaireCheck_s78
+                            props={props}
+                            formObj={formObj}
+                            setSubmitBack={setSubmitBack}
+                        />
+                    );
+                    break;
+                case 846040005:
+                case 846040006:
+                case 846040007:
+                    return (
+                        <RepLPAQuestionnaireCheck_enforcement
+                            props={props}
+                            formObj={formObj}
+                            setSubmitBack={setSubmitBack}
+                        />
+                    );
+                    break;
+                default:
+                    return <></>;
+                    break;
+            }
+        }
+    };
+
+    let buildAppealFilesArray = [];
+
+    let filesUploadObj =
+        formObj.representationForm.values.representationDocuments;
+
+    for (let key in filesUploadObj) {
+        typeof filesUploadObj[key].name != "undefined" &&
+            buildAppealFilesArray.push({
+                "name": filesUploadObj[key].name,
+                "size": filesUploadObj[key].size,
+            });
+    }
+
+    console.log(
+        buildAppealFilesArray,
+        formObj.representationForm.values.filesList
+    );
+
+    buildAppealFilesArray = formObj.representationForm.values.hasOwnProperty(
+        "filesList"
+    )
+        ? buildAppealFilesArray.concat(
+              formObj.representationForm.values.filesList
+          )
+        : buildAppealFilesArray;
+
+    console.log(buildAppealFilesArray);
+
+    // const arrUniq = [
+    //     ...new Map(buildAppealFilesArray.map((v) => [v.name, v])).values(),
+    // ];
+
+    buildAppealFilesArray = buildAppealFilesArray.filter(function (el) {
+        return el != null;
+    });
+
+    const arrUniq = buildAppealFilesArray.filter(
+        (obj1, i, arr) => arr.findIndex((obj2) => obj2.name === obj1.name) === i
+    );
+
+    console.log(arrUniq);
+
+    Object.assign(formObj.representationForm.values, {
+        "filesList": arrUniq,
+    });
+
+    let filterFiles = [];
    return (
        <>
            {currentView.representationSubmitConfirmation == true ? (
-                <RepComplete />
+                <RepComplete
+                    repFormData={repFormData}
+                    props={props}
+                    setRepresentationMessageSent={setRepresentationMessageSent}
+                    setRepresentationReset={setRepresentationReset}
+                />
            ) : (
                <div id="rep-appellant">
                    <div className="govuk-grid-column-full">
-                        <div className="govuk-grid-row">
-                            <h2 className="govuk-heading-m ">Submit</h2>
+                        <div className="govuk-grid-row govuk-body">
+                            <h1 className="govuk-heading-m ">
+                                {" "}
+                                {t(
+                                    "myrepresentations:rep-check-submit-heading"
+                                )}
+                            </h1>
+                            <dl className="govuk-summary-list ">
+                                <h2 className="govuk-heading-m govuk-!-margin-top-9">
+                                    {t(
+                                        "myrepresentations:rep-check-your-rep-heading"
+                                    )}
+                                </h2>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t(
+                                            "case:representation-representation-type"
+                                        )}
+                                    </dt>
+
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? repFormData.representationType ==
+                                              "Questionnaire"
+                                                ? "Holiadur"
+                                                : repFormData.representationType ==
+                                                  "Statement"
+                                                ? "Datganiad"
+                                                : repFormData.representationType ==
+                                                  "Final comments"
+                                                ? "Sylwadau terfynol"
+                                                : repFormData.representationType
+                                            : repFormData.representationType}
+                                    </dd>
+
+                                    <dd className="govuk-summary-list__actions">
+                                        <a
+                                            className="govuk-link"
+                                            href="#"
+                                            onClick={() => {
+                                                setSubmitBack();
+                                            }}
+                                        >
+                                            {t("common:change-link-label")}
+                                            <span className="govuk-visually-hidden">
+                                                {" "}
+                                                {/* {FieldsTranslations(
+                                                        rows[0].value
+                                                    )} */}
+                                            </span>
+                                        </a>
+                                    </dd>
+                                </div>
+                                {_.has(
+                                    repFormData,
+                                    "representationOnBehalfOf"
+                                ) && (
+                                    <>
+                                        <div className="govuk-summary-list__row">
+                                            <dt className="govuk-summary-list__key">
+                                                {t(
+                                                    "case:representation-onbehalfof"
+                                                )}
+                                            </dt>
+
+                                            <dd className="govuk-summary-list__value">
+                                                {
+                                                    repFormData.representationOnBehalfOf
+                                                }
+                                            </dd>
+
+                                            <dd className="govuk-summary-list__actions">
+                                                <a
+                                                    className="govuk-link"
+                                                    href="#"
+                                                    onClick={() => {
+                                                        setSubmitBack();
+                                                    }}
+                                                >
+                                                    {t(
+                                                        "common:change-link-label"
+                                                    )}
+                                                    <span className="govuk-visually-hidden">
+                                                        {" "}
+                                                        {/* {FieldsTranslations(
+                                                        rows[0].value
+                                                    )} */}
+                                                    </span>
+                                                </a>
+                                            </dd>
+                                        </div>
+                                        {repFormData.representationOnBehalfOf ==
+                                            "Yes" && (
+                                            <div className="govuk-summary-list__row">
+                                                <dt className="govuk-summary-list__key">
+                                                    {t(
+                                                        "case:representation-onbehalfof-details"
+                                                    )}
+                                                </dt>
+
+                                                <dd className="govuk-summary-list__value">
+                                                    {
+                                                        repFormData.representationOnBehalfOf_details
+                                                    }
+                                                </dd>
+
+                                                <dd className="govuk-summary-list__actions">
+                                                    <a
+                                                        className="govuk-link"
+                                                        href="#"
+                                                        onClick={() => {
+                                                            setSubmitBack();
+                                                        }}
+                                                    >
+                                                        {t(
+                                                            "common:change-link-label"
+                                                        )}
+                                                        <span className="govuk-visually-hidden">
+                                                            {" "}
+                                                            {/* {FieldsTranslations(
+                                                        rows[0].value
+                                                    )} */}
+                                                        </span>
+                                                    </a>
+                                                </dd>
+                                            </div>
+                                        )}
+                                    </>
+                                )}
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:representation-comments")}
+                                    </dt>
+
+                                    <dd className="govuk-summary-list__value">
+                                        <span
+                                            className="multiline-elipsis"
+                                            dangerouslySetInnerHTML={{
+                                                __html: repFormData.representationComments,
+                                            }}
+                                        />
+                                    </dd>
+
+                                    <dd className="govuk-summary-list__actions">
+                                        <a
+                                            className="govuk-link"
+                                            href="#"
+                                            onClick={() => {
+                                                setSubmitBack();
+                                            }}
+                                        >
+                                            {t("common:change-link-label")}
+                                            <span className="govuk-visually-hidden">
+                                                {" "}
+                                                {/* {FieldsTranslations(
+                                                        rows[0].value
+                                                    )} */}
+                                            </span>
+                                        </a>
+                                    </dd>
+                                </div>
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        {t("case:representation-files")}
+                                    </dt>
+
+                                    <dd className="govuk-summary-list__value">
+                                        {formObj.representationForm.values
+                                            .filesList.length > 0
+                                            ? ((filterFiles =
+                                                  formObj.representationForm.values.filesList.filter(
+                                                      function (el) {
+                                                          return el != null;
+                                                      }
+                                                  )),
+                                              filterFiles.map((blob, i) => (
+                                                  <div
+                                                      key={blob.name + "_" + i}
+                                                      className="govuk-!-margin-bottom-5 fileThumb "
+                                                  >
+                                                      <img
+                                                          src={getThumbnailIconByExtension(
+                                                              blob.name
+                                                          )}
+                                                          alt={blob.name}
+                                                          width="50"
+                                                      />
+
+                                                      <span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
+                                                          {blob.name} (
+                                                          {bytesToSize(
+                                                              blob.size
+                                                          )}
+                                                          )
+                                                      </span>
+                                                  </div>
+                                              )))
+                                            : ""}{" "}
+                                    </dd>
+
+                                    <dd className="govuk-summary-list__actions">
+                                        <a
+                                            className="govuk-link"
+                                            href="#"
+                                            onClick={() => {
+                                                setSubmitBack();
+                                            }}
+                                        >
+                                            {t("common:change-link-label")}
+                                            <span className="govuk-visually-hidden">
+                                                {" "}
+                                                {/* {FieldsTranslations(
+                                                        rows[0].value
+                                                    )} */}
+                                            </span>
+                                        </a>
+                                    </dd>
+                                </div>
+                                {whichQuestionnaireCheck()}
+                            </dl>
                            <p>
-                                The gathering and subsequent processing of the
-                                personal data supplied by you in this form, is
-                                in accordance with the terms of our registration
-                                under the Data Protection Act 2018.
+                                {t(
+                                    "myrepresentations:rep-check-tandc-para-one"
+                                )}
                            </p>

                            <p>
-                                The Planning Inspectorate takes its data
-                                protection responsibilities for the information
-                                you provide us with very seriously. To find out
-                                more about how we use and manage your personal
-                                data, please go to our privacy notice.
+                                {t(
+                                    "myrepresentations:rep-check-tandc-para-two"
+                                )}
                            </p>

                            <p>
-                                I confirm that all sections of this form have
-                                been fully completed and that the details are
-                                correct to the best of my knowledge.
+                                {t(
+                                    "myrepresentations:rep-check-tandc-para-three"
+                                )}
                            </p>

                            <div className="govuk-form-group">
-                                <label
-                                    className="govuk-label govuk-body-m"
-                                    htmlFor="representationType"
-                                >
-                                    I confirm I have read the above.
-                                </label>
+                                <div className="govuk-checkboxes govuk-checkboxes--small">
+                                    <div className="govuk-checkboxes__item">
+                                        <input
+                                            name="pinswg_checkconfirmation"
+                                            id="pinswg_checkconfirmation"
+                                            type="checkbox"
+                                            className="govuk-checkboxes__input"
+                                            value=""
+                                            onChange={(e) => {
+                                                setConfirmSections(
+                                                    !confirmSections
+                                                );
+                                            }}
+                                        />
+                                        <label
+                                            className="govuk-label govuk-checkboxes__label"
+                                            htmlFor="pinswg_checkconfirmation"
+                                        >
+                                            {t(
+                                                "myrepresentations:rep-check-tandc-para-four"
+                                            )}
+                                        </label>
+                                    </div>
+                                </div>
+
                                {/* <Field
                        name="representationType"
                        component={RenderPickList}
@@ -86,14 +465,18 @@ const RepCompleteSubmit = (props) => {
                        <div className="govuk-grid-row">
                            <div className="govuk-button-group">
                                <button
+                                    disabled={confirmSections ? false : true}
                                    type="submit"
                                    className="govuk-button"
                                    data-module="govuk-button"
-                                    onClick={() =>
-                                        setRepresentationSubmitConfirmation()
-                                    }
+                                    onClick={() => {
+                                        setRepresentationSubmitConfirmation(
+                                            true
+                                        );
+                                        setRepresentationSubmit(true);
+                                    }}
                                >
-                                    Continue
+                                    {t("common:continue-button")}
                                </button>
                                {/* <a
                        onClick={() => {
@@ -101,14 +484,14 @@ const RepCompleteSubmit = (props) => {
                        }}
                        className="govuk-button"
                    >
-                        Continue
+                         {t("common:continue-button")}
                    </a> */}

                                <a
                                    onClick={() => setSubmitBack()}
                                    className="govuk-link"
                                >
-                                    Back
+                                    {t("case:summary-back-button-label")}
                                </a>
                            </div>
                        </div>
@@ -119,4 +502,22 @@ const RepCompleteSubmit = (props) => {
    );
 };

-export default RepCompleteSubmit;
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        currentView: state.currentView,
+        myRepresentations: state.myRepresentations,
+        initialValues: state.currentView.caseReference.repDetails,
+        accountDetails: state.accountDetails,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {};
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(RepCompleteSubmit);
@@ -1,8 +1,6 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
-import { RenderPickList, RenderTextfield } from "./representationElements";
+import { useRouter } from "next/router";

 const RepDetails = (props) => {
    let { t } = useTranslation();
@@ -12,6 +10,31 @@ const RepDetails = (props) => {

    const { currentType, casesObj } = props;

+    let { caseReference } = props;
+
+    let setCaseDetailsObj = router.query.hasOwnProperty("state")
+        ? router.query.state == "edit"
+            ? props.myRepresentations.myRepresentations
+            : props.searchResultsObj.searchDetailsObj
+        : props.currentType == "watchedCases"
+        ? props.props.props.props.watchedCases.watchedCasesDetails
+        : props.props.props.searchResultsObj.searchDetailsObj;
+
+    var detailsObj = {};
+
+    caseReference = router.query.hasOwnProperty("state")
+        ? router.query.state == "edit"
+            ? router.query.case
+            : caseReference
+        : caseReference;
+
+    detailsObj = jsonpath(
+        '$..[?(@.pinswg_name=="' + caseReference + '")]',
+        setCaseDetailsObj
+    );
+
+    detailsObj = detailsObj[0];
+
    return (
        <>
            {" "}
@@ -24,41 +47,59 @@ const RepDetails = (props) => {
                            </dt>
                            <dd className="govuk-summary-list__value">
                                {casesObj.appellantApplicant || ""}
+                                {
+                                    detailsObj[
+                                        "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
+                                    ]
+                                }
                            </dd>
                        </div>
-                        {/* <div className="govuk-summary-list__row">
-                            <dt className="govuk-summary-list__key">
-                                {t("case:summary-agent-label")}
-                            </dt>
-                            <dd className="govuk-summary-list__value">
-                                Mr A Agent
-                            </dd>
-                        </div> */}
+
                        <div className="govuk-summary-list__row">
                            <dt className="govuk-summary-list__key">
                                {t("case:summary-site-address-label")}
                            </dt>
                            <dd className="govuk-summary-list__value">
-                                {casesObj.address1 || ""}
-                                <br />
-                                {casesObj.town || ""}
-
-                                <br />
-                                {casesObj.postcode || ""}
+                                {_.has(detailsObj, "pinswg_siteaddressline1")
+                                    ? detailsObj.pinswg_siteaddressline1
+                                    : ""}
+                                {_.has(detailsObj, "pinswg_siteaddressline1") &&
+                                    detailsObj.pinswg_siteaddressline1 !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddressline2")
+                                    ? detailsObj.pinswg_siteaddressline2
+                                    : ""}
+                                {_.has(detailsObj, "pinswg_siteaddressline2") &&
+                                    detailsObj.pinswg_siteaddressline2 !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddresstown")
+                                    ? detailsObj.pinswg_siteaddresstown
+                                    : ""}
+                                {_.has(detailsObj, "pinswg_siteaddresstown") &&
+                                    detailsObj.pinswg_siteaddresstown !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddresscounty")
+                                    ? detailsObj.pinswg_siteaddresscounty
+                                    : ""}
+                                {_.has(
+                                    detailsObj,
+                                    "pinswg_siteaddresscounty"
+                                ) &&
+                                    detailsObj.pinswg_siteaddresscounty !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddresspostcode")
+                                    ? detailsObj.pinswg_siteaddresspostcode
+                                    : ""}
                            </dd>
                        </div>
                    </dl>
                </div>
                <div className="govuk-grid-row">
                    <p className="govuk-body">
-                        This form enables you to submit comments on a case to
-                        Planning and Environment Decisions Wales.{" "}
+                        {t("myrepresentations:capacity-para-one")}
                    </p>
                    <p className="govuk-body">
-                        Please note that comments from interested parties need
-                        to be made within the timetable. This can be found on
-                        the previous &lsquo;Case Summary&lsquo; page. Comments
-                        submitted after this date may be considered invalid.
+                        {t("myrepresentations:capacity-para-two")}
                    </p>
                </div>
            </div>
@@ -1,14 +1,16 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
-import {
-    RenderPickList,
-    RenderTextfield,
-    RenderRadioList,
-    RenderMultiline,
-} from "./representationElements";
+import { useRouter } from "next/router";
 import { useDropzone } from "react-dropzone";
+import { connect } from "react-redux";
+import { Field, change, reduxForm } from "redux-form";
+import { useState } from "react";
+
+import {
+    FileUploadField,
+    RenderCondtionalRadioList,
+    RenderPickList,
+    RenderRichMultiline,
+} from "./representationElements";

 const RepInterestedPartyPerson = (props) => {
    let { t } = useTranslation();
@@ -20,137 +22,111 @@ const RepInterestedPartyPerson = (props) => {
        interestedPersonRepresentationArr,
        setRepresentationCapacity,
        setRepresentationSubmit,
+        setRepFileName,
+        updateRepresentation,
    } = props;
+    const required = (value) => (value ? undefined : "Required");
+
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const [savingStatus, setSavingStatus] = useState(false);
+
+    setRepFileName(formObj.representationForm.values);
+
+    let filterFilesList =
+        props.currentView.caseReference.repDetails.filesList.filter(function (
+            el
+        ) {
+            return el != null;
+        });
+
    const files = acceptedFiles.map((file) => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ));
    return (
-        <div id="rep-interested">
-            <div className="govuk-grid-column-full">
-                <div className="govuk-grid-row">
-                    <h2 className="govuk-heading-m ">
-                        Representation - interested
-                    </h2>
+        <>
+            <div className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    {typeof formObj.representationForm.values
+                        .representationType == "undefined" &&
+                    props.representationType != "Select..." ? (
+                        <>
+                            <h2 className="govuk-heading-m ">
+                                {t(
+                                    "myrepresentations:representation-from-an-interested-person-heading"
+                                )}
+                            </h2>

-                    <div className="govuk-form-group">
-                        <label
-                            className="govuk-label govuk-body-m"
-                            htmlFor="representationType"
-                        >
-                            What kind of representation are you making?
+                            <label
+                                className="govuk-label govuk-body-m"
+                                htmlFor="representationType"
+                            >
+                                {t("myrepresentations:kind-of-rep-label")}
+                            </label>
+
+                            <Field
+                                name="representationType"
+                                component={RenderPickList}
+                                datafieldname="representationType"
+                                validate={[required]}
+                                optionsArr={interestedPersonRepresentationArr}
+                                errorMsg={t(
+                                    "myrepresentations:select-an-option-label"
+                                )}
+                            />
+                        </>
+                    ) : (
+                        <label className="govuk-label govuk-body-m">
+                            {t("myrepresentations:representation-type")}:{" "}
+                            {router.locale == "cy"
+                                ? formObj.representationForm.values
+                                      .representationType == "Questionnaire"
+                                    ? "Holiadur"
+                                    : formObj.representationForm.values
+                                          .representationType == "Statement"
+                                    ? "Datganiad"
+                                    : formObj.representationForm.values
+                                          .representationType ==
+                                      "Final comments"
+                                    ? "Sylwadau terfynol"
+                                    : formObj.representationForm.values
+                                          .representationType
+                                : formObj.representationForm.values
+                                      .representationType}
                        </label>
-                        <Field
-                            name="representationType"
-                            component={RenderPickList}
-                            datafieldname="representationType"
-                            optionsArr={interestedPersonRepresentationArr}
-                        />
-                    </div>
+                    )}
                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-form-group">
-                        <Field
-                            className="govuk-input govuk-!-width-three-quarters"
-                            id="representationDescription"
-                            name="representationDescription"
-                            value="email"
-                            data-aria-controls="representationDescription"
-                            type="text"
-                            component={RenderTextfield}
-                            label="Description of representation"
-                        />
-                    </div>
+            </div>
+            {(typeof props.representationType != "undefined" ||
+                typeof formObj.representationForm.values.representationType !=
+                    "undefined") && (
+                <>
                    <div className="govuk-grid-row">
                        <div className="govuk-form-group">
-                            <fieldset
-                                className="govuk-fieldset"
-                                aria-describedby="contact-hint"
-                            >
-                                <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
-                                    <label
-                                        className="govuk-fieldset__heading govuk-body-m"
-                                        id="representationCapacity_label"
-                                    >
-                                        Are you acting on behalf of a company,
-                                        group or organisation?
-                                    </label>
-                                </legend>
-                                <div id="contact-hint" className="govuk-hint">
-                                    e.g. &lsquo;Owners of Numbers 1-5 High
-                                    Street&lsquo;, or &lsquo;Mr and Mrs
-                                    Smith&lsquo; or &lsquo;The executors of Mr
-                                    Evans&lsquo; estate&lsquo;
-                                </div>
-                                <div
-                                    className="govuk-radios govuk-radios--conditional"
-                                    data-module="govuk-radios"
-                                >
-                                    <div className="govuk-radios__item">
-                                        <input
-                                            className="govuk-radios__input"
-                                            id="contact"
-                                            name="contact"
-                                            type="radio"
-                                            value="email"
-                                            data-aria-controls="conditional-contact"
-                                        />
-                                        <label
-                                            className="govuk-label govuk-radios__label"
-                                            htmlFor="contact"
-                                        >
-                                            Yes
-                                        </label>
-                                    </div>
-                                    <div
-                                        className="govuk-radios__conditional govuk-radios__conditional--hidden"
-                                        id="conditional-contact"
-                                    >
-                                        <div className="govuk-form-group">
-                                            <label
-                                                className="govuk-label"
-                                                htmlFor="contact-by-email"
-                                            >
-                                                Enter the name of the
-                                                company/group/organisation *
-                                            </label>
-                                            <input
-                                                className="govuk-input govuk-!-width-one-third"
-                                                id="contact-by-email"
-                                                name="contact-by-email"
-                                                type="email"
-                                                spellCheck="false"
-                                                autoComplete="email"
-                                            />
-                                        </div>
-                                    </div>
-                                    <div className="govuk-radios__item">
-                                        <input
-                                            className="govuk-radios__input"
-                                            id="contact-2"
-                                            name="contact"
-                                            type="radio"
-                                            value="phone"
-                                            data-aria-controls="conditional-contact-2"
-                                        />
-                                        <label
-                                            className="govuk-label govuk-radios__label"
-                                            htmlFor="contact-2"
-                                        >
-                                            No
-                                        </label>
-                                    </div>
-                                </div>
-                            </fieldset>
+                            <Field
+                                name="representationOnBehalfOf"
+                                datafieldname="representationOnBehalfOf"
+                                // label="In what capacity do you wish to make representations on this case?"
+                                options={["Yes", "No"]}
+                                id="representationOnBehalfOf"
+                                className="govuk-radios__input"
+                                errorMsg={t(
+                                    "myrepresentations:select-an-option-label"
+                                )}
+                                component={RenderCondtionalRadioList}
+                                validate={[required]}
+                                legend={
+                                    "Are you acting on behalf of a company, group or organisation?"
+                                }
+                            />
                        </div>
                    </div>
+
                    <div className="govuk-grid-row">
                        <div className="govuk-form-group">
                            <p className="govuk-body">
-                                You can enter your comments in the space
-                                provided or attach a separate document.
+                                {t("myrepresentations:enter-comment-label")}
                            </p>
                            <fieldset
                                className="govuk-fieldset"
@@ -160,164 +136,135 @@ const RepInterestedPartyPerson = (props) => {
                                    id="commentBox-hint"
                                    className="govuk-hint"
                                >
-                                    My comments are set out in:*
+                                    {t(
+                                        "myrepresentations:comments-set-out-label"
+                                    )}
+                                    :
                                </div>
-                                <div
-                                    className="govuk-checkboxes"
-                                    data-module="govuk-checkboxes"
-                                >
-                                    <div className="govuk-checkboxes__item">
-                                        <Field
-                                            className="govuk-checkboxes__input"
-                                            id="commentBox"
-                                            name="commentBox"
-                                            value="email"
-                                            data-aria-controls="commentBox"
-                                            type="checkbox"
-                                            component={RenderTextfield}
-                                        />
-                                        <label
-                                            className="govuk-label govuk-checkboxes__label"
-                                            htmlFor="commentBox"
-                                        >
-                                            the box below{" "}
-                                        </label>
-                                    </div>
-                                    <div
-                                        className={
-                                            _.isEmpty(
-                                                formObj["representationForm"]
-                                            )
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                                : _.isEmpty(
-                                                      formObj[
-                                                          "representationForm"
-                                                      ].values
-                                                  )
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
-                                                : _.isEmpty(
-                                                      formObj[
-                                                          "representationForm"
-                                                      ].values.commentBox
-                                                  )
-                                                ? formObj["representationForm"]
-                                                      .values.commentBox ==
-                                                  false
-                                                    ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                    : "govuk-checkboxes__conditional"
-                                                : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
+                                <div className="govuk-form-group">
+                                    <Field
+                                        name="representationComments"
+                                        id="representationComments"
+                                        component={RenderRichMultiline}
+                                        type="text"
+                                        rows="5"
+                                        className="govuk-textarea govuk-input--width-30"
+                                        aria-describedby={props.name + "-hint"}
+                                    />
+                                </div>
+
+                                <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                    <FileUploadField
+                                        name={"representationDocuments"}
+                                        id={"representationDocuments"}
+                                        label={t(
+                                            "myrepresentations:add-files-label"
+                                        )}
+                                        ticketnumber={props.props.caseReference}
+                                        hint={"sdsd"}
+                                        fileList={[]}
+                                        setFilesForRepresentation={[]}
+                                        containerID={
+                                            props.props.props.accountDetails
+                                                .containerID
                                        }
-                                        id="conditional-commentBox"
-                                    >
-                                        <div className="govuk-form-group">
-                                            <Field
-                                                name="representationComments"
-                                                id="representationComments"
-                                                component={RenderMultiline}
-                                                type="text"
-                                                rows="5"
-                                                className="govuk-textarea govuk-input--width-30"
-                                                aria-describedby={
-                                                    props.name + "-hint"
-                                                }
-                                            />
-                                        </div>
-                                    </div>
-                                    <div className="govuk-checkboxes__item">
-                                        <Field
-                                            className="govuk-checkboxes__input"
-                                            id="documentBox"
-                                            name="documentBox"
-                                            value="email"
-                                            data-aria-controls="documentBox"
-                                            type="checkbox"
-                                            component={RenderTextfield}
-                                        />
-                                        <label
-                                            className="govuk-label govuk-checkboxes__label"
-                                            htmlFor="documentBox"
-                                        >
-                                            separate documents
-                                        </label>
-                                    </div>
-                                    <div
-                                        className={
-                                            _.isEmpty(
-                                                formObj["representationForm"]
-                                            )
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                                : _.isEmpty(
-                                                      formObj[
-                                                          "representationForm"
-                                                      ].values
-                                                  )
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                : _.isEmpty(
-                                                      formObj[
-                                                          "representationForm"
-                                                      ].values.documentBox
-                                                  )
-                                                ? formObj["representationForm"]
-                                                      .values.documentBox ==
-                                                  false
-                                                    ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                    : "govuk-checkboxes__conditional"
-                                                : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
-                                        }
-                                        id="conditional-documentBox"
-                                    >
-                                        <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>
+                                        filenamePrefix={props}
+                                    />
                                </div>
                            </fieldset>
                        </div>{" "}
                    </div>
-                    <div className="govuk-grid-row">
-                        <div className="govuk-button-group">
-                            <Link href="/representation">
-                                <a
-                                    onClick={() => {
-                                        setRepresentationSubmit(true);
-                                    }}
-                                    className="govuk-button"
-                                >
-                                    Continue
-                                </a>
-                            </Link>
-                            <a
+                </>
+            )}
+            {typeof formObj.representationForm.values.representationType !=
+                "undefined" && (
+                <div className="govuk-grid-row">
+                    <div className="govuk-button-group">
+                        <button
+                            type="submit"
+                            className="govuk-button"
+                            data-module="govuk-button"
+                        >
+                            {t("common:continue-button")}
+                        </button>
+                        {/* 
+                        <a
+                            onClick={() => {
+                                setRepresentationCapacity();
+                                props.updateField(
+                                    "representationForm",
+                                    "representationCapacity",
+                                    ""
+                                );
+                                props.updateField(
+                                    "representationForm",
+                                    "representationType",
+                                    ""
+                                );
+                            }}
+                            className="govuk-link"
+                        >
+                            {t("case:summary-back-button-label")}
+                        </a> */}
+                        {savingStatus ? (
+                            <span className=" progress-save-active">
+                                {router.locale == "cy"
+                                    ? "Nôl data"
+                                    : "Saving data"}
+                                <img
+                                    className="data-loading-icon"
+                                    src="/assets/images/loading.gif"
+                                    alt={
+                                        router.locale == "cy"
+                                            ? "Nôl data"
+                                            : "Saving data"
+                                    }
+                                />
+                            </span>
+                        ) : (
+                            <button
+                                className="govuk-button progress-save "
                                onClick={() => {
-                                    setRepresentationCapacity();
+                                    let valuesObj =
+                                        props.props.props.form[props.form]
+                                            .values || {};
+
+                                    console.log("valuesobj:", valuesObj);
+
+                                    delete valuesObj["_pinswg_appellant_value"];
+
+                                    console.log("on save:", valuesObj);
+                                    updateRepresentation(
+                                        valuesObj,
+                                        false,
+                                        true
+                                    );
                                }}
-                                className="govuk-link"
                            >
-                                Back
-                            </a>
-                        </div>
+                                {t("common:save-exit-button")}
+                            </button>
+                        )}
                    </div>
                </div>
-            </div>
-        </div>
+            )}
+        </>
    );
 };

-export default RepInterestedPartyPerson;
+//const mapStateToProps = (state, props) => {};
+
+const mapDispatchToProps = (dispatch) => ({
+    updateField: (form, field, newValue) =>
+        dispatch(change(form, field, newValue)),
+});
+
+export default connect(
+    null,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "representationForm",
+        enableReinitialize: true,
+        destroyOnUnmount: false,
+    })(RepInterestedPartyPerson)
+);
@@ -0,0 +1,591 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { useDropzone } from "react-dropzone";
+import { connect } from "react-redux";
+import { Field, change, formValueSelector, reduxForm } from "redux-form";
+import { useState } from "react";
+
+import {
+    FileUploadField,
+    RenderMultiline,
+    RenderPickList,
+} from "./representationElements";
+import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
+import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
+import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
+import S78_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_s78";
+
+let RepLPA = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        onSubmit,
+        handleSubmit,
+        formObj,
+        appellantApplicantRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        currentView,
+        procedureTypeValue,
+        onBehalfOfLPA,
+        setShowQuestionnaireSection,
+        showQuestionnaireSection,
+        questionnaireCount,
+        setQuestionnaireCount,
+        setRepFileName,
+        updateRepresentation,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const [savingStatus, setSavingStatus] = useState(false);
+
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+    const required = (value) => (value ? undefined : "Required");
+
+    const updateQuestionnaireCount = () => {
+        {
+            switch (currentView.caseReference.appealType) {
+                case 846040000:
+                case 846040001:
+                case 846040006:
+                case 846040025:
+                case 846040004:
+                case 846040018:
+                case 846040003:
+                case 846040009:
+                case 846040008:
+                    setQuestionnaireCount(7);
+                    break;
+
+                case 846040005:
+                case 846040006:
+                case 846040007:
+                    setQuestionnaireCount(9);
+
+                    break;
+                default:
+                    setQuestionnaireCount(7);
+
+                    break;
+            }
+        }
+    };
+    const whichQuestionnaire = () => {
+        {
+            switch (currentView.caseReference.appealType) {
+                case 846040000:
+                case 846040001:
+                case 846040006:
+                case 846040025:
+                case 846040004:
+                case 846040018:
+                case 846040003:
+                case 846040009:
+                case 846040008:
+                case 846040017:
+                    updateQuestionnaireCount();
+                    return (
+                        <S78_Questionnaire
+                            props={props}
+                            containerID={
+                                props.props.props.accountDetails.containerID
+                            }
+                            currentView={currentView}
+                            showQuestionnaireSection={showQuestionnaireSection}
+                            setShowQuestionnaireSection={
+                                setShowQuestionnaireSection
+                            }
+                            questionnaireCount={questionnaireCount}
+                        />
+                    );
+                    break;
+
+                case 846040005:
+                case 846040006:
+                case 846040007:
+                    updateQuestionnaireCount();
+                    return (
+                        <Enforcement_Questionnaire
+                            props={props}
+                            containerID={
+                                props.props.props.accountDetails.containerID
+                            }
+                            currentView={currentView}
+                            showQuestionnaireSection={showQuestionnaireSection}
+                            setShowQuestionnaireSection={
+                                setShowQuestionnaireSection
+                            }
+                            questionnaireCount={questionnaireCount}
+                        />
+                    );
+                    break;
+                default:
+                    return <></>;
+                    break;
+            }
+        }
+    };
+
+    const whichProgress = () => {
+        {
+            switch (currentView.caseReference.appealType) {
+                case 846040000:
+                case 846040001:
+                case 846040006:
+                case 846040025:
+                case 846040004:
+                case 846040018:
+                case 846040003:
+                case 846040009:
+                case 846040008:
+                case 846040017:
+                    return (
+                        <RepresentationProgress_s78
+                            props={props}
+                            containerID={
+                                props.props.props.accountDetails.containerID
+                            }
+                            currentView={currentView}
+                            showQuestionnaireSection={showQuestionnaireSection}
+                            setShowQuestionnaireSection={
+                                setShowQuestionnaireSection
+                            }
+                        />
+                    );
+                    break;
+
+                case 846040005:
+                case 846040006:
+                case 846040007:
+                    return (
+                        <RepresentationProgress_enforcement
+                            props={props}
+                            containerID={
+                                props.props.props.accountDetails.containerID
+                            }
+                            currentView={currentView}
+                            showQuestionnaireSection={showQuestionnaireSection}
+                            setShowQuestionnaireSection={
+                                setShowQuestionnaireSection
+                            }
+                        />
+                    );
+                    break;
+                default:
+                    return <></>;
+                    break;
+            }
+        }
+    };
+
+    let setCaseDetailsObj = router.query.hasOwnProperty("state")
+        ? router.query.state == "edit"
+            ? props.props.myRepresentations.myRepresentations
+            : props.props.searchResultsObj.searchDetailsObj
+        : props.props.searchResultsObj.searchDetailsObj;
+
+    var detailsObj = {};
+
+    detailsObj = jsonpath(
+        '$..[?(@.pinswg_name=="' +
+            currentView.caseReference.currentReference +
+            '")]',
+        setCaseDetailsObj
+    );
+
+    let setCaseResultssObj = router.query.hasOwnProperty("state")
+        ? router.query.state == "edit"
+            ? props.props.myRepresentations.myRepresentations
+            : props.props.searchResultsObj.searchResultsObj
+        : props.props.searchResultsObj.searchResultsObj;
+
+    detailsObj = detailsObj[0];
+
+    var resultsObj = {};
+
+    resultsObj = jsonpath(
+        '$..[?(@.pinswg_name=="' +
+            currentView.caseReference.currentReference +
+            '")]',
+        setCaseResultssObj
+    );
+    resultsObj = resultsObj[0];
+
+    props.formObj["representationForm"].hasOwnProperty("values") &&
+        props.formObj["representationForm"].values.hasOwnProperty(
+            "representationCapacity"
+        ) &&
+        props.formObj["representationForm"].values.hasOwnProperty(
+            "representationType"
+        ) &&
+        setRepFileName(props.formObj["representationForm"].values);
+
+    return (
+        <>
+            <div className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    {!_.has(
+                        formObj["representationForm"],
+                        ["values", "representationType"] ||
+                            typeof props.representationType != "undefined"
+                    ) ? (
+                        <>
+                            <label
+                                className="govuk-label govuk-body-m"
+                                htmlFor="representationType"
+                            >
+                                {t(
+                                    "myrepresentations:representation-from-an-lpa-heading"
+                                )}
+                            </label>
+                            <Field
+                                id="representationType"
+                                name="representationType"
+                                component={RenderPickList}
+                                datafieldname="representationType"
+                                optionsArr={appellantApplicantRepresentationArr}
+                            />
+                        </>
+                    ) : (
+                        <label className="govuk-label govuk-body-m">
+                            {t("myrepresentations:representation-type")}:{" "}
+                            {router.locale == "cy"
+                                ? formObj.representationForm.values
+                                      .representationType == "Questionnaire"
+                                    ? "Holiadur"
+                                    : formObj.representationForm.values
+                                          .representationType == "Statement"
+                                    ? "Datganiad"
+                                    : formObj.representationForm.values
+                                          .representationType ==
+                                      "Final comments"
+                                    ? "Sylwadau terfynol"
+                                    : formObj.representationForm.values
+                                          .representationType
+                                : formObj.representationForm.values
+                                      .representationType}
+                        </label>
+                    )}
+                </div>
+            </div>
+            <div className="govuk-grid-row">
+                <div className="govuk-form-group">
+                    {(_.has(formObj["representationForm"], [
+                        "values",
+                        "representationType",
+                    ]) ||
+                        typeof props.representationType != "undefined") &&
+                        (props.representationType != "Questionnaire" &&
+                        props.representationType != "Select..." ? (
+                            <>
+                                <p className="govuk-body">
+                                    {t("myrepresentations:enter-comment-label")}
+                                </p>
+                                <fieldset
+                                    className="govuk-fieldset"
+                                    aria-describedby="commentBox-hint"
+                                >
+                                    <div
+                                        id="commentBox-hint"
+                                        className="govuk-hint"
+                                    >
+                                        {t(
+                                            "myrepresentations:comments-set-out-label"
+                                        )}
+                                        :
+                                    </div>
+                                    <div className="govuk-form-group">
+                                        <Field
+                                            name="representationComments"
+                                            id="representationComments"
+                                            component={RenderMultiline}
+                                            type="text"
+                                            rows="5"
+                                            className="govuk-textarea govuk-input--width-30"
+                                            aria-describedby={
+                                                props.name + "-hint"
+                                            }
+                                        />
+                                    </div>
+                                </fieldset>
+                                <fieldset
+                                    className="govuk-fieldset govuk-!-margin-top-9"
+                                    aria-describedby="commentBox-hint"
+                                >
+                                    {" "}
+                                    <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                        <FileUploadField
+                                            name={"representationDocuments"}
+                                            id={"representationDocuments"}
+                                            label={t(
+                                                "myrepresentations:add-files-label"
+                                            )}
+                                            ticketnumber={
+                                                props.props.caseReference
+                                            }
+                                            hint={"sdsd"}
+                                            fileList={
+                                                props.props.props.form[
+                                                    "representationForm"
+                                                ].values.filesList || []
+                                            }
+                                            setFilesForRepresentation={[]}
+                                            containerID={
+                                                props.props.props.accountDetails
+                                                    .containerID
+                                            }
+                                            filenamePrefix={props}
+                                        />
+                                    </div>
+                                </fieldset>
+                            </>
+                        ) : (
+                            whichQuestionnaire()
+                        ))}
+                </div>{" "}
+            </div>
+            <div className="govuk-grid-row">
+                <div className="govuk-button-group">
+                    {(typeof props.representationType != "undefined" ||
+                        _.has(formObj, "values", "representationType")) &&
+                        props.representationType == "Questionnaire" && (
+                            <>
+                                {showQuestionnaireSection <
+                                    questionnaireCount && (
+                                    <button
+                                        type="submit"
+                                        className="govuk-button"
+                                        data-module="govuk-button"
+                                    >
+                                        {t("common:continue-button")}
+                                    </button>
+                                    // <a
+                                    //     href="#"
+                                    //     onClick={() => {
+                                    //         setShowQuestionnaireSection(
+                                    //             showQuestionnaireSection + 1
+                                    //         );
+                                    //     }}
+                                    //     className="govuk-button"
+                                    // >
+                                    //     Next section
+                                    // </a>
+                                )}
+                                {showQuestionnaireSection ==
+                                    questionnaireCount && (
+                                    <button
+                                        type="submit"
+                                        className="govuk-button"
+                                        data-module="govuk-button"
+                                    >
+                                        {t("common:continue-button")}
+                                    </button>
+                                )}
+                                {showQuestionnaireSection > 1 && (
+                                    <a
+                                        onClick={() => {
+                                            window.scrollTo({
+                                                top: 0,
+                                                behavior: "smooth",
+                                            });
+                                            setRepFileName(
+                                                props.formObj[
+                                                    "representationForm"
+                                                ].values
+                                            ),
+                                                setShowQuestionnaireSection(
+                                                    showQuestionnaireSection - 1
+                                                );
+                                        }}
+                                        className="govuk-link"
+                                    >
+                                        Back
+                                    </a>
+                                )}
+
+                                {savingStatus ? (
+                                    <span className=" progress-save-active">
+                                        {router.locale == "cy"
+                                            ? "Nôl data"
+                                            : "Saving data"}
+                                        <img
+                                            className="data-loading-icon"
+                                            src="/assets/images/loading.gif"
+                                            alt={
+                                                router.locale == "cy"
+                                                    ? "Nôl data"
+                                                    : "Saving data"
+                                            }
+                                        />
+                                    </span>
+                                ) : (
+                                    <button
+                                        className="govuk-button progress-save "
+                                        onClick={() => {
+                                            let valuesObj =
+                                                props.props.props.form[
+                                                    props.form
+                                                ].values || {};
+
+                                            console.log(
+                                                "valuesobj:",
+                                                valuesObj
+                                            );
+
+                                            delete valuesObj[
+                                                "_pinswg_appellant_value"
+                                            ];
+
+                                            console.log("on save:", valuesObj);
+                                            updateRepresentation(
+                                                valuesObj,
+                                                false,
+                                                true
+                                            );
+                                        }}
+                                    >
+                                        {t("common:save-exit-button")}
+                                    </button>
+                                )}
+                            </>
+                        )}{" "}
+                    {(typeof props.representationType != "undefined" ||
+                        _.has(formObj, "values", "representationType")) &&
+                        props.representationType != "Questionnaire" && (
+                            <>
+                                <button
+                                    type="submit"
+                                    className="govuk-button"
+                                    data-module="govuk-button"
+                                >
+                                    {t("common:continue-button")}
+                                </button>
+                                {/* {router.query.state != "edit" && (
+                                    <a
+                                        onClick={() => {
+                                            //setRepresentationCapacity();
+                                            props.updateField(
+                                                "representationForm",
+                                                "representationType",
+                                                ""
+                                            );
+                                        }}
+                                        className="govuk-link"
+                                    >
+                                        {t("common:back-link")}www
+                                    </a>
+                                )} */}
+                                {savingStatus ? (
+                                    <span className=" progress-save-active">
+                                        {router.locale == "cy"
+                                            ? "Nôl data"
+                                            : "Saving data"}
+                                        <img
+                                            className="data-loading-icon"
+                                            src="/assets/images/loading.gif"
+                                            alt={
+                                                router.locale == "cy"
+                                                    ? "Nôl data"
+                                                    : "Saving data"
+                                            }
+                                        />
+                                    </span>
+                                ) : (
+                                    <button
+                                        className="govuk-button progress-save "
+                                        onClick={() => {
+                                            let valuesObj =
+                                                props.props.form[props.form]
+                                                    .values || {};
+
+                                            console.log(
+                                                "valuesobj:",
+                                                valuesObj
+                                            );
+
+                                            delete valuesObj[
+                                                "_pinswg_appellant_value"
+                                            ];
+
+                                            console.log("on save:", valuesObj);
+                                            updateRepresentation(
+                                                valuesObj,
+                                                false,
+                                                true
+                                            );
+                                        }}
+                                    >
+                                        {t("common:save-exit-button")}
+                                    </button>
+                                )}
+                            </>
+                        )}
+                </div>
+            </div>
+        </>
+    );
+};
+
+const selector = formValueSelector("representationForm"); // <-- same as form name
+
+RepLPA = connect((state) => {
+    const representationType = selector(state, "representationType");
+    const procedureType = selector(state, "procedureType");
+
+    return {
+        procedureType,
+        representationType,
+    };
+})(RepLPA);
+
+const mapDispatchToProps = (dispatch) => ({
+    updateField: (form, field, newValue) =>
+        dispatch(change(form, field, newValue)),
+});
+
+const mapStateToProps = (state, props) => {
+    let initialValuesTemp = Object.assign(
+        state.currentView.caseReference.hasOwnProperty("repDetails")
+            ? state.currentView.caseReference.repDetails
+            : state.currentView.caseReference,
+        {
+            "representationCapacity": "lpa",
+            "onBehalfOfLPA":
+                props.props.props.accountDetails.accountDetails[
+                    "pinswg_contact_associatedlpa@OData.Community.Display.V1.FormattedValue"
+                ],
+            "firstname":
+                props.props.props.accountDetails.accountDetails.firstname,
+            "lastname":
+                props.props.props.accountDetails.accountDetails.lastname,
+        }
+    );
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        currentView: state.currentView,
+        myRepresentations: state.myRepresentations,
+        watchedCases: state.watchedCases,
+        initialValues: initialValuesTemp,
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "representationForm",
+        enableReinitialize: true,
+        destroyOnUnmount: false,
+    })(RepLPA)
+);
@@ -0,0 +1,88 @@
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { useDropzone } from "react-dropzone";
+import RepLPADetails from "./representationLPADetails";
+
+let RepLPACapacitySelection = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const {
+        formObj,
+        capacityOptionsArr,
+        currentType,
+        casesObj,
+        detailsObj,
+        validate,
+        handleSubmit,
+    } = props;
+    const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
+    const files = acceptedFiles.map((file) => (
+        <li key={file.path}>
+            {file.path} - {file.size} bytes
+        </li>
+    ));
+
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <>
+            <RepLPADetails
+                formObj={formObj}
+                currentType={currentType}
+                casesObj={casesObj}
+                detailsObj={detailsObj}
+                caseReference={props.props.caseReference}
+                searchResultsObj={props.props.searchResultsObj}
+                props={props.props}
+            />{" "}
+            <div id="rep-details" className="vo_hiddens">
+                <div className="govuk-grid-column-three-quarters">
+                    <div className="govuk-grid-row">
+                        {/* <h2 className="govuk-heading-m ">
+                            Your details - {props.firstValue}
+                        </h2> */}
+
+                        {/* <div className="">
+                            <label className="govuk-visually-hidden2">
+                                <Field
+                                    name="representationCapacity"
+                                    datafieldname="representationCapacity"
+                                    label={t("myrepresentations:capacity-select-what-capacity-label")}
+                                    options={["LPA"]}
+                                    id="representationCapacity"
+                                    //className="govuk-radios__input "
+                                    errorMsg={t(
+                                        "myrepresentations:select-an-option-label"
+                                    )}
+                                    component="input"
+                                    validate={[required]}
+                                    value="LPA"
+                                    checked={"true"}
+                                    type="radio"
+                                />
+                                LPA
+                            </label>
+                        </div> */}
+                    </div>
+                </div>
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-button-group">
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                            >
+                                {t("common:continue-button")}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default RepLPACapacitySelection;
@@ -0,0 +1,64 @@
+import { connect } from "react-redux";
+import { Field, formValueSelector, reduxForm } from "redux-form";
+import { RenderMultiline } from "./representationElements";
+
+let RepLPAQuestionnaire = (props) => {
+    return (
+        <>
+            <p className="govuk-body">
+                {t("myrepresentations:enter-comment-label")}
+            </p>
+            <fieldset
+                className="govuk-fieldset"
+                aria-describedby="commentBox-hint"
+            >
+                <div id="commentBox-hint" className="govuk-hint">
+                    {t("myrepresentations:comments-set-out-label")}:
+                </div>
+                <div className="govuk-form-group">
+                    <Field
+                        name="representationComments"
+                        id="representationComments"
+                        component={RenderMultiline}
+                        type="text"
+                        rows="5"
+                        className="govuk-textarea govuk-input--width-30"
+                        aria-describedby={props.name + "-hint"}
+                    />
+                </div>
+            </fieldset>
+        </>
+    );
+};
+
+const selector = formValueSelector("representationForm"); // <-- same as form name
+
+RepLPAQuestionnaire = connect((state) => {
+    const representationTypeValue = selector(state, "representationType");
+    const procedureTypeValue = selector(state, "procedureType");
+
+    return {
+        procedureTypeValue,
+        representationTypeValue,
+    };
+})(RepLPAQuestionnaire);
+
+const mapStateToProps = (state, props) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        currentView: state.currentView,
+        myRepresentations: state.myRepresentations,
+        initialValues: state.currentView.caseReference.repDetails,
+    };
+};
+
+export default connect(mapStateToProps)(
+    reduxForm({
+        form: "representationForm",
+        enableReinitialize: true,
+        destroyOnUnmount: false,
+    })(RepLPAQuestionnaire)
+);
@@ -0,0 +1,97 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+
+const RepLPADetails = (props) => {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { currentType, casesObj, caseReference } = props;
+
+    let setCaseDetailsObj = router.query.hasOwnProperty("state")
+        ? router.query.state == "edit"
+            ? props.props.myRepresentations.myRepresentations
+            : props.searchResultsObj.searchDetailsObj
+        : props.currentType == "watchedCases"
+        ? props.props.props.watchedCases.watchedCasesDetails
+        : props.props.searchResultsObj.searchDetailsObj;
+
+    var detailsObj = {};
+
+    detailsObj = jsonpath(
+        '$..[?(@.pinswg_name=="' + caseReference + '")]',
+        setCaseDetailsObj
+    );
+
+    detailsObj = detailsObj[0];
+
+    return (
+        <>
+            {" "}
+            <div className="govuk-grid-column-full">
+                <div id="rep-sumamry" className="govuk-grid-row">
+                    <dl className="govuk-summary-list govuk-!-margin-bottom-9">
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                {t("case:summary-applicant-label")}
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                {casesObj.appellantApplicant || ""}
+                                {detailsObj[
+                                    "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
+                                ] || "not entered"}
+                            </dd>
+                        </div>
+
+                        <div className="govuk-summary-list__row">
+                            <dt className="govuk-summary-list__key">
+                                {t("case:summary-site-address-label")}
+                            </dt>
+                            <dd className="govuk-summary-list__value">
+                                {_.has(detailsObj, "pinswg_siteaddressline1")
+                                    ? detailsObj.pinswg_siteaddressline1
+                                    : ""}
+                                {_.has(detailsObj, "pinswg_siteaddressline1") &&
+                                    detailsObj.pinswg_siteaddressline1 !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddressline2")
+                                    ? detailsObj.pinswg_siteaddressline2
+                                    : ""}
+                                {_.has(detailsObj, "pinswg_siteaddressline2") &&
+                                    detailsObj.pinswg_siteaddressline2 !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddresstown")
+                                    ? detailsObj.pinswg_siteaddresstown
+                                    : ""}
+                                {_.has(detailsObj, "pinswg_siteaddresstown") &&
+                                    detailsObj.pinswg_siteaddresstown !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddresscounty")
+                                    ? detailsObj.pinswg_siteaddresscounty
+                                    : ""}
+                                {_.has(
+                                    detailsObj,
+                                    "pinswg_siteaddresscounty"
+                                ) &&
+                                    detailsObj.pinswg_siteaddresscounty !=
+                                        null && <br />}
+                                {_.has(detailsObj, "pinswg_siteaddresspostcode")
+                                    ? detailsObj.pinswg_siteaddresspostcode
+                                    : ""}
+                            </dd>
+                        </div>
+                    </dl>
+                </div>
+                <div className="govuk-grid-row">
+                    <p className="govuk-body">
+                        {t("myrepresentations:lpa-capacity-para-one")}
+                    </p>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default RepLPADetails;
@@ -1,18 +1,12 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
-import {
-    RenderPickList,
-    RenderTextfield,
-    RenderRadioList,
-    RenderMultiline,
-} from "./representationElements";
+import { useRouter } from "next/router";
 import { useDropzone } from "react-dropzone";
+import { Field } from "redux-form";
 import {
-    setRepresentationCapacity,
-    setRepresentationSubmit,
-} from "../../../store/currentView/action";
+    FileUploadField,
+    RenderPickList,
+    RenderRichMultiline,
+} from "./representationElements";

 const RepLandOwner = (props) => {
    let { t } = useTranslation();
@@ -37,7 +31,7 @@ const RepLandOwner = (props) => {
            <div className="govuk-grid-column-full">
                <div className="govuk-grid-row">
                    <h2 className="govuk-heading-m ">
-                        Representation - landowner
+                        Representation for a Land owner
                    </h2>

                    <div className="govuk-form-group">
@@ -45,7 +39,10 @@ const RepLandOwner = (props) => {
                            className="govuk-label govuk-body-m"
                            htmlFor="representationType"
                        >
-                            What kind of representation are you making?
+                            {t(
+                                "myrepresentations:representation-from-an-agent-heading"
+                            )}
+                            ?
                        </label>
                        <Field
                            name="representationType"
@@ -55,173 +52,75 @@ const RepLandOwner = (props) => {
                        />
                    </div>
                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-form-group">
-                        <Field
-                            className="govuk-input govuk-!-width-three-quarters"
-                            id="representationDescription"
-                            name="representationDescription"
-                            value="email"
-                            data-aria-controls="representationDescription"
-                            type="text"
-                            component={RenderTextfield}
-                            label="Description of representation"
-                        />
-                    </div>
-                </div>
+
                <div className="govuk-grid-row">
                    <div className="govuk-form-group">
                        <p className="govuk-body">
-                            You can enter your comments in the space provided or
-                            attach a separate document.
+                            {t("myrepresentations:enter-comment-label")}
                        </p>
                        <fieldset
                            className="govuk-fieldset"
                            aria-describedby="commentBox-hint"
                        >
                            <div id="commentBox-hint" className="govuk-hint">
-                                My comments are set out in:*
+                                {t("myrepresentations:comments-set-out-label")}:
                            </div>
-                            <div
-                                className="govuk-checkboxes"
-                                data-module="govuk-checkboxes"
-                            >
-                                <div className="govuk-checkboxes__item">
-                                    <Field
-                                        className="govuk-checkboxes__input"
-                                        id="commentBox"
-                                        name="commentBox"
-                                        value="email"
-                                        data-aria-controls="commentBox"
-                                        type="checkbox"
-                                        component={RenderTextfield}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-checkboxes__label"
-                                        htmlFor="commentBox"
-                                    >
-                                        the box below{" "}
-                                    </label>
-                                </div>
-                                <div
-                                    className={
-                                        _.isEmpty(formObj["representationForm"])
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values
-                                              )
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden q11 "
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values.commentBox
-                                              )
-                                            ? formObj["representationForm"]
-                                                  .values.commentBox == false
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                : "govuk-checkboxes__conditional"
-                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden wwwaqqqq"
+                            <div className="govuk-form-group">
+                                <Field
+                                    name="representationComments"
+                                    id="representationComments"
+                                    component={RenderRichMultiline}
+                                    type="text"
+                                    rows="5"
+                                    className="govuk-textarea govuk-input--width-30"
+                                    aria-describedby={props.name + "-hint"}
+                                />
+                            </div>
+
+                            <div className="govuk-form-group govuk-!-margin-bottom-9">
+                                <FileUploadField
+                                    name={"representationDocuments"}
+                                    id={"representationDocuments"}
+                                    label={t(
+                                        "myrepresentations:add-files-label"
+                                    )}
+                                    ticketnumber={props.props.caseReference}
+                                    hint={"sdsd"}
+                                    fileList={[]}
+                                    setFilesForRepresentation={[]}
+                                    containerID={
+                                        props.props.props.accountDetails
+                                            .containerID
                                    }
-                                    id="conditional-commentBox"
-                                >
-                                    <div className="govuk-form-group">
-                                        <Field
-                                            name="representationComments"
-                                            id="representationComments"
-                                            component={RenderMultiline}
-                                            type="text"
-                                            rows="5"
-                                            className="govuk-textarea govuk-input--width-30"
-                                            aria-describedby={
-                                                props.name + "-hint"
-                                            }
-                                        />
-                                    </div>
-                                </div>
-                                <div className="govuk-checkboxes__item">
-                                    <Field
-                                        className="govuk-checkboxes__input"
-                                        id="documentBox"
-                                        name="documentBox"
-                                        value="email"
-                                        data-aria-controls="documentBox"
-                                        type="checkbox"
-                                        component={RenderTextfield}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-checkboxes__label"
-                                        htmlFor="documentBox"
-                                    >
-                                        separate documents
-                                    </label>
-                                </div>
-                                <div
-                                    className={
-                                        _.isEmpty(formObj["representationForm"])
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden rr"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values
-                                              )
-                                            ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                            : _.isEmpty(
-                                                  formObj["representationForm"]
-                                                      .values.documentBox
-                                              )
-                                            ? formObj["representationForm"]
-                                                  .values.documentBox == false
-                                                ? "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden www"
-                                                : "govuk-checkboxes__conditional"
-                                            : "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden"
-                                    }
-                                    id="conditional-documentBox"
-                                >
-                                    <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>
                        </fieldset>
-                    </div>
+                    </div>{" "}
                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-button-group">
-                        <Link href="/representation">
-                            <a
-                                onClick={() => {
-                                    setRepresentationSubmit(true);
-                                }}
+                {typeof formObj.representationForm.values.representationType !=
+                    "undefined" && (
+                    <div className="govuk-grid-row">
+                        <div className="govuk-button-group">
+                            <button
+                                type="submit"
                                className="govuk-button"
+                                data-module="govuk-button"
                            >
-                                Continue
-                            </a>
-                        </Link>
-                        <a
-                            onClick={() => {
-                                setRepresentationCapacity();
-                            }}
-                            className="govuk-link"
-                        >
-                            Back
-                        </a>
+                                {t("common:continue-button")}
+                            </button>
+                            {router.query.state != "edit" && (
+                                <a
+                                    onClick={() => {
+                                        setRepresentationCapacity();
+                                    }}
+                                    className="govuk-link"
+                                >
+                                    {t("common:back-link")}
+                                </a>
+                            )}
+                        </div>
                    </div>
-                </div>
+                )}
            </div>
        </div>
    );
@@ -0,0 +1,596 @@
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+
+const RepresentationProgress_enforcement = (props) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    const {
+        formObj,
+        appellantApplicantRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        currentView,
+        procedureTypeValue,
+        onBehalfOfLPA,
+        setShowQuestionnaireSection,
+        showQuestionnaireSection,
+    } = props;
+
+    return (
+        <nav role="navigation" aria-label="progress-list" className="at-nav">
+            <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">
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 1
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-one")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            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={() => {
+                                            setShowQuestionnaireSection(1);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-one"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-one"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 2
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-two")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            2
+                                            <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={() => {
+                                            setShowQuestionnaireSection(2);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-two"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-two"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 3
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-three")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            3
+                                            <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={() => {
+                                            setShowQuestionnaireSection(3);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-three"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-three"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 4
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-four")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            4
+                                            <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={() => {
+                                            setShowQuestionnaireSection(4);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-four"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-four"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 5
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-five")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            5
+                                            <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={() => {
+                                            setShowQuestionnaireSection(5);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-five"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-five"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 6
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-six")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            6
+                                            <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={() => {
+                                            setShowQuestionnaireSection(6);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-six"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-six"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>{" "}
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 7
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-seven")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            7
+                                            <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={() => {
+                                            setShowQuestionnaireSection(7);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-seven"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-seven"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 8
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:add-files-label")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            8
+                                            <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={() => {
+                                            setShowQuestionnaireSection(8);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:add-files-label"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:add-files-label"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 9
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:enf-section-heading-eight")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            9
+                                            <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={() => {
+                                            setShowQuestionnaireSection(9);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:enf-section-heading-eight"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:enf-section-heading-eight"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                </ol>
+            </div>
+        </nav>
+    );
+};
+
+export default RepresentationProgress_enforcement;
@@ -0,0 +1,473 @@
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+
+const RepresentationProgress_s78 = (props) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+
+    const {
+        formObj,
+        appellantApplicantRepresentationArr,
+        setRepresentationCapacity,
+        setRepresentationSubmit,
+        currentView,
+        procedureTypeValue,
+        onBehalfOfLPA,
+        setShowQuestionnaireSection,
+        showQuestionnaireSection,
+    } = props;
+
+    return (
+        <nav role="navigation" aria-label="progress-list" className="at-nav">
+            <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">
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 1
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:s78-section-heading-one")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            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={() => {
+                                            setShowQuestionnaireSection(1);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:s78-section-heading-one"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:s78-section-heading-one"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 2
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:s78-section-heading-two")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            2
+                                            <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={() => {
+                                            setShowQuestionnaireSection(2);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:s78-section-heading-two"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:s78-section-heading-two"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 3
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:s78-section-heading-three")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            3
+                                            <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={() => {
+                                            setShowQuestionnaireSection(3);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:s78-section-heading-three"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:s78-section-heading-three"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 4
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:s78-section-heading-four")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            4
+                                            <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={() => {
+                                            setShowQuestionnaireSection(4);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:s78-section-heading-four"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:s78-section-heading-four"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 5
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:s78-section-heading-five")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            5
+                                            <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={() => {
+                                            setShowQuestionnaireSection(5);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:s78-section-heading-five"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:s78-section-heading-three"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>{" "}
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 6
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:s78-section-heading-six")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            6
+                                            <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={() => {
+                                            setShowQuestionnaireSection(6);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:add-files-label"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:add-files-label"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                    <li
+                        className={
+                            "app-step-nav__step js-step app-step-nav__step--active" +
+                            (showQuestionnaireSection >= 7
+                                ? " sectionComplete"
+                                : " sectionIncomplete")
+                        }
+                        aria-current="step"
+                        data-show=""
+                        id={t("myrepresentations:s78-section-heading-seven")
+                            .replace(/\s+/g, "-")
+                            .toLowerCase()}
+                    >
+                        <div
+                            className="app-step-nav__header js-toggle-panel "
+                            data-position="1"
+                        >
+                            <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>{" "}
+                                            7
+                                            <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={() => {
+                                            setShowQuestionnaireSection(7);
+                                        }}
+                                        className="app-step-nav__button app-step-nav__button--title js-step-title-button"
+                                        aria-expanded="false"
+                                        aria-controls={
+                                            "step-panel-" +
+                                            t(
+                                                "myrepresentations:s78-section-heading-seven"
+                                            )
+                                                .replace(/\s+/g, "-")
+                                                .toLowerCase()
+                                        }
+                                    >
+                                        <span className="js-step-title-text govuk-!-font-size-16">
+                                            {t(
+                                                "myrepresentations:s78-section-heading-seven"
+                                            )}
+                                        </span>
+                                    </a>
+                                </span>
+                            </h3>
+                        </div>
+                    </li>
+                </ol>
+            </div>
+        </nav>
+    );
+};
+
+export default RepresentationProgress_s78;
@@ -1,15 +1,14 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useState, useEffect, useRef } from "react";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
-import LoadingOverlay from "react-loading-overlay";
+
 import { getRepresentations } from "../../actions";
 import { setRepresentations } from "../../store/searchOutput/action";
-import PaginationControl from "./pagination";
+import { formatDates } from "../utils";

 const RepresentationList = (props) => {
    const { incidentid, representationsObj, setRepresentations } = props;
@@ -17,7 +16,7 @@ const RepresentationList = (props) => {

    const router = useRouter();
    const { locale } = router;
-    // const [showSpinnerState, setShowSpinnerState] = useState(false);
+    //const [showSpinnerState, setShowSpinnerState] = useState(false);

    // let spinnerState = () => {
    //     showSpinnerState == true
@@ -28,8 +27,6 @@ const RepresentationList = (props) => {
    var representationsArr = representationsObj || [];

    const RepresentationsView = (representationsArr) => {
-        //console.log(documentDetailsArr);
-
        representationsArr = representationsArr.value;
        return (
            <>
@@ -60,11 +57,11 @@ const RepresentationList = (props) => {
                    </div>

                    {representationsArr.map((item, key) => {
-                        let detailsObj = jsonpath.query(
-                            item,
+                        let detailsObj = jsonpath(
                            "$..[?(@.pinswg_representationsid=='" +
                                incidentid +
-                                "')]"
+                                "')]",
+                            item
                        );
                        detailsObj = item;

@@ -90,13 +87,13 @@ const RepresentationList = (props) => {
                                    </span>

                                    {router.locale == "cy"
-                                        ? jsonpath.query(
-                                              transLookup,
+                                        ? jsonpath(
                                              '$..[?(@.value=="' +
                                                  detailsObj[
                                                      "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
                                                  ] +
-                                                  '")].value_cy'
+                                                  '")].value_cy',
+                                              transLookup
                                          )
                                        : detailsObj[
                                              "pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
@@ -129,12 +126,6 @@ const RepresentationList = (props) => {
                        );
                    })}
                </dl>
-                {/* <PaginationControl
-                    currentPage={currentPage}
-                    searchResultsObj={documentDetailsObj}
-                    // spinnerState={spinnerState}
-                    getDocumentResults={getDocumentResults}
-                /> */}
            </>
        );
    };
@@ -153,15 +144,6 @@ const RepresentationList = (props) => {
        const representationResultsObj = representationDetailsObj();
    }, [incidentid, setRepresentations]);

-    function formatDates(dateObj) {
-        var dateObj = new Date(dateObj);
-        var dd = String(dateObj.getDate()).padStart(2, "0");
-        var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
-        var yyyy = dateObj.getFullYear();
-
-        return dd + "/" + mm + "/" + yyyy;
-    }
-
    const pagesCount = Math.ceil(representationsObj["@odata.count"] / 10);

    let currentPage = 0;
@@ -224,11 +206,6 @@ const RepresentationList = (props) => {
                    </div>
                </div>
            </div>
-            {/* <LoadingOverlay
-                active={showSpinnerState}
-                spinner
-                text={t("common:spinner-searching")}
-            /> */}
        </>
    );
 };
@@ -1,20 +1,33 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useState, useEffect, useRef } from "react";
-import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
-import _ from "lodash";
+import { useEffect } from "react";
+import { connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
-import LoadingOverlay from "react-loading-overlay";

-import { getLinkedCases } from "../../actions";
+import {
+    createWatchedCases,
+    deleteWatchedCases,
+    getLinkedCases,
+    getPortalModuleDetailsProxy,
+    getWatchedCasesProxy,
+} from "../../actions";
 import {
    setCurrentLinkedCases,
    setCurrentReference,
+    setCurrentView,
 } from "../../store/currentView/action";

-import { getFormCollectionByID } from "../utils";
+import {
+    setWatchedCases,
+    setWatchedCasesDetails,
+} from "../../store/watchedCases/action";
+
+import { signIn, useSession } from "next-auth/react";
+import { destroyCookie, parseCookies, setCookie } from "nookies";
+import { getFormCollectionByID, getDetailsProxy } from "../utils";

 import Pinswg_advertsid from "./summaryTypes/pinswg_advertsid";
 import Pinswg_callinss77id from "./summaryTypes/pinswg_callinss77id";
@@ -41,7 +54,7 @@ import Pinswg_planningobligationappeals106id from "./summaryTypes/pinswg_plannin
 import Pinswg_rowid from "./summaryTypes/pinswg_rowid";
 import Pinswg_transportandworkactid from "./summaryTypes/pinswg_transportandworkactid";
 import Pinswg_wayleaveid from "./summaryTypes/pinswg_wayleaveid";
-
+import CaseNoticeBanner from "./caseNoticeBanner";
 const CaseSummary = (props) => {
    let { t } = useTranslation();

@@ -57,27 +70,112 @@ const CaseSummary = (props) => {
        awaitingSubmission,
        searchResultsObj,
        searchDetailsObj,
+        directSearchResultsObj,
        currentType,
        setCurrentLinkedCases,
        linkedCasesReference,
        setCurrentReference,
+        setWatchedCases,
+        setWatchedCasesDetails,
+        showMap,
+        currentView,
+        messagesObj,
    } = props;

-    const noRepresentationLink = ["/case", "/dnsdetails"];
+    const showLoginCheck =
+        currentType == "directResultsObj" ? "true" : currentView.showLogin;
+    const { data: session, status } = useSession();

-    let setCaseQueryObj = props[currentType];
-    let setCaseDetailsObj = props[currentType + "Details"];
+    const cookies = parseCookies();
+
+    const isLPA =
+        props.accountDetails.accountDetails[
+            "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
+        ] == "LPA"
+            ? true
+            : false;
+
+    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(loggedInUser).then((data) => {
+                    setWatchedCases(data),
+                        getDetailsProxy(data, "myWatchedCases").then((data) => {
+                            setWatchedCasesDetails(data);
+                        });
+                });
+            });
+    };
+
+    const isWatchedCase = (whichIncident) => {
+        let isWatched = jsonpath(
+            "$..value[?(@._pinswg_watchedcase_value=='" + whichIncident + "')]",
+            watchedCases
+        );
+
+        return isWatched;
+    };
+
+    const deleteItem = (caseID, topThreeType) => {
+        let cookies = parseCookies();
+        topThreeType == "watchedCases" &&
+            deleteWatchedCases(caseID)
+                .then((data) => data)
+                .then(() => {
+                    getWatchedCasesProxy(cookies.pinsUser).then((data) => {
+                        setWatchedCases(data),
+                            getDetailsProxy(data, "myWatchedCases").then(
+                                (data) => {
+                                    setWatchedCasesDetails(data);
+                                }
+                            );
+                    });
+                });
+    };
+
+    const noRepresentationLink = ["/dnsdetails", "/dns/[developmentName]"];
+
+    let setCaseQueryObj =
+        currentType == "directResultsObj"
+            ? props.searchResultsObj.searchResultsObj
+            : props[currentType];
+    let setCaseDetailsObj =
+        currentType == "directResultsObj"
+            ? props.searchResultsObj.searchDetailsObj
+            : props[currentType + "Details"];

    var casesObj = {};

    currentType == "searchResultsObj"
-        ? (casesObj = jsonpath.query(
-              searchResultsObj,
-              '$..[?(@.title=="' + caseReference + '")]'
+        ? (casesObj = jsonpath(
+              '$..[?(@.title=="' + caseReference + '")]',
+              searchResultsObj
          ))
-        : (casesObj = jsonpath.query(
-              setCaseQueryObj,
-              '$..[?(@.reference=="' + caseReference + '")]'
+        : currentType == "watchedCases"
+        ? (casesObj = jsonpath(
+              '$..[?(@.pinswg_title=="' + caseReference + '")]',
+              setCaseQueryObj
+          ))
+        : currentType == "myCases"
+        ? (casesObj = jsonpath(
+              '$..[?(@.pinswg_title=="' + caseReference + '")]',
+              setCaseQueryObj
+          ))
+        : currentType == "directResultsObj"
+        ? (casesObj = jsonpath(
+              '$..[?(@.ticketnumber=="' + caseReference + '")]',
+              setCaseQueryObj
+          ))
+        : (casesObj = jsonpath(
+              '$..[?(@.reference=="' + caseReference + '")]',
+              setCaseQueryObj
          ));

    casesObj = Object.assign({}, ...casesObj);
@@ -85,19 +183,33 @@ const CaseSummary = (props) => {
    var detailsObj = {};

    currentType == "searchResultsObj"
-        ? (detailsObj = jsonpath.query(
-              searchDetailsObj,
-              '$..[?(@.pinswg_name=="' + caseReference + '")]'
+        ? (detailsObj = jsonpath(
+              '$..[?(@.pinswg_name=="' + caseReference + '")]',
+              searchDetailsObj
          ))
-        : (detailsObj = jsonpath.query(
-              setCaseDetailsObj,
-              '$..[?(@.pinswg_name=="' + caseReference + '")]'
+        : currentType == "directResultsObj"
+        ? (detailsObj = setCaseDetailsObj[0].value[0])
+        : (detailsObj = jsonpath(
+              '$..[?(@.pinswg_name=="' + caseReference + '")]',
+              setCaseDetailsObj
          ));

-    detailsObj = detailsObj[0];
+    detailsObj = typeof detailsObj == "object" ? detailsObj : detailsObj[0];

    let showDetails = typeof detailsObj != "undefined" ? true : false;

+    var timestamp = showDetails
+        ? detailsObj.hasOwnProperty("pinswg_representation_period_end_date")
+            ? Date.parse(detailsObj.pinswg_representation_period_end_date)
+            : "n/a"
+        : "n/a";
+
+    if (isNaN(timestamp) == false) {
+        var d = new Date(timestamp);
+    }
+
+    let hasEndDate = typeof d != "undefined";
+
    let showDetailsBlock =
        showDetails == true ? (
            <div>
@@ -107,13 +219,26 @@ const CaseSummary = (props) => {
                            {t("case:summary-reference-label")}:{" "}
                            {currentType == "searchResultsObj"
                                ? detailsObj.pinswg_name
+                                : currentType == "directResultsObj"
+                                ? casesObj.title
+                                : currentType == "watchedCases"
+                                ? casesObj.pinswg_title
                                : casesObj.reference}
                        </h1>
-
+                        {props.messagesObj["@odata.count"] > 0 && (
+                            <CaseNoticeBanner messagesObj={props.messagesObj} />
+                        )}
                        <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[
@@ -121,7 +246,6 @@ const CaseSummary = (props) => {
                                    ] || "not entered"}
                                </dd>
                            </div>
-
                            {detailsObj.pinswg_agentcontactname != null &&
                                (_.has(
                                    detailsObj,
@@ -148,6 +272,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,37 +342,360 @@ 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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_casestage@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_casestage@OData.Community.Display.V1.FormattedValue"
+                                              ] ||
+                                              t(
+                                                  "case:summary-no-date-entered-label"
+                                              )}
+                                    </dd>
+                                </div>
+                            )}
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-last-modified-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {detailsObj.modifiedon > casesObj.modifiedon
+                                        ? formatDates(detailsObj.modifiedon)
+                                        : formatDates(casesObj.modifiedon)}
+                                </dd>
+                            </div>
                        </dl>
                    </div>
                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-grid-column-full">
-                        <div className="govuk-button-group">
-                            {noRepresentationLink.includes(router.pathname) ==
-                            true ? (
-                                ""
-                            ) : (
-                                <Link href="/myportal/representation">
-                                    <a className="govuk-button">
-                                        {t(
-                                            "case:summary-make-representation-label"
-                                        )}
-                                    </a>
-                                </Link>
-                            )}

-                            {/* <a
-                                onClick={() => {
-                                    //spinnerState();
-                                    router.back();
-                                }}
-                                className="govuk-button govuk-button--secondary"
-                            >
-                                {t("case:summary-back-button-label")}
-                            </a> */}
+                {showLoginCheck == "true" && (
+                    <>
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-full">
+                                <div className="govuk-button-group">
+                                    {(_.has(detailsObj, "pinswg_startdate") ||
+                                        _.has(
+                                            detailsObj,
+                                            "pinswg_applicationacceptedasvalid"
+                                        )) &&
+                                        showReps(
+                                            detailsObj.pinswg_startdate ||
+                                                detailsObj.pinswg_applicationacceptedasvalid,
+                                            detailsObj.pinswg_finalcommentsduedate ||
+                                                detailsObj.pinswg_endofrepresentationperiod
+                                        ) && (
+                                            <>
+                                                {showRepButton(
+                                                    props.currentView
+                                                        .caseReference
+                                                        .appealType
+                                                ) ? (
+                                                    <>
+                                                        <Link
+                                                            href={{
+                                                                pathname:
+                                                                    "/myportal/representation",
+                                                                query: {
+                                                                    case:
+                                                                        currentType ==
+                                                                        "searchResultsObj"
+                                                                            ? detailsObj.pinswg_name
+                                                                            : currentType ==
+                                                                              "watchedCases"
+                                                                            ? casesObj.pinswg_title
+                                                                            : currentType ==
+                                                                              "directResultsObj"
+                                                                            ? detailsObj.pinswg_name
+                                                                            : casesObj.reference,
+                                                                },
+                                                            }}
+                                                            className="govuk-button"
+                                                        >
+                                                            {t(
+                                                                "case:summary-make-representation-label"
+                                                            )}
+                                                        </Link>
+
+                                                        <a
+                                                            onClick={() => {
+                                                                //spinnerState();
+                                                                router.back();
+                                                            }}
+                                                            className="govuk-button govuk-button--secondary"
+                                                        >
+                                                            {t(
+                                                                "case:summary-back-button-label"
+                                                            )}
+                                                        </a>
+                                                    </>
+                                                ) : !isLPA &&
+                                                  props.currentView
+                                                      .caseReference
+                                                      .appealType ==
+                                                      846040004 ? (
+                                                    ""
+                                                ) : (
+                                                    <>
+                                                        <div className="govuk-grid-column-full govuk-!-padding-left-0">
+                                                            <div className="govuk-button-group">
+                                                                <p className="govuk-body">
+                                                                    {t(
+                                                                        "case:representation-date-passed-label",
+                                                                        {
+                                                                            startDate:
+                                                                                formatDates(
+                                                                                    detailsObj.pinswg_startdate
+                                                                                ),
+                                                                            endDate:
+                                                                                props
+                                                                                    .currentView
+                                                                                    .caseReference
+                                                                                    .appealType ==
+                                                                                846040019
+                                                                                    ? formatDates(
+                                                                                          detailsObj.pinswg_statementduedate
+                                                                                      )
+                                                                                    : formatDates(
+                                                                                          detailsObj.pinswg_finalcommentsduedate
+                                                                                      ),
+                                                                        }
+                                                                    )}
+                                                                    <br />{" "}
+                                                                    {t(
+                                                                        "case:representation-date-passed-additional-label"
+                                                                    )}{" "}
+                                                                    <Link
+                                                                        href={
+                                                                            "mailto:" +
+                                                                            t(
+                                                                                "home:login-contact-email"
+                                                                            )
+                                                                        }
+                                                                    >
+                                                                        {t(
+                                                                            "home:login-contact-email"
+                                                                        )}
+                                                                    </Link>
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    </>
+                                                )}
+                                            </>
+                                        )}
+                                    <div className="govuk-body">
+                                        {session &&
+                                            (isWatchedCase(
+                                                props.currentView.caseReference
+                                                    .incidentid
+                                            ).length >
+                                                0 ==
+                                            true ? (
+                                                <button
+                                                    className="govuk-link watchCase"
+                                                    onClick={() => {
+                                                        confirm(
+                                                            t(
+                                                                "case:you-have-stopped-watching-label"
+                                                            ) +
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .currentReference +
+                                                                "?"
+                                                        ) &&
+                                                            deleteItem(
+                                                                isWatchedCase(
+                                                                    props
+                                                                        .currentView
+                                                                        .caseReference
+                                                                        .incidentid
+                                                                )[0]
+                                                                    .pinswg_watchlistid,
+
+                                                                "watchedCases"
+                                                            ),
+                                                            setCurrentView({
+                                                                "viewName":
+                                                                    "Watched Cases",
+                                                                "viewKey":
+                                                                    "watchedCases",
+                                                            });
+                                                        setCurrentReference({
+                                                            "ticketnumber":
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .currentReference,
+                                                            "currentReference":
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .currentReference,
+                                                            "currentType":
+                                                                "searchResultsObj",
+                                                            "incidentid":
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .incidentid,
+                                                            "appealType":
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .appealType,
+                                                            "showMap": showMap,
+                                                        });
+                                                    }}
+                                                    title={t(
+                                                        "case:stop-watching-case-link"
+                                                    )}
+                                                >
+                                                    {t(
+                                                        "case:stop-watching-case-link"
+                                                    )}{" "}
+                                                </button>
+                                            ) : (
+                                                <button
+                                                    className="govuk-link watchCase"
+                                                    onClick={() => {
+                                                        confirm(
+                                                            t(
+                                                                "case:you-are-watching-label"
+                                                            ) +
+                                                                " " +
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .currentReference +
+                                                                "?"
+                                                        ) &&
+                                                            selectWatchedCase(
+                                                                props
+                                                                    .accountDetails
+                                                                    .loggedinUserId,
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .incidentid,
+                                                                props
+                                                                    .currentView
+                                                                    .caseReference
+                                                                    .appealType
+                                                            );
+                                                    }}
+                                                >
+                                                    {t(
+                                                        "case:watch-this-case-link"
+                                                    )}
+                                                </button>
+                                            ))}
+
+                                        {!session && (
+                                            <button
+                                                className="govuk-link watchCase"
+                                                onClick={() => {
+                                                    confirm(
+                                                        "Trying to watch case " +
+                                                            props.currentView
+                                                                .caseReference
+                                                                .currentReference +
+                                                            "\n\nYou will now be prompted to sign in"
+                                                    ) &&
+                                                        // signIn("email", {
+                                                        //     callbackUrl:
+                                                        //         "/myportal/case/" +
+                                                        //         props
+                                                        //             .currentView
+                                                        //             .caseReference
+                                                        //             .ticketnumber,
+                                                        // });
+
+                                                        setCookie(
+                                                            null,
+                                                            "pedwWatchCase",
+                                                            currentType ==
+                                                                "searchResultsObj"
+                                                                ? detailsObj.pinswg_name
+                                                                : currentType ==
+                                                                  "directResultsObj"
+                                                                ? casesObj.title
+                                                                : casesObj.reference,
+                                                            {
+                                                                path: "/",
+                                                                expires:
+                                                                    expDate,
+                                                            }
+                                                        ),
+                                                        signIn();
+                                                }}
+                                                title={t(
+                                                    "case:watch-this-case-link"
+                                                )}
+                                            >
+                                                {t("case:watch-this-case-link")}
+                                            </button>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
                        </div>
-                    </div>
-                </div>
+                        <div className="govuk-grid-row">
+                            <div className="govuk-grid-column-full">
+                                {_.has(detailsObj, "pinswg_startdate") &&
+                                    (detailsObj.pinswg_startdate != null ||
+                                        detailsObj.pinswg_finalcommentsduedate !=
+                                            null) &&
+                                    showRepsEnded(
+                                        detailsObj.pinswg_startdate,
+                                        detailsObj.pinswg_finalcommentsduedate
+                                    ) && (
+                                        <div className="govuk-body">
+                                            {t(
+                                                "case:representation-period-ended-on-label"
+                                            )}
+                                            {props.currentView.caseReference
+                                                .appealType == 846040019
+                                                ? formatDates(
+                                                      detailsObj.pinswg_statementduedate
+                                                  )
+                                                : formatDates(
+                                                      detailsObj.pinswg_finalcommentsduedate
+                                                  )}
+                                        </div>
+                                    )}
+                            </div>
+                        </div>
+                    </>
+                )}

                {showSummary(casesObj, detailsObj)}
            </div>
@@ -244,34 +708,38 @@ const CaseSummary = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="govuk-grid-row">
-                    <div className="govuk-grid-column-full">
-                        <div className="govuk-button-group">
-                            {noRepresentationLink.includes(router.pathname) ==
-                            true ? (
-                                ""
-                            ) : (
-                                <Link href="/representation">
-                                    <a className="govuk-button">
+                {showLoginCheck == "true" && (
+                    <div className="govuk-grid-row">
+                        <div className="govuk-grid-column-full">
+                            <div className="govuk-button-group">
+                                {noRepresentationLink.includes(
+                                    router.pathname
+                                ) == true ? (
+                                    ""
+                                ) : (
+                                    <Link
+                                        href="/representation"
+                                        className="govuk-button"
+                                    >
                                        {t(
                                            "case:summary-make-representation-label"
                                        )}
-                                    </a>
-                                </Link>
-                            )}
+                                    </Link>
+                                )}

-                            <a
-                                onClick={() => {
-                                    // spinnerState();
-                                    router.back();
-                                }}
-                                className="govuk-button govuk-button--secondary"
-                            >
-                                {t("case:summary-back-button-label")}
-                            </a>
+                                <a
+                                    onClick={() => {
+                                        // spinnerState();
+                                        router.back();
+                                    }}
+                                    className="govuk-button govuk-button--secondary"
+                                >
+                                    {t("case:summary-back-button-label")}
+                                </a>
+                            </div>
                        </div>
                    </div>
-                </div>
+                )}
            </>
        );

@@ -344,6 +812,7 @@ const CaseSummary = (props) => {
                        formatDates={formatDates}
                        linkedCasesList={linkedCasesList}
                        currentView={props.currentView}
+                        showMap={showMap}
                    />
                );
                break;
@@ -380,7 +849,7 @@ const CaseSummary = (props) => {
                    />
                );
                break;
-            case "pinswg_environmentalpermittingid":
+            case "pinswg_enforcementpermittingid":
                return (
                    <Pinswg_environmentalpermittingid
                        casesObj={casesObj}
@@ -575,21 +1044,27 @@ const CaseSummary = (props) => {
        const linkedCases = linkCaseObj();
    }, [incidentid, setCurrentLinkedCases]);

-    // const [showSpinnerState, setShowSpinnerState] = useState(false);
+    let now = new Date();
+    let expDate = new Date(now);

-    // let spinnerState = () => {
-    //     showSpinnerState == true
-    //         ? setShowSpinnerState(false)
-    //         : setShowSpinnerState(true);
-    // };
+    expDate.setDate(now.getDate() + 365);

-    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) {
@@ -613,28 +1088,96 @@ const CaseSummary = (props) => {
                                              item.title +
                                              "&lk=1"
                                    }
+                                    className=""
                                >
-                                    <a className="">{item.title}</a>
+                                    {item.title}
                                </Link>
                            </li>
                        );
-                        // console.log(item.incidentid, item.title);
+                        //console.log(item.incidentid, item.title);
                    })}
                </ul>
            </>
        );
    }

-    return (
-        <>
-            {showDetailsBlock}
-            {/* <LoadingOverlay
-                active={showSpinnerState}
-                spinner
-                text={t("common:spinner-searching")}
-            /> */}
-        </>
-    );
+    function showReps(startDate, endDate) {
+        let date = new Date();
+        date = new Date(date.toDateString());
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+
+        return date >= start && date <= end ? true : false;
+    }
+
+    function showRepButton(appealType) {
+        switch (appealType) {
+            case 846040012:
+            case 846040013:
+            case 846040014:
+            //for ROW case 846040015:
+            case 846040020:
+            case 846040021:
+            case 846040023:
+            case 846040024:
+                return false;
+            case 846040004:
+                return isLPA ? true : false;
+
+            case 846040015:
+                return props.searchResultsObj.searchDetailsObj[0].value[0]
+                    .pinswg_specialistcaseprocess == 846040001
+                    ? showReps(
+                          props.searchResultsObj.searchDetailsObj[0].value[0]
+                              .pinswg_startdate,
+                          props.searchResultsObj.searchDetailsObj[0].value[0]
+                              .pinswg_finalcommentsduedate
+                      )
+                    : true;
+
+            case 846040018:
+                let shouldShow =
+                    props.searchResultsObj.searchDetailsObj[0].value[0]
+                        .pinswg_speacialistcaseprocess == 846040000 && isLPA
+                        ? true
+                        : props.searchResultsObj.searchDetailsObj[0].value[0]
+                              .pinswg_speacialistcaseprocess == 846040001
+                        ? true
+                        : false;
+
+                return shouldShow;
+
+            case 846040019:
+                return showReps(
+                    props.searchResultsObj.searchDetailsObj[0].value[0]
+                        .pinswg_startdate,
+                    props.searchResultsObj.searchDetailsObj[0].value[0]
+                        .pinswg_statementduedate
+                );
+
+            default:
+                return true;
+        }
+    }
+
+    function showRepsEnded(startDate, endDate) {
+        let date = new Date();
+        date = new Date(date.toDateString());
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        return date > start && date > end ? true : false;
+    }
+
+    if (status == "authenticated" && cookies.pedwWatchCase != null) {
+        selectWatchedCase(
+            props.accountDetails.accountDetails.contactid,
+            incidentid,
+            appealTypeID
+        );
+        destroyCookie({}, "pedwWatchCase", { path: "/" });
+    }
+
+    return <>{showDetailsBlock}</>;
 };

 const mapStateToProps = (state) => {
@@ -651,6 +1194,15 @@ const mapDispatchToProps = (dispatch) => {
        setCurrentReference: (currentReference) => {
            dispatch(setCurrentReference(currentReference));
        },
+        setWatchedCases: (watchedCases) => {
+            dispatch(setWatchedCases(watchedCases));
+        },
+        setWatchedCasesDetails: (watchedCasesDetails) => {
+            dispatch(setWatchedCasesDetails(watchedCasesDetails));
+        },
+        setCurrentView: (currentView) => {
+            dispatch(setCurrentView(currentView));
+        },
    };
 };

@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_advertsid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_advertsid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_advertsid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -43,19 +43,40 @@ const Pinswg_advertsid = (props) => {
                                              )}
                                    </dd>
                                </div>
+
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        Specialist Case Process
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_speacialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_speacialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
+
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:summary-lpa-label")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +104,51 @@ const Pinswg_advertsid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -118,25 +158,26 @@ const Pinswg_advertsid = (props) => {
                                              )}
                                    </dd>
                                </div>
+
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:summary-decision-label")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +235,7 @@ const Pinswg_advertsid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -324,6 +365,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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_callinss77id = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_callinss77id = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_callinss77id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_callinss77id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_callinss77id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_callinss77id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_callinss77id = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_commonlandid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_commonlandid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_commonlandid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_commonlandid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_commonlandid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_commonlandid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -198,13 +217,18 @@ const Pinswg_commonlandid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
+                                            ? jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value',
+                                                  transLookup
+                                              ) ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
@@ -214,7 +238,7 @@ const Pinswg_commonlandid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -290,13 +314,13 @@ const Pinswg_commonlandid = (props) => {
                                    <dd className="govuk-summary-list__value">
                                        {_.has(
                                            detailsObj,
-                                            "pinswg_statementduedate"
+                                            "pinswg_statementsduedate"
                                        )
                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
+                                                  detailsObj.pinswg_statementsduedate
                                              )
                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
+                                                      detailsObj.pinswg_statementsduedate
                                                  )
                                                : 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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_communityinfrastructurelevyid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_compulsorypurchaseordersid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -65,32 +65,51 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -106,19 +125,19 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -180,13 +199,18 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
+                                            ? jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value',
+                                                  transLookup
+                                              ) ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
@@ -196,7 +220,7 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_electricityactid = (props) => {
@@ -51,7 +51,7 @@ const Pinswg_electricityactid = (props) => {
            )}
            <div className="govuk-grid-row">
                <div className="flex-container grid-row govuk-body case">
-                    <div className="card" id="casescomment-card">
+                    <div className="card" id="case-details-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -65,13 +65,13 @@ const Pinswg_electricityactid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          casesObj[
                                                              "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : casesObj[
                                                      "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -87,13 +87,13 @@ const Pinswg_electricityactid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          casesObj[
                                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : casesObj[
                                                      "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -123,32 +123,53 @@ const Pinswg_electricityactid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          detailsObj[
                                                              "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : detailsObj[
                                                      "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                  ] || ""}
                                        </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(
+                                                      '$..[?(@.value=="' +
+                                                          detailsObj[
+                                                              "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                          ] +
+                                                          '")].value_cy',
+                                                      transLookup
+                                                  )
+                                                : 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")}
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          casesObj[
                                                              "statuscode@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : casesObj[
                                                      "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -164,13 +185,13 @@ const Pinswg_electricityactid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          detailsObj[
                                                              "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : detailsObj[
                                                      "pinswg_decision@OData.Community.Display.V1.FormattedValue"
@@ -238,11 +259,11 @@ const Pinswg_electricityactid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          detailsObj.pinswg_recommendation +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : detailsObj.pinswg_recommendation ||
                                                  t(
@@ -259,11 +280,11 @@ const Pinswg_electricityactid = (props) => {
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
-                                                    ? jsonpath.query(
-                                                          transLookup,
+                                                    ? jsonpath(
                                                          '$..[?(@.value=="' +
                                                              detailsObj.pinswg_webaddress +
-                                                              '")].value_cy'
+                                                              '")].value_cy',
+                                                          transLookup
                                                      )
                                                    : detailsObj.pinswg_webaddress ||
                                                      t(
@@ -276,7 +297,7 @@ const Pinswg_electricityactid = (props) => {
                            </div>
                        </div>
                    </div>
-                    <div className="card" id="casescomment-card">
+                    <div className="card" id="key-dates-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_enforcementlistedbuildingconseid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_enforcementnoticeappeals174id = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_environmentalpermittingid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_environmentalpermittingid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_environmentalpermittingid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_environmentalpermittingid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_environmentalpermittingid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_environmentalpermittingid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -198,13 +217,18 @@ const Pinswg_environmentalpermittingid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
+                                            ? jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value',
+                                                  transLookup
+                                              ) ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
@@ -214,7 +238,7 @@ const Pinswg_environmentalpermittingid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_harbourrevisionorderid = (props) => {
@@ -51,7 +51,7 @@ const Pinswg_harbourrevisionorderid = (props) => {
            )}
            <div className="govuk-grid-row">
                <div className="flex-container grid-row govuk-body case">
-                    <div className="card" id="casescomment-card">
+                    <div className="card" id="case-details-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -65,13 +65,13 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          casesObj[
                                                              "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : casesObj[
                                                      "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -87,13 +87,13 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          casesObj[
                                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : casesObj[
                                                      "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -123,13 +123,13 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          detailsObj[
                                                              "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : detailsObj[
                                                      "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
@@ -142,13 +142,13 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          casesObj[
                                                              "statuscode@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : casesObj[
                                                      "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -164,19 +164,19 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          detailsObj[
                                                              "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : detailsObj[
                                                      "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                  ] ||
                                                  t(
-                                                      "case:summary-no-date-entered-label"
+                                                      "case:summary-no-information-to-date-label"
                                                  )}

                                            <br />
@@ -238,11 +238,11 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          detailsObj.pinswg_recommendation +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : detailsObj.pinswg_recommendation ||
                                                  t(
@@ -259,11 +259,11 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
-                                                    ? jsonpath.query(
-                                                          transLookup,
+                                                    ? jsonpath(
                                                          '$..[?(@.value=="' +
                                                              detailsObj.pinswg_webaddress +
-                                                              '")].value_cy'
+                                                              '")].value_cy',
+                                                          transLookup
                                                      )
                                                    : detailsObj.pinswg_webaddress ||
                                                      t(
@@ -276,7 +276,7 @@ const Pinswg_harbourrevisionorderid = (props) => {
                            </div>
                        </div>
                    </div>
-                    <div className="card" id="casescomment-card">
+                    <div className="card" id="key-dates-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -43,19 +43,40 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                              )}
                                    </dd>
                                </div>
+
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        Specialist Case Process
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
+
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:summary-lpa-label")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +104,51 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +164,19 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -198,13 +238,18 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
+                                            ? jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value',
+                                                  transLookup
+                                              ) ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
@@ -214,7 +259,7 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -420,6 +465,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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_householderappealhasid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_householderappealhasid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_householderappealhasid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_householderappealhasid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,13 +83,13 @@ const Pinswg_householderappealhasid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
@@ -102,13 +102,13 @@ const Pinswg_householderappealhasid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +124,19 @@ const Pinswg_householderappealhasid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +194,7 @@ const Pinswg_householderappealhasid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -296,26 +296,26 @@ const Pinswg_householderappealhasid = (props) => {
                                    <dd className="govuk-summary-list__value">
                                        {_.has(
                                            detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstmt"
                                        )
                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
+                                                  detailsObj.pinswg_otherpartiesstmt
                                              )
                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
+                                                      detailsObj.pinswg_otherpartiesstmt
                                                  )
                                                : t(
                                                      "case:summary-no-date-entered-label"
                                                  )
                                            : _.has(
                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
+                                                  "pinswg_otherpartiesstmt"
                                              )
                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
+                                                  detailsObj.pinswg_otherpartiesstmt
                                              )
                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
+                                                      detailsObj.pinswg_otherpartiesstmt
                                                  )
                                                : t(
                                                      "case:summary-no-date-entered-label"
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_ldpid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_ldpid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_ldpid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_ldpid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_ldpid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_ldpid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_ldpid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_listedbuildingandconservationrid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_maintenanceoflands217id = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_maintenanceoflands217id = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_maintenanceoflands217id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_maintenanceoflands217id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_maintenanceoflands217id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_maintenanceoflands217id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_maintenanceoflands217id = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_miscellaneouscasewordid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_miscellaneouscasewordid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -198,13 +217,18 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
+                                            ? jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value',
+                                                  transLookup
+                                              ) ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
@@ -214,7 +238,7 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_nonvalidationid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_nonvalidationid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_nonvalidationid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_nonvalidationid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -77,38 +77,38 @@ 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>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +124,19 @@ const Pinswg_nonvalidationid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                          "pinswg_decisionissued@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
-                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                  "pinswg_decisionissued@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -152,7 +152,7 @@ const Pinswg_nonvalidationid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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"
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_planningappeals78id = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_planningappeals78id = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_planningappeals78id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_planningappeals78id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,54 @@ const Pinswg_planningappeals78id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                              ] ||
+                                              t(
+                                                  "case:summary-no-information-to-date-label"
+                                              )}
+                                    </dd>
+                                </div>
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:summary-status-label")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +146,19 @@ const Pinswg_planningappeals78id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                          "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
-                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                                  "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -148,6 +170,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">
@@ -194,7 +239,7 @@ const Pinswg_planningappeals78id = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -264,7 +309,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 +332,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 +369,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 +421,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 +443,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 +468,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>
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_planningconditionss73s79id = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_planningconditionss73s79id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_planningconditionss73s79id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_planningconditionss73s79id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_planningconditionss73s79id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_planningobligationappeals106id = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_planningobligationappeals106id = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_planningobligationappeals106id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_planningobligationappeals106id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_planningobligationappeals106id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_planningobligationappeals106id = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -194,7 +213,7 @@ const Pinswg_planningobligationappeals106id = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_rowid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_rowid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_rowid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -43,19 +43,40 @@ const Pinswg_rowid = (props) => {
                                              )}
                                    </dd>
                                </div>
+
+                                <div className="govuk-summary-list__row">
+                                    <dt className="govuk-summary-list__key">
+                                        Specialist Case Process
+                                    </dt>
+                                    <dd className="govuk-summary-list__value">
+                                        {router.locale == "cy"
+                                            ? jsonpath(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : detailsObj[
+                                                  "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                              ] || ""}
+                                    </dd>
+                                </div>
+
                                <div className="govuk-summary-list__row">
                                    <dt className="govuk-summary-list__key">
                                        {t("case:summary-lpa-label")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +104,51 @@ const Pinswg_rowid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +164,19 @@ const Pinswg_rowid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -198,13 +238,18 @@ const Pinswg_rowid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
+                                            ? jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value',
+                                                  transLookup
+                                              ) ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
@@ -214,7 +259,7 @@ const Pinswg_rowid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -420,6 +465,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")}
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_transportandworkactid = (props) => {
@@ -51,7 +51,7 @@ const Pinswg_transportandworkactid = (props) => {
            )}
            <div className="govuk-grid-row">
                <div className="flex-container grid-row govuk-body case">
-                    <div className="card" id="casescomment-card">
+                    <div className="card" id="case-details-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -65,13 +65,13 @@ const Pinswg_transportandworkactid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          casesObj[
                                                              "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                          ] +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : casesObj[
                                                      "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -90,11 +90,11 @@ const Pinswg_transportandworkactid = (props) => {
                                        </dt>
                                        <dd className="govuk-summary-list__value">
                                            {router.locale == "cy"
-                                                ? jsonpath.query(
-                                                      transLookup,
+                                                ? jsonpath(
                                                      '$..[?(@.value=="' +
                                                          detailsObj.pinswg_recommendation +
-                                                          '")].value_cy'
+                                                          '")].value_cy',
+                                                      transLookup
                                                  )
                                                : detailsObj.pinswg_recommendation ||
                                                  t(
@@ -111,11 +111,11 @@ const Pinswg_transportandworkactid = (props) => {
                                            </dt>
                                            <dd className="govuk-summary-list__value">
                                                {router.locale == "cy"
-                                                    ? jsonpath.query(
-                                                          transLookup,
+                                                    ? jsonpath(
                                                          '$..[?(@.value=="' +
                                                              detailsObj.pinswg_webaddress +
-                                                              '")].value_cy'
+                                                              '")].value_cy',
+                                                          transLookup
                                                      )
                                                    : detailsObj.pinswg_webaddress ||
                                                      t(
@@ -128,7 +128,7 @@ const Pinswg_transportandworkactid = (props) => {
                            </div>
                        </div>
                    </div>
-                    <div className="card" id="casescomment-card">
+                    <div className="card" id="key-dates-card">
                        <div className="card-body">
                            <div className="govuk-grid-column-full">
                                <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -1,7 +1,7 @@
-import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import jsonpath from "jsonpath";
+import { JSONPath as jsonpath } from "jsonpath-plus";
 import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";

 const Pinswg_wayleaveid = (props) => {
@@ -13,7 +13,7 @@ const Pinswg_wayleaveid = (props) => {
    return (
        <div className="govuk-grid-row">
            <div className="flex-container grid-row govuk-body case">
-                <div className="card" id="casescomment-card">
+                <div className="card" id="case-details-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h2 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -27,13 +27,13 @@ const Pinswg_wayleaveid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
@@ -49,13 +49,13 @@ const Pinswg_wayleaveid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,32 +83,51 @@ const Pinswg_wayleaveid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
                                              ] || ""}
                                    </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(
+                                                  '$..[?(@.value=="' +
+                                                      detailsObj[
+                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                      ] +
+                                                      '")].value_cy',
+                                                  transLookup
+                                              )
+                                            : 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")}
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      casesObj[
                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : casesObj[
                                                  "statuscode@OData.Community.Display.V1.FormattedValue"
@@ -124,19 +143,19 @@ const Pinswg_wayleaveid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
+                                            ? jsonpath(
                                                  '$..[?(@.value=="' +
                                                      detailsObj[
                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                                      ] +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
                                            : detailsObj[
                                                  "pinswg_decision@OData.Community.Display.V1.FormattedValue"
                                              ] ||
                                              t(
-                                                  "case:summary-no-date-entered-label"
+                                                  "case:summary-no-information-to-date-label"
                                              )}

                                        <br />
@@ -198,13 +217,18 @@ const Pinswg_wayleaveid = (props) => {
                                    </dt>
                                    <dd className="govuk-summary-list__value">
                                        {router.locale == "cy"
-                                            ? jsonpath.query(
-                                                  transLookup,
-                                                  '$..[?(@.value=="' +
+                                            ? jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy'
+                                                      '")].value_cy',
+                                                  transLookup
                                              )
-                                            : detailsObj.pinswg_relevantauthorityname ||
+                                            : jsonpath(
+                                                  '$..[?(@.pinswg_lpa=="' +
+                                                      detailsObj.pinswg_relevantauthorityname +
+                                                      '")].value',
+                                                  transLookup
+                                              ) ||
                                              t(
                                                  "case:summary-no-date-entered-label"
                                              )}
@@ -214,7 +238,7 @@ const Pinswg_wayleaveid = (props) => {
                        </div>
                    </div>
                </div>
-                <div className="card" id="casescomment-card">
+                <div className="card" id="key-dates-card">
                    <div className="card-body">
                        <div className="govuk-grid-column-full">
                            <h3 className="govuk-heading-m govuk-!-margin-bottom-7">
@@ -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")}
@@ -1,8 +1,6 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useContext } from "react";
-import useTranslation from "next-translate/useTranslation";
-import SearchForCase from "./search/searchforcase";
 import SearchResults from "./search/searchresults";

 export default function Search({ children, pages }) {
@@ -25,17 +23,14 @@ export default function Search({ children, pages }) {
            <div className="govuk-grid-row">
                <div className="govuk-grid-column-full">
                    <div className="govuk-button-group">
-                        <Link href="/advancedsearch">
-                            <a className="govuk-button">
-                                {t("search:searchresults-search-button-label")}
-                            </a>
+                        <Link href="/advancedsearch" className="govuk-button">
+                            {t("search:searchresults-search-button-label")}
                        </Link>
-                        <Link href="/advancedsearch">
-                            <a className="govuk-button govuk-button--secondary">
-                                {t(
-                                    "search:searchresults-new-search-button-label"
-                                )}
-                            </a>
+                        <Link
+                            href="/advancedsearch"
+                            className="govuk-button govuk-button--secondary"
+                        >
+                            {t("search:searchresults-new-search-button-label")}
                        </Link>
                    </div>
                </div>
@@ -1,7 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
 import BuildCheckSection from "./newappeal/buildchecksection";

 const CheckAnswers = (props) => {
@@ -19,7 +17,6 @@ const CheckAnswers = (props) => {
            id="main-content"
            role="main"
        >
-            sss
            <BuildCheckSection
                formXML={formXML}
                sectionCount={sectionCount}
@@ -1,9 +1,9 @@
-import CookieConsent from "react-cookie-consent";
+import cookie from "cookie-cutter";
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";
-import cookie from "cookie-cutter";
-import { useState, useEffect } from "react";
+import { useState } from "react";
+import { CookieConsent } from "react-cookie-consent";

 const CookieBanner = () => {
    let { t, lang } = useTranslation();
@@ -26,6 +26,7 @@ const CookieBanner = () => {
            "usage": "accepted",
            "communications": "accepted",
            "settings": "accepted",
+            "analytics_storage": "granted",
        };

        cookie.set("CookiePolicy", JSON.stringify(cookieStr).toString(), {
@@ -117,14 +118,13 @@ const CookieBanner = () => {
                                {t("common:cookie-banner-accept")}
                            </button>

-                            <Link href="/help/cookies">
-                                <a
-                                    className="cookies-banner__button govuk-link--no-underline"
-                                    id="rcc-decline-button"
-                                    aria-label="Decline cookies"
-                                >
-                                    {t("common:cookie-banner-change-settings")}
-                                </a>
+                            <Link
+                                href="/help/cookies"
+                                className="cookies-banner__button govuk-link--no-underline"
+                                id="rcc-decline-button"
+                                aria-label="Decline cookies"
+                            >
+                                {t("common:cookie-banner-change-settings")}
                            </Link>
                        </div>
                    </div>
@@ -1,6 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";

 const CookiePolicy = (props) => {
    let { t } = useTranslation();
@@ -1,10 +1,10 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useContext, useEffect, useState } from "react";
-import useTranslation from "next-translate/useTranslation";
-import { Field, reduxForm } from "redux-form";
-import { parseCookies, setCookie, destroyCookie } from "nookies";
+import { parseCookies } from "nookies";
+import { useState } from "react";
 import { connect } from "react-redux";
+import { reduxForm } from "redux-form";

 import cookie from "cookie-cutter";

@@ -20,6 +20,8 @@ const CookieManagementMain = (props) => {
        Object.assign(values, {
            "essential": "accepted",
            "usage": usageState,
+            "analytics_storage":
+                usageState == "accepted" ? "granted" : "denied",
            // "communications": communicationsState,
            "settings": settingsState,
        });
@@ -65,7 +67,7 @@ const CookieManagementMain = (props) => {
    const [usageState, setUsageState] = useState(
        typeof cookieCheck.CookiePolicy == "undefined" ? null : cookieObj.usage
    );
-    // const [communicationsState, setCommunicationsState] = useState(
+    //const [communicationsState, setCommunicationsState] = useState(
    //     typeof cookieCheck.CookiePolicy == "undefined"
    //         ? null
    //         : cookieObj.communications
@@ -205,7 +207,6 @@ const CookieManagementMain = (props) => {
                                                    name="usage"
                                                    className="govuk-radios__input"
                                                    id="usage-1"
-                                                    component="input"
                                                    type="radio"
                                                    value="revoked"
                                                    checked={
@@ -234,7 +235,6 @@ const CookieManagementMain = (props) => {
                                                    name="usage"
                                                    type="radio"
                                                    value="accepted"
-                                                    component="input"
                                                    checked={
                                                        usageState ===
                                                        "accepted"
@@ -352,7 +352,6 @@ const CookieManagementMain = (props) => {
                                                name="settings"
                                                type="radio"
                                                value="revoked"
-                                                component="input"
                                                checked={
                                                    settingsState === "revoked"
                                                }
@@ -379,7 +378,6 @@ const CookieManagementMain = (props) => {
                                                name="settings"
                                                type="radio"
                                                value="accepted"
-                                                component="input"
                                                checked={
                                                    settingsState === "accepted"
                                                }
@@ -435,12 +433,11 @@ const CookieManagementMain = (props) => {
                                                href={t(
                                                    "cookies:cookie-settings-essential-link"
                                                )}
+                                                className="govuk-link govuk-link--no-underline govuk-!-font-weight-bold"
                                            >
-                                                <a className="govuk-link govuk-link--no-underline govuk-!-font-weight-bold">
-                                                    {t(
-                                                        "cookies:cookie-settings-essential-link-label"
-                                                    )}
-                                                </a>
+                                                {t(
+                                                    "cookies:cookie-settings-essential-link-label"
+                                                )}
                                            </Link>
                                        </p>
                                    </legend>
@@ -1,7 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
-import { DiagConsoleLogger } from "@opentelemetry/api";
+import { useRouter } from "next/router";

 const CRMError = (props) => {
    let { t } = useTranslation();
@@ -1,7 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";

 const ApplicationSideBar = (props) => {
    let { t } = useTranslation();
@@ -1,7 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";

 const ApplicationSummary = (props) => {
    let { t } = useTranslation();
@@ -1,13 +1,11 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
-import { useState } from "react";
 import useTranslation from "next-translate/useTranslation";
-import ApplicationTabsTimeLine from "./applicationTabsTimeline";
+import { useRouter } from "next/router";
+import { useState } from "react";
 import ApplicationSideBar from "./applicationSideBar";
-import ApplicationTabsDocuments from "./applicationTabsDocuments";
 import ApplicationTabsComments from "./applicationTabsComments";
+import ApplicationTabsDocuments from "./applicationTabsDocuments";
 import ApplicationTabsRegistrationForm from "./applicationTabsRegistrationForm";
+import ApplicationTabsTimeLine from "./applicationTabsTimeline";

 const ApplicationTabs = (props) => {
    let { t } = useTranslation();
@@ -1,7 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";

 const ApplicationTabsComments = (props) => {
    let { t } = useTranslation();
@@ -1,12 +1,11 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useContext } from "react";
-import useTranslation from "next-translate/useTranslation";
 import {
    Accordion,
    AccordionItem,
-    AccordionItemHeading,
    AccordionItemButton,
+    AccordionItemHeading,
    AccordionItemPanel,
 } from "react-accessible-accordion";
 // import "react-accessible-accordion/dist/fancy-example.css";
@@ -133,7 +132,7 @@ const ApplicationTabsDocuments = (props) => {
                        </div>

                        <div className=" govuk-grid-column-two-thirds govuk-form-group">
-                            <label className="govuk-label-xs " htmlFor="sort">
+                            <label className="govuk-label-xs " htmlFor="showNo">
                                Show{" "}
                                <select
                                    className="govuk-select govuk-select-s"
@@ -1,7 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";

 const ApplicationTabsRegistrationForm = (props) => {
    let { t } = useTranslation();
@@ -1,7 +1,5 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";

 const ApplicationTabsTimeLine = (props) => {
    let { t } = useTranslation();
@@ -1,7 +1,6 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useContext } from "react";
-import useTranslation from "next-translate/useTranslation";

 const ApplicationIntro = (props) => {
    let { t } = useTranslation();
@@ -27,10 +26,8 @@ const ApplicationIntro = (props) => {
                </ul>
                <p className="govuk-body">
                    {t("dnsApplications:page-intro-paragraph-2")}{" "}
-                    <Link href="/dns/calendar">
-                        <a className="govuk-link">
-                            {t("dnsApplications:page-intro-paragraph-2-link")}
-                        </a>
+                    <Link href="/dns/calendar" className="govuk-link">
+                        {t("dnsApplications:page-intro-paragraph-2-link")}
                    </Link>
                    .
                </p>
@@ -1,7 +1,6 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useContext } from "react";
-import useTranslation from "next-translate/useTranslation";

 const ApplicationList = (props) => {
    let { t } = useTranslation();
@@ -14,7 +13,7 @@ const ApplicationList = (props) => {
            <div className="govuk-grid-row govuk-!-margin-top-9">
                <div className="govuk-grid-column-full">
                    <div className="govuk-form-group">
-                        <label className="govuk-label-s " htmlFor="sort">
+                        <label className="govuk-label-s " htmlFor="showNo">
                            {t("dnsCommon:result-list-show-label")}{" "}
                            <select
                                className="govuk-select"
@@ -84,15 +83,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -135,15 +132,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -186,15 +181,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -237,15 +230,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -288,15 +279,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -339,15 +328,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -390,15 +377,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -441,15 +426,13 @@ const ApplicationList = (props) => {
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                <Link href="/dns/application-view">
-                                    <a>
-                                        <span className="results-visually-hidden">
-                                            {t(
-                                                "dnsApplications:result-list-heading-label-application"
-                                            )}
-                                            :{" "}
-                                        </span>
-                                        TWA - Morlais Demonstration Zone
-                                    </a>
+                                    <span className="results-visually-hidden">
+                                        {t(
+                                            "dnsApplications:result-list-heading-label-application"
+                                        )}
+                                        :{" "}
+                                    </span>
+                                    TWA - Morlais Demonstration Zone
                                </Link>
                            </dd>
                            <dd className="govuk-summary-list__value govuk-!-font-size-16">
@@ -500,7 +483,7 @@ const ApplicationList = (props) => {
                        <span>
                            <Link href="#">5</Link>
                        </span>{" "}
-                        <Link href="#">
+                        <Link href="#" legacyBehavior>
                            {t("dnsCommon:result-list-next-label")}
                        </Link>
                    </p>
@@ -1,6 +1,6 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";

 const ApplicationsForComment = (props) => {
    let { t } = useTranslation();
@@ -15,10 +15,11 @@ const ApplicationsForComment = (props) => {
            <div className="govuk-panel__body">
                <ul className="govuk-list">
                    <li>
-                        <Link href="/dns/application-view">
-                            <a className="govuk-body-s ">
-                                Holyhead Harbour Revision Order
-                            </a>
+                        <Link
+                            href="/dns/application-view"
+                            className="govuk-body-s "
+                        >
+                            Holyhead Harbour Revision Order
                        </Link>
                    </li>
                </ul>
@@ -1,6 +1,6 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";

 const DNSLinks = (props) => {
    let { t } = useTranslation();
@@ -13,10 +13,11 @@ const DNSLinks = (props) => {
                <ul className="govuk-list">
                    <li>
                        <h3 className="govuk-heading-l govuk-!-font-size-27">
-                            <Link href="/dns/applications">
-                                <a className="govuk-link govuk-link--no-underline">
-                                    {t("dnsHome:links-applications-title")}
-                                </a>
+                            <Link
+                                href="/dnsapplications"
+                                className="govuk-link govuk-link--no-underline"
+                            >
+                                {t("dnsHome:links-applications-title")}
                            </Link>
                            <p className="govuk-body-s govuk-!-padding-top-2">
                                {t(
@@ -25,7 +26,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,24 +37,25 @@ 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">
-                                <a className="govuk-link govuk-link--no-underline ">
-                                    {t("dnsHome:links-help-title")}
-                                </a>
+                            <Link
+                                href="https://gov.wales/developments-national-significance-dns-guidance"
+                                className="govuk-link govuk-link--no-underline "
+                            >
+                                {t("dnsHome:links-help-title")}
                            </Link>
                            <p className="govuk-body-s govuk-!-padding-top-2">
                                {t("dnsHome:links-guidance-intro-paragraph")}
                            </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 +67,7 @@ const DNSLinks = (props) => {
                                {t("dnsHome:links-contactus-intro-paragraph")}
                            </p>
                        </h3>
-                    </li>
+                    </li> */}
                </ul>
            </div>
        </div>
@@ -1,12 +1,16 @@
+import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import useTranslation from "next-translate/useTranslation";

 const LatestApplications = (props) => {
    let { t } = useTranslation();
+    let { 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 ">
-                        {" "}
-                        <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>
-
-                    <li className="govuk-body-s ">
-                        {" "}
-                        <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>
+                    {Object.keys(dnsListArr).map((key, index) => {
+                        return (
+                            <li className="govuk-body-s " key={key}>
+                                <Link
+                                    href={
+                                        "/dns/" +
+                                        (dnsList[key].title.indexOf(" - ") < 0
+                                            ? dnsList[key].title
+                                            : dnsList[key].title
+                                                  .split(" - ")[1]
+                                                  .split(" ")
+                                                  .join("-"))
+                                    }
+                                >
+                                    {dnsList[key].title}
+                                </Link>
+                            </li>
+                        );
+                    })}
                </ul>
            </div>
        </div>
@@ -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 = [
-    { id: 1, name: "30MW Energy Plant - Wrexham" },
-    { id: 1, name: "Abertillery Wind Farm" },
-    { id: 1, name: "Alaw Mon Solar Farm" },
-    { 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 &amp; 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,
-        name: company.name,
-    };
-});
-
 const TitleContent = (props) => {
+    const { dnsList } = props;
+
+    const dnsSites = dnsList.value;
+
+    const lowerCasedCompanies = dnsSites.map((company) => {
+        return {
+            id: company.ticketnumber,
+            name: company.title,
+        };
+    });
+
    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,10 +65,16 @@ const TitleContent = (props) => {
                    }}
                    highlightFirstSuggestion={true}
                />
-                <Link href="/dns/application-view">
-                    <a className="govuk-button govuk-!-margin-bottom-0 govuk-!-margin-left-2">
-                        {t("dnsHome:title-application-search-button")}
-                    </a>
+                <Link
+                    href={
+                        "/dns/" +
+                        (value.indexOf(" - ") > 0
+                            ? value.split(" - ")[1].split(" ").join("-")
+                            : value)
+                    }
+                    className="govuk-button govuk-!-margin-bottom-0 "
+                >
+                    {t("dnsHome:title-application-search-button")}
                </Link>
            </div>
        </div>
@@ -1,13 +1,10 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
-import TitleContent from "./homepage/titleContent";
-import LatestApplications from "./homepage/latestApplications";
+import { useRouter } from "next/router";
 import DNSLinks from "./homepage/dnsLinks";
-import ApplicationsForComment from "./homepage/applicationsForComment";
+import LatestApplications from "./homepage/latestApplications";
+import TitleContent from "./homepage/titleContent";

-export default function Main({ children, pages }) {
+export default function Main({ children, pages, props }) {
    let { t } = useTranslation();

    const router = useRouter();
@@ -22,8 +19,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 />
-                        <LatestApplications />
+                        <TitleContent
+                            dnsList={props.searchResultsObj.searchResultsObj}
+                        />
+                        <LatestApplications
+                            dnsList={props.searchResultsObj.searchResultsObj}
+                        />
                    </div>
                </div>
            </div>
@@ -31,7 +32,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>
@@ -1,13 +1,11 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { useContext } from "react";
 import useTranslation from "next-translate/useTranslation";
-import SearchForCase from "./search/searchforcase";
-import DNSSearchResults from "./search/dnssearchresults";
+import { useRouter } from "next/router";
 import CRMError from "./crmError";
+import DNSSearchResults from "./search/dnssearchresults";

 export default function Search(props) {
-    const { searchString, searchResultsObj } = props;
+    const { searchString, searchResultsObj, myportal, watchedCases, showMap } =
+        props;
    let { t } = useTranslation();

    const router = useRouter();
@@ -39,6 +37,10 @@ export default function Search(props) {
                                searchDetailsObj={
                                    searchResultsObj.searchDetailsObj
                                }
+                                dnsCoords={searchResultsObj.dnsCoordsObj.value}
+                                myportal={myportal}
+                                watchedCases={watchedCases}
+                                showMap={showMap}
                            />
                        </div>
                    </div>
@@ -1,58 +1,59 @@
 import Link from "next/link";
-import Header from "./header";
-import Banner from "./breadcrumbs";
-import Breadcrumbs from "./banner";
 import Footer from "./footer";
+import Header from "./header";

 const Errorpage = () => {
-  var m = new Date();
-  var dateString =
-    m.getUTCDate() +
-    "/" +
-    (m.getUTCMonth() + 1) +
-    "/" +
-    m.getUTCFullYear() +
-    " " +
-    m.getUTCHours() +
-    ":" +
-    m.getUTCMinutes() +
-    ":" +
-    m.getUTCSeconds();
+    var m = new Date();
+    var dateString =
+        m.getUTCDate() +
+        "/" +
+        (m.getUTCMonth() + 1) +
+        "/" +
+        m.getUTCFullYear() +
+        " " +
+        m.getUTCHours() +
+        ":" +
+        m.getUTCMinutes() +
+        ":" +
+        m.getUTCSeconds();

-  return (
-    <div className="">
-      <Header courseName="An error has occured" />
-      <div className="govuk-width-container">
-        <main
-          className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
-          id="main-content"
-          role="main"
-        >
-          <div className="govuk-grid-row">
-            <div className="govuk-grid-column-two-thirds">
-              <h1 className="govuk-heading-xl">There has been a problem</h1>
-              <p className="govuk-body">
-                Unfortunately something has gone wrong!
-              </p>
-              <p className="govuk-body govuk-!-margin-top-9">{dateString}</p>
-              <Link href="/">
-                <a
-                  role="button"
-                  draggable="false"
-                  className="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
-                  data-module="govuk-button"
+    return (
+        <div className="">
+            <Header courseName="An error has occured" />
+            <div className="govuk-width-container">
+                <main
+                    className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+                    id="main-content"
+                    role="main"
                >
-                  Try again
-                </a>
-              </Link>
-              <br />
+                    <div className="govuk-grid-row">
+                        <div className="govuk-grid-column-two-thirds">
+                            <h1 className="govuk-heading-xl">
+                                There has been a problem
+                            </h1>
+                            <p className="govuk-body">
+                                Unfortunately something has gone wrong!
+                            </p>
+                            <p className="govuk-body govuk-!-margin-top-9">
+                                {dateString}
+                            </p>
+                            <Link
+                                href="/"
+                                role="button"
+                                draggable="false"
+                                className="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
+                                data-module="govuk-button"
+                            >
+                                Try again
+                            </Link>
+                            <br />
+                        </div>
+                    </div>
+                </main>
            </div>
-          </div>
-        </main>
-      </div>
-      <Footer footerLinks="" />
-    </div>
-  );
+            <Footer footerLinks="" />
+        </div>
+    );
 };

 export default Errorpage;
--- a/Show More
+++ b/Show More
				`@@ -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
				`@@ -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"}]}