Merged PR 2256: refactor(representations): preserve Welsh conditional validation and summary...
refactor(representations): preserve Welsh conditional validation and summary parity Related work items: #22441
This commit is contained in:
Robert Bond
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -114,12 +114,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(
|
||||
|
||||
Reference in New Issue
Block a user