Merged PR 2242: Refactor: New Appeal flow structural cleanup (Slices 1–8, no behaviour change)
## Summary This PR merges the completed new-appeal refactor stream (Slices 1–8) into SIPS-Development. This refactor was executed in controlled slices with regression validation at each step. ## Scope Structural and readability improvements only: - XML/form derivation extraction - payload and file helper extraction - side-effect facade introduction - BuildSection and BuildCheckSection decomposition - BuildCheckRow formatter map refactor - nested prop boundary cleanup - start-flow cleanup (CreateCase / AboutYou) ## Behaviour No intended behavioural changes. The following were explicitly preserved: - S78 journey behaviour - payload shapes and field names/ids - HASCAS mapping logic - appellant/agent branching - validation rules and messages - redirect/query parameters (`lpa`, `apt`, `id`) - navigation and side-effect sequencing - EN/CY output parity ## Validation Full regression has been performed on: - start flow (CreateCase / AboutYou) - save and resume flows - file upload handling - check answers rendering - submit/finalisation sequence - confirmation flow - CRM insertion path - EN/CY parity Additional checks: - docsOffline branch behaviour - completion and partial-save email paths - negative-path validation scenarios - lint (warnings baseline unchanged) ## Risk Low: - changes are structural only - no business logic changes - no contract changes ## Rollback Safe rollback via reverting this merge commit. ## Notes This refactor reduces coupling and prepares the new-appeal flow for future appeal-type expansion. Related work items: #22570, #22576, #22577, #22583, #22586, #22587, #22588, #22590
This commit is contained in:
Robert Bond
@@ -2,23 +2,34 @@ import { JSONPath as jsonpath } from "jsonpath-plus";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useRouter } from "next/router";
|
||||
import { connect } from "react-redux";
|
||||
import xpath from "xpath";
|
||||
import {
|
||||
getPickListLabel,
|
||||
getRadioLabel,
|
||||
bytesToSize,
|
||||
getDocumentTypeFromFilename,
|
||||
getThumbnailIconByExtension,
|
||||
getThumbnailIconByExtension
|
||||
} from "../../components/utils";
|
||||
import fieldLookup from "../../data/crmfieldlookuptranslations.json";
|
||||
|
||||
import {
|
||||
setCurrentSection,
|
||||
setFormComplete,
|
||||
setFormComplete
|
||||
} from "../../store/appealType/action";
|
||||
import {
|
||||
parseRowOuterHTML,
|
||||
parseXml,
|
||||
selectCurrentSectionRows,
|
||||
selectRowDataFieldName,
|
||||
selectRowDocumentTypeCode,
|
||||
selectRowFieldType,
|
||||
selectRowLabelDescriptions
|
||||
} from "../../lib/newappeal/formDerivation";
|
||||
|
||||
let BuildCheckRow = (props) => {
|
||||
let { t } = useTranslation();
|
||||
const legacyProps = props.props;
|
||||
const legacyFormState = legacyProps.form;
|
||||
const legacyFormData = legacyProps.formData;
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
@@ -30,18 +41,12 @@ let BuildCheckRow = (props) => {
|
||||
onSubmit,
|
||||
updateCurrentSection,
|
||||
setCurrentSection,
|
||||
mandatoryFieldsData,
|
||||
mandatoryFieldsData
|
||||
} = props;
|
||||
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
var doc = parseXml(props.formXML);
|
||||
|
||||
var rowXML = xpath.select(
|
||||
"/form/tabs/tab[" +
|
||||
whichSection +
|
||||
"]/columns//sections/section/rows/row",
|
||||
doc
|
||||
);
|
||||
var rowXML = selectCurrentSectionRows(doc, whichSection);
|
||||
|
||||
function formatDate(dateObj) {
|
||||
var m = new Date(dateObj);
|
||||
@@ -66,7 +71,7 @@ let BuildCheckRow = (props) => {
|
||||
let formObj = jsonpath({
|
||||
path: "$['" + appealtypes + "']",
|
||||
json: fieldLookup,
|
||||
eval: true,
|
||||
eval: true
|
||||
});
|
||||
|
||||
let labelTrans =
|
||||
@@ -74,7 +79,7 @@ let BuildCheckRow = (props) => {
|
||||
? jsonpath({
|
||||
path: '$..[?(@ && @.value=="' + label + '")].value_cy',
|
||||
json: formObj,
|
||||
eval: true,
|
||||
eval: true
|
||||
})
|
||||
: label;
|
||||
return labelTrans;
|
||||
@@ -91,29 +96,23 @@ let BuildCheckRow = (props) => {
|
||||
return (
|
||||
<>
|
||||
{Object.keys(rowXML).map((key, index) => {
|
||||
var doc = parser.parseFromString(
|
||||
rowXML[key].outerHTML,
|
||||
"text/xml"
|
||||
);
|
||||
var doc = parseRowOuterHTML(rowXML[key].outerHTML);
|
||||
if (_.isEmpty(rowXML[key].innerHTML)) {
|
||||
("");
|
||||
} else {
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
var rows = selectRowLabelDescriptions(doc);
|
||||
var fieldtype = selectRowFieldType(doc);
|
||||
var datafieldname = selectRowDataFieldName(doc);
|
||||
const isRequiredField = jsonpath({
|
||||
path:
|
||||
"$..value[?(@ && @.LogicalName=='" +
|
||||
datafieldname[0].value +
|
||||
"')]",
|
||||
json: mandatoryFieldsData,
|
||||
eval: true,
|
||||
eval: true
|
||||
});
|
||||
|
||||
var documentTypeCode = xpath.select(
|
||||
"//@ishareDocumentCode",
|
||||
doc
|
||||
);
|
||||
var documentTypeCode = selectRowDocumentTypeCode(doc);
|
||||
|
||||
// if (datafieldname[0].value.indexOf("fileUpload") > 0) {
|
||||
// isRequiredField.push({
|
||||
@@ -142,66 +141,54 @@ let BuildCheckRow = (props) => {
|
||||
// datafieldname[0].value
|
||||
// ] != "undefined"
|
||||
// ) {
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{FieldsTranslations(rows[0].value)}
|
||||
</dt>
|
||||
const fieldTypeValue = fieldtype[0].value;
|
||||
const fieldValue =
|
||||
legacyFormState["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
];
|
||||
|
||||
<dd className="govuk-summary-list__value">
|
||||
{fieldtype[0].value ==
|
||||
"{E0DECE4B-6666-4a8f-A065-082708572369}" ? (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: props.props.form[
|
||||
"appealForm"
|
||||
].values[datafieldname[0].value],
|
||||
}}
|
||||
/>
|
||||
) : fieldtype[0].value ==
|
||||
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}" ? (
|
||||
formatDate(
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
) : fieldtype[0].value ==
|
||||
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}" ? (
|
||||
getPickListLabel(
|
||||
props.props.formData.pickListData,
|
||||
datafieldname[0].value,
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
) : fieldtype[0].value ==
|
||||
"{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}" ? (
|
||||
getRadioLabel(
|
||||
props.props.formData.pickListData,
|
||||
datafieldname[0].value,
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
) : fieldtype[0].value ==
|
||||
"{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}" ? (
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
] == "false" ? (
|
||||
router.locale == "cy" ? (
|
||||
"Nac ydw"
|
||||
) : (
|
||||
"No"
|
||||
)
|
||||
) : router.locale == "cy" ? (
|
||||
"Oes"
|
||||
) : (
|
||||
"Yes"
|
||||
)
|
||||
) : fieldtype[0].value ==
|
||||
"{16D63FD6-119B-4353-BDCA-18358721C3FE}" ? (
|
||||
<>
|
||||
{props.filesArray.map((blob, i) => (
|
||||
const renderFileUploadValue = () => (
|
||||
<>
|
||||
{props.filesArray.map((blob, i) => (
|
||||
<div key={i}>
|
||||
{getDocumentTypeFromFilename(blob.name) ===
|
||||
documentTypeCode[0].value && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "flex-start"
|
||||
}}
|
||||
className="govuk-!-margin-bottom-2"
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
minWidth: "50",
|
||||
width: "50"
|
||||
}}
|
||||
src={getThumbnailIconByExtension(
|
||||
blob.name
|
||||
)}
|
||||
alt={blob.name}
|
||||
width="50"
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
maxWidth: "85%"
|
||||
}}
|
||||
className="govuk-body govuk-!-font-size-14 govuk-!-margin-left-2"
|
||||
>
|
||||
{blob.name} -{" "}
|
||||
{bytesToSize(blob.size)}{" "}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<br />
|
||||
{typeof fieldValue != "undefined" &&
|
||||
fieldValue.map(
|
||||
(blob, i) =>
|
||||
isObjectAndNotEmpty(blob) && (
|
||||
<div key={i}>
|
||||
{getDocumentTypeFromFilename(
|
||||
blob.name
|
||||
@@ -212,14 +199,14 @@ let BuildCheckRow = (props) => {
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems:
|
||||
"flex-start",
|
||||
"flex-start"
|
||||
}}
|
||||
className="govuk-!-margin-bottom-2"
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
minWidth: "50",
|
||||
width: "50",
|
||||
width: "50"
|
||||
}}
|
||||
src={getThumbnailIconByExtension(
|
||||
blob.name
|
||||
@@ -229,7 +216,7 @@ let BuildCheckRow = (props) => {
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
maxWidth: "85%",
|
||||
maxWidth: "85%"
|
||||
}}
|
||||
className="govuk-body govuk-!-font-size-14 govuk-!-margin-left-2"
|
||||
>
|
||||
@@ -241,124 +228,96 @@ let BuildCheckRow = (props) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<br />
|
||||
{typeof props.props.form["appealForm"]
|
||||
.values[datafieldname[0].value] !=
|
||||
"undefined" &&
|
||||
props.props.form[
|
||||
"appealForm"
|
||||
].values[
|
||||
datafieldname[0].value
|
||||
].map(
|
||||
(blob, i) =>
|
||||
isObjectAndNotEmpty(
|
||||
blob
|
||||
) && (
|
||||
<div key={i}>
|
||||
{getDocumentTypeFromFilename(
|
||||
blob.name
|
||||
) ===
|
||||
documentTypeCode[0]
|
||||
.value && (
|
||||
<div
|
||||
style={{
|
||||
display:
|
||||
"flex",
|
||||
alignItems:
|
||||
"flex-start",
|
||||
}}
|
||||
className="govuk-!-margin-bottom-2"
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
minWidth:
|
||||
"50",
|
||||
width: "50",
|
||||
}}
|
||||
src={getThumbnailIconByExtension(
|
||||
blob.name
|
||||
)}
|
||||
alt={
|
||||
blob.name
|
||||
}
|
||||
width="50"
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
maxWidth:
|
||||
"85%",
|
||||
}}
|
||||
className="govuk-body govuk-!-font-size-14 govuk-!-margin-left-2"
|
||||
>
|
||||
{
|
||||
blob.name
|
||||
}{" "}
|
||||
-{" "}
|
||||
{bytesToSize(
|
||||
blob.size
|
||||
)}{" "}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
) : fieldtype[0].value ==
|
||||
"{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" ? (
|
||||
typeof props.props.form["appealForm"]
|
||||
.values[datafieldname[0].value] !=
|
||||
"undefined" &&
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
] != null ? (
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
].map((tenant, index) => {
|
||||
console.log(
|
||||
typeof tenant.pinswg_owners_firstname
|
||||
);
|
||||
return typeof tenant.pinswg_owners_firstname !=
|
||||
"undefined" ||
|
||||
typeof tenant.pinswg_agriculturaltenantname_firstname !=
|
||||
"undefined" ? (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<div className="govuk-!-width-one-half">
|
||||
{tenant?.pinswg_agriculturaltenantname_firstname &&
|
||||
tenant.pinswg_agriculturaltenantname_firstname +
|
||||
" " +
|
||||
tenant.pinswg_agriculturaltenantname_lastname}
|
||||
|
||||
{tenant?.pinswg_owners_firstname &&
|
||||
tenant.pinswg_owners_firstname +
|
||||
" " +
|
||||
tenant.pinswg_owners_lastname}
|
||||
</div>
|
||||
<div className="govuk-!-width-one-half">
|
||||
Served:{" "}
|
||||
{formatDate(
|
||||
tenant.dateserved
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
})
|
||||
) : (
|
||||
"N/A"
|
||||
)
|
||||
) : (
|
||||
props.props.form["appealForm"].values[
|
||||
datafieldname[0].value
|
||||
]
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const renderTenantValue = () =>
|
||||
typeof fieldValue != "undefined" && fieldValue != null
|
||||
? fieldValue.map((tenant, index) => {
|
||||
console.log(
|
||||
typeof tenant.pinswg_owners_firstname
|
||||
);
|
||||
return typeof tenant.pinswg_owners_firstname !=
|
||||
"undefined" ||
|
||||
typeof tenant.pinswg_agriculturaltenantname_firstname !=
|
||||
"undefined" ? (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
display: "flex"
|
||||
}}
|
||||
>
|
||||
<div className="govuk-!-width-one-half">
|
||||
{tenant?.pinswg_agriculturaltenantname_firstname &&
|
||||
tenant.pinswg_agriculturaltenantname_firstname +
|
||||
" " +
|
||||
tenant.pinswg_agriculturaltenantname_lastname}
|
||||
|
||||
{tenant?.pinswg_owners_firstname &&
|
||||
tenant.pinswg_owners_firstname +
|
||||
" " +
|
||||
tenant.pinswg_owners_lastname}
|
||||
</div>
|
||||
<div className="govuk-!-width-one-half">
|
||||
Served:{" "}
|
||||
{formatDate(tenant.dateserved)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
);
|
||||
})
|
||||
: "N/A";
|
||||
|
||||
const formatterMap = {
|
||||
"{E0DECE4B-6666-4a8f-A065-082708572369}": () => (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: fieldValue
|
||||
}}
|
||||
/>
|
||||
),
|
||||
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}": () =>
|
||||
formatDate(fieldValue),
|
||||
"{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}": () =>
|
||||
getPickListLabel(
|
||||
legacyFormData.pickListData,
|
||||
datafieldname[0].value,
|
||||
fieldValue
|
||||
),
|
||||
"{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": () =>
|
||||
getRadioLabel(
|
||||
legacyFormData.pickListData,
|
||||
datafieldname[0].value,
|
||||
fieldValue
|
||||
),
|
||||
"{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}": () =>
|
||||
fieldValue == "false"
|
||||
? router.locale == "cy"
|
||||
? "Nac ydw"
|
||||
: "No"
|
||||
: router.locale == "cy"
|
||||
? "Oes"
|
||||
: "Yes",
|
||||
"{16D63FD6-119B-4353-BDCA-18358721C3FE}":
|
||||
renderFileUploadValue,
|
||||
"{0273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
renderTenantValue
|
||||
};
|
||||
|
||||
const defaultFormatter = () => fieldValue;
|
||||
const renderFieldValue =
|
||||
formatterMap[fieldTypeValue] || defaultFormatter;
|
||||
return (
|
||||
<div className="govuk-summary-list__row" key={key}>
|
||||
<dt className="govuk-summary-list__key">
|
||||
{FieldsTranslations(rows[0].value)}
|
||||
</dt>
|
||||
|
||||
<dd className="govuk-summary-list__value">
|
||||
{renderFieldValue()}
|
||||
</dd>
|
||||
|
||||
<dd className="govuk-summary-list__actions">
|
||||
@@ -397,12 +356,12 @@ const mapDispatchToProps = (dispatch) => {
|
||||
updateCurrentSection: (whichSection) => {
|
||||
dispatch(setCurrentSection(whichSection));
|
||||
dispatch(setFormComplete("true"));
|
||||
},
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
count: state.count,
|
||||
count: state.count
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);
|
||||
|
||||
Reference in New Issue
Block a user