made getstatus serverside not client

added in count on case status dropdown

Related work items: #23447

.clinerules/refactor-branch-rules.md

@@ -2,15 +2,18 @@
 
 ## Purpose
 
-This file defines the active working rules for this refactor branch.
+This file defines the active working rules for the **refactor branch**.
 
-This branch is focused on **safe, behaviour-preserving refactor of the new appeal flow**.
+This branch is focused on **safe, behaviour-preserving refactor of portal journeys**, including:
+
+- New Appeal Flow (completed baseline)
+- Representations Flow (active refactor stream)
 
 ---
 
 ## Core Rule (Highest Priority)
 
-Do not change live S78 behaviour unless explicitly instructed.
+Do not change live behaviour unless explicitly instructed.
 
 Refactor = improve structure, not behaviour.
 
@@ -18,30 +21,62 @@ Refactor = improve structure, not behaviour.
 
 ## Primary Objectives
 
-1. Make the new appeal flow easier to understand and maintain
+1. Make core portal journeys easier to understand and maintain
 2. Reduce risk when making future changes
-3. Prepare the system for multiple appeal types
-4. Improve separation of concerns (UI, workflow, data, integrations)
+3. Improve separation of concerns (UI, workflow, data, integrations)
+4. Prepare flows for future extensibility (e.g. multiple appeal types, additional journey types)
+
+---
+
+## Active Refactor Streams
+
+### Completed
+
+- New Appeal Flow (S78)
+
+### Active
+
+- Representations Flow
+
+Each stream must follow **slice-based, behaviour-preserving refactor discipline**.
 
 ---
 
 ## Non-Negotiable Rules
 
 - Preserve all current user journeys:
-    - start appeal
-    - save and exit
-    - resume appeal
-    - upload documents
-    - check answers
-    - submit appeal
-    - confirmation
 
-- Do not:
-    - change payload structures
-    - change validation rules
-    - change business logic
-    - hardcode logic that is currently dynamic/config-driven
-    - mix refactor with feature work
+### Appeals
+
+- start appeal
+- save and exit
+- resume appeal
+- upload documents
+- check answers
+- submit appeal
+- confirmation
+
+### Representations
+
+- start from case summary CTA
+- select capacity
+- select representation type
+- enter content / upload files
+- check answers
+- submit representation
+- completion
+
+---
+
+Do not:
+
+- change payload structures
+- change validation rules
+- change business logic
+- change route/query behaviour
+- change navigation or side-effect sequencing
+- introduce EN/CY drift
+- mix refactor with feature work
 
 ---
 
@@ -62,6 +97,41 @@ Always:
 - Prefer small PRs (<400 LOC where possible)
 - Avoid large multi-concern changes
 - Split work into safe slices
+- One slice = one branch = one commit
+
+---
+
+## Branch Model (Critical)
+
+### Branch Roles
+
+- `SIPS-Development`
+    - BAU branch
+    - ongoing feature and bugfix work
+    - must remain stable
+
+- `refactor`
+    - integration branch for refactor work
+    - all refactor slices merge here first
+
+- feature branches (short-lived)
+    - created from `refactor`
+    - one per slice
+    - merged back into `refactor`
+
+---
+
+### Flow
+
+SIPS-Development
+↓
+refactor
+↓
+feature/slice-x
+↓
+refactor
+↓ (when stable & validated)
+SIPS-Development
 
 ---
 
@@ -70,30 +140,25 @@ Always:
 ### Default context (only load these):
 
 - `context/refactor-branch-charter.md`
-- `context/newappeal-refactor-guardrails.md`
 - `context/architecture.md`
 - `context/domain-flows.md`
 
-### Only load additional context when needed:
+### Only load when needed:
 
-- integrations → `integration-map.md`
-- testing gaps → `test-coverage-map.md`
-- release concerns → `runbook.md`
-- specific work plan → `context/plans/*`
+- appeal work → `newappeal-refactor-guardrails.md`
+- representation work → `representations-refactor-guardrails.md`
+- plans → `context/plans/*`
 
 ### Never load by default:
 
 - all context files
-- onboarding or overview docs
+- onboarding docs
 - all templates
-- memory-bank contents
 
 ---
 
 ## Templates Usage
 
-Templates are optional helpers.
-
 - Use only ONE template when needed
 - Do not load all templates
 - Do not treat templates as baseline context
@@ -110,25 +175,41 @@ Templates are optional helpers.
 
 ---
 
-## Testing & Validation Expectations
+## Regression Safety Rule (Critical)
 
-Minimum:
+This is a live system. All refactor work must prove behaviour is unchanged.
 
-- `npm run lint`
-- targeted manual verification
-- EN/CY checks (if user-facing)
-- negative-path checks (for sensitive flows)
+Before completing any slice:
 
-Before changing critical logic:
+### Appeals
 
-- add or update regression protection where possible
+- start appeal
+- save and exit
+- resume
+- upload
+- check answers
+- submit
+- confirmation
+
+### Representations
+
+- navigate from case summary → make representation
+- complete full journey
+- submit successfully
+- confirmation shown
+
+Also:
+
+- verify EN/CY parity
+- verify no navigation or state regressions
+
+If regression cannot be ruled out:
+→ do not proceed
 
 ---
 
 ## When Unsure
 
-If any uncertainty exists:
-
 1. Choose the safest option
 2. Do not change behaviour
 3. Call out assumptions
@@ -142,87 +223,12 @@ A successful change:
 
 - preserves behaviour
 - reduces complexity
-- improves clarity or structure
+- improves clarity
 - is small and safe to merge
-- does not introduce regression risk
+- introduces no regression risk
 
 ---
 
 ## One-Line Rule
 
-If in doubt:
-
 > Keep behaviour the same, reduce risk, and make the smallest safe change.
-
----
-
-## Documentation Rule (Minimal and Targeted)
-
-Only document information that is necessary to safely understand or change the system later.
-
-Document:
-
-- key decisions (why something was changed)
-- non-obvious behaviour
-- risks or constraints (what must not be changed)
-- important assumptions
-
-Do not document:
-
-- obvious code behaviour
-- step-by-step implementation details
-- temporary or experimental work
-- duplicated explanations across files
-
-Prefer short, focused notes over long explanations.
-
-If unsure:
-
-> Will someone break the system in the future if this is not written down?
-
-If yes → document it  
-If no → do not document it
-
-Documentation should be minimal, high-signal, and never outweigh the value of the code itself.
-
-## Branch Safety Rule
-
-This refactor stream uses the `refactor` branch as its working base branch.
-
-For refactor work:
-
-- do all implementation from the `refactor` branch or a short-lived feature branch created from `refactor`
-- do not implement refactor work directly on `SIPS-Development`
-
-`SIPS-Development` remains the BAU integration branch.
-Refactor changes may be merged into `SIPS-Development` only when proven safe.
-
-If branch context is unclear, stop and confirm before making changes.
-
-## Branch Model
-
-- `SIPS-Development` = BAU branch
-- `refactor` = refactor integration branch
-- optional short-lived working branches for individual slices should be created from `refactor`
-
-## Regression Safety Rule (Critical)
-
-This is a live system. All refactor work must prove behaviour is unchanged.
-
-Before completing any slice:
-
-- verify core journey behaviour has not changed
-- verify protected flows still work:
-    - save and exit
-    - resume appeal
-    - upload documents
-    - check answers
-    - submit appeal
-    - confirmation
-
-- verify EN/CY parity for any affected areas
-
-A slice is NOT complete until regression behaviour is confirmed.
-
-If regression cannot be confidently ruled out:
-→ do not proceed to next slice

.env.local

@@ -18,8 +18,8 @@ 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"
-CRMURL_VERSION = "v8.2"
+CRMURL = "dv-pedw.crm11.dynamics.com"
+CRMURL_VERSION = "v9.2"
 
 # //New Test  
 CLIENT_ID = d40b9373-96c2-4b04-8bd8-c2a2fe6444c1
@@ -139,10 +139,10 @@ NEXTAUTH_SECRET = SuperSecret
 # 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://sql-srv-plt-pedw-dev-uks-01.database.windows.net:1433;database=PEDW;user=PedwSqlAdmin;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
+DATABASE_URL = sqlserver://sql-srv-plt-pedw-dev-uks-01.database.windows.net:1433;database=PEDW;user=PedwSqlAdmin;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
 
 // test sql server 
- DATABASE_URL = sqlserver://sql-srv-plt-pedw-test-uks-01.database.windows.net:1433;database=PEDW;user=PedwSqlAdmin;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
+DATABASE_URL = sqlserver://sql-srv-plt-pedw-test-uks-01.database.windows.net:1433;database=PEDW;user=PedwSqlAdmin;password=GhWKr62F5sQ69dZx;encrypt=true;trustServerCertificate=true;hostNameInCertificate=*.database.windows.net;loginTimeout=30;authentication=ActiveDirectoryPassword
 
 // Pre prod sql server
 # DATABASE_URL = sqlserver://sql-srv-plt-pedw-ppe-uks-01.database.windows.net:1433;database=PEDW;user=PedwSqlAdmin;password=GhWKr62F5sQ69dZx;encrypt=true;trustservercertificate=true;hostnameincertificate=*.database.windows.net;logintimeout=30;authentication=SqlPassword
@@ -248,7 +248,7 @@ 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
+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
  
 
 APPLICATIONINSIGHTS_CONNECTIONSTRING = InstrumentationKey=7a06e24a-793c-47bc-8987-ce80f180e035;IngestionEndpoint=https://uksouth-1.in.applicationinsights.azure.com/;LiveEndpoint=https://uksouth.livediagnostics.monitor.azure.com/;ApplicationId=9906b6d0-b791-4add-8d53-c827a534e1d4
@@ -258,12 +258,12 @@ APPLICATIONINSIGHTS_CONNECTIONSTRING = InstrumentationKey=7a06e24a-793c-47bc-898
 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
+# 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
 
-NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=a41b91bf-f7dc-4f44-bb66-a67df4eee435;IngestionEndpoint=https://uksouth-1.in.applicationinsights.azure.com/;LiveEndpoint=https://uksouth.livediagnostics.monitor.azure.com/;ApplicationId=473d0632-16f1-4065-8984-d6bac62402c0
+# NEXT_PUBLIC_APP_INSIGHT = InstrumentationKey=a41b91bf-f7dc-4f44-bb66-a67df4eee435;IngestionEndpoint=https://uksouth-1.in.applicationinsights.azure.com/;LiveEndpoint=https://uksouth.livediagnostics.monitor.azure.com/;ApplicationId=473d0632-16f1-4065-8984-d6bac62402c0
  
 // 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
+# 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
 
 
 HIDEERRORLOGS = false
@@ -271,4 +271,6 @@ HIDEERRORLOGS = false
 SHOWSIPS = true
 
 ALLOWED_IPS=::1,203.0.113.42,198.51.100.17
-UPLOAD_BATCH_COUNT = 5
+UPLOAD_BATCH_COUNT = 5
+
+NRWDOMAIN = rdbmedia.co.uk

actions/azurestorage.js

@@ -476,20 +476,19 @@ export const createRepPDFBlob = async (
         ? await blockBlobClient.uploadData(content)
         : await blockBlobClient.uploadStream(content);
 
-    let whichLocation =
-        repName.indexOf("_IP_") > 0
-            ? "846040005"
-            : repName.indexOf("_Statement_") > 0
-              ? "846040002"
-              : repName.indexOf("_Questionnaire_") > 0
-                ? "846040001"
-                : repName.indexOf("_Comments") > 0
-                  ? "846040003"
-                  : repName.indexOf("_Impact") > 0
-                    ? "846040029"
-                    : repName.indexOf("_Consultation_Response_") > 0
-                      ? "846040036"
-                      : "846040002";
+    const locationMap = [
+        { key: "_IP_-_Comments_", value: "846040038" }, // most specific first
+        { key: "_IP_", value: "846040005" },
+        { key: "_Statement_", value: "846040002" },
+        { key: "_Questionnaire_", value: "846040001" },
+        { key: "_Comments", value: "846040003" },
+        { key: "_Impact", value: "846040029" },
+        { key: "_Consultation_Response_", value: "846040036" }
+    ];
+
+    const whichLocation =
+        locationMap.find((item) => repName.includes(item.key))?.value ||
+        "846040002";
 
     const tags = {
         containerid: containerName,
@@ -618,71 +617,46 @@ export const uploadFile = async (formContent, containerName, foldername) => {
                 );
                 console.log(data);
 
-                let whichLocation =
-                    files[prop][0].fieldName.indexOf("_Statement_of_Case") >
-                        0 ||
-                    files[prop][0].fieldName.indexOf("_-_Statement_of_Case") >
-                        0 ||
-                    files[prop][0].fieldName.indexOf("_-_Application_Form") >
-                        0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_Site_Ownership_Certificate"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf("_-_Decision_Notice") >
-                        0 ||
-                    files[prop][0].fieldName.indexOf("_-_Site_Location_Plan") >
-                        0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_Plans_Drawing_Documents"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_Additional_Plans_Drawings_Documents"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_Design_and_Access_Statement"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_NSB_LPA_Additional_Documents"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf("_-_LPA_Correspondence") >
-                        0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_LPA_Original_Permission"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_LPA's_Registration_Letter"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf(
-                        +"_-_Environmental_Statement"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf("_-_Cost_of_Application") >
-                        0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_Other_Relevant_Material"
-                    ) > 0 ||
-                    files[prop][0].fieldName.indexOf(
-                        "_-_S106_Agreement_or_Unilateral_Undertaking" > 0
-                    )
-                        ? "846040000"
-                        : files[prop][0].fieldName.indexOf("_IP_") > 0
-                          ? "846040005"
-                          : files[prop][0].fieldName.indexOf("_Statement_") > 0
-                            ? "846040002"
-                            : files[prop][0].fieldName.indexOf(
-                                    "_Questionnaire_"
-                                ) > 0
-                              ? "846040001"
-                              : files[prop][0].fieldName.indexOf("_Comments_") >
-                                  0
-                                ? "846040003"
-                                : files[prop][0].fieldName.indexOf("_Impact_") >
-                                    0
-                                  ? "846040001"
-                                  : files[prop][0].fieldName.indexOf(
-                                          "_Consultation_Response_"
-                                      ) > 0
-                                    ? "846040036"
-                                    : "846040000";
+                const fieldName = files[prop][0].fieldName;
+
+                const whichLocation =
+                    [
+                        // 1️⃣ LPA docs (grouped)
+                        {
+                            match: [
+                                "_Statement_of_Case",
+                                "_-_Statement_of_Case",
+                                "_-_Application_Form",
+                                "_-_Site_Ownership_Certificate",
+                                "_-_Decision_Notice",
+                                "_-_Site_Location_Plan",
+                                "_-_Plans_Drawing_Documents",
+                                "_-_Additional_Plans_Drawings_Documents",
+                                "_-_Design_and_Access_Statement",
+                                "_-_NSB_LPA_Additional_Documents",
+                                "_-_LPA_Correspondence",
+                                "_-_LPA_Original_Permission",
+                                "_-_LPA's_Registration_Letter",
+                                "_-_Environmental_Statement",
+                                "_-_Cost_of_Application",
+                                "_-_Other_Relevant_Material",
+                                "_-_S106_Agreement_or_Unilateral_Undertaking"
+                            ],
+                            value: "846040000"
+                        },
+                        { match: ["_IP_-_Comments_"], value: "846040038" },
+                        {
+                            match: ["_Consultation_Response_"],
+                            value: "846040036"
+                        },
+                        { match: ["_Questionnaire_"], value: "846040001" },
+                        { match: ["_Statement_"], value: "846040002" },
+                        { match: ["_Comments_"], value: "846040003" },
+                        { match: ["_Impact_"], value: "846040001" },
+                        { match: ["_IP_"], value: "846040005" }
+                    ].find((rule) =>
+                        rule.match.some((key) => fieldName.includes(key))
+                    )?.value || "846040000";
 
                 const tags = {
                     containerid: containerName,
@@ -803,6 +777,8 @@ export const uploadSingleFile = async (
                     /_Statement_of_Case|_-_Statement_of_Case|_-_Application_Form|_-_Site_Ownership_Certificate|_-_Decision_Notice|_-_Site_Location_Plan|_-_Plans_Drawing_Documents|_-_Additional_Plans_Drawings_Documents|_-_Design_and_Access_Statement|_-_NSB_LPA_Additional_Documents|_-_LPA_Correspondence|_-_LPA_Original_Permission|_-_LPA's_Registration_Letter|_-_Environmental_Statement|_-_Cost_of_Application|_-_Other_Relevant_Material|_-_S106_Agreement_or_Unilateral_Undertaking/,
                 value: "846040000"
             },
+
+            { pattern: /_IP_-_Comments_/, value: "846040038" },
             { pattern: /_IP_/, value: "846040005" },
             { pattern: /_Statement_/, value: "846040002" },
             { pattern: /_Questionnaire_/, value: "846040001" },

actions/selectQueryTypes.js

@@ -82,7 +82,7 @@ export const getSelectQuery = (appealTypeName) => {
             return "&$select=pinswg_eiarequired,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_endofrepresentationperiod,pinswg_inspectorreportsubmittedtowelshgovernment,pinswg_procedureconfirmed,pinswg_projectdescription,pinswg_projectlocation,pinswg_recommendation,pinswg_rejectrequesttovaryapplication,pinswg_reportdueby,pinswg_suspensiondates,pinswg_suspensionenddates,pinswg_suspensionstartdate,pinswg_validnoticeofintentiontosubmitanapplicati,pinswg_webaddress,pinswg_withdrawndate,pinswg_writtenacceptanceofnotification,statuscode,pinswg_casestage,pinswg_startdateofevent,pinswg_typeofevent";
         case "pinswg_sipses":
             // 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";
-            return "&$select=_pinswg_projecttype_value,pinswg_eiarequired,pinswg_anticipatedgridrefeasting,pinswg_anticipatedgridrefnorthing,_pinswg_appellant_value,pinswg_name,_pinswg_associatedlpa_value,pinswg_choiceofprocedure,pinswg_decision,pinswg_projectdescription,pinswg_projectlocation,pinswg_recommendation,statuscode,pinswg_casestage,_pinswg_sipscase_value,pinswg_writtenacceptanceofnotification,pinswg_validnoticeofintentiontosubmit,pinswg_deadlineforsubmissionofapplication,pinswg_screeningstartdate,pinswg_eiatargetdate,pinswg_targetextended,pinswg_directionissueddate,pinswg_eiarequired,pinswg_scopingstartdate,pinswg_scopingtargetdate,pinswg_scopingtargetextended,pinswg_scopingoutcomeissueddate,pinswg_essubmitted,pinswg_deemedmarinelicenseappliedfor,pinswg_validationdeadlineextension,pinswg_casesuspensionstartdate,pinswg_casesuspensionenddate,pinswg_consultationopen,pinswg_consultationclose,pinswg_reportissuedtowelshministers,pinswg_decisionissuedtoapplicant,pinswg_decisionoutcome,pinswg_redetermination,pinswg_redeterminationconsultationdeadline";
+            return "&$select=pinswg_casedeadline,_pinswg_projecttype_value,pinswg_eiarequired,pinswg_anticipatedgridrefeasting,pinswg_anticipatedgridrefnorthing,_pinswg_appellant_value,pinswg_name,_pinswg_associatedlpa_value,pinswg_choiceofprocedure,pinswg_decision,pinswg_projectdescription,pinswg_projectlocation,pinswg_recommendation,statuscode,pinswg_casestage,_pinswg_sipscase_value,pinswg_writtenacceptanceofnotification,pinswg_validnoticeofintentiontosubmit,pinswg_deadlineforsubmissionofapplication,pinswg_screeningstartdate,pinswg_eiatargetdate,pinswg_targetextended,pinswg_directionissueddate,pinswg_eiarequired,pinswg_scopingstartdate,pinswg_scopingtargetdate,pinswg_scopingtargetextended,pinswg_scopingoutcomeissueddate,pinswg_essubmitted,pinswg_deemedmarinelicenseappliedfor,pinswg_validationdeadlineextension,pinswg_consultationopen,pinswg_consultationclose,pinswg_reportissuedtowelshministers,pinswg_decisionissuedtoapplicant,pinswg_decisionoutcome,pinswg_redetermination,pinswg_redeterminationconsultationdeadline";
             break;
         default:
             return "";

actions/services/caseDirectService.js

@@ -274,3 +274,11 @@ export const getPortalModuleDetailsProxy = (appealType, caseReference) => {
         consoleLogger(error);
     });
 };
+
+export const getCaseStatus = async (appealType, caseReference) => {
+    const route = buildFileQuery("/api/endpoint/getStatusCounts_api", {});
+
+    return getJson(withBaseUrl(BASE_URL, route)).catch((error) => {
+        consoleLogger(error);
+    });
+};

actions/services/caseService.js

@@ -16,7 +16,8 @@ import {
     getPartSavedAppeal,
     getIsPublishedbyID,
     getPortalModuleDetails,
-    getPortalModuleDetailsProxy
+    getPortalModuleDetailsProxy,
+    getCaseStatus
 } from "./caseDirectService";
 
 export {
@@ -37,5 +38,6 @@ export {
     getPartSavedAppeal,
     getIsPublishedbyID,
     getPortalModuleDetails,
-    getPortalModuleDetailsProxy
+    getPortalModuleDetailsProxy,
+    getCaseStatus
 };

actions/services/portalDirectService.js

@@ -274,10 +274,14 @@ export const sendRepCompleteMessage = async (
     });
 };
 
-export const setRepInvolvment = async (caseid, contactid) => {
+export const setRepInvolvment = async (caseid, contactid, involvement) => {
     var queryUrl = buildFileQuery("/api/file/createrepinvolvement_api");
 
-    var data = { "incidentid": caseid, "contactid": contactid };
+    var data = {
+        "incidentid": caseid,
+        "contactid": contactid,
+        "involvement": involvement
+    };
     var config = {
         method: "post",
         url: queryUrl,

components/AIPolicyNotice.js

@@ -0,0 +1,94 @@
+import useTranslation from "next-translate/useTranslation";
+import { parseCookies, setCookie } from "nookies";
+import { useEffect, useRef, useState } from "react";
+
+const COOKIE_NAME = "pedwAiPolicyNoticeHidden";
+const COOKIE_DAYS = 7;
+
+export default function AIPolicyNotice() {
+    let { t } = useTranslation();
+
+    const [hasCheckedCookie, setHasCheckedCookie] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const dismissButtonRef = useRef(null);
+
+    useEffect(() => {
+        const cookies = parseCookies();
+        const isHidden = cookies[COOKIE_NAME] === "true";
+
+        setIsOpen(!isHidden);
+        setHasCheckedCookie(true);
+    }, []);
+
+    useEffect(() => {
+        if (isOpen && dismissButtonRef.current) {
+            dismissButtonRef.current.focus();
+        }
+    }, [isOpen]);
+
+    const dismissNotice = () => {
+        const now = new Date();
+        const expDate = new Date(now);
+
+        expDate.setDate(now.getDate() + COOKIE_DAYS);
+
+        setCookie(null, COOKIE_NAME, "true", {
+            path: "/",
+            expires: expDate
+        });
+
+        setIsOpen(false);
+    };
+
+    if (!hasCheckedCookie || !isOpen) {
+        return null;
+    }
+
+    return (
+        <div
+            className="modal aiModal fade show"
+            style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: "1rem"
+            }}
+            aria-hidden={false}
+        >
+            <div className="modal-dialog" style={{ margin: 0 }}>
+                <div
+                    className="modal-content govuk-!-padding-6"
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="ai-policy-notice-title"
+                >
+                    <h2
+                        id="ai-policy-notice-title"
+                        className="govuk-heading-m govuk-!-margin-bottom-3"
+                    >
+                        {t("home:ai-policy-notice-title")}
+                    </h2>
+                    <p className="govuk-body">
+                        {t("home:ai-policy-notice-paragraph-one")}
+                    </p>
+                    <p className="govuk-body govuk-!-margin-bottom-4">
+                        {t("home:ai-policy-notice-paragraph-two")}
+                    </p>
+                    <button
+                        ref={dismissButtonRef}
+                        type="button"
+                        className="govuk-button govuk-!-margin-bottom-0"
+                        data-module="govuk-button"
+                        onClick={dismissNotice}
+                    >
+                        {t("home:ai-policy-notice-dismiss-button")}
+                    </button>
+                </div>
+            </div>
+            <div
+                className="modal-backdrop fade show"
+                style={{ opacity: 0.2 }}
+            ></div>
+        </div>
+    );
+}

components/account/personaldetails.js

@@ -140,12 +140,12 @@ const RenderPickList = ({
     input,
     optionsArr,
     meta: { touched, error },
-    errorMsg,
+    errorMsg
 }) => {
     let { t, lang } = useTranslation();
     optionsArr = [
         t("account:account-preferred-language-english") + ":846040001",
-        t("account:account-preferred-language-welsh") + ":846040000",
+        t("account:account-preferred-language-welsh") + ":846040000"
     ];
     return (
         <>
@@ -202,7 +202,7 @@ let PersonalDetails = (props) => {
         load,
         pristine,
         reset,
-        submitting,
+        submitting
     } = props;
     let { t, lang } = useTranslation();
 
@@ -324,8 +324,8 @@ let PersonalDetails = (props) => {
                                     label={t("account:account-telephone-label")}
                                 />
                                 <Field
-                                    name="company"
-                                    id="company"
+                                    name="pinswg_companyname"
+                                    id="pinswg_companyname"
                                     component={RenderTextfield}
                                     type="text"
                                     className="govuk-input govuk-input--width-20"
@@ -444,7 +444,7 @@ const mapStateToProps = (state) => {
         searchResultsObj: state.searchResultsObj,
         formData: state.formData,
         appealType: state.appealType,
-        accountDetails: state.accountDetails,
+        accountDetails: state.accountDetails
         //form: state.form,
     };
 };
@@ -453,7 +453,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         setCurrentSection: (currentSection) => {
             dispatch(setCurrentSection(currentSection));
-        },
+        }
     };
 };
 
@@ -484,12 +484,12 @@ const selector = formValueSelector("personalDetailsForm"); // <-- same as form n
 PersonalDetails = reduxForm({
     form: "personalDetailsForm",
     enableReinitialize: true, // this is needed!!
-    destroyOnUnmount: false,
+    destroyOnUnmount: false
 })(PersonalDetails);
 
 // You have to connect() to any reducers that you wish to connect to yourself
 PersonalDetails = connect((state) => ({
-    initialValues: state.accountDetails.accountDetails, // pull initial values from account reducer
+    initialValues: state.accountDetails.accountDetails // pull initial values from account reducer
 }))(PersonalDetails);
 
 export default PersonalDetails;

components/account/personaldetailsCheck.js

@@ -11,7 +11,7 @@ const BuildCheckPersonalDetails = (props) => {
         handleSubmit,
         value,
         setPersonalDetailsComplete,
-        setAccountUpdatedComplete,
+        setAccountUpdatedComplete
     } = props;
     let { t, lang } = useTranslation();
 
@@ -142,7 +142,7 @@ const BuildCheckPersonalDetails = (props) => {
                     <dd className="govuk-summary-list__value">
                         {
                             props.props.props.form.personalDetailsForm.values
-                                .company
+                                .pinswg_companyname
                         }
                     </dd>
                     <dd className="govuk-summary-list__actions">
@@ -354,7 +354,7 @@ const mapStateToProps = (state) => {
         searchResultsObj: state.searchResultsObj,
         formData: state.formData,
         appealType: state.appealType,
-        accountDetails: state.accountDetails,
+        accountDetails: state.accountDetails
         //form: state.form,
     };
 };
@@ -363,7 +363,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         setCurrentSection: (currentSection) => {
             dispatch(setCurrentSection(currentSection));
-        },
+        }
     };
 };
 

components/account/personaldetailsComplete.js

@@ -50,7 +50,7 @@ const PersonalDetailsComplete = (props) => {
         }
 
         doUpdate();
-    }, [loggedinUserId, formValues, prefLang]);
+    }, [loggedinUserId, formValues, prefLang, userLang]);
 
     return (
         <>

components/account/registerform.js

@@ -66,7 +66,7 @@ const RegisterForm = (props) => {
         setRegisterFormComplete,
         setAccountCreatedComplete,
         loggedInUserEmail,
-        emailaddress1,
+        emailaddress1
     } = props;
     let { t, lang } = useTranslation();
 
@@ -199,6 +199,17 @@ const RegisterForm = (props) => {
                                             "account:register-new-account-phone-label"
                                         )}
                                     />
+                                    <Field
+                                        name="company"
+                                        id="company"
+                                        component={RenderTextfield}
+                                        type="text"
+                                        className="govuk-input govuk-input--width-20"
+                                        validate={[required]}
+                                        label={t(
+                                            "account:register-new-account-company-label"
+                                        )}
+                                    />
                                 </fieldset>
                                 <fieldset className="govuk-fieldset">
                                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
@@ -312,8 +323,8 @@ const mapStateToProps = (state, props) => {
         appealType: state.appealType,
         //form: state.form,
         initialValues: {
-            emailaddress1: props.loggedInUserEmail,
-        },
+            emailaddress1: props.loggedInUserEmail
+        }
     };
 };
 
@@ -321,7 +332,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         setCurrentSection: (currentSection) => {
             dispatch(setCurrentSection(currentSection));
-        },
+        }
     };
 };
 
@@ -334,6 +345,6 @@ export default connect(
     reduxForm({
         form: "accountRegisterForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(RegisterForm)
 );

components/admin/tabs/appeals.js

@@ -28,9 +28,15 @@ function AppealsTab(props) {
     const [fieldSortState, setfieldSortState] = useState("desc");
     const [loginToWatch, setLoginToWatch] = useState("true");
 
-    const searchDetailsObj = props.searchResultsObj.searchDetailsObj || {};
-    const resultsArr = props.searchResultsObj.searchResultsObj.value || [];
-    const searchResultsObj = props.searchResultsObj.searchResultsObj;
+    const {
+        searchResultsObj: searchResultsState,
+        setSearchResults,
+        setSearchDetails
+    } = props;
+
+    const searchDetailsObj = searchResultsState.searchDetailsObj || {};
+    const resultsArr = searchResultsState.searchResultsObj.value || [];
+    const searchResultsObj = searchResultsState.searchResultsObj;
 
     const { t } = useTranslation();
     const router = useRouter();
@@ -75,20 +81,14 @@ function AppealsTab(props) {
                 fieldSort,
                 selectedOption
             ).then((data) => {
-                props.setSearchResults(data); // ✅ use props, not import
+                setSearchResults(data);
                 return getSearchDetailsPaged(data).then((details) => {
-                    props.setSearchDetails(details); // ✅ use props, not import
+                    setSearchDetails(details);
                     setShowSpinnerState(false);
                 });
             });
         },
-        [
-            advancedSearch,
-            searchString,
-            selectedOption,
-            props.setSearchDetails,
-            props.setSearchResults
-        ]
+        [selectedOption, setSearchDetails, setSearchResults]
     );
 
     useEffect(() => {
@@ -255,6 +255,8 @@ function AppealsTab(props) {
                                                 className="govuk-link--no-underline"
                                                 onClick={() => {
                                                     setCurrentReference({
+                                                        "statuscode":
+                                                            item.statuscode,
                                                         "ticketnumber":
                                                             item.ticketnumber,
                                                         "currentReference":

components/admin/tabs/documents.js

@@ -936,17 +936,16 @@ const DocumentsTab = (props) => {
             )
                 .then((data) => data)
                 .then((data) => {
-                    props.setDocumentDetails(data);
+                    setDocumentDetails(data);
                     setShowSpinnerState(false);
                 });
         },
         [
-            props.incidentid,
             selectedOption,
             selectedDocumentType,
             selectedWeeks,
             selectedDocumentOrigin,
-            props.setDocumentDetails
+            setDocumentDetails
         ]
     );
 
@@ -957,7 +956,7 @@ const DocumentsTab = (props) => {
             orderBy,
             fieldSort
         ).then((data) => {
-            props.setDocumentDetails(data);
+            setDocumentDetails(data);
             return data;
         });
 
@@ -1060,7 +1059,7 @@ const DocumentsTab = (props) => {
                 selectedDocumentType,
                 selectedWeeks
             ).then((data) => {
-                props.setDocumentDetails(data);
+                setDocumentDetails(data);
                 setDocumentSearchState(true);
 
                 return data;
@@ -1072,13 +1071,11 @@ const DocumentsTab = (props) => {
         //const searchDocumentResultsObj = docDetailsObj();
     }, [
         incidentid,
-        props.setDocumentDetails,
+        setDocumentDetails,
         selectedOption,
         selectedDocumentType,
         fieldSortState,
         orderByState,
-        getDocumentTypes,
-        getOrigin,
         getDocumentResults,
         lang,
         selectedWeeks
@@ -1134,7 +1131,7 @@ const DocumentsTab = (props) => {
                             <select
                                 onChange={(e) => {
                                     setSelectedWeeks(e.target.value);
-                                    props.setCurrentPage(1);
+                                    setCurrentPage(1);
                                 }}
                                 value={selectedWeeks}
                                 className="govuk-select"

components/case/events.js

@@ -3,9 +3,16 @@ import { setCurrentPage } from "../../store/currentView/action";
 import { connect } from "react-redux";
 import useTranslation from "next-translate/useTranslation";
 import { formatDates } from "../utils";
+import {
+    getLivePublishedEvent,
+    isEventLiveNow
+} from "./summary/utils/liveEvent";
+import { useRouter } from "next/router";
 
 const EventsDetails = (props) => {
     let { t } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
 
     const EventView = (eventsArr) => {
         eventsArr = eventsArr.value;
@@ -23,8 +30,6 @@ const EventsDetails = (props) => {
         return obj.hasOwnProperty(property) && obj[property] !== null;
     }
 
-    //console.log(eventsArr.length > 0);
-
     return (
         eventsArr.length > 0 && (
             <div className="govuk-grid-row">
@@ -63,76 +68,26 @@ const EventsDetails = (props) => {
                                                         {item.pinswg_eventname}
                                                     </div>
                                                 )}
-                                            </div>
-                                            <div className="eventColumn">
                                                 {hasOwnPropertyAndNotNull(
                                                     item,
-                                                    "pinswg_eventaddressline1"
-                                                ) && (
-                                                    <>
-                                                        <div>
-                                                            <b>
-                                                                {t(
-                                                                    "case:event-address-label"
-                                                                )}
-                                                            </b>
-                                                            :
-                                                        </div>
-                                                        <div>
-                                                            {
-                                                                item.pinswg_eventaddressline1
-                                                            }
-                                                        </div>
-                                                    </>
-                                                )}
-
-                                                {hasOwnPropertyAndNotNull(
-                                                    item,
-                                                    "pinswg_eventaddressline2"
+                                                    [
+                                                        "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                    ]
                                                 ) && (
                                                     <div>
+                                                        <b>
+                                                            {t(
+                                                                "case:event-type-of-event-label"
+                                                            )}
+                                                        </b>
+                                                        :{" "}
                                                         {
-                                                            item.pinswg_eventaddressline2
+                                                            item[
+                                                                "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                                            ]
                                                         }
                                                     </div>
                                                 )}
-                                                {hasOwnPropertyAndNotNull(
-                                                    item,
-                                                    "pinswg_eventaddresstown"
-                                                ) && (
-                                                    <div>
-                                                        {
-                                                            item.pinswg_eventaddresstown
-                                                        }
-                                                    </div>
-                                                )}
-                                                {hasOwnPropertyAndNotNull(
-                                                    item,
-                                                    "pinswg_eventaddresscounty"
-                                                ) && (
-                                                    <div>
-                                                        {
-                                                            item.pinswg_eventaddresscounty
-                                                        }
-                                                    </div>
-                                                )}
-                                                {hasOwnPropertyAndNotNull(
-                                                    item,
-                                                    "pinswg_eventaddresscounty"
-                                                ) && (
-                                                    <div>
-                                                        {
-                                                            item.pinswg_eventaddresspostcode
-                                                        }
-                                                    </div>
-                                                )}
-                                            </div>
-                                            {/* type of event
-                            start date date of event - end date of event
-
-                            if virtual event no address showNoOfRecords
-                            show event address  */}
-                                            <div className="eventColumn">
                                                 {hasOwnPropertyAndNotNull(
                                                     item,
                                                     "pinswg_dateeventrequested"
@@ -171,25 +126,113 @@ const EventsDetails = (props) => {
                                             <div className="eventColumn">
                                                 {hasOwnPropertyAndNotNull(
                                                     item,
-                                                    [
-                                                        "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue",
-                                                    ]
+                                                    "pinswg_eventaddressline1"
                                                 ) && (
-                                                    <div>
-                                                        <b>
-                                                            {t(
-                                                                "case:event-type-of-event-label"
-                                                            )}
-                                                        </b>
-                                                        :{" "}
-                                                        {
-                                                            item[
-                                                                "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                            ]
-                                                        }
-                                                    </div>
+                                                    <>
+                                                        <div
+                                                            style={{
+                                                                display: "flex"
+                                                            }}
+                                                        >
+                                                            <b>
+                                                                {t(
+                                                                    "case:event-address-label"
+                                                                )}
+                                                            </b>
+                                                            :
+                                                            <div
+                                                                style={{
+                                                                    display:
+                                                                        "flex",
+                                                                    marginLeft:
+                                                                        "10px",
+                                                                    flexDirection:
+                                                                        "column"
+                                                                }}
+                                                            >
+                                                                {hasOwnPropertyAndNotNull(
+                                                                    item,
+                                                                    "pinswg_eventaddressline1"
+                                                                ) && (
+                                                                    <span>
+                                                                        {
+                                                                            item.pinswg_eventaddressline1
+                                                                        }
+                                                                    </span>
+                                                                )}
+                                                                {hasOwnPropertyAndNotNull(
+                                                                    item,
+                                                                    "pinswg_eventaddressline2"
+                                                                ) && (
+                                                                    <span>
+                                                                        {
+                                                                            item.pinswg_eventaddressline2
+                                                                        }
+                                                                    </span>
+                                                                )}
+                                                                {hasOwnPropertyAndNotNull(
+                                                                    item,
+                                                                    "pinswg_eventaddresstown"
+                                                                ) && (
+                                                                    <span>
+                                                                        {
+                                                                            item.pinswg_eventaddresstown
+                                                                        }
+                                                                    </span>
+                                                                )}
+                                                                {hasOwnPropertyAndNotNull(
+                                                                    item,
+                                                                    "pinswg_eventaddresscounty"
+                                                                ) && (
+                                                                    <span>
+                                                                        {
+                                                                            item.pinswg_eventaddresscounty
+                                                                        }
+                                                                    </span>
+                                                                )}
+                                                                {hasOwnPropertyAndNotNull(
+                                                                    item,
+                                                                    "pinswg_eventaddresscounty"
+                                                                ) && (
+                                                                    <span>
+                                                                        {
+                                                                            item.pinswg_eventaddresspostcode
+                                                                        }
+                                                                    </span>
+                                                                )}
+                                                            </div>
+                                                        </div>
+                                                    </>
                                                 )}
                                             </div>
+                                            {/* type of event
+                            start date date of event - end date of event
+
+                            if virtual event no address showNoOfRecords
+                            show event address  */}
+
+                                            {hasOwnPropertyAndNotNull(
+                                                item,
+                                                "pinswg_linktotheevent"
+                                            ) &&
+                                                isEventLiveNow(item) && (
+                                                    <div className="eventColumn">
+                                                        <a
+                                                            href={
+                                                                locale === "en"
+                                                                    ? item.pinswg_linktotheevent
+                                                                    : item.pinswg_linktotheeventstreamwelsh
+                                                            }
+                                                            className="govuk-link"
+                                                            target="_blank"
+                                                            rel="noopener noreferrer"
+                                                        >
+                                                            {t(
+                                                                "case:live-event-link"
+                                                            )}
+                                                        </a>
+                                                    </div>
+                                                )}
                                         </div>
                                     </>
                                 )
@@ -203,7 +246,7 @@ const EventsDetails = (props) => {
 
 const mapStateToProps = (state) => {
     return {
-        ...state,
+        ...state
     };
 };
 
@@ -214,7 +257,7 @@ const mapDispatchToProps = (dispatch) => {
         },
         setCurrentPage: (currentPage) => {
             dispatch(setCurrentPage(currentPage));
-        },
+        }
     };
 };
 

components/case/media.js

@@ -447,19 +447,19 @@ const MediaDetails = ({ mediaObj, whichTab, title, useNoCookie = true }) => {
     const { t } = useTranslation();
     const router = useRouter();
 
-    const mediaArr = mediaObj?.value || [];
+    const sourceMedia = mediaObj?.value;
     const isActive = whichTab ? whichTab === "case-media" : true;
 
     // Build list of playable items (publishable only)
     const videoItems = useMemo(() => {
         const isWelsh = router.locale === "cy";
 
-        return (mediaArr || [])
+        return (sourceMedia || [])
             .filter((x) => x?.pinswg_publishtoweb)
             .map((item) => {
                 const link = isWelsh
-                    ? item.pinswg_mediaLinkCY
-                    : item.pinswg_mediaLinkEN;
+                    ? item.pinswg_videoplatformurlwelsh
+                    : item.pinswg_videoplatformurl;
 
                 const videoId = extractYouTubeId(link);
                 if (!videoId) return null;
@@ -468,19 +468,19 @@ const MediaDetails = ({ mediaObj, whichTab, title, useNoCookie = true }) => {
                     key:
                         item.pinswg_documentid ||
                         item.pinswg_mediaid ||
-                        `${item.pinswg_name}-${videoId}`,
+                        `${item.pinswg_eventrecordingid}-${videoId}`,
                     videoId,
-                    name: item.pinswg_name || "Video",
+                    name: item.pinswg_eventrecordingname || "Video",
                     description: item.pinswg_description || "",
                     // If you later store duration in CRM, map it here (e.g. "03:42")
                     duration: item.pinswg_duration || null,
                     thumbnailHQ: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`,
                     thumbnailMax: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
-                    raw: item,
+                    raw: item
                 };
             })
             .filter(Boolean);
-    }, [mediaArr, router.locale]);
+    }, [sourceMedia, router.locale]);
 
     const [selectedIndex, setSelectedIndex] = useState(0);
 

components/case/representation/consultationAgent.js

@@ -2,22 +2,22 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
     RenderCondtionalRadioList,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const ConsultationAgent = (props) => {
@@ -36,9 +36,23 @@ const ConsultationAgent = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -63,63 +77,43 @@ const ConsultationAgent = (props) => {
         ));
         const required = (value) => (value ? undefined : "Required");
 
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
         return (
             <>
-                <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:consultation-from-an-agent-heading"
-                                    )}
-                                </h2>
-
-                                <label
-                                    className="govuk-label govuk-body-m"
-                                    htmlFor="representationType"
-                                >
-                                    {t(
-                                        "myrepresentations:kind-of-consultation-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") && (
+                <RepresentationTypeSelectorBlock
+                    t={t}
+                    headingText={t(
+                        "myrepresentations:consultation-from-an-agent-heading"
+                    )}
+                    kindLabelText={t(
+                        "myrepresentations:kind-of-consultation-label"
+                    )}
+                    isTypeSelected={isTypeConfirmed}
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                    optionsArr={appellantApplicantRepresentationArr}
+                />
+                {isTypeConfirmed && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -146,8 +140,7 @@ const ConsultationAgent = (props) => {
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
                                 <p className="govuk-body">
-                                    {formObj.representationForm.values
-                                        .representationType ==
+                                    {selectedRepresentationType ==
                                     "Consultation Response"
                                         ? t(
                                               "myrepresentations:enter-comment-label"
@@ -160,8 +153,7 @@ const ConsultationAgent = (props) => {
                                     className="govuk-fieldset"
                                     aria-describedby="commentBox-hint"
                                 >
-                                    {formObj.representationForm.values
-                                        .representationType ==
+                                    {selectedRepresentationType ==
                                         "Consultation Response" && (
                                         <div className="govuk-form-group">
                                             <Field
@@ -265,8 +257,7 @@ const ConsultationAgent = (props) => {
                         </div>
                     </>
                 )}
-                {typeof formObj.representationForm.values.representationType !=
-                    "undefined" && (
+                {isTypeConfirmed && (
                     <div className="govuk-grid-row">
                         <div className="govuk-button-group">
                             <button
@@ -275,7 +266,7 @@ const ConsultationAgent = (props) => {
                                 data-module="govuk-button"
                                 disabled={shouldDisableButton({
                                     props,
-                                    formObj,
+                                    formObj
                                 })}
                             >
                                 {t("common:continue-button")}
@@ -349,7 +340,7 @@ const mapDispatchToProps = (dispatch) => ({
 
     setFilesForRepresentations: (fileList) => {
         dispatch(setFilesForRepresentations(fileList));
-    },
+    }
 });
 
 export default connect(
@@ -359,6 +350,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(ConsultationAgent)
 );

components/case/representation/consultationAppellant.js

@@ -2,21 +2,21 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const ConsultationAppellant = (props) => {
@@ -35,9 +35,23 @@ const ConsultationAppellant = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     console.log(JSON.stringify(formObj) == "{}" ? "empty" : "value");
 
     if (JSON.stringify(formObj) != "{}") {
@@ -62,66 +76,47 @@ const ConsultationAppellant = (props) => {
                 index === self.findIndex((t) => t.name === value.name)
         );
 
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
         return (
             <>
-                <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:consultation-from-an-appellant-heading"
-                                    )}
-                                </h2>
-                                <label
-                                    className="govuk-label govuk-body-m"
-                                    htmlFor="representationType"
-                                >
-                                    {t(
-                                        "myrepresentations:kind-of-consultation-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") && (
+                <RepresentationTypeSelectorBlock
+                    t={t}
+                    headingText={t(
+                        "myrepresentations:consultation-from-an-appellant-heading"
+                    )}
+                    kindLabelText={t(
+                        "myrepresentations:kind-of-consultation-label"
+                    )}
+                    isTypeSelected={isTypeConfirmed}
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                    optionsArr={appellantApplicantRepresentationArr}
+                />
+                {isTypeConfirmed && (
                     <div className="govuk-grid-row">
                         <div className="govuk-form-group">
                             <p className="govuk-body">
-                                {formObj.representationForm.values
-                                    .representationType ==
+                                {selectedRepresentationType ==
                                 "Consultation Response"
                                     ? t("myrepresentations:enter-comment-label")
                                     : t(
@@ -132,8 +127,7 @@ const ConsultationAppellant = (props) => {
                                 className="govuk-fieldset"
                                 aria-describedby="commentBox-hint"
                             >
-                                {formObj.representationForm.values
-                                    .representationType ==
+                                {selectedRepresentationType ==
                                     "Consultation Response" && (
                                     <div className="govuk-form-group">
                                         <Field
@@ -233,8 +227,7 @@ const ConsultationAppellant = (props) => {
                     </div>
                 )}
 
-                {typeof formObj.representationForm.values.representationType !=
-                    "undefined" && (
+                {isTypeConfirmed && (
                     <div className="govuk-grid-row">
                         <div className="govuk-button-group">
                             <button
@@ -243,7 +236,7 @@ const ConsultationAppellant = (props) => {
                                 data-module="govuk-button"
                                 disabled={shouldDisableButton({
                                     props,
-                                    formObj,
+                                    formObj
                                 })}
                             >
                                 {t("common:continue-button")}
@@ -253,7 +246,6 @@ const ConsultationAppellant = (props) => {
                                 onClick={() => {
                                     setRepresentationCapacity();
                                     props.updateField(
-                                        "representationForm",
                                         "representationType",
                                         ""
                                     );
@@ -321,7 +313,7 @@ const mapDispatchToProps = (dispatch) => {
 
         setFilesForRepresentations: (fileList) => {
             dispatch(setFilesForRepresentations(fileList));
-        },
+        }
     };
 };
 
@@ -332,6 +324,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(ConsultationAppellant)
 );

components/case/representation/consultationInterestedPartyPerson.js

@@ -2,22 +2,22 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
     RenderCondtionalRadioList,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const ConsultationInterestedPartyPerson = (props) => {
@@ -35,11 +35,25 @@ const ConsultationInterestedPartyPerson = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const required = (value) => (value ? undefined : "Required");
 
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        props.currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -62,67 +76,46 @@ const ConsultationInterestedPartyPerson = (props) => {
                 {file.path} - {file.size} bytes
             </li>
         ));
+
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
         return (
             <>
-                <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:consultation-from-an-interested-person-heading"
-                                    )}
-                                </h2>
-
-                                <label
-                                    className="govuk-label govuk-body-m"
-                                    htmlFor="representationType"
-                                >
-                                    {t(
-                                        "myrepresentations:kind-of-consultation-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>
-                        )}
-                    </div>
-                </div>
-                {(typeof props.representationType != "undefined" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
+                <RepresentationTypeSelectorBlock
+                    t={t}
+                    headingText={t(
+                        "myrepresentations:consultation-from-an-interested-person-heading"
+                    )}
+                    kindLabelText={t(
+                        "myrepresentations:kind-of-consultation-label"
+                    )}
+                    isTypeSelected={isTypeConfirmed}
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                    optionsArr={interestedPersonRepresentationArr}
+                    validate={[required]}
+                    errorMsg={t("myrepresentations:select-an-option-label")}
+                />
+                {isTypeConfirmed && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -134,7 +127,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                                         t(
                                             "myrepresentations:questionnaire-yes"
                                         ),
-                                        t("myrepresentations:questionnaire-no"),
+                                        t("myrepresentations:questionnaire-no")
                                     ]}
                                     id="representationOnBehalfOf"
                                     className="govuk-radios__input"
@@ -154,8 +147,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
                                 <p className="govuk-body">
-                                    {formObj.representationForm.values
-                                        .representationType ==
+                                    {selectedRepresentationType ==
                                     "Consultation Response"
                                         ? t(
                                               "myrepresentations:enter-comment-label"
@@ -169,8 +161,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                                     aria-describedby="commentBox-hint"
                                 >
                                     {" "}
-                                    {formObj.representationForm.values
-                                        .representationType ==
+                                    {selectedRepresentationType ==
                                         "Consultation Response" && (
                                         <div className="govuk-form-group">
                                             <Field
@@ -274,8 +265,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                         </div>
                     </>
                 )}
-                {typeof formObj.representationForm.values.representationType !=
-                    "undefined" && (
+                {isTypeConfirmed && (
                     <div className="govuk-grid-row">
                         <div className="govuk-button-group">
                             <button
@@ -284,7 +274,7 @@ const ConsultationInterestedPartyPerson = (props) => {
                                 data-module="govuk-button"
                                 disabled={shouldDisableButton({
                                     props,
-                                    formObj,
+                                    formObj
                                 })}
                             >
                                 {t("common:continue-button")}
@@ -363,7 +353,7 @@ const mapDispatchToProps = (dispatch) => ({
         dispatch(change(form, field, newValue)),
     setFilesForRepresentations: (fileList) => {
         dispatch(setFilesForRepresentations(fileList));
-    },
+    }
 });
 
 export default connect(
@@ -373,6 +363,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(ConsultationInterestedPartyPerson)
 );

components/case/representation/elements/RepresentationActionButtons.js

@@ -0,0 +1,42 @@
+const RepresentationActionButtons = ({
+    t,
+    locale,
+    isSaving,
+    isContinueDisabled,
+    onSaveExit
+}) => {
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-button-group">
+                <button
+                    type="submit"
+                    className="govuk-button"
+                    data-module="govuk-button"
+                    disabled={isContinueDisabled}
+                >
+                    {t("common:continue-button")}
+                </button>
+
+                {isSaving ? (
+                    <span className=" progress-save-active">
+                        {locale == "cy" ? "Nôl data" : "Saving data"}
+                        <img
+                            className="data-loading-icon"
+                            src="/assets/images/loading.gif"
+                            alt={locale == "cy" ? "Nôl data" : "Saving data"}
+                        />
+                    </span>
+                ) : (
+                    <button
+                        className="govuk-button progress-save "
+                        onClick={onSaveExit}
+                    >
+                        {t("common:save-exit-button")}
+                    </button>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default RepresentationActionButtons;

components/case/representation/elements/RepresentationTypeSelectorBlock.js

@@ -0,0 +1,205 @@
+import { Field } from "redux-form";
+import router from "next/router";
+import Link from "next/link";
+
+const getRepresentationTypeHint = (option, t) => {
+    const map = {
+        "Statement": t("myrepresentations:rep-type-statement-hint"),
+        "Final comments": t("myrepresentations:rep-type-final-comments-hint"),
+        "Questionnaire": t("myrepresentations:rep-type-questionnaire-hint"),
+        "Consultation Response": t(
+            "myrepresentations:rep-type-consultation-hint"
+        ),
+        "Local Impact Report": t("myrepresentations:rep-type-lir-hint"),
+        "Marine Impact Report": t("myrepresentations:rep-type-mir-hint")
+    };
+
+    return map[option] || "";
+};
+
+const getRepresentationTypeLabel = (option) => {
+    if (router.locale !== "cy") {
+        return option;
+    }
+
+    if (option === "Questionnaire") {
+        return "Holiadur";
+    }
+
+    if (option === "Statement") {
+        return "Datganiad";
+    }
+
+    if (option === "Final comments") {
+        return "Sylwadau terfynol";
+    }
+
+    return option;
+};
+
+const RenderRepresentationTypeRadioList = ({
+    name,
+    optionsArr,
+    errorMsg,
+    onRepresentationTypeChange,
+    input,
+    meta: { touched, error }
+}) => {
+    return (
+        <div
+            className={
+                touched && error
+                    ? "govuk-form-group govuk-form-group--error"
+                    : "govuk-form-group"
+            }
+        >
+            {touched && error && (
+                <span id={`${name}-error`} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span>{" "}
+                    {errorMsg}
+                </span>
+            )}
+
+            <div className="govuk-radios govuk-radios--small">
+                {optionsArr.map((option, index) => {
+                    const optionId = `${name}_${index}`;
+                    const hintId = `${optionId}-hint`;
+
+                    return (
+                        <div
+                            key={option.value || optionId}
+                            className="govuk-radios__item representation-type-option"
+                        >
+                            <input
+                                className="govuk-radios__input"
+                                id={optionId}
+                                name={input.name}
+                                type="radio"
+                                value={option.value}
+                                checked={input.value === option.value}
+                                onChange={() => input.onChange(option.value)}
+                                aria-describedby={
+                                    option.hint ? hintId : undefined
+                                }
+                            />
+
+                            <label
+                                className="govuk-label govuk-radios__label  govuk-!-font-weight-bold "
+                                htmlFor={optionId}
+                            >
+                                {option.label}
+
+                                {option.hint && (
+                                    <div
+                                        id={hintId}
+                                        className="govuk-hint govuk-!-margin-top-2"
+                                    >
+                                        {option.hint}
+                                    </div>
+                                )}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+const RepresentationTypeSelectorBlock = ({
+    t,
+    headingText,
+    kindLabelText,
+    isTypeSelected,
+    selectedTypeDisplay,
+    representationType,
+    setTypeSelectionConfirmed,
+    onRepresentationTypeChange,
+    onTypeSelectionConfirmed,
+    optionsArr,
+    validate,
+    errorMsg
+}) => {
+    const enhancedOptions = (optionsArr || [])
+        .filter((option) => option && option !== "Select...")
+        .map((option) => ({
+            value: option,
+            label: getRepresentationTypeLabel(option),
+            hint: getRepresentationTypeHint(option, t)
+        }));
+
+    const hasSelectableOptions = enhancedOptions.length > 0;
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-form-group">
+                {!isTypeSelected ? (
+                    <>
+                        <h2 className="govuk-heading-m ">{headingText}</h2>
+
+                        <label
+                            className="govuk-label govuk-body-m govuk-!-margin-bottom-2"
+                            htmlFor="representationType"
+                        >
+                            {kindLabelText}
+                        </label>
+
+                        {hasSelectableOptions ? (
+                            <>
+                                <Field
+                                    name="representationType"
+                                    component={
+                                        RenderRepresentationTypeRadioList
+                                    }
+                                    onRepresentationTypeChange={
+                                        onRepresentationTypeChange
+                                    }
+                                    validate={validate}
+                                    optionsArr={enhancedOptions}
+                                    errorMsg={errorMsg}
+                                />
+
+                                <button
+                                    type="button"
+                                    className="govuk-button"
+                                    data-module="govuk-button"
+                                    disabled={!representationType}
+                                    onClick={() => {
+                                        if (representationType) {
+                                            setTypeSelectionConfirmed(true);
+                                            onTypeSelectionConfirmed &&
+                                                onTypeSelectionConfirmed(
+                                                    representationType
+                                                );
+                                        }
+                                    }}
+                                >
+                                    {t("common:continue-button")}
+                                </button>
+                            </>
+                        ) : (
+                            <>
+                                <p className="govuk-body">
+                                    {t(
+                                        "myrepresentations:representation-type-unavailable-label"
+                                    )}
+                                </p>
+                                <Link className="govuk-link" href="/">
+                                    {t(
+                                        "myrepresentations:return-home-link-label"
+                                    )}
+                                </Link>
+                            </>
+                        )}
+                    </>
+                ) : (
+                    <label className="govuk-label govuk-body-m">
+                        {t("myrepresentations:representation-type")}:{" "}
+                        {selectedTypeDisplay}
+                    </label>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default RepresentationTypeSelectorBlock;

components/case/representation/index.js

@@ -33,12 +33,39 @@ import RepLPACapacitySelection from "./representationLPACapacitySelection";
 import RepLandOwner from "./representationLandowner";
 import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
 import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
+import RepresentationFlowFormStage from "./shell/RepresentationFlowFormStage";
+import {
+    getQuestionnaireNextSection,
+    resolveJourneyStageFlags,
+    resolveRepresentationControlKey,
+    resolveSubmitTransition
+} from "./utils/stepResolution";
+import {
+    findDetailsObjForSubmit,
+    findDetailsObjForView,
+    findResultsObjForCurrentReference,
+    resolveInitialCaseDataSources,
+    resolveSubmitCaseDetailsSource
+} from "./utils/dataResolution";
+import {
+    buildRepresentationUpdateBody,
+    buildSubmitEnrichedValues,
+    runFinalisationSequence
+} from "./utils/finalisationBoundary";
+import {
+    buildRepresentationContext,
+    buildRepsArrFromContext
+} from "./utils/buildRepsArrRules";
 
 let MakeRepresentation = (props) => {
     let { t } = useTranslation();
 
     const [savingStatus, setSavingStatus] = useState(false);
     const [finaliseAppealProcess, setFinaliseAppealProcess] = useState(false);
+    const [representationTypeConfirmed, setRepresentationTypeConfirmed] =
+        useState(
+            !!props?.currentView?.caseReference?.repDetails?.representationType
+        );
 
     //const [questionnaireCount, setQuestionnaireCount] = useState(0);
 
@@ -105,6 +132,11 @@ let MakeRepresentation = (props) => {
             : false;
 
     const isNRW = currentView.caseReference?.isNRW;
+    const { showCheckStage } = resolveJourneyStageFlags({
+        "representationSubmit": currentView.representationSubmit,
+        "representationSubmitConfirmation":
+            currentView.representationSubmitConfirmation
+    });
 
     const setRepFileName = (values) => {
         if (
@@ -225,9 +257,14 @@ let MakeRepresentation = (props) => {
 
     var detailsObj = {};
 
+    // const isAppellant =
+    //     props.props.accountDetails.accountDetails.pinswg_typeofinvolvement ===
+    //     846040001;
+
     const isAppellant =
-        props.props.accountDetails.accountDetails.pinswg_typeofinvolvement ===
-        846040001;
+        props.props.accountDetails.accountDetails.emailaddress1 ==
+        props.searchResultsObj?.searchResultsObj?.value[0].customerid_contact
+            .emailaddress1;
 
     const capacityOptionsArr = [];
 
@@ -250,309 +287,54 @@ let MakeRepresentation = (props) => {
     const isEditState = router.query.state === "edit";
     const hasState = router.query.hasOwnProperty("state");
 
-    const getCaseDetailsObj = () => {
-        if (hasState) {
-            return isEditState
-                ? props.props.myRepresentations.myRepresentations
-                : props.props.searchResultsObj.searchDetailsObj;
-        }
-        return props.currentType === "watchedCases"
-            ? props.props.watchedCases.watchedCasesDetails
-            : props.props.searchResultsObj.searchDetailsObj;
-    };
+    const { caseDetailsSource, caseResultsSource } =
+        resolveInitialCaseDataSources({
+            hasState,
+            isEditState,
+            currentType: props.currentType,
+            myRepresentations: props.props.myRepresentations.myRepresentations,
+            searchDetailsObj: props.props.searchResultsObj.searchDetailsObj,
+            searchResultsObj: props.props.searchResultsObj.searchResultsObj,
+            watchedCasesDetails: props.props.watchedCases.watchedCasesDetails
+        });
 
-    const getCaseResultsObj = () => {
-        if (hasState) {
-            return isEditState
-                ? props.props.myRepresentations.myRepresentations
-                : props.props.searchResultsObj.searchResultsObj;
-        }
-        return props.currentType === "watchedCases"
-            ? props.props.watchedCases.watchedCasesDetails
-            : props.props.searchResultsObj.searchResultsObj;
-    };
-
-    const setCaseDetailsObj = getCaseDetailsObj();
-    const setCaseResultsObj = getCaseResultsObj();
-
-    let resultsObj = jsonpath({
-        path: `$..[?(@ && @.ticketnumber=="${currentView.caseReference.currentReference}")]`,
-        json: setCaseResultsObj,
-        eval: true
-    })[0];
+    let resultsObj = findResultsObjForCurrentReference({
+        "currentReference": currentView.caseReference.currentReference,
+        "caseResultsSource": caseResultsSource
+    });
 
     // let detailsObj;
 
-    if (hasState && isEditState) {
-        detailsObj = jsonpath({
-            path: `$..[?(@ && @.repfile_name=="${router.query.created}")]`,
-            json: setCaseDetailsObj,
-            eval: true
-        })[0];
-    } else {
-        detailsObj = jsonpath({
-            path: `$..[?(@ && @.ticketnumber=="${currentView.caseReference.ticketnumber}")]`,
-            json: setCaseDetailsObj,
-            eval: true
-        })[0];
-    }
+    detailsObj = findDetailsObjForView({
+        hasState,
+        isEditState,
+        "queryCreated": router.query.created,
+        "ticketnumber": currentView.caseReference.ticketnumber,
+        "caseDetailsSource": caseDetailsSource
+    });
 
     const safeDetailsObj = detailsObj || {};
     const safeResultsObj = resultsObj || {};
 
-    // blocked out build reps arr for refactoring
-    // const buildRepsArr = (detailsObj) => {
-    //     const buildArr = [];
-    //     const todaysDate = new Date();
-
-    //     const isDNS = appealType === 846040011;
-    //     const isSIPS = appealType === 846040002;
-    //     const isIP = true;
-
-    //     const isAppellant =
-    //         props.props.accountDetails.accountDetails
-    //             .pinswg_typeofinvolvement === 846040001;
-
-    //     // Determine key dates based on appeal type
-    //     const startDate = new Date(
-    //         isDNS
-    //             ? detailsObj.pinswg_applicationacceptedasvalid
-    //             : detailsObj.pinswg_startdate || detailsObj.pinswg_startdates
-    //     );
-
-    //     const questionnaireDate = new Date(
-    //         isDNS
-    //             ? detailsObj.pinswg_endofrepresentationperiod
-    //             : detailsObj.pinswg_questionnaireduedate
-    //     );
-    //     questionnaireDate.setHours(23, 59, 59, 999);
-
-    //     const finalCommentsDate = new Date(
-    //         isDNS
-    //             ? detailsObj.pinswg_endofrepresentationperiod
-    //             : detailsObj.pinswg_finalcommentsduedate
-    //     );
-    //     finalCommentsDate.setHours(23, 59, 59, 999);
-
-    //     const statementDueDate = new Date(
-    //         isDNS
-    //             ? detailsObj.pinswg_endofrepresentationperiod
-    //             : detailsObj.pinswg_statementduedate ||
-    //                   detailsObj.pinswg_statementsduedate
-    //     );
-    //     statementDueDate.setHours(23, 59, 59, 999);
-
-    //     // Shared condition
-    //     const isWithin = (start, end) =>
-    //         todaysDate >= start && todaysDate <= end;
-    //     const notAppeal = (...types) => !types.includes(appealType);
-
-    //     // Questionnaire
-    //     if (
-    //         isLPA &&
-    //         notAppeal(846040019, 846040011, 846040015, 846040016) &&
-    //         isWithin(startDate, finalCommentsDate)
-    //     ) {
-    //         buildArr.push("Questionnaire");
-    //     }
-
-    //     // DNS LPA Documents
-    //     if (
-    //         isLPA &&
-    //         isDNS &&
-    //         appealType !== 846040019 &&
-    //         isWithin(startDate, finalCommentsDate)
-    //     ) {
-    //         buildArr.push("Local Impact Report", "Statement");
-    //     }
-
-    //     // Non-DNS Statement
-    //     if (
-    //         !isDNS &&
-    //         appealType !== 846040004 &&
-    //         isWithin(startDate, statementDueDate)
-    //     ) {
-    //         buildArr.push("Statement");
-    //     }
-
-    //     // DNS Non-LPA Statement
-    //     if (isDNS && !isLPA && isWithin(startDate, statementDueDate)) {
-    //         buildArr.push("Statement");
-    //     }
-
-    //     // Final Comments
-    //     const isSpecialistNonHearing =
-    //         currentView.caseReference.specialistProcess !== 846040001;
-
-    //     if (
-    //         (appealType !== 846040004 ||
-    //             (appealType === 846040015 && isSpecialistNonHearing)) &&
-    //         isWithin(statementDueDate, finalCommentsDate)
-    //     ) {
-    //         buildArr.push("Final comments");
-    //     }
-
-    //     if (
-    //         appealType === 846040004 &&
-    //         isSpecialistNonHearing &&
-    //         isWithin(statementDueDate, finalCommentsDate)
-    //     ) {
-    //         buildArr.push("Final comments");
-    //     }
-
-    //     // Remove "Statement" for LPA Advert Part 3 (no statement)
-    //     if (
-    //         isLPA &&
-    //         appealType === 846040018 &&
-    //         currentView.caseReference.specialistProcess === 846040000
-    //     ) {
-    //         const index = buildArr.indexOf("Statement");
-    //         if (index !== -1) buildArr.splice(index, 1);
-    //     }
-
-    //     // SIPS-related documents
-    //     if (isSIPS) {
-    //         const capacity = repCapacityType();
-    //         if (capacity === "appellant") {
-    //             buildArr.push("Consultation Response");
-    //         } else {
-    //             buildArr.push("Consultation Response", "Local Impact Report");
-    //         }
-
-    //         if (isNRW) {
-    //             buildArr.push("Marine Impact Report");
-    //         }
-    //     }
-
-    //     return buildArr;
-    // };
-
     const buildRepsArr = (detailsObj) => {
-        const buildArr = [];
-        const todaysDate = new Date();
+        const isCaseOwner =
+            props.props.accountDetails.accountDetails.emailaddress1 ==
+            props.searchResultsObj?.searchResultsObj?.value[0]
+                .customerid_contact.emailaddress1;
 
-        const isDNS = appealType === 846040011;
-        const isSIPS = appealType === 846040002;
-        const specialistProcess = currentView.caseReference.specialistProcess;
+        const ctx = buildRepresentationContext({
+            detailsObj,
+            appealType,
+            specialistProcess: currentView.caseReference.specialistProcess,
+            involvementType:
+                props.props?.accountDetails?.accountDetails
+                    ?.pinswg_typeofinvolvement,
+            selectedCapacity: repCapacityType(),
+            isCaseOwner,
+            isNRW
+        });
 
-        const isSpecialistNonHearing = specialistProcess !== 846040001;
-
-        const involvementType =
-            props.props?.accountDetails?.accountDetails
-                ?.pinswg_typeofinvolvement;
-
-        const isAppellant = involvementType === 846040001;
-        const isAgent = involvementType === 846040000;
-        const isIP = involvementType === 846040061;
-        //const isLPA = involvementType === 846040000;
-
-        const startDate = new Date(
-            isDNS
-                ? detailsObj.pinswg_applicationacceptedasvalid
-                : detailsObj.pinswg_startdate || detailsObj.pinswg_startdates
-        );
-
-        const finalCommentsDate = new Date(
-            isDNS
-                ? detailsObj.pinswg_endofrepresentationperiod
-                : detailsObj.pinswg_finalcommentsduedate
-        );
-        finalCommentsDate.setHours(23, 59, 59, 999);
-
-        const statementDueDate = new Date(
-            isDNS
-                ? detailsObj.pinswg_endofrepresentationperiod
-                : detailsObj.pinswg_statementduedate ||
-                      detailsObj.pinswg_statementsduedate
-        );
-        statementDueDate.setHours(23, 59, 59, 999);
-
-        const isWithin = (start, end) =>
-            todaysDate >= start && todaysDate <= end;
-
-        const addRep = (value) => {
-            if (!buildArr.includes(value)) {
-                buildArr.push(value);
-            }
-        };
-
-        const canAddQuestionnaire =
-            isLPA &&
-            ![846040019, 846040011, 846040015, 846040016].includes(
-                appealType
-            ) &&
-            isWithin(startDate, finalCommentsDate);
-
-        if (canAddQuestionnaire) {
-            addRep("Questionnaire");
-        }
-
-        const isLpaAdvertPart3NoStatement =
-            isLPA &&
-            appealType === 846040018 &&
-            specialistProcess === 846040000;
-
-        const canAddDnsLpaDocs =
-            isLPA &&
-            isDNS &&
-            appealType !== 846040019 &&
-            !isAppellant &&
-            isWithin(startDate, finalCommentsDate);
-
-        if (canAddDnsLpaDocs) {
-            addRep("Local Impact Report");
-            addRep("Statement");
-        }
-
-        const canAddStatementForNonDns =
-            !isDNS &&
-            appealType !== 846040004 &&
-            !isLpaAdvertPart3NoStatement &&
-            !isAppellant &&
-            isWithin(startDate, statementDueDate);
-
-        if (canAddStatementForNonDns) {
-            addRep("Statement");
-        }
-
-        const canAddStatementForDnsNonLpa =
-            isDNS &&
-            !isLPA &&
-            !isAppellant &&
-            isWithin(startDate, statementDueDate);
-
-        if (canAddStatementForDnsNonLpa) {
-            addRep("Statement");
-        }
-
-        const canSubmitFinalComments = isAppellant || isAgent || isIP || isLPA;
-
-        const canAddFinalComments =
-            canSubmitFinalComments &&
-            isWithin(statementDueDate, finalCommentsDate) &&
-            (appealType !== 846040004 || isSpecialistNonHearing);
-
-        // IP and Agents and LPA can do final comments.
-
-        if (canAddFinalComments) {
-            addRep("Final comments");
-        }
-
-        if (isSIPS) {
-            const capacity = repCapacityType();
-
-            addRep("Consultation Response");
-
-            if (capacity !== "appellant") {
-                addRep("Local Impact Report");
-            }
-
-            if (isNRW) {
-                addRep("Marine Impact Report");
-            }
-        }
-
-        return buildArr;
+        return buildRepsArrFromContext(ctx);
     };
 
     const repCapacityType = () => {
@@ -583,22 +365,22 @@ let MakeRepresentation = (props) => {
             updateRepresentation,
             setSavingStatus,
             savingStatus,
-            setCurrentReference
+            setCurrentReference,
+            onRepresentationTypeChange: () =>
+                setRepresentationTypeConfirmed(false),
+            onTypeSelectionConfirmed: () => setRepresentationTypeConfirmed(true)
         };
 
-        const getNormalizedCapacity = () => {
-            const rawCapacity =
-                currentView.representationCapacity ||
-                currentView.caseReference?.repDetails?.representationCapacity ||
-                "false";
-            return rawCapacity.toLowerCase();
-        };
+        const { controlKey } = resolveRepresentationControlKey({
+            "isLPA": isLPA,
+            "representationCapacity": currentView.representationCapacity,
+            "repDetailsCapacity":
+                currentView.caseReference?.repDetails?.representationCapacity,
+            "appealType": appealType,
+            "normalizeCapacity": normalizeCapacity
+        });
 
-        if (
-            isLPA &&
-            (!currentView.representationCapacity ||
-                currentView.representationCapacity === "")
-        ) {
+        if (controlKey === "lpa-capacity-selection") {
             return (
                 <RepLPACapacitySelection
                     {...commonProps}
@@ -616,10 +398,8 @@ let MakeRepresentation = (props) => {
             );
         }
 
-        const capacity = normalizeCapacity(getNormalizedCapacity());
-
-        switch (capacity) {
-            case "appellant": {
+        switch (controlKey) {
+            case "capacity-appellant": {
                 const Component =
                     appealType === 846040002
                         ? ConsultationAppellant
@@ -634,7 +414,7 @@ let MakeRepresentation = (props) => {
                 );
             }
 
-            case "lpa": {
+            case "capacity-lpa": {
                 return (
                     <RepLPA
                         {...commonProps}
@@ -650,7 +430,7 @@ let MakeRepresentation = (props) => {
                 );
             }
 
-            case "agent": {
+            case "capacity-agent": {
                 const Component =
                     appealType === 846040002 ? ConsultationAgent : RepAgent;
                 return (
@@ -663,7 +443,7 @@ let MakeRepresentation = (props) => {
                 );
             }
 
-            case "interestedparty": {
+            case "capacity-interestedparty": {
                 const Component =
                     appealType === 846040002
                         ? ConsultationInterestedPartyPerson
@@ -678,7 +458,7 @@ let MakeRepresentation = (props) => {
                 );
             }
 
-            case "landowner": {
+            case "capacity-landowner": {
                 return (
                     <RepLandOwner
                         {...commonProps}
@@ -879,24 +659,10 @@ let MakeRepresentation = (props) => {
                 ]
         };
 
-        let updateBody = setRepFileName(formattedValues);
-
-        // Clean and sanitize the body
-        const sanitizedBody = Object.entries(updateBody).reduce(
-            (acc, [key, val]) => {
-                if (val !== null && val !== undefined && !key.startsWith("_")) {
-                    acc[key] = val;
-                }
-                return acc;
-            },
-            {}
-        );
-
-        // Normalize "Yes"/"No" to booleans
-        const stringified = JSON.stringify(sanitizedBody)
-            .replace(/:"Yes"/g, ":true")
-            .replace(/:"No"/g, ":false");
-        updateBody = JSON.parse(stringified);
+        const updateBody = buildRepresentationUpdateBody({
+            formattedValues,
+            setRepFileName
+        });
 
         const sendEmailIfNeeded = () => {
             if (sendSavedEmail) {
@@ -957,24 +723,20 @@ let MakeRepresentation = (props) => {
             return;
         }
 
-        // Determine case data source
-        const getCaseDetailsSource = () => {
-            if (router.query?.state === "edit") {
-                return props.props.myRepresentations.myRepresentations;
-            }
-            return props.currentType === "watchedCases"
-                ? props.props.watchedCases.watchedCasesDetails
-                : props.props.searchResultsObj.searchDetailsObj;
-        };
-
-        const setCaseDetailsObj = getCaseDetailsSource();
+        const caseDetailsSource = resolveSubmitCaseDetailsSource({
+            "isEditState": router.query?.state === "edit",
+            "currentType": props.currentType,
+            "myRepresentations":
+                props.props.myRepresentations.myRepresentations,
+            "watchedCasesDetails": props.props.watchedCases.watchedCasesDetails,
+            "searchDetailsObj": props.props.searchResultsObj.searchDetailsObj
+        });
 
         // Find correct case details
-        let detailsObj = jsonpath({
-            path: `$..[?(@ && @.ticketnumber=="${ticketnumber}")]`,
-            json: setCaseDetailsObj,
-            eval: true
-        })[0];
+        let detailsObj = findDetailsObjForSubmit({
+            ticketnumber,
+            caseDetailsSource
+        });
 
         // Cancel submit status if editing
         if (router.query?.state === "edit") {
@@ -988,23 +750,6 @@ let MakeRepresentation = (props) => {
         ) {
             const formValues = formObj.representationForm.values;
 
-            const buildSiteAddress = () => {
-                const {
-                    pinswg_siteaddressline1,
-                    pinswg_siteaddressline2,
-                    pinswg_siteaddresstown,
-                    pinswg_siteaddresspostcode
-                } = detailsObj;
-                return [
-                    pinswg_siteaddressline1,
-                    pinswg_siteaddressline2,
-                    pinswg_siteaddresstown,
-                    pinswg_siteaddresspostcode
-                ]
-                    .filter(Boolean)
-                    .join(" ");
-            };
-
             const representationCapacity =
                 router.query?.state === "edit"
                     ? props.props.currentView.representationCapacity
@@ -1012,55 +757,19 @@ let MakeRepresentation = (props) => {
                       ? "LPA"
                       : values.representationCapacity;
 
-            Object.assign(values, {
-                ...formValues,
-                containerID: props.props.accountDetails.containerID,
-                appealType:
-                    appealType || caseReferenceObj.repDetails.appealType,
-                incidentID:
-                    caseReferenceObj.incidentid ||
-                    caseReferenceObj.repDetails.incidentid,
-                caseRef: caseReferenceObj.currentReference,
-                casereference: caseReferenceObj.currentReference,
-                pinswg_questionnaireduedate:
-                    detailsObj.pinswg_questionnaireduedate,
-                pinswg_endofrepresentationperiod:
-                    detailsObj.pinswg_endofrepresentationperiod,
-                pinswg_applicationacceptedasvalid:
-                    detailsObj.pinswg_applicationacceptedasvalid,
-                pinswg_statementduedate: detailsObj.pinswg_statementduedate,
-                pinswg_statementsduedate: detailsObj.pinswg_statementsduedate,
-                pinswg_finalcommentsduedate:
-                    detailsObj.pinswg_finalcommentsduedate,
-                pinswg_name: caseReferenceObj.currentReference,
-                firstname: accountDetails.firstname,
-                lastname: accountDetails.lastname,
-                emailAddress: accountDetails.emailaddress1,
-                siteAddress: buildSiteAddress(),
-                pinswg_siteaddressline1: detailsObj.pinswg_siteaddressline1,
-                pinswg_siteaddressline2: detailsObj.pinswg_siteaddressline2,
-                pinswg_siteaddresstown: detailsObj.pinswg_siteaddresstown,
-                pinswg_siteaddresspostcode:
-                    detailsObj.pinswg_siteaddresspostcode,
-                pinswg_lpareference: resultsObj?.pinswg_lpareference,
-                _pinswg_appellant_value: detailsObj._pinswg_appellant_value,
-                "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue":
-                    detailsObj[
-                        "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
-                    ],
-                _pinswg_localplanningauthority_value:
-                    detailsObj._pinswg_localplanningauthority_value ||
-                    detailsObj._pinswg_associatedlpa_value,
-                "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue":
-                    detailsObj[
-                        "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue"
-                    ] ||
-                    detailsObj[
-                        "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                    ],
-                representationCapacity,
-                locale: router.locale
-            });
+            Object.assign(
+                values,
+                buildSubmitEnrichedValues({
+                    formValues,
+                    accountDetails,
+                    appealType,
+                    caseReferenceObj,
+                    detailsObj,
+                    resultsObj,
+                    representationCapacity,
+                    locale: router.locale
+                })
+            );
         }
 
         const shouldSubmit = !currentView.representationSubmit;
@@ -1078,19 +787,20 @@ let MakeRepresentation = (props) => {
                     : normalizeCapacity(values.representationCapacity);
                 setRepresentationCapacity(capacity);
             } else {
-                if (repType === "Questionnaire") {
-                    if (
-                        questionnaireCount !== 0 &&
-                        showQuestionnaireSection < questionnaireCount
-                    ) {
-                        setShowQuestionnaireSection(
-                            showQuestionnaireSection + 1
-                        );
-                        updateRepresentation(values, false, false);
-                    } else {
-                        updateRepresentation(values, false, false);
-                        setRepresentationSubmit(true);
-                    }
+                const submitTransition = resolveSubmitTransition({
+                    "representationType": repType,
+                    "showQuestionnaireSection": showQuestionnaireSection,
+                    "questionnaireCount": questionnaireCount
+                });
+
+                if (submitTransition === "advanceQuestionnaire") {
+                    setShowQuestionnaireSection(
+                        getQuestionnaireNextSection(
+                            showQuestionnaireSection,
+                            questionnaireCount
+                        )
+                    );
+                    updateRepresentation(values, false, false);
                 } else {
                     updateRepresentation(values, false, false);
                     setRepresentationSubmit(true);
@@ -1113,19 +823,19 @@ let MakeRepresentation = (props) => {
             }
 
             // Final PDF & upload
-            setFinaliseAppealProcess(true);
-            generateRepPDF(
+            runFinalisationSequence({
                 values,
-                props.props.accountDetails.containerID,
-                props.currentView.caseReference.currentReference
-            ).then((data) => {
+                containerID: props.props.accountDetails.containerID,
+                currentReference:
+                    props.currentView.caseReference.currentReference,
+                setFinaliseAppealProcess,
+                generateRepPDF,
+                updateLinks,
+                uploadRepresentationFiles,
+                setRepresentationSubmit,
+                setRepresentationSubmitConfirmation
+            }).then((data) => {
                 console.log(data, "");
-                if (data.status === "success") {
-                    values = updateLinks(values);
-                    uploadRepresentationFiles(values);
-                    setRepresentationSubmit(true);
-                    setRepresentationSubmitConfirmation(true);
-                }
             });
         }
     };
@@ -1164,15 +874,29 @@ let MakeRepresentation = (props) => {
         // Prepare data object for upload
         const dataObj = cleanedValues;
 
+        const caseFolderReference =
+            props.caseReference ||
+            dataObj.ticketnumber ||
+            currentView?.caseReference?.ticketnumber ||
+            currentView?.caseReference?.currentReference ||
+            dataObj.caseRef ||
+            "";
+
         // Update links on values
         const updatedValues = updateLinks(cleanedValues);
 
+        const resolvedContainerID =
+            updatedValues.containerID ||
+            dataObj.containerID ||
+            props?.props?.accountDetails?.containerID ||
+            props?.props?.accountDetails?.accountDetails?.containerID;
+
         // Perform file upload and return the promise
         return uploadRepFiles(
             dataObj,
             [{}],
-            updatedValues.containerID,
-            `${props.caseReference}/${dataObj.repfile_name}`
+            resolvedContainerID,
+            `${caseFolderReference}/${dataObj.repfile_name}`
         );
     };
 
@@ -1180,7 +904,7 @@ let MakeRepresentation = (props) => {
 
     const isQuestionnaire =
         formObj?.representationForm?.values?.representationType ===
-        "Questionnaire";
+            "Questionnaire" && representationTypeConfirmed;
 
     const appealIsConsultation = appealType === 846040002;
     const appealIsLocalImpact =
@@ -1252,7 +976,7 @@ let MakeRepresentation = (props) => {
     return (
         <div>
             <form onSubmit={handleSubmit(onHandleSubmit)}>
-                {currentView.representationSubmit ? (
+                {showCheckStage ? (
                     <RepCompleteSubmit
                         formObj={formObj}
                         capacityOptionsArr={capacityOptionsArr}
@@ -1279,61 +1003,22 @@ let MakeRepresentation = (props) => {
                         docsOffline={docsOffline}
                     />
                 ) : (
-                    <>
-                        <h1 className="govuk-heading-l">
-                            {appealIsConsultation
-                                ? t(
-                                      "myrepresentations:make-a-consultation-on-label"
-                                  )
-                                : t(
-                                      "myrepresentations:make-a-representation-on-label"
-                                  )}{" "}
-                            {currentView.caseReference.currentReference}{" "}
-                        </h1>
-                        <div id="rep-form">
-                            <div className="govuk-grid-column-three-quarters wgForm">
-                                {whichControl()}
-                            </div>
-
-                            <div className="govuk-grid-column-one-quarter">
-                                <div className="card">
-                                    <div className="card-body">
-                                        <h2 className="govuk-heading-s">
-                                            {t(
-                                                "myrepresentations:timetable-title"
-                                            )}
-                                        </h2>
-                                        <div className="govuk-summary-list">
-                                            <div className="govuk-body-s">
-                                                {appealIsLocalImpact
-                                                    ? t(
-                                                          "myrepresentations:local-impact-report"
-                                                      )
-                                                    : t(
-                                                          "myrepresentations:questionnaire-due-label"
-                                                      )}
-                                                :{" "}
-                                                <span className="govuk-body-s">
-                                                    {renderDueDate()}
-                                                </span>
-                                            </div>
-
-                                            {!appealIsConsultation &&
-                                                renderStatementsDue()}
-
-                                            {renderMarineImpact()}
-
-                                            {renderConsultationClose()}
-
-                                            {renderFinalCommentsDue()}
-                                        </div>
-                                    </div>
-                                </div>
-
-                                {isQuestionnaire && whichProgress()}
-                            </div>
-                        </div>
-                    </>
+                    <RepresentationFlowFormStage
+                        t={t}
+                        appealIsConsultation={appealIsConsultation}
+                        currentReference={
+                            currentView.caseReference.currentReference
+                        }
+                        whichControl={whichControl}
+                        appealIsLocalImpact={appealIsLocalImpact}
+                        renderDueDate={renderDueDate}
+                        renderStatementsDue={renderStatementsDue}
+                        renderMarineImpact={renderMarineImpact}
+                        renderConsultationClose={renderConsultationClose}
+                        renderFinalCommentsDue={renderFinalCommentsDue}
+                        isQuestionnaire={isQuestionnaire}
+                        whichProgress={whichProgress}
+                    />
                 )}
             </form>
         </div>

components/case/representation/representationAgent.js

@@ -2,22 +2,23 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
     RenderCondtionalRadioList,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationActionButtons from "./elements/RepresentationActionButtons";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const RepAgent = (props) => {
@@ -36,9 +37,23 @@ const RepAgent = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -63,61 +78,49 @@ const RepAgent = (props) => {
         ));
         const required = (value) => (value ? undefined : "Required");
 
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
+        const handleSaveExit = () => {
+            let valuesObj = props.props.props.form[props.form].values || {};
+
+            delete valuesObj["_pinswg_appellant_value"];
+
+            updateRepresentation(valuesObj, false, true);
+        };
+
         return (
             <>
-                <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>
-
-                                <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>
-                        )}
-                    </div>
-                </div>
-                {(typeof props.representationType != "undefined" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
+                <RepresentationTypeSelectorBlock
+                    t={t}
+                    headingText={t(
+                        "myrepresentations:representation-from-an-agent-heading"
+                    )}
+                    kindLabelText={t("myrepresentations:kind-of-rep-label")}
+                    isTypeSelected={isTypeConfirmed}
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                    optionsArr={appellantApplicantRepresentationArr}
+                />
+                {isTypeConfirmed && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -240,64 +243,17 @@ const RepAgent = (props) => {
                         </div>
                     </>
                 )}
-                {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"
-                                disabled={shouldDisableButton({
-                                    props,
-                                    formObj,
-                                })}
-                            >
-                                {t("common:continue-button")}
-                            </button>
-
-                            {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>
+                {isTypeConfirmed && (
+                    <RepresentationActionButtons
+                        t={t}
+                        locale={router.locale}
+                        isSaving={savingStatus}
+                        isContinueDisabled={shouldDisableButton({
+                            props,
+                            formObj
+                        })}
+                        onSaveExit={handleSaveExit}
+                    />
                 )}
             </>
         );
@@ -310,7 +266,7 @@ const mapDispatchToProps = (dispatch) => ({
 
     setFilesForRepresentations: (fileList) => {
         dispatch(setFilesForRepresentations(fileList));
-    },
+    }
 });
 
 export default connect(
@@ -320,6 +276,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(RepAgent)
 );

components/case/representation/representationAppellant.js

@@ -2,21 +2,22 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
-    RenderPickList,
     RenderRichMultiline,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationActionButtons from "./elements/RepresentationActionButtons";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
     setRepresentationCapacity,
     setRepresentationSubmit,
-    setFilesForRepresentations,
+    setFilesForRepresentations
 } from "../../../store/currentView/action";
 
 const RepAppellant = (props) => {
@@ -35,9 +36,23 @@ const RepAppellant = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     console.log(JSON.stringify(formObj) == "{}" ? "empty" : "value");
 
     if (JSON.stringify(formObj) != "{}") {
@@ -62,59 +77,49 @@ const RepAppellant = (props) => {
                 index === self.findIndex((t) => t.name === value.name)
         );
 
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
+        const handleSaveExit = () => {
+            let valuesObj = props.props.props.form[props.form].values || {};
+
+            delete valuesObj["_pinswg_appellant_value"];
+
+            updateRepresentation(valuesObj, false, true);
+        };
+
         return (
             <>
-                <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>
-                        )}
-                    </div>
-                </div>
-                {(typeof props.representationType != "undefined" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
+                <RepresentationTypeSelectorBlock
+                    t={t}
+                    headingText={t(
+                        "myrepresentations:representation-from-an-appellant-heading"
+                    )}
+                    kindLabelText={t("myrepresentations:kind-of-rep-label")}
+                    isTypeSelected={isTypeConfirmed}
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                    optionsArr={appellantApplicantRepresentationArr}
+                />
+                {isTypeConfirmed && (
                     <div className="govuk-grid-row">
                         <div className="govuk-form-group">
                             <p className="govuk-body">
@@ -230,64 +235,17 @@ const RepAppellant = (props) => {
                     </div>
                 )}
 
-                {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"
-                                disabled={shouldDisableButton({
-                                    props,
-                                    formObj,
-                                })}
-                            >
-                                {t("common:continue-button")}
-                            </button>
-
-                            {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>
+                {isTypeConfirmed && (
+                    <RepresentationActionButtons
+                        t={t}
+                        locale={router.locale}
+                        isSaving={savingStatus}
+                        isContinueDisabled={shouldDisableButton({
+                            props,
+                            formObj
+                        })}
+                        onSaveExit={handleSaveExit}
+                    />
                 )}
             </>
         );
@@ -303,7 +261,7 @@ const mapDispatchToProps = (dispatch) => {
 
         setFilesForRepresentations: (fileList) => {
             dispatch(setFilesForRepresentations(fileList));
-        },
+        }
     };
 };
 
@@ -314,6 +272,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(RepAppellant)
 );

components/case/representation/representationComplete.js

@@ -66,7 +66,8 @@ const RepComplete = (props) => {
         (props.props.currentView.representationMessageSent != true &&
             (setRepInvolvment(
                 props.props.currentView.caseReference.incidentid,
-                props.props.props.props.accountDetails.accountDetails.contactid
+                props.props.props.props.accountDetails.accountDetails.contactid,
+                props.props.currentView.representationCapacity
             ),
             sendRepCompleteMessage(
                 props.props.props.props.accountDetails.containerID,

components/case/representation/representationCompleteSubmit.js

@@ -61,6 +61,13 @@ const RepCompleteSubmit = (props) => {
 
     repFormData = updateLinks(repFormData);
 
+    const representationOnBehalfOfDisplay =
+        repFormData.representationOnBehalfOf === "Yes"
+            ? t("myrepresentations:questionnaire-yes")
+            : repFormData.representationOnBehalfOf === "No"
+              ? t("myrepresentations:questionnaire-no")
+              : repFormData.representationOnBehalfOf;
+
     //const repDate = new Date();
 
     // let day = repDate.getDate();
@@ -406,7 +413,7 @@ const RepCompleteSubmit = (props) => {
 
                                             <dd className="govuk-summary-list__value">
                                                 {
-                                                    repFormData.representationOnBehalfOf
+                                                    representationOnBehalfOfDisplay
                                                 }
                                             </dd>
 

components/case/representation/representationElements.js

@@ -258,6 +258,26 @@ export const RenderCondtionalRadioList = ({
 }) => {
     const required = (value) => (value ? undefined : "Required");
     let { t } = useTranslation();
+
+    const yesValue = t("myrepresentations:questionnaire-yes");
+    const noValue = t("myrepresentations:questionnaire-no");
+
+    const normalizeYesNo = (rawValue) => {
+        if (rawValue === true) return "Yes";
+        if (rawValue === false) return "No";
+        if (rawValue === "Yes" || rawValue === yesValue) return "Yes";
+        if (rawValue === "No" || rawValue === noValue) return "No";
+        return rawValue;
+    };
+
+    const isYesSelected = normalizeYesNo(value) === "Yes";
+
+    const requiredIfYes = (fieldValue, allValues) => {
+        const selectedValue = normalizeYesNo(allValues?.[id]);
+        return selectedValue === "Yes" && !String(fieldValue || "").trim()
+            ? "Required"
+            : undefined;
+    };
     return (
         <>
             <div
@@ -304,68 +324,84 @@ export const RenderCondtionalRadioList = ({
                         {custom.hint}
                     </div>
                     <div className="govuk-radios">
-                        {Object.keys(options).map((key, index) => (
-                            <div key={key} className="govuk-!-margin-bottom-3">
+                        {Object.keys(options).map((key, index) => {
+                            const normalizedOptionValue = normalizeYesNo(
+                                options[key]
+                            );
+
+                            return (
                                 <div
-                                    className="govuk-radios__item"
-                                    data-children-count={key}
                                     key={key}
+                                    className="govuk-!-margin-bottom-3"
                                 >
-                                    <Field
-                                        id={id + "_" + index}
-                                        name={id}
-                                        component="input"
-                                        type="radio"
-                                        className="govuk-radios__input"
-                                        value={options[key]}
-                                        validate={[required]}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-radios__label"
-                                        htmlFor={id + "_" + index}
-                                    >
-                                        {options[key] == "Yes"
-                                            ? t(
-                                                  "myrepresentations:questionnaire-yes"
-                                              )
-                                            : t(
-                                                  "myrepresentations:questionnaire-no"
-                                              )}
-                                    </label>
-                                </div>
-                                {value == "Yes" && options[key] == "Yes" && (
                                     <div
-                                        className="govuk-radios__conditional "
-                                        id={"conditional-" + id}
+                                        className="govuk-radios__item"
+                                        data-children-count={key}
+                                        key={key}
                                     >
-                                        <div
-                                            className="govuk-form-group"
-                                            key={"yes_group_" + key}
+                                        <Field
+                                            id={id + "_" + index}
+                                            name={id}
+                                            component="input"
+                                            type="radio"
+                                            className="govuk-radios__input"
+                                            value={normalizedOptionValue}
+                                            validate={[required]}
+                                        />
+                                        <label
+                                            className="govuk-label govuk-radios__label"
+                                            htmlFor={id + "_" + index}
                                         >
-                                            <label
-                                                className="govuk-label"
-                                                htmlFor={id + "_details"}
-                                            >
-                                                {t(
-                                                    "myrepresentations:representation-onbehalfof-label"
-                                                )}
-                                            </label>
-                                            <Field
-                                                className="govuk-input govuk-!-width-one-half"
-                                                id={id + "_details"}
-                                                name={id + "_details"}
-                                                component={RenderTextfield}
-                                                type="text"
-                                                validate={[required]}
-                                                errorMsg={t(
-                                                    "myrepresentations:is-required-label"
-                                                )}
-                                            />
-                                        </div>
+                                            {options[key] == "Yes"
+                                                ? t(
+                                                      "myrepresentations:questionnaire-yes"
+                                                  )
+                                                : t(
+                                                      "myrepresentations:questionnaire-no"
+                                                  )}
+                                        </label>
                                     </div>
-                                )}
-                            </div>
-                        ))}
+                                    {isYesSelected &&
+                                        normalizedOptionValue === "Yes" && (
+                                            <div
+                                                className="govuk-radios__conditional "
+                                                id={"conditional-" + id}
+                                            >
+                                                <div
+                                                    className="govuk-form-group"
+                                                    key={"yes_group_" + key}
+                                                >
+                                                    <label
+                                                        className="govuk-label"
+                                                        htmlFor={
+                                                            id + "_details"
+                                                        }
+                                                    >
+                                                        {t(
+                                                            "myrepresentations:representation-onbehalfof-label"
+                                                        )}
+                                                    </label>
+                                                    <Field
+                                                        className="govuk-input govuk-!-width-one-half"
+                                                        id={id + "_details"}
+                                                        name={id + "_details"}
+                                                        component={
+                                                            RenderTextfield
+                                                        }
+                                                        type="text"
+                                                        validate={[
+                                                            requiredIfYes
+                                                        ]}
+                                                        errorMsg={t(
+                                                            "myrepresentations:is-required-label"
+                                                        )}
+                                                    />
+                                                </div>
+                                            </div>
+                                        )}
+                                </div>
+                            );
+                        })}
                     </div>
                 </fieldset>
             </div>

components/case/representation/representationInterestedPartyPerson.js

@@ -2,16 +2,17 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, change, reduxForm } from "redux-form";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
 import {
     FileUploadField,
     RenderCondtionalRadioList,
-    RenderPickList,
     RenderRichMultiline,
     shouldDisableButton
 } from "./representationElements";
+import RepresentationActionButtons from "./elements/RepresentationActionButtons";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 
 import { useDropzone } from "react-dropzone";
 import {
@@ -34,12 +35,26 @@ const RepInterestedPartyPerson = (props) => {
         updateRepresentation,
         setSavingStatus,
         savingStatus,
-        setFilesForRepresentations
+        setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const required = (value) => (value ? undefined : "Required");
 
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
+    const persistedRepresentationType =
+        props.currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
     if (JSON.stringify(formObj) != "{}") {
         setRepFileName(formObj.representationForm.values);
 
@@ -62,66 +77,52 @@ const RepInterestedPartyPerson = (props) => {
                 {file.path} - {file.size} bytes
             </li>
         ));
+
+        const selectedRepresentationType =
+            formObj?.representationForm?.values?.representationType ||
+            props.representationType;
+
+        const isTypeConfirmed =
+            !!selectedRepresentationType && typeSelectionConfirmed;
+
+        const selectedRepresentationTypeDisplay =
+            router.locale == "cy"
+                ? selectedRepresentationType == "Questionnaire"
+                    ? "Holiadur"
+                    : selectedRepresentationType == "Statement"
+                      ? "Datganiad"
+                      : selectedRepresentationType == "Final comments"
+                        ? "Sylwadau terfynol"
+                        : selectedRepresentationType
+                : selectedRepresentationType;
+
+        const handleSaveExit = () => {
+            let valuesObj = props.props.props.form[props.form].values || {};
+
+            delete valuesObj["_pinswg_appellant_value"];
+
+            updateRepresentation(valuesObj, false, true);
+        };
+
         return (
             <>
-                <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:consultation-from-an-interested-person-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"
-                                    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>
-                        )}
-                    </div>
-                </div>
-                {(typeof props.representationType != "undefined" ||
-                    typeof formObj.representationForm.values
-                        .representationType != "undefined") && (
+                <RepresentationTypeSelectorBlock
+                    t={t}
+                    headingText={t(
+                        "myrepresentations:consultation-from-an-interested-person-heading"
+                    )}
+                    kindLabelText={t("myrepresentations:kind-of-rep-label")}
+                    isTypeSelected={isTypeConfirmed}
+                    selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                    representationType={selectedRepresentationType}
+                    setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                    onRepresentationTypeChange={onRepresentationTypeChange}
+                    onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                    optionsArr={interestedPersonRepresentationArr}
+                    validate={[required]}
+                    errorMsg={t("myrepresentations:select-an-option-label")}
+                />
+                {isTypeConfirmed && (
                     <>
                         <div className="govuk-grid-row">
                             <div className="govuk-form-group">
@@ -129,12 +130,7 @@ const RepInterestedPartyPerson = (props) => {
                                     name="representationOnBehalfOf"
                                     datafieldname="representationOnBehalfOf"
                                     // label="In what capacity do you wish to make representations on this case?"
-                                    options={[
-                                        t(
-                                            "myrepresentations:questionnaire-yes"
-                                        ),
-                                        t("myrepresentations:questionnaire-no")
-                                    ]}
+                                    options={["Yes", "No"]}
                                     id="representationOnBehalfOf"
                                     className="govuk-radios__input"
                                     errorMsg={t(
@@ -233,82 +229,17 @@ const RepInterestedPartyPerson = (props) => {
                         </div>
                     </>
                 )}
-                {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"
-                                disabled={shouldDisableButton({
-                                    props,
-                                    formObj
-                                })}
-                            >
-                                {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={() => {
-                                        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>
+                {isTypeConfirmed && (
+                    <RepresentationActionButtons
+                        t={t}
+                        locale={router.locale}
+                        isSaving={savingStatus}
+                        isContinueDisabled={shouldDisableButton({
+                            props,
+                            formObj
+                        })}
+                        onSaveExit={handleSaveExit}
+                    />
                 )}
             </>
         );

components/case/representation/representationLPA.js

@@ -10,9 +10,9 @@ import { useState, useEffect } from "react";
 import {
     FileUploadField,
     RenderMultiline,
-    RenderPickList,
-    shouldDisableButton,
+    shouldDisableButton
 } from "./representationElements";
+import RepresentationTypeSelectorBlock from "./elements/RepresentationTypeSelectorBlock";
 import RepresentationProgress_enforcement from "./representationProgress/representationProgress_enforcement";
 import RepresentationProgress_s78 from "./representationProgress/representationProgress_s78";
 import Enforcement_Questionnaire from "./representationQuestionnaires/representationLPAQuestionnaire_enforcement";
@@ -23,7 +23,7 @@ import {
     setRepresentationSubmit,
     setFilesForRepresentations,
     setCurrentPage,
-    setCurrentReference,
+    setCurrentReference
 } from "../../../store/currentView/action";
 
 let RepLPA = (props) => {
@@ -49,6 +49,8 @@ let RepLPA = (props) => {
         setSavingStatus,
         savingStatus,
         setFilesForRepresentations,
+        onRepresentationTypeChange,
+        onTypeSelectionConfirmed
     } = props;
     const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
 
@@ -59,6 +61,36 @@ let RepLPA = (props) => {
     ));
     const required = (value) => (value ? undefined : "Required");
 
+    const persistedRepresentationType =
+        currentView?.caseReference?.repDetails?.representationType;
+    const [typeSelectionConfirmed, setTypeSelectionConfirmed] = useState(
+        !!persistedRepresentationType
+    );
+
+    useEffect(() => {
+        if (persistedRepresentationType) {
+            setTypeSelectionConfirmed(true);
+        }
+    }, [persistedRepresentationType]);
+
+    const selectedRepresentationType =
+        formObj?.representationForm?.values?.representationType ||
+        props.representationType;
+
+    const isTypeConfirmed =
+        !!selectedRepresentationType && typeSelectionConfirmed;
+
+    const selectedRepresentationTypeDisplay =
+        router.locale == "cy"
+            ? selectedRepresentationType == "Questionnaire"
+                ? "Holiadur"
+                : selectedRepresentationType == "Statement"
+                  ? "Datganiad"
+                  : selectedRepresentationType == "Final comments"
+                    ? "Sylwadau terfynol"
+                    : selectedRepresentationType
+            : selectedRepresentationType;
+
     const whichQuestionnaire = () => {
         {
             switch (currentView.caseReference.appealType) {
@@ -183,7 +215,7 @@ let RepLPA = (props) => {
             currentView.caseReference.currentReference +
             '")]',
         json: setCaseDetailsObj,
-        eval: true,
+        eval: true
     });
 
     let setCaseResultssObj = router.query.hasOwnProperty("state")
@@ -202,7 +234,7 @@ let RepLPA = (props) => {
             currentView.caseReference.currentReference +
             '")]',
         json: setCaseResultssObj,
-        eval: true,
+        eval: true
     });
     resultsObj = resultsObj[0];
 
@@ -225,62 +257,26 @@ let RepLPA = (props) => {
 
     return (
         <>
+            <RepresentationTypeSelectorBlock
+                t={t}
+                headingText={t(
+                    "myrepresentations:representation-from-an-lpa-heading"
+                )}
+                kindLabelText={t("myrepresentations:kind-of-rep-label")}
+                isTypeSelected={isTypeConfirmed}
+                selectedTypeDisplay={selectedRepresentationTypeDisplay}
+                representationType={selectedRepresentationType}
+                setTypeSelectionConfirmed={setTypeSelectionConfirmed}
+                onRepresentationTypeChange={onRepresentationTypeChange}
+                onTypeSelectionConfirmed={onTypeSelectionConfirmed}
+                optionsArr={appellantApplicantRepresentationArr}
+                validate={[required]}
+                errorMsg={t("myrepresentations:select-an-option-label")}
+            />
             <div className="govuk-grid-row">
                 <div className="govuk-form-group">
-                    {!_.has(
-                        formObj["representationForm"],
-                        ["values", "representationType"] ||
-                            typeof props.currentView.caseReference.repDetails !=
-                                "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..." ? (
+                    {isTypeConfirmed &&
+                        (selectedRepresentationType != "Questionnaire" ? (
                             <>
                                 <p className="govuk-body">
                                     {t("myrepresentations:enter-comment-label")}
@@ -354,7 +350,8 @@ let RepLPA = (props) => {
                                                 "myrepresentations:add-files-label"
                                             )}
                                             ticketnumber={
-                                                props.currentView.caseReference.ticketnumber
+                                                props.currentView.caseReference
+                                                    .ticketnumber
                                             }
                                             hint={"sdsd"}
                                             fileList={
@@ -401,9 +398,8 @@ let RepLPA = (props) => {
             </div>
             <div className="govuk-grid-row">
                 <div className="govuk-button-group">
-                    {(typeof props.representationType != "undefined" ||
-                        _.has(formObj, "values", "representationType")) &&
-                        props.representationType == "Questionnaire" && (
+                    {isTypeConfirmed &&
+                        selectedRepresentationType == "Questionnaire" && (
                             <>
                                 {showQuestionnaireSection <
                                     questionnaireCount && (
@@ -443,14 +439,14 @@ let RepLPA = (props) => {
                                             //     top: 0,
                                             //     behavior: "smooth",
                                             // });
-                                            setRepFileName(
+                                            (setRepFileName(
                                                 props.formObj[
                                                     "representationForm"
                                                 ].values
                                             ),
                                                 setShowQuestionnaireSection(
                                                     showQuestionnaireSection - 1
-                                                );
+                                                ));
                                         }}
                                         className="govuk-link"
                                     >
@@ -503,9 +499,8 @@ let RepLPA = (props) => {
                                 )}
                             </>
                         )}{" "}
-                    {(typeof props.representationType != "undefined" ||
-                        _.has(formObj, "values", "representationType")) &&
-                        props.representationType != "Questionnaire" && (
+                    {isTypeConfirmed &&
+                        selectedRepresentationType != "Questionnaire" && (
                             <>
                                 <button
                                     type="submit"
@@ -513,7 +508,7 @@ let RepLPA = (props) => {
                                     data-module="govuk-button"
                                     disabled={shouldDisableButton({
                                         props,
-                                        formObj,
+                                        formObj
                                     })}
                                     onClick={() => {
                                         let valuesObj =
@@ -612,7 +607,7 @@ RepLPA = connect((state) => {
 
     return {
         procedureType,
-        representationType,
+        representationType
     };
 })(RepLPA);
 
@@ -625,7 +620,7 @@ const mapDispatchToProps = (dispatch) => ({
     },
     setCurrentReference: (currentReference) => {
         dispatch(setCurrentReference(currentReference));
-    },
+    }
 });
 
 const mapStateToProps = (state, props) => {
@@ -641,8 +636,7 @@ const mapStateToProps = (state, props) => {
                 ],
             "firstname":
                 props.props.props.accountDetails.accountDetails.firstname,
-            "lastname":
-                props.props.props.accountDetails.accountDetails.lastname,
+            "lastname": props.props.props.accountDetails.accountDetails.lastname
         }
     );
     return {
@@ -653,7 +647,7 @@ const mapStateToProps = (state, props) => {
         currentView: state.currentView,
         myRepresentations: state.myRepresentations,
         watchedCases: state.watchedCases,
-        initialValues: initialValuesTemp,
+        initialValues: initialValuesTemp
     };
 };
 
@@ -664,6 +658,6 @@ export default connect(
     reduxForm({
         form: "representationForm",
         enableReinitialize: true,
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(RepLPA)
 );

components/case/representation/shell/RepresentationFlowFormStage.js

@@ -0,0 +1,50 @@
+import RepresentationTimetablePanel from "./RepresentationTimetablePanel";
+
+const RepresentationFlowFormStage = ({
+    t,
+    appealIsConsultation,
+    currentReference,
+    whichControl,
+    appealIsLocalImpact,
+    renderDueDate,
+    renderStatementsDue,
+    renderMarineImpact,
+    renderConsultationClose,
+    renderFinalCommentsDue,
+    isQuestionnaire,
+    whichProgress
+}) => {
+    return (
+        <>
+            <h1 className="govuk-heading-l">
+                {appealIsConsultation
+                    ? t("myrepresentations:make-a-consultation-on-label")
+                    : t(
+                          "myrepresentations:make-a-representation-on-label"
+                      )}{" "}
+                {currentReference}{" "}
+            </h1>
+
+            <div id="rep-form">
+                <div className="govuk-grid-column-three-quarters wgForm">
+                    {whichControl()}
+                </div>
+
+                <RepresentationTimetablePanel
+                    t={t}
+                    appealIsConsultation={appealIsConsultation}
+                    appealIsLocalImpact={appealIsLocalImpact}
+                    renderDueDate={renderDueDate}
+                    renderStatementsDue={renderStatementsDue}
+                    renderMarineImpact={renderMarineImpact}
+                    renderConsultationClose={renderConsultationClose}
+                    renderFinalCommentsDue={renderFinalCommentsDue}
+                    isQuestionnaire={isQuestionnaire}
+                    whichProgress={whichProgress}
+                />
+            </div>
+        </>
+    );
+};
+
+export default RepresentationFlowFormStage;

components/case/representation/shell/RepresentationTimetablePanel.js

@@ -0,0 +1,49 @@
+const RepresentationTimetablePanel = ({
+    t,
+    appealIsConsultation,
+    appealIsLocalImpact,
+    renderDueDate,
+    renderStatementsDue,
+    renderMarineImpact,
+    renderConsultationClose,
+    renderFinalCommentsDue,
+    isQuestionnaire,
+    whichProgress
+}) => {
+    return (
+        <div className="govuk-grid-column-one-quarter">
+            <div className="card">
+                <div className="card-body">
+                    <h2 className="govuk-heading-s">
+                        {t("myrepresentations:timetable-title")}
+                    </h2>
+                    <div className="govuk-summary-list">
+                        <div className="govuk-body-s">
+                            {appealIsLocalImpact
+                                ? t("myrepresentations:local-impact-report")
+                                : t(
+                                      "myrepresentations:questionnaire-due-label"
+                                  )}
+                            :{" "}
+                            <span className="govuk-body-s">
+                                {renderDueDate()}
+                            </span>
+                        </div>
+
+                        {!appealIsConsultation && renderStatementsDue()}
+
+                        {renderMarineImpact()}
+
+                        {renderConsultationClose()}
+
+                        {renderFinalCommentsDue()}
+                    </div>
+                </div>
+            </div>
+
+            {isQuestionnaire && whichProgress()}
+        </div>
+    );
+};
+
+export default RepresentationTimetablePanel;

components/case/representation/utils/buildRepsArrRules.js

@@ -0,0 +1,224 @@
+export const APPEAL_TYPES = {
+    SIPS: 846040002,
+    DNS: 846040011,
+    HOUSEHOLDER: 846040004,
+    ADVERT: 846040018,
+    EXCLUDE_QUESTIONNAIRE_1: 846040019,
+    EXCLUDE_QUESTIONNAIRE_2: 846040015,
+    EXCLUDE_QUESTIONNAIRE_3: 846040016
+};
+
+export const SPECIALIST_PROCESS = {
+    WRITTEN_REPS: 846040000,
+    HEARING: 846040001
+};
+
+export const INVOLVEMENT_TYPES = {
+    LPA: 846040012
+};
+
+export const REPRESENTATION_OPTIONS = {
+    QUESTIONNAIRE: "Questionnaire",
+    STATEMENT: "Statement",
+    FINAL_COMMENTS: "Final comments",
+    CONSULTATION_RESPONSE: "Consultation Response",
+    LOCAL_IMPACT_REPORT: "Local Impact Report",
+    MARINE_IMPACT_REPORT: "Marine Impact Report"
+};
+
+const isValidDate = (date) =>
+    date instanceof Date && !Number.isNaN(date.getTime());
+
+const toDateOrNull = (value) => {
+    const date = new Date(value);
+    return isValidDate(date) ? date : null;
+};
+
+const endOfDay = (date) => {
+    if (!isValidDate(date)) return null;
+    const next = new Date(date);
+    next.setHours(23, 59, 59, 999);
+    return next;
+};
+
+const isWithinWindow = (now, start, end) => {
+    if (!isValidDate(now) || !isValidDate(start) || !isValidDate(end)) {
+        return false;
+    }
+    return now >= start && now <= end;
+};
+
+const normalizeCapacity = (value) =>
+    (value || "")
+        .toString()
+        .toLowerCase()
+        .replace(/(\band|[\s\-\+\(\)\,\&])/g, "");
+
+export const buildRepresentationContext = ({
+    detailsObj = {},
+    appealType,
+    specialistProcess,
+    involvementType,
+    selectedCapacity,
+    isCaseOwner,
+    isNRW,
+    now = new Date()
+}) => {
+    const isDNS = appealType === APPEAL_TYPES.DNS;
+
+    const startDate = toDateOrNull(
+        isDNS
+            ? detailsObj.pinswg_applicationacceptedasvalid
+            : detailsObj.pinswg_startdate || detailsObj.pinswg_startdates
+    );
+
+    const statementDueDate = endOfDay(
+        toDateOrNull(
+            isDNS
+                ? detailsObj.pinswg_endofrepresentationperiod
+                : detailsObj.pinswg_statementduedate ||
+                      detailsObj.pinswg_statementsduedate
+        )
+    );
+
+    const finalCommentsDueDate = endOfDay(
+        toDateOrNull(
+            isDNS
+                ? detailsObj.pinswg_endofrepresentationperiod
+                : detailsObj.pinswg_finalcommentsduedate
+        )
+    );
+
+    const capacity = normalizeCapacity(selectedCapacity);
+    const isLPA = involvementType === INVOLVEMENT_TYPES.LPA;
+
+    return {
+        appealType,
+        specialistProcess,
+        isDNS,
+        isSIPS: appealType === APPEAL_TYPES.SIPS,
+        isLPA,
+        isNRW: !!isNRW,
+        isCaseOwner: !!isCaseOwner,
+        isSelectedAppellant: capacity === "appellant",
+        isSelectedAgent: capacity === "agent",
+        isSelectedInterestedParty: capacity === "interestedparty",
+        now,
+        startDate,
+        statementDueDate,
+        finalCommentsDueDate
+    };
+};
+
+export const addQuestionnaire = (options, ctx) => {
+    const excludedTypes = [
+        APPEAL_TYPES.EXCLUDE_QUESTIONNAIRE_1,
+        APPEAL_TYPES.DNS,
+        APPEAL_TYPES.EXCLUDE_QUESTIONNAIRE_2,
+        APPEAL_TYPES.EXCLUDE_QUESTIONNAIRE_3
+    ];
+
+    const canAdd =
+        ctx.isLPA &&
+        !excludedTypes.includes(ctx.appealType) &&
+        isWithinWindow(ctx.now, ctx.startDate, ctx.finalCommentsDueDate);
+
+    if (canAdd) {
+        options.add(REPRESENTATION_OPTIONS.QUESTIONNAIRE);
+    }
+};
+
+export const addStatements = (options, ctx) => {
+    const isLpaAdvertPart3NoStatement =
+        ctx.isLPA &&
+        ctx.appealType === APPEAL_TYPES.ADVERT &&
+        ctx.specialistProcess === SPECIALIST_PROCESS.WRITTEN_REPS;
+
+    const canAddDnsLpaDocs =
+        ctx.isLPA &&
+        ctx.isDNS &&
+        ctx.appealType !== APPEAL_TYPES.EXCLUDE_QUESTIONNAIRE_1 &&
+        !ctx.isCaseOwner &&
+        isWithinWindow(ctx.now, ctx.startDate, ctx.finalCommentsDueDate);
+
+    if (canAddDnsLpaDocs) {
+        options.add(REPRESENTATION_OPTIONS.LOCAL_IMPACT_REPORT);
+        options.add(REPRESENTATION_OPTIONS.STATEMENT);
+    }
+
+    const canAddStatementForNonDns =
+        !ctx.isDNS &&
+        ctx.appealType !== APPEAL_TYPES.HOUSEHOLDER &&
+        !isLpaAdvertPart3NoStatement &&
+        !ctx.isCaseOwner &&
+        isWithinWindow(ctx.now, ctx.startDate, ctx.statementDueDate);
+
+    if (canAddStatementForNonDns) {
+        options.add(REPRESENTATION_OPTIONS.STATEMENT);
+    }
+
+    const canAddStatementForDnsNonLpa =
+        ctx.isDNS &&
+        !ctx.isLPA &&
+        !ctx.isCaseOwner &&
+        isWithinWindow(ctx.now, ctx.startDate, ctx.statementDueDate);
+
+    if (canAddStatementForDnsNonLpa) {
+        options.add(REPRESENTATION_OPTIONS.STATEMENT);
+    }
+};
+
+export const addFinalComments = (options, ctx) => {
+    const canSubmitFinalCommentsDefault =
+        ctx.isSelectedAppellant ||
+        ctx.isSelectedAgent ||
+        ctx.isSelectedInterestedParty ||
+        ctx.isLPA;
+
+    const canSubmitFinalComments = ctx.isDNS
+        ? ctx.isLPA
+        : canSubmitFinalCommentsDefault;
+
+    const isSpecialistNonHearing =
+        ctx.specialistProcess !== SPECIALIST_PROCESS.HEARING;
+
+    const finalCommentsWindowStart = ctx.isDNS
+        ? ctx.startDate
+        : ctx.statementDueDate;
+
+    const canAdd =
+        canSubmitFinalComments &&
+        isWithinWindow(
+            ctx.now,
+            finalCommentsWindowStart,
+            ctx.finalCommentsDueDate
+        ) &&
+        (ctx.appealType !== APPEAL_TYPES.HOUSEHOLDER || isSpecialistNonHearing);
+
+    if (canAdd) {
+        options.add(REPRESENTATION_OPTIONS.FINAL_COMMENTS);
+    }
+};
+
+export const addConsultation = (options, ctx) => {
+    if (!ctx.isSIPS) return;
+
+    options.add(REPRESENTATION_OPTIONS.CONSULTATION_RESPONSE);
+
+    if (!ctx.isSelectedAppellant) {
+        options.add(REPRESENTATION_OPTIONS.LOCAL_IMPACT_REPORT);
+    }
+
+    if (ctx.isNRW) {
+        options.add(REPRESENTATION_OPTIONS.MARINE_IMPACT_REPORT);
+    }
+};
+
+export const buildRepsArrFromContext = (ctx) => {
+    const options = new Set();
+    addQuestionnaire(options, ctx);
+    addStatements(options, ctx);
+    addFinalComments(options, ctx);
+    addConsultation(options, ctx);
+    return [...options];
+};

components/case/representation/utils/dataResolution.js

@@ -0,0 +1,93 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+
+export const resolveInitialCaseDataSources = ({
+    hasState,
+    isEditState,
+    currentType,
+    myRepresentations,
+    searchDetailsObj,
+    searchResultsObj,
+    watchedCasesDetails
+}) => {
+    if (hasState) {
+        return {
+            "caseDetailsSource": isEditState
+                ? myRepresentations
+                : searchDetailsObj,
+            "caseResultsSource": isEditState
+                ? myRepresentations
+                : searchResultsObj
+        };
+    }
+
+    return {
+        "caseDetailsSource":
+            currentType === "watchedCases"
+                ? watchedCasesDetails
+                : searchDetailsObj,
+        "caseResultsSource":
+            currentType === "watchedCases"
+                ? watchedCasesDetails
+                : searchResultsObj
+    };
+};
+
+export const findResultsObjForCurrentReference = ({
+    currentReference,
+    caseResultsSource
+}) => {
+    return jsonpath({
+        path: `$..[?(@ && @.ticketnumber=="${currentReference}")]`,
+        "json": caseResultsSource,
+        "eval": true
+    })[0];
+};
+
+export const findDetailsObjForView = ({
+    hasState,
+    isEditState,
+    queryCreated,
+    ticketnumber,
+    caseDetailsSource
+}) => {
+    if (hasState && isEditState) {
+        return jsonpath({
+            path: `$..[?(@ && @.repfile_name=="${queryCreated}")]`,
+            "json": caseDetailsSource,
+            "eval": true
+        })[0];
+    }
+
+    return jsonpath({
+        path: `$..[?(@ && @.ticketnumber=="${ticketnumber}")]`,
+        "json": caseDetailsSource,
+        "eval": true
+    })[0];
+};
+
+export const resolveSubmitCaseDetailsSource = ({
+    isEditState,
+    currentType,
+    myRepresentations,
+    watchedCasesDetails,
+    searchDetailsObj
+}) => {
+    if (isEditState) {
+        return myRepresentations;
+    }
+
+    return currentType === "watchedCases"
+        ? watchedCasesDetails
+        : searchDetailsObj;
+};
+
+export const findDetailsObjForSubmit = ({
+    ticketnumber,
+    caseDetailsSource
+}) => {
+    return jsonpath({
+        path: `$..[?(@ && @.ticketnumber=="${ticketnumber}")]`,
+        "json": caseDetailsSource,
+        "eval": true
+    })[0];
+};

components/case/representation/utils/finalisationBoundary.js

@@ -0,0 +1,126 @@
+export const buildRepresentationUpdateBody = ({
+    formattedValues,
+    setRepFileName
+}) => {
+    let updateBody = setRepFileName(formattedValues);
+
+    const sanitizedBody = Object.entries(updateBody).reduce(
+        (acc, [key, val]) => {
+            if (val !== null && val !== undefined && !key.startsWith("_")) {
+                acc[key] = val;
+            }
+            return acc;
+        },
+        {}
+    );
+
+    const stringified = JSON.stringify(sanitizedBody)
+        .replace(/:"Yes"/g, ":true")
+        .replace(/:"No"/g, ":false");
+
+    updateBody = JSON.parse(stringified);
+
+    return updateBody;
+};
+
+export const buildSubmitEnrichedValues = ({
+    formValues,
+    accountDetails,
+    appealType,
+    caseReferenceObj,
+    detailsObj,
+    resultsObj,
+    representationCapacity,
+    locale
+}) => {
+    const buildSiteAddress = () => {
+        const {
+            pinswg_siteaddressline1,
+            pinswg_siteaddressline2,
+            pinswg_siteaddresstown,
+            pinswg_siteaddresspostcode
+        } = detailsObj;
+
+        return [
+            pinswg_siteaddressline1,
+            pinswg_siteaddressline2,
+            pinswg_siteaddresstown,
+            pinswg_siteaddresspostcode
+        ]
+            .filter(Boolean)
+            .join(" ");
+    };
+
+    return {
+        ...formValues,
+        containerID: accountDetails.containerID,
+        appealType: appealType || caseReferenceObj.repDetails.appealType,
+        incidentID:
+            caseReferenceObj.incidentid ||
+            caseReferenceObj.repDetails.incidentid,
+        caseRef: caseReferenceObj.currentReference,
+        casereference: caseReferenceObj.currentReference,
+        pinswg_questionnaireduedate: detailsObj.pinswg_questionnaireduedate,
+        pinswg_endofrepresentationperiod:
+            detailsObj.pinswg_endofrepresentationperiod,
+        pinswg_applicationacceptedasvalid:
+            detailsObj.pinswg_applicationacceptedasvalid,
+        pinswg_statementduedate: detailsObj.pinswg_statementduedate,
+        pinswg_statementsduedate: detailsObj.pinswg_statementsduedate,
+        pinswg_finalcommentsduedate: detailsObj.pinswg_finalcommentsduedate,
+        pinswg_name: caseReferenceObj.currentReference,
+        firstname: accountDetails.firstname,
+        lastname: accountDetails.lastname,
+        emailAddress: accountDetails.emailaddress1,
+        siteAddress: buildSiteAddress(),
+        pinswg_siteaddressline1: detailsObj.pinswg_siteaddressline1,
+        pinswg_siteaddressline2: detailsObj.pinswg_siteaddressline2,
+        pinswg_siteaddresstown: detailsObj.pinswg_siteaddresstown,
+        pinswg_siteaddresspostcode: detailsObj.pinswg_siteaddresspostcode,
+        pinswg_lpareference: resultsObj?.pinswg_lpareference,
+        _pinswg_appellant_value: detailsObj._pinswg_appellant_value,
+        "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue":
+            detailsObj[
+                "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
+            ],
+        _pinswg_localplanningauthority_value:
+            detailsObj._pinswg_localplanningauthority_value ||
+            detailsObj._pinswg_associatedlpa_value,
+        "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue":
+            detailsObj[
+                "_pinswg_localplanningauthority_value@OData.Community.Display.V1.FormattedValue"
+            ] ||
+            detailsObj[
+                "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
+            ],
+        representationCapacity,
+        locale
+    };
+};
+
+export const runFinalisationSequence = ({
+    values,
+    containerID,
+    currentReference,
+    setFinaliseAppealProcess,
+    generateRepPDF,
+    updateLinks,
+    uploadRepresentationFiles,
+    setRepresentationSubmit,
+    setRepresentationSubmitConfirmation
+}) => {
+    setFinaliseAppealProcess(true);
+
+    return generateRepPDF(values, containerID, currentReference).then(
+        (data) => {
+            if (data.status === "success") {
+                const updatedValues = updateLinks(values);
+                uploadRepresentationFiles(updatedValues);
+                setRepresentationSubmit(true);
+                setRepresentationSubmitConfirmation(true);
+            }
+
+            return data;
+        }
+    );
+};

components/case/representation/utils/stepResolution.js

@@ -0,0 +1,73 @@
+export const resolveJourneyStageFlags = ({
+    representationSubmit,
+    representationSubmitConfirmation
+}) => {
+    const showCheckStage =
+        representationSubmit === true || representationSubmit === "true";
+    const showCompletionStage =
+        representationSubmitConfirmation === true ||
+        representationSubmitConfirmation === "true";
+
+    return {
+        showFormStage: !showCheckStage,
+        showCheckStage,
+        showCompletionStage
+    };
+};
+
+export const resolveRepresentationControlKey = ({
+    isLPA,
+    representationCapacity,
+    repDetailsCapacity,
+    appealType,
+    normalizeCapacity
+}) => {
+    if (isLPA && (!representationCapacity || representationCapacity === "")) {
+        return {
+            controlKey: "lpa-capacity-selection",
+            normalizedCapacity: ""
+        };
+    }
+
+    const rawCapacity = representationCapacity || repDetailsCapacity || "false";
+    const normalizedCapacity = normalizeCapacity(rawCapacity.toLowerCase());
+
+    return {
+        controlKey: `capacity-${normalizedCapacity}`,
+        normalizedCapacity
+    };
+};
+
+export const resolveSubmitTransition = ({
+    representationType,
+    showQuestionnaireSection,
+    questionnaireCount
+}) => {
+    if (representationType !== "Questionnaire") {
+        return "goToCheck";
+    }
+
+    if (
+        questionnaireCount !== 0 &&
+        showQuestionnaireSection < questionnaireCount
+    ) {
+        return "advanceQuestionnaire";
+    }
+
+    return "goToCheck";
+};
+
+export const getQuestionnaireNextSection = (
+    currentSection,
+    questionnaireCount
+) => {
+    if (questionnaireCount !== 0 && currentSection < questionnaireCount) {
+        return currentSection + 1;
+    }
+
+    return currentSection;
+};
+
+export const getQuestionnairePreviousSection = (currentSection) => {
+    return currentSection > 1 ? currentSection - 1 : currentSection;
+};

components/case/status.js

@@ -0,0 +1,154 @@
+import { setEventDetails } from "../../store/searchOutput/action";
+import { setCurrentPage } from "../../store/currentView/action";
+import { connect } from "react-redux";
+import useTranslation from "next-translate/useTranslation";
+import { formatDates } from "../utils";
+import { useState } from "react";
+import { getStagesForAppealType } from "./summary/utils/caseStagesByAppealType";
+
+const statusClassMap = {
+    complete: "govuk-tag govuk-!-margin-top-2",
+    "in-progress": "govuk-tag govuk-tag--yellow govuk-!-margin-top-2",
+    "not-started": "govuk-tag govuk-tag--grey govuk-!-margin-top-2",
+    blocked: "govuk-tag govuk-tag--red govuk-!-margin-top-2"
+};
+
+const statusTextMap = {
+    complete: "status-complete",
+    "in-progress": "status-in-progress",
+    "not-started": "status-not-started",
+    blocked: "status-blocked"
+};
+
+const StatusDetails = (props) => {
+    let { t } = useTranslation();
+
+    const stages = getStagesForAppealType(
+        props.currentView?.caseReference?.appealType,
+        props.currentView?.caseReference?.statuscode
+    );
+
+    const EventView = (eventsArr) => {
+        eventsArr = eventsArr.value;
+
+        return eventsArr.map((item, key) => {
+            <div>{item.pinswg_name}</div>;
+        });
+    };
+
+    const eventsArr = props.eventsObj?.value || [];
+
+    // event publishiing flag set to true displa
+
+    function hasOwnPropertyAndNotNull(obj, property) {
+        return obj.hasOwnProperty(property) && obj[property] !== null;
+    }
+
+    const [expandAll, setExpandAll] = useState(null);
+    // null = use default (in-progress open)
+    // true = force open all
+    // false = force close all
+
+    const handleToggleAll = () => {
+        setExpandAll((prev) => (prev === true ? false : true));
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-row">
+                <div className="govuk-grid-column-full">
+                    <h2 className="govuk-heading-m ">
+                        {t("case:status-title")}
+                    </h2>
+
+                    <button
+                        type="button"
+                        className="govuk-!-margin-bottom-3 govuk-link watchCase govuk-!-font-size-16 "
+                        onClick={handleToggleAll}
+                    >
+                        {expandAll === true
+                            ? t("case:status-hide-all-label")
+                            : t("case:status-show-all-label")}
+                    </button>
+                    <ul className="govuk-task-list">
+                        {stages.map((stage) => {
+                            const isDefaultOpen =
+                                stage.status === "in-progress";
+
+                            const isOpen =
+                                expandAll === null ? isDefaultOpen : expandAll;
+
+                            return (
+                                <li
+                                    className="govuk-task-list__item"
+                                    key={stage.id}
+                                >
+                                    <div className="govuk-task-list__name-and-hint">
+                                        {stage.descriptionKey && (
+                                            <details
+                                                className="govuk-details govuk-!-margin-top-2 govuk-!-margin-bottom-2"
+                                                open={isOpen}
+                                            >
+                                                <summary className="govuk-details__summary">
+                                                    <span className="govuk-details__summary-text">
+                                                        {t(
+                                                            `case-stages:${stage.titleKey}`
+                                                        )}
+                                                    </span>
+                                                </summary>
+                                                <div className="govuk-details__text">
+                                                    {t(
+                                                        `case-stages:${stage.descriptionKey}`
+                                                    )}
+                                                </div>
+                                            </details>
+                                        )}
+                                    </div>
+
+                                    <div
+                                        className="govuk-task-list__status "
+                                        id={`${stage.id}-status`}
+                                    >
+                                        <strong
+                                            className={
+                                                statusClassMap[stage.status] ||
+                                                "govuk-tag govuk-tag--grey govuk-!-margin-top-2"
+                                            }
+                                        >
+                                            {t(
+                                                `case-stages:${
+                                                    statusTextMap[
+                                                        stage.status
+                                                    ] || "status-not-started"
+                                                }`
+                                            )}
+                                        </strong>
+                                    </div>
+                                </li>
+                            );
+                        })}
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        ...state
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setEventDetails: (eventsObj) => {
+            dispatch(setEventDetails(eventsObj));
+        },
+        setCurrentPage: (currentPage) => {
+            dispatch(setCurrentPage(currentPage));
+        }
+    };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StatusDetails);

components/case/summary.js

@@ -9,6 +9,7 @@ import transLookup from "../../data/lookuptranslations.json";
 import Documents from "./documents";
 import EventsDetails from "./events";
 import MediaDetails from "./media";
+import StatusDetails from "./status";
 
 import {
     createWatchedCases,
@@ -32,19 +33,30 @@ import {
 import { signIn, useSession } from "next-auth/react";
 import { destroyCookie, parseCookies, setCookie } from "nookies";
 import { getFormCollectionByID, getDetailsProxy } from "../utils";
+import {
+    getLivePublishedEvent,
+    isEventLiveNow
+} from "./summary/utils/liveEvent";
 
 import * as CaseTypes from "./summaryTypes"; // ✅ must match filename exactly
 import {
     capitalizeFirstLetter,
     formatDates,
-    showReps,
     hasValidKey,
     isObjectNotEmpty,
     hasOwnPropertyAndNotNull,
     linkedCasesList,
-    showRepsEnded,
     getBilingualText
 } from "./summary/utils/helpers";
+import {
+    isConsultationWindowOpen,
+    isGeneralRepresentationWindowOpen,
+    canShowRepButtonForAppealType,
+    getEntryCtaLabelKey,
+    shouldSuppressBlockedMessage,
+    getGeneralBlockedEndDate,
+    isRepresentationPeriodEnded
+} from "./summary/utils/representationEntry";
 import {
     resolveSearchResultsHref,
     isDnsRoutePath
@@ -304,6 +316,20 @@ const CaseSummary = (props) => {
 
     let hasEndDate = typeof d != "undefined";
 
+    const hasEventsTabData =
+        isObjectNotEmpty(props, "eventsObj") &&
+        Array.isArray(props.eventsObj?.value) &&
+        props.eventsObj.value.length > 0;
+
+    const hasMediaTabData =
+        isObjectNotEmpty(props, "mediaObj") &&
+        Array.isArray(props.mediaObj?.value) &&
+        props.mediaObj.value.length > 0;
+
+    const livePublishedEvent = hasEventsTabData
+        ? getLivePublishedEvent(props.eventsObj)
+        : null;
+
     let point = {};
     let siteCoords = {};
     let center = {};
@@ -342,6 +368,47 @@ const CaseSummary = (props) => {
         showDetails == true ? (
             <>
                 <div className="govuk-frontend-supported">
+                    {livePublishedEvent && (
+                        <div
+                            className="govuk-notification-banner govuk-!-margin-bottom-6"
+                            role="region"
+                            aria-labelledby="live-event-title"
+                            data-module="govuk-notification-banner"
+                        >
+                            <div className="govuk-notification-banner__header">
+                                <h2
+                                    className="govuk-notification-banner__title"
+                                    id="live-event-title"
+                                >
+                                    {t("case:live-event-subheading")}
+                                </h2>
+                            </div>
+                            <div className="govuk-notification-banner__content">
+                                <p className="govuk-notification-banner__heading">
+                                    {t("case:live-event-copy")}
+                                </p>
+
+                                {livePublishedEvent.pinswg_eventname && (
+                                    <p className="govuk-body">
+                                        {livePublishedEvent.pinswg_eventname}
+                                    </p>
+                                )}
+
+                                <a
+                                    href={
+                                        locale === "en"
+                                            ? livePublishedEvent.pinswg_linktotheevent
+                                            : livePublishedEvent.pinswg_linktotheeventstreamwelsh
+                                    }
+                                    className="govuk-link govuk-link--no-visited-state"
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    {t("case:live-event-link")}
+                                </a>
+                            </div>
+                        </div>
+                    )}
                     <div className="govuk-grid-row">
                         <div className="govuk-grid-column-full">
                             <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
@@ -356,6 +423,7 @@ const CaseSummary = (props) => {
                             </h1>
                         </div>
                     </div>
+
                     <div className="govuk-tabs" data-module="govuk-tabs">
                         <h2 className="govuk-tabs__title">Contents</h2>
                         <ul className="govuk-tabs__list">
@@ -441,7 +509,7 @@ const CaseSummary = (props) => {
                                     </a>
                                 </li>
                             )}
-                            {isObjectNotEmpty(props, "eventsObj") && (
+                            {hasEventsTabData && (
                                 <li
                                     className={
                                         whichTab == "case-events"
@@ -461,7 +529,7 @@ const CaseSummary = (props) => {
                                     </a>
                                 </li>
                             )}
-                            {isObjectNotEmpty(props, "mediaObj") && (
+                            {hasMediaTabData && (
                                 <li
                                     className={
                                         whichTab == "case-media"
@@ -498,6 +566,21 @@ const CaseSummary = (props) => {
                                     {t("case:summary-tab-documents-label")}
                                 </a>
                             </li>
+                            <li
+                                className={
+                                    whichTab == "case-status"
+                                        ? "govuk-tabs__list-item govuk-tabs__list-item--selected"
+                                        : "govuk-tabs__list-item "
+                                }
+                            >
+                                <a
+                                    className="govuk-tabs__tab"
+                                    href="#case-status"
+                                    onClick={() => setWhichTab("case-status")}
+                                >
+                                    {t("case:status-title")}
+                                </a>
+                            </li>
                         </ul>
                         <div
                             className={
@@ -806,16 +889,22 @@ const CaseSummary = (props) => {
                                                         appealTypeID
                                                     ).PrimaryIdAttribute ==
                                                         "pinswg_sipscase" &&
-                                                        showReps(
-                                                            detailsObj.pinswg_consultationopen,
-                                                            detailsObj.pinswg_consultationclose
+                                                        isConsultationWindowOpen(
+                                                            detailsObj
                                                         ) && (
                                                             <>
-                                                                {showRepButton(
-                                                                    props
-                                                                        .currentView
-                                                                        .caseReference
-                                                                        .appealType
+                                                                {canShowRepButtonForAppealType(
+                                                                    {
+                                                                        "appealType":
+                                                                            props
+                                                                                .currentView
+                                                                                .caseReference
+                                                                                .appealType,
+                                                                        "isLPA":
+                                                                            isLPA,
+                                                                        "searchDetailsObj":
+                                                                            props.searchDetailsObj
+                                                                    }
                                                                 ) ? (
                                                                     <>
                                                                         <Link
@@ -838,25 +927,27 @@ const CaseSummary = (props) => {
                                                                             }}
                                                                             className="govuk-button"
                                                                         >
-                                                                            {props
-                                                                                .currentView
-                                                                                .caseReference
-                                                                                .appealType ==
-                                                                            846040002
-                                                                                ? t(
-                                                                                      "case:summary-make-consultation-label"
-                                                                                  )
-                                                                                : t(
-                                                                                      "case:summary-make-representation-label"
-                                                                                  )}
+                                                                            {t(
+                                                                                getEntryCtaLabelKey(
+                                                                                    props
+                                                                                        .currentView
+                                                                                        .caseReference
+                                                                                        .appealType
+                                                                                )
+                                                                            )}
                                                                         </Link>
                                                                     </>
-                                                                ) : !isLPA &&
-                                                                  props
-                                                                      .currentView
-                                                                      .caseReference
-                                                                      .appealType ==
-                                                                      846040004 ? (
+                                                                ) : shouldSuppressBlockedMessage(
+                                                                      {
+                                                                          "appealType":
+                                                                              props
+                                                                                  .currentView
+                                                                                  .caseReference
+                                                                                  .appealType,
+                                                                          "isLPA":
+                                                                              isLPA
+                                                                      }
+                                                                  ) ? (
                                                                     ""
                                                                 ) : (
                                                                     <>
@@ -899,114 +990,122 @@ const CaseSummary = (props) => {
                                                                 )}
                                                             </>
                                                         )}
-                                                    {(_.has(
-                                                        detailsObj,
-                                                        "pinswg_startdate"
-                                                    ) ||
-                                                        _.has(
-                                                            detailsObj,
-                                                            "pinswg_applicationacceptedasvalid"
-                                                        ) ||
-                                                        _.has(
-                                                            detailsObj,
-                                                            "pinswg_startdates"
-                                                        )) &&
-                                                        showReps(
-                                                            detailsObj.pinswg_startdate ||
-                                                                detailsObj.pinswg_startdates ||
-                                                                detailsObj.pinswg_applicationacceptedasvalid,
-                                                            detailsObj.pinswg_finalcommentsduedate ||
-                                                                detailsObj.pinswg_endofrepresentationperiod
-                                                        ) && (
-                                                            <>
-                                                                {showRepButton(
-                                                                    props
-                                                                        .currentView
-                                                                        .caseReference
-                                                                        .appealType
-                                                                ) ? (
-                                                                    <>
-                                                                        <Link
-                                                                            href={{
-                                                                                pathname:
-                                                                                    "/myportal/representation",
-                                                                                query: {
-                                                                                    case:
-                                                                                        currentType ==
-                                                                                        "searchResultsObj"
+                                                    {isGeneralRepresentationWindowOpen(
+                                                        detailsObj
+                                                    ) && (
+                                                        <>
+                                                            {canShowRepButtonForAppealType(
+                                                                {
+                                                                    "appealType":
+                                                                        props
+                                                                            .currentView
+                                                                            .caseReference
+                                                                            .appealType,
+                                                                    "isLPA":
+                                                                        isLPA,
+                                                                    "searchDetailsObj":
+                                                                        props.searchDetailsObj
+                                                                }
+                                                            ) ? (
+                                                                <>
+                                                                    <Link
+                                                                        href={{
+                                                                            pathname:
+                                                                                "/myportal/representation",
+                                                                            query: {
+                                                                                case:
+                                                                                    currentType ==
+                                                                                    "searchResultsObj"
+                                                                                        ? detailsObj.ticketnumber
+                                                                                        : currentType ==
+                                                                                            "watchedCases"
+                                                                                          ? casesObj.pinswg_title
+                                                                                          : currentType ==
+                                                                                              "directResultsObj"
                                                                                             ? detailsObj.ticketnumber
-                                                                                            : currentType ==
-                                                                                                "watchedCases"
-                                                                                              ? casesObj.pinswg_title
-                                                                                              : currentType ==
-                                                                                                  "directResultsObj"
-                                                                                                ? detailsObj.ticketnumber
-                                                                                                : casesObj.reference
-                                                                                }
-                                                                            }}
-                                                                            className="govuk-button"
-                                                                        >
-                                                                            {t(
-                                                                                "case:summary-make-representation-label"
-                                                                            )}
-                                                                        </Link>
-                                                                    </>
-                                                                ) : !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
+                                                                                            : casesObj.reference
+                                                                            }
+                                                                        }}
+                                                                        className="govuk-button"
+                                                                    >
+                                                                        {t(
+                                                                            "case:summary-make-representation-label"
+                                                                        )}
+                                                                    </Link>
+                                                                </>
+                                                            ) : shouldSuppressBlockedMessage(
+                                                                  {
+                                                                      "appealType":
+                                                                          props
+                                                                              .currentView
+                                                                              .caseReference
+                                                                              .appealType,
+                                                                      "isLPA":
+                                                                          isLPA
+                                                                  }
+                                                              ) ? (
+                                                                ""
+                                                            ) : (
+                                                                <>
+                                                                    <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(
+                                                                                                      getGeneralBlockedEndDate(
+                                                                                                          detailsObj,
+                                                                                                          props
+                                                                                                              .currentView
+                                                                                                              .caseReference
+                                                                                                              .appealType
                                                                                                       )
-                                                                                                    : formatDates(
-                                                                                                          detailsObj.pinswg_finalcommentsduedate
+                                                                                                  )
+                                                                                                : formatDates(
+                                                                                                      getGeneralBlockedEndDate(
+                                                                                                          detailsObj,
+                                                                                                          props
+                                                                                                              .currentView
+                                                                                                              .caseReference
+                                                                                                              .appealType
                                                                                                       )
-                                                                                        }
-                                                                                    )}
-                                                                                    <br />{" "}
-                                                                                    {t(
-                                                                                        "case:representation-date-passed-additional-label"
-                                                                                    )}{" "}
-                                                                                    <Link
-                                                                                        href={
-                                                                                            "mailto:" +
-                                                                                            t(
-                                                                                                "home:login-contact-email"
-                                                                                            )
-                                                                                        }
-                                                                                    >
-                                                                                        {t(
+                                                                                                  )
+                                                                                    }
+                                                                                )}
+                                                                                <br />{" "}
+                                                                                {t(
+                                                                                    "case:representation-date-passed-additional-label"
+                                                                                )}{" "}
+                                                                                <Link
+                                                                                    href={
+                                                                                        "mailto:" +
+                                                                                        t(
                                                                                             "home:login-contact-email"
-                                                                                        )}
-                                                                                    </Link>
-                                                                                </p>
-                                                                            </div>
+                                                                                        )
+                                                                                    }
+                                                                                >
+                                                                                    {t(
+                                                                                        "home:login-contact-email"
+                                                                                    )}
+                                                                                </Link>
+                                                                            </p>
                                                                         </div>
-                                                                    </>
-                                                                )}
-                                                            </>
-                                                        )}
+                                                                    </div>
+                                                                </>
+                                                            )}
+                                                        </>
+                                                    )}
 
                                                     <Link
                                                         className="govuk-button govuk-button--secondary"
@@ -1352,9 +1451,8 @@ const CaseSummary = (props) => {
                                                     null ||
                                                     detailsObj.pinswg_finalcommentsduedate !=
                                                         null) &&
-                                                showRepsEnded(
-                                                    detailsObj.pinswg_startdate,
-                                                    detailsObj.pinswg_finalcommentsduedate
+                                                isRepresentationPeriodEnded(
+                                                    detailsObj
                                                 ) && (
                                                     <div className="govuk-body">
                                                         {props.currentView
@@ -1856,7 +1954,7 @@ const CaseSummary = (props) => {
                             .PrimaryIdAttribute == "pinswg_sipscase" && (
                             <EIADetails props={props} />
                         )}
-                        {isObjectNotEmpty(props, "eventsObj") && (
+                        {hasEventsTabData && (
                             <div
                                 className={
                                     whichTab == "case-events"
@@ -1869,7 +1967,7 @@ const CaseSummary = (props) => {
                             </div>
                         )}
 
-                        {isObjectNotEmpty(props, "mediaObj") && (
+                        {hasMediaTabData && (
                             <div
                                 className={
                                     whichTab == "case-media"
@@ -1906,6 +2004,16 @@ const CaseSummary = (props) => {
                                 showFilteredDocs={props.showFilteredDocs}
                             />
                         </div>
+                        <div
+                            className={
+                                whichTab == "case-status"
+                                    ? "govuk-tabs__panel "
+                                    : "govuk-tabs__panel govuk-tabs__panel--hidden"
+                            }
+                            id="case-status"
+                        >
+                            <StatusDetails />
+                        </div>
                     </div>
                 </div>
             </>
@@ -1970,10 +2078,12 @@ const CaseSummary = (props) => {
         ) : null;
     }
 
+    const fallbackIncidentId = setCaseQueryObj?.value?.[0]?.incidentid;
+
     useEffect(() => {
         const linkCaseObj = async () => {
             let docObj = await getLinkedCases(
-                incidentid || setCaseQueryObj.value[0].incidentid
+                incidentid || fallbackIncidentId
             ).then((data) => {
                 //console.log(data);
                 setCurrentLinkedCases(data);
@@ -1984,7 +2094,7 @@ const CaseSummary = (props) => {
         };
 
         const linkedCases = linkCaseObj();
-    }, [incidentid, setCurrentLinkedCases]);
+    }, [incidentid, fallbackIncidentId, setCurrentLinkedCases]);
 
     let now = new Date();
     let expDate = new Date(now);
@@ -2043,70 +2153,6 @@ const CaseSummary = (props) => {
         );
     }
 
-    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.searchDetailsObj[0].value[0]
-                    .pinswg_specialistcaseprocess == 846040001
-                    ? showReps(
-                          props.searchDetailsObj[0].value[0].pinswg_startdate,
-                          props.searchDetailsObj[0].value[0]
-                              .pinswg_finalcommentsduedate
-                      )
-                    : true;
-
-            case 846040018:
-                let shouldShow =
-                    props.searchDetailsObj[0].value[0]
-                        .pinswg_speacialistcaseprocess == 846040000 && isLPA
-                        ? true
-                        : props.searchDetailsObj[0].value[0]
-                                .pinswg_speacialistcaseprocess == 846040001
-                          ? true
-                          : false;
-
-                return shouldShow;
-
-            case 846040019:
-                return showReps(
-                    props.searchDetailsObj[0].value[0].pinswg_startdate,
-                    props.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,

components/case/summary/components/SummaryCard.js

@@ -0,0 +1,24 @@
+const SummaryCard = ({
+    id,
+    title,
+    headingTag = "h2",
+    headingClassName = "govuk-heading-m govuk-!-margin-bottom-7",
+    children
+}) => {
+    const HeadingTag = headingTag;
+
+    return (
+        <div className="card" id={id}>
+            <div className="card-body">
+                <div className="govuk-grid-column-full">
+                    <HeadingTag className={headingClassName}>
+                        {title}
+                    </HeadingTag>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SummaryCard;

components/case/summary/components/SummaryRow.js

@@ -0,0 +1,15 @@
+const SummaryRow = ({
+    label,
+    value,
+    keyClassName = "govuk-summary-list__key",
+    valueClassName = "govuk-summary-list__value"
+}) => {
+    return (
+        <div className="govuk-summary-list__row">
+            <dt className={keyClassName}>{label}</dt>
+            <dd className={valueClassName}>{value}</dd>
+        </div>
+    );
+};
+
+export default SummaryRow;

components/case/summary/utils/caseStagesByAppealType.js

@@ -0,0 +1,882 @@
+const slugify = (value) =>
+    value
+        .toString()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-|-$/g, "");
+
+const buildStages = (stages) =>
+    stages.map((stage) => ({
+        id: slugify(stage.titleKey),
+        ...stage
+    }));
+
+export const stagesByCaseType = {
+    DNS: buildStages([
+        {
+            stageId: 846040001,
+            titleKey: "pre-application",
+            descriptionKey: "pre-application-desc"
+        },
+        {
+            stageId: 846040002,
+            titleKey: "environmental-impact-assessment-scoping",
+            descriptionKey: "environmental-impact-assessment-scoping-desc"
+        },
+        {
+            stageId: 846040003,
+            titleKey: "notification",
+            descriptionKey: "notification-desc"
+        },
+        {
+            stageId: 846040004,
+            titleKey: "acceptance-checking",
+            descriptionKey: "acceptance-checking-desc"
+        },
+        {
+            stageId: 846040005,
+            titleKey: "invalid-submission",
+            descriptionKey: "invalid-submission-desc"
+        },
+        {
+            stageId: 846040006,
+            titleKey: "consultation",
+            descriptionKey: "consultation-desc"
+        },
+        {
+            stageId: 846040007,
+            titleKey: "re-consultation",
+            descriptionKey: "re-consultation-desc"
+        },
+        {
+            stageId: 846040008,
+            titleKey: "reporting",
+            descriptionKey: "reporting-desc"
+        },
+        {
+            stageId: 846040009,
+            titleKey: "inspectors-decision",
+            descriptionKey: "inspectors-decision-desc"
+        },
+        {
+            stageId: 846040011,
+            titleKey: "report-to-ministers",
+            descriptionKey: "report-to-ministers-desc"
+        },
+        {
+            stageId: 846040012,
+            titleKey: "minister-s-decision",
+            descriptionKey: "minister-s-decision-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-application"
+        }
+    ]),
+
+    SIP: "DNS",
+
+    PLANNING_S78: buildStages([
+        {
+            stageId: 846040014,
+            titleKey: "appeal-submitted",
+            descriptionKey: "appeal-submitted-desc"
+        },
+        {
+            stageId: 846040015,
+            titleKey: "appeal-registered",
+            descriptionKey: "appeal-registered-desc"
+        },
+        {
+            stageId: 846040016,
+            titleKey: "appeal-validated",
+            descriptionKey: "appeal-validated-desc"
+        },
+        {
+            stageId: 1,
+            titleKey: "case-in-progress",
+            descriptionKey: "case-in-progress-desc"
+        },
+        {
+            stageId: 846040017,
+            titleKey: "questionnaire-lpa-to-notify",
+            descriptionKey: "questionnaire-lpa-to-notify-desc"
+        },
+        {
+            stageId: 846040018,
+            titleKey: "representations-period",
+            descriptionKey: "representations-period-desc"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc"
+        },
+        {
+            stageId: 846040020,
+            titleKey: "event",
+            descriptionKey: "event-desc"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc"
+        }
+    ]),
+
+    CONDITIONS_73_79: "PLANNING_S78",
+    LBCAC: "PLANNING_S78",
+    LDCS: "PLANNING_S78",
+    PLANNING_OBLIGATIONS_S106: "PLANNING_S78",
+    PRIOR_NOTIFICATION: "PLANNING_S78",
+
+    HAS: buildStages([
+        {
+            stageId: 846040014,
+            titleKey: "appeal-submitted",
+            descriptionKey: "appeal-submitted-desc"
+        },
+        {
+            stageId: 846040015,
+            titleKey: "appeal-registered",
+            descriptionKey: "appeal-registered-desc"
+        },
+        {
+            stageId: 846040016,
+            titleKey: "appeal-validated",
+            descriptionKey: "appeal-validated-desc"
+        },
+        {
+            stageId: 1,
+            titleKey: "case-in-progress",
+            descriptionKey: "case-in-progress-desc"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc"
+        }
+    ]),
+
+    CALL_INS: buildStages([
+        {
+            stageId: 846040023,
+            titleKey: "application-called-in",
+            descriptionKey: "application-called-in-desc"
+        },
+        {
+            stageId: 846040043,
+            titleKey: "application-registered",
+            descriptionKey: "application-registered-desc"
+        },
+        {
+            stageId: 846040024,
+            titleKey: "application-validated",
+            descriptionKey: "application-validated-desc-callin"
+        },
+        {
+            stageId: 1,
+            titleKey: "case-in-progress",
+            descriptionKey: "case-in-progress-desc-callin"
+        },
+        {
+            stageId: 846040025,
+            titleKey: "lpa-to-notify",
+            descriptionKey: "lpa-to-notify-desc"
+        },
+        {
+            stageId: 846040018,
+            titleKey: "representations-period",
+            descriptionKey: "representations-period-desc-callin"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc-callin"
+        },
+        {
+            stageId: 846040020,
+            titleKey: "event",
+            descriptionKey: "event-desc-callin"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040028,
+            titleKey: "report-issued-to-welsh-ministers",
+            descriptionKey: "report-issued-to-welsh-ministers-desc"
+        },
+        {
+            stageId: 846040012,
+            titleKey: "minister-s-decision",
+            descriptionKey: "minister-s-decision-desc-callin"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-callin"
+        }
+    ]),
+
+    ENFORCEMENT: buildStages([
+        {
+            stageId: 846040014,
+            titleKey: "appeal-submitted",
+            descriptionKey: "appeal-submitted-desc"
+        },
+        {
+            stageId: 846040015,
+            titleKey: "appeal-registered",
+            descriptionKey: "appeal-registered-desc"
+        },
+        {
+            stageId: 846040029,
+            titleKey: "fee-due",
+            descriptionKey: "fee-due-desc"
+        },
+        {
+            stageId: 846040030,
+            titleKey: "validated",
+            descriptionKey: "appeal-validated-desc"
+        },
+        {
+            stageId: 1,
+            titleKey: "case-in-progress",
+            descriptionKey: "case-in-progress-desc"
+        },
+        {
+            stageId: 846040017,
+            titleKey: "questionnaire-lpa-to-notify",
+            descriptionKey: "questionnaire-lpa-to-notify-desc"
+        },
+        {
+            stageId: 846040018,
+            titleKey: "representations-period",
+            descriptionKey: "representations-period-desc"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc"
+        },
+        {
+            stageId: 846040020,
+            titleKey: "event",
+            descriptionKey: "event-desc"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc"
+        }
+    ]),
+
+    ENFORCEMENT_LISTED_BUILDING: "ENFORCEMENT",
+    MAINTENANCE_OF_LAND: "ENFORCEMENT",
+
+    RIGHTS_OF_WAY_SCHEDULE_14: buildStages([
+        {
+            stageId: 846040014,
+            titleKey: "appeal-submitted",
+            descriptionKey: "appeal-submitted-desc"
+        },
+        {
+            stageId: 846040015,
+            titleKey: "appeal-registered",
+            descriptionKey: "appeal-registered-desc"
+        },
+        {
+            stageId: 846040016,
+            titleKey: "appeal-validated",
+            descriptionKey: "appeal-validated-desc"
+        },
+        {
+            stageId: 846040031,
+            titleKey: "appeal-start-case-in-progress",
+            descriptionKey: "case-in-progress-desc"
+        },
+        {
+            stageId: 846040032,
+            titleKey: "statements-representations-period",
+            descriptionKey: "statements-representations-period-desc"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-application"
+        }
+    ]),
+
+    RIGHTS_OF_WAY_ORDERS: buildStages([
+        {
+            stageId: 846040033,
+            titleKey: "order-submitted",
+            descriptionKey: "order-submitted-desc"
+        },
+        {
+            stageId: 846040034,
+            titleKey: "order-submission-registered",
+            descriptionKey: "order-submission-registered-desc"
+        },
+        {
+            stageId: 846040035,
+            titleKey: "order-submission-validated",
+            descriptionKey: "order-submission-validated-desc"
+        },
+        {
+            stageId: 846040036,
+            titleKey: "case-started-case-in-progress",
+            descriptionKey: "case-started-case-in-progress-desc"
+        },
+        {
+            stageId: 846040010,
+            titleKey: "statements",
+            descriptionKey: "statements-desc-order"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc-order"
+        },
+        {
+            stageId: 846040037,
+            titleKey: "event-site-visit",
+            descriptionKey: "event-site-visit-desc-order"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-order"
+        }
+    ]),
+
+    REQUESTS_FOR_DIRECTION: buildStages([
+        {
+            stageId: 846040042,
+            titleKey: "application-submitted",
+            descriptionKey: "application-submitted-desc"
+        },
+        {
+            stageId: 846040043,
+            titleKey: "application-registered",
+            descriptionKey: "application-registered-desc"
+        },
+        {
+            stageId: 846040036,
+            titleKey: "application-start-case-in-progress",
+            descriptionKey: "application-start-case-in-progress-desc"
+        },
+        {
+            stageId: 846040010,
+            titleKey: "statements",
+            descriptionKey: "statements-desc"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "statements-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-application"
+        }
+    ]),
+
+    ADVERTS: buildStages([
+        {
+            stageId: 846040014,
+            titleKey: "appeal-submitted",
+            descriptionKey: "appeal-submitted-desc"
+        },
+        {
+            stageId: 846040015,
+            titleKey: "appeal-registered",
+            descriptionKey: "appeal-registered-desc"
+        },
+        {
+            stageId: 846040016,
+            titleKey: "appeal-validated",
+            descriptionKey: "appeal-validated-desc"
+        },
+        {
+            stageId: 846040036,
+            titleKey: "case-started-case-in-progress",
+            descriptionKey: "case-in-progress-desc"
+        },
+        {
+            stageId: 846040017,
+            titleKey: "questionnaire-lpa-to-notify",
+            descriptionKey: "questionnaire-lpa-to-notify-desc"
+        },
+        {
+            stageId: 846040010,
+            titleKey: "statements",
+            descriptionKey: "statements-desc"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc"
+        }
+    ]),
+
+    HEDGEROW_TPO: buildStages([
+        {
+            stageId: 846040014,
+            titleKey: "appeal-submitted",
+            descriptionKey: "appeal-submitted-desc"
+        },
+        {
+            stageId: 846040015,
+            titleKey: "appeal-registered",
+            descriptionKey: "appeal-registered-desc"
+        },
+        {
+            stageId: 846040016,
+            titleKey: "appeal-validated",
+            descriptionKey: "appeal-validated-desc"
+        },
+        {
+            stageId: 846040031,
+            titleKey: "appeal-start-case-in-progress",
+            descriptionKey: "case-in-progress-desc"
+        },
+        {
+            stageId: 846040017,
+            titleKey: "questionnaire-lpa-to-notify",
+            descriptionKey: "questionnaire-lpa-to-notify-desc"
+        },
+        {
+            stageId: 846040032,
+            titleKey: "statements-representations-period",
+            descriptionKey: "statements-representations-period-desc"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc"
+        }
+    ]),
+
+    COMMON_LAND: buildStages([
+        {
+            stageId: 846040042,
+            titleKey: "application-submitted",
+            descriptionKey: "application-submitted-desc"
+        },
+        {
+            stageId: 846040043,
+            titleKey: "application-registered",
+            descriptionKey: "application-registered-desc"
+        },
+        {
+            stageId: 846040024,
+            titleKey: "application-validated",
+            descriptionKey: "application-validated-desc"
+        },
+        {
+            stageId: 846040031,
+            titleKey: "application-start-case-in-progress",
+            descriptionKey: "application-start-case-in-progress-desc"
+        },
+        {
+            stageId: 846040038,
+            titleKey: "applicant-statement-on-representations",
+            descriptionKey: "applicant-statement-on-representations-desc"
+        },
+        {
+            stageId: 846040039,
+            titleKey: "representatives-comment",
+            descriptionKey: "representatives-comment-desc"
+        },
+        {
+            stageId: 846040027,
+            titleKey: "applicants-final-comment",
+            descriptionKey: "applicants-final-comment-desc"
+        },
+        {
+            stageId: 846040037,
+            titleKey: "event-site-visit",
+            descriptionKey: "event-site-visit-desc"
+        },
+        {
+            stageId: 846040022,
+            titleKey: "decision-issued",
+            descriptionKey: "decision-issued-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-application"
+        }
+    ]),
+
+    COMPULSORY_PURCHASE_ORDERS: buildStages([
+        {
+            stageId: 846040033,
+            titleKey: "order-submitted",
+            descriptionKey: "order-submitted-desc"
+        },
+        {
+            stageId: 846040040,
+            titleKey: "order-registered",
+            descriptionKey: "order-submission-registered-desc"
+        },
+        {
+            stageId: 846040041,
+            titleKey: "order-validated",
+            descriptionKey: "order-submission-validated-desc"
+        },
+        {
+            stageId: 1,
+            titleKey: "case-in-progress",
+            descriptionKey: "case-started-case-in-progress-desc"
+        },
+        {
+            stageId: 846040010,
+            titleKey: "statements",
+            descriptionKey: "statements-desc-order"
+        },
+        {
+            stageId: 846040019,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc-cpo"
+        },
+        {
+            stageId: 846040037,
+            titleKey: "event-site-visit",
+            descriptionKey: "event-site-visit-desc-order"
+        },
+        {
+            stageId: 846040011,
+            titleKey: "report-to-ministers",
+            descriptionKey: "report-to-ministers-desc-cpo"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-order"
+        }
+    ]),
+
+    ELECTRICITY_ACT: "PLANNING_S78",
+    HARBOUR_REVISION_ORDER: buildStages([
+        {
+            stageId: 846040033,
+            titleKey: "order-submitted",
+            descriptionKey: "order-submitted-desc"
+        },
+        {
+            stageId: 846040040,
+            titleKey: "order-registered",
+            descriptionKey: "order-submission-registered-desc"
+        },
+        {
+            stageId: 846040041,
+            titleKey: "order-validated",
+            descriptionKey: "order-submission-validated-desc"
+        },
+        {
+            stageId: 1,
+            titleKey: "case-in-progress",
+            descriptionKey: "case-started-case-in-progress-desc"
+        },
+        {
+            stageId: 846040010,
+            titleKey: "statements",
+            descriptionKey: "statements-desc-order"
+        },
+        {
+            stageId: 846040055,
+            titleKey: "final-comments",
+            descriptionKey: "final-comments-desc-cpo"
+        },
+        {
+            stageId: 846040037,
+            titleKey: "event-site-visit",
+            descriptionKey: "event-site-visit-desc-order"
+        },
+        {
+            stageId: 846040056,
+            titleKey: "report-to-ministers",
+            descriptionKey: "report-to-ministers-desc-cpo"
+        },
+        {
+            stageId: 846040060,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-order"
+        }
+    ]),
+    TRANSPORT_WORKS: "PLANNING_S78",
+
+    WAYLEAVE: buildStages([
+        {
+            stageId: 846040042,
+            titleKey: "application-submitted",
+            descriptionKey: "application-submitted-desc"
+        },
+        {
+            stageId: 846040043,
+            titleKey: "application-registered",
+            descriptionKey: "application-registered-desc"
+        },
+        {
+            stageId: 846040024,
+            titleKey: "application-validated",
+            descriptionKey: "application-validated-desc"
+        },
+        {
+            stageId: 1,
+            titleKey: "case-in-progress",
+            descriptionKey: "application-start-case-in-progress-desc"
+        },
+        {
+            stageId: 846040021,
+            titleKey: "site-visit",
+            descriptionKey: "site-visit-desc"
+        },
+        {
+            stageId: 846040044,
+            titleKey: "report-to-desnz",
+            descriptionKey: "report-to-desnz-desc"
+        },
+        {
+            stageId: 846040013,
+            titleKey: "case-closed",
+            descriptionKey: "case-closed-desc-application"
+        }
+    ]),
+
+    NON_VALIDATION: buildStages([
+        {
+            stageId: 846040014,
+            titleKey: "appeal-submitted",
+            descriptionKey: "appeal-submitted-desc"
+        },
+        {
+            stageId: 846040015,
+            titleKey: "appeal-registered",
+            descriptionKey: "appeal-registered-desc"
+        },
+        {
+            stageId: 846040016,
+            titleKey: "appeal-validated",
+            descriptionKey: "appeal-validated-desc"
+        },
+        {
+            stageId: 846040045,
+            titleKey: "case-in-progress-assessment",
+            descriptionKey: "case-in-progress-desc"
+        },
+        {
+            stageId: 846040046,
+            titleKey: "decision-outcome",
+            descriptionKey: "decision-outcome-desc"
+        },
+        {
+            stageId: 846040060,
+            titleKey: "case-closed-nonval",
+            descriptionKey: "case-closed-desc"
+        }
+    ])
+};
+
+export const caseTypeAliases = {
+    // Planning S78 group
+    S78: "PLANNING_S78",
+    PLANNING_78: "PLANNING_S78",
+    PLANNING_S78: "PLANNING_S78",
+    CONDITIONS_73_79: "CONDITIONS_73_79",
+    LBCAC: "LBCAC",
+    LDCS: "LDCS",
+    PLANNING_OBLIGATIONS_S106: "PLANNING_OBLIGATIONS_S106",
+    PRIOR_NOTIFICATION: "PRIOR_NOTIFICATION",
+
+    // Other types
+    HAS: "HAS",
+    CALL_INS: "CALL_INS",
+    CALL_IN: "CALL_INS",
+    ENFORCEMENT: "ENFORCEMENT",
+    ENFORCEMENT_LISTED_BUILDING: "ENFORCEMENT_LISTED_BUILDING",
+    MAINTENANCE_OF_LAND: "MAINTENANCE_OF_LAND",
+    RIGHTS_OF_WAY_SCHEDULE_14: "RIGHTS_OF_WAY_SCHEDULE_14",
+    RIGHTS_OF_WAY_ORDERS: "RIGHTS_OF_WAY_ORDERS",
+    REQUESTS_FOR_DIRECTION: "REQUESTS_FOR_DIRECTION",
+    ADVERTS: "ADVERTS",
+    HEDGEROW_TPO: "HEDGEROW_TPO",
+    COMMON_LAND: "COMMON_LAND",
+    COMPULSORY_PURCHASE_ORDERS: "COMPULSORY_PURCHASE_ORDERS",
+    ELECTRICITY_ACT: "ELECTRICITY_ACT",
+    HARBOUR_REVISION_ORDER: "HARBOUR_REVISION_ORDER",
+    TRANSPORT_WORKS: "TRANSPORT_WORKS",
+    WAYLEAVE: "WAYLEAVE",
+    NON_VALIDATION: "NON_VALIDATION",
+    DNS: "DNS",
+    SIP: "SIP"
+};
+
+const normaliseCaseType = (caseType) =>
+    caseType
+        ?.toString()
+        .trim()
+        .toUpperCase()
+        .replace(/&/g, "AND")
+        .replace(/[^A-Z0-9]+/g, "_")
+        .replace(/^_|_$/g, "");
+
+const resolveStages = (caseTypeOrAppealTypeId) => {
+    const appealTypeKey =
+        caseTypeKeyByAppealTypeId[Number(caseTypeOrAppealTypeId)];
+
+    const normalised = normaliseCaseType(caseTypeOrAppealTypeId);
+
+    const key = appealTypeKey || caseTypeAliases[normalised] || normalised;
+
+    const entry = stagesByCaseType[key];
+
+    if (!entry) return [];
+
+    if (typeof entry === "string") {
+        return stagesByCaseType[entry] || [];
+    }
+
+    return entry;
+};
+
+export const getStagesForAppealType = (caseType, currentStageId) => {
+    const stages = resolveStages(caseType);
+    const currentStageNumber = Number(currentStageId);
+
+    const currentIndex = stages.findIndex(
+        (stage) => Number(stage.stageId) === currentStageNumber
+    );
+
+    return stages.map((stage, index) => ({
+        ...stage,
+        status:
+            currentIndex === -1
+                ? "not-started"
+                : index < currentIndex
+                  ? "complete"
+                  : index === currentIndex
+                    ? "in-progress"
+                    : "not-started"
+    }));
+};
+
+export const caseTypeKeyByAppealTypeId = {
+    846040000: "PLANNING_S78",
+    846040001: "CONDITIONS_73_79",
+    846040002: "SIP",
+    846040003: "PLANNING_OBLIGATIONS_S106",
+    846040004: "HAS",
+    846040005: "ENFORCEMENT",
+    846040006: "ENFORCEMENT_LISTED_BUILDING",
+    846040007: "MAINTENANCE_OF_LAND",
+    846040008: "LDCS",
+    846040009: "PLANNING_S78",
+    846040010: "CALL_INS",
+    846040011: "DNS",
+    846040012: "ELECTRICITY_ACT",
+    846040013: "TRANSPORT_WORKS",
+    846040014: "HARBOUR_REVISION_ORDER",
+    846040015: "RIGHTS_OF_WAY_SCHEDULE_14",
+    846040016: "COMMON_LAND",
+    846040017: "HEDGEROW_TPO",
+    846040018: "ADVERTS",
+    846040019: "COMPULSORY_PURCHASE_ORDERS",
+    846040020: "PLANNING_S78",
+    846040021: "WAYLEAVE",
+    846040024: "NON_VALIDATION",
+    846040025: "LBCAC"
+};

components/case/summary/utils/liveEvent.js

@@ -0,0 +1,36 @@
+export function isEventLiveNow(item) {
+    if (!item?.pinswg_dateeventrequested) return false;
+
+    const now = new Date();
+    const start = new Date(item.pinswg_dateeventrequested);
+
+    if (isNaN(start.getTime())) return false;
+
+    const endDateValue =
+        item.pinswg_enddateofevent || item.pinswg_enddateoftheevent;
+
+    if (endDateValue) {
+        const end = new Date(endDateValue);
+        if (isNaN(end.getTime())) return false;
+
+        end.setHours(23, 59, 59, 999);
+
+        return now >= start && now <= end;
+    }
+
+    const endOfStartDay = new Date(start);
+    endOfStartDay.setHours(23, 59, 59, 999);
+
+    return now >= start && now <= endOfStartDay;
+}
+
+export function getLivePublishedEvent(eventsObj) {
+    const eventsArr = eventsObj?.value || [];
+
+    return eventsArr.find(
+        (item) =>
+            item.pinswg_eventpublishflag &&
+            item.pinswg_linktotheevent &&
+            isEventLiveNow(item)
+    );
+}

components/case/summary/utils/representationEntry.js

@@ -0,0 +1,117 @@
+export function showRepsLocal(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;
+}
+
+export function showRepsEndedLocal(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;
+}
+
+export function isConsultationWindowOpen(detailsObj) {
+    return showRepsLocal(
+        detailsObj.pinswg_consultationopen,
+        detailsObj.pinswg_consultationclose
+    );
+}
+
+export function isGeneralRepresentationWindowOpen(detailsObj) {
+    return (
+        (Object.prototype.hasOwnProperty.call(detailsObj, "pinswg_startdate") ||
+            Object.prototype.hasOwnProperty.call(
+                detailsObj,
+                "pinswg_applicationacceptedasvalid"
+            ) ||
+            Object.prototype.hasOwnProperty.call(
+                detailsObj,
+                "pinswg_startdates"
+            )) &&
+        showRepsLocal(
+            detailsObj.pinswg_startdate ||
+                detailsObj.pinswg_startdates ||
+                detailsObj.pinswg_applicationacceptedasvalid,
+            detailsObj.pinswg_finalcommentsduedate ||
+                detailsObj.pinswg_endofrepresentationperiod
+        )
+    );
+}
+
+export function canShowRepButtonForAppealType({
+    appealType,
+    isLPA,
+    searchDetailsObj
+}) {
+    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 searchDetailsObj[0].value[0].pinswg_specialistcaseprocess ==
+                846040001
+                ? showRepsLocal(
+                      searchDetailsObj[0].value[0].pinswg_startdate,
+                      searchDetailsObj[0].value[0].pinswg_finalcommentsduedate
+                  )
+                : true;
+
+        case 846040018:
+            let shouldShow =
+                searchDetailsObj[0].value[0].pinswg_speacialistcaseprocess ==
+                    846040000 && isLPA
+                    ? true
+                    : searchDetailsObj[0].value[0]
+                            .pinswg_speacialistcaseprocess == 846040001
+                      ? true
+                      : false;
+
+            return shouldShow;
+
+        case 846040019:
+            return showRepsLocal(
+                searchDetailsObj[0].value[0].pinswg_startdate,
+                searchDetailsObj[0].value[0].pinswg_statementduedate
+            );
+
+        default:
+            return true;
+    }
+}
+
+export function getEntryCtaLabelKey(appealType) {
+    return appealType == 846040002
+        ? "case:summary-make-consultation-label"
+        : "case:summary-make-representation-label";
+}
+
+export function shouldSuppressBlockedMessage({ appealType, isLPA }) {
+    return !isLPA && appealType == 846040004;
+}
+
+export function getGeneralBlockedEndDate(detailsObj, appealType) {
+    return appealType == 846040019
+        ? detailsObj.pinswg_statementduedate
+        : detailsObj.pinswg_finalcommentsduedate;
+}
+
+export function isRepresentationPeriodEnded(detailsObj) {
+    return showRepsEndedLocal(
+        detailsObj.pinswg_startdate,
+        detailsObj.pinswg_finalcommentsduedate
+    );
+}

components/case/summaryTypes/pinswg_advertsid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_advertsid = (props) => {
     let { t } = useTranslation();
@@ -13,431 +16,346 @@ const Pinswg_advertsid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_speacialistcaseprocess@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                        <SummaryRow
+                            label={"Specialist Case Process"}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_speacialistcaseprocess@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_speacialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
 
-                                <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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_callinss77id.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_callinss77id = (props) => {
     let { t } = useTranslation();
@@ -13,291 +16,237 @@ const Pinswg_callinss77id = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : 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-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
+                                                  "case:summary-case-link-status-not-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                {/* <div className="govuk-summary-list__row">
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
                                             "case:summary-date-exported-to-iss-label"
@@ -323,95 +272,75 @@ const Pinswg_callinss77id = (props) => {
                                     </dd>
                                 </div> */}
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_statementsduedate"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementsduedate
-                                                  )
-                                                : 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-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : 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-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                {/* <div className="govuk-summary-list__row">
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
                                             "case:summary-inquiry-evidence-date-label"
@@ -436,81 +365,56 @@ const Pinswg_callinss77id = (props) => {
                                               )}
                                     </dd>
                                 </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : 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-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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_commonlandid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_commonlandid = (props) => {
     let { t } = useTranslation();
@@ -13,412 +16,334 @@ const Pinswg_commonlandid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-case-relevant-authoritylabel"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              }) ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        <SummaryRow
+                            label={t(
+                                "case:summary-case-relevant-authoritylabel"
+                            )}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value',
+                                          json: transLookup,
+                                          eval: true
+                                      }) ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementsduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                {/* <div className="govuk-summary-list__row">
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
                                             "case:summary-inquiry-evidence-date-label"
@@ -443,82 +368,57 @@ const Pinswg_commonlandid = (props) => {
                                               )}
                                     </dd>
                                 </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_communityinfrastructurelevyid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_communityinfrastructurelevyid = (props) => {
     let { t } = useTranslation();
@@ -13,406 +16,323 @@ const Pinswg_communityinfrastructurelevyid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : 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-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_compulsorypurchaseordersid.js

@@ -3,6 +3,8 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
 
 const Pinswg_compulsorypurchaseordersid = (props) => {
     let { t } = useTranslation();
@@ -13,392 +15,320 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-case-relevant-authoritylabel"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              }) ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        <SummaryRow
+                            label={t(
+                                "case:summary-case-relevant-authoritylabel"
+                            )}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value',
+                                          json: transLookup,
+                                          eval: true
+                                      }) ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                {/* <div className="govuk-summary-list__row">
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
                                             "case:summary-inquiry-evidence-date-label"
@@ -423,82 +353,57 @@ const Pinswg_compulsorypurchaseordersid = (props) => {
                                               )}
                                     </dd>
                                 </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_electricityactid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_electricityactid = (props) => {
     let { t } = useTranslation();
@@ -59,12 +62,12 @@ const Pinswg_electricityactid = (props) => {
                                 </h2>
 
                                 <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-case-type-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-case-type-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -73,45 +76,37 @@ const Pinswg_electricityactid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : casesObj[
                                                       "pinswg_appealcasetype@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-lpa-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
-                                                ? jsonpath({
-                                                      path:
-                                                          '$..[?(@ && @.value=="' +
-                                                          casesObj[
-                                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                          ] +
-                                                          '")].value_cy',
-                                                      json: transLookup,
-                                                      eval: true,
-                                                  })
-                                                : casesObj[
-                                                      "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                  ] || ""}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-eia-required-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-lpa-label")}
+                                        value={
+                                            <>
+                                                {getCaseLpaDisplayLines({
+                                                    casesObj,
+                                                    detailsObj,
+                                                    locale: router.locale,
+                                                    transLookup
+                                                }).map((name) => (
+                                                    <div key={name}>{name}</div>
+                                                ))}
+                                            </>
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-eia-required-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath(
                                                       '$..[?(@.value=="' +
                                                           detailsObj[
@@ -125,9 +120,9 @@ const Pinswg_electricityactid = (props) => {
                                                   ] ||
                                                   t(
                                                       "case:summary-to-be-confirmed-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
                                     <div className="govuk-summary-list__row">
                                         <dt className="govuk-summary-list__key">
                                             {t(
@@ -145,12 +140,12 @@ const Pinswg_electricityactid = (props) => {
                                                 : ""}
                                         </dd>
                                     </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-procedure-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-procedure-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -159,21 +154,19 @@ const Pinswg_electricityactid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : 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"
+                                                  ] || ""
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-type-of-event-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -182,19 +175,17 @@ const Pinswg_electricityactid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : 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"
+                                                  ] || ""
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-status-label")}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -203,16 +194,16 @@ const Pinswg_electricityactid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : casesObj[
                                                       "statuscode@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-decision-label")}
@@ -227,7 +218,7 @@ const Pinswg_electricityactid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : detailsObj[
                                                       "pinswg_decision@OData.Community.Display.V1.FormattedValue"
@@ -254,7 +245,7 @@ const Pinswg_electricityactid = (props) => {
                                             </dt>
                                             <dd className="govuk-summary-list__value">
                                                 {_.has(casesObj, [
-                                                    "numberofchildincidents",
+                                                    "numberofchildincidents"
                                                 ])
                                                     ? casesObj.numberofchildincidents >
                                                       0
@@ -287,51 +278,47 @@ const Pinswg_electricityactid = (props) => {
                                     ) : (
                                         ""
                                     )}
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-recommendation-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-case-recommendation-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
                                                           detailsObj.pinswg_recommendation +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : detailsObj.pinswg_recommendation ||
                                                   t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
                                     {detailsObj.pinswg_webaddress != null && (
-                                        <div className="govuk-summary-list__row">
-                                            <dt className="govuk-summary-list__key">
-                                                {t(
-                                                    "case:summary-case-website-label"
-                                                )}
-                                            </dt>
-                                            <dd className="govuk-summary-list__value">
-                                                {router.locale == "cy"
+                                        <SummaryRow
+                                            label={t(
+                                                "case:summary-case-website-label"
+                                            )}
+                                            value={
+                                                router.locale == "cy"
                                                     ? jsonpath({
                                                           path:
                                                               '$..[?(@ && @.value=="' +
                                                               detailsObj.pinswg_webaddress +
                                                               '")].value_cy',
                                                           json: transLookup,
-                                                          eval: true,
+                                                          eval: true
                                                       })
                                                     : detailsObj.pinswg_webaddress ||
                                                       t(
                                                           "case:summary-no-date-entered-label"
-                                                      )}
-                                            </dd>
-                                        </div>
+                                                      )
+                                            }
+                                        />
                                     )}
                                 </dl>
                             </div>
@@ -344,12 +331,12 @@ const Pinswg_electricityactid = (props) => {
                                     {t("case:summary-dates-label")}
                                 </h3>
                                 <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-event-date-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-event-date-label"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateeventrequested"
                                             )
@@ -364,17 +351,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : 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"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-decision-date-label"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_casedecisiondate"
                                             )
@@ -389,18 +374,16 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
 
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-application-accepted-as-valid"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-application-accepted-as-valid"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_applicationacceptedasvalid"
                                             )
@@ -415,17 +398,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-application-rejected-as-invalid"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-application-rejected-as-invalid"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_applicationrejectedasinvalid"
                                             )
@@ -440,17 +421,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-confirm-request-to-vary-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-confirm-request-to-vary-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_confirmrequesttovaryapplication"
                                             )
@@ -465,17 +444,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-of-decisions"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-of-decisions"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofdecision"
                                             )
@@ -490,17 +467,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-of-request-to-vary"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-of-request-to-vary"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofrequesttovarytheapplication"
                                             )
@@ -515,17 +490,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-of-submission-of-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-of-submission-of-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofsubmissionofapplication"
                                             )
@@ -540,17 +513,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-project-published-to-website"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-project-published-to-website"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateprojectpublishedonwebsite"
                                             )
@@ -565,17 +536,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-deadline-for-submission-of-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-deadline-for-submission-of-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_deadlineforsubmissionofapplication"
                                             )
@@ -590,17 +559,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-end-of-representation-period"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-end-of-representation-period"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_endofrepresentationperiod"
                                             )
@@ -615,17 +582,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-inspector-report-submission-to-welsh-government"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-inspector-report-submission-to-welsh-government"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_inspectorreportsubmittedtowelshgovernment"
                                             )
@@ -640,17 +605,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-procedure-confirmed"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-procedure-confirmed"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_procedureconfirmed"
                                             )
@@ -665,17 +628,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-reject-request-to-vary-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-reject-request-to-vary-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_rejectrequesttovaryapplication"
                                             )
@@ -690,15 +651,13 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-report-due-by")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-report-due-by")}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_reportdueby"
                                             )
@@ -713,15 +672,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-suspension-dates")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-suspension-dates"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensiondates"
                                             )
@@ -736,17 +695,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-suspension-end-dates"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-suspension-end-dates"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensionenddates"
                                             )
@@ -761,17 +718,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-suspension-start-dates"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-suspension-start-dates"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensionstartdates"
                                             )
@@ -786,17 +741,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-valid-notice-of-intention-to-submit-an-application"
-                                            )}
-                                        </dt>{" "}
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-valid-notice-of-intention-to-submit-an-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_validnoticeofintentiontosubmitanapplicati"
                                             )
@@ -811,15 +764,13 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-withdrawn-date")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-withdrawn-date")}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_withdrawndate"
                                             )
@@ -834,17 +785,15 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-written-acceptance-of-notice"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-written-acceptance-of-notice"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_writtenacceptanceofnotification"
                                             )
@@ -859,9 +808,9 @@ const Pinswg_electricityactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
                                 </dl>
                             </div>
                         </div>

components/case/summaryTypes/pinswg_enforcementlistedbuildingconseid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_enforcementlistedbuildingconseid = (props) => {
     let { t } = useTranslation();
@@ -13,383 +16,309 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                {/* <div className="govuk-summary-list__row">
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <div className="govuk-summary-list__row">
                                     <dt className="govuk-summary-list__key">
                                         {t(
                                             "case:summary-inquiry-evidence-date-label"
@@ -414,82 +343,57 @@ const Pinswg_enforcementlistedbuildingconseid = (props) => {
                                               )}
                                     </dd>
                                 </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_enforcementnoticeappeals174id.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_enforcementnoticeappeals174id = (props) => {
     let { t } = useTranslation();
@@ -13,390 +16,313 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -412,84 +338,58 @@ const Pinswg_enforcementnoticeappeals174id = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_environmentalpermittingid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_environmentalpermittingid = (props) => {
     let { t } = useTranslation();
@@ -13,419 +16,338 @@ const Pinswg_environmentalpermittingid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-case-relevant-authoritylabel"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              }) ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        <SummaryRow
+                            label={t(
+                                "case:summary-case-relevant-authoritylabel"
+                            )}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value',
+                                          json: transLookup,
+                                          eval: true
+                                      }) ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -441,84 +363,58 @@ const Pinswg_environmentalpermittingid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_harbourrevisionorderid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_harbourrevisionorderid = (props) => {
     let { t } = useTranslation();
@@ -59,12 +62,12 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                 </h2>
 
                                 <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-case-type-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-case-type-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -73,45 +76,37 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : casesObj[
                                                       "pinswg_appealcasetype@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-lpa-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
-                                                ? jsonpath({
-                                                      path:
-                                                          '$..[?(@ && @.value=="' +
-                                                          casesObj[
-                                                              "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                          ] +
-                                                          '")].value_cy',
-                                                      json: transLookup,
-                                                      eval: true,
-                                                  })
-                                                : casesObj[
-                                                      "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                  ] || ""}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-eia-required-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-lpa-label")}
+                                        value={
+                                            <>
+                                                {getCaseLpaDisplayLines({
+                                                    casesObj,
+                                                    detailsObj,
+                                                    locale: router.locale,
+                                                    transLookup
+                                                }).map((name) => (
+                                                    <div key={name}>{name}</div>
+                                                ))}
+                                            </>
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-eia-required-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath(
                                                       '$..[?(@.value=="' +
                                                           detailsObj[
@@ -125,9 +120,9 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                   ] ||
                                                   t(
                                                       "case:summary-to-be-confirmed-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
                                     <div className="govuk-summary-list__row">
                                         <dt className="govuk-summary-list__key">
                                             {t(
@@ -145,12 +140,12 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                 : ""}
                                         </dd>
                                     </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-procedure-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-procedure-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -159,19 +154,17 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : 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-status-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                                  ] || ""
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-status-label")}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -180,16 +173,16 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : casesObj[
                                                       "statuscode@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-decision-label")}
@@ -204,7 +197,7 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                           ] +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : detailsObj[
                                                       "pinswg_decision@OData.Community.Display.V1.FormattedValue"
@@ -231,7 +224,7 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                             </dt>
                                             <dd className="govuk-summary-list__value">
                                                 {_.has(casesObj, [
-                                                    "numberofchildincidents",
+                                                    "numberofchildincidents"
                                                 ])
                                                     ? casesObj.numberofchildincidents >
                                                       0
@@ -264,51 +257,47 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                     ) : (
                                         ""
                                     )}
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-recommendation-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-case-recommendation-label"
+                                        )}
+                                        value={
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
                                                           detailsObj.pinswg_recommendation +
                                                           '")].value_cy',
                                                       json: transLookup,
-                                                      eval: true,
+                                                      eval: true
                                                   })
                                                 : detailsObj.pinswg_recommendation ||
                                                   t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
                                     {detailsObj.pinswg_webaddress != null && (
-                                        <div className="govuk-summary-list__row">
-                                            <dt className="govuk-summary-list__key">
-                                                {t(
-                                                    "case:summary-case-website-label"
-                                                )}
-                                            </dt>
-                                            <dd className="govuk-summary-list__value">
-                                                {router.locale == "cy"
+                                        <SummaryRow
+                                            label={t(
+                                                "case:summary-case-website-label"
+                                            )}
+                                            value={
+                                                router.locale == "cy"
                                                     ? jsonpath({
                                                           path:
                                                               '$..[?(@ && @.value=="' +
                                                               detailsObj.pinswg_webaddress +
                                                               '")].value_cy',
                                                           json: transLookup,
-                                                          eval: true,
+                                                          eval: true
                                                       })
                                                     : detailsObj.pinswg_webaddress ||
                                                       t(
                                                           "case:summary-no-date-entered-label"
-                                                      )}
-                                            </dd>
-                                        </div>
+                                                      )
+                                            }
+                                        />
                                     )}
                                 </dl>
                             </div>
@@ -321,12 +310,12 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                     {t("case:summary-dates-label")}
                                 </h3>
                                 <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-event-date-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-event-date-label"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateeventrequested"
                                             )
@@ -341,17 +330,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : 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"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-decision-date-label"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_casedecisiondate"
                                             )
@@ -366,18 +353,16 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
 
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-application-accepted-as-valid"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-application-accepted-as-valid"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_applicationacceptedasvalid"
                                             )
@@ -392,17 +377,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-application-rejected-as-invalid"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-application-rejected-as-invalid"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_applicationrejectedasinvalid"
                                             )
@@ -417,17 +400,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-confirm-request-to-vary-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-confirm-request-to-vary-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_confirmrequesttovaryapplication"
                                             )
@@ -442,17 +423,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-of-decisions"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-of-decisions"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofdecision"
                                             )
@@ -467,17 +446,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-of-request-to-vary"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-of-request-to-vary"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofrequesttovarytheapplication"
                                             )
@@ -492,17 +469,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-of-submission-of-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-of-submission-of-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofsubmissionofapplication"
                                             )
@@ -517,17 +492,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-date-project-published-to-website"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-date-project-published-to-website"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateprojectpublishedonwebsite"
                                             )
@@ -542,17 +515,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-deadline-for-submission-of-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-deadline-for-submission-of-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_deadlineforsubmissionofapplication"
                                             )
@@ -567,17 +538,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-end-of-representation-period"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-end-of-representation-period"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_endofrepresentationperiod"
                                             )
@@ -592,17 +561,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-inspector-report-submission-to-welsh-government"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-inspector-report-submission-to-welsh-government"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_inspectorreportsubmittedtowelshgovernment"
                                             )
@@ -617,17 +584,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-procedure-confirmed"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-procedure-confirmed"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_procedureconfirmed"
                                             )
@@ -642,17 +607,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-reject-request-to-vary-application"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-reject-request-to-vary-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_rejectrequesttovaryapplication"
                                             )
@@ -667,15 +630,13 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-report-due-by")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-report-due-by")}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_reportdueby"
                                             )
@@ -690,15 +651,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-suspension-dates")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-suspension-dates"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensiondates"
                                             )
@@ -713,17 +674,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-suspension-end-dates"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-suspension-end-dates"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensionenddates"
                                             )
@@ -738,17 +697,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-suspension-start-dates"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-suspension-start-dates"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensionstartdates"
                                             )
@@ -763,17 +720,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-valid-notice-of-intention-to-submit-an-application"
-                                            )}
-                                        </dt>{" "}
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-valid-notice-of-intention-to-submit-an-application"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_validnoticeofintentiontosubmitanapplicati"
                                             )
@@ -788,15 +743,13 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-withdrawn-date")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t("case:summary-withdrawn-date")}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_withdrawndate"
                                             )
@@ -811,17 +764,15 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-written-acceptance-of-notice"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+                                        }
+                                    />
+                                    <SummaryRow
+                                        label={t(
+                                            "case:summary-written-acceptance-of-notice"
+                                        )}
+                                        value={
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_writtenacceptanceofnotification"
                                             )
@@ -836,9 +787,9 @@ const Pinswg_harbourrevisionorderid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+                                        }
+                                    />
                                 </dl>
                             </div>
                         </div>

components/case/summaryTypes/pinswg_hedgeshedgerowstreepreservatioid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
     let { t } = useTranslation();
@@ -13,442 +16,359 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                        <SummaryRow
+                            label={"Specialist Case Process"}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
 
-                                <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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-case-relevant-authoritylabel"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              }) ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        <SummaryRow
+                            label={t(
+                                "case:summary-case-relevant-authoritylabel"
+                            )}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value',
+                                          json: transLookup,
+                                          eval: true
+                                      }) ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -464,84 +384,58 @@ const Pinswg_hedgeshedgerowstreepreservatioid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_householderappealhasid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_householderappealhasid = (props) => {
     let { t } = useTranslation();
@@ -13,411 +16,318 @@ const Pinswg_householderappealhasid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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-status-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : 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-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
+                                                  "case:summary-case-link-status-not-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_otherpartiesstmt")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstmt
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstmt
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
                                             "pinswg_otherpartiesstmt"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstmt
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstmt
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstmt"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstmt
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstmt
-                                                  )
-                                                : 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-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstmt
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstmt
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_lawfuldevelopmentcertificatappid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
     let { t } = useTranslation();
@@ -13,390 +16,313 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -412,84 +338,58 @@ const Pinswg_lawfuldevelopmentcertificatappid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_ldpid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_ldpid = (props) => {
     let { t } = useTranslation();
@@ -13,369 +16,296 @@ const Pinswg_ldpid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -391,84 +321,58 @@ const Pinswg_ldpid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_listedbuildingandconservationrid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_listedbuildingandconservationrid = (props) => {
     let { t } = useTranslation();
@@ -13,390 +16,313 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -412,84 +338,58 @@ const Pinswg_listedbuildingandconservationrid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_maintenanceoflands217id.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_maintenanceoflands217id = (props) => {
     let { t } = useTranslation();
@@ -13,390 +16,313 @@ const Pinswg_maintenanceoflands217id = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -412,84 +338,58 @@ const Pinswg_maintenanceoflands217id = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_miscellaneouscasewordid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_miscellaneouscasewordid = (props) => {
     let { t } = useTranslation();
@@ -13,419 +16,338 @@ const Pinswg_miscellaneouscasewordid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-case-relevant-authoritylabel"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              }) ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        <SummaryRow
+                            label={t(
+                                "case:summary-case-relevant-authoritylabel"
+                            )}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value',
+                                          json: transLookup,
+                                          eval: true
+                                      }) ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -441,84 +363,58 @@ const Pinswg_miscellaneouscasewordid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_nonvalidationid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_nonvalidationid = (props) => {
     let { t } = useTranslation();
@@ -13,208 +16,148 @@ const Pinswg_nonvalidationid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
 
-                                {/* <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({path:
-                                                  '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                      eval: true,
-                                  })
-                                            : 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-status-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decisionissued@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decisionissued@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decisionissued@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_validdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_validdate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_validdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_validdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_validdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_validdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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_decisionissueddate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_decisionissueddate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_decisionissueddate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_decisionissueddate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_decisionissueddate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_decisionissueddate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_planningappeals78id.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayValue, getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_planningappeals78id = (props) => {
     let { t } = useTranslation();
@@ -13,352 +16,282 @@ const Pinswg_planningappeals78id = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </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">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : 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-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
+                                                  "case:summary-case-link-status-not-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-interested-party-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                {/* <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-statement-interested-party-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-interested-party-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={
+         _.has(
                                             detailsObj,
                                             "pinswg_otherpartiesstatement"
                                         )
@@ -386,43 +319,32 @@ const Pinswg_planningappeals78id = (props) => {
                                                   )
                                             : t(
                                                   "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div> */}
-
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+     }
+ /> */}
+
+                        <SummaryRow
+                            label={t("case:summary-final-comments-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={
+         _.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -437,15 +359,13 @@ const Pinswg_planningappeals78id = (props) => {
                                                   )
                                             : t(
                                                   "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div> */}
-                                {/* <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                                              )
+     }
+ /> */}
+                        {/* <SummaryRow
+     label={t("case:summary-event-date-label")}
+     value={
+         _.has(
                                             detailsObj,
                                             "pinswg_dateeventrequested"
                                         )
@@ -460,71 +380,60 @@ const Pinswg_planningappeals78id = (props) => {
                                                   )
                                             : t(
                                                   "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div> */}
-
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_startdatetimeiftheevent"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdatetimeiftheevent
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdatetimeiftheevent
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
+     }
+ /> */}
+
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_startdatetimeiftheevent"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_startdatetimeiftheevent
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdatetimeiftheevent
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {detailsObj.pinswg_typeofevent == 846040002 ||
+                        detailsObj.pinswg_typeofevent == 846040007 ||
+                        detailsObj.pinswg_typeofevent == 846040012 ||
+                        detailsObj.pinswg_typeofevent == 846040009 ? (
+                            <SummaryRow
+                                label={t("case:summary-start-event-time-label")}
+                                value={
+                                    _.has(
+                                        detailsObj,
+                                        "pinswg_startdatetimeiftheevent"
+                                    )
+                                        ? !_.isEmpty(
+                                              detailsObj.pinswg_startdatetimeiftheevent
+                                          )
+                                            ? formatDates(
+                                                  detailsObj.pinswg_startdatetimeiftheevent,
+                                                  true
+                                              )
                                             : t(
                                                   "case:summary-no-date-entered-label"
-                                              )}
-                                    </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>
-                </div>
+                                              )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                }
+                            />
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_planningconditionss73s79id.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_planningconditionss73s79id = (props) => {
     let { t } = useTranslation();
@@ -13,390 +16,314 @@ const Pinswg_planningconditionss73s79id = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={
+         _.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -411,85 +338,60 @@ const Pinswg_planningconditionss73s79id = (props) => {
                                                   )
                                             : t(
                                                   "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+     }
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_planningobligationappeals106id.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_planningobligationappeals106id = (props) => {
     let { t } = useTranslation();
@@ -13,390 +16,313 @@ const Pinswg_planningobligationappeals106id = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -412,84 +338,58 @@ const Pinswg_planningobligationappeals106id = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_rowid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_rowid = (props) => {
     let { t } = useTranslation();
@@ -13,442 +16,359 @@ const Pinswg_rowid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                        <SummaryRow
+                            label={"Specialist Case Process"}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_specialistcaseprocess@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
 
-                                <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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreeningrequired@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-case-relevant-authoritylabel"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              }) ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        <SummaryRow
+                            label={t(
+                                "case:summary-case-relevant-authoritylabel"
+                            )}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value',
+                                          json: transLookup,
+                                          eval: true
+                                      }) ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -464,84 +384,58 @@ const Pinswg_rowid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/case/summaryTypes/pinswg_transportandworkactid.js

@@ -3,6 +3,8 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
 
 const Pinswg_transportandworkactid = (props) => {
     let { t } = useTranslation();
@@ -59,12 +61,13 @@ const Pinswg_transportandworkactid = (props) => {
                                 </h2>
 
                                 <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-case-type-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+                                    <SummaryRow
+
+                                        label={t("case:summary-case-type-label")}
+
+                                        value={
+
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -80,17 +83,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                   ] ||
                                                   t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-eia-required-label"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+
+                                        value={
+
+                                            router.locale == "cy"
                                                 ? jsonpath(
                                                       '$..[?(@.value=="' +
                                                           detailsObj[
@@ -104,18 +110,24 @@ const Pinswg_transportandworkactid = (props) => {
                                                   ] ||
                                                   t(
                                                       "case:summary-to-be-confirmed-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
 
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                        }
+
+                                    />
+
+                                    <SummaryRow
+
+
+                                        label={t(
                                                 "case:summary-case-recommendation-label"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {router.locale == "cy"
+
+
+                                        value={
+
+
+                                            router.locale == "cy"
                                                 ? jsonpath({
                                                       path:
                                                           '$..[?(@ && @.value=="' +
@@ -127,18 +139,23 @@ const Pinswg_transportandworkactid = (props) => {
                                                 : detailsObj.pinswg_recommendation ||
                                                   t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+
+
+                                        }
+
+
+                                    />
                                     {detailsObj.pinswg_webaddress != null && (
-                                        <div className="govuk-summary-list__row">
-                                            <dt className="govuk-summary-list__key">
-                                                {t(
+                                        <SummaryRow
+
+                                            label={t(
                                                     "case:summary-case-website-label"
                                                 )}
-                                            </dt>
-                                            <dd className="govuk-summary-list__value">
-                                                {router.locale == "cy"
+
+                                            value={
+
+                                                router.locale == "cy"
                                                     ? jsonpath({
                                                           path:
                                                               '$..[?(@ && @.value=="' +
@@ -150,9 +167,11 @@ const Pinswg_transportandworkactid = (props) => {
                                                     : detailsObj.pinswg_webaddress ||
                                                       t(
                                                           "case:summary-no-date-entered-label"
-                                                      )}
-                                            </dd>
-                                        </div>
+                                                      )
+
+                                            }
+
+                                        />
                                     )}
                                 </dl>
                             </div>
@@ -165,12 +184,13 @@ const Pinswg_transportandworkactid = (props) => {
                                     {t("case:summary-dates-label")}
                                 </h3>
                                 <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-event-date-label")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                    <SummaryRow
+
+                                        label={t("case:summary-event-date-label")}
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateeventrequested"
                                             )
@@ -185,17 +205,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-decision-date-label"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_casedecisiondate"
                                             )
@@ -210,18 +233,24 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
 
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                        }
+
+                                    />
+
+                                    <SummaryRow
+
+
+                                        label={t(
                                                 "case:summary-application-accepted-as-valid"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+
+                                        value={
+
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_applicationacceptedasvalid"
                                             )
@@ -236,17 +265,22 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+
+                                        }
+
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-application-rejected-as-invalid"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_applicationrejectedasinvalid"
                                             )
@@ -261,17 +295,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-confirm-request-to-vary-application"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_confirmrequesttovaryapplication"
                                             )
@@ -286,17 +323,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-date-of-decisions"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofdecision"
                                             )
@@ -311,17 +351,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-date-of-request-to-vary"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofrequesttovarytheapplication"
                                             )
@@ -336,17 +379,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-date-of-submission-of-application"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateofsubmissionofapplication"
                                             )
@@ -361,17 +407,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-date-project-published-to-website"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_dateprojectpublishedonwebsite"
                                             )
@@ -386,17 +435,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-deadline-for-submission-of-application"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_deadlineforsubmissionofapplication"
                                             )
@@ -411,17 +463,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-end-of-representation-period"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_endofrepresentationperiod"
                                             )
@@ -436,17 +491,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-inspector-report-submission-to-welsh-government"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_inspectorreportsubmittedtowelshgovernment"
                                             )
@@ -461,17 +519,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-procedure-confirmed"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_procedureconfirmed"
                                             )
@@ -486,17 +547,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-reject-request-to-vary-application"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_rejectrequesttovaryapplication"
                                             )
@@ -511,15 +575,18 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-report-due-by")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t("case:summary-report-due-by")}
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_reportdueby"
                                             )
@@ -534,15 +601,18 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-suspension-dates")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t("case:summary-suspension-dates")}
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensiondates"
                                             )
@@ -557,17 +627,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-suspension-end-dates"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensionenddates"
                                             )
@@ -582,17 +655,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-suspension-start-dates"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_suspensionstartdates"
                                             )
@@ -607,17 +683,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-valid-notice-of-intention-to-submit-an-application"
                                             )}
-                                        </dt>{" "}
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_validnoticeofintentiontosubmitanapplicati"
                                             )
@@ -632,15 +711,18 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t("case:summary-withdrawn-date")}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t("case:summary-withdrawn-date")}
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_withdrawndate"
                                             )
@@ -655,17 +737,20 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
+                                                  )
+
+                                        }
+
+                                    />
+                                    <SummaryRow
+
+                                        label={t(
                                                 "case:summary-written-acceptance-of-notice"
                                             )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(
+
+                                        value={
+
+                                            _.has(
                                                 detailsObj,
                                                 "pinswg_writtenacceptanceofnotification"
                                             )
@@ -680,9 +765,11 @@ const Pinswg_transportandworkactid = (props) => {
                                                       )
                                                 : t(
                                                       "case:summary-no-date-entered-label"
-                                                  )}
-                                        </dd>
-                                    </div>
+                                                  )
+
+                                        }
+
+                                    />
                                 </dl>
                             </div>
                         </div>

components/case/summaryTypes/pinswg_wayleaveid.js

@@ -3,6 +3,9 @@ import _ from "lodash";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import transLookup from "../../../data/lookuptranslations.json";
+import SummaryCard from "../summary/components/SummaryCard";
+import SummaryRow from "../summary/components/SummaryRow";
+import { getCaseLpaDisplayLines } from "../../utils/getCaseLpaDisplayValue";
 
 const Pinswg_wayleaveid = (props) => {
     let { t } = useTranslation();
@@ -13,419 +16,338 @@ const Pinswg_wayleaveid = (props) => {
     return (
         <div className="govuk-grid-row">
             <div className="flex-container grid-row govuk-body case">
-                <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">
-                                {t("case:summary-case-details-label")}
-                            </h2>
-
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-case-type-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                <SummaryCard
+                    id="case-details-card"
+                    title={t("case:summary-case-details-label")}
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-case-type-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "pinswg_appealcasetype@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-lpa-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
-                                                  "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
-                                              ] || ""}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-eia-required-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath(
-                                                  '$..[?(@.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  transLookup
-                                              )
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-lpa-label")}
+                            value={
+                                <>
+                                    {getCaseLpaDisplayLines({
+                                        casesObj,
+                                        detailsObj,
+                                        locale: router.locale,
+                                        transLookup
+                                    }).map((name) => (
+                                        <div key={name}>{name}</div>
+                                    ))}
+                                </>
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-eia-required-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath(
+                                          '$..[?(@.value=="' +
+                                              detailsObj[
                                                   "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-to-be-confirmed-label"
-                                              )}
-                                    </dd>
-                                </div>
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-procedure-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          transLookup
+                                      )
+                                    : detailsObj[
+                                          "pinswg_detailedeiascreening@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-to-be-confirmed-label")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-procedure-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-type-of-event-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              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({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      casesObj[
-                                                          "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : casesObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
+                                      ] || ""
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-status-label")}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              casesObj[
                                                   "statuscode@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-decision-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.value=="' +
-                                                      detailsObj[
-                                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : detailsObj[
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : casesObj[
+                                          "statuscode@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        <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({
+                                          path:
+                                              '$..[?(@ && @.value=="' +
+                                              detailsObj[
                                                   "pinswg_decision@OData.Community.Display.V1.FormattedValue"
-                                              ] ||
-                                              t(
-                                                  "case:summary-no-information-to-date-label"
-                                              )}
+                                              ] +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : detailsObj[
+                                          "pinswg_decision@OData.Community.Display.V1.FormattedValue"
+                                      ] ||
+                                      t(
+                                          "case:summary-no-information-to-date-label"
+                                      )}
 
-                                        <br />
-                                        {/* <Link href="/">
+                                <br />
+                                {/* <Link href="/">
                                 <a>
                                     {casesObj.caseDetails
                                         .outcome_document || ""}
                                 </a>
                             </Link> */}
-                                    </dd>
-                                </div>
-                                {casesObj.numberofchildincidents > 0 && (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-case-link-status-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {_.has(casesObj, [
-                                                "numberofchildincidents",
-                                            ])
-                                                ? casesObj.numberofchildincidents >
-                                                  0
-                                                    ? t(
-                                                          "case:summary-case-link-status-linked"
-                                                      )
-                                                    : t(
-                                                          "case:summary-case-link-status-not-linked"
-                                                      )
-                                                : t(
-                                                      "case:summary-case-link-status-not-linked"
-                                                  )}
-                                        </dd>
-                                    </div>
-                                )}
-                                {casesObj.numberofchildincidents > 0 ? (
-                                    <div className="govuk-summary-list__row">
-                                        <dt className="govuk-summary-list__key">
-                                            {t(
-                                                "case:summary-linked-cases-label"
-                                            )}
-                                        </dt>
-                                        <dd className="govuk-summary-list__value">
-                                            {linkedCasesList(
-                                                props.currentView
-                                                    .linkedCaseReferences
-                                            )}
-                                        </dd>
-                                    </div>
-                                ) : (
-                                    ""
-                                )}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-case-relevant-authoritylabel"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {router.locale == "cy"
-                                            ? jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value_cy',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              })
-                                            : jsonpath({
-                                                  path:
-                                                      '$..[?(@ && @.pinswg_lpa=="' +
-                                                      detailsObj.pinswg_relevantauthorityname +
-                                                      '")].value',
-                                                  json: transLookup,
-                                                  eval: true,
-                                              }) ||
-                                              t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
-                            </dl>
+                            </dd>
                         </div>
-                    </div>
-                </div>
-                <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">
-                                {t("case:summary-dates-label")}
-                            </h3>
-                            <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-start-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(detailsObj, "pinswg_startdate")
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdate
+                        {casesObj.numberofchildincidents > 0 && (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-case-link-status-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {_.has(casesObj, ["numberofchildincidents"])
+                                        ? casesObj.numberofchildincidents > 0
+                                            ? t(
+                                                  "case:summary-case-link-status-linked"
                                               )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_startdates"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_startdates
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_startdates
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
                                             : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                                  "case:summary-case-link-status-not-linked"
+                                              )
+                                        : t(
+                                              "case:summary-case-link-status-not-linked"
+                                          )}
+                                </dd>
+                            </div>
+                        )}
+                        {casesObj.numberofchildincidents > 0 ? (
+                            <div className="govuk-summary-list__row">
+                                <dt className="govuk-summary-list__key">
+                                    {t("case:summary-linked-cases-label")}
+                                </dt>
+                                <dd className="govuk-summary-list__value">
+                                    {linkedCasesList(
+                                        props.currentView.linkedCaseReferences
+                                    )}
+                                </dd>
+                            </div>
+                        ) : (
+                            ""
+                        )}
+                        <SummaryRow
+                            label={t(
+                                "case:summary-case-relevant-authoritylabel"
+                            )}
+                            value={
+                                router.locale == "cy"
+                                    ? jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value_cy',
+                                          json: transLookup,
+                                          eval: true
+                                      })
+                                    : jsonpath({
+                                          path:
+                                              '$..[?(@ && @.pinswg_lpa=="' +
+                                              detailsObj.pinswg_relevantauthorityname +
+                                              '")].value',
+                                          json: transLookup,
+                                          eval: true
+                                      }) ||
+                                      t("case:summary-no-date-entered-label")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
+                <SummaryCard
+                    id="key-dates-card"
+                    title={t("case:summary-dates-label")}
+                    headingTag="h3"
+                >
+                    <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
+                        <SummaryRow
+                            label={t("case:summary-start-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_startdate")
+                                    ? !_.isEmpty(detailsObj.pinswg_startdate)
+                                        ? formatDates(
+                                              detailsObj.pinswg_startdate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(detailsObj, "pinswg_startdates")
+                                      ? !_.isEmpty(detailsObj.pinswg_startdates)
+                                          ? formatDates(
+                                                detailsObj.pinswg_startdates
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-questionnaire-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_questionnaireduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_questionnaireduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_questionnaireduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t(
+                                "case:summary-questionnaire-due-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_questionnaireduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_questionnaireduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_questionnaireduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-statement-due-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_statementduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_statementduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_statementduedate
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                        <SummaryRow
+                            label={t("case:summary-statement-due-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_statementduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_statementduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_statementduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-interested-party-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-interested-party-date-label"
+                            )}
+                            value={
+                                _.has(
+                                    detailsObj,
+                                    "pinswg_otherpartiesstatement"
+                                )
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_otherpartiesstatement
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_otherpartiesstatement
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : _.has(
                                             detailsObj,
-                                            "pinswg_otherpartiesstatement"
+                                            "pinswg_otherpartiesstatements"
                                         )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatement
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatement
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : _.has(
-                                                  detailsObj,
-                                                  "pinswg_otherpartiesstatements"
-                                              )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_otherpartiesstatements
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_otherpartiesstatements
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+                                      ? !_.isEmpty(
+                                            detailsObj.pinswg_otherpartiesstatements
+                                        )
+                                          ? formatDates(
+                                                detailsObj.pinswg_otherpartiesstatements
+                                            )
+                                          : t(
+                                                "case:summary-no-date-entered-label"
+                                            )
+                                      : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t(
-                                            "case:summary-applicant-final-comments-date-label"
-                                        )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_finalcommentsduedate"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_finalcommentsduedate
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_finalcommentsduedate
-                                                  )
-                                                : 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(
+                        <SummaryRow
+                            label={t(
+                                "case:summary-applicant-final-comments-date-label"
+                            )}
+                            value={
+                                _.has(detailsObj, "pinswg_finalcommentsduedate")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_finalcommentsduedate
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_finalcommentsduedate
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
+                        {/* <SummaryRow
+     label={t(
                                             "case:summary-inquiry-evidence-date-label"
                                         )}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
+     value={_.has(
                                             detailsObj,
                                             "pinswg_proofsofevidencewrittenstatementsofeviden"
                                         )
@@ -441,84 +363,58 @@ const Pinswg_wayleaveid = (props) => {
                                             : t(
                                                   "case:summary-no-date-entered-label"
                                               )}
-                                    </dd>
-                                </div> */}
-                                <div className="govuk-summary-list__row">
-                                    <dt className="govuk-summary-list__key">
-                                        {t("case:summary-event-date-label")}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {_.has(
-                                            detailsObj,
-                                            "pinswg_dateeventrequested"
-                                        )
-                                            ? !_.isEmpty(
-                                                  detailsObj.pinswg_dateeventrequested
-                                              )
-                                                ? formatDates(
-                                                      detailsObj.pinswg_dateeventrequested
-                                                  )
-                                                : t(
-                                                      "case:summary-no-date-entered-label"
-                                                  )
-                                            : t(
-                                                  "case:summary-no-date-entered-label"
-                                              )}
-                                    </dd>
-                                </div>
+ /> */}
+                        <SummaryRow
+                            label={t("case:summary-event-date-label")}
+                            value={
+                                _.has(detailsObj, "pinswg_dateeventrequested")
+                                    ? !_.isEmpty(
+                                          detailsObj.pinswg_dateeventrequested
+                                      )
+                                        ? formatDates(
+                                              detailsObj.pinswg_dateeventrequested
+                                          )
+                                        : t(
+                                              "case:summary-no-date-entered-label"
+                                          )
+                                    : t("case:summary-no-date-entered-label")
+                            }
+                        />
 
-                                <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")}
-                                    </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>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
+                        <SummaryRow
+                            label={t("case:summary-start-event-date-label")}
+                            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")
+                            }
+                        />
+                        <SummaryRow
+                            label={t("case:summary-decision-date-label")}
+                            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")
+                            }
+                        />
+                    </dl>
+                </SummaryCard>
             </div>
         </div>
     );

components/header.js

@@ -7,7 +7,7 @@ import { connect } from "react-redux";
 import Banner from "../components/banner";
 import { setLogout } from "../store/accountDetails/action";
 
-import { signOut } from "next-auth/react";
+import { performPortalSignOut } from "../lib/auth/sessionClient";
 
 const Header = (props) => {
     let { t, lang } = useTranslation();
@@ -84,15 +84,7 @@ const Header = (props) => {
     }
 
     const handleLogout = () => {
-        console.info("////////////\n" + "logout" + "\n////////////");
-        (window.localStorage.clear(),
-            destroyCookie(null, "next-auth.csrf-token", { path: "/" }),
-            destroyCookie(null, "next-auth.callback-url", { path: "/" }),
-            destroyCookie(null, "pedw_locale", { path: "/" }),
-            destroyCookie(null, "pinsUser", { path: "/" }),
-            signOut({
-                callbackUrl: locale == "cy" ? "/cy/allgofnodi" : "/logout"
-            }));
+        performPortalSignOut(locale);
     };
 
     //const switchLocale = locale === "en" ? "cy" : "en";

components/myportal.js

@@ -2,7 +2,6 @@ import { signOut } from "next-auth/react";
 import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { destroyCookie } from "nookies";
 import TimeOut from "../components/timeout";
 import AwaitingSubmissionFromBlob from "./myportal/awaitingsubmissionfromblob";
 
@@ -17,6 +16,7 @@ import MySubmittedReps from "./myportal/mysubmittedrepresentations";
 import ServiceBanner from "./myportal/servicebanner";
 import { JSONPath as jsonpath } from "jsonpath-plus";
 import transLookup from "../data/lookuptranslations.json";
+import { performPortalSignOut } from "../lib/auth/sessionClient";
 
 const MyPortal = (props) => {
     const { showFileUpload, showLoginCheck, docsOffline } = props;
@@ -26,15 +26,7 @@ const MyPortal = (props) => {
     const { locale } = router;
 
     const handleLogout = () => {
-        console.info("////////////\n" + "logout" + "\n////////////");
-        (window.localStorage.clear(),
-            destroyCookie(null, "next-auth.csrf-token", { path: "/" }),
-            destroyCookie(null, "next-auth.callback-url", { path: "/" }),
-            destroyCookie(null, "pedw_locale", { path: "/" }),
-            destroyCookie(null, "pinsUser", { path: "/" }),
-            signOut({
-                callbackUrl: locale == "cy" ? "/cy/allgofnodi" : "/logout"
-            }));
+        performPortalSignOut({ locale, signOutFn: signOut });
     };
 
     const isLPA =

components/myportal/awaitingsubmissionfromblob.js

@@ -353,8 +353,8 @@ const AwaitingSubmissionFromBlob = (props) => {
                 <h3 className="heading-small card-heading">
                     {t("myportal:awatitingsubmission-card-title")}
                 </h3>
-
                 <TopThreeRow />
+
                 {props.awaitingSubmissionFromBlob["@odata.count"] > 1 && (
                     <div className="cardVieAll">
                         <Link

components/myportal/myrepresentations.js

@@ -44,7 +44,7 @@ const MyRepresentations = (props) => {
                             onClick={() => {
                                 setCurrentView({
                                     "viewName": "My Representations",
-                                    "viewKey": "myRepresentations",
+                                    "viewKey": "myRepresentations"
                                 });
                             }}
                         >
@@ -65,7 +65,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         setCurrentView: (currentView) => {
             dispatch(setCurrentView(currentView));
-        },
+        }
     };
 };
 

components/myportal/myrepresentationsfromblob.js

@@ -43,7 +43,7 @@ const MyRepresentations = (props) => {
                             onClick={() => {
                                 setCurrentView({
                                     "viewName": "My Representations",
-                                    "viewKey": "myRepresentations",
+                                    "viewKey": "myRepresentations"
                                 });
                             }}
                         >
@@ -64,7 +64,7 @@ const mapDispatchToProps = (dispatch) => {
     return {
         setCurrentView: (currentView) => {
             dispatch(setCurrentView(currentView));
-        },
+        }
     };
 };
 

components/myportal/servicebanner.js

@@ -1,8 +1,7 @@
 import useTranslation from "next-translate/useTranslation";
 import router from "next/router";
 import Link from "next/link";
-import { destroyCookie } from "nookies";
-import { signOut } from "next-auth/react";
+import { performPortalSignOut } from "../../lib/auth/sessionClient";
 
 const ServiceBanner = (props) => {
     props = props.props;
@@ -19,23 +18,14 @@ const ServiceBanner = (props) => {
     };
 
     const handleLogout = (locale) => {
-        console.info("////////////\n" + "logout" + "\n////////////");
-        window.localStorage.clear(),
-            destroyCookie(null, "next-auth.csrf-token"),
-            { path: "/" },
-            destroyCookie(null, "next-auth.callback-url", { path: "/" }),
-            destroyCookie(null, "pedw_locale", { path: "/" }),
-            destroyCookie(null, "pinsUser", { path: "/" }),
-            signOut({
-                callbackUrl: locale == "cy" ? "/cy/allgofnodi" : "/logout",
-            });
+        performPortalSignOut(locale);
     };
 
     const portalLogoLink = [
         "/myportal/[appealtypes]",
         "/newappeal",
         "/newappeal/[appealtypes]",
-        "/myportal/representation",
+        "/myportal/representation"
     ];
     return (
         <div className="servicebanner myportal govuk-!-margin-bottom-4">

components/myportal/topthree.js

@@ -314,6 +314,8 @@ const TopThree = (props) => {
                                             ]
                                         ),
                                         setCurrentReference({
+                                            "statuscode":
+                                                showTopThreeArr[key].statuscode,
                                             "ticketnumber":
                                                 showTopThreeArr[key]
                                                     .ticketnumber,

components/myportal/topthree_reps.js

@@ -218,6 +218,8 @@ const TopThree = (props) => {
                                 data-id={index}
                                 onClick={() => {
                                     setCurrentReference({
+                                        "statuscode":
+                                            showTopThreeArr[key].statuscode,
                                         "ticketnumber":
                                             showTopThreeArr[key].ticketnumber,
                                         "currentReference":
@@ -236,8 +238,12 @@ const TopThree = (props) => {
                                                 ? "/fymhorth/representation"
                                                 : "/myportal/representation",
                                         query: {
-                                            case: showTopThreeArr[key]
-                                                .ticketnumber,
+                                            case:
+                                                showTopThreeArr[key]
+                                                    .ticketnumber ||
+                                                showTopThreeArr[key].caseRef ||
+                                                showTopThreeArr[key]
+                                                    .pinswg_name,
                                             state: "edit",
                                             created:
                                                 showTopThreeArr[key]

components/myportal/viewall.js

@@ -4,7 +4,7 @@ import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { parseCookies } from "nookies";
-import { useCallback, useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 import {
     deleteAwaitingSubmissionsFromBlob,
@@ -98,7 +98,7 @@ const ViewAllResults = (props) => {
     const isWatchedCases = currentViewKey === "watchedCases";
     const isMyCases = currentViewKey === "myCases";
 
-    var resultsArr = isAwaitingSubmissionDetails
+    const resultsArr = isAwaitingSubmissionDetails
         ? props["awaitingSubmission"].awaitingSubmissionDetails.case
         : isMySubmittedReps
           ? props[currentViewKey][currentViewKey]
@@ -286,6 +286,7 @@ const ViewAllResults = (props) => {
         }
 
         setCurrentReference({
+            "statuscode": item.statuscode ?? null,
             ticketnumber: item.ticketnumber,
             currentReference: getCurrentReference(item),
             currentType: currentViewKey,
@@ -451,10 +452,10 @@ const ViewAllResults = (props) => {
                             const renderLineBreak = valueToDisplay && idx < 4; // Only insert <br> if it's not the last element
 
                             return (
-                                <>
+                                <span key={`${field}-${idx}`}>
                                     {valueToDisplay}
                                     {renderLineBreak && <br />}
-                                </>
+                                </span>
                             );
                         })}
                     </dd>
@@ -844,15 +845,12 @@ const ViewAllResults = (props) => {
         //setShowSpinnerState(true);
     };
 
-    const getSearchPageResults = useCallback(
-        (pageNumber, orderBy, fieldSort) => {
-            //console.log(advancedSearch, searchString, pageNumber);
-            //console.log(pageNumber, orderBy, fieldSort);
-            resultsArr.sort(dynamicSort(orderBy, fieldSort));
-            //console.log(resultsArr);
-        },
-        [selectedOption]
-    );
+    const getSearchPageResults = (pageNumber, orderBy, fieldSort) => {
+        //console.log(advancedSearch, searchString, pageNumber);
+        //console.log(pageNumber, orderBy, fieldSort);
+        resultsArr.sort(dynamicSort(orderBy, fieldSort));
+        //console.log(resultsArr);
+    };
 
     function dynamicSort(property, order) {
         var sort_order = 1;

components/newappeal/aboutyou.js

@@ -452,6 +452,14 @@ let AboutYou = (props) => {
     const isAgentSelected = appellantAgentValue == "846040001";
     const isAppellantSelected = appellantAgentValue == "846040000";
 
+    console.log(
+        "================",
+        props.initialValues.pinswg_typeofinvolvement
+    );
+
+    //props.initialValues.pinswg_typeofinvolvement === 846040000 &&
+    //    setIsAgent(true);
+
     const yesNo = isWelsh ? ["Ydw", "Na"] : ["Yes", "No"];
     const appellantAgent = isWelsh
         ? ["Apelydd", "Asiant"]
@@ -499,11 +507,14 @@ let AboutYou = (props) => {
         if (isAgentSelected && isAgent == false) {
             updateField("caseForm", "pinswg_appellantfirstname", "");
             updateField("caseForm", "pinswg_appellantlastname", "");
+            updateField("caseForm", "company", "");
             updateField("caseForm", "pinswg_appellantemailaddress", "");
             updateField("caseForm", "pinswg_appellantaddress", "");
             updateField("caseForm", "pinswg_appellantphonenumber", "");
             setIsAgent(true);
-        } //else {
+        }
+
+        //else {
         // updateField(
         //     "caseForm",
         //     "pinswg_appellantfirstname",
@@ -602,6 +613,17 @@ let AboutYou = (props) => {
                         )}
                         maxFieldLength="200"
                     />
+                    <Field
+                        name={"pinswg_appellantcompany"}
+                        id={"pinswg_appellantcompany"}
+                        component={RenderTextfield}
+                        type="text"
+                        className="govuk-input govuk-input--width-20"
+                        label={t(
+                            "newappeal:about-you-agent-contact-details-companyname-label"
+                        )}
+                        maxFieldLength="200"
+                    />
                     <Field
                         name={"pinswg_appellantaddress"}
                         id={"pinswg_appellantaddress"}
@@ -889,12 +911,27 @@ const mapStateToProps = (state) => {
                 state.accountDetails.accountDetails.firstname,
             pinswg_appellantlastname:
                 state.accountDetails.accountDetails.lastname,
+            pinswg_appellantcompany:
+                state.accountDetails.accountDetails.pinswg_companyname,
             pinswg_appellantemailaddress:
                 state.accountDetails.accountDetails.emailaddress1,
             pinswg_appellantaddress:
                 state.accountDetails.accountDetails.address1_composite,
             pinswg_appellantphonenumber:
-                state.accountDetails.accountDetails.telephone1
+                state.accountDetails.accountDetails.telephone1,
+            pinswg_agentcompanyname:
+                state.accountDetails.accountDetails.pinswg_companyname,
+            pinswg_agentfirstname:
+                state.accountDetails.accountDetails.firstname,
+            pinswg_agentlastname: state.accountDetails.accountDetails.lastname,
+            pinswg_agentemailaddress:
+                state.accountDetails.accountDetails.emailaddress1,
+            pinswg_agentaddress:
+                state.accountDetails.accountDetails.address1_composite,
+            pinswg_agentphonenumber:
+                state.accountDetails.accountDetails.telephone1,
+            pinswg_typeofinvolvement:
+                state.accountDetails.accountDetails.pinswg_typeofinvolvement
         }
     };
 };

components/newappeal/buildsection.js

@@ -375,8 +375,8 @@ let BuildSection = (props) => {
                 doc,
                 whichField
             );
-
-            return errorFieldLabel[0].value;
+            // console.log(errorFieldLabel[0]?.value);
+            return errorFieldLabel[0]?.value;
         };
 
         let errorItems = [];
@@ -405,10 +405,10 @@ let BuildSection = (props) => {
             <div className="govuk-grid-column-two-thirds wgForm ">
                 <SectionHeader title={FieldsTranslations(titles[0].value)} />
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
-                    <ErrorSummary
+                    {/* <ErrorSummary
                         hasErrors={hasErrors == true}
                         errorItems={getErrorItems()}
-                    />
+                    /> */}
                     <BuildRow
                         rowXML={rowXML}
                         whichSection={props.whichSection}

components/newappeal/complete.js

@@ -13,6 +13,8 @@ let CompleteAppeal = (props) => {
     const legacyProps = props.props;
     const legacyFormState = legacyProps.form;
     const legacyAccountDetails = legacyProps.accountDetails;
+    const router = useRouter();
+    const { locale } = router;
 
     useEffect(() => {
         let incidentId = props.appealType.caseReference.incidentid;
@@ -77,14 +79,12 @@ let CompleteAppeal = (props) => {
         legacyAccountDetails.loggedinUserId,
         props.appealType.appealTypeID,
         legacyAccountDetails.loggedinUserEmail,
-        legacyAccountDetails.containerID
+        legacyAccountDetails.containerID,
+        router.locale
     ]);
 
     let { t } = useTranslation();
 
-    const router = useRouter();
-    const { locale } = router;
-
     const {
         formXML,
         sectionCount,

components/representation.js

@@ -17,6 +17,12 @@ const CaseRepresentation = (props) => {
             <div className="govuk-grid-row">
                 <div className="govuk-grid-column-full">
                     <Summary
+                        isAppellant={
+                            props.props.accountDetails.accountDetails
+                                .emailaddress1 ===
+                            props.searchResultsObj?.value?.[0]
+                                ?.customerid_contact?.emailaddress1
+                        }
                         myCases={props.myCases}
                         myRepresentations={props.myRepresentations}
                         watchedCases={props.watchedCases}

components/search/addresssearchresults.js

@@ -30,6 +30,7 @@ import {
     getWatchedCasesProxy
 } from "../../actions/services/portalService";
 import RepsOnResults from "./repsonresults";
+import LiveLink from "./liveLink";
 
 const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 
@@ -394,6 +395,13 @@ const SearchResults = (props) => {
                                         <RepsOnResults
                                             detailsObj={detailsObj}
                                         />
+                                        <LiveLink
+                                            detailsObj={detailsObj}
+                                            appealType={
+                                                item.pinswg_appealcasetype
+                                            }
+                                            locale={locale}
+                                        />
                                     </dd>
                                     <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                         <span className="results-visually-hidden">
@@ -890,20 +898,23 @@ const SearchResults = (props) => {
 
             setCurrentPage(pageNumber);
 
-            resultsArr = _.sortBy(resultsArr, [
-                function (o) {
-                    return o[orderBy];
-                }
-            ]);
+            let sortedResults = [];
+            setResultsArr((previousResults) => {
+                sortedResults = _.sortBy(previousResults, [
+                    function (o) {
+                        return o[orderBy];
+                    }
+                ]);
 
-            fieldSort == "desc" && resultsArr.reverse();
+                fieldSort == "desc" && sortedResults.reverse();
+                return sortedResults;
+            });
 
             setShowSpinnerState(false);
-            setResultsArr(resultsArr);
 
             console.log(
                 "================================\n",
-                resultsArr,
+                sortedResults,
                 "sort done",
                 "\n=================================\n"
             );

components/search/advancedsearch.js

@@ -3,9 +3,11 @@ import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, formValueSelector, reduxForm } from "redux-form";
-
+import { useEffect, useState } from "react";
 import transLookup from "../../data/lookuptranslations.json";
 
+import { getCaseStatus } from "../../actions/services/caseDirectService";
+
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
 
@@ -120,7 +122,7 @@ const RenderCaseStatusList = ({
     optionsObj,
     meta: { touched, error },
     label,
-    errormsg,
+    errormsg
 }) => {
     let { t } = useTranslation();
     const router = useRouter();
@@ -170,23 +172,17 @@ const RenderCaseStatusList = ({
                                           {_.isEmpty(optionsObj[key])
                                               ? ""
                                               : _.isEmpty(optionsObj[key])
-                                              ? ""
-                                              : _.isEmpty(optionsObj[key].value)
-                                              ? ""
-                                              : router.locale == "cy"
-                                              ? jsonpath({
-                                                    path:
-                                                        '$..[?(@ && @.statuscode=="' +
-                                                        optionsObj[key]
-                                                            .statuscode +
-                                                        '")].value_cy',
-                                                    json: optionsObj,
-                                                    eval: true,
-                                                })
-                                              : optionsObj[key].value ||
-                                                t(
-                                                    "case:summary-no-date-entered-label"
-                                                )}
+                                                ? ""
+                                                : _.isEmpty(
+                                                        optionsObj[key].value
+                                                    )
+                                                  ? ""
+                                                  : router.locale == "cy"
+                                                    ? `${optionsObj[key].value_cy} (${optionsObj[key].caseCount || 0})`
+                                                    : `${optionsObj[key].value} (${optionsObj[key].caseCount || 0})` ||
+                                                      t(
+                                                          "case:summary-no-date-entered-label"
+                                                      )}
                                       </option>
                                   );
                               })}
@@ -211,7 +207,7 @@ let AdvancedSearch = (props) => {
         error,
         pristine,
         reset,
-        submitting,
+        submitting
     } = props;
 
     const appealOptionsObj =
@@ -229,6 +225,11 @@ let AdvancedSearch = (props) => {
             ? props.LPAData.LPAData.value
             : [{}];
 
+    const caseStatusObject =
+        props?.LPAData?.caseStatusObj?.length > 0
+            ? props.LPAData.caseStatusObj
+            : [{}];
+
     const RenderLPAList = ({
         name,
         id,
@@ -236,7 +237,7 @@ let AdvancedSearch = (props) => {
         optionsObj,
         meta: { touched, error },
         label,
-        errormsg,
+        errormsg
     }) => {
         return (
             <>
@@ -291,7 +292,7 @@ let AdvancedSearch = (props) => {
                                                                 .name +
                                                             '")].value_cy',
                                                         json: transLookup,
-                                                        eval: true,
+                                                        eval: true
                                                     })
                                                   : optionsObj[key].name ||
                                                     t(
@@ -314,7 +315,7 @@ let AdvancedSearch = (props) => {
         optionsObj,
         meta: { touched, error },
         label,
-        errormsg,
+        errormsg
     }) => {
         return (
             <>
@@ -361,47 +362,52 @@ let AdvancedSearch = (props) => {
                                                   _.isEmpty(optionsObj[key])
                                                       ? ""
                                                       : _.isEmpty(
-                                                            optionsObj[key]
-                                                        )
-                                                      ? ""
-                                                      : _.isEmpty(
-                                                            optionsObj[key]
-                                                                .value
-                                                        )
-                                                      ? ""
-                                                      : optionsObj[key]
-                                                            .attributevalue +
-                                                        "," +
-                                                        optionsObj[key].value
-                                                            .replace(
-                                                                /(\band|[\s\-\+\(\)\,\&])/g,
-                                                                ""
+                                                              optionsObj[key]
+                                                          )
+                                                        ? ""
+                                                        : _.isEmpty(
+                                                                optionsObj[key]
+                                                                    .value
                                                             )
-                                                            .toLowerCase()
+                                                          ? ""
+                                                          : optionsObj[key]
+                                                                .attributevalue +
+                                                            "," +
+                                                            optionsObj[
+                                                                key
+                                                            ].value
+                                                                .replace(
+                                                                    /(\band|[\s\-\+\(\)\,\&])/g,
+                                                                    ""
+                                                                )
+                                                                .toLowerCase()
                                               }
                                           >
                                               {_.isEmpty(optionsObj[key])
                                                   ? ""
                                                   : _.isEmpty(optionsObj[key])
-                                                  ? ""
-                                                  : _.isEmpty(
-                                                        optionsObj[key].value
-                                                    )
-                                                  ? ""
-                                                  : router.locale == "cy"
-                                                  ? jsonpath({
-                                                        path:
-                                                            '$..[?(@ && @.value=="' +
+                                                    ? ""
+                                                    : _.isEmpty(
                                                             optionsObj[key]
-                                                                .value +
-                                                            '")].value_cy',
-                                                        json: transLookup,
-                                                        eval: true,
-                                                    })
-                                                  : optionsObj[key].value ||
-                                                    t(
-                                                        "case:summary-no-date-entered-label"
-                                                    )}
+                                                                .value
+                                                        )
+                                                      ? ""
+                                                      : router.locale == "cy"
+                                                        ? jsonpath({
+                                                              path:
+                                                                  '$..[?(@ && @.value=="' +
+                                                                  optionsObj[
+                                                                      key
+                                                                  ].value +
+                                                                  '")].value_cy',
+                                                              json: transLookup,
+                                                              eval: true
+                                                          })
+                                                        : optionsObj[key]
+                                                              .value ||
+                                                          t(
+                                                              "case:summary-no-date-entered-label"
+                                                          )}
                                           </option>
                                       );
                                   })}
@@ -418,7 +424,7 @@ let AdvancedSearch = (props) => {
         optionsObj,
         meta: { touched, error },
         label,
-        errormsg,
+        errormsg
     }) => {
         return (
             <>
@@ -465,49 +471,51 @@ let AdvancedSearch = (props) => {
                                                   _.isEmpty(optionsObj[key])
                                                       ? ""
                                                       : _.isEmpty(
-                                                            optionsObj[key]
-                                                        )
-                                                      ? ""
-                                                      : _.isEmpty(
-                                                            optionsObj[key]
-                                                                .pinswg_sipsprojecttypeid
-                                                        )
-                                                      ? ""
-                                                      : optionsObj[key]
-                                                            .pinswg_sipsprojecttypeid +
-                                                        "," +
-                                                        optionsObj[
-                                                            key
-                                                        ].pinswg_name
-                                                            .replace(
-                                                                /(\band|[\s\-\+\(\)\,\&])/g,
-                                                                ""
+                                                              optionsObj[key]
+                                                          )
+                                                        ? ""
+                                                        : _.isEmpty(
+                                                                optionsObj[key]
+                                                                    .pinswg_sipsprojecttypeid
                                                             )
-                                                            .toLowerCase()
+                                                          ? ""
+                                                          : optionsObj[key]
+                                                                .pinswg_sipsprojecttypeid +
+                                                            "," +
+                                                            optionsObj[
+                                                                key
+                                                            ].pinswg_name
+                                                                .replace(
+                                                                    /(\band|[\s\-\+\(\)\,\&])/g,
+                                                                    ""
+                                                                )
+                                                                .toLowerCase()
                                               }
                                           >
                                               {_.isEmpty(optionsObj[key])
                                                   ? ""
                                                   : _.isEmpty(optionsObj[key])
-                                                  ? ""
-                                                  : _.isEmpty(
-                                                        optionsObj[key]
-                                                            .pinswg_name
-                                                    )
-                                                  ? ""
-                                                  : router.locale == "cy"
-                                                  ? jsonpath(
-                                                        '$..[?(@.value=="' +
+                                                    ? ""
+                                                    : _.isEmpty(
                                                             optionsObj[key]
-                                                                .pinswg_name +
-                                                            '")].value_cy',
-                                                        transLookup
-                                                    )
-                                                  : optionsObj[key]
-                                                        .pinswg_name ||
-                                                    t(
-                                                        "case:summary-no-date-entered-label"
-                                                    )}
+                                                                .pinswg_name
+                                                        )
+                                                      ? ""
+                                                      : router.locale == "cy"
+                                                        ? jsonpath(
+                                                              '$..[?(@.value=="' +
+                                                                  optionsObj[
+                                                                      key
+                                                                  ]
+                                                                      .pinswg_name +
+                                                                  '")].value_cy',
+                                                              transLookup
+                                                          )
+                                                        : optionsObj[key]
+                                                              .pinswg_name ||
+                                                          t(
+                                                              "case:summary-no-date-entered-label"
+                                                          )}
                                           </option>
                                       );
                                   })}
@@ -550,7 +558,7 @@ let AdvancedSearch = (props) => {
 
         searchString +=
             values.statusCode != null
-                ? "statuscode=" + values.projecttype + "&"
+                ? "statuscode=" + values.statusCode + "&"
                 : "";
 
         searchString +=
@@ -594,7 +602,7 @@ let AdvancedSearch = (props) => {
                                                     t(
                                                         "myportal:searchcases-validation-minlength"
                                                     )
-                                                ),
+                                                )
                                             ]}
                                             className="govuk-input govuk-!-width-two-thirds"
                                             component={RenderTextfield}
@@ -619,7 +627,7 @@ let AdvancedSearch = (props) => {
                                                     t(
                                                         "myportal:searchcases-validation-minlength"
                                                     )
-                                                ),
+                                                )
                                             ]}
                                             className="govuk-input govuk-!-width-two-thirds"
                                             component={RenderLPATextfield}
@@ -681,40 +689,7 @@ let AdvancedSearch = (props) => {
                                             name="statusCode"
                                             id="statusCode"
                                             component={RenderCaseStatusList}
-                                            optionsObj={[
-                                                {
-                                                    "value": "In Progress",
-                                                    "value_cy": "Ar y gweill",
-                                                    "statuscode": 1,
-                                                },
-                                                {
-                                                    "value": "On Hold",
-                                                    "value_cy": "Ar Dal",
-                                                    "statuscode": 2,
-                                                },
-                                                {
-                                                    "value":
-                                                        "Waiting for details",
-                                                    "value_cy":
-                                                        "Aros am fanylion",
-                                                    "statuscode": 3,
-                                                },
-                                                {
-                                                    "value": "Researching",
-                                                    "value_cy": "Ymchwilio",
-                                                    "statuscode": 4,
-                                                },
-                                                {
-                                                    "value": "Case Closed",
-                                                    "value_cy": "Achos ar Gau",
-                                                    "statuscode": 5,
-                                                },
-                                                {
-                                                    "value": "Cancelled",
-                                                    "value_cy": "Wedi'i ganslo",
-                                                    "statuscode": 6,
-                                                },
-                                            ]}
+                                            optionsObj={caseStatusObject}
                                             //validate={[required]}
                                             label={t(
                                                 "search:case-status-label"
@@ -835,7 +810,7 @@ const mapStateToProps = (state) => {
         myCases: state.myCases,
         watchedCases: state.watchedCases,
         myRepresentations: state.myRepresentations,
-        awaitingSubmission: state.awaitingSubmission,
+        awaitingSubmission: state.awaitingSubmission
     };
 };
 
@@ -849,7 +824,7 @@ AdvancedSearch = connect((state) => {
     const appealTypesValue = selector(state, "appealTypes");
 
     return {
-        appealTypesValue,
+        appealTypesValue
     };
 })(AdvancedSearch);
 
@@ -859,6 +834,6 @@ export default connect(
 )(
     reduxForm({
         form: "advancedSearchForm",
-        destroyOnUnmount: false,
+        destroyOnUnmount: false
     })(AdvancedSearch)
 );

components/search/dnssearchresults.js

@@ -8,6 +8,7 @@ import { connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
 import PaginationControl from "./pagination";
 import RepsOnResults from "./repsonresults";
+import LiveLink from "./liveLink";
 
 import {
     getBasicDNSSearchPaged,
@@ -438,6 +439,8 @@ const DNSSearchResults = (props) => {
                                                 className="govuk-link--no-underline"
                                                 onClick={() => {
                                                     setCurrentReference({
+                                                        "statuscode":
+                                                            item.statuscode,
                                                         "ticketnumber":
                                                             item.ticketnumber,
                                                         "currentReference":
@@ -468,6 +471,13 @@ const DNSSearchResults = (props) => {
                                                     item.pinswg_appealcasetype
                                                 }
                                             />
+                                            <LiveLink
+                                                detailsObj={detailsObj}
+                                                appealType={
+                                                    item.pinswg_appealcasetype
+                                                }
+                                                locale={locale}
+                                            />
                                         </dd>
                                         <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                             <span className="results-visually-hidden">
@@ -939,6 +949,20 @@ const DNSSearchResults = (props) => {
                                 )}
                             </a>
                         </p>
+                        <p className="govuk-body">
+                            {t("dnsApplications:page-intro-list-item-3")}
+                            <a
+                                href={t(
+                                    "dnsApplications:page-intro-list-item-3-link"
+                                )}
+                                rel="noreferrer noopener"
+                                target="_blank"
+                            >
+                                {t(
+                                    "dnsApplications:page-intro-list-item-3-link"
+                                )}
+                            </a>
+                        </p>
                     </div>
 
                     {showMap == "true" && (

components/search/liveLink.js

@@ -0,0 +1,33 @@
+import useTranslation from "next-translate/useTranslation";
+import { getLivePublishedEvent } from "../case/summary/utils/liveEvent";
+
+const LiveLink = ({ detailsObj, locale }) => {
+    let { t } = useTranslation();
+
+    const eventsObj = {
+        value: detailsObj?.pinswg_sips_pinswg_sipsevent || []
+    };
+
+    const liveEvent = getLivePublishedEvent(eventsObj);
+
+    if (!liveEvent) return null;
+
+    return (
+        <div className="govuk-!-margin-top-3">
+            <a
+                href={
+                    locale === "en"
+                        ? liveEvent.pinswg_linktotheevent
+                        : liveEvent.pinswg_linktotheeventstreamwelsh
+                }
+                className="govuk-link"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {t("case:live-event-link")}
+            </a>
+        </div>
+    );
+};
+
+export default LiveLink;

components/search/repsonresults.js

@@ -7,6 +7,11 @@ const RepsOnResults = (props) => {
     let { t } = useTranslation();
 
     const detailsObj = props.detailsObj;
+    const isLPA = Boolean(props?.isLPA);
+    const appealType = props?.appealType || detailsObj?.appealType;
+    const specialistProcess =
+        detailsObj?.pinswg_speacialistcaseprocess ||
+        detailsObj?.pinswg_specialistcaseprocess;
 
     function showReps(startDate, endDate) {
         let date = new Date();
@@ -32,22 +37,18 @@ const RepsOnResults = (props) => {
                 return isLPA ? true : false;
 
             case 846040015:
-                return props.searchDetailsObj[0].value[0]
-                    .pinswg_specialistcaseprocess == 846040001
+                return specialistProcess == 846040001
                     ? showReps(
-                          props.searchDetailsObj[0].value[0].pinswg_startdate,
-                          props.searchDetailsObj[0].value[0]
-                              .pinswg_finalcommentsduedate
+                          detailsObj.pinswg_startdate,
+                          detailsObj.pinswg_finalcommentsduedate
                       )
                     : true;
 
             case 846040018:
                 let shouldShow =
-                    props.searchDetailsObj[0].value[0]
-                        .pinswg_speacialistcaseprocess == 846040000 && isLPA
+                    specialistProcess == 846040000 && isLPA
                         ? true
-                        : props.searchDetailsObj[0].value[0]
-                                .pinswg_speacialistcaseprocess == 846040001
+                        : specialistProcess == 846040001
                           ? true
                           : false;
 
@@ -55,8 +56,8 @@ const RepsOnResults = (props) => {
 
             case 846040019:
                 return showReps(
-                    props.searchDetailsObj[0].value[0].pinswg_startdate,
-                    props.searchDetailsObj[0].value[0].pinswg_statementduedate
+                    detailsObj.pinswg_startdate,
+                    detailsObj.pinswg_statementduedate
                 );
 
             default:
@@ -122,7 +123,7 @@ const RepsOnResults = (props) => {
                                                                 )}
                                                             </Link> */}
                                 <div className="govuk-body govuk-!-font-size-14">
-                                    {props.appealType == 846040002
+                                    {appealType == 846040002
                                         ? t(
                                               "case:summary-consultation-open-label"
                                           )
@@ -131,9 +132,7 @@ const RepsOnResults = (props) => {
                                           )}{" "}
                                 </div>
                             </>
-                        ) : !isLPA &&
-                          props.currentView.caseReference.appealType ==
-                              846040004 ? (
+                        ) : !isLPA && appealType == 846040004 ? (
                             ""
                         ) : (
                             <>
@@ -147,10 +146,7 @@ const RepsOnResults = (props) => {
                                                         detailsObj.pinswg_startdate
                                                     ),
                                                     endDate:
-                                                        props.currentView
-                                                            .caseReference
-                                                            .appealType ==
-                                                        846040019
+                                                        appealType == 846040019
                                                             ? formatDates(
                                                                   detailsObj.pinswg_statementduedate
                                                               )

components/search/searchresults.js

@@ -39,6 +39,7 @@ import {
 
 import { sendGAEvent } from "@next/third-parties/google";
 import RepsOnResults from "./repsonresults";
+import LiveLink from "./liveLink";
 import { query } from "jsonpath";
 
 const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -421,6 +422,8 @@ const SearchResults = (props) => {
                                                     }
                                                 ),
                                                     setCurrentReference({
+                                                        "statuscode":
+                                                            item.statuscode,
                                                         "ticketnumber":
                                                             item.ticketnumber,
                                                         "currentReference":
@@ -478,6 +481,13 @@ const SearchResults = (props) => {
                                                 item.pinswg_appealcasetype
                                             }
                                         />
+                                        <LiveLink
+                                            detailsObj={detailsObj}
+                                            appealType={
+                                                item.pinswg_appealcasetype
+                                            }
+                                            locale={locale}
+                                        />
                                     </dd>
                                     <dd className="govuk-summary-list__value govuk-!-font-size-16">
                                         <span className="results-visually-hidden">
@@ -678,7 +688,7 @@ const SearchResults = (props) => {
                                                       '$..[?(@ && @.value=="' +
                                                       item[
                                                           "statuscode@OData.Community.Display.V1.FormattedValue"
-                                                      ] +
+                                                      ].trim() +
                                                       '")].value_cy',
                                                   json: transLookup,
                                                   eval: true

components/timeout/index.js

@@ -1,10 +1,9 @@
-import { signOut } from "next-auth/react";
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
-import { destroyCookie } from "nookies";
 import { useState, useEffect } from "react";
 import { useIdleTimer } from "react-idle-timer";
 import TimeoutModal from "./timeoutmodal";
+import { performPortalSignOut } from "../../lib/auth/sessionClient";
 
 const TimeOut = (props) => {
     let { t } = useTranslation();
@@ -20,15 +19,7 @@ const TimeOut = (props) => {
 
     const onIdle = () => {
         setState("Idle");
-        console.info("////////////\n" + "logout" + "\n////////////");
-        window.localStorage.clear(),
-            destroyCookie(null, "next-auth.csrf-token", { path: "/" }),
-            destroyCookie(null, "next-auth.callback-url", { path: "/" }),
-            destroyCookie(null, "pedw_locale", { path: "/" }),
-            destroyCookie(null, "pinsUser", { path: "/" }),
-            signOut({
-                callbackUrl: locale == "cy" ? "/cy/allgofnodi" : "/logout",
-            });
+        performPortalSignOut(locale);
         setOpen(false);
     };
 
@@ -48,7 +39,7 @@ const TimeOut = (props) => {
         onPrompt,
         timeout,
         promptBeforeIdle,
-        throttle: 500,
+        throttle: 500
     });
 
     useEffect(() => {
@@ -89,14 +80,14 @@ const TimeOut = (props) => {
             <div
                 className={open ? "modal fade show" : "modal fade"}
                 style={{
-                    display: open ? "flex" : "none",
+                    display: open ? "flex" : "none"
                 }}
             >
                 <div className="modal-dialog">
                     <div className="modal-content">
                         <h3>
                             {t("common:login-modal-message", {
-                                remaining: remaining,
+                                remaining: remaining
                             })}
                         </h3>
                         <button

components/utils/caseStagesObj.js

@@ -0,0 +1,287 @@
+export const statusValues = [
+    {
+        "value": "Acceptance Checking",
+        "value_cy": "Gwirio derbyn",
+        "statuscode": 846040004
+    },
+    {
+        "value": "Appeal Registered",
+        "value_cy": "Apêl wedi’i chofrestru",
+        "statuscode": 846040015
+    },
+    {
+        "value": "Appeal Submitted",
+        "value_cy": "Apêl wedi’i chyflwyno",
+        "statuscode": 846040014
+    },
+    {
+        "value": "Appeal Validated",
+        "value_cy": "Apêl wedi’i dilysu",
+        "statuscode": 846040016
+    },
+    {
+        "value": "Applicants Final Comment",
+        "value_cy": "Sylw terfynol yr ymgeisydd",
+        "statuscode": 846040027
+    },
+    {
+        "value": "Application Called-In",
+        "value_cy": "Cais wedi’i alw i mewn",
+        "statuscode": 846040023
+    },
+    {
+        "value": "Application Validated",
+        "value_cy": "Cais wedi’i ddilysu",
+        "statuscode": 846040024
+    },
+    {
+        "value": "Case in Progress",
+        "value_cy": "Achos ar y gweill",
+        "statuscode": 1
+    },
+    {
+        "value": "Consultation",
+        "value_cy": "Ymgynghoriad",
+        "statuscode": 846040006
+    },
+    {
+        "value": "Environmental Impact Assessment Scoping",
+        "value_cy": "Cwmpasu Asesiad o’r Effaith Amgylcheddol",
+        "statuscode": 846040002
+    },
+    {
+        "value": "Inspector(s) Decision",
+        "value_cy": "Penderfyniad yr arolygydd/arolygwyr",
+        "statuscode": 846040009
+    },
+    {
+        "value": "Invalid Submission",
+        "value_cy": "Cyflwyniad annilys",
+        "statuscode": 846040005
+    },
+    {
+        "value": "Notification",
+        "value_cy": "Hysbysiad",
+        "statuscode": 846040003
+    },
+    { "value": "On Hold", "value_cy": "Ar Dal", "statuscode": 2 },
+    {
+        "value": "Pre-Application",
+        "value_cy": "Cyn gwneud cais",
+        "statuscode": 846040001
+    },
+    {
+        "value": "Questionnaire / LPA to Notify",
+        "value_cy": "Holiadur / ACLl i hysbysu",
+        "statuscode": 846040017
+    },
+    {
+        "value": "Re-Consultation",
+        "value_cy": "Ail-ymgynghoriad",
+        "statuscode": 846040007
+    },
+    { "value": "Researching", "value_cy": "Ymchwilio", "statuscode": 4 },
+    {
+        "value": "Report to Ministers",
+        "value_cy": "Adroddiad i Weinidogion",
+        "statuscode": 846040011
+    },
+    {
+        "value": "Statements",
+        "value_cy": "Datganiadau",
+        "statuscode": 846040010
+    },
+    { "value": "Reporting", "value_cy": "Adrodd", "statuscode": 846040008 },
+    {
+        "value": "Waiting for Details",
+        "value_cy": "Aros am fanylion",
+        "statuscode": 3
+    },
+    {
+        "value": "Minister's Decision",
+        "value_cy": "Penderfyniad y Gweinidog",
+        "statuscode": 846040012
+    },
+    {
+        "value": "Representations Period",
+        "value_cy": "Cyfnod sylwadau",
+        "statuscode": 846040018
+    },
+    {
+        "value": "Final Comments",
+        "value_cy": "Sylwadau terfynol",
+        "statuscode": 846040019
+    },
+    { "value": "Event", "value_cy": "Digwyddiad", "statuscode": 846040020 },
+    {
+        "value": "Site Visit",
+        "value_cy": "Ymweliad safle",
+        "statuscode": 846040021
+    },
+    {
+        "value": "Decision Issued",
+        "value_cy": "Penderfyniad wedi’i gyhoeddi",
+        "statuscode": 846040022
+    },
+    {
+        "value": "LPA to Notify",
+        "value_cy": "ACLl i hysbysu",
+        "statuscode": 846040025
+    },
+    {
+        "value": "Report Issued to Welsh Ministers",
+        "value_cy": "Adroddiad wedi’i gyhoeddi i Weinidogion Cymru",
+        "statuscode": 846040028
+    },
+    {
+        "value": "Fee Due",
+        "value_cy": "Ffi yn ddyledus",
+        "statuscode": 846040029
+    },
+    {
+        "value": "Validated",
+        "value_cy": "Wedi’i ddilysu",
+        "statuscode": 846040030
+    },
+    {
+        "value": "Appeal Start / Case in Progress",
+        "value_cy": "Apêl wedi dechrau / achos ar y gweill",
+        "statuscode": 846040031
+    },
+    {
+        "value": "Statements/Representations Period",
+        "value_cy": "Cyfnod datganiadau/sylwadau",
+        "statuscode": 846040032
+    },
+    {
+        "value": "Order Submitted",
+        "value_cy": "Gorchymyn wedi’i gyflwyno",
+        "statuscode": 846040033
+    },
+    {
+        "value": "Order Submission Registered",
+        "value_cy": "Cyflwyniad gorchymyn wedi’i gofrestru",
+        "statuscode": 846040034
+    },
+    {
+        "value": "Order Submission Validated",
+        "value_cy": "Cyflwyniad gorchymyn wedi’i ddilysu",
+        "statuscode": 846040035
+    },
+    {
+        "value": "Case started/Case in Progress",
+        "value_cy": "Achos wedi dechrau / achos ar y gweill",
+        "statuscode": 846040036
+    },
+    {
+        "value": "Event/Site Visit",
+        "value_cy": "Digwyddiad/ymweliad safle",
+        "statuscode": 846040037
+    },
+    {
+        "value": "Applicant Statement on Representations",
+        "value_cy": "Datganiad yr ymgeisydd ar sylwadau",
+        "statuscode": 846040038
+    },
+    {
+        "value": "Representatives Comment",
+        "value_cy": "Sylw’r cynrychiolwyr",
+        "statuscode": 846040039
+    },
+    {
+        "value": "Order Registered",
+        "value_cy": "Gorchymyn wedi’i gofrestru",
+        "statuscode": 846040040
+    },
+    {
+        "value": "Order Validated",
+        "value_cy": "Gorchymyn wedi’i ddilysu",
+        "statuscode": 846040041
+    },
+    {
+        "value": "Representations Period",
+        "value_cy": "Cyfnod sylwadau",
+        "statuscode": 846040047
+    },
+    {
+        "value": "Application Submitted",
+        "value_cy": "Cais wedi’i gyflwyno",
+        "statuscode": 846040042
+    },
+    {
+        "value": "Application Registered",
+        "value_cy": "Cais wedi’i gofrestru",
+        "statuscode": 846040043
+    },
+    {
+        "value": "Report to DESNZ",
+        "value_cy": "Adroddiad i DESNZ",
+        "statuscode": 846040044
+    },
+    {
+        "value": "Case in Progress / Assessment",
+        "value_cy": "Achos ar y gweill / asesiad",
+        "statuscode": 846040045
+    },
+    {
+        "value": "Decision / Outcome",
+        "value_cy": "Penderfyniad / canlyniad",
+        "statuscode": 846040046
+    },
+    {
+        "value": "Final Comments",
+        "value_cy": "Sylwadau terfynol",
+        "statuscode": 846040048
+    },
+    { "value": "Event", "value_cy": "Digwyddiad", "statuscode": 846040049 },
+    {
+        "value": "Minister's Decision",
+        "value_cy": "Penderfyniad y Gweinidog",
+        "statuscode": 846040050
+    },
+    {
+        "value": "Case started/Case in Progress",
+        "value_cy": "Achos wedi dechrau / achos ar y gweill",
+        "statuscode": 846040051
+    },
+    {
+        "value": "Statements",
+        "value_cy": "Datganiadau",
+        "statuscode": 846040052
+    },
+    {
+        "value": "Application Validated",
+        "value_cy": "Cais wedi’i ddilysu",
+        "statuscode": 846040053
+    },
+    {
+        "value": "Appliation Start / Case in Progress",
+        "value_cy": "Cais wedi dechrau / achos ar y gweill",
+        "statuscode": 846040054
+    },
+    {
+        "value": "Final Comments",
+        "value_cy": "Sylwadau terfynol",
+        "statuscode": 846040055
+    },
+    {
+        "value": "Report to Ministers",
+        "value_cy": "Adroddiad i Weinidogion",
+        "statuscode": 846040056
+    },
+    {
+        "value": "Application Validated",
+        "value_cy": "Cais wedi’i ddilysu",
+        "statuscode": 846040057
+    },
+    {
+        "value": "Case in Progress",
+        "value_cy": "Achos ar y gweill",
+        "statuscode": 846040058
+    },
+    {
+        "value": "Case Submitted",
+        "value_cy": "Achos wedi’i gyflwyno",
+        "statuscode": 846040061
+    }
+];

components/utils/getCaseLpaDisplayValue.js

@@ -0,0 +1,69 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+
+const translateLpaName = ({ name, locale, transLookup }) => {
+    if (!name) return "";
+
+    if (locale !== "cy") return name;
+
+    return (
+        jsonpath({
+            path: '$..[?(@ && @.value=="' + name + '")].value_cy',
+            json: transLookup,
+            eval: true
+        })?.[0] || name
+    );
+};
+
+export const getCaseLpaNames = ({
+    casesObj,
+    detailsObj,
+    locale,
+    transLookup
+}) => {
+    if (!casesObj) return [];
+
+    const primaryLpaName =
+        casesObj[
+            "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
+        ] || "";
+
+    const translatedPrimaryLpaName = translateLpaName({
+        name: primaryLpaName,
+        locale,
+        transLookup
+    });
+
+    const additionalLpaNames = (detailsObj.additionalLPAs || []).map((lpa) =>
+        translateLpaName({
+            name: lpa?.name || "",
+            locale,
+            transLookup
+        })
+    );
+
+    return [
+        ...new Set(
+            [translatedPrimaryLpaName, ...additionalLpaNames].filter(Boolean)
+        )
+    ];
+};
+
+export const getCaseLpaDisplayValue = ({
+    casesObj,
+    detailsObj,
+    locale,
+    transLookup
+}) => {
+    return getCaseLpaNames({ casesObj, detailsObj, locale, transLookup }).join(
+        ", "
+    );
+};
+
+export const getCaseLpaDisplayLines = ({
+    casesObj,
+    locale,
+    detailsObj,
+    transLookup
+}) => {
+    return getCaseLpaNames({ casesObj, detailsObj, locale, transLookup });
+};

context/auth-session-reliability.md

@@ -0,0 +1,34 @@
+# Auth & Session Reliability Notes
+
+Last updated: 2026-05-13
+
+## Known issue
+
+Users are intermittently prompted to sign in again despite apparently valid prior session state.
+
+## Confirmed risk contributors in code
+
+1. Duplicated logout/cookie clearing logic across multiple components.
+2. Mixed callback cookie names in runtime history (`next-auth.callback-url` and `__Secure-next-auth.callback-url`).
+3. Redirect URL parsing that could fail hard on malformed/unexpected URL inputs.
+4. Hard SSR redirects to `/auth/signin` on missing/transient upstream account/contact states.
+
+## Stabilisation changes started
+
+- Added `lib/auth/sessionClient.js`:
+    - normalized cookie/session artifact cleanup
+    - shared signed-out callback path by locale
+    - shared `performPortalSignOut(...)` helper
+- Adopted helper in:
+    - `components/timeout/index.js`
+    - `components/myportal/servicebanner.js`
+    - `components/header.js`
+- Updated NextAuth callback locale detection to check both callback cookie variants.
+- Hardened NextAuth URL append and redirect parsing fallbacks.
+
+## Remaining auth hardening backlog
+
+1. Migrate remaining logout implementations to shared helper.
+2. Add request-correlation-safe auth diagnostics (no secrets/tokens).
+3. Evaluate session TTL/update strategy (`maxAge`, `updateAge`) with production evidence.
+4. Add env validation checks for `NEXTAUTH_URL`, `CY_API_ROOT`, proxy/header assumptions.

context/current-platform-state.md

@@ -0,0 +1,38 @@
+# Current Platform State (PEDW) — feature/restart-from-sips
+
+Last updated: 2026-05-13
+
+## Summary
+
+PEDW is in a **late-stage refactor stabilization** phase.
+
+- New Appeal refactor stream (Slices 1–8) is complete per tracker/state docs.
+- Representations stream remains structurally complex and only partially decomposed.
+- Platform architecture direction remains valid: bounded, behaviour-preserving slices.
+
+## What is complete
+
+- New Appeal slice stream documented complete (`context/refactor-tracker.md`, `context/newappeal-refactor-current-state.md`).
+- Significant route/breadcrumb decomposition and helper extraction completed.
+- Broad endpoint contract hardening completed across key clusters.
+
+## What is incomplete
+
+- Auth/session reliability hardening (intermittent re-signin prompts).
+- SSR loader resilience normalization across myportal/representation/new appeal.
+- Logging hardening consistency in auth/file/account-sensitive paths.
+- Remaining decomposition hotspots (`components/elements/index.js`, representation flow internals).
+
+## Operational risk profile (current)
+
+Top active risks:
+
+1. Auth/session intermittency (callback/cookie/SSR timing interplay).
+2. Fragile nested state assumptions in loader-heavy paths.
+3. Production log noise and inconsistent redaction patterns.
+4. Manual effort burden for EN/CY parity and journey regression checks.
+
+## Notes on stale/legacy guidance
+
+- Some context docs still describe pre-refactor representation baseline; treat those as historical unless updated by active slice evidence.
+- Legacy commented code remains in active files (especially journey files) and should be treated as cleanup debt, not source-of-truth runtime behaviour.

context/newappeal-refactor-current-state.md

@@ -0,0 +1,354 @@
+# New Appeal Refactor — Current State of Play
+
+## Purpose
+
+This note updates the earlier **pre-refactor analysis** with the **current state after the Slice 1–8 refactor stream**.
+
+Scope remains the new appeal flow areas:
+
+- `pages/newappeal/**`
+- `components/newappeal/**`
+
+---
+
+## Executive summary
+
+The planned refactor stream has been completed through **Slice 8** on the `refactor` branch integration line.
+
+- Behaviour-preserving objective has been maintained (S78 flow)
+- Core journeys remained stable through regression checks
+- Structural clarity has improved in the highest-risk areas
+- The codebase is in a safer state for future controlled change
+
+---
+
+## Slice completion status (current)
+
+All planned slices are complete:
+
+1. Slice 1 — XML/Form derivation extraction ✅
+2. Slice 2a — Payload cleanup helpers ✅
+3. Slice 2b — File merge/dedupe helpers ✅
+4. Slice 3 — Side-effect facade wrappers ✅
+5. Slice 4 — BuildSection UI extraction ✅
+6. Slice 5 — BuildCheckSection UI extraction ✅
+7. Slice 6 — BuildCheckRow formatter-map cleanup ✅
+8. Slice 7 — Nested prop-boundary simplification ✅
+9. Slice 8 — Start flow readability cleanup (`createCase` / `aboutyou`) ✅
+
+Tracker reference: `context/refactor-tracker.md`
+
+---
+
+## What changed overall
+
+### Structural improvements delivered
+
+- Repeated XML/form derivation logic moved into dedicated lib helpers
+- Payload shaping and file-list merge/dedupe logic normalized into focused helpers
+- Side effects wrapped behind clearer journey-effect boundaries
+- Large UI-heavy files split with clearer presentational structure (Slices 4–5)
+- Check-row formatting logic simplified into more maintainable mapping style
+- Deep nested prop access reduced with local boundary aliases
+- Start-flow components (`createCase`, `aboutyou`) made easier to read using local predicates/aliases
+
+### What was intentionally preserved
+
+- Business rules (including S78 behaviour)
+- HASCAS mapping behaviour
+- Appellant/agent branching behaviour
+- Field names/IDs and payload shape
+- Redirect/query construction (`lpa`, `apt`, `id`)
+- Validation messages/rules
+- Navigation and side-effect ordering/timing
+- EN/CY parity
+
+---
+
+## Current architecture quality (post-stream)
+
+### Stronger than before
+
+- Better separation between derivation/formatting/helpers and component rendering
+- Reduced duplication in payload/file processing paths
+- Safer change surfaces in `buildsection`, `buildchecksection`, and start flow
+- Improved readability of high-churn components
+
+### Still sensitive / needs caution
+
+- `buildsection.js` and `buildchecksection.js` remain central orchestration points
+- Save/resume and submit/finalise paths still require strict regression discipline
+- Some legacy patterns/comments remain and can obscure intent
+
+---
+
+## Risk position now
+
+### Risks reduced
+
+- Regression risk from duplicated transformation logic
+- Coupling risk from deep nested prop traversal
+- Reviewability risk in large mixed-concern components
+- Formatting-logic drift risk in check-answers rendering
+
+### Risks still present (manageable)
+
+- Live-flow sensitivity for save/resume/upload/submit remains inherently high
+- Manual regression burden is still significant for confidence
+- Further cleanup must continue to avoid behaviour changes
+
+---
+
+## Deferred follow-up items (post-stream)
+
+These are **not part of Slice 1–8** and should be handled as separate scoped work:
+
+1. Add/expand targeted automated regression coverage for protected journeys
+2. Remove stale/commented legacy code in touched components (safe cleanup slices)
+3. Document critical invariants for save/resume/submit paths in a concise maintainer note
+4. Continue incremental decomposition of remaining orchestration-heavy components only if behaviour can be proven unchanged
+
+---
+
+## Validation position
+
+Regression evidence recorded across slices indicates preserved behaviour for:
+
+- Start appeal and section navigation
+- Save and exit
+- Resume
+- Upload and file handling
+- Check answers rendering
+- Submit/finalisation
+- Confirmation/email paths
+- EN/CY parity
+- CRM insertion smoke
+- Lint baseline (warnings-only, no new blocking errors)
+
+---
+
+## Conclusion
+
+Compared to the earlier analysis, the new appeal flow is now in a materially safer and more maintainable state while preserving live behaviour.
+
+The planned refactor stream (Slices 1–8) is complete. Any additional improvements should proceed as new, tightly scoped, behaviour-preserving slices.
+
+---
+
+## What should be done next
+
+## 1) Stabilise and release safely (immediate)
+
+Before any merge into `SIPS-Development`, run a formal readiness pass on `refactor`:
+
+1. `npm run lint` (confirm no new blocking issues)
+2. Full protected-journey manual regression:
+    - start appeal
+    - save and exit
+    - resume
+    - upload documents
+    - check answers
+    - submit
+    - confirmation
+3. EN/CY parity pass on touched paths
+4. Negative-path checks on validation and conditional branches
+5. CRM insertion smoke validation
+6. Rollback verification (revert path by merge commit)
+
+If any check fails, fix in a separate, minimal safety slice.
+
+## 2) Close out stream documentation (short, high-signal)
+
+Add a concise closeout note (or PR summary block) that captures:
+
+- stream scope and completed slices
+- behaviour-preservation statement
+- validation evidence references
+- known constraints that must not change in future work
+
+Keep this short and avoid duplicating implementation detail.
+
+## 3) Start a post-stream backlog (separate from Slice 1–8)
+
+Create a small follow-up backlog of **new, independent slices** (do not reopen completed slices):
+
+- automated regression coverage for protected journeys
+- safe removal of stale commented/dead code
+- targeted cleanup of remaining orchestration hotspots (`buildsection`, `buildchecksection`) only when backed by tests/regression checks
+- brief maintainer notes for critical invariants (payload shape, route/query contract, side-effect ordering)
+
+## 4) Recommended execution order for follow-ups
+
+Safest sequence:
+
+1. Release-readiness and merge safety checks
+2. Regression automation improvements
+3. Documentation/invariant notes
+4. Small structural cleanups in high-risk files (one concern per slice)
+
+## 5) Guardrails for all next work
+
+Continue to enforce refactor-branch rules:
+
+- no business-rule changes
+- no payload/field-name/query-shape drift
+- no side-effect timing/order changes unless explicitly scoped and proven safe
+- preserve EN/CY parity
+- keep slices small, reversible, and independently testable
+
+---
+
+## Potential improvements to logic and functionality (future work)
+
+These items are intentionally listed as **future enhancements** (not part of completed refactor slices).
+
+Any item that changes user-facing behaviour, business rules, or decision logic should be delivered as product-approved feature work with explicit regression protection.
+
+## 1) Validation and data-quality improvements
+
+- Strengthen cross-field validation where dependencies are currently implicit (for example, conditional requirements tied to prior answers).
+- Introduce clearer, field-level validation feedback for complex text/rich-text inputs.
+- Add stricter normalization for user-entered contact data (format quality, consistency) while preserving accepted legacy cases.
+
+## 2) Save/resume robustness
+
+- Add structured save/resume integrity checks to detect and recover from partial or stale payloads.
+- Improve diagnostics around resume hydration mismatches (field missing, incompatible shape, stale section state).
+- Add explicit handling for interrupted upload/save sequences to reduce user recovery friction.
+
+## 3) Upload/document experience and safety
+
+- Improve duplicate-document handling feedback (clear user messaging when dedupe occurs).
+- Provide more explicit upload status and retry outcomes for failed or partial uploads.
+- Add stronger document-type validation messaging and edge-case handling for borderline file metadata.
+
+## 4) Submit/finalisation resilience
+
+- Add clearer user-safe fallback states for finalisation failures (e.g., PDF generation or downstream completion messaging failures).
+- Improve idempotency safeguards in final submission steps to reduce accidental duplicate side effects.
+- Strengthen auditability of submit transitions for operational support/debugging.
+
+## 5) Start-flow usability enhancements
+
+- Improve guidance for appeal-type selection and conditional HASCAS confirmation to reduce user error.
+- Consider smarter defaults/prefill where policy allows, especially for known user profile/contact fields.
+- Improve branch-specific helper copy for appellant vs agent pathways.
+
+## 6) Performance and maintainability improvements
+
+- Reduce repeated in-component derivation cost by introducing safe memoization where values are stable.
+- Continue incremental decomposition of remaining orchestration-heavy components into testable units.
+- Expand targeted automated tests (journey-level + high-risk utility-level) to lower regression burden.
+
+## 7) Recommended delivery model for these improvements
+
+- Treat each enhancement area as a separate, tightly scoped slice.
+- Prioritise by user risk and operational impact:
+    1. save/resume robustness
+    2. submit/finalisation resilience
+    3. validation/data-quality improvements
+    4. upload/document UX resilience
+    5. usability/performance refinements
+
+- For each slice, require:
+    - explicit statement of intended behaviour change (or confirmation of no change)
+    - EN/CY parity checks
+    - negative-path checks
+    - rollback plan
+
+---
+
+## Evolving this into a multi-appeal-type platform (beyond S78)
+
+To move from an S78-focused journey to a reusable **new appeal platform**, the safest path is to keep S78 as the baseline contract and introduce platform capabilities in additive slices.
+
+## Platform principles
+
+- Keep **S78 as reference behaviour** (do not regress)
+- Drive variation via **configuration and schema**, not hardcoded branching
+- Keep a stable core runtime for:
+    - start/resume/save
+    - section rendering
+    - validation execution
+    - upload/check/submit/finalise
+- Isolate appeal-type specifics behind explicit adapters
+
+## Recommended platform workstreams
+
+## 1) Appeal-type definition contract
+
+Define a typed “appeal definition” model for each appeal type, covering:
+
+- metadata (id, route key, labels, EN/CY text references)
+- section order and visibility rules
+- field/validation rules
+- required-doc rules
+- submission/finalisation behaviour flags
+
+Start by expressing S78 in this contract first, then add new appeal types using the same contract.
+
+## 2) Start-flow strategy model
+
+Generalise `createCase`/`aboutyou` into a strategy-driven start flow:
+
+- shared start-flow shell
+- per-appeal-type start-step configuration
+- clear branching policy hooks (e.g., HASCAS-style gates as config)
+
+This avoids adding new hardcoded conditions per appeal type.
+
+## 3) Validation engine boundary
+
+Move towards a validation layer that consumes appeal-definition rules:
+
+- common validator primitives
+- per-appeal rule sets loaded by appeal type
+- explicit cross-field dependency maps
+
+Preserve existing messages/behaviour for S78 while introducing extension points.
+
+## 4) Section and field rendering registry
+
+Introduce a registry pattern for section/field rendering rules:
+
+- field-type renderer map (already partially established)
+- appeal-type-specific section decorators where needed
+- strict fallback behaviour for unsupported fields
+
+This enables incremental onboarding of new forms without rewriting core flow components.
+
+## 5) Submission and integration adapters
+
+Define adapter interfaces for variation points:
+
+- payload mapping by appeal type
+- finalisation actions by appeal type
+- notification templates by appeal type/locale
+
+Core workflow should call adapters, not branch inline by appeal type.
+
+## 6) Platform test matrix and release gates
+
+Adopt a matrix-driven regression model:
+
+- rows: appeal types
+- columns: protected journeys + EN/CY parity + negative paths
+
+Require S78 baseline pass + new-type pass before release.
+
+## Suggested delivery sequence (safe)
+
+1. Define appeal-type contract (S78 only)
+2. Map current S78 start flow to strategy model (no behaviour change)
+3. Introduce validation/section registries behind existing behaviour
+4. Add adapter boundaries for submit/finalise integrations
+5. Pilot one additional appeal type behind feature flag/config gating
+6. Expand matrix automation and observability
+
+## Guardrails while platformising
+
+- Do not change S78 business behaviour unintentionally
+- No payload/field/query contract drift for existing types
+- Preserve save/resume compatibility
+- Preserve EN/CY parity across all onboarded types
+- Keep rollout incremental with clear rollback per slice

context/performance-and-stability-baseline.md

@@ -0,0 +1,29 @@
+# Performance & Stability Baseline (Phase 1)
+
+Last updated: 2026-05-13
+
+## Baseline observations
+
+### Performance
+
+- Loader-heavy pages (myportal/representation/new appeal) perform multiple external calls per SSR request.
+- Form XML is read/normalized repeatedly from disk in SSR path.
+- Some large components still combine orchestration + rendering, increasing rerender work.
+
+### Stability
+
+- Several SSR/data paths assume nested API response shapes without guard rails.
+- Representation resume/new loader had crash/redirect fragility around missing contact/representation objects.
+- Logging noise can mask actionable failure signals.
+
+## Changes started in this phase
+
+1. Added in-memory XML cache in `lib/forms/readFormXml.js` (safe, process-local).
+2. Added null/redirect guards in `lib/representation/pageLoaders.js` for missing user/contact and missing representation entry.
+3. Began auth-path de-duplication and redirect hardening (see auth reliability doc).
+
+## Next baseline improvements
+
+1. Add guarded defaults in remaining loader paths (`loadNewAppealPage`, myportal page loaders).
+2. Introduce structured non-sensitive SSR failure telemetry for dependency failures.
+3. Expand bounded concurrency/parallelism where safe and contract-preserving.

context/phase1-stabilisation-plan.md

@@ -0,0 +1,62 @@
+# Phase 1 Stabilisation Plan (Execution Start)
+
+Last updated: 2026-05-14
+
+## Goal
+
+Reduce operational risk without changing PEDW business behaviour.
+
+## Priority order
+
+1. **Auth/session reliability**
+2. **SSR/data-loading resilience**
+3. **Logging/observability hardening**
+4. **Low-risk performance improvements**
+
+## Slice plan
+
+### Slice P0.1 (started)
+
+- Centralize client-side signout/cookie cleanup into shared helper.
+- Replace duplicated logout logic in timeout and portal/header surfaces.
+
+Status: completed across timeout, header, service banner, myportal, furtherdetails, and auth error paths.
+
+### Slice P0.2 (started)
+
+- Harden NextAuth redirect/locale callback handling.
+- Add safer URL parsing fallback behaviour.
+
+Status: completed with callback-cookie parity support and redacted diagnostics.
+
+### Slice P1.1 (started)
+
+- Add defensive null and redirect handling in representation SSR loader path.
+
+Status: expanded to new appeal, myportal appeal, and representation loader guard hardening.
+
+### Slice P3.1 (started)
+
+- Add in-memory XML read cache for form XML to reduce repeated disk read/normalization cost.
+
+Status: completed.
+
+## Immediate slices status (updated)
+
+1. Add defensive wrappers for external dependency failures in new-appeal/myportal/representation SSR loaders (fallback redirects + safe defaults).
+    - Status: completed.
+2. Expand focused tests around loader negative paths (missing query/session/cookie/search result branches).
+    - Status: completed with dedicated phase22 suites for newappeal, myportal, and representation loaders.
+3. Add lightweight diagnostics for SSR loader dependency failures (redacted, non-sensitive).
+    - Status: completed.
+4. Reduce remaining low-value commented legacy blocks in active flow files where behaviour is already covered by tests.
+    - Status: completed for active myportal case-ticket page path.
+
+## Next recommended Phase 1 closure slices
+
+1. Add targeted loader-dependency-failure tests (thrown service errors -> safe redirect) for newappeal/myportal/representation loaders.
+    - Status: in progress (newappeal + myportal dependency-failure tests added; representation search-miss redirect coverage added).
+2. Perform a focused pass on remaining active flow files for stale commented code/debug remnants and remove where behaviour is covered.
+    - Status: in progress (myportal case-ticket path completed; further active-flow pass still open).
+3. Refresh current-platform-state/auth-session-reliability notes with latest implemented slices and residual risks.
+    - Status: not started.

context/refactor-branch-charter.md

@@ -1,90 +1,161 @@
-# Refactor Branch Charter — New Appeal Flow
+# Refactor Branch Charter — Portal Journeys
 
 ## Purpose
 
-This branch exists to safely refactor the live new appeal flow so it is easier to maintain, safer to change, and better prepared to support additional appeal types beyond the current S78 planning appeal flow.
+This branch exists to safely refactor **core portal journeys** so they are:
+
+- easier to maintain
+- safer to change
+- better structured for future extensibility
 
 This is a **behaviour-preserving refactor branch**, not a feature branch.
 
+---
+
 ## Primary Goal
 
-Create a safer internal structure for the new appeal flow while preserving current live behaviour for the S78 appeal journey.
+Improve internal structure of portal workflows while preserving all current live behaviour.
 
-## Why This Branch Exists
-
-The current new appeal implementation has grown over time to meet business need and now contains a mix of:
-
-- page composition
-- flow orchestration
-- XML-driven form rendering
-- validation
-- file/document handling
-- progress/save logic
-- submission/finalisation logic
-- integration shaping for CRM, PDF generation, and notifications
-
-This branch exists to improve those boundaries incrementally without disrupting the live service.
+---
 
 ## Scope
 
-In scope:
+### In Scope
 
-- behaviour-preserving refactor of `pages/newappeal/**` and `components/newappeal/**`
-- extraction of reusable workflow logic from UI-heavy components
-- improved boundaries between rendering, workflow, and integration logic
-- regression test coverage for critical S78 journeys
-- preparing the codebase for future appeal-type extensibility
+- behaviour-preserving refactor of:
+    - new appeal flow (`pages/newappeal/**`, `components/newappeal/**`)
+    - representations flow (case summary → representation journey)
+- extraction of reusable workflow logic
+- improved separation between:
+    - UI
+    - workflow orchestration
+    - data fetching
+    - integrations
+- preparation for future extensibility
 
-Out of scope unless explicitly requested:
+---
+
+### Out of Scope
 
 - business rule changes
-- visual redesign
-- broad framework/library migration
-- replacing working dynamic form behaviour with hardcoded appeal-specific logic
-- changes to live BAU behaviour beyond strictly necessary bug fixes
+- UI redesign
+- payload/schema changes
+- replacing dynamic/config-driven logic with hardcoding
+- feature delivery mixed with refactor work
 
-## Branch Relationship to BAU
+---
 
-- BAU continues on `SIPS-Development`
-- this branch is the protected refactor lane
-- safe, proven slices may be merged back into `SIPS-Development` when ready
-- urgent live fixes should go to `SIPS-Development` first, then be synced into this branch
+## Branch Model
+
+### Roles
+
+- `SIPS-Development`
+    - BAU branch
+    - ongoing production work
+
+- `refactor`
+    - refactor integration branch
+
+- feature branches
+    - created from `refactor`
+    - one per slice
+
+---
+
+### Flow
+
+SIPS-Development → refactor → slice branches → refactor → SIPS-Development
+
+---
+
+## Refactor Streams
+
+### 1. New Appeal Flow (Completed)
+
+- Slice-based refactor (Slices 1–8)
+- Behaviour preserved (S78)
+- Improved structure and maintainability
+
+This serves as the **reference model for future refactors**
+
+---
+
+### 2. Representations Flow (Active)
+
+Scope includes:
+
+- Case summary entry (CTA logic)
+- Representation journey:
+    - capacity selection
+    - representation type
+    - content entry
+    - file upload
+    - check answers
+    - submission
+    - completion
+- SSR/data loading and Redux hydration
+- integration points (CRM, blob storage)
+
+---
 
 ## Non-Negotiable Principles
 
-1. Preserve live S78 behaviour unless explicitly told otherwise.
-2. Prefer extraction over rewrite.
-3. Prefer small, mergeable slices over long-lived hidden change.
-4. Add or update regression protection before changing critical flow logic.
-5. Keep English/Welsh behaviour aligned.
-6. Treat save/resume/upload/check/submit/complete as protected journey stages.
+1. Preserve live behaviour
+2. Prefer extraction over rewrite
+3. Work in small, safe slices
+4. Keep changes reversible
+5. Protect:
+    - save/resume flows
+    - upload behaviour
+    - submission/finalisation
+6. Maintain EN/CY parity
+
+---
 
 ## Target Direction
 
-The long-term direction is:
+Move towards:
 
-- shared new appeal workflow engine
-- appeal-type definitions/configuration separated from UI rendering
-- smaller, clearer components
-- isolated validation and payload-shaping logic
-- safer addition of future appeal types through definition + bounded type-specific rules
+- shared journey/workflow engine
+- smaller, composable components
+- clear separation of:
+    - decision logic
+    - rendering
+    - integration logic
+- ability to support:
+    - multiple appeal types
+    - additional portal journeys (like representations)
+
+---
 
 ## Definition of Success
 
-This branch is succeeding when:
+This branch is successful when:
 
-- core S78 journey behaviour remains stable
-- regression confidence increases
-- high-risk logic moves out of large render-heavy components
-- new appeal code becomes easier to understand and test
-- future appeal types can be added with less change to core flow code
+- behaviour is preserved across all journeys
+- complexity is reduced
+- code is easier to understand and change
+- regression risk is lower
+- new journeys/types can be added safely
 
-## Working Branch Model
+---
 
-This refactor stream uses the `refactor` branch as its working base.
+## Delivery Model
 
-- BAU continues on `SIPS-Development`
-- refactor work is performed from `refactor`
-- safe refactor slices may later be merged into `SIPS-Development`
+Each refactor stream must:
 
-This branch should not be treated as BAU, and BAU should not be treated as the refactor workspace.
+1. follow slice-based approach
+2. implement one concern per slice
+3. validate behaviour after each slice
+4. merge into `refactor` only when safe
+5. merge to `SIPS-Development` only when stable
+
+---
+
+## Safety Reminder
+
+This is a live system.
+
+If there is any doubt:
+
+> Preserve behaviour, reduce risk, and keep changes small.

context/representations-refactor-current-state.md

@@ -0,0 +1,300 @@
+# Representations Refactor — Current State of Play
+
+## Purpose
+
+This document captures the **pre-refactor state** of the representations flow and defines the starting point for the behaviour-preserving refactor stream.
+
+It mirrors the approach used for the new appeal refactor and will be updated as slices are completed.
+
+---
+
+## Executive Summary
+
+The representations flow is:
+
+- functionally complete and live
+- behaviourally stable
+- structurally complex and tightly coupled
+
+The flow currently:
+
+- spans multiple entry points
+- mixes UI, workflow, and data logic
+- contains duplicated branching and rendering logic
+- relies heavily on shared global state (`currentView`, `searchResultsObj`)
+
+---
+
+## Journey Overview
+
+The user journey is:
+
+1. Navigate to case summary page
+2. Click **Make representation / consultation**
+3. Enter representation flow
+4. Select capacity
+5. Select representation type
+6. Enter content and upload files
+7. Review check answers
+8. Submit representation
+9. View confirmation/completion
+
+---
+
+## Entry Points
+
+### Primary Entry
+
+- `CaseSummary` component
+- CTA button logic determines:
+    - whether representation is allowed
+    - which label to display
+    - which route to navigate to
+
+### Route
+
+- `/myportal/representation?case=<caseRef>`
+
+---
+
+## Dual Mode Behaviour (Critical)
+
+The flow operates in two modes:
+
+### 1. New Representation (from search/case)
+
+- triggered from case summary CTA
+- loads case data via search + details APIs
+- initializes new representation state
+
+---
+
+### 2. Existing Representation (resume/edit)
+
+- triggered via query param (`state`)
+- loads representation from blob storage
+- hydrates existing data and files
+
+---
+
+This dual-mode behaviour is a **major complexity driver**.
+
+---
+
+## Architecture Overview
+
+### High-Level Structure
+
+- Page layer (SSR + Redux hydration)
+- Case component (core orchestration)
+- Representation flow components (capacity/type/content/check)
+- Shared helpers (`representationElements`)
+- Service layer (case data, blob storage, CRM integration)
+
+---
+
+### Key Components
+
+- `CaseSummary` → entry + CTA logic
+- `Case` → main orchestration component
+- Representation flow components:
+    - capacity selection
+    - representation type selection
+    - content entry
+    - check answers
+    - completion
+
+---
+
+### State Management
+
+Primary state dependencies:
+
+- `currentView`
+- `searchResultsObj`
+- `myRepresentations`
+- `filesForRepresentations`
+
+Heavy reliance on deeply nested props.
+
+---
+
+## Current Architecture Issues
+
+### 1. High Coupling
+
+- UI, workflow logic, and data fetching are tightly mixed
+- large components handle multiple responsibilities
+
+---
+
+### 2. Deep Prop Chains
+
+Examples:
+
+- `props.currentView.caseReference.*`
+- `props.searchResultsObj.*`
+
+This reduces readability and increases fragility.
+
+---
+
+### 3. Duplicated Logic
+
+- appeal-type branching repeated across components
+- summary rendering duplicated by case type
+- representation form structure repeated across capacity types
+
+---
+
+### 4. Dual Entry Complexity
+
+- separate logic paths for new vs existing representation
+- mixed within the same components
+
+---
+
+### 5. Async Data Complexity
+
+- chained service calls:
+    - `getCase`
+    - `getPortalModuleDetails`
+- repeated across different contexts
+- hard to reason about and test
+
+---
+
+### 6. Inline Business Logic
+
+- eligibility rules embedded in UI components
+- date checks and appeal-type logic duplicated
+- LPA-specific behaviour scattered
+
+---
+
+## Risk Areas
+
+High-risk areas that require extra caution:
+
+- CaseSummary eligibility logic
+- SSR/data-loading logic for representation page
+- submission/finalisation flow
+- file upload handling
+- dual-mode entry (new vs existing)
+- Redux hydration and state consistency
+
+---
+
+## Behavioural Constraints (Must Not Change)
+
+- eligibility rules for making a representation
+- journey step order and navigation
+- validation rules and messaging
+- payload structure sent to backend/CRM
+- file upload and metadata behaviour
+- submission/finalisation behaviour
+- confirmation page behaviour
+- route/query parameter structure
+- EN/CY parity
+
+---
+
+## Comparison to New Appeal Flow
+
+### Similarities
+
+- step-based user journey
+- check answers before submission
+- file upload and validation steps
+- finalisation/confirmation stage
+
+---
+
+### Differences (Important)
+
+- dual-mode entry (new vs existing)
+- more reliance on external data sources
+- less structured “engine” (more implicit logic)
+- heavier coupling to case summary and search flows
+
+---
+
+## Refactor Readiness
+
+The flow is suitable for refactor because:
+
+- behaviour is stable
+- clear boundaries can be identified
+- repeated patterns exist
+- appeal refactor provides a proven model
+
+---
+
+## Refactor Strategy
+
+The refactor will follow a **slice-based, behaviour-preserving approach**:
+
+1. Extract entry logic (CaseSummary)
+2. Separate SSR/data-loading concerns
+3. isolate step resolution logic
+4. decompose large components
+5. clean up shared helpers
+6. stabilize async/service layers
+7. isolate submission/finalisation
+
+---
+
+## Initial Slice Focus
+
+### Slice R1 — Entry Logic Extraction
+
+Target:
+
+- representation eligibility logic in `CaseSummary`
+
+Goal:
+
+- reduce coupling
+- isolate decision logic
+- prepare for safe downstream refactor
+
+---
+
+## Validation Position
+
+At start of refactor:
+
+- behaviour is assumed correct
+- no structural isolation exists
+- regression testing is manual
+
+Each slice must:
+
+- prove behaviour unchanged
+- reduce complexity incrementally
+
+---
+
+## Conclusion
+
+The representations flow is:
+
+- behaviourally stable
+- structurally complex
+- suitable for controlled refactor
+
+The goal is to:
+
+- reduce coupling
+- improve clarity
+- enable safer future changes
+
+without altering live behaviour.
+
+---
+
+## Next Step
+
+Begin **Slice R1 — Representation Entry Logic Extraction**
+
+Following strict guardrails and regression validation.

context/representations-refactor-guardrails.md

@@ -0,0 +1,137 @@
+# Representations Refactor Guardrails
+
+## Purpose
+
+These guardrails apply to all work on the **representations refactor stream**.
+
+This stream follows the same discipline as the new appeal refactor:
+
+> Behaviour-preserving, slice-based refactor of a live journey.
+
+---
+
+## Critical Rule
+
+Preserve the current live behaviour of the representations journey.
+
+Do not assume a cleaner implementation allows behaviour changes.
+
+---
+
+## Protected Journey
+
+The following user journey must not regress:
+
+1. Enter case summary page
+2. Click **Make representation / consultation**
+3. Navigate to representation flow
+4. Select capacity
+5. Select representation type
+6. Enter content and upload files
+7. View check answers
+8. Submit representation
+9. View completion/confirmation
+
+---
+
+## Protected Behaviour
+
+Do not change:
+
+- representation eligibility logic (dates, appeal type, specialist process)
+- CTA visibility and routing from case summary
+- capacity selection behaviour
+- representation type branching
+- validation rules and messaging
+- payload shape sent to backend/CRM
+- file upload handling and metadata
+- submission/finalisation flow
+- confirmation behaviour
+- navigation order or step progression
+- route/query parameters
+- EN/CY behaviour
+
+---
+
+## Refactor Approach
+
+When refactoring:
+
+1. Understand current behaviour first
+2. Identify smallest safe boundary
+3. Prefer extraction over rewrite
+4. Keep interfaces stable
+5. Avoid mixing concerns in one change
+6. Keep slices small and reversible
+
+---
+
+## Required Testing Mindset
+
+Before completing any slice:
+
+- manually walk the full representation journey
+- verify:
+    - start from case summary CTA
+    - capacity → type → content → check → submit
+    - successful completion
+- verify EN/CY parity
+- verify no navigation or state regression
+
+If behaviour cannot be confidently verified:
+→ do not proceed
+
+---
+
+## Payload / Integration Safety
+
+Do not change without explicit requirement:
+
+- CRM payload structure
+- field names or mapping
+- document/file metadata shape
+- blob storage structure
+- submission API behaviour
+
+---
+
+## i18n / Accessibility Safety
+
+For any user-facing change:
+
+- maintain EN/CY parity
+- do not change translation keys unless required
+- preserve accessibility semantics and structure
+- maintain focus and validation behaviour
+
+---
+
+## What To Avoid
+
+Do not:
+
+- rewrite large components in one step
+- introduce new business rules
+- hardcode dynamic logic
+- mix refactor with feature work
+- change multiple concerns in one slice
+
+---
+
+## Refactor Success Criteria
+
+A slice is successful when:
+
+- behaviour is unchanged
+- complexity is reduced
+- readability is improved
+- regression risk is controlled
+- change is small and reviewable
+
+---
+
+## One-Line Rule
+
+If in doubt:
+
+> Keep behaviour the same, reduce risk, and make the smallest safe change.

context/representations-refactor-tracker.md

@@ -0,0 +1,237 @@
+# Representations Refactor Tracker
+
+Base branch: `refactor`
+
+---
+
+## Status
+
+Current slice: Slice R9 — Summary Rollout (Batch 1)  
+Status: COMPLETE
+
+---
+
+## Slice List
+
+---
+
+### Slice R1 — Representation Entry Logic Extraction
+
+Status: COMPLETE
+
+Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
+
+---
+
+### Slice R2 — Representation Page Loader Separation
+
+Status: COMPLETE
+
+Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
+
+---
+
+### Slice R3 — Journey Step Resolution Extraction
+
+Status: COMPLETE
+
+Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
+
+---
+
+### Slice R4 — Flow Shell Decomposition
+
+Status: COMPLETE
+
+Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
+
+**Completion notes (this slice):**
+
+- Implemented on feature branch created from `refactor`: `rep-slice-r4-flow-shell`.
+- Extracted render-shell structure from `components/case/representation/index.js` into:
+    - `components/case/representation/shell/RepresentationFlowFormStage.js`
+    - `components/case/representation/shell/RepresentationTimetablePanel.js`
+- Kept `index.js` as orchestration owner (no side-effect migration):
+    - `onHandleSubmit` unchanged in location/ownership
+    - `updateRepresentation` unchanged in location/ownership
+    - upload/PDF/email sequencing unchanged
+    - stage-resolution/questionnaire decisions remain in `index.js`
+- Preserved explicit prop passing; no grouped-prop/view-model abstraction introduced in this slice.
+- Validation evidence:
+    - `npm run lint` completed (warnings only, no new errors).
+    - `npm run test:reps` completed: **6 passed**.
+    - Manual APP/IP/Agent/LPA checks: **passed**.
+    - Manual EN/CY parity checks: **passed**.
+
+---
+
+### Slice R5 — Representation Elements Normalisation
+
+Status: COMPLETE
+
+Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
+
+---
+
+### Slice R6 — Async Data / Service Layer Cleanup
+
+Status: COMPLETE
+
+Notes: Completed in prior refactor slice work; no additional changes required in this closeout.
+
+---
+
+### Slice R7 — Summary / Case-Type Rendering Simplification (Proof Slice)
+
+**Completion notes (this slice):**
+
+- Implemented on feature branch created from `refactor`: `rep-slice-r7-summary-rendering-simplification`.
+- Added render-only summary primitives:
+    - `components/case/summary/components/SummaryCard.js`
+    - `components/case/summary/components/SummaryRow.js`
+- Applied to proof subset:
+    - `pinswg_planningappeals78id.js`
+    - `pinswg_planningconditionss73s79id.js`
+- Preserved constraints:
+    - no translation/date/bilingual logic moved
+    - no linked-cases extraction
+    - no ordering/visibility changes
+- Validation evidence:
+    - `npm run lint` passed (warnings only)
+    - `npm run test:reps` passed (**7 passed**)
+    - manual APP/IP/Agent/LPA + EN/CY checks passed
+
+---
+
+### Slice R8 — Submission / Finalisation Boundary Isolation
+
+**Completion notes (this slice):**
+
+- Implemented on feature branch created from `refactor`: `rep-slice-r8-finalisation-boundary`.
+- Added helper module:
+    - `components/case/representation/utils/finalisationBoundary.js`
+- Extracted:
+    - `buildRepresentationUpdateBody(...)`
+    - `buildSubmitEnrichedValues(...)`
+    - `runFinalisationSequence(...)`
+- Preserved:
+    - parent-owned branching logic
+    - completion-side effects in `representationComplete.js`
+    - exact sequencing of finalisation operations
+- Validation evidence:
+    - `npm run lint` passed (warnings only)
+    - `npm run test:reps` passed (**7 passed**)
+    - manual APP/IP/Agent/LPA + EN/CY checks passed
+
+---
+
+### Slice R9 — Summary Rollout (Batch 1)
+
+**Goal:**
+Roll out proven summary rendering primitives across remaining low-risk summary-type files.
+
+**Completion notes (this slice):**
+
+- Applied `SummaryCard` and `SummaryRow` primitives to Batch 1 summary-type files.
+- Rollout executed incrementally:
+    - one summary-type file per commit
+    - consistent mechanical application of proven pattern
+- Changes limited strictly to presentational structure:
+    - replaced card shell markup with `SummaryCard`
+    - replaced row wrapper markup with `SummaryRow` where safe
+- Preserved across all updated files:
+    - field visibility rules
+    - row and card ordering
+    - translation key selection
+    - EN/CY branching behaviour
+    - date source selection and formatting
+    - linked-case logic
+    - route/query behaviour
+    - payloads and Redux state
+- Parent summary-type files retain all business logic and conditional rendering.
+- Shared components confirmed render-only.
+
+**Validation evidence:**
+
+- `npm run lint` completed (warnings only, no new errors)
+- `npm run test:reps` passed (**7 passed**)
+- Structured validation confirmed:
+    - translation/bilingual logic unchanged
+    - date/lookup logic unchanged
+    - conditional rendering preserved
+- Targeted manual spot-checks completed:
+    - `pinswg_sipscase.js`
+    - `pinswg_dnsid.js`
+    - `pinswg_electricityactid.js`
+    - `pinswg_harbourrevisionorderid.js`
+- No behavioural regressions identified
+
+**Outcome:**
+
+- Summary rendering layer simplified and standardised
+- Duplication reduced while preserving all behaviour
+- Safer and more maintainable structure
+
+**Status: COMPLETE**
+
+---
+
+## Rules
+
+- Only work on ONE slice at a time
+- Do not combine slices
+- One branch per slice (exception: controlled rollout batches)
+- One commit per slice (or per file in rollout batch)
+- Update tracker after slice completion
+- Do not proceed if regression risk exists
+
+---
+
+## Regression Checklist (Run After Each Slice)
+
+### Core Journey
+
+- Navigate from case summary → Make representation
+- Select capacity
+- Select representation type
+- Enter content
+- Upload files (if applicable)
+- View check answers
+- Submit representation
+- View confirmation page
+
+---
+
+### Validation
+
+- EN/CY parity maintained
+- No navigation regressions
+- No state inconsistencies
+- No console errors
+
+---
+
+### Technical
+
+- `npm run lint` passes
+- No new warnings/errors introduced
+
+---
+
+## Notes
+
+- CaseSummary is a high-risk entry point
+- Eligibility logic is complex and must not drift
+- Submission flow is highly sensitive
+- Dual-mode entry (new vs existing representation) is a key complexity
+
+---
+
+## Definition of Done (Per Slice)
+
+A slice is complete when:
+
+- behaviour is preserved
+- regression checks pass
+- code is cleaner and easier to understand
+- change is small and safe to merge

data/lookuptranslations.json

@@ -188,41 +188,268 @@
         }
     ],
     "statusCodes": [
-        {
-            "value": "Active",
-            "value_cy": "Gweithredol",
-            "statuscode": 1
-        },
-        {
-            "value": "In Progress",
-            "value_cy": "Ar Waith",
-            "statuscode": 2
-        },
-        {
-            "value": "On Hold",
-            "value_cy": "Wedi’i Ohirio",
-            "statuscode": 3
-        },
-        {
-            "value": "Waiting for a Decision",
-            "value_cy": "Aros am Benderfyniad",
-            "statuscode": 4
-        },
-        {
-            "value": "Researching",
-            "value_cy": "Ymchwilio",
-            "statuscode": 5
-        },
-        {
-            "value": "Problem Solved",
-            "value_cy": "Problem wedi’i Datrys",
-            "statuscode": 6
-        },
-        {
-            "value": "Case Closed",
-            "value_cy": "Achos ar Gau",
-            "statuscode": 6
-        }
+        [
+            {
+                "value": "Pre-Application",
+                "value_cy": "Cyn Ymgeisio",
+                "statuscode": 1
+            },
+            {
+                "value": "Notification",
+                "value_cy": "Hysbysiad",
+                "statuscode": 2
+            },
+            {
+                "value": "Acceptance Checking",
+                "value_cy": "Gwirio Derbyn",
+                "statuscode": 3
+            },
+            {
+                "value": "Invalid Submission",
+                "value_cy": "Cyflwyniad Annilys",
+                "statuscode": 4
+            },
+            {
+                "value": "Consultation",
+                "value_cy": "Ymgynghoriad",
+                "statuscode": 5
+            },
+            {
+                "value": "Re-Consultation",
+                "value_cy": "Ail-Ymgynghoriad",
+                "statuscode": 6
+            },
+            {
+                "value": "Reporting",
+                "value_cy": "Adrodd",
+                "statuscode": 7
+            },
+            {
+                "value": "Inspector(s) Decision",
+                "value_cy": "Penderfyniad yr Arolygydd(ion)",
+                "statuscode": 8
+            },
+            {
+                "value": "Report to Ministers",
+                "value_cy": "Adroddiad i Weinidogion",
+                "statuscode": 9
+            },
+            {
+                "value": "Minister's Decision",
+                "value_cy": "Penderfyniad y Gweinidog",
+                "statuscode": 10
+            },
+            {
+                "value": "Case Closed",
+                "value_cy": "Achos ar Gau",
+                "statuscode": 11
+            },
+            {
+                "value": "Appeal Submitted",
+                "value_cy": "Apêl wedi’i Chyflwyno",
+                "statuscode": 12
+            },
+            {
+                "value": "Appeal Registered",
+                "value_cy": "Apêl wedi’i Chofrestru",
+                "statuscode": 13
+            },
+            {
+                "value": "Appeal Validated",
+                "value_cy": "Apêl wedi’i Dilysu",
+                "statuscode": 14
+            },
+            {
+                "value": "Case in Progress",
+                "value_cy": "Achos ar Waith",
+                "statuscode": 15
+            },
+            {
+                "value": "Questionnaire / LPA to Notify",
+                "value_cy": "Holiadur / Awdurdod Cynllunio Lleol i’w Hysbysu",
+                "statuscode": 16
+            },
+            {
+                "value": "Representations Period",
+                "value_cy": "Cyfnod Cynrychioliadau",
+                "statuscode": 17
+            },
+            {
+                "value": "Final Comments",
+                "value_cy": "Sylwadau Terfynol",
+                "statuscode": 18
+            },
+            {
+                "value": "Event",
+                "value_cy": "Digwyddiad",
+                "statuscode": 19
+            },
+            {
+                "value": "Site Visit",
+                "value_cy": "Ymweliad Safle",
+                "statuscode": 20
+            },
+            {
+                "value": "Decision Issued",
+                "value_cy": "Penderfyniad wedi’i Gyhoeddi",
+                "statuscode": 21
+            },
+            {
+                "value": "Application Called-In",
+                "value_cy": "Cais wedi’i Alw i Mewn",
+                "statuscode": 22
+            },
+            {
+                "value": "Application Registered",
+                "value_cy": "Cais wedi’i Gofrestru",
+                "statuscode": 23
+            },
+            {
+                "value": "Application Validated",
+                "value_cy": "Cais wedi’i Ddilysu",
+                "statuscode": 24
+            },
+            {
+                "value": "LPA to Notify",
+                "value_cy": "Awdurdod Cynllunio Lleol i’w Hysbysu",
+                "statuscode": 25
+            },
+            {
+                "value": "Report Issued to Welsh Ministers",
+                "value_cy": "Adroddiad wedi’i Gyhoeddi i Weinidogion Cymru",
+                "statuscode": 26
+            },
+            {
+                "value": "Fee Due",
+                "value_cy": "Ffi’n Ddyledus",
+                "statuscode": 27
+            },
+            {
+                "value": "Validated",
+                "value_cy": "Dilyswyd",
+                "statuscode": 28
+            },
+            {
+                "value": "Appeal Start / Case in Progress",
+                "value_cy": "Cais Wedi'i Ddechrau/Achos Ar Y Gweill",
+                "statuscode": 29
+            },
+            {
+                "value": "Statements/Representations Period",
+                "value_cy": "Cyfnod Datganiadau/Sylwadau",
+                "statuscode": 30
+            },
+            {
+                "value": "Order Submitted",
+                "value_cy": "Gorchymyn wedi’i Gyflwyno",
+                "statuscode": 31
+            },
+            {
+                "value": "Order Submission Registered",
+                "value_cy": "Cyflwyniad Gorchymyn wedi’i Gofrestru",
+                "statuscode": 32
+            },
+            {
+                "value": "Order Submission Validated",
+                "value_cy": "Cyflwyniad Gorchymyn wedi’i Ddilysu",
+                "statuscode": 33
+            },
+            {
+                "value": "Case started/Case in Progress",
+                "value_cy": "Achos wedi Dechrau/Achos ar Waith",
+                "statuscode": 34
+            },
+            {
+                "value": "Statements",
+                "value_cy": "Datganiadau",
+                "statuscode": 35
+            },
+            {
+                "value": "Event/Site Visit",
+                "value_cy": "Digwyddiad/Ymweliad Safle",
+                "statuscode": 36
+            },
+            {
+                "value": "Application Submitted",
+                "value_cy": "Cais wedi’i Gyflwyno",
+                "statuscode": 37
+            },
+            {
+                "value": "Application Start/Case In Progress",
+                "value_cy": "Dechrau Cais/Achos ar Waith",
+                "statuscode": 38
+            },
+            {
+                "value": "Applicant Statement on Representations",
+                "value_cy": "Datganiad yr Ymgeisydd ar Sylwadau",
+                "statuscode": 39
+            },
+            {
+                "value": "Representatives Comment",
+                "value_cy": "Sylw Cynrychiolydd",
+                "statuscode": 40
+            },
+            {
+                "value": "Applicants Final Comment",
+                "value_cy": "Sylw Terfynol yr Ymgeisydd",
+                "statuscode": 41
+            },
+            {
+                "value": "Order Registered",
+                "value_cy": "Gorchymyn wedi’i Gofrestru",
+                "statuscode": 42
+            },
+            {
+                "value": "Order Validated",
+                "value_cy": "Gorchymyn wedi’i Ddilysu",
+                "statuscode": 43
+            },
+            {
+                "value": "Report to DESNZ",
+                "value_cy": "Adroddiad i DESNZ",
+                "statuscode": 44
+            },
+            {
+                "value": "Case in Progress / Assessment",
+                "value_cy": "Achos ar Waith / Asesiad",
+                "statuscode": 45
+            },
+            {
+                "value": "Decision / Outcome",
+                "value_cy": "Penderfyniad / Canlyniad",
+                "statuscode": 46
+            },
+            {
+                "value": "Complete",
+                "value_cy": "Wedi’i Gwblhau",
+                "statuscode": 47
+            },
+            {
+                "value": "In progress",
+                "value_cy": "Ar Waith",
+                "statuscode": 48
+            },
+            {
+                "value": "Not started",
+                "value_cy": "Heb Ddechrau",
+                "statuscode": 49
+            },
+            {
+                "value": "Blocked",
+                "value_cy": "Wedi’i Rwystro",
+                "statuscode": 50
+            },
+            {
+                "value": "Environmental Impact Assessment Scoping",
+                "value_cy": "Cwmpasu Asesiad Effaith Amgylcheddol",
+                "statuscode": "51"
+            },
+            {
+                "value": "Case Closed - Decision Issued",
+                "value_cy": "Achos Ar Gau - Penderfyniad Wedi'i Gyhoeddi",
+                "statuscode": "52"
+            }
+        ]
     ],
     "pinswg_decision": [
         {