added form ordering and validation for s78

components/newappeal/buildsection.js

@@ -10,7 +10,11 @@ import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import {
     setCaseReference,
     setCurrentSection,
+    setDocumentsList,
 } from "../../store/appealType/action";
+
+import { FieldsTranslations } from "../elements";
+
 import { query } from "jsonpath";
 
 let BuildSection = (props) => {
@@ -35,6 +39,7 @@ let BuildSection = (props) => {
         mandatoryFieldsData,
     } = props;
 
+    const documentListObj = props.appealType.documentList;
     const currentSection = props.appealType.currentSection;
     const parser = new DOMParser();
     var doc = parser.parseFromString(props.formXML, "text/xml");
@@ -131,8 +136,7 @@ let BuildSection = (props) => {
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds">
                 <h1 className="govuk-heading-m  govuk-!-margin-top-5">
-                    {/* {titles[0].value}{" "} */}
-                    Enter your appeal information
+                    {titles[0].value}
                 </h1>
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
                     {hasErrors == true ? (
@@ -200,7 +204,7 @@ let BuildSection = (props) => {
                     className="at-nav"
                 >
                     <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
-                        Progress:
+                        {t("newappeal:new-appeal-progress-nav-label")}:
                     </h3>
                     <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
 
@@ -211,7 +215,11 @@ let BuildSection = (props) => {
                                     {Object.keys(titleList).map((key) =>
                                         parseInt(key) + 1 == currentSection ? (
                                             <li key={key}>
-                                                <b>{titleList[key].value} </b>
+                                                <b>
+                                                    {FieldsTranslations(
+                                                        titleList[key].value
+                                                    )}{" "}
+                                                </b>
                                             </li>
                                         ) : (
                                             <li key={key}>
@@ -229,10 +237,14 @@ let BuildSection = (props) => {
                                                             );
                                                         }}
                                                     >
-                                                        {titleList[key].value}
+                                                        {FieldsTranslations(
+                                                            titleList[key].value
+                                                        )}
                                                     </a>
                                                 ) : (
-                                                    titleList[key].value
+                                                    FieldsTranslations(
+                                                        titleList[key].value
+                                                    )
                                                 )}
                                             </li>
                                         )
@@ -242,6 +254,28 @@ let BuildSection = (props) => {
                         </ul>
                     </ol>
                 </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>{value}</li>;
+                                            }
+                                        )}
+                                    </ol>
+                                </li>
+                            </ul>
+                        </ol>
+                    </div>
+                )}
             </div>
         </div>
     );
@@ -265,6 +299,9 @@ const mapDispatchToProps = (dispatch) => {
         gotoSection: (thisSection) => {
             dispatch(setCurrentSection(thisSection));
         },
+        setDocumentsList: (documentList) => {
+            dispatch(setDocumentsList(documentList));
+        },
     };
 };