Merged PR 380: added validation and updated git ignore

Related work items: #5210, #5242

.gitignore

@@ -1,3 +1,19 @@
-node_modules
+// .gitignore
+# next.js build output
 .next
+
+# dotenv environment variables file - set in pipeline as environment variables
+.env
+.env.build
+
+# Dependency directories
+node_modules/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+#lock files
+yarn.lock
 package-lock.json

components/breadcrumbs.js

@@ -72,6 +72,22 @@ const Breadcrumbs = (props) => {
                     ) : (
                         ""
                     )}
+                    {router.pathname == "/searchresults" ? (
+                        <>
+                            <li className="govuk-breadcrumbs__list-item">
+                                <Link href="/myportal">
+                                    <a className="govuk-breadcrumbs__link">
+                                        My Portal
+                                    </a>
+                                </Link>
+                            </li>
+                            <li className="govuk-breadcrumbs__list-item">
+                                Search results
+                            </li>
+                        </>
+                    ) : (
+                        ""
+                    )}
                     {router.pathname == "/newappeal" ? (
                         <>
                             <li className="govuk-breadcrumbs__list-item">

components/elements/index.js

@@ -6,25 +6,77 @@ import React, { useState } from "react";
 import "react-datepicker/dist/react-datepicker.css";
 import moment from "moment";
 
+const RenderTextfield = ({
+    id,
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {errorMsg}
+                    </span>
+                )}
+                <input {...input} className={className} name={name} id={id} />
+            </div>
+        </>
+    );
+};
+
 export function Textfield(props) {
     const { name, label } = props;
+    const required = (value) => (value ? undefined : "Required");
 
     return (
-        <div className="govuk-form-group">
-            <label className="govuk-label " htmlFor="event-name">
-                {props.label}
-            </label>
         <Field
             name={props.name}
             id={props.name}
-                component="input"
+            component={RenderTextfield}
             type="text"
             className="govuk-input govuk-input--width-20"
+            validate={[required]}
+            label={props.label}
+            errorMsg="Is required"
         />
-        </div>
     );
 }
 
+const RenderMultiline = ({
+    className,
+    rows,
+    datafieldname,
+    name,
+    label,
+    input,
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <textarea {...input} rows={rows} className={className}></textarea>
+        </>
+    );
+};
+
 export function MultiLinefield(props) {
     const { name, label } = props;
 
@@ -42,13 +94,14 @@ export function MultiLinefield(props) {
                 Do not include personal or financial information, like your
                 National Insurance number or credit card details.
             </div>
+
             <Field
                 name={props.name}
                 id={props.name}
-                component="input"
+                component={RenderMultiline}
                 type="text"
                 rows="5"
-                className="govuk-textarea govuk-input--width-20"
+                className="govuk-textarea govuk-input--width-30"
                 aria-describedby="more-detail-hint"
             />
         </div>
@@ -59,12 +112,45 @@ const RenderDatePicker = ({
     datafieldname,
     name,
     label,
+    id,
+    errorMsg,
     input: { onChange, value },
     meta: { touched, error },
     ...custom
 }) => {
     return (
         <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    role="group"
+                    aria-describedby="dob-hint"
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading"
+                            id={id + "_label"}
+                        >
+                            {label}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
                     <DatePicker
                         {...custom}
                         autoOk={true}
@@ -74,33 +160,25 @@ const RenderDatePicker = ({
 
                         // value={!value ? null : new Date(value)}
                     />
-
+                </fieldset>
-            {touched && error && <span>{error}</span>}
+            </div>
         </>
     );
 };
 
 export function DateFieldPicker(props) {
     const { name, label } = props;
+    const required = (value) => (value ? undefined : "Required");
+
     return (
-        <div className="govuk-form-group">
-            <fieldset
-                className="govuk-fieldset"
-                role="group"
-                aria-describedby="dob-hint"
-            >
-                <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                    <label className="govuk-fieldset__heading">
-                        {props.label}
-                    </label>
-                </legend>
         <Field
-                    name={props.name}
+            name={name}
-                    id={props.name}
+            id={name}
+            label={label}
             component={RenderDatePicker}
+            //validate={[required]}
+            errorMsg="Select a date"
         />
-            </fieldset>
-        </div>
     );
 }
 
@@ -183,47 +261,96 @@ export function DateField(props) {
     );
 }
 
-export function YesNofield(props) {
+const RenderYesNo = ({
-    const { name, label } = props;
+    datafieldname,
-    const yesNo = ["Yes", "No"];
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
     return (
-        <div className="govuk-form-group">
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
                 <fieldset
                     className="govuk-fieldset"
-                aria-describedby={props.name + "-hint"}
+                    aria-describedby={name + "-hint"}
                 >
                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                    <label className="govuk-fieldset__heading govuk-body-m">
+                        <label
-                        {props.label}
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {label}
                         </label>
                     </legend>
-
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
                     <div className="govuk-radios govuk-radios--inline govuk-radios--small">
-                    {Object.keys(yesNo).map((key, index) => (
+                        {Object.keys(options).map((key, index) => (
                             <div
                                 className="govuk-radios__item"
                                 data-children-count={key}
                                 key={key}
                             >
                                 <Field
-                                id={props.name + "_" + index}
+                                    id={id + "_" + index}
-                                name={props.name}
+                                    name={id}
                                     component="input"
                                     type="radio"
                                     className="govuk-radios__input"
-                                value={yesNo[key]}
+                                    value={options[key]}
                                 />
                                 <label
                                     className="govuk-label govuk-radios__label"
-                                htmlFor={props.name + "_" + index}
+                                    htmlFor={id + "_" + index}
                                 >
-                                {yesNo[key]}
+                                    {options[key]}
                                 </label>
                             </div>
                         ))}
                     </div>
                 </fieldset>
             </div>
+        </>
+    );
+};
+
+export function YesNofield(props) {
+    const { name, label } = props;
+    const yesNo = ["Yes", "No"];
+    const required = (value) => (value ? undefined : "Required");
+
+    return (
+        <Field
+            name={props.name}
+            datafieldname={props.name}
+            label={props.label}
+            options={yesNo}
+            id={props.name}
+            className="govuk-radios__input"
+            //validate={[required]}
+            errorMsg="Select and option"
+            component={RenderYesNo}
+        />
     );
 }
 
@@ -232,18 +359,15 @@ const RenderPickList = ({
     name,
     label,
     input,
-    meta: { touched, error },
+    meta: { touched, errorStr },
 }) => {
     const fetcher = (url) => fetch(url).then((res) => res.json());
 
-    const { data, errorStr } = useSWR("/api/lookups/" + datafieldname, fetcher);
+    const { data, error } = useSWR("/api/lookups/" + datafieldname, fetcher);
-    if (errorStr)
+    if (error)
         return (
             <div className="govuk-form-group">
-                <label
+                <label className="govuk-label govuk-body-m" htmlFor={name}>
-                    className="govuk-label govuk-body-m"
-                    htmlFor={props.name}
-                >
                     {label}
                 </label>
                 <select className="govuk-select" id={name} name={name}>
@@ -257,9 +381,10 @@ const RenderPickList = ({
                 <div className="govuk-form-group">{label} loading...</div>
             </div>
         );
-    console.log(JSON.stringify(data.GlobalOptionSet.Options));
+    //console.log(JSON.stringify(data.GlobalOptionSet.Options));
 
     const dropdownObj = data.GlobalOptionSet.Options;
+
     return (
         <div>
             <select {...input} className="govuk-select" id={name} name={name}>
@@ -279,7 +404,7 @@ const RenderPickList = ({
                 })}
             </select>
 
-            {touched && error && <span>{error}</span>}
+            {touched && errorStr && <span>{errorStr}</span>}
         </div>
     );
 };
@@ -351,7 +476,7 @@ const RenderCaseID = {};
 
 export function ReadOnlyfield(props) {
     const { name, label, value } = props;
-    console.log(props.value.refno);
+    //console.log(props.value.refno);
     return (
         <div className="govuk-form-group">
             <label className="govuk-label " htmlFor={props.name}>

components/header.js

@@ -61,8 +61,8 @@ export default function Header({ courseName }) {
                 </div>
 
                 <div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
+                    <Link href="/">
                         <a
-                        href="/"
                             onClick={() => {
                                 window.localStorage.clear();
                             }}
@@ -71,6 +71,7 @@ export default function Header({ courseName }) {
                         >
                             {t("common:service-name")}
                         </a>
+                    </Link>
                 </div>
                 <div className="languageSwitch">
                     {router.path}

components/homepage/casesearch.js

@@ -9,10 +9,16 @@ export default function CaseSearch() {
     const router = useRouter();
     const { locale } = router;
     const [query, setQuery] = useState("");
+    const [validationError, setValidationError] = useState("");
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
     const basicSearch = (event) => {
         event.preventDefault();
+
+        if (query == "" || query == null) {
+            setValidationError(true);
+        } else {
+            setValidationError(false);
             console.log(query);
             // /searchresults
 
@@ -20,6 +26,7 @@ export default function CaseSearch() {
                 pathname: "/searchresults",
                 query: { q: query },
             });
+        }
     };
 
     return (
@@ -29,8 +36,14 @@ export default function CaseSearch() {
                     <h3 className="heading-small card-heading">
                         {t("home:casesearch-card-title")}
                     </h3>
-                    <div className="govuk-form-group">
+                    <div
-                        <div id="event-name-hint" className="govuk-hint ">
+                        className={
+                            validationError
+                                ? "govuk-form-group govuk-form-group--error"
+                                : "govuk-form-group "
+                        }
+                    >
+                        <div id="basicSearch-hint" className="govuk-hint ">
                             {t("home:casesearch-card-search-hint")}:
                             <br />
                             <span className="govuk-body-s">
@@ -41,15 +54,26 @@ export default function CaseSearch() {
                                     )}
                                     :
                                 </span>{" "}
-                                APP/A1234/A/99/1234567
+                                CAS-00009-W8N6W4
                             </span>
                         </div>
+                        {validationError && (
+                            <span
+                                id="basicSearch-error"
+                                className="govuk-error-message"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                Case reference is required
+                            </span>
+                        )}
                         <input
                             className="govuk-input"
-                            id="event-name"
+                            id="basicSearch"
-                            name="event-name"
+                            name="basicSearch"
                             type="text"
-                            aria-describedby="event-name-hint"
+                            aria-describedby="basicSearch-hint"
                             onChange={handleParam(setQuery)}
                         />
                     </div>

components/myportal/searchcases.js

@@ -9,10 +9,16 @@ export default function SearchCases() {
     const router = useRouter();
     const { locale } = router;
     const [query, setQuery] = useState("");
+    const [validationError, setValidationError] = useState("");
     const handleParam = (setValue) => (e) => setValue(e.target.value);
 
     const basicSearch = (event) => {
         event.preventDefault();
+
+        if (query == "" || query == null) {
+            setValidationError(true);
+        } else {
+            setValidationError(false);
             console.log(query);
             // /searchresults
 
@@ -20,6 +26,7 @@ export default function SearchCases() {
                 pathname: "/searchresults",
                 query: { q: query },
             });
+        }
     };
 
     return (
@@ -29,7 +36,13 @@ export default function SearchCases() {
                     <h3 className="heading-small card-heading">
                         {t("myportal:searchcases-card-title")}
                     </h3>
-                    <div className="govuk-form-group">
+                    <div
+                        className={
+                            validationError
+                                ? "govuk-form-group govuk-form-group--error"
+                                : "govuk-form-group "
+                        }
+                    >
                         <div id="event-name-hint" className="govuk-hint ">
                             {t("myportal:searchcases-card-search-hint")}:
                             <br />
@@ -41,9 +54,20 @@ export default function SearchCases() {
                                     )}
                                     :
                                 </span>{" "}
-                                APP/A1234/A/99/1234567
+                                CAS-00009-W8N6W4
                             </span>
                         </div>
+                        {validationError && (
+                            <span
+                                id="basicSearch-error"
+                                className="govuk-error-message"
+                            >
+                                <span className="govuk-visually-hidden">
+                                    Error:
+                                </span>{" "}
+                                Case reference is required
+                            </span>
+                        )}
                         <input
                             className="govuk-input"
                             id="event-name"

components/newappeal/buildcheckrow.js

@@ -45,8 +45,6 @@ let BuildCheckRow = (props) => {
                 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">

components/newappeal/buildchecksection.js

@@ -73,6 +73,7 @@ let BuildCheckSection = (props) => {
                                     whichSection={parseInt(key) + 1}
                                     sectionCount={key}
                                     props={props}
+                                    key={key}
                                 />
                             </dl>
                         </>

components/newappeal/buildfield.js

@@ -97,10 +97,6 @@ export default function BuildField(props) {
     };
 
     return (
-        <div className="govuk-grid-row">
+        <div className="govuk-grid-row">{whichFieldType(props.fieldType)}</div>
-            <div className="govuk-grid-column-full">
-                {whichFieldType(props.fieldType)}
-            </div>
-        </div>
     );
 }

components/newappeal/buildrow.js

@@ -15,7 +15,6 @@ export default function BuildRow(props) {
     const parser = new DOMParser();
 
     return (
-        <div className="govuk-grid-row">
         <div className="govuk-grid-column-full">
             {Object.keys(rowXML).map((key, index) => {
                 var doc = parser.parseFromString(
@@ -36,6 +35,5 @@ export default function BuildRow(props) {
                 );
             })}
         </div>
-        </div>
     );
 }

components/newappeal/buildsection.js

@@ -1,10 +1,11 @@
 import Link from "next/link";
+import _, { has } from "lodash";
 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 { reduxForm, formValueSelector, getFormSubmitErrors } from "redux-form";
 import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
 import {
     setCaseReference,
@@ -56,12 +57,73 @@ let BuildSection = (props) => {
 
     const onHandleSubmit = (values) => {
         setCurrentSection(currentSection + 1);
-        setCaseReference(router.query.refno);
     };
 
-    // const initialValues = {
+    const [hasErrors, setHasErrors] = useState("");
-    //     email: router.query.refno,
+
-    // };
+    const getErrors = () => {
+        let errorsobj = props.props.form["appealForm"];
+        setHasErrors(errorsobj.hasOwnProperty("syncErrors"));
+        window.scrollTo(0, 0);
+    };
+
+    let errorsobj = {};
+    const ShowErrorHeader = (props) => {
+        errorsobj = props.props.appealForm.syncErrors;
+        errorsobj = _.keys(errorsobj);
+
+        const getErrorLabel = (whichField) => {
+            var doc = parser.parseFromString(props.formXML, "text/xml");
+            var errorFieldLabel = xpath.select(
+                "//*[control/@id='" + whichField + "']//@description",
+                doc
+            );
+
+            return errorFieldLabel[0].value;
+        };
+
+        const ShowErrors = () => {
+            let errorList = [];
+            for (let i = 0; i < errorsobj.length; ++i) {
+                //get label from error key - search rowxml for id = errorobj
+
+                errorList.push(
+                    <li>
+                        <a href={"#" + errorsobj[i] + "_label"}>
+                            {" "}
+                            {getErrorLabel(errorsobj[i])}
+                        </a>
+                    </li>
+                );
+            }
+
+            return errorList;
+        };
+
+        return !_.isEmpty(errorsobj) ? (
+            <div
+                className="govuk-error-summary"
+                aria-labelledby="error-summary-title"
+                role="alert"
+                tabIndex="-1"
+                data-module="govuk-error-summary"
+            >
+                <h2
+                    className="govuk-error-summary__title"
+                    id="error-summary-title"
+                >
+                    The following fields have a problem :
+                </h2>
+                <div className="govuk-error-summary__body">
+                    <ul className="govuk-list govuk-error-summary__list">
+                        <ShowErrors />
+                    </ul>
+                </div>
+            </div>
+        ) : (
+            ""
+        );
+    };
 
     return (
         <div className="govuk-grid-row">
@@ -70,6 +132,16 @@ let BuildSection = (props) => {
                     {titles[0].value}{" "}
                 </h1>
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
+                    {hasErrors == true ? (
+                        <ShowErrorHeader
+                            hasErrors={hasErrors}
+                            props={props.props.form}
+                            formXML={formXML}
+                        />
+                    ) : (
+                        ""
+                    )}
+
                     <BuildRow
                         rowXML={rowXML}
                         whichSection={props.whichSection}
@@ -84,6 +156,7 @@ let BuildSection = (props) => {
                                 type="submit"
                                 className="govuk-button"
                                 data-module="govuk-button"
+                                onClick={() => getErrors()}
                             >
                                 Continue
                             </button>

components/newappeal/createCase.js

@@ -15,8 +15,6 @@ import {
     getAppealTypeObj,
 } from "../../store/appealType/action";
 
-import { createCase } from "../../actions";
-
 let CreateCase = (props) => {
     // useEffect(() => {
     //     window.scrollTo(0, 0);
@@ -29,37 +27,85 @@ let CreateCase = (props) => {
 
     const { LPAData, onSubmit, handleSubmit } = props;
 
-    const appealOptionsObj = props.appealType.appealTypeOptions.GlobalOptionSet
+    const appealOptionsObj = _.isEmpty(props)
-        .Options || [{}];
+        ? [{}]
+        : _.isEmpty(props.appealType)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet)
+        ? [{}]
+        : _.isEmpty(props.appealType.appealTypeOptions.GlobalOptionSet.Options)
+        ? [{}]
+        : props.appealType.appealTypeOptions.GlobalOptionSet.Options;
 
-    let lpaOptionsObj = jsonpath.query(props.LPAData.LPAData, "$..name");
+    let lpaOptionsObj = _.isEmpty(props)
+        ? [{}]
+        : _.isEmpty(props.LPAData)
+        ? [{}]
+        : _.isEmpty(props.LPAData.LPAData)
+        ? [{}]
+        : jsonpath.query(props.LPAData.LPAData, "$..name");
 
     const RenderLPAList = ({
         name,
         input,
         optionsObj,
         meta: { touched, error },
+        label,
+        errorMsg,
     }) => {
         return (
+            <>
+                <div
+                    className={
+                        touched && error
+                            ? "govuk-form-group govuk-form-group--error"
+                            : "govuk-form-group "
+                    }
+                >
+                    {" "}
+                    <label className="govuk-label" htmlFor="sort">
+                        {label}
+                    </label>
+                    {touched && error && (
+                        <span
+                            id="passport-issued-error"
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
                     <div>
                         <select
                             {...input}
-                    className="govuk-select"
+                            className="govuk-select govuk-input--error"
                             id="lpatypes"
                             name={name}
                             //onChange={(e) => props.onChangeSelectLPA(e)}
                         >
-                    <option>Select...</option>
+                            <option value="" disabled defaultValue>
-                    {Object.keys(optionsObj).map((key, index) => {
+                                Select...
+                            </option>
+                            {_.isEmpty(optionsObj)
+                                ? ""
+                                : Object.keys(optionsObj).map((key, index) => {
                                       return (
-                            <option key={key} value={optionsObj[key]}>
+                                          <option
+                                              key={key}
+                                              value={optionsObj[key]}
+                                          >
                                               {optionsObj[key]}
                                           </option>
                                       );
                                   })}
                         </select>
-                {touched && error && <span>{error}</span>}
                     </div>
+                </div>
+            </>
         );
     };
 
@@ -68,8 +114,32 @@ let CreateCase = (props) => {
         input,
         optionsObj,
         meta: { touched, error },
+        label,
+        errorMsg,
     }) => {
         return (
+            <>
+                <div
+                    className={
+                        touched && error
+                            ? "govuk-form-group govuk-form-group--error"
+                            : "govuk-form-group "
+                    }
+                >
+                    <label className="govuk-label" htmlFor="sort">
+                        {label}
+                    </label>
+                    {touched && error && (
+                        <span
+                            id="passport-issued-error"
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
                     <div>
                         <select
                             {...input}
@@ -78,8 +148,12 @@ let CreateCase = (props) => {
                             name={name}
                             //onChange={(e) => props.onChangeSelectAppealType(e)}
                         >
-                    <option>Select...</option>
+                            <option value="" disabled defaultValue>
-                    {Object.keys(optionsObj).map((key, index) => {
+                                Select...
+                            </option>
+                            {_.isEmpty(optionsObj)
+                                ? ""
+                                : Object.keys(optionsObj).map((key, index) => {
                                       return (
                                           <option
                                               key={key}
@@ -90,75 +164,49 @@ let CreateCase = (props) => {
                                                   ""
                                               ).toLowerCase()}
                                           >
-                                {optionsObj[key].Label.LocalizedLabels[0].Label}
+                                              {
+                                                  optionsObj[key].Label
+                                                      .LocalizedLabels[0].Label
+                                              }
                                           </option>
                                       );
                                   })}
                         </select>
-                {touched && error && <span>{error}</span>}
                     </div>
+                </div>
+            </>
         );
     };
 
+    const required = (value) => (value ? undefined : "Required");
+
     const onHandleSubmit = (values) => {
         event.preventDefault();
-
+        router.replace("/newappeal/" + values.appealTypes, null, {
-        console.log(createCase("asasa", "asasa"));
-
-        const caseReference = createCase("123123", "213132");
-
-        router.replace(
-            "/newappeal/" + values.appealTypes + "?refno=" + caseReference,
-            null,
-            {
             shallow: true,
-            }
+        });
-        );
-        console.log(values);
     };
 
     return (
         <form onSubmit={handleSubmit(onHandleSubmit)}>
-            <div className="govuk-form-group">
-                <label className="govuk-label" htmlFor="sort">
-                    Select your local planning authority
-                </label>
             <Field
                 name="lpaTypes"
                 component={RenderLPAList}
                 optionsObj={lpaOptionsObj}
+                validate={[required]}
+                label="Select your local planning authority"
+                errorMsg="Local authority is required"
             />
-                {/* <select
-                    className="govuk-select"
-                    id="appealTypes"
-                    name="appealTypes"
-                    onChange={(e) => props.onChangeSelectLPA(e)}
-                >
-                    {" "}
-                    <option>Select...</option>
-                    {lpaOptions}
-                </select> */}
-            </div>
 
-            <div className="govuk-form-group">
-                <label className="govuk-label" htmlFor="sort">
-                    Select an appeal type
-                </label>
             <Field
                 name="appealTypes"
                 component={RenderAppealTypeList}
                 optionsObj={appealOptionsObj}
+                validate={[required]}
+                label="Select an appeal type"
+                errorMsg="Appeal type is required"
             />
-                {/* <select
+
-                    className="govuk-select"
-                    id="appealTypes"
-                    name="appealTypes"
-                    onChange={(e) => props.onChangeSelectAppealType(e)}
-                >
-                    <option>Select...</option>
-                    {appealOptions}
-                </select> */}
-            </div>
             <button
                 type="submit"
                 className="govuk-button"

pages/newappeal/[appealtypes].js

@@ -22,7 +22,7 @@ import {
     setCaseReference,
 } from "../../store/appealType/action";
 import { setForm, getFormObj } from "../../store/formData/action";
-import { getFormData, getAppealsTypes } from "../../actions";
+import { getFormData, getAppealsTypes, createCase } from "../../actions";
 
 import xpath from "xpath";
 import { reduxForm, FormName } from "redux-form";
@@ -40,9 +40,10 @@ let Home = (props) => {
     const { appealtypes } = router.query;
 
     useEffect(() => {
-        props.setFormTitle(formTitle);
+        //setFormTitle(formTitle);
-        props.setCaseReference(router.query.refno);
+        setCaseReference(router.query.refno);
-    }, []);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
     const formXML = props.formData.formData;
     const parser = new DOMParser();
     var doc = parser.parseFromString(formXML, "text/xml");
@@ -78,7 +79,7 @@ let Home = (props) => {
         (key) => optionsTitleObj[key] === appealtypes
     );
 
-    console.log(formTitle);
+    //console.log(formTitle);
 
     // crm api query for looking up picklist fields/drop downs
     // <url path to >/api/data/v8.2/EntityDefinitions(LogicalName='{appeal type form}')/Attributes(LogicalName='{drop down datafield name}')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)
@@ -110,13 +111,19 @@ let Home = (props) => {
             <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
+                <main
+                    className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+                    id="main-content"
+                    role="main"
+                >
                     <div className="govuk-width-container">
                         <Banner />
                         <Breadcrumbs slug={appealtypes} formTitle={formTitle} />
 
                         {props.appealType.currentSection == 9999 ? (
                             <CompleteAppeal />
-                    ) : props.appealType.currentSection == sectionCount + 1 ? (
+                        ) : props.appealType.currentSection ==
+                          sectionCount + 1 ? (
                             <BuildCheckSection
                                 formXML={formXML}
                                 sectionCount={sectionCount}
@@ -135,6 +142,7 @@ let Home = (props) => {
                             />
                         )}
                     </div>
+                </main>
                 <Footer footerLinks={footerLinks} />
             </div>
         </div>
@@ -144,14 +152,17 @@ let Home = (props) => {
 export const getServerSideProps = wrapper.getServerSideProps(
     (store) =>
         async ({ query, req, res }) => {
-            console.log("the query", query);
+            //console.log("the query", query);
             store.dispatch(setAppealTypeID(query.appealtypes));
             const appealTypeData = await getAppealsTypes();
             const formdata = (await getFormData(query.appealtypes)) || null;
 
+            const caseReference = createCase("asasa", "asasa");
+
             let xmlStr = formdata;
             xmlStr = formdata.value[0].formxml;
             xmlStr = xmlStr.replace(/\\"/g, "");
+            store.dispatch(setCaseReference(caseReference));
             store.dispatch(setForm(xmlStr));
             store.dispatch(setAppealType(appealTypeData));
         }

pages/newappeal/index.js

@@ -49,7 +49,11 @@ const Home = (props) => {
             <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
-
+                <main
+                    className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+                    id="main-content"
+                    role="main"
+                >
                     <div className="govuk-grid-row">
                         <div className="govuk-grid-column-full">
                             <div className="govuk-width-container">
@@ -64,7 +68,7 @@ const Home = (props) => {
                             </div>
                         </div>
                     </div>
-
+                </main>
                 <Footer footerLinks={footerLinks} />
             </div>
         </div>

pages/newappeal/selectappeal.js

@@ -68,7 +68,11 @@ const Home = (props) => {
             <div id="page_wrapper">
                 <CookieBanner />
                 <Header courseName={t("common:service-name")} />
-
+                <main
+                    className="govuk-main-wrapper govuk-main-wrapper--auto-spacing"
+                    id="main-content"
+                    role="main"
+                >
                     <div className="govuk-grid-row">
                         <div className="govuk-grid-column-full">
                             <div className="govuk-width-container">
@@ -106,7 +110,7 @@ const Home = (props) => {
                             </div>
                         </div>
                     </div>
-
+                </main>
                 <Footer footerLinks={footerLinks} />
             </div>
         </div>