refactor
This commit is contained in:
@@ -4,31 +4,65 @@ import { connect } from "react-redux";
|
||||
import { setCurrentSection } from "../../store/appealType/action";
|
||||
import { FieldsTranslations } from "../elements";
|
||||
|
||||
const BuildProgress = (props) => {
|
||||
let { t } = useTranslation();
|
||||
const BuildProgress = ({
|
||||
progObj,
|
||||
titleList,
|
||||
currentSection,
|
||||
documentListObj,
|
||||
formObjXML,
|
||||
mandatoryFieldsData,
|
||||
gotoSection,
|
||||
setCurrentSection,
|
||||
props: outerProps,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const {
|
||||
progObj,
|
||||
titleList,
|
||||
currentSection,
|
||||
documentListObj,
|
||||
formObjXML,
|
||||
mandatoryFieldsData,
|
||||
gotoSection,
|
||||
setCurrentSection,
|
||||
} = props;
|
||||
const parser = new DOMParser();
|
||||
// Helper to safely access nested form values
|
||||
const getFormValue = (field) =>
|
||||
outerProps?.props?.form?.appealForm?.values?.[field];
|
||||
|
||||
//const progObj = getProgressObj(
|
||||
// formObjXML,
|
||||
// titleList,
|
||||
// mandatoryFieldsData,
|
||||
// props
|
||||
// );
|
||||
const renderDocumentList = () => {
|
||||
const formValues = outerProps?.props?.form?.appealForm?.values || {};
|
||||
|
||||
//console.log(progObj);
|
||||
return (
|
||||
<>
|
||||
<li>{t("newappeal:application-form")}</li>
|
||||
|
||||
{formValues.pinswg_developmentdescriptionchanged === "true" && (
|
||||
<li>Description of development change confirmation</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_caseworkreason === "846040005" && (
|
||||
<li>{t("newappeal:registration-of-application-letter")}</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_caseworkreason === "846040000" && (
|
||||
<li>Decision notice</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_attachsoc === "true" && (
|
||||
<li>{t("newappeal:statement-of-case")}</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_attachcostapplication === "true" && (
|
||||
<li>{t("newappeal:cost-application")}</li>
|
||||
)}
|
||||
|
||||
{formValues.pinswg_s106unilateralsubmitted === "true" && (
|
||||
<li>Planning obligation (S106/Unilateral)</li>
|
||||
)}
|
||||
|
||||
{/* Additional document list items from documentListObj if needed */}
|
||||
{/* {Object.entries(documentListObj).map(([key, value]) => (
|
||||
<li key={key}>{value}</li>
|
||||
))} */}
|
||||
|
||||
<li>{t("newappeal:site-location-plan")}</li>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -40,16 +74,17 @@ const BuildProgress = (props) => {
|
||||
<h2 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
|
||||
{t("newappeal:new-appeal-progress-nav-label")}:{" "}
|
||||
<span className="progress-case-reference">
|
||||
{props.props.appealType.caseReference.ticketnumber}
|
||||
{
|
||||
outerProps?.props?.appealType?.caseReference
|
||||
?.ticketnumber
|
||||
}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{/* <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" /> */}
|
||||
|
||||
<div
|
||||
id="step-by-step-navigation"
|
||||
data-module="gemstepnav"
|
||||
className="app-step-nav app-step-nav--active"
|
||||
className="app-step-nav app-step-nav--active"
|
||||
data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
|
||||
data-show-text="show"
|
||||
data-hide-text="hide"
|
||||
@@ -57,290 +92,105 @@ const BuildProgress = (props) => {
|
||||
data-hide-all-text="Hide all"
|
||||
>
|
||||
<ol className="app-step-nav__steps">
|
||||
{Object.keys(progObj).map((key, index) => (
|
||||
<li
|
||||
key={key}
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(progObj[index].allFieldsComplete
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id={FieldsTranslations(progObj[index].title)
|
||||
.toString()
|
||||
.replace(/\s+/g, "-")
|
||||
.toLowerCase()}
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position={index}
|
||||
{Object.keys(progObj).map((key, index) => {
|
||||
const step = progObj[index];
|
||||
const stepId = FieldsTranslations(step.title)
|
||||
.toString()
|
||||
.replace(/\s+/g, "-")
|
||||
.toLowerCase();
|
||||
|
||||
return (
|
||||
<li
|
||||
key={key}
|
||||
className={`app-step-nav__step js-step app-step-nav__step--active ${
|
||||
step.allFieldsComplete
|
||||
? "sectionComplete"
|
||||
: "sectionIncomplete"
|
||||
}`}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id={stepId}
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
{index + 1}
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel"
|
||||
data-position={index}
|
||||
>
|
||||
<h3 className="app-step-nav__title">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
{index + 1}
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(
|
||||
parseInt(key) + 1
|
||||
);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls={
|
||||
"step-panel-" +
|
||||
FieldsTranslations(
|
||||
progObj[index].title
|
||||
)
|
||||
.toString()
|
||||
.replace(/\s+/g, "-")
|
||||
.toLowerCase()
|
||||
}
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{FieldsTranslations(
|
||||
progObj[index].title
|
||||
)}{" "}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{/* <li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active"
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position={10}
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
{progObj.length + 1}
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
gotoSection(
|
||||
parseInt(key, 10) +
|
||||
1
|
||||
);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls={`step-panel-${stepId}`}
|
||||
>
|
||||
:
|
||||
</span>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{FieldsTranslations(
|
||||
step.title
|
||||
)}{" "}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
gotoSection(progObj.length + 1);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls={
|
||||
"step-panel-confirmation"
|
||||
}
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
Confirmation
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li> */}
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div>
|
||||
<section>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
{t("newappeal:new-appeal-documentlist-nav")}:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
<ol className="govuk-list document-list">
|
||||
<ul className="govuk-list ">
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list govuk-list--bullet">
|
||||
<li>{t("newappeal:application-form")}</li>
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty(
|
||||
"pinswg_developmentdescriptionchanged"
|
||||
)
|
||||
? props.props.props.form["appealForm"]
|
||||
.values
|
||||
.pinswg_developmentdescriptionchanged ==
|
||||
"true" && (
|
||||
<li>
|
||||
Description of development change
|
||||
confirmation
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty("pinswg_caseworkreason")
|
||||
? props.props.props.form["appealForm"]
|
||||
.values.pinswg_caseworkreason ==
|
||||
"846040005" && (
|
||||
<li>
|
||||
{t(
|
||||
"newappeal:registration-of-application-letter"
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty("pinswg_caseworkreason")
|
||||
? props.props.props.form["appealForm"]
|
||||
.values.pinswg_caseworkreason ==
|
||||
"846040000" && (
|
||||
<li>Decision notice</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty("pinswg_attachsoc")
|
||||
? props.props.props.form["appealForm"]
|
||||
.values.pinswg_attachsoc ==
|
||||
"true" && (
|
||||
<li>
|
||||
{t("newappeal:statement-of-case")}
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty(
|
||||
"pinswg_attachcostapplication"
|
||||
)
|
||||
? props.props.props.form["appealForm"]
|
||||
.values
|
||||
.pinswg_attachcostapplication ==
|
||||
"true" && (
|
||||
<li>
|
||||
{t("newappeal:cost-application")}
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{props.props.props.form.hasOwnProperty(
|
||||
"appealForm"
|
||||
) &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].hasOwnProperty("values") &&
|
||||
props.props.props.form[
|
||||
"appealForm"
|
||||
].values.hasOwnProperty(
|
||||
"pinswg_s106unilateralsubmitted"
|
||||
)
|
||||
? props.props.props.form["appealForm"]
|
||||
.values
|
||||
.pinswg_s106unilateralsubmitted ==
|
||||
"true" && (
|
||||
<li>
|
||||
Planning obligation
|
||||
(S106/Unilateral)
|
||||
</li>
|
||||
)
|
||||
: ""}
|
||||
|
||||
{/* {Object.keys(documentListObj).length > 0 &&
|
||||
Object.entries(documentListObj).map(
|
||||
([key, value]) => {
|
||||
return <li key={key}>{value}</li>;
|
||||
}
|
||||
)} */}
|
||||
|
||||
<li>{t("newappeal:site-location-plan")}</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list govuk-list--bullet">
|
||||
{renderDocumentList()}
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
initialValues: state.appealType.caseReference.caseDetails,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
const mapStateToProps = (state) => ({
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
initialValues: state.appealType.caseReference.caseDetails,
|
||||
//form: state.form,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
gotoSection: (thisSection) => {
|
||||
dispatch(setCurrentSection(thisSection));
|
||||
},
|
||||
};
|
||||
};
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
gotoSection: (thisSection) => dispatch(setCurrentSection(thisSection)),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(BuildProgress);
|
||||
|
||||
Reference in New Issue
Block a user