passing a ref api through form and update progress

actions/index.js

@@ -196,10 +196,27 @@ export const getLPA = () => {
         });
 };
 
+function makeid(length) {
+    var result = "";
+    var characters =
+        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    var charactersLength = characters.length;
+    for (var i = 0; i < length; i++) {
+        result += characters.charAt(
+            Math.floor(Math.random() * charactersLength)
+        );
+    }
+    return result;
+}
+
 export const createCase = (lpaType, appealType) => {
     console.log();
 
-    return "CAS-00010-CK1N3S";
+    const lastPart = makeid(6);
+
+    const middlePart = Math.floor(100000 + Math.random() * 900000);
+
+    return "CAS-" + middlePart + "-" + lastPart.toUpperCase();
 };
 
 // var req = new XMLHttpRequest();
@@ -235,7 +252,6 @@ export const createCase = (lpaType, appealType) => {
 // };
 // req.send();
 
-
 // //jquery version to get case number from an lpa and an appeal type
 // var entity = {};
 // entity.caseorigincode = 3;
@@ -265,4 +281,4 @@ export const createCase = (lpaType, appealType) => {
 //     error: function(xhr, textStatus, errorThrown) {
 //         Xrm.Utility.alertDialog(textStatus + " " + errorThrown);
 //     }
-// });
+// });

components/elements/index.js

@@ -1,6 +1,10 @@
 import useSWR from "swr";
 import { Field, reduxForm } from "redux-form";
 import router from "next/router";
+import DatePicker from "react-datepicker";
+import React, { useState } from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import moment from "moment";
 
 export function Textfield(props) {
     const { name, label } = props;
@@ -51,6 +55,55 @@ export function MultiLinefield(props) {
     );
 }
 
+const RenderDatePicker = ({
+    datafieldname,
+    name,
+    label,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    return (
+        <>
+            <DatePicker
+                {...custom}
+                autoOk={true}
+                dateFormat="dd/MM/yyyy"
+                onChange={onChange}
+                selected={value || null}
+
+                // value={!value ? null : new Date(value)}
+            />
+
+            {touched && error && <span>{error}</span>}
+        </>
+    );
+};
+
+export function DateFieldPicker(props) {
+    const { name, label } = props;
+    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}
+                    id={props.name}
+                    component={RenderDatePicker}
+                />
+            </fieldset>
+        </div>
+    );
+}
+
 export function DateField(props) {
     const { name, label } = props;
 

components/newappeal/buildCheckfield.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 {
+    Textfield,
+    DateField,
+    DateFieldPicker,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+    DecimalField,
+} from "../elements";
+import moment from "moment";
+
+export default function BuildField(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { fieldType, label, datafieldname, fieldValue } = props;
+
+    const parser = new DOMParser();
+
+    const whichFieldType = (classid) => {
+        switch (classid) {
+            case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
+                return <>{fieldValue}</>;
+                break;
+            case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
+                return <>{fieldValue}</>;
+                break;
+            case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return <>{fieldValue}</>;
+                break;
+            case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
+                return <>{fieldValue}</>;
+                break;
+            case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
+                return (
+                    <>
+                        <span>hello</span>
+                    </>
+                );
+                break;
+            case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
+                return <>{fieldValue}</>;
+                break;
+            case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
+                return <>{fieldValue}</>;
+                break;
+            case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
+                return <>{fieldValue}</>;
+                break;
+            default:
+                return <>{fieldValue}</>;
+        }
+    };
+
+    return <>{whichFieldType(props.fieldType)}</>;
+}

components/newappeal/buildcheckrow.js

@@ -2,15 +2,27 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 import xpath from "xpath";
-import BuildField from "./buildfield";
+import BuildCheckField from "./buildCheckfield";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import {
+    setCaseReference,
+    setCurrentSection,
+    setFormComplete,
+} from "../../store/appealType/action";
 
-export default function BuildCheckRow(props) {
+let BuildCheckRow = (props) => {
     let { t } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
 
-    const { formXML, whichSection, sectionCount, onSubmit } = props;
+    const {
+        formXML,
+        whichSection,
+        sectionCount,
+        onSubmit,
+        updateCurrentSection,
+    } = props;
 
     const parser = new DOMParser();
     var doc = parser.parseFromString(props.formXML, "text/xml");
@@ -41,14 +53,36 @@ export default function BuildCheckRow(props) {
                             {rows[0].value}
                         </dt>
                         <dd className="govuk-summary-list__value">
-                            {
+                            {fieldtype[0].value ==
-                                props.props.form["appealForm"].values[
+                            "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
-                                    datafieldname[0].value
+                                ? props.props.form["appealForm"].values[
-                                ]
+                                      datafieldname[0].value
-                            }
+                                  ] != null
+                                    ? props.props.form["appealForm"].values[
+                                          datafieldname[0].value
+                                      ].getDate() +
+                                      "/" +
+                                      (props.props.form["appealForm"].values[
+                                          datafieldname[0].value
+                                      ].getMonth() +
+                                          1) +
+                                      "/" +
+                                      props.props.form["appealForm"].values[
+                                          datafieldname[0].value
+                                      ].getFullYear()
+                                    : ""
+                                : props.props.form["appealForm"].values[
+                                      datafieldname[0].value
+                                  ]}
                         </dd>
                         <dd className="govuk-summary-list__actions">
-                            <a className="govuk-link" href="#">
+                            <a
+                                className="govuk-link"
+                                href="#"
+                                onClick={() => {
+                                    updateCurrentSection(whichSection);
+                                }}
+                            >
                                 Change
                                 <span className="govuk-visually-hidden">
                                     {" "}
@@ -61,4 +95,19 @@ export default function BuildCheckRow(props) {
             })}
         </>
     );
-}
+};
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        updateCurrentSection: (whichSection) => {
+            dispatch(setCurrentSection(whichSection));
+            dispatch(setFormComplete("true"));
+        },
+    };
+};
+
+const mapStateToProps = (state) => ({
+    count: state.count,
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);

components/newappeal/buildchecksection.js

@@ -6,12 +6,15 @@ 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";
+import {
+    setCurrentSection,
+    setFormComplete,
+} from "../../store/appealType/action";
 
 let BuildCheckSection = (props) => {
-    // useEffect(() => {
+    useEffect(() => {
-    //     window.scrollTo(0, 0);
+        setFormComplete();
-    // });
+    }, []);
 
     let { t } = useTranslation();
 

components/newappeal/buildfield.js

@@ -5,6 +5,7 @@ import xpath from "xpath";
 import {
     Textfield,
     DateField,
+    DateFieldPicker,
     YesNofield,
     PickList,
     MultiLinefield,
@@ -58,7 +59,10 @@ export default function BuildField(props) {
                 break;
             case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
                 return (
-                    <DateField name={props.datafieldname} label={props.label} />
+                    <DateFieldPicker
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
                 );
                 break;
             case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":

components/newappeal/buildsection.js

@@ -30,6 +30,7 @@ let BuildSection = (props) => {
         formTitle,
         setCurrentSection,
         refno,
+        gotoSection,
     } = props;
 
     const currentSection = props.appealType.currentSection;
@@ -134,11 +135,29 @@ let BuildSection = (props) => {
                                     {Object.keys(titleList).map((key) =>
                                         parseInt(key) + 1 == currentSection ? (
                                             <li key={key}>
-                                                <b>{titleList[key].value}</b>
+                                                <b>{titleList[key].value} </b>
                                             </li>
                                         ) : (
                                             <li key={key}>
-                                                {titleList[key].value}
+                                                {props.appealType
+                                                    .formComplete == "true" ||
+                                                parseInt(key) + 1 <
+                                                    currentSection ? (
+                                                    <a
+                                                        className="govuk-link"
+                                                        href="#"
+                                                        onClick={() => {
+                                                            gotoSection(
+                                                                parseInt(key) +
+                                                                    1
+                                                            );
+                                                        }}
+                                                    >
+                                                        {titleList[key].value}
+                                                    </a>
+                                                ) : (
+                                                    titleList[key].value
+                                                )}
                                             </li>
                                         )
                                     )}
@@ -167,6 +186,9 @@ const mapDispatchToProps = (dispatch) => {
         setCurrentSection: (currentSection) => {
             dispatch(setCurrentSection(currentSection));
         },
+        gotoSection: (thisSection) => {
+            dispatch(setCurrentSection(thisSection));
+        },
     };
 };
 

package-lock.json

@@ -25,6 +25,7 @@
         "next-translate": "^1.0.7",
         "react": "17.0.2",
         "react-cookie-consent": "^6.2.4",
+        "react-datepicker": "^4.1.1",
         "react-dom": "17.0.2",
         "react-redux": "^7.2.4",
         "react-xml-parser": "^1.1.8",
@@ -497,6 +498,15 @@
         "@opentelemetry/api": "^1.0.1"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz",
@@ -2509,6 +2519,18 @@
         "node": ">= 6"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -7297,6 +7319,23 @@
         "react": "^16.13.1 || ^17.0.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.1.1.tgz",
+      "integrity": "sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.10.0",
+        "react-popper": "^2.2.5"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17",
+        "react-dom": "^16.9.0 || ^17"
+      }
+    },
     "node_modules/react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -7310,6 +7349,11 @@
         "react": "17.0.2"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "node_modules/react-i18next": {
       "version": "11.11.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.1.tgz",
@@ -7328,6 +7372,32 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz",
+      "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x"
+      }
+    },
+    "node_modules/react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17"
+      }
+    },
     "node_modules/react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
@@ -9073,6 +9143,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",
@@ -9854,6 +9932,11 @@
         "lodash.merge": "^4.6.2"
       }
     },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+    },
     "@rushstack/eslint-patch": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz",
@@ -11483,6 +11566,11 @@
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz",
       "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
     },
+    "date-fns": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
+    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -15171,6 +15259,19 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-datepicker": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.1.1.tgz",
+      "integrity": "sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw==",
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.10.0",
+        "react-popper": "^2.2.5"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -15181,6 +15282,11 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-i18next": {
       "version": "11.11.1",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.1.tgz",
@@ -15195,6 +15301,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-onclickoutside": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz",
+      "integrity": "sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==",
+      "requires": {}
+    },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-redux": {
       "version": "7.2.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
@@ -16536,6 +16657,14 @@
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
       "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",

package.json

@@ -19,12 +19,14 @@
     "jsonpath": "^1.1.1",
     "jsonpath-plus": "^5.1.0",
     "lodash": "^4.17.21",
+    "moment": "^2.29.1",
     "next": "^11.0.1",
     "next-i18next": "^8.5.1",
     "next-redux-wrapper": "^7.0.2",
     "next-translate": "^1.0.7",
     "react": "17.0.2",
     "react-cookie-consent": "^6.2.4",
+    "react-datepicker": "^4.1.1",
     "react-dom": "17.0.2",
     "react-redux": "^7.2.4",
     "react-xml-parser": "^1.1.8",
@@ -46,4 +48,4 @@
     "eslint-config-next": "^11.0.1",
     "prettier": "2.3.2"
   }
-}
+}

store/appealType/action.js

@@ -9,6 +9,7 @@ export const appealTypeDataActionTypes = {
     SETCURRENTSECTION: "SETCURRENTSECTION",
     SETAPPEALLPA: "SETAPPEALLPA",
     SETCASEREFERENCE: "SETCASEREFERENCE",
+    SETFORMCOMPLETE: "SETFORMCOMPLETE",
 };
 
 export const getAppealTypeObj = () => (dispatch) => {
@@ -56,3 +57,10 @@ export const setCaseReference = (caseReference) => (dispatch) => {
         caseReference: caseReference,
     });
 };
+
+export const setFormComplete = (formComplete) => (dispatch) => {
+    return dispatch({
+        type: appealTypeDataActionTypes.SETFORMCOMPLETE,
+        formComplete: formComplete,
+    });
+};

store/appealType/reducer.js

@@ -7,6 +7,7 @@ const appealTypeDataInitialState = {
     currentSection: 1,
     appealLPA: "",
     caseReference: "",
+    formComplete: "false",
 };
 
 export default function reducer(state = appealTypeDataInitialState, action) {
@@ -41,6 +42,11 @@ export default function reducer(state = appealTypeDataInitialState, action) {
                 ...state,
                 caseReference: action.caseReference,
             };
+        case appealTypeDataActionTypes.SETFORMCOMPLETE:
+            return {
+                ...state,
+                formComplete: action.formComplete,
+            };
         default:
             return state;
     }

styles/sass/welshgov/_application.scss

@@ -17,6 +17,7 @@ s .govuk-header-l,
 .govuk-select,
 .govuk-breadcrumbs__link,
 .govuk-fieldset__legend--s,
+.govuk-input,
 h1,
 h2,
 h3,
@@ -244,3 +245,25 @@ nav {
 .govuk-summary-list__key {
     width: 45%;
 }
+
+.react-datepicker__input-container input {
+    font-weight: 400;
+    font-size: 16px;
+    font-size: 1rem;
+    line-height: 1.25;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%;
+    height: 40px;
+    height: 2.5rem;
+    margin-top: 0;
+    padding: 5px;
+    border: 2px solid #0b0c0c;
+    border-radius: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    font-size: 19px;
+    border: 2px solid;
+    font-size: 1.1875rem;
+    line-height: 1.3157894737;
+}

yarn.lock

@@ -253,6 +253,11 @@
     "@opentelemetry/semantic-conventions" "0.23.0"
     lodash.merge "^4.6.2"
 
+"@popperjs/core@^2.9.2":
+  version "2.9.2"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@rushstack/eslint-patch@^1.0.6":
   version "1.0.6"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.0.6.tgz"
@@ -1209,7 +1214,7 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-classnames@2.2.6:
+classnames@2.2.6, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -1658,6 +1663,11 @@ data-uri-to-buffer@3.0.1:
   resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz"
   integrity sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==
 
+date-fns@^2.0.1:
+  version "2.22.1"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz"
+  integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==
+
 debug@2, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
@@ -3184,7 +3194,7 @@ jsonpath-plus@^5.1.0:
 
 jsonpath@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/jsonpath/-/jsonpath-1.1.1.tgz#0ca1ed8fb65bb3309248cc9d5466d12d5b0b9901"
+  resolved "https://registry.npmjs.org/jsonpath/-/jsonpath-1.1.1.tgz"
   integrity sha512-l6Cg7jRpixfbgoWgkrl77dgEj8RPvND0wMH6TwQmi9Qs4TFfS9u5cUFnbeKTwj5ga5Y3BTGGNI28k117LJ009w==
   dependencies:
     esprima "1.2.2"
@@ -3384,16 +3394,11 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.5, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.5, lodash@~4.17.10:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
@@ -3561,6 +3566,11 @@ minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   dependencies:
     minimist "^1.2.5"
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
@@ -4711,6 +4721,18 @@ react-cookie-consent@^6.2.4:
     js-cookie "^2.2.1"
     prop-types "^15.7.2"
 
+react-datepicker@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.1.1.tgz#5ecef49c672b2250fca26327c988464e6ba52b62"
+  integrity sha512-vtZIA7MbUrffRw1CHiyOGtmTO/tTdZGr5BYaiRucHMTb6rCqA8TkaQhzX6tTwMwP8vV38Khv4UWohrJbiX1rMw==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+    classnames "^2.2.6"
+    date-fns "^2.0.1"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.10.0"
+    react-popper "^2.2.5"
+
 react-dom@17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
@@ -4720,6 +4742,11 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-i18next@^11.8.13:
   version "11.11.1"
   resolved "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.1.tgz"
@@ -4738,6 +4765,19 @@ react-is@^16.13.1, react-is@^16.4.2, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-onclickoutside@^6.10.0:
+  version "6.11.2"
+  resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.11.2.tgz"
+  integrity sha512-640486eSwU/t5iD6yeTlefma8dI3bxPXD93hM9JGKyYITAd0P1JFkkcDeyHZRqNpY/fv1YW0Fad9BXr44OY8wQ==
+
+react-popper@^2.2.5:
+  version "2.2.5"
+  resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz"
+  integrity sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-redux@^7.2.4:
   version "7.2.4"
   resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz"
@@ -6008,6 +6048,13 @@ void-elements@3.1.0:
   resolved "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz"
   integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz"