178 lines
7.8 KiB
JavaScript
178 lines
7.8 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 = (props) => {
|
|
let { t } = useTranslation();
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const {
|
|
progObj,
|
|
titleList,
|
|
currentSection,
|
|
documentListObj,
|
|
formObjXML,
|
|
mandatoryFieldsData,
|
|
gotoSection,
|
|
setCurrentSection,
|
|
} = props;
|
|
const parser = new DOMParser();
|
|
|
|
//const progObj = getProgressObj(
|
|
// formObjXML,
|
|
// titleList,
|
|
// mandatoryFieldsData,
|
|
// props
|
|
// );
|
|
|
|
//console.log(progObj);
|
|
|
|
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">
|
|
{props.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"
|
|
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) => (
|
|
<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}
|
|
>
|
|
<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={() => {
|
|
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>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
|
|
{Object.keys(documentListObj).length > 0 && (
|
|
<div>
|
|
<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">
|
|
{Object.entries(documentListObj).map(
|
|
([key, value]) => {
|
|
return <li key={key}>{value}</li>;
|
|
}
|
|
)}
|
|
</ol>
|
|
</li>
|
|
</ul>
|
|
</ol>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
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 mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
gotoSection: (thisSection) => {
|
|
dispatch(setCurrentSection(thisSection));
|
|
},
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(BuildProgress);
|