495 lines
25 KiB
JavaScript
495 lines
25 KiB
JavaScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { connect } from "react-redux";
|
|
import { Field, reduxForm, formValueSelector } from "redux-form";
|
|
import {
|
|
RenderPickList,
|
|
RenderTextfield,
|
|
RenderRadioList,
|
|
RenderMultiline,
|
|
RenderCondtionalRadioList,
|
|
RenderLPACondtionalRadioList,
|
|
FileUploadField,
|
|
RenderRichMultiline,
|
|
RenderDatePicker,
|
|
} from "../representationElements";
|
|
import {
|
|
setRepresentationCapacity,
|
|
setRepresentationSubmit,
|
|
} from "../../../../store/currentView/action";
|
|
import { useDropzone } from "react-dropzone";
|
|
import { select } from "xpath";
|
|
import { JSONPath as jsonpath } from "jsonpath-plus";
|
|
|
|
const RepresentationProgress_s78 = (props) => {
|
|
let { t } = useTranslation();
|
|
const router = useRouter();
|
|
|
|
const {
|
|
formObj,
|
|
appellantApplicantRepresentationArr,
|
|
setRepresentationCapacity,
|
|
setRepresentationSubmit,
|
|
currentView,
|
|
procedureTypeValue,
|
|
onBehalfOfLPA,
|
|
setShowQuestionnaireSection,
|
|
showQuestionnaireSection,
|
|
} = props;
|
|
|
|
return (
|
|
<nav role="navigation" aria-label="progress-list" className="at-nav">
|
|
<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">
|
|
<li
|
|
className={
|
|
"app-step-nav__step js-step app-step-nav__step--active" +
|
|
(showQuestionnaireSection >= 1
|
|
? " sectionComplete"
|
|
: " sectionIncomplete")
|
|
}
|
|
aria-current="step"
|
|
data-show=""
|
|
id={t("myrepresentations:s78-section-heading-one")
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()}
|
|
>
|
|
<div
|
|
className="app-step-nav__header js-toggle-panel "
|
|
data-position="1"
|
|
>
|
|
<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>{" "}
|
|
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={() => {
|
|
setShowQuestionnaireSection(1);
|
|
}}
|
|
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
|
aria-expanded="false"
|
|
aria-controls={
|
|
"step-panel-" +
|
|
t(
|
|
"myrepresentations:s78-section-heading-one"
|
|
)
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()
|
|
}
|
|
>
|
|
<span className="js-step-title-text govuk-!-font-size-16">
|
|
{t(
|
|
"myrepresentations:s78-section-heading-one"
|
|
)}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>
|
|
<li
|
|
className={
|
|
"app-step-nav__step js-step app-step-nav__step--active" +
|
|
(showQuestionnaireSection >= 2
|
|
? " sectionComplete"
|
|
: " sectionIncomplete")
|
|
}
|
|
aria-current="step"
|
|
data-show=""
|
|
id={t("myrepresentations:s78-section-heading-two")
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()}
|
|
>
|
|
<div
|
|
className="app-step-nav__header js-toggle-panel "
|
|
data-position="1"
|
|
>
|
|
<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>{" "}
|
|
2
|
|
<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={() => {
|
|
setShowQuestionnaireSection(2);
|
|
}}
|
|
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
|
aria-expanded="false"
|
|
aria-controls={
|
|
"step-panel-" +
|
|
t(
|
|
"myrepresentations:s78-section-heading-two"
|
|
)
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()
|
|
}
|
|
>
|
|
<span className="js-step-title-text govuk-!-font-size-16">
|
|
{t(
|
|
"myrepresentations:s78-section-heading-two"
|
|
)}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>
|
|
<li
|
|
className={
|
|
"app-step-nav__step js-step app-step-nav__step--active" +
|
|
(showQuestionnaireSection >= 3
|
|
? " sectionComplete"
|
|
: " sectionIncomplete")
|
|
}
|
|
aria-current="step"
|
|
data-show=""
|
|
id={t("myrepresentations:s78-section-heading-three")
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()}
|
|
>
|
|
<div
|
|
className="app-step-nav__header js-toggle-panel "
|
|
data-position="1"
|
|
>
|
|
<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>{" "}
|
|
3
|
|
<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={() => {
|
|
setShowQuestionnaireSection(3);
|
|
}}
|
|
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
|
aria-expanded="false"
|
|
aria-controls={
|
|
"step-panel-" +
|
|
t(
|
|
"myrepresentations:s78-section-heading-three"
|
|
)
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()
|
|
}
|
|
>
|
|
<span className="js-step-title-text govuk-!-font-size-16">
|
|
{t(
|
|
"myrepresentations:s78-section-heading-three"
|
|
)}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>
|
|
<li
|
|
className={
|
|
"app-step-nav__step js-step app-step-nav__step--active" +
|
|
(showQuestionnaireSection >= 4
|
|
? " sectionComplete"
|
|
: " sectionIncomplete")
|
|
}
|
|
aria-current="step"
|
|
data-show=""
|
|
id={t("myrepresentations:s78-section-heading-four")
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()}
|
|
>
|
|
<div
|
|
className="app-step-nav__header js-toggle-panel "
|
|
data-position="1"
|
|
>
|
|
<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>{" "}
|
|
4
|
|
<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={() => {
|
|
setShowQuestionnaireSection(4);
|
|
}}
|
|
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
|
aria-expanded="false"
|
|
aria-controls={
|
|
"step-panel-" +
|
|
t(
|
|
"myrepresentations:s78-section-heading-four"
|
|
)
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()
|
|
}
|
|
>
|
|
<span className="js-step-title-text govuk-!-font-size-16">
|
|
{t(
|
|
"myrepresentations:s78-section-heading-four"
|
|
)}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>
|
|
<li
|
|
className={
|
|
"app-step-nav__step js-step app-step-nav__step--active" +
|
|
(showQuestionnaireSection >= 5
|
|
? " sectionComplete"
|
|
: " sectionIncomplete")
|
|
}
|
|
aria-current="step"
|
|
data-show=""
|
|
id={t("myrepresentations:s78-section-heading-five")
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()}
|
|
>
|
|
<div
|
|
className="app-step-nav__header js-toggle-panel "
|
|
data-position="1"
|
|
>
|
|
<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>{" "}
|
|
5
|
|
<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={() => {
|
|
setShowQuestionnaireSection(5);
|
|
}}
|
|
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
|
aria-expanded="false"
|
|
aria-controls={
|
|
"step-panel-" +
|
|
t(
|
|
"myrepresentations:s78-section-heading-five"
|
|
)
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()
|
|
}
|
|
>
|
|
<span className="js-step-title-text govuk-!-font-size-16">
|
|
{t(
|
|
"myrepresentations:s78-section-heading-three"
|
|
)}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>{" "}
|
|
<li
|
|
className={
|
|
"app-step-nav__step js-step app-step-nav__step--active" +
|
|
(showQuestionnaireSection >= 6
|
|
? " sectionComplete"
|
|
: " sectionIncomplete")
|
|
}
|
|
aria-current="step"
|
|
data-show=""
|
|
id={t("myrepresentations:s78-section-heading-six")
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()}
|
|
>
|
|
<div
|
|
className="app-step-nav__header js-toggle-panel "
|
|
data-position="1"
|
|
>
|
|
<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>{" "}
|
|
6
|
|
<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={() => {
|
|
setShowQuestionnaireSection(6);
|
|
}}
|
|
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
|
aria-expanded="false"
|
|
aria-controls={
|
|
"step-panel-" +
|
|
t(
|
|
"myrepresentations:s78-section-heading-six"
|
|
)
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()
|
|
}
|
|
>
|
|
<span className="js-step-title-text govuk-!-font-size-16">
|
|
{t(
|
|
"myrepresentations:s78-section-heading-six"
|
|
)}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>
|
|
<li
|
|
className={
|
|
"app-step-nav__step js-step app-step-nav__step--active" +
|
|
(showQuestionnaireSection >= 7
|
|
? " sectionComplete"
|
|
: " sectionIncomplete")
|
|
}
|
|
aria-current="step"
|
|
data-show=""
|
|
id={t("myrepresentations:s78-section-heading-seven")
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()}
|
|
>
|
|
<div
|
|
className="app-step-nav__header js-toggle-panel "
|
|
data-position="1"
|
|
>
|
|
<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>{" "}
|
|
7
|
|
<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={() => {
|
|
setShowQuestionnaireSection(7);
|
|
}}
|
|
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
|
aria-expanded="false"
|
|
aria-controls={
|
|
"step-panel-" +
|
|
t(
|
|
"myrepresentations:s78-section-heading-seven"
|
|
)
|
|
.replace(/\s+/g, "-")
|
|
.toLowerCase()
|
|
}
|
|
>
|
|
<span className="js-step-title-text govuk-!-font-size-16">
|
|
{t(
|
|
"myrepresentations:s78-section-heading-seven"
|
|
)}
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</h3>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default RepresentationProgress_s78;
|