Files
pedwfrontend/components/case/summary.js
T
Robert Bond 37a81522d5 Merged PR 2260: refactor(representations): complete slice-based refactor of representations flow
## Representations Refactor — Behaviour-Preserving Structural Improvements

This PR delivers a full refactor of the representations flow, improving structure, readability, and maintainability while preserving all existing behaviour.

The work was completed using a controlled, slice-based approach with strict guardrails and regression validation at each step. No changes have been made to user journeys, payloads, routing, or EN/CY behaviour.

The result is a cleaner, more maintainable codebase with reduced coupling and clearer separation of concerns, ready for future enhancements without increased risk.

---

## What Was Done

The refactor was delivered incrementally across the following slices:

- **R1** — Representation entry logic extraction
- **R2** — Page loader separation (SSR/data orchestration)
- **R3** — Journey step resolution extraction
- **R4** — Flow shell decomposition
- **R5** — Representation elements normalisation
- **R6** — Data/service layer cleanup
- **R7** — Summary rendering proof slice
- **R8** — Submission/finalisation boundary isolation
- **R9** — Summary rollout (Batch 1)

Each slice:
- was isolated to a single concern
- followed strict guardrails
- was validated before merge

Full detail is available in:
`context/representations-refactor-tracker.md`

---

## Key Improvements

- Reduced coupling across the representations journey
- Separated data loading, orchestration, and rendering concerns
- Simplified complex conditional logic into testable helpers
- Standardised summary rendering using shared primitives (`SummaryCard`, `SummaryRow`)
- Isolated submission/finalisation sequencing into explicit boundaries
- Improved overall readability and maintainability

---

## Behaviour Preservation

This refactor does **not** change:

- User journeys (APP / IP / Agent / LPA)
- Route and query behaviour
- Payload contracts and API interactions
- Redux state shape and usage
- Validation rules and messaging
- EN/CY behaviour
- File upload / PDF / email sequencing
- Linked-case logic

All changes are structural only.

---

## Validation

### Automated

- `npm run lint` — passed (warnings only, no new errors)
- `npm run test:reps` — passed (7/7)

### Manual

Validated end-to-end across:

- APP
- IP
- Agent
- LPA

Including:

- representation creation
- editing/resuming representations
- submission flow
- confirmation/completion behaviour
- summary rendering across case types
- EN/CY parity

---

## Risk Management

The refactor targeted several high-risk areas:

- Case summary entry logic
- Representation submission/finalisation sequencing
- Dual-mode entry (new vs existing representation)

Risk was controlled through:

- small, incremental slices
- one branch per slice
- regression validation per slice
- strict behaviour-preservation guardrails
- controlled rollout for summary rendering changes

---

## Reviewer Guidance

Suggested areas to focus on:

- End-to-end representation journey (create → submit → complete)
- S...
2026-04-20 13:09:07 +00:00

2119 lines
131 KiB
JavaScript

import { JSONPath as jsonpath } from "jsonpath-plus";
import _ from "lodash";
import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import transLookup from "../../data/lookuptranslations.json";
import Documents from "./documents";
import EventsDetails from "./events";
import MediaDetails from "./media";
import {
createWatchedCases,
deleteWatchedCases,
getWatchedCasesProxy,
setCaseInvolvment
} from "../../actions/services/portalService";
import { getLinkedCases } from "../../actions/services/searchService";
import { getPortalModuleDetailsProxy } from "../../actions/services/caseService";
import {
setCurrentLinkedCases,
setCurrentReference,
setCurrentView
} from "../../store/currentView/action";
import {
setWatchedCases,
setWatchedCasesDetails
} from "../../store/watchedCases/action";
import { signIn, useSession } from "next-auth/react";
import { destroyCookie, parseCookies, setCookie } from "nookies";
import { getFormCollectionByID, getDetailsProxy } from "../utils";
import * as CaseTypes from "./summaryTypes"; // ✅ must match filename exactly
import {
capitalizeFirstLetter,
formatDates,
hasValidKey,
isObjectNotEmpty,
hasOwnPropertyAndNotNull,
linkedCasesList,
getBilingualText
} from "./summary/utils/helpers";
import {
isConsultationWindowOpen,
isGeneralRepresentationWindowOpen,
canShowRepButtonForAppealType,
getEntryCtaLabelKey,
shouldSuppressBlockedMessage,
getGeneralBlockedEndDate,
isRepresentationPeriodEnded
} from "./summary/utils/representationEntry";
import {
resolveSearchResultsHref,
isDnsRoutePath
} from "../../lib/routing/routeState";
import CaseNoticeBanner from "./caseNoticeBanner";
import WatchModal from "./watchmodal";
import EIADetails from "./eia";
import GoogleMapComponent from "../mapping";
import OSPoint from "ospoint";
const CaseSummary = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const {
appealTypeID,
incidentid,
caseReference,
myCases,
myRepresentations,
watchedCases,
awaitingSubmission,
searchResultsObj,
searchDetailsObj,
directSearchResultsObj,
currentType,
setCurrentLinkedCases,
linkedCasesReference,
setCurrentReference,
setWatchedCases,
setWatchedCasesDetails,
showMap,
currentView,
messagesObj,
docsOffline,
ticketnumber
} = props;
const showLoginCheck =
currentType == "directResultsObj" ? "true" : currentView.showLogin;
//let showLoginCheck = props.showLoginCheck;
const { data: session, status } = useSession();
const [isModalOpen, setIsModalOpen] = useState(false);
const [whichTab, setWhichTab] = useState("case-details");
const handleOpenModal = () => {
setIsModalOpen(true);
};
const handleCloseModal = () => {
setIsModalOpen(false);
};
const cookies = parseCookies();
const isLPA =
props.accountDetails.accountDetails[
"pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
] == "LPA"
? true
: false;
const selectWatchedCase = (loggedInUser, incidentID, appealType) => {
let updateBody = {
"pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
"pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
"pinswg_appealcasetype": +appealType
};
createWatchedCases(updateBody)
.then((data) => data)
.then(() => {
getWatchedCasesProxy(loggedInUser).then((data) => {
(setWatchedCases(data),
getDetailsProxy(data, "myWatchedCases").then((data) => {
setWatchedCasesDetails(data);
}));
});
});
//setCaseInvolvment(incidentid, loggedInUser);
};
const selectEmailNotifications = (
emailaddress,
loggedInUser,
incidentID,
appealType
) => {
let updateBody = {
"pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
"pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
"pinswg_appealcasetype": +appealType,
"pinswg_emailnotifications": true
};
console.log("Email signed up");
createWatchedCases(updateBody)
.then((data) => data)
.then(() => {
getWatchedCasesProxy(props.accountDetails.loggedinUserId).then(
(data) => {
(setWatchedCases(data),
getDetailsProxy(data, "myWatchedCases").then(
(data) => {
setWatchedCasesDetails(data);
}
));
}
);
});
};
const isWatchedCase = (whichIncident) => {
let isWatched = jsonpath({
path:
"$..value[?(@ && @._pinswg_watchedcase_value=='" +
whichIncident +
"')]",
json: watchedCases,
eval: true
});
return isWatched;
};
const isEmailSignUp = (whichIncident) => {
let isEmail = jsonpath({
path:
"$..value[?(@ && @._pinswg_watchedcase_value=='" +
whichIncident +
"' && @.pinswg_emailnotifications==true)]",
json: watchedCases,
eval: true
});
return isEmail;
};
const deleteItem = (caseID, topThreeType) => {
let cookies = parseCookies();
topThreeType == "watchedCases" &&
deleteWatchedCases(caseID)
.then((data) => data)
.then(() => {
getWatchedCasesProxy(cookies.pinsUser).then((data) => {
let showWatchedCases = (submittedArr) => {
const required = submittedArr.value.filter((el) => {
return (
el.pinswg_representationsubmitted == null
);
});
let newObj = {};
return Object.assign(newObj, {
"@odata.count": required.length,
"value": required
});
};
data = showWatchedCases(data);
data.value.sort(function compare(a, b) {
var dateA = new Date(a.createdon);
var dateB = new Date(b.createdon);
return dateB - dateA;
});
(setWatchedCases(data),
getDetailsProxy(data, "myWatchedCases").then(
(data) => {
setWatchedCasesDetails(data);
}
));
});
});
};
const noRepresentationLink = ["/dnsdetails", "/dns/[developmentName]"];
let setCaseQueryObj =
currentType == "directResultsObj"
? props.searchResultsObj
: props[currentType];
let setCaseDetailsObj =
currentType == "directResultsObj"
? props.searchDetailsObj
: props[currentType + "Details"];
var casesObj = {};
currentType == "searchResultsObj"
? (casesObj = jsonpath({
path: '$..[?(@ && @.ticketnumber=="' + ticketnumber + '")]',
json: searchResultsObj,
eval: true
}))
: currentType == "watchedCases"
? (casesObj = jsonpath({
path: '$..[?(@ && @.ticketnumber=="' + ticketnumber + '")]',
json: setCaseQueryObj,
eval: true
}))
: currentType == "myCases"
? (casesObj = jsonpath({
path: '$..[?(@ && @.pinswg_title=="' + caseReference + '")]',
json: setCaseQueryObj,
eval: true
}))
: currentType == "directResultsObj"
? (casesObj = jsonpath({
path: '$..[?(@ && @.ticketnumber=="' + ticketnumber + '")]',
json: setCaseQueryObj,
eval: true
}))
: (casesObj = jsonpath({
path: '$..[?(@ && @.reference=="' + caseReference + '")]',
json: setCaseQueryObj,
eval: true
}));
casesObj = Object.assign({}, ...casesObj);
var detailsObj = {};
currentType == "searchResultsObj"
? (detailsObj = jsonpath({
path: '$..[?(@ && @.pinswg_name=="' + caseReference + '")]',
json: searchDetailsObj,
eval: true
}))
: currentType == "directResultsObj"
? (detailsObj = setCaseDetailsObj[0].value[0])
: (detailsObj = jsonpath({
path: '$..[?(@ && @.pinswg_name=="' + caseReference + '")]',
jsopn: setCaseDetailsObj,
eval: true
}));
detailsObj = typeof detailsObj == "object" ? detailsObj : detailsObj[0];
let showDetails = typeof detailsObj != "undefined" ? true : false;
var timestamp = showDetails
? detailsObj.hasOwnProperty("pinswg_representation_period_end_date")
? Date.parse(detailsObj.pinswg_representation_period_end_date)
: "n/a"
: "n/a";
if (isNaN(timestamp) == false) {
var d = new Date(timestamp);
}
let hasEndDate = typeof d != "undefined";
let point = {};
let siteCoords = {};
let center = {};
point = new OSPoint(
detailsObj.pinswg_anticipatedgridreferencenorthingtext ||
detailsObj.pinswg_anticipatedgridrefnorthing,
detailsObj.pinswg_anticipatedgridreferenceeastingtext ||
detailsObj.pinswg_anticipatedgridrefeasting
);
siteCoords = point.toOSGB36();
//console.log(siteCoords);
center = {
id: "",
lat: isNaN(parseFloat(siteCoords.latitude))
? 52.412272
: parseFloat(siteCoords.latitude),
lng: isNaN(parseFloat(siteCoords.longitude))
? -3.437989
: parseFloat(siteCoords.longitude)
};
const zoom = isNaN(parseFloat(siteCoords.latitude)) ? 7 : 12;
const isDnsRoute = isDnsRoutePath(router.pathname);
const searchHref = resolveSearchResultsHref({
query: router.query,
hasSession: Boolean(session),
includeViewAll: true,
fallbackToMyPortalWhenNoFlags: true,
isDnsRoute
});
let showDetailsBlock =
showDetails == true ? (
<>
<div className="govuk-frontend-supported">
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
{t("case:summary-reference-label")}:{" "}
{currentType == "searchResultsObj"
? detailsObj.pinswg_name
: currentType == "directResultsObj"
? casesObj.title
: currentType == "watchedCases"
? casesObj.pinswg_title
: casesObj.reference}
</h1>
</div>
</div>
<div className="govuk-tabs" data-module="govuk-tabs">
<h2 className="govuk-tabs__title">Contents</h2>
<ul className="govuk-tabs__list">
<li
className={
whichTab == "case-details"
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item "
}
>
<a
className="govuk-tabs__tab"
href="#case-details"
onClick={() => setWhichTab("case-details")}
>
{t("case:summary-tab-details-label")}
</a>
</li>
<li
className={
whichTab == "case-summary"
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item "
}
>
<a
className="govuk-tabs__tab"
href="#case-summary"
onClick={() => setWhichTab("case-summary")}
>
{t("case:summary-tab-summary-label")}
</a>
</li>
{((hasValidKey(
detailsObj,
"pinswg_anticipatedgridreferencenorthingtext"
) &&
hasValidKey(
detailsObj,
"pinswg_anticipatedgridreferenceeastingtext"
)) ||
(hasValidKey(
detailsObj,
"pinswg_anticipatedgridrefeasting"
) &&
hasValidKey(
detailsObj,
"pinswg_anticipatedgridrefnorthing"
))) && (
<li
className={
whichTab == "case-map"
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item "
}
>
<a
className="govuk-tabs__tab"
href="#case-map"
onClick={() => setWhichTab("case-map")}
>
{t("case:summary-tab-map-label")}
</a>
</li>
)}
{getFormCollectionByID(appealTypeID)
.PrimaryIdAttribute == "pinswg_sipscase" && (
<li
className={
whichTab == "case-eia"
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item "
}
>
<a
className="govuk-tabs__tab"
href="#case-eia"
onClick={() => setWhichTab("case-eia")}
>
{" "}
EIA
</a>
</li>
)}
{isObjectNotEmpty(props, "eventsObj") && (
<li
className={
whichTab == "case-events"
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item "
}
>
<a
className="govuk-tabs__tab"
href="#case-events"
onClick={() =>
setWhichTab("case-events")
}
>
{" "}
{t("case:summary-tab-events-label")}
</a>
</li>
)}
{isObjectNotEmpty(props, "mediaObj") && (
<li
className={
whichTab == "case-media"
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item "
}
>
<a
className="govuk-tabs__tab"
href="#case-media"
onClick={() =>
setWhichTab("case-media")
}
>
{" "}
{t("case:summary-tab-media-label")}{" "}
</a>
</li>
)}
<li
className={
whichTab == "case-documents"
? "govuk-tabs__list-item govuk-tabs__list-item--selected"
: "govuk-tabs__list-item "
}
>
<a
className="govuk-tabs__tab"
href="#case-documents"
onClick={() =>
setWhichTab("case-documents")
}
>
{t("case:summary-tab-documents-label")}
</a>
</li>
</ul>
<div
className={
whichTab == "case-details"
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="case-details"
>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
{/* <h1 className="govuk-heading-xl govuk-!-margin-bottom-7">
</h1> */}
{props.messagesObj["@odata.count"] > 0 && (
<CaseNoticeBanner
messagesObj={props.messagesObj}
/>
)}
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{getFormCollectionByID(
appealTypeID ||
setCaseQueryObj.value[0]
.pinswg_appealcasetype
).PrimaryIdAttribute ==
"pinswg_dnsid"
? t(
"case:summary-applicantonly-label"
)
: getFormCollectionByID(
appealTypeID ||
setCaseQueryObj
.value[0]
.pinswg_appealcasetype
).PrimaryIdAttribute ==
"pinswg_nonvalidationid"
? t(
"case:summary-appellantonly-label"
)
: t(
"case:summary-applicant-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{casesObj.pinswg_appellantagent ==
846040001
? casesObj.pinswg_appellantfirstname +
" " +
casesObj.pinswg_appellantlastname
: detailsObj[
"_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
] || "not entered"}
</dd>
</div>
{detailsObj.pinswg_agentcontactname !=
null &&
(_.has(
detailsObj,
"pinswg_agentcontactname"
) ? (
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t(
"case:summary-agent-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_agentcontactname"
)
? detailsObj.pinswg_agentcontactname
: ""}
</dd>
</div>
) : (
""
))}
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t(
"case:summary-site-address-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{getFormCollectionByID(
appealTypeID ||
setCaseQueryObj.value[0]
.pinswg_appealcasetype
).PrimaryIdAttribute ==
"pinswg_dnsid" ||
getFormCollectionByID(
appealTypeID
).PrimaryIdAttribute ==
"pinswg_sipscase"
? detailsObj.pinswg_projectlocation !=
null
? detailsObj.pinswg_projectlocation.indexOf(
";"
) < 0
? detailsObj.pinswg_projectlocation
: router.locale ==
"cy"
? detailsObj.pinswg_projectlocation.split(
";"
)[1]
: detailsObj.pinswg_projectlocation.split(
";"
)[0]
: ""
: ""}
{_.has(
detailsObj,
"pinswg_siteaddressline1"
)
? detailsObj.pinswg_siteaddressline1
: ""}
{_.has(
detailsObj,
"pinswg_addressline1"
)
? detailsObj.pinswg_addressline1
: ""}
{_.has(
detailsObj,
"pinswg_siteaddressline1"
) &&
detailsObj.pinswg_siteaddressline1 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_addressline1"
) &&
detailsObj.pinswg_addressline1 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddressline2"
)
? detailsObj.pinswg_siteaddressline2
: ""}
{_.has(
detailsObj,
"pinswg_addressline2"
)
? detailsObj.pinswg_addressline2
: ""}
{_.has(
detailsObj,
"pinswg_addressline2"
) &&
detailsObj.pinswg_addressline2 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresstown"
)
? detailsObj.pinswg_siteaddresstown
: ""}
{_.has(
detailsObj,
"pinswg_addresstown"
)
? detailsObj.pinswg_addresstown
: ""}
{_.has(
detailsObj,
"pinswg_siteaddresstown"
) &&
detailsObj.pinswg_siteaddresstown !=
null && <br />}
{_.has(
detailsObj,
"pinswg_addresstown"
) &&
detailsObj.pinswg_addresstown !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresscounty"
)
? detailsObj.pinswg_siteaddresscounty
: ""}
{_.has(
detailsObj,
"pinswg_addresscounty"
)
? detailsObj.pinswg_addresscounty
: ""}
{_.has(
detailsObj,
"pinswg_siteaddresscounty"
) &&
detailsObj.pinswg_siteaddresscounty !=
null && <br />}
{_.has(
detailsObj,
"pinswg_addresscounty"
) &&
detailsObj.pinswg_addresscounty !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresspostcode"
)
? detailsObj.pinswg_siteaddresspostcode
: ""}
{_.has(
detailsObj,
"pinswg_postcode"
)
? detailsObj.pinswg_postcode
: ""}
</dd>
</div>
{casesObj.description != null && (
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t(
"case:summary-description-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{getBilingualText(
casesObj.description,
router.locale
)}
</dd>
</div>
)}
{detailsObj.pinswg_casestage !=
null && (
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t(
"case:summary-case-stage-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{router.locale == "cy"
? jsonpath({
path:
'$..[?(@.value=="' +
detailsObj[
"pinswg_casestage@OData.Community.Display.V1.FormattedValue"
] +
'")].value_cy',
json: transLookup,
eval: true
})
: detailsObj[
"pinswg_casestage@OData.Community.Display.V1.FormattedValue"
] ||
t(
"case:summary-no-date-entered-label"
)}
</dd>
</div>
)}
{casesObj.pinswg_environmentalstatementlocation !=
null && (
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t(
"case:summary-environmental-statement-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{
casesObj.pinswg_environmentalstatementlocation
}
</dd>
</div>
)}
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t(
"case:summary-last-modified-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{detailsObj.modifiedon >
casesObj.modifiedon
? formatDates(
detailsObj.modifiedon
)
: formatDates(
casesObj.modifiedon
)}
</dd>
</div>
</dl>
</div>
</div>
{showLoginCheck == "true" && (
<>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<div className="">
<div className="govuk-button-group">
{getFormCollectionByID(
appealTypeID
).PrimaryIdAttribute ==
"pinswg_sipscase" &&
isConsultationWindowOpen(
detailsObj
) && (
<>
{canShowRepButtonForAppealType(
{
"appealType":
props
.currentView
.caseReference
.appealType,
"isLPA":
isLPA,
"searchDetailsObj":
props.searchDetailsObj
}
) ? (
<>
<Link
href={{
pathname:
"/myportal/representation",
query: {
case:
currentType ==
"searchResultsObj"
? detailsObj.pinswg_name
: currentType ==
"watchedCases"
? casesObj.pinswg_title
: currentType ==
"directResultsObj"
? detailsObj.pinswg_name
: casesObj.reference
}
}}
className="govuk-button"
>
{t(
getEntryCtaLabelKey(
props
.currentView
.caseReference
.appealType
)
)}
</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_consultationopen
),
endDate:
formatDates(
detailsObj.pinswg_consultationclose
)
}
)}
<br />{" "}
{t(
"case:representation-date-passed-additional-label"
)}{" "}
<Link
href={
"mailto:" +
t(
"home:login-contact-email"
)
}
>
{t(
"home:login-contact-email"
)}
</Link>
</p>
</div>
</div>
</>
)}
</>
)}
{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
: 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(
getGeneralBlockedEndDate(
detailsObj,
props
.currentView
.caseReference
.appealType
)
)
}
)}
<br />{" "}
{t(
"case:representation-date-passed-additional-label"
)}{" "}
<Link
href={
"mailto:" +
t(
"home:login-contact-email"
)
}
>
{t(
"home:login-contact-email"
)}
</Link>
</p>
</div>
</div>
</>
)}
</>
)}
<Link
className="govuk-button govuk-button--secondary"
href={searchHref}
>
{" "}
{t(
"case:summary-back-button-label"
)}
</Link>
</div>
<div className="govuk-button-group">
{session &&
(isWatchedCase(
props.currentView
.caseReference
.incidentid
).length >
0 ==
true ? (
<button
className="govuk-link watchCase"
onClick={() => {
(confirm(
t(
"case:you-have-stopped-watching-label"
) +
props
.currentView
.caseReference
.currentReference +
"?"
) &&
deleteItem(
isWatchedCase(
props
.currentView
.caseReference
.incidentid
)[0]
.pinswg_watchlistid,
"watchedCases"
),
setCurrentView(
{
"viewName":
"Watched Cases",
"viewKey":
"watchedCases"
}
));
setCurrentReference(
{
"ticketnumber":
props
.currentView
.caseReference
.currentReference,
"currentReference":
props
.currentView
.caseReference
.currentReference,
"currentType":
"searchResultsObj",
"incidentid":
props
.currentView
.caseReference
.incidentid,
"appealType":
props
.currentView
.caseReference
.appealType,
"showMap":
showMap
}
);
}}
title={t(
"case:stop-watching-case-link"
)}
>
{t(
"case:stop-watching-case-link"
)}{" "}
</button>
) : (
<>
<button
className="govuk-link watchCase"
onClick={() => {
confirm(
t(
"case:you-are-watching-label"
) +
" " +
props
.currentView
.caseReference
.currentReference +
"?"
) &&
selectWatchedCase(
props
.accountDetails
.loggedinUserId,
props
.currentView
.caseReference
.incidentid,
props
.currentView
.caseReference
.appealType
);
}}
>
{t(
"case:watch-this-case-link"
)}
</button>
</>
))}
{session &&
(isEmailSignUp(
props.currentView
.caseReference
.incidentid
).length >
0 ==
true ? (
<button
className="govuk-link watchCase"
onClick={() => {
(confirm(
t(
"case:summary-unsubscribe-mail-label"
) +
props
.currentView
.caseReference
.currentReference +
"?"
) &&
deleteItem(
isEmailSignUp(
props
.currentView
.caseReference
.incidentid
)[0]
.pinswg_watchlistid,
"watchedCases"
),
setCurrentView(
{
"viewName":
"Watched Cases",
"viewKey":
"watchedCases"
}
));
setCurrentReference(
{
"ticketnumber":
props
.currentView
.caseReference
.currentReference,
"currentReference":
props
.currentView
.caseReference
.currentReference,
"currentType":
"searchResultsObj",
"incidentid":
props
.currentView
.caseReference
.incidentid,
"appealType":
props
.currentView
.caseReference
.appealType,
"showMap":
showMap
}
);
}}
title={t(
"case:stop-sending-email-notifications"
)}
>
{t(
"case:stop-sending-email-notifications"
)}{" "}
</button>
) : (
<>
<button
className="govuk-link watchCase"
onClick={() => {
confirm(
t(
"case:summary-subscribe-mail-label"
) +
" " +
props
.currentView
.caseReference
.currentReference +
"?"
) &&
selectEmailNotifications(
props
.accountDetails
.accountDetails
.emailaddress1,
props
.accountDetails
.loggedinUserId,
props
.currentView
.caseReference
.incidentid,
props
.currentView
.caseReference
.appealType
);
}}
>
{t(
"case:send-email-notifications"
)}
</button>
</>
))}
{!session && (
<>
<button
className="govuk-link watchCase"
onClick={() => {
(confirm(
"Trying to watch case " +
props
.currentView
.caseReference
.currentReference +
"\n\nYou will now be prompted to sign in"
) &&
// signIn("email", {
// callbackUrl:
// "/myportal/case/" +
// props
// .currentView
// .caseReference
// .ticketnumber,
// });
setCookie(
null,
"pedwWatchCase",
currentType ==
"searchResultsObj"
? detailsObj.pinswg_name
: currentType ==
"directResultsObj"
? casesObj.title
: casesObj.reference,
{
path: "/",
expires:
expDate
}
),
signIn());
}}
title={t(
"case:watch-this-case-link"
)}
>
{t(
"case:watch-this-case-link"
)}
</button>{" "}
<button
className="govuk-link watchCase"
onClick={() => {
(confirm(
t(
"case:summary-subscribe-mail-label"
) +
" " +
props
.currentView
.caseReference
.currentReference +
"?"
) &&
setCookie(
null,
"pedwWatchCase",
currentType ==
"searchResultsObj"
? detailsObj.pinswg_name
: currentType ==
"directResultsObj"
? casesObj.title
: casesObj.reference,
{
path: "/",
expires:
expDate
}
),
signIn());
}}
>
{t(
"case:send-email-notifications"
)}
</button>
</>
)}
</div>
</div>
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
{_.has(
detailsObj,
"pinswg_startdate"
) &&
(detailsObj.pinswg_startdate !=
null ||
detailsObj.pinswg_finalcommentsduedate !=
null) &&
isRepresentationPeriodEnded(
detailsObj
) && (
<div className="govuk-body">
{props.currentView
.caseReference
.appealType ==
84604002
? t(
"case:consultation-period-ended-on-label"
)
: t(
"case:representation-period-ended-on-label"
)}
{props.currentView
.caseReference
.appealType ==
846040019
? formatDates(
detailsObj.pinswg_statementduedate
)
: formatDates(
detailsObj.pinswg_finalcommentsduedate
)}
</div>
)}
</div>
</div>
</>
)}
</div>
<div
className={
whichTab == "case-summary"
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="case-summary"
>
{showSummary(
appealTypeID,
casesObj,
detailsObj,
formatDates,
linkedCasesList,
currentView,
showMap
)}
</div>
{((hasValidKey(
detailsObj,
"pinswg_anticipatedgridreferencenorthingtext"
) &&
hasValidKey(
detailsObj,
"pinswg_anticipatedgridreferenceeastingtext"
)) ||
(hasValidKey(
detailsObj,
"pinswg_anticipatedgridrefeasting"
) &&
hasValidKey(
detailsObj,
"pinswg_anticipatedgridrefnorthing"
))) && (
<div
className={
whichTab == "case-map"
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="case-map"
>
<div className="govuk-grid-row">
<div
style={{
height: "40vh",
width: "100%"
}}
>
<GoogleMapComponent
center={center}
zoom={zoom}
/>
{/* <OSMapComponent center={center} zoom={zoom} /> */}
</div>
</div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<dl className="govuk-summary-list govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
{t(
"case:summary-site-address-label"
)}
</dt>
<dd className="govuk-summary-list__value">
{getFormCollectionByID(
appealTypeID
).PrimaryIdAttribute ==
"pinswg_dnsid" ||
getFormCollectionByID(
appealTypeID
).PrimaryIdAttribute ==
"pinswg_sipscase"
? detailsObj.pinswg_projectlocation !=
null
? detailsObj.pinswg_projectlocation.indexOf(
";"
) < 0
? detailsObj.pinswg_projectlocation
: router.locale ==
"cy"
? detailsObj.pinswg_projectlocation.split(
";"
)[1]
: detailsObj.pinswg_projectlocation.split(
";"
)[0]
: ""
: ""}
{_.has(
detailsObj,
"pinswg_siteaddressline1"
)
? detailsObj.pinswg_siteaddressline1
: ""}
{_.has(
detailsObj,
"pinswg_addressline1"
)
? detailsObj.pinswg_addressline1
: ""}
{_.has(
detailsObj,
"pinswg_siteaddressline1"
) &&
detailsObj.pinswg_siteaddressline1 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_addressline1"
) &&
detailsObj.pinswg_addressline1 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddressline2"
)
? detailsObj.pinswg_siteaddressline2
: ""}
{_.has(
detailsObj,
"pinswg_addressline2"
)
? detailsObj.pinswg_addressline2
: ""}
{_.has(
detailsObj,
"pinswg_addressline2"
) &&
detailsObj.pinswg_addressline2 !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresstown"
)
? detailsObj.pinswg_siteaddresstown
: ""}
{_.has(
detailsObj,
"pinswg_addresstown"
)
? detailsObj.pinswg_addresstown
: ""}
{_.has(
detailsObj,
"pinswg_siteaddresstown"
) &&
detailsObj.pinswg_siteaddresstown !=
null && <br />}
{_.has(
detailsObj,
"pinswg_addresstown"
) &&
detailsObj.pinswg_addresstown !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresscounty"
)
? detailsObj.pinswg_siteaddresscounty
: ""}
{_.has(
detailsObj,
"pinswg_addresscounty"
)
? detailsObj.pinswg_addresscounty
: ""}
{_.has(
detailsObj,
"pinswg_siteaddresscounty"
) &&
detailsObj.pinswg_siteaddresscounty !=
null && <br />}
{_.has(
detailsObj,
"pinswg_addresscounty"
) &&
detailsObj.pinswg_addresscounty !=
null && <br />}
{_.has(
detailsObj,
"pinswg_siteaddresspostcode"
)
? detailsObj.pinswg_siteaddresspostcode
: ""}
{_.has(
detailsObj,
"pinswg_postcode"
)
? detailsObj.pinswg_postcode
: ""}
</dd>
</div>
</dl>
</div>
</div>
</div>
)}
<div
className={
whichTab == "case-eia"
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="case-eia"
>
<div className="govuk-grid-row">
<div className="flex-container grid-row govuk-body case">
<div className="card" id="key-dates-card">
<div className="card-body">
<div>
<h4 className="govuk-heading-s ">
EIA Screening
</h4>
<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">
Screening start date
</dt>{" "}
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_screeningstartdate"
)
? !_.isEmpty(
detailsObj.pinswg_screeningstartdate
)
? formatDates(
detailsObj.pinswg_screeningstartdate
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
EIA target date
</dt>{" "}
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_eiatargetdate"
)
? !_.isEmpty(
detailsObj.pinswg_eiatargetdate
)
? formatDates(
detailsObj.pinswg_eiatargetdate
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
{hasValidKey(
detailsObj,
"pinswg_targetextended"
) && (
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
Target Extended
</dt>{" "}
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_targetextended"
)
? !_.isEmpty(
detailsObj.pinswg_targetextended
)
? formatDates(
detailsObj.pinswg_targetextended
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
)}
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
Direction Issued
Date
</dt>{" "}
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_directionissueddate"
)
? !_.isEmpty(
detailsObj.pinswg_directionissueddate
)
? formatDates(
detailsObj.pinswg_directionissueddate
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
{hasValidKey(
detailsObj,
"pinswg_eiarequired"
) && (
<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">
{_.has(
detailsObj,
"pinswg_eiarequired"
)
? detailsObj.pinswg_eiarequired
? router.locale ==
"cy"
? "Ie"
: "Yes"
: router.locale ==
"cy"
? "Na"
: "No"
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
)}
</dl>
</div>
</div>
</div>
<div className="card" id="key-dates-card">
<div className="card-body">
<div>
<h4 className="govuk-heading-s ">
EIA Scoping
</h4>
<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">
Scoping Start Date
</dt>{" "}
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_scopingstartdate"
)
? !_.isEmpty(
detailsObj.pinswg_scopingstartdate
)
? formatDates(
detailsObj.pinswg_scopingstartdate
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
Scoping Target Date
</dt>{" "}
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_scopingtargetdate"
)
? !_.isEmpty(
detailsObj.pinswg_scopingtargetdate
)
? formatDates(
detailsObj.pinswg_scopingtargetdate
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
{hasValidKey(
detailsObj,
"pinswg_scopingtargetextended"
) && (
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
Scoping Target
Extended
</dt>
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_scopingtargetextended"
)
? !_.isEmpty(
detailsObj.pinswg_scopingtargetextended
)
? formatDates(
detailsObj.pinswg_scopingtargetextended
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
)}
<div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key">
Scoping Outcome
Issued Date
</dt>{" "}
<dd className="govuk-summary-list__value">
{_.has(
detailsObj,
"pinswg_scopingoutcomeissueddate"
)
? !_.isEmpty(
detailsObj.pinswg_scopingoutcomeissueddate
)
? formatDates(
detailsObj.pinswg_scopingoutcomeissueddate
)
: t(
"case:summary-awaiting-information-label"
)
: t(
"case:summary-awaiting-information-label"
)}
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
{getFormCollectionByID(appealTypeID)
.PrimaryIdAttribute == "pinswg_sipscase" && (
<EIADetails props={props} />
)}
{isObjectNotEmpty(props, "eventsObj") && (
<div
className={
whichTab == "case-events"
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="case-events"
>
<EventsDetails eventsObj={props.eventsObj} />
</div>
)}
{isObjectNotEmpty(props, "mediaObj") && (
<div
className={
whichTab == "case-media"
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="case-media"
>
<MediaDetails
mediaObj={props.mediaObj}
whichTab={whichTab}
/>
</div>
)}
<div
className={
whichTab == "case-documents"
? "govuk-tabs__panel "
: "govuk-tabs__panel govuk-tabs__panel--hidden"
}
id="case-documents"
>
<Documents
incidentid={
props.incidentid ||
setCaseQueryObj.value[0].incidentid
}
caseReference={props.caseReference}
searchResultsObj={props.searchResultsObj}
searchDetailsObj={props.searchDetailsObj}
documentDetailsObj={props.documentDetailsObj}
docsOffline={docsOffline}
showFilteredDocs={props.showFilteredDocs}
/>
</div>
</div>
</div>
</>
) : (
<>
<div>
<div className="govuk-grid-row">
<div className="govuk-grid-column-full">
<h1>{t("case:summary-no-details-label")}</h1>
</div>
</div>
</div>
{showLoginCheck == "true" && (
<div className="govuk-grid-row">
<div className="govuk-grid-column-full ">
<div className="govuk-button-group">
{noRepresentationLink.includes(
router.pathname
) == true ? (
""
) : (
<Link
href="/representation"
className="govuk-button"
>
{t(
"case:summary-make-representation-label"
)}
</Link>
)}
</div>
</div>
</div>
)}
</>
);
function showSummary(
appealTypeID,
casesObj,
detailsObj,
formatDates,
linkedCasesList,
currentView,
showMap
) {
const id = getFormCollectionByID(
appealTypeID || setCaseQueryObj.value[0].pinswg_appealcasetype
).PrimaryIdAttribute;
const Component = CaseTypes[capitalizeFirstLetter(id)];
return Component ? (
<Component
casesObj={casesObj}
detailsObj={detailsObj}
formatDates={formatDates}
linkedCasesList={linkedCasesList}
currentView={currentView}
showMap={showMap}
/>
) : null;
}
useEffect(() => {
const linkCaseObj = async () => {
let docObj = await getLinkedCases(
incidentid || setCaseQueryObj.value[0].incidentid
).then((data) => {
//console.log(data);
setCurrentLinkedCases(data);
return data;
});
return linkCaseObj;
};
const linkedCases = linkCaseObj();
}, [incidentid, setCurrentLinkedCases]);
let now = new Date();
let expDate = new Date(now);
expDate.setDate(now.getDate() + 365);
function formatDates(dateObj, showTime) {
var dateObj = new Date(dateObj);
var dd = String(dateObj.getDate()).padStart(2, "0");
var mm = String(dateObj.getMonth() + 1).padStart(2, "0"); //January is 0!
var yyyy = dateObj.getFullYear();
var hh = dateObj.getHours();
hh = ("0" + hh).slice(-2);
var mins = dateObj.getMinutes();
mins = ("0" + mins).slice(-2);
const dateStr = showTime
? hh == 0 && mins == 0
? ""
: hh + ":" + mins
: dd + "/" + mm + "/" + yyyy + " ";
return dateStr;
}
function linkedCasesList(linkedCasesReference) {
//console.log(linkedCasesReference);
linkedCasesReference = linkedCasesReference.value || [];
return (
<>
<ul className="govuk-list govuk-!-font-size-16">
{linkedCasesReference.map((item, key) => {
return (
<li key={key}>
<Link
href={
router.locale == "cy"
? "/canlyniadauchwilio?q=" +
item.title +
"&lk=1"
: "/searchresults?q=" +
item.title +
"&lk=1"
}
className=""
>
{item.title}
</Link>
</li>
);
//console.log(item.incidentid, item.title);
})}
</ul>
</>
);
}
if (status == "authenticated" && cookies.pedwWatchCase != null) {
selectWatchedCase(
props.accountDetails.accountDetails.contactid,
incidentid,
appealTypeID
);
destroyCookie({}, "pedwWatchCase", { path: "/" });
}
return <>{showDetailsBlock}</>;
};
const mapStateToProps = (state) => {
return {
accountDetails: state.accountDetails,
currentView: state.currentView,
search: state.search,
// searchResultsObj: state.searchResultsObj,
documentDetailsObj: state.searchResultsObj.documentDetailsObj,
formData: state.formData,
appealType: state.appealType,
form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
mySubmittedReps: state.myRepresentations.mySubmittedReps
};
};
const mapDispatchToProps = (dispatch) => {
return {
setCurrentLinkedCases: (parentIncidentid) => {
dispatch(setCurrentLinkedCases(parentIncidentid));
},
setCurrentReference: (currentReference) => {
dispatch(setCurrentReference(currentReference));
},
setWatchedCases: (watchedCases) => {
dispatch(setWatchedCases(watchedCases));
},
setWatchedCasesDetails: (watchedCasesDetails) => {
dispatch(setWatchedCasesDetails(watchedCasesDetails));
},
setCurrentView: (currentView) => {
dispatch(setCurrentView(currentView));
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(CaseSummary);