197 lines
8.6 KiB
JavaScript
197 lines
8.6 KiB
JavaScript
import useTranslation from "next-translate/useTranslation";
|
|
import { useRouter } from "next/router";
|
|
import { connect } from "react-redux";
|
|
import { setCurrentSection } from "../../store/appealType/action";
|
|
import { FieldsTranslations } from "../elements";
|
|
|
|
const BuildProgress = ({
|
|
progObj,
|
|
titleList,
|
|
currentSection,
|
|
documentListObj,
|
|
formObjXML,
|
|
mandatoryFieldsData,
|
|
gotoSection,
|
|
setCurrentSection,
|
|
props: outerProps,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
// Helper to safely access nested form values
|
|
const getFormValue = (field) =>
|
|
outerProps?.props?.form?.appealForm?.values?.[field];
|
|
|
|
const renderDocumentList = () => {
|
|
const formValues = outerProps?.props?.form?.appealForm?.values || {};
|
|
|
|
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 (
|
|
<>
|
|
<nav
|
|
role="navigation"
|
|
aria-label="progress-list"
|
|
className="at-nav"
|
|
>
|
|
<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">
|
|
{
|
|
outerProps?.props?.appealType?.caseReference
|
|
?.ticketnumber
|
|
}
|
|
</span>
|
|
</h2>
|
|
|
|
<div
|
|
id="step-by-step-navigation"
|
|
data-module="gemstepnav"
|
|
className="app-step-nav app-step-nav--active"
|
|
data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
|
|
data-show-text="show"
|
|
data-hide-text="hide"
|
|
data-show-all-text="Show all"
|
|
data-hide-all-text="Hide all"
|
|
>
|
|
<ol className="app-step-nav__steps">
|
|
{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}
|
|
>
|
|
<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 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 className="js-step-title-text govuk-!-font-size-16">
|
|
{FieldsTranslations(
|
|
step.title
|
|
)}{" "}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
|
|
<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">
|
|
<li className="at-nav__page">
|
|
<ol className="govuk-list govuk-list--bullet">
|
|
{renderDocumentList()}
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
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) => ({
|
|
gotoSection: (thisSection) => dispatch(setCurrentSection(thisSection)),
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(BuildProgress);
|