added check answer summary & complete appeal step

components/checkanswers.js

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useContext } from "react";
+import useTranslation from "next-translate/useTranslation";
+import BuildCheckSection from "./newappeal/buildchecksection";
+
+const CheckAnswers = (props) => {
+    const { formXML, formTitle, rowXML, whichSection, sectionCount, onSubmit } =
+        props;
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    return (
+        <main
+            className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+            id="main-content"
+            role="main"
+        >
+            sss
+            <BuildCheckSection
+                formXML={formXML}
+                sectionCount={sectionCount}
+                onSubmit={onSubmit}
+                formTitle={formTitle}
+            />
+        </main>
+    );
+};
+
+export default CheckAnswers;

components/elements/index.js

@@ -173,23 +173,23 @@ export function YesNofield(props) {
     );
 }
 
-export function PickList(props) {
-    const { name, label, datafieldname } = props;
-
+const RenderPickList = ({
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, error },
+}) => {
     const fetcher = (url) => fetch(url).then((res) => res.json());
 
-    const { data, error } = useSWR("/api/lookups/" + datafieldname, fetcher);
-    if (error)
+    const { data, errorStr } = useSWR("/api/lookups/" + datafieldname, fetcher);
+    if (errorStr)
         return (
             <div className="govuk-form-group">
                 <label className="govuk-label govuk-body-m" htmlFor="sort">
-                    {props.label}
+                    {label}
                 </label>
-                <select
-                    className="govuk-select"
-                    id={props.name}
-                    name={props.name}
-                >
+                <select className="govuk-select" id={name} name={name}>
                     <option value="">empty</option>
                 </select>
             </div>
@@ -197,33 +197,48 @@ export function PickList(props) {
     if (!data)
         return (
             <div>
-                <div className="govuk-form-group">{props.label} loading...</div>
+                <div className="govuk-form-group">{label} loading...</div>
             </div>
         );
     console.log(JSON.stringify(data.GlobalOptionSet.Options));
 
     const dropdownObj = data.GlobalOptionSet.Options;
-
     return (
-        <div className="govuk-form-group">
-            <label className="govuk-label govuk-body-m" htmlFor="sort">
-                {props.label}
-            </label>
-            <select className="govuk-select" id={props.name} name={props.name}>
+        <div>
+            <select {...input} className="govuk-select" id={name} name={name}>
                 {Object.keys(dropdownObj).map((key, index) => {
                     return (
                         <option
                             key={key}
                             value={
-                                dropdownObj[key].Label.LocalizedLabels[0]
-                                    .MetadataId
+                                dropdownObj[key].Label.LocalizedLabels[0].value
                             }
+                            // value={dropdownObj[key].Label.LocalizedLabels[0].MetadataId}
                         >
                             {dropdownObj[key].Label.LocalizedLabels[0].Label}
                         </option>
                     );
                 })}
             </select>
+
+            {touched && error && <span>{error}</span>}
+        </div>
+    );
+};
+
+export function PickList(props) {
+    const { name, label, datafieldname } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label govuk-body-m" htmlFor="sort">
+                {props.label}
+            </label>
+            <Field
+                name={props.name}
+                component={RenderPickList}
+                datafieldname={datafieldname}
+            />
         </div>
     );
 }

components/newappeal/buildcheckrow.js

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import BuildField from "./buildfield";
+
+export default function BuildCheckRow(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { formXML, whichSection, sectionCount, onSubmit } = props;
+
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            whichSection +
+            "]/columns//sections/section/rows/row",
+        doc
+    );
+
+    return (
+        <>
+            {Object.keys(rowXML).map((key, index) => {
+                var doc = parser.parseFromString(
+                    rowXML[key].outerHTML,
+                    "text/xml"
+                );
+                var rows = xpath.select("//label/@description", doc);
+                var fieldtype = xpath.select("//@classid", doc);
+                var datafieldname = xpath.select("//@datafieldname", doc);
+
+                console.log(props.form);
+
+                return (
+                    <div className="govuk-summary-list__row" key={key}>
+                        <dt className="govuk-summary-list__key">
+                            {rows[0].value}
+                        </dt>
+                        <dd className="govuk-summary-list__value">
+                            {
+                                props.props.form["appealForm"].values[
+                                    datafieldname[0].value
+                                ]
+                            }
+                        </dd>
+                        <dd className="govuk-summary-list__actions">
+                            <a className="govuk-link" href="#">
+                                Change
+                                <span className="govuk-visually-hidden">
+                                    {" "}
+                                    name
+                                </span>
+                            </a>
+                        </dd>
+                    </div>
+                );
+            })}
+        </>
+    );
+}

components/newappeal/buildchecksection.js

@@ -0,0 +1,121 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { useState, useEffect } from "react";
+import xpath from "xpath";
+import BuildCheckRow from "./buildcheckrow";
+import { reduxForm, formValueSelector } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { setCurrentSection } from "../../store/appealType/action";
+
+let BuildCheckSection = (props) => {
+    // useEffect(() => {
+    //     window.scrollTo(0, 0);
+    // });
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        formXML,
+        sectionCount,
+        onSubmit,
+        handleSubmit,
+        formTitle,
+        setCurrentSection,
+    } = props;
+
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[*]/columns//sections/section/rows/row",
+        doc
+    );
+
+    var titleList = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const basicSearch = (event) => {
+        event.preventDefault();
+        console.log(query);
+        // /searchresults
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-two-thirds">
+                <div>
+                    <h1 className="govuk-heading-m">
+                        Are these answers correct?
+                    </h1>
+                    {Object.keys(titles).map((key) => (
+                        <>
+                            <h2 className="govuk-heading-m">
+                                {titles[key].value}
+                            </h2>
+
+                            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
+                                <BuildCheckRow
+                                    formXML={formXML}
+                                    whichSection={parseInt(key) + 1}
+                                    sectionCount={key}
+                                    props={props}
+                                />
+                            </dl>
+                        </>
+                    ))}
+
+                    <dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
+                </div>
+                <div className="govuk-button-group">
+                    <a
+                        className="govuk-button"
+                        data-module="govuk-button"
+                        onClick={() => setCurrentSection(9999)}
+                    >
+                        Submit appeal
+                    </a>
+                </div>
+            </div>
+            <div className="govuk-grid-column-one-third"></div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+// BuildCheckSection = reduxForm({
+//     // a unique name for the form
+//     form: "sssappealForm",
+//     destroyOnUnmount: false,
+// })(BuildCheckSection);
+
+const selector = formValueSelector("appealForm"); // <-- same as form name
+
+export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckSection);

components/newappeal/buildsection.js

@@ -6,6 +6,7 @@ import xpath from "xpath";
 import BuildRow from "./buildrow";
 import { reduxForm, formValueSelector } from "redux-form";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { setCurrentSection } from "../../store/appealType/action";
 
 let BuildSection = (props) => {
     // useEffect(() => {
@@ -17,9 +18,16 @@ let BuildSection = (props) => {
     const router = useRouter();
     const { locale } = router;
 
-    const { formXML, sectionCount, onSubmit, handleSubmit, formTitle } = props;
-    const [currentSection, setCurrentSection] = useState(1);
+    const {
+        formXML,
+        sectionCount,
+        onSubmit,
+        handleSubmit,
+        formTitle,
+        setCurrentSection,
+    } = props;
 
+    const currentSection = props.appealType.currentSection;
     const parser = new DOMParser();
     var doc = parser.parseFromString(props.formXML, "text/xml");
     var titles = xpath.select(
@@ -40,12 +48,6 @@ let BuildSection = (props) => {
 
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
-    const basicSearch = (event) => {
-        event.preventDefault();
-        console.log(query);
-        // /searchresults
-    };
-
     const onHandleSubmit = (values) => {
         setCurrentSection(currentSection + 1);
     };
@@ -76,6 +78,17 @@ let BuildSection = (props) => {
                         ) : (
                             ""
                         )}
+                        {props.sectionCount == currentSection ? (
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                data-module="govuk-button"
+                            >
+                                Submit
+                            </button>
+                        ) : (
+                            ""
+                        )}
                         {currentSection > 1 ? (
                             <a
                                 className="govuk-link"
@@ -128,16 +141,30 @@ let BuildSection = (props) => {
 
 const mapStateToProps = (state) => {
     return {
-        form: state.form,
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
     };
 };
 
-BuildSection = reduxForm({
-    // a unique name for the form
-    form: "sssappealForm",
-    destroyOnUnmount: false,
-})(BuildSection);
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
 
 const selector = formValueSelector("appealForm"); // <-- same as form name
 
-export default connect(mapStateToProps)(BuildSection);
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(
+    reduxForm({
+        form: "appealForm",
+        destroyOnUnmount: false,
+    })(BuildSection)
+);

components/newappeal/complete.js

@@ -0,0 +1,124 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import { useState, useEffect } from "react";
+import xpath from "xpath";
+import BuildRow from "./buildrow";
+import { reduxForm, formValueSelector } from "redux-form";
+import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
+import { setCurrentSection } from "../../store/appealType/action";
+
+let CompleteAppeal = (props) => {
+    // useEffect(() => {
+    //     window.scrollTo(0, 0);
+    // });
+
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const {
+        formXML,
+        sectionCount,
+        onSubmit,
+        handleSubmit,
+        formTitle,
+        setCurrentSection,
+    } = props;
+
+    const currentSection = props.appealType.currentSection;
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[" + currentSection + " ]/labels/label/@description",
+        doc
+    );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            currentSection +
+            "]/columns//sections/section/rows/row",
+        doc
+    );
+
+    var titleList = xpath.select(
+        "//form/tabs/tab[*]/labels/label/@description",
+        doc
+    );
+
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const onHandleSubmit = (values) => {
+        setCurrentSection(currentSection + 1);
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-two-thirds">
+                <div className="govuk-panel govuk-panel--confirmation">
+                    <h1 className="govuk-panel__title">Appeal complete</h1>
+                    <div className="govuk-panel__body">
+                        Your reference number
+                        <br />
+                        <strong>CAS-00010-J9W6L5</strong>
+                    </div>
+                </div>
+
+                <p className="govuk-body">
+                    We have sent you a confirmation email.
+                </p>
+
+                <h2 className="govuk-heading-m">What happens next</h2>
+
+                <p className="govuk-body">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    Morbi a metus non quam mollis egestas. Integer ac leo
+                    cursus, laoreet nulla sed, tempus tellus. Mauris condimentum
+                    erat arcu.
+                </p>
+                <p className="govuk-body">
+                    Sed imperdiet dignissim ipsum. Orci varius natoque penatibus
+                    et magnis dis parturient montes, nascetur ridiculus mus. In
+                    id leo in turpis aliquam venenatis ut non erat. Ut est arcu,
+                    luctus sit amet pretium sed, iaculis non purus. Etiam dictum
+                    tortor commodo luctus rhoncus.
+                </p>
+
+                <p className="govuk-body">
+                    <Link href="/myportal">
+                        <a className="govuk-link">Back to My Portal</a>
+                    </Link>
+                </p>
+
+                <p className="govuk-body">
+                    <a href="#" className="govuk-link">
+                        What did you think of this service?
+                    </a>
+                    (takes 30 seconds)
+                </p>
+            </div>
+        </div>
+    );
+};
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+        //form: state.form,
+    };
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        setCurrentSection: (currentSection) => {
+            dispatch(setCurrentSection(currentSection));
+        },
+    };
+};
+
+const selector = formValueSelector("appealForm"); // <-- same as form name
+
+export default connect(mapStateToProps, mapDispatchToProps)(CompleteAppeal);