Merged PR 373: Passing a Ref number through form & shows progress

Related work items: #5208
2021-07-20 15:47:51 +00:00
parent 0d9015d772 1e81f1c97e
commit 12d8faf91a
17 changed files with 552 additions and 41 deletions
@@ -196,6 +196,29 @@ 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();
+
+    const lastPart = makeid(6);
+
+    const middlePart = Math.floor(100000 + Math.random() * 900000);
+
+    return "CAS-" + middlePart + "-" + lastPart.toUpperCase();
+};
+
 // var req = new XMLHttpRequest();
 // req.open("GET", Xrm.Page.context.getClientUrl() + "/api/data/v8.2/incidents?$select=_accountid_value,_customerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title&$filter=contains(title, '000')&$count=true", true);
 // req.setRequestHeader("OData-MaxVersion", "4.0");
@@ -228,3 +251,34 @@ export const getLPA = () => {
 //     }
 // };
 // req.send();
+
+// //jquery version to get case number from an lpa and an appeal type
+// var entity = {};
+// entity.caseorigincode = 3;
+// entity["customerid_account@odata.bind"] = "/accounts(c75f6f84-49da-eb11-aabd-00224800d1bd)";
+// entity.pinswg_appealcasetype = 846040004;
+
+// $.ajax({
+//     type: "POST",
+//     contentType: "application/json; charset=utf-8",
+//     datatype: "json",
+//     url: Xrm.Page.context.getClientUrl() + "/api/data/v8.2/incidents",
+//     data: JSON.stringify(entity),
+//     beforeSend: function(XMLHttpRequest) {
+//         XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
+//         XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
+//         XMLHttpRequest.setRequestHeader("Accept", "application/json");
+//         XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\",return=representation");
+//     },
+//     async: true,
+//     success: function(data, textStatus, xhr) {
+//         var uri = xhr.getResponseHeader("OData-EntityId");
+//         var regExp = /\(([^)]+)\)/;
+//         var matches = regExp.exec(uri);
+//         var newEntityId = matches[1];
+//         //Handle returned attributes
+//     },
+//     error: function(xhr, textStatus, errorThrown) {
+//         Xrm.Utility.alertDialog(textStatus + " " + errorThrown);
+//     }
+// });
@@ -1,5 +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;
@@ -50,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;

@@ -293,19 +347,22 @@ export function DecimalField(props) {
    );
 }

-export function ReadOnlyfield(props) {
-    const { name, label } = props;
+const RenderCaseID = {};

+export function ReadOnlyfield(props) {
+    const { name, label, value } = props;
+    console.log(props.value.refno);
    return (
        <div className="govuk-form-group">
            <label className="govuk-label " htmlFor={props.name}>
                {props.label}
            </label>
-            <Field
+            <input
+                type="text"
                name={props.name}
                id={props.name}
-                component="input"
-                type="text"
+                component={RenderCaseID}
+                value={value}
                className="govuk-input  govuk-input--width-20"
                disabled
            />
@@ -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)}</>;
+}
@@ -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">
-                            {
-                                props.props.form["appealForm"].values[
-                                    datafieldname[0].value
-                                ]
-                            }
+                            {fieldtype[0].value ==
+                            "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
+                                ? 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);
@@ -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(() => {
-    //     window.scrollTo(0, 0);
-    // });
+    useEffect(() => {
+        setFormComplete();
+    }, []);

    let { t } = useTranslation();

@@ -5,6 +5,7 @@ import xpath from "xpath";
 import {
    Textfield,
    DateField,
+    DateFieldPicker,
    YesNofield,
    PickList,
    MultiLinefield,
@@ -30,6 +31,7 @@ export default function BuildField(props) {
                    <ReadOnlyfield
                        name={props.datafieldname}
                        label={props.label}
+                        value={props.props.props.appealType.caseReference}
                    />
                );
                break;
@@ -57,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}":
@@ -31,6 +31,7 @@ export default function BuildRow(props) {
                            label={rows[0].value}
                            datafieldname={datafieldname[0].value}
                            key={key}
+                            props={props}
                        />
                    );
                })}
@@ -6,7 +6,11 @@ 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";
+import {
+    setCaseReference,
+    setCurrentSection,
+} from "../../store/appealType/action";
+import { query } from "jsonpath";

 let BuildSection = (props) => {
    // useEffect(() => {
@@ -25,6 +29,8 @@ let BuildSection = (props) => {
        handleSubmit,
        formTitle,
        setCurrentSection,
+        refno,
+        gotoSection,
    } = props;

    const currentSection = props.appealType.currentSection;
@@ -50,8 +56,13 @@ let BuildSection = (props) => {

    const onHandleSubmit = (values) => {
        setCurrentSection(currentSection + 1);
+        setCaseReference(router.query.refno);
    };

+    // const initialValues = {
+    //     email: router.query.refno,
+    // };
+
    return (
        <div className="govuk-grid-row">
            <div className="govuk-grid-column-two-thirds">
@@ -64,6 +75,7 @@ let BuildSection = (props) => {
                        whichSection={props.whichSection}
                        sectionCount={props.sectionCount}
                        onSubmit={onSubmit}
+                        props={props}
                    />
                    {}
                    <div className="govuk-button-group">
@@ -123,10 +135,30 @@ 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>{titleList[key].value}</li>
+                                            <li key={key}>
+                                                {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>
                                        )
                                    )}
                                </ol>
@@ -154,6 +186,9 @@ const mapDispatchToProps = (dispatch) => {
        setCurrentSection: (currentSection) => {
            dispatch(setCurrentSection(currentSection));
        },
+        gotoSection: (thisSection) => {
+            dispatch(setCurrentSection(thisSection));
+        },
    };
 };

@@ -60,7 +60,7 @@ let CompleteAppeal = (props) => {
                    <div className="govuk-panel__body">
                        Your reference number
                        <br />
-                        <strong>CAS-00010-J9W6L5</strong>
+                        <strong>{props.appealType.caseReference}</strong>
                    </div>
                </div>

@@ -15,6 +15,8 @@ import {
    getAppealTypeObj,
 } from "../../store/appealType/action";

+import { createCase } from "../../actions";
+
 let CreateCase = (props) => {
    // useEffect(() => {
    //     window.scrollTo(0, 0);
@@ -100,9 +102,18 @@ let CreateCase = (props) => {

    const onHandleSubmit = (values) => {
        event.preventDefault();
-        router.replace("/newappeal/" + values.appealTypes, null, {
-            shallow: true,
-        });
+
+        console.log(createCase("asasa", "asasa"));
+
+        const caseReference = createCase("123123", "213132");
+
+        router.replace(
+            "/newappeal/" + values.appealTypes + "?refno=" + caseReference,
+            null,
+            {
+                shallow: true,
+            }
+        );
        console.log(values);
    };

@@ -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",
@@ -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"
  }
-}
+}
@@ -19,6 +19,7 @@ import {
    setAppealTypeTitle,
    setAppealTypeID,
    getAppealTypeObj,
+    setCaseReference,
 } from "../../store/appealType/action";
 import { setForm, getFormObj } from "../../store/formData/action";
 import { getFormData, getAppealsTypes } from "../../actions";
@@ -31,10 +32,6 @@ import BuildCheckSection from "../../components/newappeal/buildchecksection";
 import CompleteAppeal from "../../components/newappeal/complete";

 let Home = (props) => {
-    useEffect(() => {
-        props.setFormTitle(formTitle);
-    }, []);
-
    const { footerLinks, pages, formData } = props;
    let { t, lang } = useTranslation();

@@ -42,6 +39,10 @@ let Home = (props) => {
    const { locale } = router;
    const { appealtypes } = router.query;

+    useEffect(() => {
+        props.setFormTitle(formTitle);
+        props.setCaseReference(router.query.refno);
+    }, []);
    const formXML = props.formData.formData;
    const parser = new DOMParser();
    var doc = parser.parseFromString(formXML, "text/xml");
@@ -171,6 +172,9 @@ const mapDispatchToProps = (dispatch) => {
        setFormTitle: (title) => {
            dispatch(setAppealTypeTitle(title));
        },
+        setCaseReference: (refno) => {
+            dispatch(setCaseReference(refno));
+        },
    };
 };

@@ -8,6 +8,8 @@ export const appealTypeDataActionTypes = {
    UPDATEAPPEALTYPEDATA: "UPDATEAPPEALTYPEDATA",
    SETCURRENTSECTION: "SETCURRENTSECTION",
    SETAPPEALLPA: "SETAPPEALLPA",
+    SETCASEREFERENCE: "SETCASEREFERENCE",
+    SETFORMCOMPLETE: "SETFORMCOMPLETE",
 };

 export const getAppealTypeObj = () => (dispatch) => {
@@ -48,3 +50,17 @@ export const setAppealLPA = (appealLPA) => (dispatch) => {
        appealLPA: appealLPA,
    });
 };
+
+export const setCaseReference = (caseReference) => (dispatch) => {
+    return dispatch({
+        type: appealTypeDataActionTypes.SETCASEREFERENCE,
+        caseReference: caseReference,
+    });
+};
+
+export const setFormComplete = (formComplete) => (dispatch) => {
+    return dispatch({
+        type: appealTypeDataActionTypes.SETFORMCOMPLETE,
+        formComplete: formComplete,
+    });
+};
@@ -6,6 +6,8 @@ const appealTypeDataInitialState = {
    appealTypeID: {},
    currentSection: 1,
    appealLPA: "",
+    caseReference: "",
+    formComplete: "false",
 };

 export default function reducer(state = appealTypeDataInitialState, action) {
@@ -35,7 +37,16 @@ export default function reducer(state = appealTypeDataInitialState, action) {
                ...state,
                appealLPA: action.appealLPA,
            };
-
+        case appealTypeDataActionTypes.SETCASEREFERENCE:
+            return {
+                ...state,
+                caseReference: action.caseReference,
+            };
+        case appealTypeDataActionTypes.SETFORMCOMPLETE:
+            return {
+                ...state,
+                formComplete: action.formComplete,
+            };
        default:
            return state;
    }
@@ -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;
+}
@@ -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"