robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 2256: refactor(representations): preserve Welsh conditional validation and summary...

Browse Source 
refactor(representations): preserve Welsh conditional validation and summary parity

Related work items: #22441
This commit is contained in:
Robert Bond
2026-04-17 12:44:23 +00:00
parent 33f31ad3c8
commit 7713fc3724
8 changed files with 949 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/representationCompleteSubmit.js
+8 -1
View File
@@ -61,6 +61,13 @@ const RepCompleteSubmit = (props) => {
repFormData = updateLinks(repFormData); 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(); //const repDate = new Date();
// let day = repDate.getDate(); // let day = repDate.getDate();
@@ -406,7 +413,7 @@ const RepCompleteSubmit = (props) => {
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{ {
repFormData.representationOnBehalfOf representationOnBehalfOfDisplay
} }
</dd> </dd>
components/case/representation/representationElements.js
+44 -8
View File
@@ -258,6 +258,26 @@ export const RenderCondtionalRadioList = ({
}) => { }) => {
const required = (value) => (value ? undefined : "Required"); const required = (value) => (value ? undefined : "Required");
let { t } = useTranslation(); 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 ( return (
<> <>
<div <div
@@ -304,8 +324,16 @@ export const RenderCondtionalRadioList = ({
{custom.hint} {custom.hint}
</div> </div>
<div className="govuk-radios"> <div className="govuk-radios">
{Object.keys(options).map((key, index) => ( {Object.keys(options).map((key, index) => {
<div key={key} className="govuk-!-margin-bottom-3"> const normalizedOptionValue = normalizeYesNo(
options[key]
);
return (
<div
key={key}
className="govuk-!-margin-bottom-3"
>
<div <div
className="govuk-radios__item" className="govuk-radios__item"
data-children-count={key} data-children-count={key}
@@ -317,7 +345,7 @@ export const RenderCondtionalRadioList = ({
component="input" component="input"
type="radio" type="radio"
className="govuk-radios__input" className="govuk-radios__input"
value={options[key]} value={normalizedOptionValue}
validate={[required]} validate={[required]}
/> />
<label <label
@@ -333,7 +361,8 @@ export const RenderCondtionalRadioList = ({
)} )}
</label> </label>
</div> </div>
{value == "Yes" && options[key] == "Yes" && ( {isYesSelected &&
normalizedOptionValue === "Yes" && (
<div <div
className="govuk-radios__conditional " className="govuk-radios__conditional "
id={"conditional-" + id} id={"conditional-" + id}
@@ -344,7 +373,9 @@ export const RenderCondtionalRadioList = ({
> >
<label <label
className="govuk-label" className="govuk-label"
htmlFor={id + "_details"} htmlFor={
id + "_details"
}
> >
{t( {t(
"myrepresentations:representation-onbehalfof-label" "myrepresentations:representation-onbehalfof-label"
@@ -354,9 +385,13 @@ export const RenderCondtionalRadioList = ({
className="govuk-input govuk-!-width-one-half" className="govuk-input govuk-!-width-one-half"
id={id + "_details"} id={id + "_details"}
name={id + "_details"} name={id + "_details"}
component={RenderTextfield} component={
RenderTextfield
}
type="text" type="text"
validate={[required]} validate={[
requiredIfYes
]}
errorMsg={t( errorMsg={t(
"myrepresentations:is-required-label" "myrepresentations:is-required-label"
)} )}
@@ -365,7 +400,8 @@ export const RenderCondtionalRadioList = ({
</div> </div>
)} )}
</div> </div>
))} );
})}
</div> </div>
</fieldset> </fieldset>
</div> </div>
components/case/representation/representationInterestedPartyPerson.js
+1 -6
View File
@@ -114,12 +114,7 @@ const RepInterestedPartyPerson = (props) => {
name="representationOnBehalfOf" name="representationOnBehalfOf"
datafieldname="representationOnBehalfOf" datafieldname="representationOnBehalfOf"
// label="In what capacity do you wish to make representations on this case?" // label="In what capacity do you wish to make representations on this case?"
options={[ options={["Yes", "No"]}
t(
"myrepresentations:questionnaire-yes"
),
t("myrepresentations:questionnaire-no")
]}
id="representationOnBehalfOf" id="representationOnBehalfOf"
className="govuk-radios__input" className="govuk-radios__input"
errorMsg={t( errorMsg={t(
components/case/summary/components/SummaryCard.js
+24
View File
@@ -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
+15
View File
@@ -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/summaryTypes/pinswg_planningappeals78id.js
+47 -100
View File
@@ -3,6 +3,8 @@ import _ from "lodash";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import transLookup from "../../../data/lookuptranslations.json"; import transLookup from "../../../data/lookuptranslations.json";
import SummaryCard from "../summary/components/SummaryCard";
import SummaryRow from "../summary/components/SummaryRow";
const Pinswg_planningappeals78id = (props) => { const Pinswg_planningappeals78id = (props) => {
let { t } = useTranslation(); let { t } = useTranslation();
@@ -13,20 +15,15 @@ const Pinswg_planningappeals78id = (props) => {
return ( return (
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="flex-container grid-row govuk-body case"> <div className="flex-container grid-row govuk-body case">
<div className="card" id="case-details-card"> <SummaryCard
<div className="card-body"> id="case-details-card"
<div className="govuk-grid-column-full"> title={t("case:summary-case-details-label")}
<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"> <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row"> <SummaryRow
<dt className="govuk-summary-list__key"> label={t("case:summary-case-type-label")}
{t("case:summary-case-type-label")} value={
</dt> router.locale == "cy"
<dd className="govuk-summary-list__value">
{router.locale == "cy"
? jsonpath({ ? jsonpath({
path: path:
'$..[?(@ && @.value=="' + '$..[?(@ && @.value=="' +
@@ -35,16 +32,14 @@ const Pinswg_planningappeals78id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: casesObj[ : casesObj[
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
] || ] ||
t( t("case:summary-no-date-entered-label")
"case:summary-no-date-entered-label" }
)} />
</dd>
</div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t("case:summary-lpa-label")} {t("case:summary-lpa-label")}
@@ -59,7 +54,7 @@ const Pinswg_planningappeals78id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: casesObj[ : casesObj[
"_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,9 +78,7 @@ const Pinswg_planningappeals78id = (props) => {
: detailsObj[ : detailsObj[
"pinswg_eiarequired@OData.Community.Display.V1.FormattedValue" "pinswg_eiarequired@OData.Community.Display.V1.FormattedValue"
] || ] ||
t( t("case:summary-to-be-confirmed-label")}
"case:summary-to-be-confirmed-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -102,7 +95,7 @@ const Pinswg_planningappeals78id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: detailsObj[ : detailsObj[
"pinswg_procedure@OData.Community.Display.V1.FormattedValue" "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
@@ -123,7 +116,7 @@ const Pinswg_planningappeals78id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: detailsObj[ : detailsObj[
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue" "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
@@ -147,14 +140,12 @@ const Pinswg_planningappeals78id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: casesObj[ : casesObj[
"statuscode@OData.Community.Display.V1.FormattedValue" "statuscode@OData.Community.Display.V1.FormattedValue"
] || ] ||
t( t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -171,7 +162,7 @@ const Pinswg_planningappeals78id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: detailsObj[ : detailsObj[
"pinswg_dicision@OData.Community.Display.V1.FormattedValue" "pinswg_dicision@OData.Community.Display.V1.FormattedValue"
@@ -194,10 +185,7 @@ const Pinswg_planningappeals78id = (props) => {
{t("case:summary-decision-date-label")} {t("case:summary-decision-date-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(detailsObj, "pinswg_casedecisiondate")
detailsObj,
"pinswg_casedecisiondate"
)
? !_.isEmpty( ? !_.isEmpty(
detailsObj.pinswg_casedecisiondate detailsObj.pinswg_casedecisiondate
) )
@@ -207,24 +195,17 @@ const Pinswg_planningappeals78id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
{casesObj.numberofchildincidents > 0 && ( {casesObj.numberofchildincidents > 0 && (
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-case-link-status-label")}
"case:summary-case-link-status-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has(casesObj, [ {_.has(casesObj, ["numberofchildincidents"])
"numberofchildincidents", ? casesObj.numberofchildincidents > 0
])
? casesObj.numberofchildincidents >
0
? t( ? t(
"case:summary-case-link-status-linked" "case:summary-case-link-status-linked"
) )
@@ -240,14 +221,11 @@ const Pinswg_planningappeals78id = (props) => {
{casesObj.numberofchildincidents > 0 ? ( {casesObj.numberofchildincidents > 0 ? (
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-linked-cases-label")}
"case:summary-linked-cases-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{linkedCasesList( {linkedCasesList(
props.currentView props.currentView.linkedCaseReferences
.linkedCaseReferences
)} )}
</dd> </dd>
</div> </div>
@@ -255,15 +233,12 @@ const Pinswg_planningappeals78id = (props) => {
"" ""
)} )}
</dl> </dl>
</div> </SummaryCard>
</div> <SummaryCard
</div> id="key-dates-card"
<div className="card" id="key-dates-card"> title={t("case:summary-dates-label")}
<div className="card-body"> headingTag="h3"
<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"> <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
@@ -271,39 +246,28 @@ const Pinswg_planningappeals78id = (props) => {
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has(detailsObj, "pinswg_startdate") {_.has(detailsObj, "pinswg_startdate")
? !_.isEmpty( ? !_.isEmpty(detailsObj.pinswg_startdate)
detailsObj.pinswg_startdate
)
? formatDates( ? formatDates(
detailsObj.pinswg_startdate detailsObj.pinswg_startdate
) )
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: _.has( : _.has(detailsObj, "pinswg_startdates")
detailsObj, ? !_.isEmpty(detailsObj.pinswg_startdates)
"pinswg_startdates"
)
? !_.isEmpty(
detailsObj.pinswg_startdates
)
? formatDates( ? formatDates(
detailsObj.pinswg_startdates detailsObj.pinswg_startdates
) )
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-questionnaire-due-date-label")}
"case:summary-questionnaire-due-date-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(
@@ -319,9 +283,7 @@ const Pinswg_planningappeals78id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
@@ -332,10 +294,7 @@ const Pinswg_planningappeals78id = (props) => {
)} )}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(detailsObj, "pinswg_statementduedate")
detailsObj,
"pinswg_statementduedate"
)
? !_.isEmpty( ? !_.isEmpty(
detailsObj.pinswg_statementduedate detailsObj.pinswg_statementduedate
) )
@@ -345,9 +304,7 @@ const Pinswg_planningappeals78id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
@@ -392,9 +349,7 @@ const Pinswg_planningappeals78id = (props) => {
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-final-comments-date-label")}
"case:summary-final-comments-date-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(
@@ -410,9 +365,7 @@ const Pinswg_planningappeals78id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
{/* <div className="govuk-summary-list__row"> {/* <div className="govuk-summary-list__row">
@@ -482,9 +435,7 @@ const Pinswg_planningappeals78id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
{detailsObj.pinswg_typeofevent == 846040002 || {detailsObj.pinswg_typeofevent == 846040002 ||
@@ -493,9 +444,7 @@ const Pinswg_planningappeals78id = (props) => {
detailsObj.pinswg_typeofevent == 846040009 ? ( detailsObj.pinswg_typeofevent == 846040009 ? (
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-start-event-time-label")}
"case:summary-start-event-time-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
@@ -522,9 +471,7 @@ const Pinswg_planningappeals78id = (props) => {
"" ""
)} )}
</dl> </dl>
</div> </SummaryCard>
</div>
</div>
</div> </div>
</div> </div>
); );
components/case/summaryTypes/pinswg_planningconditionss73s79id.js
+52 -117
View File
@@ -3,6 +3,8 @@ import _ from "lodash";
import useTranslation from "next-translate/useTranslation"; import useTranslation from "next-translate/useTranslation";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import transLookup from "../../../data/lookuptranslations.json"; import transLookup from "../../../data/lookuptranslations.json";
import SummaryCard from "../summary/components/SummaryCard";
import SummaryRow from "../summary/components/SummaryRow";
const Pinswg_planningconditionss73s79id = (props) => { const Pinswg_planningconditionss73s79id = (props) => {
let { t } = useTranslation(); let { t } = useTranslation();
@@ -13,20 +15,15 @@ const Pinswg_planningconditionss73s79id = (props) => {
return ( return (
<div className="govuk-grid-row"> <div className="govuk-grid-row">
<div className="flex-container grid-row govuk-body case"> <div className="flex-container grid-row govuk-body case">
<div className="card" id="case-details-card"> <SummaryCard
<div className="card-body"> id="case-details-card"
<div className="govuk-grid-column-full"> title={t("case:summary-case-details-label")}
<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"> <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row"> <SummaryRow
<dt className="govuk-summary-list__key"> label={t("case:summary-case-type-label")}
{t("case:summary-case-type-label")} value={
</dt> router.locale == "cy"
<dd className="govuk-summary-list__value">
{router.locale == "cy"
? jsonpath({ ? jsonpath({
path: path:
'$..[?(@ && @.value=="' + '$..[?(@ && @.value=="' +
@@ -35,16 +32,14 @@ const Pinswg_planningconditionss73s79id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: casesObj[ : casesObj[
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue" "pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
] || ] ||
t( t("case:summary-no-date-entered-label")
"case:summary-no-date-entered-label" }
)} />
</dd>
</div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t("case:summary-lpa-label")} {t("case:summary-lpa-label")}
@@ -59,7 +54,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: casesObj[ : casesObj[
"_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue" "_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
@@ -83,9 +78,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
: detailsObj[ : detailsObj[
"pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue" "pinswg_detailedeiascreeningrequiered@OData.Community.Display.V1.FormattedValue"
] || ] ||
t( t("case:summary-to-be-confirmed-label")}
"case:summary-to-be-confirmed-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -102,7 +95,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: detailsObj[ : detailsObj[
"pinswg_procedure@OData.Community.Display.V1.FormattedValue" "pinswg_procedure@OData.Community.Display.V1.FormattedValue"
@@ -123,7 +116,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: detailsObj[ : detailsObj[
"pinswg_typeofevent@OData.Community.Display.V1.FormattedValue" "pinswg_typeofevent@OData.Community.Display.V1.FormattedValue"
@@ -144,14 +137,12 @@ const Pinswg_planningconditionss73s79id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: casesObj[ : casesObj[
"statuscode@OData.Community.Display.V1.FormattedValue" "statuscode@OData.Community.Display.V1.FormattedValue"
] || ] ||
t( t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -168,7 +159,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
] + ] +
'")].value_cy', '")].value_cy',
json: transLookup, json: transLookup,
eval: true, eval: true
}) })
: detailsObj[ : detailsObj[
"pinswg_decision@OData.Community.Display.V1.FormattedValue" "pinswg_decision@OData.Community.Display.V1.FormattedValue"
@@ -189,16 +180,11 @@ const Pinswg_planningconditionss73s79id = (props) => {
{casesObj.numberofchildincidents > 0 && ( {casesObj.numberofchildincidents > 0 && (
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-case-link-status-label")}
"case:summary-case-link-status-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has(casesObj, [ {_.has(casesObj, ["numberofchildincidents"])
"numberofchildincidents", ? casesObj.numberofchildincidents > 0
])
? casesObj.numberofchildincidents >
0
? t( ? t(
"case:summary-case-link-status-linked" "case:summary-case-link-status-linked"
) )
@@ -214,14 +200,11 @@ const Pinswg_planningconditionss73s79id = (props) => {
{casesObj.numberofchildincidents > 0 ? ( {casesObj.numberofchildincidents > 0 ? (
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-linked-cases-label")}
"case:summary-linked-cases-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{linkedCasesList( {linkedCasesList(
props.currentView props.currentView.linkedCaseReferences
.linkedCaseReferences
)} )}
</dd> </dd>
</div> </div>
@@ -229,15 +212,12 @@ const Pinswg_planningconditionss73s79id = (props) => {
"" ""
)} )}
</dl> </dl>
</div> </SummaryCard>
</div> <SummaryCard
</div> id="key-dates-card"
<div className="card" id="key-dates-card"> title={t("case:summary-dates-label")}
<div className="card-body"> headingTag="h3"
<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"> <dl className="govuk-summary-list govuk-!-font-size-16 govuk-!-margin-bottom-9">
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
@@ -245,39 +225,28 @@ const Pinswg_planningconditionss73s79id = (props) => {
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has(detailsObj, "pinswg_startdate") {_.has(detailsObj, "pinswg_startdate")
? !_.isEmpty( ? !_.isEmpty(detailsObj.pinswg_startdate)
detailsObj.pinswg_startdate
)
? formatDates( ? formatDates(
detailsObj.pinswg_startdate detailsObj.pinswg_startdate
) )
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: _.has( : _.has(detailsObj, "pinswg_startdates")
detailsObj, ? !_.isEmpty(detailsObj.pinswg_startdates)
"pinswg_startdates"
)
? !_.isEmpty(
detailsObj.pinswg_startdates
)
? formatDates( ? formatDates(
detailsObj.pinswg_startdates detailsObj.pinswg_startdates
) )
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-questionnaire-due-date-label")}
"case:summary-questionnaire-due-date-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(
@@ -293,23 +262,16 @@ const Pinswg_planningconditionss73s79id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-statement-due-date-label")}
"case:summary-statement-due-date-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(detailsObj, "pinswg_statementduedate")
detailsObj,
"pinswg_statementduedate"
)
? !_.isEmpty( ? !_.isEmpty(
detailsObj.pinswg_statementduedate detailsObj.pinswg_statementduedate
) )
@@ -319,17 +281,13 @@ const Pinswg_planningconditionss73s79id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-interested-party-date-label")}
"case:summary-interested-party-date-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(
@@ -358,9 +316,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
@@ -384,9 +340,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
{/* <div className="govuk-summary-list__row"> {/* <div className="govuk-summary-list__row">
@@ -419,10 +373,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
{t("case:summary-event-date-label")} {t("case:summary-event-date-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(detailsObj, "pinswg_dateeventrequested")
detailsObj,
"pinswg_dateeventrequested"
)
? !_.isEmpty( ? !_.isEmpty(
detailsObj.pinswg_dateeventrequested detailsObj.pinswg_dateeventrequested
) )
@@ -432,23 +383,16 @@ const Pinswg_planningconditionss73s79id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
<dt className="govuk-summary-list__key"> <dt className="govuk-summary-list__key">
{t( {t("case:summary-start-event-date-label")}
"case:summary-start-event-date-label"
)}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(detailsObj, "pinswg_startdateofevent")
detailsObj,
"pinswg_startdateofevent"
)
? !_.isEmpty( ? !_.isEmpty(
detailsObj.pinswg_startdateofevent detailsObj.pinswg_startdateofevent
) )
@@ -458,9 +402,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
<div className="govuk-summary-list__row"> <div className="govuk-summary-list__row">
@@ -468,10 +410,7 @@ const Pinswg_planningconditionss73s79id = (props) => {
{t("case:summary-decision-date-label")} {t("case:summary-decision-date-label")}
</dt> </dt>
<dd className="govuk-summary-list__value"> <dd className="govuk-summary-list__value">
{_.has( {_.has(detailsObj, "pinswg_casedecisiondate")
detailsObj,
"pinswg_casedecisiondate"
)
? !_.isEmpty( ? !_.isEmpty(
detailsObj.pinswg_casedecisiondate detailsObj.pinswg_casedecisiondate
) )
@@ -481,15 +420,11 @@ const Pinswg_planningconditionss73s79id = (props) => {
: t( : t(
"case:summary-no-date-entered-label" "case:summary-no-date-entered-label"
) )
: t( : t("case:summary-no-date-entered-label")}
"case:summary-no-date-entered-label"
)}
</dd> </dd>
</div> </div>
</dl> </dl>
</div> </SummaryCard>
</div>
</div>
</div> </div>
</div> </div>
); );
context/representations-refactor-tracker.md
+93 -2
View File
@@ -6,8 +6,8 @@ Base branch: `refactor`
## Status ## Status
Current slice: Slice R6 — Async Data / Service Layer Cleanup Current slice: Slice R7 — Summary / Case-Type Rendering Simplification
Status: COMPLETE Status: IMPLEMENTED (manual validation in progress)
--- ---
@@ -214,6 +214,97 @@ Reduce duplication in summary-type components.
- unify repeated rendering patterns - unify repeated rendering patterns
- introduce shared summary renderer where safe - introduce shared summary renderer where safe
**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 these primitives to a small proof subset of summary-type files only:
- `components/case/summaryTypes/pinswg_planningappeals78id.js`
- `components/case/summaryTypes/pinswg_planningconditionss73s79id.js`
- Preserved Slice R7 constraints:
- no CaseSummary orchestration changes
- no translation/date/bilingual logic moved into shared primitives
- no linked-cases extraction (kept inline)
- no row/card order changes intended
- no route/query/payload/Redux/business-rule changes
- Validation evidence:
- `npm run lint` completed (warnings only, no new errors).
- `npm run test:reps` completed: **7 passed**.
- Manual APP/IP/Agent/LPA and EN/CY checks: **in progress** (Welsh IP statement option-label parity issue detected and patched in representation flow check display).
---
### Post-R7 follow-up patch — Welsh IP statement label parity
**Issue observed during manual check:**
- In Welsh journey (Interested Party → Statement), option-label parity regressed:
- selection step showed duplicated Welsh “No” labels
- check/submit summary displayed raw English `No`
**Fix applied (minimal, behaviour-preserving):**
- `components/case/representation/representationInterestedPartyPerson.js`
- restored canonical option values for conditional radio to `options={["Yes", "No"]}` so `RenderCondtionalRadioList` translation mapping behaves correctly.
- `components/case/representation/representationCompleteSubmit.js`
- added display mapping for `representationOnBehalfOf` summary value:
- `Yes` → `t("myrepresentations:questionnaire-yes")`
- `No` → `t("myrepresentations:questionnaire-no")`
- fallback unchanged for non-boolean/unexpected values
**Validation evidence (follow-up patch):**
- `npm run lint` completed (warnings only, no new errors).
- `npm run test:reps` completed: **7 passed (4.6m)**.
- Manual Welsh IP statement check: input labels and check-summary label now aligned via translation mapping.
---
### Post-R7 follow-up patch 2 — Welsh IP conditional details submit validation
**Issue observed during manual check:**
- In Welsh journey (Interested Party → Statement), when selecting “Yes” and entering conditional details, submit could still block with required validation on the conditional text field.
**Fix applied (minimal, behaviour-preserving):**
- `components/case/representation/representationElements.js`
- In `RenderCondtionalRadioList`, made “Yes selected” detection bilingual-safe and value-safe:
- accepts canonical value (`"Yes"`), translated display value (`t("myrepresentations:questionnaire-yes")`), and boolean `true`.
- Replaced unconditional conditional-field validator with context-aware validator:
- `requiredIfYes` only enforces required when “Yes” is selected.
- Updated conditional rendering check to use the same normalized `isYesSelected` guard.
**Validation evidence (follow-up patch 2):**
- `npm run lint` completed (warnings only, no new errors).
- `npm run test:reps` run completed with **6 passed / 1 failed**.
- Failure: `[chromium] Raise representation as an Appellant` timed out waiting for `dd a.govuk-link--no-underline` (entry-link locator timeout), not in Welsh IP conditional details path.
---
### Post-R7 follow-up patch 3 — Welsh conditional required check tied to current radio value
**Issue observed during manual check:**
- In Welsh journey, selecting “Yes” could still leave the conditional details field blocked with required validation (`Yn ofynnol`) after entering text, preventing progress.
**Fix applied (minimal, behaviour-preserving):**
- `components/case/representation/representationElements.js`
- Added explicit `normalizeYesNo(...)` mapping for both selected value and option values:
- canonical/translated/boolean values normalize to `"Yes"` / `"No"`.
- Radio `Field` values now use normalized canonical values (preserves existing payload expectation).
- Updated conditional `requiredIfYes` validator to evaluate against the **current form value** (`allValues[id]`) rather than closure-only value.
- Required check now trims whitespace and only errors when selected value resolves to `"Yes"` and details are empty.
**Validation evidence (follow-up patch 3):**
- `npm run lint` completed (warnings only, no new errors).
- `npm run test:reps` intentionally **not run** per user instruction while manual Welsh verification is in progress.
--- ---
### Slice R8 — Submission / Finalisation Boundary Isolation ### Slice R8 — Submission / Finalisation Boundary Isolation