From 878940a6d571073e8e10d304d0691363ce8f2cda Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Thu, 8 Jul 2021 16:22:12 +0100
Subject: [PATCH] initial dynamic forms

---
 actions/index.js                              |  36 ++-
 components/breadcrumbs.js                     |  25 +-
 components/elements/index.js                  | 252 ++++++++++++++++++
 components/newappeal/advertapplication.js     |   2 +-
 components/newappeal/buildfield.js            |  95 +++++++
 components/newappeal/buildrow.js              |  39 +++
 components/newappeal/buildsection.js          |  52 ++++
 components/newappeal/enforcementnotice.js     |   2 +-
 components/newappeal/ldc.js                   |   2 +-
 components/newappeal/planningappeal.js        |   2 +-
 locales/cy/common.json                        |   2 +-
 locales/cy/myportal.json                      |   4 +-
 locales/en/common.json                        |   2 +-
 .../{pins_dns.js => pinswg_dns.js}            |   0
 .../{pins_row.js => pinswg_row.js}            |   0
 pages/myportal/index.js                       |   2 +
 .../planningappeals78.js => [appealtypes].js} |  48 ++--
 pages/newappeal/index.js                      |   2 +
 pages/newappeal/selectappeal.js               | 127 +++++++++
 pages/searchresults.js                        |  32 ++-
 .../javascript/govuk-frontend-3.13.0.min.js   |   1 +
 store/appealType/action.js                    |  18 ++
 store/appealType/reducer.js                   |  16 ++
 store/store.js                                |   4 +-
 styles/sass/welshgov/_application.scss        |   4 +-
 25 files changed, 709 insertions(+), 60 deletions(-)
 create mode 100644 components/elements/index.js
 create mode 100644 components/newappeal/buildfield.js
 create mode 100644 components/newappeal/buildrow.js
 create mode 100644 components/newappeal/buildsection.js
 rename pages/api/appealforms/{pins_dns.js => pinswg_dns.js} (100%)
 rename pages/api/appealforms/{pins_row.js => pinswg_row.js} (100%)
 rename pages/newappeal/{appealtypes/planningappeals78.js => [appealtypes].js} (75%)
 create mode 100644 pages/newappeal/selectappeal.js
 create mode 100644 public/assets/javascript/govuk-frontend-3.13.0.min.js
 create mode 100644 store/appealType/action.js
 create mode 100644 store/appealType/reducer.js

diff --git a/actions/index.js b/actions/index.js
index b1ba846f..0b32ddd4 100644
--- a/actions/index.js
+++ b/actions/index.js
@@ -43,16 +43,32 @@ export const getBasicSearch = (searchString) => {
 export const getFormData = (whichForm) => {
     console.log("got to axios", whichForm);
 
-    return axios 
-        .get("http://localhost:3000/api/appealforms/pinswg_dns", {
-        //.get("http://localhost:3000/api/appealforms/pinswg_planningobligationappeals106", {
-        //.get("http://localhost:3000/api/appealforms/pinswg_planningconditionss73s79", {
-        //.get("http://localhost:3000/api/appealforms/pinswg_row", {
-        //.get("http://localhost:3000/api/appealforms/pinswg_transportandworkact", {
-        //.get("http://localhost:3000/api/appealforms/pinswg_harbourrevisionorder", {
-        //.get("http://localhost:3000/api/appealforms/pinswg_planningappeals78", {
-        //.get("http://localhost:3000/api/appealforms/pinswg_householderappealhas", {
-        httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+    return (
+        axios
+            //.get("http://localhost:3000/api/appealforms/pinswg_dns", {
+            //.get("http://localhost:3000/api/appealforms/pinswg_planningobligationappeals106", {
+            //.get("http://localhost:3000/api/appealforms/pinswg_planningconditionss73s79", {
+            //.get("http://localhost:3000/api/appealforms/pinswg_row", {
+            //.get("http://localhost:3000/api/appealforms/pinswg_transportandworkact", {
+            //.get("http://localhost:3000/api/appealforms/pinswg_harbourrevisionorder", {
+            //.get("http://localhost:3000/api/appealforms/pinswg_planningappeals78", {
+            //.get(http://localhost:3000/api/appealforms/pinswg_householderappealhas", {
+            .get("http://localhost:3000/api/appealforms/pinswg_" + whichForm, {
+                httpsAgent: new https.Agent({ rejectUnauthorized: false }),
+            })
+            .then((res) => res.data)
+            .catch((error) => {
+                console.log("thiserror", error);
+            })
+    );
+};
+
+export const getAppealsTypes = () => {
+    console.log("got to axios: appeal types");
+
+    return axios
+        .get("http://localhost:3000/api/lookups/pinswg_appealcasetype", {
+            httpsAgent: new https.Agent({ rejectUnauthorized: false }),
         })
         .then((res) => res.data)
         .catch((error) => {
diff --git a/components/breadcrumbs.js b/components/breadcrumbs.js
index c85aef7e..6192d47e 100644
--- a/components/breadcrumbs.js
+++ b/components/breadcrumbs.js
@@ -2,6 +2,7 @@ import Link from "next/link";
 import jsonpath from "jsonpath";
 import _ from "lodash";
 import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
 
 const Breadcrumbs = (props) => {
     const {
@@ -14,11 +15,13 @@ const Breadcrumbs = (props) => {
         applicant_ref,
     } = props;
     const router = useRouter();
-    const { course, section } = router.query;
+    const { appealType, section } = router.query;
+
+    let { t } = useTranslation();
 
     function Breadcrumb() {
         if (slug) {
-            var coursePageURL = course + "/" + slug;
+            var coursePageURL = appealType + "/" + slug;
             if (_.isEmpty(courseContent)) {
                 return null;
             } else {
@@ -43,37 +46,37 @@ const Breadcrumbs = (props) => {
 
     return (
         <nav
-            aria-label={"Breadcrumb for " + _.startCase(_.toLower(course))}
+            aria-label={"Breadcrumb for " + _.startCase(_.toLower(appealType))}
             role="navigation"
             data-module="track-click"
         >
             <div className="govuk-breadcrumbs ">
                 <ol className="govuk-breadcrumbs__list">
                     <li className="govuk-breadcrumbs__list-item">
-                        <Link href="http://www.gov.uk">
-                            <a className="govuk-breadcrumbs__link">GOV.UK</a>
+                        <Link href="http://www.gov.wales">
+                            <a className="govuk-breadcrumbs__link">GOV.WALES</a>
                         </Link>
                     </li>
                     <li className="govuk-breadcrumbs__list-item">
                         <Link href="/">
                             <a className="govuk-breadcrumbs__link">
-                                Appeals Casework Portal
+                                {t("common:service-name")}
                             </a>
                         </Link>
                     </li>
                     <li className="govuk-breadcrumbs__list-item">
-                        <Link href="/portal">
+                        <Link href="/myportal">
                             <a className="govuk-breadcrumbs__link">
-                                Find the right training
+                                {t("myportal:page-title")}
                             </a>
                         </Link>
                     </li>
-                    {!_.isEmpty(course) ? (
+                    {!_.isEmpty(appealType) ? (
                         <li className="govuk-breadcrumbs__list-item">
                             <Link
                                 href={
                                     "/" +
-                                    course +
+                                    appealType +
                                     "?id=" +
                                     applicant_id +
                                     "&refno=" +
@@ -83,7 +86,7 @@ const Breadcrumbs = (props) => {
                                 }
                             >
                                 <a className="govuk-breadcrumbs__link">
-                                    {_.startCase(_.toLower(course))}
+                                    {_.startCase(_.toLower(appealType))}
                                 </a>
                             </Link>
                         </li>
diff --git a/components/elements/index.js b/components/elements/index.js
new file mode 100644
index 00000000..2b1a5062
--- /dev/null
+++ b/components/elements/index.js
@@ -0,0 +1,252 @@
+export function Textfield(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label govuk-label--m " htmlFor="event-name">
+                {props.label}
+            </label>
+
+            <input
+                className="govuk-input  govuk-input--width-20"
+                id="event-name"
+                name={props.name}
+                type="text"
+            />
+        </div>
+    );
+}
+
+export function MultiLinefield(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <h1 className="govuk-label-wrapper">
+                <label
+                    className="govuk-label govuk-label--l"
+                    htmlFor="more-detail"
+                >
+                    {props.label}
+                </label>
+            </h1>
+            <div id="more-detail-hint" className="govuk-hint">
+                Do not include personal or financial information, like your
+                National Insurance number or credit card details.
+            </div>
+            <textarea
+                className="govuk-textarea"
+                id="more-detail"
+                name="more-detail"
+                rows="5"
+                aria-describedby="more-detail-hint"
+            ></textarea>
+        </div>
+    );
+}
+
+export function DateField(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">
+                    <label className="govuk-fieldset__heading">
+                        {props.label}
+                    </label>
+                </legend>
+                <div id="dob-hint" className="govuk-hint">
+                    For example, 31 3 1980
+                </div>
+                <div className="govuk-date-input" id="dob">
+                    <div className="govuk-date-input__item">
+                        <div className="govuk-form-group">
+                            <label
+                                className="govuk-label govuk-date-input__label"
+                                htmlFor="dob-day"
+                            >
+                                Day
+                            </label>
+                            <input
+                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                id="dob-day"
+                                name="dob-day"
+                                type="text"
+                                autoComplete="bday-day"
+                                pattern="[0-9]*"
+                                inputMode="numeric"
+                            />
+                        </div>
+                    </div>
+                    <div className="govuk-date-input__item">
+                        <div className="govuk-form-group">
+                            <label
+                                className="govuk-label govuk-date-input__label"
+                                htmlFor="dob-month"
+                            >
+                                Month
+                            </label>
+                            <input
+                                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                                id="dob-month"
+                                name="dob-month"
+                                type="text"
+                                autoComplete="bday-month"
+                                pattern="[0-9]*"
+                                inputMode="numeric"
+                            />
+                        </div>
+                    </div>
+                    <div className="govuk-date-input__item">
+                        <div className="govuk-form-group">
+                            <label
+                                className="govuk-label govuk-date-input__label"
+                                htmlFor="dob-year"
+                            >
+                                Year
+                            </label>
+                            <input
+                                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                                id="dob-year"
+                                name="dob-year"
+                                type="text"
+                                autoComplete="bday-year"
+                                pattern="[0-9]*"
+                                inputMode="numeric"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+    );
+}
+
+export function YesNofield(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <fieldset
+                className="govuk-fieldset"
+                aria-describedby="changed-name-hint"
+            >
+                <legend className="govuk-fieldset__legend govuk-fieldset__legend--s">
+                    <label className="govuk-fieldset__heading">
+                        {props.label}
+                    </label>
+                </legend>
+                <div id="changed-name-hint" className="govuk-hint">
+                    This includes changing your last name or spelling your name
+                    differently.
+                </div>
+                <div className="govuk-radios govuk-radios--inline">
+                    <div className="govuk-radios__item">
+                        <input
+                            className="govuk-radios__input"
+                            id="changed-name"
+                            name="changed-name"
+                            type="radio"
+                            value="yes"
+                        />
+                        <label
+                            className="govuk-label govuk-radios__label"
+                            htmlFor="changed-name"
+                        >
+                            Yes
+                        </label>
+                    </div>
+                    <div className="govuk-radios__item">
+                        <input
+                            className="govuk-radios__input"
+                            id="changed-name-2"
+                            name="changed-name"
+                            type="radio"
+                            value="no"
+                        />
+                        <label
+                            className="govuk-label govuk-radios__label"
+                            htmlFor="changed-name-2"
+                        >
+                            No
+                        </label>
+                    </div>
+                </div>
+            </fieldset>
+        </div>
+    );
+}
+
+export function PickList(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label govuk-body-m" htmlFor="sort">
+                {props.label}
+            </label>
+            <select className="govuk-select" id="sort" name="sort">
+                <option value="published">Recently published</option>
+                <option value="updated" defaultValue>
+                    Recently updated
+                </option>
+                <option value="views">Most views</option>
+                <option value="comments">Most comments</option>
+            </select>
+        </div>
+    );
+}
+
+export function NumericField(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label
+                className="govuk-label govuk-label--m"
+                htmlFor="account-number"
+            >
+                {props.label}
+            </label>
+
+            <div id="account-number-hint" className="govuk-hint">
+                Must be between 6 and 8 digits long
+            </div>
+            <input
+                className="govuk-input govuk-input--width-10"
+                id="account-number"
+                name="account-number"
+                type="text"
+                spellCheck="false"
+                aria-describedby="account-number-hint"
+                pattern="[0-9]*"
+                inputMode="numeric"
+            />
+        </div>
+    );
+}
+
+export function ReadOnlyfield(props) {
+    const { name, label } = props;
+
+    return (
+        <div className="govuk-form-group">
+            <label className="govuk-label govuk-label--m " htmlFor="event-name">
+                {props.label}
+            </label>
+
+            <input
+                className="govuk-input  govuk-input--width-20"
+                id="event-name"
+                name={props.name}
+                type="text"
+                disabled
+            />
+        </div>
+    );
+}
diff --git a/components/newappeal/advertapplication.js b/components/newappeal/advertapplication.js
index 3ecbabb8..c278235b 100644
--- a/components/newappeal/advertapplication.js
+++ b/components/newappeal/advertapplication.js
@@ -15,7 +15,7 @@ export default function MakeAdvertApplication() {
                     discontinuance notice.
                 </p>
                 <div className="appealCTA">
-                    <Link href="/newappeal">
+                    <Link href="/newappeal/selectappeal">
                         <a className="govuk-button">
                             An advert application/Discontinuance Notice (DN)
                         </a>
diff --git a/components/newappeal/buildfield.js b/components/newappeal/buildfield.js
new file mode 100644
index 00000000..9626a762
--- /dev/null
+++ b/components/newappeal/buildfield.js
@@ -0,0 +1,95 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import {
+    Textfield,
+    DateField,
+    YesNofield,
+    PickList,
+    MultiLinefield,
+    NumericField,
+    ReadOnlyfield,
+} from "../elements";
+
+export default function BuildField(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { fieldType, label, datafieldname } = props;
+
+    const parser = new DOMParser();
+
+    const whichFieldType = (classid) => {
+        switch (classid) {
+            case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
+                return (
+                    <ReadOnlyfield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
+                return (
+                    <PickList
+                        name={props.datafieldname}
+                        label={props.label}
+                        datafieldname={props.datafieldname}
+                    />
+                );
+                break;
+            case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return (
+                    <YesNofield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
+                return (
+                    <Textfield name={props.datafieldname} label={props.label} />
+                );
+                break;
+            case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
+                return (
+                    <DateField name={props.datafieldname} label={props.label} />
+                );
+                break;
+            case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
+                return (
+                    <MultiLinefield
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
+                return (
+                    <NumericField
+                        name={props.datafieldname}
+                        label={props.label}
+                    />
+                );
+                break;
+            case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
+                return " decimal";
+                break;
+            default:
+                return (
+                    <Textfield name={props.datafieldname} label={props.label} />
+                );
+        }
+    };
+
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-full">
+                {whichFieldType(props.fieldType)}
+            </div>
+        </div>
+    );
+}
diff --git a/components/newappeal/buildrow.js b/components/newappeal/buildrow.js
new file mode 100644
index 00000000..95b5a435
--- /dev/null
+++ b/components/newappeal/buildrow.js
@@ -0,0 +1,39 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import BuildField from "./buildfield";
+
+export default function BuildRow(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { rowXML, whichSection, sectionCount } = 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(
+                        rowXML[key].outerHTML,
+                        "text/xml"
+                    );
+                    var rows = xpath.select("//label/@description", doc);
+                    var fieldtype = xpath.select("//@classid", doc);
+                    var datafieldname = xpath.select("//@datafieldname", doc);
+                    return (
+                        <BuildField
+                            fieldType={fieldtype[0].value}
+                            label={rows[0].value}
+                            datafieldname={datafieldname[0].value}
+                        />
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js
new file mode 100644
index 00000000..b9708a06
--- /dev/null
+++ b/components/newappeal/buildsection.js
@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import xpath from "xpath";
+import BuildRow from "./buildrow";
+
+export default function BuildSection(props) {
+    let { t } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+
+    const { formXML, whichSection, sectionCount } = props;
+
+    const parser = new DOMParser();
+    var doc = parser.parseFromString(props.formXML, "text/xml");
+    var titles = xpath.select(
+        "//form/tabs/tab[" +
+            (parseInt(whichSection) + 1) +
+            " ]/labels/label/@description",
+        doc
+    );
+    var rowXML = xpath.select(
+        "/form/tabs/tab[" +
+            (parseInt(whichSection) + 1) +
+            "]/columns//sections/section/rows/row",
+        doc
+    );
+    return (
+        <div className="govuk-grid-row">
+            <div className="govuk-grid-column-full">
+                <h2>
+                    {props.whichSection} - {titles[0].value}{" "}
+                </h2>
+                <BuildRow
+                    rowXML={rowXML}
+                    whichSection={props.whichSection}
+                    sectionCount={props.sectionCount}
+                />
+                <button
+                    type="submit"
+                    role="button"
+                    draggable="false"
+                    class="govuk-button"
+                    data-module="govuk-button"
+                >
+                    Continue
+                </button>
+            </div>
+        </div>
+    );
+}
diff --git a/components/newappeal/enforcementnotice.js b/components/newappeal/enforcementnotice.js
index f87d56ed..ca00f199 100644
--- a/components/newappeal/enforcementnotice.js
+++ b/components/newappeal/enforcementnotice.js
@@ -14,7 +14,7 @@ export default function MakeEnforcementNotice() {
                     Including an enforcement listed building notice.
                 </p>
                 <div className="appealCTA">
-                    <Link href="/newappeal">
+                    <Link href="/newappeal/selectappeal">
                         <a className="govuk-button">A enforcement notice</a>
                     </Link>
                 </div>
diff --git a/components/newappeal/ldc.js b/components/newappeal/ldc.js
index 860db141..e73db489 100644
--- a/components/newappeal/ldc.js
+++ b/components/newappeal/ldc.js
@@ -15,7 +15,7 @@ export default function MakeLDC() {
                     lawful use or development.
                 </p>
                 <div className="appealCTA">
-                    <Link href="/newappeal">
+                    <Link href="/newappeal/selectappeal">
                         <a className="govuk-button">
                             A Lawful Development Certificate (LDC)
                         </a>
diff --git a/components/newappeal/planningappeal.js b/components/newappeal/planningappeal.js
index 39c04256..08c0cf53 100644
--- a/components/newappeal/planningappeal.js
+++ b/components/newappeal/planningappeal.js
@@ -16,7 +16,7 @@ export default function MakeNewAppeal() {
                     building (LB) applications.
                 </p>
                 <div className="appealCTA">
-                    <Link href="./newappeal/appealtypes/planningappeals78">
+                    <Link href="./newappeal/selectappeal">
                         <a className="govuk-button">A planning application</a>
                     </Link>
                 </div>
diff --git a/locales/cy/common.json b/locales/cy/common.json
index 01706ac9..827b5ba6 100644
--- a/locales/cy/common.json
+++ b/locales/cy/common.json
@@ -1,5 +1,5 @@
 {
-  "service-name": "Penderfyniadau Cynllunio ac Amgylchedd Cymru",
+  "service-name": "Porth Gwaith Achos Apeliadau",
   "breadcrumb-back-link": "Yn ôl",
   "error-radio": "Dewiswch opsiwn",
   "error-checkbox": "Enter a value",
diff --git a/locales/cy/myportal.json b/locales/cy/myportal.json
index 98ee9ed7..d826927d 100644
--- a/locales/cy/myportal.json
+++ b/locales/cy/myportal.json
@@ -1,6 +1,6 @@
-{   
+{
     "viewall-link": "Gweld y cyfan",
-    "page-title": "My Portal",
+    "page-title": "Fy mhorth",
     "makenewappeal-card-title": "Gwneud apêl newydd",
     "makenewappeal-card-paragraph-one": "Cyn cyflwyno apêl newydd, sicrhewch eich bod wedi darllen yr holl ganllawiau sy'n",
     "makenewappeal-card-link": "berthnasol i'r math o apêl sydd gennych.",
diff --git a/locales/en/common.json b/locales/en/common.json
index 08cb64e4..5af05bb9 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -1,5 +1,5 @@
 {
-  "service-name": "Planning & Environment Decisions Wales",
+  "service-name": "Appeals Casework Portal",
   "breadcrumb-back-link": "Back",
   "error-radio": "Choose an option",
   "error-checkbox": "Choose an option",
diff --git a/pages/api/appealforms/pins_dns.js b/pages/api/appealforms/pinswg_dns.js
similarity index 100%
rename from pages/api/appealforms/pins_dns.js
rename to pages/api/appealforms/pinswg_dns.js
diff --git a/pages/api/appealforms/pins_row.js b/pages/api/appealforms/pinswg_row.js
similarity index 100%
rename from pages/api/appealforms/pins_row.js
rename to pages/api/appealforms/pinswg_row.js
diff --git a/pages/myportal/index.js b/pages/myportal/index.js
index 3ef83147..df7b2d22 100644
--- a/pages/myportal/index.js
+++ b/pages/myportal/index.js
@@ -20,6 +20,7 @@ const Home = (props) => {
 
     const router = useRouter();
     const { locale } = router;
+    const { appealtypes } = router.query;
 
     return (
         <div>
@@ -33,6 +34,7 @@ const Home = (props) => {
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
                     <Banner />
+                    <Breadcrumbs slug={appealtypes} />
                     <MyPortal />
                 </div>
                 <Footer footerLinks={footerLinks} />
diff --git a/pages/newappeal/appealtypes/planningappeals78.js b/pages/newappeal/[appealtypes].js
similarity index 75%
rename from pages/newappeal/appealtypes/planningappeals78.js
rename to pages/newappeal/[appealtypes].js
index ac683238..cfb25920 100644
--- a/pages/newappeal/appealtypes/planningappeals78.js
+++ b/pages/newappeal/[appealtypes].js
@@ -1,28 +1,31 @@
 import _ from "lodash";
 import Head from "next/head";
-import Header from "../../../components/header";
-import Banner from "../../../components/banner";
-import CookieBanner from "../../../components/cookieBanner";
-import Breadcrumbs from "../../../components/breadcrumbs";
-import Footer from "../../../components/footer";
-import Errorpage from "../../../components/errorpage";
-import styles from "../../../styles/Home.module.css";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import Footer from "../../components/footer";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
 import { useSelector, shallowEqual, connect } from "react-redux";
-import { wrapper } from "../../../store/store";
+import { wrapper } from "../../store/store";
 import Cookies from "cookies";
 import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
-import { setForm, getFormObj } from "../../../store/formData/action";
-import { getFormData } from "../../../actions";
+import { setForm, getFormObj } from "../../store/formData/action";
+import { getFormData } from "../../actions";
 import xpath from "xpath";
 
+import BuildSection from "../../components/newappeal/buildsection";
+
 const Home = (props) => {
     const { footerLinks, pages, formData } = props;
     let { t, lang } = useTranslation();
 
     const router = useRouter();
     const { locale } = router;
+    const { appealtypes } = router.query;
 
     const formXML = props.formData.formData;
     const parser = new DOMParser();
@@ -31,6 +34,11 @@ const Home = (props) => {
         "//form/tabs/tab[*]/labels/label[@description]/@description",
         doc
     );
+    var sectionCount = xpath.select("/form/tabs/tab[*]", doc);
+    sectionCount = sectionCount.length;
+
+    var tabs = xpath.select("//form/tabs/tab[*]", doc);
+
     // 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)
     // eg https://devcrm2016.llcdt.gov.wales/DVPINS/api/data/v8.2/EntityDefinitions(LogicalName='pinswg_householderappealhas')/Attributes(LogicalName='pinswg_casetype')/Microsoft.Dynamics.CRM.PicklistAttributeMetadata?$select=LogicalName&$expand=GlobalOptionSet($select=Options)
@@ -46,12 +54,17 @@ const Home = (props) => {
     //      C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F - numeric field
     //      C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E - decimal
 
+    /// to get dropdowns names
+    //  form/tabs/tab[*]//rows/row//control[@classid="{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"]/@datafieldname
+
     console.log(titles);
 
-    const SectionTitles = Object.keys(titles).map((key, index) => (
-        <h2>
-            {titles[key].value} - {index}
-        </h2>
+    const Sections = Object.keys(tabs).map((key, index) => (
+        <BuildSection
+            formXML={formXML}
+            whichSection={key}
+            sectionCount={sectionCount}
+        />
     ));
 
     return (
@@ -66,7 +79,8 @@ const Home = (props) => {
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
                     <Banner />
-                    {SectionTitles}
+                    <Breadcrumbs slug={appealtypes} />
+                    {Sections}
                 </div>
                 <Footer footerLinks={footerLinks} />
             </div>
@@ -77,7 +91,8 @@ const Home = (props) => {
 export const getServerSideProps = wrapper.getServerSideProps(
     (store) =>
         async ({ query, req, res }) => {
-            const formdata = (await getFormData()) || null;
+            console.log("the query", query);
+            const formdata = (await getFormData(query.appealtypes)) || null;
             let xmlStr = formdata;
             xmlStr = formdata.value[0].formxml;
             xmlStr = xmlStr.replace(/\\"/g, "");
@@ -112,6 +127,7 @@ const mapStateToProps = (state) => {
         search: state.search,
         searchResultsObj: state.searchResultsObj,
         formData: state.formData,
+        appealType: state.appealType,
     };
 };
 
diff --git a/pages/newappeal/index.js b/pages/newappeal/index.js
index 0c8acad3..17e026c8 100644
--- a/pages/newappeal/index.js
+++ b/pages/newappeal/index.js
@@ -20,6 +20,7 @@ const Home = (props) => {
 
     const router = useRouter();
     const { locale } = router;
+    const { appealtypes } = router.query;
 
     return (
         <div>
@@ -33,6 +34,7 @@ const Home = (props) => {
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
                     <Banner />
+                    <Breadcrumbs slug={appealtypes} />
                     <NewAppeal />
                 </div>
                 <Footer footerLinks={footerLinks} />
diff --git a/pages/newappeal/selectappeal.js b/pages/newappeal/selectappeal.js
new file mode 100644
index 00000000..564db33a
--- /dev/null
+++ b/pages/newappeal/selectappeal.js
@@ -0,0 +1,127 @@
+import _ from "lodash";
+import Head from "next/head";
+import Header from "../../components/header";
+import Banner from "../../components/banner";
+import CookieBanner from "../../components/cookieBanner";
+import Breadcrumbs from "../../components/breadcrumbs";
+import Footer from "../../components/footer";
+import Errorpage from "../../components/errorpage";
+import styles from "../../styles/Home.module.css";
+import { useSelector, shallowEqual, connect } from "react-redux";
+import { wrapper } from "../../store/store";
+import Cookies from "cookies";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import useTranslation from "next-translate/useTranslation";
+
+import { setAppealType, gtAppealTypeObj } from "../../store/appealType/action";
+import { getAppealsTypes } from "../../actions";
+import xpath from "xpath";
+
+const Home = (props) => {
+    const { footerLinks, pages, formData } = props;
+    let { t, lang } = useTranslation();
+
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const { appealType } = props;
+
+    const optionsObj = props.appealType.appealType.GlobalOptionSet.Options;
+
+    const appealOptions = Object.keys(optionsObj).map((key, index) => (
+        <option
+            value={optionsObj[key].Label.LocalizedLabels[0].Label.replace(
+                /[\s\-\+\(\)\,]/g,
+                ""
+            ).toLowerCase()}
+        >
+            {optionsObj[key].Label.LocalizedLabels[0].Label}
+        </option>
+    ));
+
+    const [appealTypeSelect, setAppealTypeSelect] = useState("");
+    const handleParam = (setValue) => (e) => setValue(e.target.value);
+
+    const selectAppealType = (event) => {
+        event.preventDefault();
+        console.log(appealTypeSelect);
+        // /searchresults
+
+        router.push({
+            pathname: "/newappeal/" + appealTypeSelect,
+        });
+    };
+
+    return (
+        <div>
+            <Head>
+                <title>
+                    {t("search:page-title")} - {t("common:service-name")}
+                </title>
+            </Head>
+            <div id="page_wrapper">
+                <CookieBanner />
+                <Header courseName={t("common:service-name")} />
+
+                <div className="govuk-grid-row">
+                    <div className="govuk-grid-column-full">
+                        <div className="govuk-width-container">
+                            <Banner />
+                            <Breadcrumbs slug={appealtypes} />
+
+                            <h1>New Appeal</h1>
+
+                            <form onSubmit={selectAppealType}>
+                                <div class="govuk-form-group">
+                                    <label class="govuk-label" for="sort">
+                                        Select an appeal Type
+                                    </label>
+                                    <select
+                                        class="govuk-select"
+                                        id="appealTypes"
+                                        name="appealTypes"
+                                        onChange={handleParam(
+                                            setAppealTypeSelect
+                                        )}
+                                    >
+                                        {appealOptions}
+                                    </select>
+                                </div>
+                                <button
+                                    class="govuk-button"
+                                    data-module="govuk-button"
+                                >
+                                    Continue
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+                <Footer footerLinks={footerLinks} />
+            </div>
+        </div>
+    );
+};
+
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            const appealTypeData = (await getAppealsTypes()) || null;
+            console.log("appeal types", appealTypeData);
+            store.dispatch(setAppealType(appealTypeData));
+        }
+);
+
+const mapStateToProps = (state) => {
+    return {
+        search: state.search,
+        searchResultsObj: state.searchResultsObj,
+        formData: state.formData,
+        appealType: state.appealType,
+    };
+};
+
+export default connect(mapStateToProps)(Home);
diff --git a/pages/searchresults.js b/pages/searchresults.js
index 9fb640cc..5d5aba04 100644
--- a/pages/searchresults.js
+++ b/pages/searchresults.js
@@ -15,8 +15,11 @@ import { useRouter } from "next/router";
 import useTranslation from "next-translate/useTranslation";
 
 import { setSearch, getSearchObj } from "../store/search/action";
-import { setSearchResults, getSearchResultsObj } from "../store/searchOutput/action";
-import {getBasicSearch} from "../actions"
+import {
+    setSearchResults,
+    getSearchResultsObj,
+} from "../store/searchOutput/action";
+import { getBasicSearch } from "../actions";
 
 const Home = (props) => {
     const { footerLinks, pages } = props;
@@ -24,6 +27,7 @@ const Home = (props) => {
 
     const router = useRouter();
     const { locale } = router;
+    const { appealtypes } = router.query;
 
     return (
         <div>
@@ -37,7 +41,11 @@ const Home = (props) => {
                 <Header courseName={t("common:service-name")} />
                 <div className="govuk-width-container">
                     <Banner />
-                    <SearchResults searchString={props.search.searchString} searchResultsObj={props.searchResultsObj} />
+                    <Breadcrumbs slug={appealtypes} />
+                    <SearchResults
+                        searchString={props.search.searchString}
+                        searchResultsObj={props.searchResultsObj}
+                    />
                 </div>
                 <Footer footerLinks={footerLinks} />
             </div>
@@ -45,13 +53,13 @@ const Home = (props) => {
     );
 };
 
-export  const getServerSideProps = wrapper.getServerSideProps (
-     store => async({ query, req, res }) => 
-        {
-            console.log('query-',query); 
-            const searchResultsObj = await getBasicSearch(query.q) || null;
-             store.dispatch(setSearchResults(searchResultsObj));
-             store.dispatch(setSearch(query.q));
+export const getServerSideProps = wrapper.getServerSideProps(
+    (store) =>
+        async ({ query, req, res }) => {
+            console.log("query-", query);
+            const searchResultsObj = (await getBasicSearch(query.q)) || null;
+            store.dispatch(setSearchResults(searchResultsObj));
+            store.dispatch(setSearch(query.q));
         }
 );
 
@@ -78,11 +86,11 @@ export  const getServerSideProps = wrapper.getServerSideProps (
 // );
 
 const mapStateToProps = (state) => {
-    console.log('mapstate',state);
+    console.log("mapstate", state);
 
     return {
         search: state.search,
-        searchResultsObj: state.searchResultsObj
+        searchResultsObj: state.searchResultsObj,
         //         //     apiroot: state.apiroot,
         //         //     courseListContent: state.courseListContent.courseListContent,
         //         //     pages: state.pages.pages,
diff --git a/public/assets/javascript/govuk-frontend-3.13.0.min.js b/public/assets/javascript/govuk-frontend-3.13.0.min.js
new file mode 100644
index 00000000..e9366b04
--- /dev/null
+++ b/public/assets/javascript/govuk-frontend-3.13.0.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define("GOVUKFrontend",["exports"],e):e(t.GOVUKFrontend={})}(this,function(t){"use strict";function r(t,e){if(window.NodeList.prototype.forEach)return t.forEach(e);for(var n=0;n<t.length;n++)e.call(window,t[n],n,t)}function n(t){this.$module=t,this.moduleId=t.getAttribute("id"),this.$sections=t.querySelectorAll(".govuk-accordion__section"),this.$openAllButton="",this.browserSupportsSessionStorage=e.checkForSessionStorage(),this.controlsClass="govuk-accordion__controls",this.openAllClass="govuk-accordion__open-all",this.iconClass="govuk-accordion__icon",this.sectionHeaderClass="govuk-accordion__section-header",this.sectionHeaderFocusedClass="govuk-accordion__section-header--focused",this.sectionHeadingClass="govuk-accordion__section-heading",this.sectionSummaryClass="govuk-accordion__section-summary",this.sectionButtonClass="govuk-accordion__section-button",this.sectionExpandedClass="govuk-accordion__section--expanded"}(function(t){var a,c,l,u;"defineProperty"in Object&&function(){try{return Object.defineProperty({},"test",{value:42}),!0}catch(t){return!1}}()||(a=Object.defineProperty,c=Object.prototype.hasOwnProperty("__defineGetter__"),l="Getters & setters cannot be defined on this javascript engine",u="A property cannot both have accessors and be writable or have a value",Object.defineProperty=function(t,e,n){if(a&&(t===window||t===document||t===Element.prototype||t instanceof Element))return a(t,e,n);if(null===t||!(t instanceof Object||"object"==typeof t))throw new TypeError("Object.defineProperty called on non-object");if(!(n instanceof Object))throw new TypeError("Property description must be an object");var o=String(e),i="value"in n||"writable"in n,r="get"in n&&typeof n.get,s="set"in n&&typeof n.set;if(r){if("function"!==r)throw new TypeError("Getter must be a function");if(!c)throw new TypeError(l);if(i)throw new TypeError(u);Object.__defineGetter__.call(t,o,n.get)}else t[o]=n.value;if(s){if("function"!==s)throw new TypeError("Setter must be a function");if(!c)throw new TypeError(l);if(i)throw new TypeError(u);Object.__defineSetter__.call(t,o,n.set)}return"value"in n&&(t[o]=n.value),t})}).call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(t){"bind"in Function.prototype||Object.defineProperty(Function.prototype,"bind",{value:function(e){var n,t=Array,o=Object,i=o.prototype,r=t.prototype,s=function s(){},a=i.toString,c="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag,l=Function.prototype.toString,u=function u(t){try{return l.call(t),!0}catch(e){return!1}};n=function n(t){if("function"!=typeof t)return!1;if(c)return u(t);var e=a.call(t);return"[object Function]"===e||"[object GeneratorFunction]"===e};var d=r.slice,h=r.concat,p=r.push,f=Math.max,b=this;if(!n(b))throw new TypeError("Function.prototype.bind called on incompatible "+b);for(var m,y=d.call(arguments,1),v=f(0,b.length-y.length),g=[],w=0;w<v;w++)p.call(g,"$"+w);return m=Function("binder","return function ("+g.join(",")+"){ return binder.apply(this, arguments); }")(function(){if(this instanceof m){var t=b.apply(this,h.call(y,d.call(arguments)));return o(t)===t?t:this}return b.apply(e,h.call(y,d.call(arguments)))}),b.prototype&&(s.prototype=b.prototype,m.prototype=new s,s.prototype=null),m}})}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(o){var t,e,n;"DOMTokenList"in this&&(!("classList"in(t=document.createElement("x")))||!t.classList.toggle("x",!1)&&!t.className)||("DOMTokenList"in(e=this)&&e.DOMTokenList&&(!document.createElementNS||!document.createElementNS("http://www.w3.org/2000/svg","svg")||document.createElementNS("http://www.w3.org/2000/svg","svg").classList instanceof DOMTokenList)||(e.DOMTokenList=function(){var i=!0,n=function(t,e,n,o){Object.defineProperty?Object.defineProperty(t,e,{configurable:!1===i||!!o,get:n}):t.__defineGetter__(e,n)};try{n({},"support")}catch(t){i=!1}return function(i,r){var s=this,a=[],c={},l=0,t=0,e=function(t){n(s,t,function(){return d(),a[t]},!1)},u=function(){if(t<=l)for(;t<l;++t)e(t)},d=function(){var t,e,n=arguments,o=/\s+/;if(n.length)for(e=0;e<n.length;++e)if(o.test(n[e]))throw(t=new SyntaxError('String "'+n[e]+'" contains an invalid character')).code=5,t.name="InvalidCharacterError",t;for(""===(a="object"==typeof i[r]?(""+i[r].baseVal).replace(/^\s+|\s+$/g,"").split(o):(""+i[r]).replace(/^\s+|\s+$/g,"").split(o))[0]&&(a=[]),c={},e=0;e<a.length;++e)c[a[e]]=!0;l=a.length,u()};return d(),n(s,"length",function(){return d(),l}),s.toLocaleString=s.toString=function(){return d(),a.join(" ")},s.item=function(t){return d(),a[t]},s.contains=function(t){return d(),!!c[t]},s.add=function(){d.apply(s,t=arguments);for(var t,e,n=0,o=t.length;n<o;++n)c[e=t[n]]||(a.push(e),c[e]=!0);l!==a.length&&(l=a.length>>>0,"object"==typeof i[r]?i[r].baseVal=a.join(" "):i[r]=a.join(" "),u())},s.remove=function(){d.apply(s,t=arguments);for(var t,e={},n=0,o=[];n<t.length;++n)e[t[n]]=!0,delete c[t[n]];for(n=0;n<a.length;++n)e[a[n]]||o.push(a[n]);l=(a=o).length>>>0,"object"==typeof i[r]?i[r].baseVal=a.join(" "):i[r]=a.join(" "),u()},s.toggle=function(t,e){return d.apply(s,[t]),o!==e?e?(s.add(t),!0):(s.remove(t),!1):c[t]?(s.remove(t),!1):(s.add(t),!0)},s}}()),"classList"in(n=document.createElement("span"))&&(n.classList.toggle("x",!1),n.classList.contains("x")&&(n.classList.constructor.prototype.toggle=function(t){var e=arguments[1];if(e!==o)return this[(e=!!e)?"add":"remove"](t),e;var n=!this.contains(t);return this[n?"add":"remove"](t),n})),function(){var t=document.createElement("span");if("classList"in t&&(t.classList.add("a","b"),!t.classList.contains("b"))){var o=t.classList.constructor.prototype.add;t.classList.constructor.prototype.add=function(){for(var t=arguments,e=arguments.length,n=0;n<e;n++)o.call(this,t[n])}}}(),function(){var t=document.createElement("span");if("classList"in t&&(t.classList.add("a"),t.classList.add("b"),t.classList.remove("a","b"),t.classList.contains("b"))){var o=t.classList.constructor.prototype.remove;t.classList.constructor.prototype.remove=function(){for(var t=arguments,e=arguments.length,n=0;n<e;n++)o.call(this,t[n])}}}())}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(t){"Document"in this||"undefined"==typeof WorkerGlobalScope&&"function"!=typeof importScripts&&(this.HTMLDocument?this.Document=this.HTMLDocument:(this.Document=this.HTMLDocument=document.constructor=new Function("return function Document() {}")(),this.Document.prototype=document))}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(t){"Element"in this&&"HTMLElement"in this||function(){if(!window.Element||window.HTMLElement){window.Element=window.HTMLElement=new Function("return function Element() {}")();var t,e=document.appendChild(document.createElement("body")),n=e.appendChild(document.createElement("iframe")).contentWindow.document,a=Element.prototype=n.appendChild(n.createElement("*")),c={},l=function(t,e){var n,o,i,r=t.childNodes||[],s=-1;if(1===t.nodeType&&t.constructor!==Element)for(n in t.constructor=Element,c)o=c[n],t[n]=o;for(;i=e&&r[++s];)l(i,e);return t},u=document.getElementsByTagName("*"),o=document.createElement,i=100;a.attachEvent("onpropertychange",function(t){for(var e,n=t.propertyName,o=!c.hasOwnProperty(n),i=a[n],r=c[n],s=-1;e=u[++s];)1===e.nodeType&&(!o&&e[n]!==r||(e[n]=i));c[n]=i}),a.constructor=Element,a.hasAttribute||(a.hasAttribute=function(t){return null!==this.getAttribute(t)}),r()||(document.onreadystatechange=r,t=setInterval(r,25)),document.createElement=function(t){var e=o(String(t).toLowerCase());return l(e)},document.removeChild(e)}else window.HTMLElement=window.Element;function r(){return i--||clearTimeout(t),!(!document.body||document.body.prototype||!/(complete|interactive)/.test(document.readyState))&&(l(document,!0),t&&document.body.prototype&&clearTimeout(t),!!document.body.prototype)}}()}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(t){var e;"document"in this&&"classList"in document.documentElement&&"Element"in this&&"classList"in Element.prototype&&((e=document.createElement("span")).classList.add("a","b"),e.classList.contains("b"))||function(t){var u=!0,d=function(t,e,n,o){Object.defineProperty?Object.defineProperty(t,e,{configurable:!1===u||!!o,get:n}):t.__defineGetter__(e,n)};try{d({},"support")}catch(e){u=!1}var h=function(t,c,l){d(t.prototype,c,function(){var t,e=this,n="__defineGetter__DEFINE_PROPERTY"+c;if(e[n])return t;if(!(e[n]=!0)===u){for(var o,i=h.mirror||document.createElement("div"),r=i.childNodes,s=r.length,a=0;a<s;++a)if(r[a]._R===e){o=r[a];break}o=o||i.appendChild(document.createElement("div")),t=DOMTokenList.call(o,e,l)}else t=new DOMTokenList(e,l);return d(e,c,function(){return t}),delete e[n],t},!0)};h(t.Element,"classList","className"),h(t.HTMLElement,"classList","className"),h(t.HTMLLinkElement,"relList","rel"),h(t.HTMLAnchorElement,"relList","rel"),h(t.HTMLAreaElement,"relList","rel")}(this)}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),n.prototype.init=function(){if(this.$module){this.initControls(),this.initSectionHeaders();var t=this.checkIfAllSectionsOpen();this.updateOpenAllButton(t)}},n.prototype.initControls=function(){this.$openAllButton=document.createElement("button"),this.$openAllButton.setAttribute("type","button"),this.$openAllButton.innerHTML='Open all <span class="govuk-visually-hidden">sections</span>',this.$openAllButton.setAttribute("class",this.openAllClass),this.$openAllButton.setAttribute("aria-expanded","false"),this.$openAllButton.setAttribute("type","button");var t=document.createElement("div");t.setAttribute("class",this.controlsClass),t.appendChild(this.$openAllButton),this.$module.insertBefore(t,this.$module.firstChild),this.$openAllButton.addEventListener("click",this.onOpenOrCloseAllToggle.bind(this))},n.prototype.initSectionHeaders=function(){r(this.$sections,function(t,e){var n=t.querySelector("."+this.sectionHeaderClass);this.initHeaderAttributes(n,e),this.setExpanded(this.isExpanded(t),t),n.addEventListener("click",this.onSectionToggle.bind(this,t)),this.setInitialState(t)}.bind(this))},n.prototype.initHeaderAttributes=function(e,t){var n=this,o=e.querySelector("."+this.sectionButtonClass),i=e.querySelector("."+this.sectionHeadingClass),r=e.querySelector("."+this.sectionSummaryClass),s=document.createElement("button");s.setAttribute("type","button"),s.setAttribute("id",this.moduleId+"-heading-"+(t+1)),s.setAttribute("aria-controls",this.moduleId+"-content-"+(t+1));for(var a=0;a<o.attributes.length;a++){var c=o.attributes.item(a);s.setAttribute(c.nodeName,c.nodeValue)}s.addEventListener("focusin",function(t){e.classList.contains(n.sectionHeaderFocusedClass)||(e.className+=" "+n.sectionHeaderFocusedClass)}),s.addEventListener("blur",function(t){e.classList.remove(n.sectionHeaderFocusedClass)}),null!=r&&s.setAttribute("aria-describedby",this.moduleId+"-summary-"+(t+1)),s.innerHTML=o.innerHTML,i.removeChild(o),i.appendChild(s);var l=document.createElement("span");l.className=this.iconClass,l.setAttribute("aria-hidden","true"),s.appendChild(l)},n.prototype.onSectionToggle=function(t){var e=this.isExpanded(t);this.setExpanded(!e,t),this.storeState(t)},n.prototype.onOpenOrCloseAllToggle=function(){var e=this,t=this.$sections,n=!this.checkIfAllSectionsOpen();r(t,function(t){e.setExpanded(n,t),e.storeState(t)}),e.updateOpenAllButton(n)},n.prototype.setExpanded=function(t,e){e.querySelector("."+this.sectionButtonClass).setAttribute("aria-expanded",t),t?e.classList.add(this.sectionExpandedClass):e.classList.remove(this.sectionExpandedClass);var n=this.checkIfAllSectionsOpen();this.updateOpenAllButton(n)},n.prototype.isExpanded=function(t){return t.classList.contains(this.sectionExpandedClass)},n.prototype.checkIfAllSectionsOpen=function(){return this.$sections.length===this.$module.querySelectorAll("."+this.sectionExpandedClass).length},n.prototype.updateOpenAllButton=function(t){var e=t?"Close all":"Open all";e+='<span class="govuk-visually-hidden"> sections</span>',this.$openAllButton.setAttribute("aria-expanded",t),this.$openAllButton.innerHTML=e};var e={checkForSessionStorage:function(){var t,e="this is the test string";try{return window.sessionStorage.setItem(e,e),t=window.sessionStorage.getItem(e)===e.toString(),window.sessionStorage.removeItem(e),t}catch(n){"undefined"!=typeof console&&"undefined"!=typeof console.log||console.log("Notice: sessionStorage not available.")}}};n.prototype.storeState=function(t){if(this.browserSupportsSessionStorage){var e=t.querySelector("."+this.sectionButtonClass);if(e){var n=e.getAttribute("aria-controls"),o=e.getAttribute("aria-expanded");void 0!==n||"undefined"!=typeof console&&"undefined"!=typeof console.log||console.error(new Error("No aria controls present in accordion section heading.")),void 0!==o||"undefined"!=typeof console&&"undefined"!=typeof console.log||console.error(new Error("No aria expanded present in accordion section heading.")),n&&o&&window.sessionStorage.setItem(n,o)}}},n.prototype.setInitialState=function(t){if(this.browserSupportsSessionStorage){var e=t.querySelector("."+this.sectionButtonClass);if(e){var n=e.getAttribute("aria-controls"),o=n?window.sessionStorage.getItem(n):null;null!==o&&this.setExpanded("true"===o,t)}}},function(t){"Window"in this||"undefined"==typeof WorkerGlobalScope&&"function"!=typeof importScripts&&function(t){t.constructor?t.Window=t.constructor:(t.Window=t.constructor=new Function("return function Window() {}")()).prototype=this}(this)}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(r){!function(t){if(!("Event"in t))return!1;if("function"==typeof t.Event)return!0;try{return new Event("click"),!0}catch(e){return!1}}(this)&&function(){var n={click:1,dblclick:1,keyup:1,keypress:1,keydown:1,mousedown:1,mouseup:1,mousemove:1,mouseover:1,mouseenter:1,mouseleave:1,mouseout:1,storage:1,storagecommit:1,textinput:1};if("undefined"!=typeof document&&"undefined"!=typeof window){var t=window.Event&&window.Event.prototype||null;window.Event=Window.prototype.Event=function(t,e){if(!t)throw new Error("Not enough arguments");var n;if("createEvent"in document){n=document.createEvent("Event");var o=!(!e||e.bubbles===r)&&e.bubbles,i=!(!e||e.cancelable===r)&&e.cancelable;return n.initEvent(t,o,i),n}return(n=document.createEventObject()).type=t,n.bubbles=!(!e||e.bubbles===r)&&e.bubbles,n.cancelable=!(!e||e.cancelable===r)&&e.cancelable,n},t&&Object.defineProperty(window.Event,"prototype",{configurable:!1,enumerable:!1,writable:!0,value:t}),"createEvent"in document||(window.addEventListener=Window.prototype.addEventListener=Document.prototype.addEventListener=Element.prototype.addEventListener=function(){var s=this,t=arguments[0],e=arguments[1];if(s===window&&t in n)throw new Error("In IE8 the event: "+t+" is not available on the window object. Please see https://github.com/Financial-Times/polyfill-service/issues/317 for more information.");s._events||(s._events={}),s._events[t]||(s._events[t]=function(t){var e,n=s._events[t.type].list,o=n.slice(),i=-1,r=o.length;for(t.preventDefault=function(){!1!==t.cancelable&&(t.returnValue=!1)},t.stopPropagation=function(){t.cancelBubble=!0},t.stopImmediatePropagation=function(){t.cancelBubble=!0,t.cancelImmediate=!0},t.currentTarget=s,t.relatedTarget=t.fromElement||null,t.target=t.target||t.srcElement||s,t.timeStamp=(new Date).getTime(),t.clientX&&(t.pageX=t.clientX+document.documentElement.scrollLeft,t.pageY=t.clientY+document.documentElement.scrollTop);++i<r&&!t.cancelImmediate;)i in o&&-1!==a(n,e=o[i])&&"function"==typeof e&&e.call(s,t)},s._events[t].list=[],s.attachEvent&&s.attachEvent("on"+t,s._events[t])),s._events[t].list.push(e)},window.removeEventListener=Window.prototype.removeEventListener=Document.prototype.removeEventListener=Element.prototype.removeEventListener=function(){var t,e=this,n=arguments[0],o=arguments[1];e._events&&e._events[n]&&e._events[n].list&&-1!==(t=a(e._events[n].list,o))&&(e._events[n].list.splice(t,1),e._events[n].list.length||(e.detachEvent&&e.detachEvent("on"+n,e._events[n]),delete e._events[n]))},window.dispatchEvent=Window.prototype.dispatchEvent=Document.prototype.dispatchEvent=Element.prototype.dispatchEvent=function(t){if(!arguments.length)throw new Error("Not enough arguments");if(!t||"string"!=typeof t.type)throw new Error("DOM Events Exception 0");var e=this,n=t.type;try{if(!t.bubbles){t.cancelBubble=!0;var o=function(t){t.cancelBubble=!0,(e||window).detachEvent("on"+n,o)};this.attachEvent("on"+n,o)}this.fireEvent("on"+n,t)}catch(i){for(t.target=e;"_events"in(t.currentTarget=e)&&"function"==typeof e._events[n]&&e._events[n].call(e,t),"function"==typeof e["on"+n]&&e["on"+n].call(e,t),(e=9===e.nodeType?e.parentWindow:e.parentNode)&&!t.cancelBubble;);}return!0},document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&document.dispatchEvent(new Event("DOMContentLoaded",{bubbles:!0}))}))}function a(t,e){for(var n=-1,o=t.length;++n<o;)if(n in t&&t[n]===e)return n;return-1}}()}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{});function o(t){this.$module=t,this.debounceFormSubmitTimer=null}o.prototype.handleKeyDown=function(t){var e=t.target;"button"===e.getAttribute("role")&&32===t.keyCode&&(t.preventDefault(),e.click())},o.prototype.debounce=function(t){if("true"===t.target.getAttribute("data-prevent-double-click"))return this.debounceFormSubmitTimer?(t.preventDefault(),!1):void(this.debounceFormSubmitTimer=setTimeout(function(){this.debounceFormSubmitTimer=null}.bind(this),1e3))},o.prototype.init=function(){this.$module.addEventListener("keydown",this.handleKeyDown),this.$module.addEventListener("click",this.debounce)};function i(t){this.$module=t}function s(t){this.$module=t,this.$textarea=t.querySelector(".govuk-js-character-count"),this.$textarea&&(this.$countMessage=t.querySelector('[id="'+this.$textarea.id+'-info"]'))}function a(t){this.$module=t,this.$inputs=t.querySelectorAll('input[type="checkbox"]')}function c(t){this.$module=t}function l(t){this.$module=t}function u(t){this.$module=t,this.$menuButton=t&&t.querySelector(".govuk-js-header-toggle"),this.$menu=this.$menuButton&&t.querySelector("#"+this.$menuButton.getAttribute("aria-controls"))}function d(t){this.$module=t,this.$inputs=t.querySelectorAll('input[type="radio"]')}function h(t){this.$module=t,this.$tabs=t.querySelectorAll(".govuk-tabs__tab"),this.keys={left:37,right:39,up:38,down:40},this.jsHiddenClass="govuk-tabs__panel--hidden"}i.prototype.init=function(){this.$module&&("boolean"==typeof this.$module.open||this.polyfillDetails())},i.prototype.polyfillDetails=function(){var t=this.$module,e=this.$summary=t.getElementsByTagName("summary").item(0),n=this.$content=t.getElementsByTagName("div").item(0);e&&n&&(n.id||(n.id="details-content-"+function o(){var n=(new Date).getTime();return"undefined"!=typeof window.performance&&"function"==typeof window.performance.now&&(n+=window.performance.now()),"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=(n+16*Math.random())%16|0;return n=Math.floor(n/16),("x"===t?e:3&e|8).toString(16)})}()),t.setAttribute("role","group"),e.setAttribute("role","button"),e.setAttribute("aria-controls",n.id),!(e.tabIndex=0)==(null!==t.getAttribute("open"))?(e.setAttribute("aria-expanded","true"),n.setAttribute("aria-hidden","false")):(e.setAttribute("aria-expanded","false"),n.setAttribute("aria-hidden","true"),n.style.display="none"),this.polyfillHandleInputs(e,this.polyfillSetAttributes.bind(this)))},i.prototype.polyfillSetAttributes=function(){var t=this.$module,e=this.$summary,n=this.$content,o="true"===e.getAttribute("aria-expanded"),i="true"===n.getAttribute("aria-hidden");return e.setAttribute("aria-expanded",o?"false":"true"),n.setAttribute("aria-hidden",i?"false":"true"),n.style.display=o?"none":"",null!==t.getAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","open"),!0},i.prototype.polyfillHandleInputs=function(t,n){t.addEventListener("keypress",function(t){var e=t.target;13!==t.keyCode&&32!==t.keyCode||"summary"===e.nodeName.toLowerCase()&&(t.preventDefault(),e.click?e.click():n(t))}),t.addEventListener("keyup",function(t){var e=t.target;32===t.keyCode&&"summary"===e.nodeName.toLowerCase()&&t.preventDefault()}),t.addEventListener("click",n)},s.prototype.defaults={characterCountAttribute:"data-maxlength",wordCountAttribute:"data-maxwords"},s.prototype.init=function(){var t=this.$module,e=this.$textarea,n=this.$countMessage;if(e&&n){e.insertAdjacentElement("afterend",n),this.options=this.getDataset(t);var o=this.defaults.characterCountAttribute;this.options.maxwords&&(o=this.defaults.wordCountAttribute),this.maxLength=t.getAttribute(o),this.maxLength&&(t.removeAttribute("maxlength"),"onpageshow"in window?window.addEventListener("pageshow",this.sync.bind(this)):window.addEventListener("DOMContentLoaded",this.sync.bind(this)),this.sync())}},s.prototype.sync=function(){this.bindChangeEvents(),this.updateCountMessage()},s.prototype.getDataset=function(t){var e={},n=t.attributes;if(n)for(var o=0;o<n.length;o++){var i=n[o],r=i.name.match(/^data-(.+)/);r&&(e[r[1]]=i.value)}return e},s.prototype.count=function(t){var e;this.options.maxwords?e=(t.match(/\S+/g)||[]).length:e=t.length;return e},s.prototype.bindChangeEvents=function(){var t=this.$textarea;t.addEventListener("keyup",this.checkIfValueChanged.bind(this)),t.addEventListener("focus",this.handleFocus.bind(this)),t.addEventListener("blur",this.handleBlur.bind(this))},s.prototype.checkIfValueChanged=function(){this.$textarea.oldValue||(this.$textarea.oldValue=""),this.$textarea.value!==this.$textarea.oldValue&&(this.$textarea.oldValue=this.$textarea.value,this.updateCountMessage())},s.prototype.updateCountMessage=function(){var t=this.$textarea,e=this.options,n=this.$countMessage,o=this.count(t.value),i=this.maxLength,r=i-o;o<i*(e.threshold?e.threshold:0)/100?(n.classList.add("govuk-character-count__message--disabled"),n.setAttribute("aria-hidden",!0)):(n.classList.remove("govuk-character-count__message--disabled"),n.removeAttribute("aria-hidden")),r<0?(t.classList.add("govuk-textarea--error"),n.classList.remove("govuk-hint"),n.classList.add("govuk-error-message")):(t.classList.remove("govuk-textarea--error"),n.classList.remove("govuk-error-message"),n.classList.add("govuk-hint"));var s,a,c="character";e.maxwords&&(c="word"),c+=-1==r||1==r?"":"s",s=r<0?"too many":"remaining",a=Math.abs(r),n.innerHTML="You have "+a+" "+c+" "+s},s.prototype.handleFocus=function(){this.valueChecker=setInterval(this.checkIfValueChanged.bind(this),1e3)},s.prototype.handleBlur=function(){clearInterval(this.valueChecker)},a.prototype.init=function(){var n=this.$module;r(this.$inputs,function(t){var e=t.getAttribute("data-aria-controls");e&&n.querySelector("#"+e)&&(t.setAttribute("aria-controls",e),t.removeAttribute("data-aria-controls"))}),"onpageshow"in window?window.addEventListener("pageshow",this.syncAllConditionalReveals.bind(this)):window.addEventListener("DOMContentLoaded",this.syncAllConditionalReveals.bind(this)),this.syncAllConditionalReveals(),n.addEventListener("click",this.handleClick.bind(this))},a.prototype.syncAllConditionalReveals=function(){r(this.$inputs,this.syncConditionalRevealWithInputState.bind(this))},a.prototype.syncConditionalRevealWithInputState=function(t){var e=this.$module.querySelector("#"+t.getAttribute("aria-controls"));if(e&&e.classList.contains("govuk-checkboxes__conditional")){var n=t.checked;t.setAttribute("aria-expanded",n),e.classList.toggle("govuk-checkboxes__conditional--hidden",!n)}},a.prototype.unCheckAllInputsExcept=function(e){r(document.querySelectorAll('input[type="checkbox"][name="'+e.name+'"]'),function(t){e.form===t.form&&t!==e&&(t.checked=!1)}),this.syncAllConditionalReveals()},a.prototype.unCheckExclusiveInputs=function(e){r(document.querySelectorAll('input[data-behaviour="exclusive"][type="checkbox"][name="'+e.name+'"]'),function(t){e.form===t.form&&(t.checked=!1)}),this.syncAllConditionalReveals()},a.prototype.handleClick=function(t){var e=t.target;"checkbox"===e.type&&(e.getAttribute("aria-controls")&&this.syncConditionalRevealWithInputState(e),e.checked&&("exclusive"===e.getAttribute("data-behaviour")?this.unCheckAllInputsExcept(e):this.unCheckExclusiveInputs(e)))},function(t){"document"in this&&"matches"in document.documentElement||(Element.prototype.matches=Element.prototype.webkitMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.mozMatchesSelector||function(t){for(var e=(this.document||this.ownerDocument).querySelectorAll(t),n=0;e[n]&&e[n]!==this;)++n;return!!e[n]})}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(t){"document"in this&&"closest"in document.documentElement||(Element.prototype.closest=function(t){for(var e=this;e;){if(e.matches(t))return e;e="SVGElement"in window&&e instanceof SVGElement?e.parentNode:e.parentElement}return null})}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),c.prototype.init=function(){var t=this.$module;t&&(t.focus(),t.addEventListener("click",this.handleClick.bind(this)))},c.prototype.handleClick=function(t){var e=t.target;this.focusTarget(e)&&t.preventDefault()},c.prototype.focusTarget=function(t){if("A"!==t.tagName||!1===t.href)return!1;var e=this.getFragmentFromUrl(t.href),n=document.getElementById(e);if(!n)return!1;var o=this.getAssociatedLegendOrLabel(n);return!!o&&(o.scrollIntoView(),n.focus({preventScroll:!0}),!0)},c.prototype.getFragmentFromUrl=function(t){return-1!==t.indexOf("#")&&t.split("#").pop()},c.prototype.getAssociatedLegendOrLabel=function(t){var e=t.closest("fieldset");if(e){var n=e.getElementsByTagName("legend");if(n.length){var o=n[0];if("checkbox"===t.type||"radio"===t.type)return o;var i=o.getBoundingClientRect().top,r=t.getBoundingClientRect();if(r.height&&window.innerHeight)if(r.top+r.height-i<window.innerHeight/2)return o}}return document.querySelector("label[for='"+t.getAttribute("id")+"']")||t.closest("label")},l.prototype.init=function(){this.$module&&this.setFocus()},l.prototype.setFocus=function(){var t=this.$module;"true"!==t.getAttribute("data-disable-auto-focus")&&"alert"===t.getAttribute("role")&&(t.getAttribute("tabindex")||(t.setAttribute("tabindex","-1"),t.addEventListener("blur",function(){t.removeAttribute("tabindex")})),t.focus())},u.prototype.init=function(){this.$module&&this.$menuButton&&this.$menu&&(this.syncState(this.$menu.classList.contains("govuk-header__navigation--open")),this.$menuButton.addEventListener("click",this.handleMenuButtonClick.bind(this)))},u.prototype.syncState=function(t){this.$menuButton.classList.toggle("govuk-header__menu-button--open",t),this.$menuButton.setAttribute("aria-expanded",t)},u.prototype.handleMenuButtonClick=function(){var t=this.$menu.classList.toggle("govuk-header__navigation--open");this.syncState(t)},d.prototype.init=function(){var n=this.$module;r(this.$inputs,function(t){var e=t.getAttribute("data-aria-controls");e&&n.querySelector("#"+e)&&(t.setAttribute("aria-controls",e),t.removeAttribute("data-aria-controls"))}),"onpageshow"in window?window.addEventListener("pageshow",this.syncAllConditionalReveals.bind(this)):window.addEventListener("DOMContentLoaded",this.syncAllConditionalReveals.bind(this)),this.syncAllConditionalReveals(),n.addEventListener("click",this.handleClick.bind(this))},d.prototype.syncAllConditionalReveals=function(){r(this.$inputs,this.syncConditionalRevealWithInputState.bind(this))},d.prototype.syncConditionalRevealWithInputState=function(t){var e=document.querySelector("#"+t.getAttribute("aria-controls"));if(e&&e.classList.contains("govuk-radios__conditional")){var n=t.checked;t.setAttribute("aria-expanded",n),e.classList.toggle("govuk-radios__conditional--hidden",!n)}},d.prototype.handleClick=function(t){var n=t.target;"radio"===n.type&&r(document.querySelectorAll('input[type="radio"][aria-controls]'),function(t){var e=t.form===n.form;t.name===n.name&&e&&this.syncConditionalRevealWithInputState(t)}.bind(this))},function(t){"document"in this&&"nextElementSibling"in document.documentElement||Object.defineProperty(Element.prototype,"nextElementSibling",{get:function(){for(var t=this.nextSibling;t&&1!==t.nodeType;)t=t.nextSibling;return t}})}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),function(t){"document"in this&&"previousElementSibling"in document.documentElement||Object.defineProperty(Element.prototype,"previousElementSibling",{get:function(){for(var t=this.previousSibling;t&&1!==t.nodeType;)t=t.previousSibling;return t}})}.call("object"==typeof window&&window||"object"==typeof self&&self||"object"==typeof global&&global||{}),h.prototype.init=function(){"function"==typeof window.matchMedia?this.setupResponsiveChecks():this.setup()},h.prototype.setupResponsiveChecks=function(){this.mql=window.matchMedia("(min-width: 40.0625em)"),this.mql.addListener(this.checkMode.bind(this)),this.checkMode()},h.prototype.checkMode=function(){this.mql.matches?this.setup():this.teardown()},h.prototype.setup=function(){var t=this.$module,e=this.$tabs,n=t.querySelector(".govuk-tabs__list"),o=t.querySelectorAll(".govuk-tabs__list-item");if(e&&n&&o){n.setAttribute("role","tablist"),r(o,function(t){t.setAttribute("role","presentation")}),r(e,function(t){this.setAttributes(t),t.boundTabClick=this.onTabClick.bind(this),t.boundTabKeydown=this.onTabKeydown.bind(this),t.addEventListener("click",t.boundTabClick,!0),t.addEventListener("keydown",t.boundTabKeydown,!0),this.hideTab(t)}.bind(this));var i=this.getTab(window.location.hash)||this.$tabs[0];this.showTab(i),t.boundOnHashChange=this.onHashChange.bind(this),window.addEventListener("hashchange",t.boundOnHashChange,!0)}},h.prototype.teardown=function(){var t=this.$module,e=this.$tabs,n=t.querySelector(".govuk-tabs__list"),o=t.querySelectorAll(".govuk-tabs__list-item");e&&n&&o&&(n.removeAttribute("role"),r(o,function(t){t.removeAttribute("role","presentation")}),r(e,function(t){t.removeEventListener("click",t.boundTabClick,!0),t.removeEventListener("keydown",t.boundTabKeydown,!0),this.unsetAttributes(t)}.bind(this)),window.removeEventListener("hashchange",t.boundOnHashChange,!0))},h.prototype.onHashChange=function(t){var e=window.location.hash,n=this.getTab(e);if(n)if(this.changingHash)this.changingHash=!1;else{var o=this.getCurrentTab();this.hideTab(o),this.showTab(n),n.focus()}},h.prototype.hideTab=function(t){this.unhighlightTab(t),this.hidePanel(t)},h.prototype.showTab=function(t){this.highlightTab(t),this.showPanel(t)},h.prototype.getTab=function(t){return this.$module.querySelector('.govuk-tabs__tab[href="'+t+'"]')},h.prototype.setAttributes=function(t){var e=this.getHref(t).slice(1);t.setAttribute("id","tab_"+e),t.setAttribute("role","tab"),t.setAttribute("aria-controls",e),t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1");var n=this.getPanel(t);n.setAttribute("role","tabpanel"),n.setAttribute("aria-labelledby",t.id),n.classList.add(this.jsHiddenClass)},h.prototype.unsetAttributes=function(t){t.removeAttribute("id"),t.removeAttribute("role"),t.removeAttribute("aria-controls"),t.removeAttribute("aria-selected"),t.removeAttribute("tabindex");var e=this.getPanel(t);e.removeAttribute("role"),e.removeAttribute("aria-labelledby"),e.classList.remove(this.jsHiddenClass)},h.prototype.onTabClick=function(t){if(!t.target.classList.contains("govuk-tabs__tab"))return!1;t.preventDefault();var e=t.target,n=this.getCurrentTab();this.hideTab(n),this.showTab(e),this.createHistoryEntry(e)},h.prototype.createHistoryEntry=function(t){var e=this.getPanel(t),n=e.id;e.id="",this.changingHash=!0,window.location.hash=this.getHref(t).slice(1),e.id=n},h.prototype.onTabKeydown=function(t){switch(t.keyCode){case this.keys.left:case this.keys.up:this.activatePreviousTab(),t.preventDefault();break;case this.keys.right:case this.keys.down:this.activateNextTab(),t.preventDefault()}},h.prototype.activateNextTab=function(){var t=this.getCurrentTab(),e=t.parentNode.nextElementSibling;if(e)var n=e.querySelector(".govuk-tabs__tab");n&&(this.hideTab(t),this.showTab(n),n.focus(),this.createHistoryEntry(n))},h.prototype.activatePreviousTab=function(){var t=this.getCurrentTab(),e=t.parentNode.previousElementSibling;if(e)var n=e.querySelector(".govuk-tabs__tab");n&&(this.hideTab(t),this.showTab(n),n.focus(),this.createHistoryEntry(n))},h.prototype.getPanel=function(t){return this.$module.querySelector(this.getHref(t))},h.prototype.showPanel=function(t){this.getPanel(t).classList.remove(this.jsHiddenClass)},h.prototype.hidePanel=function(t){this.getPanel(t).classList.add(this.jsHiddenClass)},h.prototype.unhighlightTab=function(t){t.setAttribute("aria-selected","false"),t.parentNode.classList.remove("govuk-tabs__list-item--selected"),t.setAttribute("tabindex","-1")},h.prototype.highlightTab=function(t){t.setAttribute("aria-selected","true"),t.parentNode.classList.add("govuk-tabs__list-item--selected"),t.setAttribute("tabindex","0")},h.prototype.getCurrentTab=function(){return this.$module.querySelector(".govuk-tabs__list-item--selected .govuk-tabs__tab")},h.prototype.getHref=function(t){var e=t.getAttribute("href");return e.slice(e.indexOf("#"),e.length)},t.initAll=function p(t){var e="undefined"!=typeof(t=void 0!==t?t:{}).scope?t.scope:document;r(e.querySelectorAll('[data-module="govuk-button"]'),function(t){new o(t).init()}),r(e.querySelectorAll('[data-module="govuk-accordion"]'),function(t){new n(t).init()}),r(e.querySelectorAll('[data-module="govuk-details"]'),function(t){new i(t).init()}),r(e.querySelectorAll('[data-module="govuk-character-count"]'),function(t){new s(t).init()}),r(e.querySelectorAll('[data-module="govuk-checkboxes"]'),function(t){new a(t).init()}),new c(e.querySelector('[data-module="govuk-error-summary"]')).init(),new u(e.querySelector('[data-module="govuk-header"]')).init(),r(e.querySelectorAll('[data-module="govuk-notification-banner"]'),function(t){new l(t).init()}),r(e.querySelectorAll('[data-module="govuk-radios"]'),function(t){new d(t).init()}),r(e.querySelectorAll('[data-module="govuk-tabs"]'),function(t){new h(t).init()})},t.Accordion=n,t.Button=o,t.Details=i,t.CharacterCount=s,t.Checkboxes=a,t.ErrorSummary=c,t.Header=u,t.Radios=d,t.Tabs=h});
diff --git a/store/appealType/action.js b/store/appealType/action.js
new file mode 100644
index 00000000..9da93088
--- /dev/null
+++ b/store/appealType/action.js
@@ -0,0 +1,18 @@
+export const appealTypeDataActionTypes = {
+    GETAPPEALTYPEDATA: "GETAPPEALTYPEDATA",
+    SETAPPEALTYPEDATA: "SETAPPEALTYPEDATA",
+    UPDATEAPPEALTYPEDATA: "UPDATEAPPEALTYPEDATA",
+};
+
+export const getAppealTypeObj = () => (dispatch) => {
+    return dispatch({
+        type: appealTypeDataActionTypes.GETAPPEALTYPEDATA,
+    });
+};
+
+export const setAppealType = (appealTypeData) => (dispatch) => {
+    return dispatch({
+        type: appealTypeDataActionTypes.SETAPPEALTYPEDATA,
+        appealType: appealTypeData,
+    });
+};
diff --git a/store/appealType/reducer.js b/store/appealType/reducer.js
new file mode 100644
index 00000000..7fbcffaf
--- /dev/null
+++ b/store/appealType/reducer.js
@@ -0,0 +1,16 @@
+import { appealTypeDataActionTypes } from "./action";
+
+const appealTypeDataInitialState = {
+    appealType: {},
+};
+
+export default function reducer(state = appealTypeDataInitialState, action) {
+    switch (action.type) {
+        case appealTypeDataActionTypes.SETAPPEALTYPEDATA:
+            return {
+                appealType: action.appealType,
+            };
+        default:
+            return state;
+    }
+}
diff --git a/store/store.js b/store/store.js
index 55f1be71..7649210d 100644
--- a/store/store.js
+++ b/store/store.js
@@ -5,6 +5,7 @@ import progress from "./progress/reducer";
 import search from "./search/reducer";
 import searchResultsObj from "./searchOutput/reducer";
 import formData from "./formData/reducer";
+import appealType from "./appealType/reducer";
 import { reducer as formReducer } from "redux-form";
 import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2";
 
@@ -14,6 +15,7 @@ const combinedReducer = combineReducers({
     search,
     searchResultsObj,
     formData,
+    appealType,
 });
 
 const reducer = (state = { progress: "{}" }, action) => {
@@ -74,7 +76,7 @@ const makeStore = ({ isServer }) => {
 
         const persistConfig = {
             key: "nextjs",
-            whitelist: ["progress,search,searchResults,formData"],
+            whitelist: ["progress,search,searchResults,formData,appealType"],
             storage,
             stateReconciler: autoMergeLevel2, // if needed, use a safer storage
         };
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 967f2423..6c434007 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -125,8 +125,8 @@ a {
 }
 
 nav {
-    margin-top: 60px;
-    margin-bottom: 40px;
+    // margin-top: 60px;
+    // margin-bottom: 40px;
 }
 
 .govuk-footer {