From 9d90b7f0a8f30c555e1b5d67dae03a4d43fdb4c0 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Tue, 7 Jun 2022 14:36:47 +0100
Subject: [PATCH] check form updates

---
 components/elements/index.js                  |  87 ++++++-----
 components/myportal/topthree.js               |  25 +++-
 components/newappeal/aboutyou.js              |  85 +++++++++--
 components/newappeal/buildCheckfield.js       |   3 +
 components/newappeal/buildcheckrow.js         | 136 +++++++++++-------
 components/newappeal/buildchecksection.js     |   6 +-
 components/newappeal/buildfield.js            |  10 +-
 components/newappeal/buildprogress.js         |   6 +-
 components/newappeal/buildsection.js          |  10 +-
 components/newappeal/complete.js              |   2 -
 components/newappeal/fileupload.js            |   2 +-
 components/utils/index.js                     |  13 ++
 data/crmfieldlookuptranslations.json          |  12 ++
 data/formsxml/planningappeals78.xml           |   8 +-
 data/picklistLookups.json                     |  48 +++++++
 locales/cy/common.json                        |   3 +
 locales/cy/newappeal.json                     |   3 +-
 locales/en/common.json                        |   3 +
 locales/en/newappeal.json                     |   3 +-
 .../api/endpoint/getawaitingsubmission_api.js |   3 +-
 .../getawaitingsubmissionproxy_api.js         |   2 +-
 pages/newappeal/index.js                      |  19 ++-
 22 files changed, 356 insertions(+), 133 deletions(-)

diff --git a/components/elements/index.js b/components/elements/index.js
index 476da1a4..42ef4ed4 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -81,7 +81,7 @@ export function Textfield(props) {
             <>
                 <div className="govuk-form-group">
                     <label className="govuk-label " htmlFor={props.name}>
-                        {label}
+                        {FieldsTranslations(label)}
                     </label>
                     <input
                         type="text"
@@ -163,9 +163,9 @@ const RenderMultiline = ({
                         : "govuk-form-group "
                 }
             >
-                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
-                    {FieldsTranslations(label)}
-                </label>
+                {/* <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {FieldsTranslations(label)}s
+                </label> */}
                 {touched && error && (
                     <span id={id + "-error"} className="govuk-error-message">
                         <span className="govuk-visually-hidden">Error:</span>{" "}
@@ -177,9 +177,11 @@ const RenderMultiline = ({
                     </span>
                 )}
                 <textarea
-                    {...input}
+                    id={id}
+                    name={id}
                     rows={rows}
                     className={className}
+                    {...input}
                 ></textarea>
             </div>
         </>
@@ -190,21 +192,26 @@ export function MultiLinefield(props) {
     const {
         name,
         label,
-        parentField,
         form,
         formProps,
+        parentField,
         parentFieldShowOnValue,
         validation,
     } = props;
     const required = (value) => (value ? undefined : "Is required");
 
     var showIfHasParentShowValue =
-        (parentField != false &&
-            !_.isEmpty(formProps[form]) &&
-            _.has(formProps[form].values, parentField) &&
-            formProps[form].values[parentField]) == parentFieldShowOnValue;
+        parentField != false &&
+        !_.isEmpty(formProps[form]) &&
+        _.has(formProps[form].values, parentField) &&
+        parentFieldShowOnValue.indexOf(
+            formProps[form].values[parentField].toString()
+        ) > -1;
 
-    // console.log(parentField, showIfHasParentShowValue);
+    (showIfHasParentShowValue == parentField) != false &&
+        showIfHasParentShowValue;
+
+    //console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
 
     return (
         <>
@@ -324,12 +331,13 @@ const RenderDatePicker = ({
                 <fieldset
                     className="govuk-fieldset"
                     role="group"
-                    aria-describedby="dob-hint"
+                    aria-describedby={id + "_label"}
                 >
                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                         <label
                             className="govuk-fieldset__heading"
                             id={id + "_label"}
+                            htmlFor={id}
                         >
                             {FieldsTranslations(label)}
                         </label>
@@ -355,6 +363,7 @@ const RenderDatePicker = ({
                         {...custom}
                         locale={router.locale}
                         autoOk={true}
+                        id={id}
                         dateFormat="dd/MM/yyyy"
                         onChange={onChange}
                         selected={
@@ -527,7 +536,7 @@ const RenderYesNo = ({
             >
                 <fieldset
                     className="govuk-fieldset"
-                    aria-describedby={name + "-hint"}
+                    aria-describedby={id + "_label"}
                 >
                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                         <label
@@ -660,7 +669,7 @@ const RenderRadio = ({
             >
                 <fieldset
                     className="govuk-fieldset"
-                    aria-describedby={name + "-hint"}
+                    aria-describedby={id + "_label"}
                 >
                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                         <label
@@ -705,10 +714,13 @@ const RenderRadio = ({
                                     type="radio"
                                     className="govuk-radios__input"
                                     value={options[key].split("|")[0]}
-                                    // checked={
-                                    //     value ==
-                                    //     parseInt(options[key].split("|")[0])
-                                    // }
+                                    checked={
+                                        typeof value != "undefined" &&
+                                        value ==
+                                            parseInt(options[key].split("|")[0])
+                                            ? true
+                                            : false
+                                    }
                                     onChange={(e) => {
                                         let docListObj = custom.documentList;
                                         if (
@@ -751,10 +763,10 @@ export function Radiofield(props) {
         name,
         label,
         datafieldname,
-        parentField,
         form,
         formProps,
         parentFieldShowOnValue,
+        parentField,
         validation,
     } = props;
 
@@ -767,14 +779,13 @@ export function Radiofield(props) {
         .split(",");
 
     //parentFieldShowOnValue
-    var showIfHasParentShowValue = parentField != false;
-    //debugger;
-    // parentField != false &&
-    // !_.isEmpty(formProps[form]) &&
-    // _.has(formProps[form].values, parentField) &&
-    // parentFieldShowOnValue.indexOf(
-    //     formProps[form].values[parentField].toString()
-    // ) > -1;
+    var showIfHasParentShowValue =
+        parentField != false &&
+        !_.isEmpty(formProps[form]) &&
+        _.has(formProps[form].values, parentField) &&
+        parentFieldShowOnValue.indexOf(
+            formProps[form].values[parentField].toString()
+        ) > -1;
 
     (showIfHasParentShowValue == parentField) != false &&
         showIfHasParentShowValue;
@@ -942,7 +953,12 @@ const RenderPickList = ({
     dropdownObj = dropdownObj[0];
     return (
         <div>
-            <select {...input} className="govuk-select " id={name} name={name}>
+            <select
+                {...input}
+                className="govuk-select "
+                id={label}
+                name={label}
+            >
                 <option>{t("newappeal:select-default")}</option>
                 {Object.keys(dropdownObj).map((key, index) => {
                     return (
@@ -970,6 +986,7 @@ export function PickList(props) {
             </label>
             <Field
                 name={props.name}
+                label={props.name}
                 component={RenderPickList}
                 datafieldname={datafieldname}
                 picklistData={props.picklistData}
@@ -984,21 +1001,19 @@ export function NumericField(props) {
 
     return (
         <div className="govuk-form-group">
-            <label className="govuk-label" htmlFor={props.name}>
-                {FieldsTranslations(props.label)}
-            </label>
             <Field
                 name={props.name}
                 id={props.name}
                 type="number"
                 className="govuk-input  govuk-input--width-20"
                 spellCheck="false"
-                //aria-describedby="account-number-hint"
+                aria-describedby={name}
                 pattern="[0-9]*"
                 inputMode="numeric"
                 parse={Number}
                 validate={eval(validation)}
                 component={RenderTextfield}
+                label={label}
             />
         </div>
     );
@@ -1010,9 +1025,6 @@ export function DecimalField(props) {
 
     return (
         <div className="govuk-form-group">
-            <label className="govuk-label" htmlFor={props.name}>
-                {FieldsTranslations(props.label)}
-            </label>
             <Field
                 name={props.name}
                 id={props.name}
@@ -1020,12 +1032,13 @@ export function DecimalField(props) {
                 type="number"
                 className="govuk-input govuk-input--width-10"
                 spellCheck="false"
-                //aria-describedby="account-number-hint"
+                aria-describedby={name}
                 pattern="[0-9]*"
                 inputMode="numeric"
                 parse={Number}
                 validate={eval(validation)}
                 component={RenderTextfield}
+                label={props.label}
             />
         </div>
     );
@@ -1092,7 +1105,7 @@ const PickListTranslations = (optionValue) => {
 export function FileUploadField(props) {
     return (
         <>
-            <h4>{props.label} </h4>
+            <h2 className="govuk-heading-s">{props.label} </h2>
             <Field
                 name={props.name}
                 id={props.name}
diff --git a/components/myportal/topthree.js b/components/myportal/topthree.js
index 6b84e554..c11546b0 100644
--- a/components/myportal/topthree.js
+++ b/components/myportal/topthree.js
@@ -171,11 +171,6 @@ const TopThree = (props) => {
                                 className="govuk-link--no-underline"
                                 data-id={index}
                                 onClick={() => {
-                                    topThreeType == "awaitingSubmission" &&
-                                        console.log(
-                                            "appealDetails"
-                                            // props.props.awaitingSubmission
-                                        );
                                     setCurrentReference({
                                         "currentReference":
                                             topThreeType != "watchedCases"
@@ -258,6 +253,26 @@ const TopThree = (props) => {
                                   : "")}
                     </div>
 
+                    <div>
+                        {showTopThreeArr[key].pinswg_appellantagent !=
+                            846040000 && <b>Raised by: </b>}
+                        {showTopThreeArr[key].pinswg_appellantagent !=
+                            846040000 &&
+                            (showTopThreeArr[key].pinswg_agentcompanyname !=
+                                null &&
+                                showTopThreeArr[key].pinswg_agentcompanyname +
+                                    ", ") +
+                                showTopThreeArr[key].pinswg_agentfirstname +
+                                " " +
+                                showTopThreeArr[key].pinswg_agentlastname}
+                    </div>
+                    <div>
+                        <b>On behalf of: </b>
+                        {showTopThreeArr[key].pinswg_appellantfirstname +
+                            " " +
+                            showTopThreeArr[key].pinswg_appellantlastname}
+                    </div>
+
                     {router.locale == "cy"
                         ? jsonpath.query(
                               transLookup,
diff --git a/components/newappeal/aboutyou.js b/components/newappeal/aboutyou.js
index 4f6969db..83d38979 100644
--- a/components/newappeal/aboutyou.js
+++ b/components/newappeal/aboutyou.js
@@ -1,7 +1,8 @@
 import useTranslation from "next-translate/useTranslation";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
-import { Field, formValueSelector, reduxForm } from "redux-form";
+import { useEffect } from "react";
+import { Field, formValueSelector, reduxForm, change } from "redux-form";
 import {
     FieldsTranslations,
     Radiofield,
@@ -15,7 +16,13 @@ let AboutYou = (props) => {
     const router = useRouter();
     const { locale } = router;
 
-    const { onSubmit, handleSubmit, appellantAgentValue, setFormStep } = props;
+    const {
+        onSubmit,
+        handleSubmit,
+        appellantAgentValue,
+        setFormStep,
+        updateField,
+    } = props;
 
     const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
     const appellantAgent =
@@ -243,7 +250,7 @@ let AboutYou = (props) => {
                 >
                     <fieldset
                         className="govuk-fieldset"
-                        aria-describedby={name + "-hint"}
+                        aria-describedby={datafieldname + "-hint"}
                     >
                         <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
                             <label
@@ -272,11 +279,12 @@ let AboutYou = (props) => {
                             }
                         >
                             {" "}
-                            {custom.hint != false && (
-                                <div className="govuk-hint">
-                                    {t(custom.hint)}
-                                </div>
-                            )}
+                            {custom.hint != false ||
+                                (custom.hint != undefined && (
+                                    <div className="govuk-hint">
+                                        {t(custom.hint)}
+                                    </div>
+                                ))}
                             {Object.keys(options).map((key, index) => (
                                 <div
                                     className="govuk-radios__item"
@@ -424,6 +432,47 @@ let AboutYou = (props) => {
         console.log(JSON.stringify(values));
         setFormStep(1);
     };
+
+    const handlePartialUpdate = () => {
+        if (appellantAgentValue == "846040001") {
+            updateField("caseForm", "pinswg_appellantfirstname", "");
+            updateField("caseForm", "pinswg_appellantlastname", "");
+            updateField("caseForm", "pinswg_appellantemailaddress", "");
+            updateField("caseForm", "pinswg_appellantaddress", "");
+            updateField("caseForm", "pinswg_appellantphonenumber", "");
+        } else {
+            updateField(
+                "caseForm",
+                "pinswg_appellantfirstname",
+                props.initialValues.pinswg_appellantfirstname
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantlastname",
+                props.initialValues.pinswg_appellantlastname
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantemailaddress",
+                props.initialValues.pinswg_appellantemailaddress
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantaddress",
+                props.initialValues.pinswg_appellantaddress
+            );
+            updateField(
+                "caseForm",
+                "pinswg_appellantphonenumber",
+                props.initialValues.pinswg_appellantphonenumber
+            );
+        }
+    };
+
+    useEffect(() => {
+        handlePartialUpdate();
+    }, [appellantAgentValue]);
+
     return (
         <form onSubmit={handleSubmit(onHandleSubmit)}>
             <Field
@@ -723,11 +772,27 @@ const mapStateToProps = (state) => {
         formData: state.formData,
         appealType: state.appealType,
         //form: state.form,
+
+        initialValues: {
+            pinswg_appellantfirstname:
+                state.accountDetails.accountDetails.firstname,
+            pinswg_appellantlastname:
+                state.accountDetails.accountDetails.lastname,
+            pinswg_appellantemailaddress:
+                state.accountDetails.accountDetails.emailaddress1,
+            pinswg_appellantaddress:
+                state.accountDetails.accountDetails.address1_composite,
+            pinswg_appellantphonenumber:
+                state.accountDetails.accountDetails.telephone1,
+        },
     };
 };
 
 const mapDispatchToProps = (dispatch) => {
-    return {};
+    return {
+        updateField: (form, field, newValue) =>
+            dispatch(change(form, field, newValue)),
+    };
 };
 
 // AboutYou = reduxForm({
@@ -754,6 +819,8 @@ export default connect(
 )(
     reduxForm({
         form: "caseForm",
+        enableReinitialize: true, // this is needed!!
+
         destroyOnUnmount: false,
     })(AboutYou)
 );
diff --git a/components/newappeal/buildCheckfield.js b/components/newappeal/buildCheckfield.js
index a8b8e48d..6e34ec66 100644
--- a/components/newappeal/buildCheckfield.js
+++ b/components/newappeal/buildCheckfield.js
@@ -36,6 +36,9 @@ export default function BuildField(props) {
             case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
                 return <>{fieldValue}</>;
                 break;
+            case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
+                return <>{fieldValue}</>;
+                break;
             case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
                 return <>{fieldValue}</>;
                 break;
diff --git a/components/newappeal/buildcheckrow.js b/components/newappeal/buildcheckrow.js
index 6ebf6762..09d0a6b5 100644
--- a/components/newappeal/buildcheckrow.js
+++ b/components/newappeal/buildcheckrow.js
@@ -9,6 +9,7 @@ import fieldLookup from "../../data/crmfieldlookuptranslations.json";
 import {
     getFormCollectionByID,
     getPickListLabel,
+    getRadioLabel,
 } from "../../components/utils";
 
 import {
@@ -93,62 +94,91 @@ let BuildCheckRow = (props) => {
                             datafieldname[0].value +
                             "')]"
                     );
-                    if (typeof isRequiredField[0] != "undefined") {
-                        if (isRequiredField[0].RequiredLevel.Value != "None") {
-                            return (
-                                <div
-                                    className="govuk-summary-list__row"
-                                    key={key}
-                                >
-                                    <dt className="govuk-summary-list__key">
-                                        {FieldsTranslations(rows[0].value)}
-                                    </dt>
-                                    <dd className="govuk-summary-list__value">
-                                        {fieldtype[0].value ==
-                                        "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
-                                            ? formatDate(
-                                                  props.props.form["appealForm"]
+
+                    if (
+                        typeof props.props.form["appealForm"].values[
+                            datafieldname[0].value
+                        ] != "undefined"
+                    ) {
+                        if (typeof isRequiredField[0] != "undefined") {
+                            if (
+                                isRequiredField[0].RequiredLevel.Value != "None"
+                            ) {
+                                return (
+                                    <div
+                                        className="govuk-summary-list__row"
+                                        key={key}
+                                    >
+                                        <dt className="govuk-summary-list__key">
+                                            {FieldsTranslations(rows[0].value)}
+                                        </dt>
+
+                                        <dd className="govuk-summary-list__value">
+                                            {fieldtype[0].value ==
+                                            "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
+                                                ? formatDate(
+                                                      props.props.form[
+                                                          "appealForm"
+                                                      ].values[
+                                                          datafieldname[0].value
+                                                      ]
+                                                  )
+                                                : fieldtype[0].value ==
+                                                  "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
+                                                ? getPickListLabel(
+                                                      props.props.formData
+                                                          .pickListData,
+                                                      datafieldname[0].value,
+                                                      props.props.form[
+                                                          "appealForm"
+                                                      ].values[
+                                                          datafieldname[0].value
+                                                      ]
+                                                  )
+                                                : fieldtype[0].value ==
+                                                  "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}"
+                                                ? getRadioLabel(
+                                                      props.props.formData
+                                                          .pickListData,
+                                                      datafieldname[0].value,
+                                                      props.props.form[
+                                                          "appealForm"
+                                                      ].values[
+                                                          datafieldname[0].value
+                                                      ]
+                                                  )
+                                                : props.props.form["appealForm"]
                                                       .values[
                                                       datafieldname[0].value
-                                                  ]
-                                              )
-                                            : fieldtype[0].value ==
-                                              "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}"
-                                            ? getPickListLabel(
-                                                  props.props.formData
-                                                      .pickListData,
-                                                  datafieldname[0].value,
-                                                  props.props.form["appealForm"]
-                                                      .values[
-                                                      datafieldname[0].value
-                                                  ]
-                                              )
-                                            : props.props.form["appealForm"]
-                                                  .values[
-                                                  datafieldname[0].value
-                                              ]}
-                                    </dd>
-                                    <dd className="govuk-summary-list__actions">
-                                        <a
-                                            className="govuk-link"
-                                            href="#"
-                                            onClick={() => {
-                                                updateCurrentSection(
-                                                    whichSection
-                                                );
-                                            }}
-                                        >
-                                            {t("newappeal:change-link-label")}
-                                            <span className="govuk-visually-hidden">
-                                                {" "}
-                                                {FieldsTranslations(
-                                                    rows[0].value
+                                                  ]}
+                                        </dd>
+
+                                        <dd className="govuk-summary-list__actions">
+                                            <a
+                                                className="govuk-link"
+                                                href="#"
+                                                onClick={() => {
+                                                    updateCurrentSection(
+                                                        whichSection
+                                                    );
+                                                }}
+                                            >
+                                                {t(
+                                                    "newappeal:change-link-label"
                                                 )}
-                                            </span>
-                                        </a>
-                                    </dd>
-                                </div>
-                            );
+                                                <span className="govuk-visually-hidden">
+                                                    {" "}
+                                                    {FieldsTranslations(
+                                                        rows[0].value
+                                                    )}
+                                                </span>
+                                            </a>
+                                        </dd>
+                                    </div>
+                                );
+                            } else {
+                                return null;
+                            }
                         } else {
                             return null;
                         }
diff --git a/components/newappeal/buildchecksection.js b/components/newappeal/buildchecksection.js
index def05873..68137f51 100644
--- a/components/newappeal/buildchecksection.js
+++ b/components/newappeal/buildchecksection.js
@@ -65,9 +65,9 @@ let BuildCheckSection = (props) => {
                     <dl className="govuk-summary-list ">
                         {Object.keys(titles).map((key) => (
                             <div key={key}>
-                                {/* <h2 className="govuk-heading-m">
-                                {titles[key].value}
-                            </h2> */}
+                                <h2 className="govuk-heading-m govuk-!-margin-top-9">
+                                    {titles[key].value}
+                                </h2>
 
                                 <BuildCheckRow
                                     formXML={formXML}
diff --git a/components/newappeal/buildfield.js b/components/newappeal/buildfield.js
index c38e958a..0f4e9a50 100644
--- a/components/newappeal/buildfield.js
+++ b/components/newappeal/buildfield.js
@@ -164,10 +164,12 @@ export default function BuildField(props) {
                 break;
             case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
                 return (
-                    <FileUploadField
-                        name={props.datafieldname}
-                        label={props.label}
-                    />
+                    <div className="govuk-!-margin-bottom-9">
+                        <FileUploadField
+                            name={props.datafieldname}
+                            label={props.label}
+                        />
+                    </div>
                 );
                 break;
 
diff --git a/components/newappeal/buildprogress.js b/components/newappeal/buildprogress.js
index 9e52ce44..7b752d01 100644
--- a/components/newappeal/buildprogress.js
+++ b/components/newappeal/buildprogress.js
@@ -199,15 +199,15 @@ const BuildProgress = (props) => {
                 aria-labelledby="progress-list"
                 className="at-nav"
             >
-                <h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
+                <h2 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey progress-heading">
                     {t("newappeal:new-appeal-progress-nav-label")}:{" "}
                     <span className="progress-case-reference">
                         {props.props.appealType.caseReference.ticketnumber}
                     </span>
-                </h3>
+                </h2>
                 <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
 
-                <ol className="govuk-list">
+                <ol className="govuk-list" id="progress-list">
                     <ul className="govuk-list ">
                         <li className="at-nav__page">
                             <ol className="govuk-list">
diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js
index 1d196313..da9fb730 100644
--- a/components/newappeal/buildsection.js
+++ b/components/newappeal/buildsection.js
@@ -193,7 +193,7 @@ let BuildSection = (props) => {
         <div className="govuk-grid-row">
             <div className="govuk-grid-column-two-thirds">
                 <h1 className="govuk-heading-m  govuk-!-margin-top-5">
-                    {titles[0].value}
+                    {FieldsTranslations(titles[0].value)}
                 </h1>
                 <form onSubmit={handleSubmit(onHandleSubmit)}>
                     {hasErrors == true ? (
@@ -222,7 +222,7 @@ let BuildSection = (props) => {
                                 data-module="govuk-button"
                                 onClick={() => getErrors()}
                             >
-                                Continue
+                                {t("common:continue-button")}
                             </button>
                         ) : (
                             ""
@@ -233,7 +233,7 @@ let BuildSection = (props) => {
                                 className="govuk-button"
                                 data-module="govuk-button"
                             >
-                                Submit
+                                {t("common:submit-button")}
                             </button>
                         ) : (
                             ""
@@ -246,7 +246,7 @@ let BuildSection = (props) => {
                                     setCurrentSection(currentSection - 1)
                                 }
                             >
-                                Back
+                                {t("common:back-link")}
                             </a>
                         ) : (
                             ""
@@ -372,7 +372,7 @@ let BuildSection = (props) => {
                             );
                         }}
                     >
-                        Save and exit
+                        {t("common:save-exit-button")}
                     </button>
                 </div>
             </div>
diff --git a/components/newappeal/complete.js b/components/newappeal/complete.js
index 7325757b..cfedce36 100644
--- a/components/newappeal/complete.js
+++ b/components/newappeal/complete.js
@@ -35,8 +35,6 @@ let CompleteAppeal = (props) => {
         });
 
         updateBody = JSON.stringify(updateBody);
-        console.log("werwe");
-
         updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
         updateBody = updateBody.replace(/:"No"/gm, `:false`);
         updateBody = JSON.parse(updateBody);
diff --git a/components/newappeal/fileupload.js b/components/newappeal/fileupload.js
index c448309d..e7eb09e8 100644
--- a/components/newappeal/fileupload.js
+++ b/components/newappeal/fileupload.js
@@ -121,7 +121,7 @@ function DropzoneComponent(props) {
     );
 
     return (
-        <div className="govuk-grid-row">
+        <div className="govuk-grid-row ">
             <div className="govuk-form-group"></div>
             <section className="container">
                 <div {...getRootProps({ style, className: "dropzone" })}>
diff --git a/components/utils/index.js b/components/utils/index.js
index 2c8d8a23..32ac3c10 100644
--- a/components/utils/index.js
+++ b/components/utils/index.js
@@ -39,6 +39,19 @@ export const getPickListLabel = (data, picklistType, picklistID) => {
     return pickListLabel[0];
 };
 
+export const getRadioLabel = (data, radiotListName, radioListID) => {
+    const radioListData = jsonpath.query(
+        data,
+        "$..[?(@.LogicalName=='" + radiotListName + "')]"
+    );
+
+    const pickListLabel = jsonpath.query(
+        radioListData,
+        "$..[?(@.Value=='" + radioListID + "')].Label.LocalizedLabels..Label"
+    );
+    return pickListLabel[0];
+};
+
 /*
  * Get the details of a case from the appeal type
  * @param object searchResultsObj
diff --git a/data/crmfieldlookuptranslations.json b/data/crmfieldlookuptranslations.json
index 2047a1b0..097d0cf5 100644
--- a/data/crmfieldlookuptranslations.json
+++ b/data/crmfieldlookuptranslations.json
@@ -2347,6 +2347,18 @@
                 {
                     "value": "Please explain why you have chosen this procedure",
                     "value_cy": "Eglurwch pam eich bod wedi dewis y driniaeth hon"
+                },
+                {
+                    "value": "What procedure would you like the appeal to follow? More information on this can be found in the guidance notes.",
+                    "value_cy": "Pa weithdrefn yr hoffech i'r apêl ei dilyn? Ceir rhagor o wybodaeth am hyn yn y nodiadau canllaw."
+                },
+                {
+                    "value": "Do you intend to submit a costs application with this appeal? (see guidance for further information)",
+                    "value_cy": "A ydych yn bwriadu cyflwyno cais costau gyda'r apêl hon? (gweler y canllawiau am ragor o wybodaeth)"
+                },
+                {
+                    "value": "Do you intend to submit a planning obligation (a section 106 agreement or a unilateral undertaking) with this appeal?",
+                    "value_cy": "A ydych yn bwriadu cyflwyno rhwymedigaeth gynllunio (cytundeb adran 106 neu ymgymeriad unochrog) gyda’r apêl hon?"
                 }
             ]
         }
diff --git a/data/formsxml/planningappeals78.xml b/data/formsxml/planningappeals78.xml
index 7bd9ddb8..efcab909 100644
--- a/data/formsxml/planningappeals78.xml
+++ b/data/formsxml/planningappeals78.xml
@@ -434,17 +434,17 @@
 								<row>
 									<cell id="{5a26018b-1231-e309-ee62-cbe57ea5a9c1}" showlabel="true" locklevel="0">
 										<labels>
-											<label description="What procedure would you like the appeal to follow? More informatiion on this can be found in the guidance notes." languagecode="1033" />
+											<label description="What procedure would you like the appeal to follow? More information on this can be found in the guidance notes." languagecode="1033" />
 										</labels>
 										<control validation="[required]" id="pinswg_procedure" classid="{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}" datafieldname="pinswg_procedure" disabled="false" />
 									</cell>
 								</row>
 								<row>
-									<cell id="{8b1c3c99-3b8a-d009-59c9-580e10951844}" showlabel="true" locklevel="0">
+									<cell id="{164eb8e5-6562-923d-5d29-824723d3177a}" showlabel="true" locklevel="0">
 										<labels>
 											<label description="Would you prefer a virtual or in person event?" languagecode="1033" />
 										</labels>
-										<control id="pinswg_virtualorinpersonevent" parentField="pinswg_procedure" parentFieldShowOnValue="846040001,846040002" classid="{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}" datafieldcontent="[846040000|newappeal:new-appeal-procedure-option-virtual,846040001|newappeal:new-appeal-procedure-option-inperson]" datafieldname="pinswg_virtualorinpersonevent" disabled="false" uniqueid="{d36097a3-122e-273b-75b4-2230a0917679}" />
+										<control id="pinswg_virtualorinpersonevent" parentField="pinswg_procedure" parentFieldShowOnValue="846040001,846040002" classid="{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}" datafieldcontent="[846040000|newappeal:new-appeal-procedure-option-virtual,846040001|newappeal:new-appeal-procedure-option-inperson,846040002|newappeal:new-appeal-procedure-option-hybrid]" datafieldname="pinswg_virtualorinpersonevent" disabled="false" uniqueid="{d36097a3-122e-273b-75b4-2230a0917679}" />
 									</cell>
 								</row>
 								<row>
@@ -452,7 +452,7 @@
 										<labels>
 											<label description="Please explain why you have chosen this procedure" languagecode="1033" />
 										</labels>
-										<control id="pinswg_chosenprocedureexplanation" classid="{E0DECE4B-6FC8-4a8f-A065-082708572369}" datafieldname="pinswg_chosenprocedureexplanation" disabled="false" uniqueid="{76e34a67-9087-98a0-037b-c4e2077d3248}" />
+										<control id="pinswg_chosenprocedureexplanation" parentField="pinswg_procedure" parentFieldShowOnValue="846040001,846040002" classid="{E0DECE4B-6FC8-4a8f-A065-082708572369}" datafieldname="pinswg_chosenprocedureexplanation" disabled="false" uniqueid="{76e34a67-9087-98a0-037b-c4e2077d3248}" />
 									</cell>
 								</row>
 								<row>
diff --git a/data/picklistLookups.json b/data/picklistLookups.json
index ed173383..785b472f 100644
--- a/data/picklistLookups.json
+++ b/data/picklistLookups.json
@@ -1161,6 +1161,54 @@
                 {
                     "value": "Yes",
                     "value_cy": "Ydw"
+                },
+                {
+                    "value": "Failed to give notice of its decision within the appropriate period (Usually 8 weeks) on an application for permission or approval",
+                    "value_cy": "Wedi methu â rhoi hysbysiad o’i benderfyniad o fewn y cyfnod priodol (8 wythnos fel arfer) ar gais am ganiatâd neu gymeradwyaeth"
+                },
+                {
+                    "value": "Granted approval of the matters reserved under the outline planning permission subject to conditions which you object",
+                    "value_cy": "Wedi cymeradwyo’r materion a gadwyd yn ôl o dan y caniatâd cynllunio amlinellol gydag amodau yr ydych yn eu gwrthwynebu"
+                },
+                {
+                    "value": "Granted planning permission for the development subject to the conditions which you object",
+                    "value_cy": "Wedi rhoi caniatâd cynllunio ar gyfer y datblygiad gyda'r amodau yr ydych yn eu gwrthwynebu"
+                },
+                {
+                    "value": "Refuse listed building consent/conservation area consent for the development as described",
+                    "value_cy": "Gwrthod caniatâd adeilad rhestredig/caniatâd ardal gadwraeth ar gyfer y datblygiad fel y disgrifir"
+                },
+                {
+                    "value": "Refused approval of the matters reserved under an outline planning permission",
+                    "value_cy": "Gwrthod cymeradwyo'r materion a gadwyd yn ôl o dan ganiatâd cynllunio amlinellol"
+                },
+                {
+                    "value": "Refused permission to vary or remove a condition(s)",
+                    "value_cy": "Gwrthod caniatâd i amrywio neu ddileu amod(au)"
+                },
+                {
+                    "value": "Refused planning permission for the development",
+                    "value_cy": "Gwrthod caniatâd cynllunio ar gyfer y datblygiad"
+                },
+                {
+                    "value": "Refused to approve any matters requiered by a condition on a previous planning permission (other than those above)",
+                    "value_cy": "Gwrthod caniatáu unrhyw faterion y gofynnwyd amdanynt gan amod ar ganiatâd cynllunio blaenorol (ac eithrio’r rhai uchod)"
+                },
+                {
+                    "value": "Select...",
+                    "value_cy": "Dewiswch..."
+                },
+                {
+                    "value": "Written representation",
+                    "value_cy": "Cynrychiolaeth ysgrifenedig"
+                },
+                {
+                    "value": "Hearing",
+                    "value_cy": "Clyw"
+                },
+                {
+                    "value": "Inquiry",
+                    "value_cy": "Ymholiad"
                 }
             ]
         }
diff --git a/locales/cy/common.json b/locales/cy/common.json
index 64216705..20b88f5c 100644
--- a/locales/cy/common.json
+++ b/locales/cy/common.json
@@ -15,6 +15,9 @@
   "available-in": "English",
   "continue-button": "Parhewch",
   "search-button": "Chwilio",
+  "submit-button": "Cyflwyno",
+  "back-link": "Yn ol",
+  "save-exit-button": "Cadw a gadael",
   "submit-and-start": "Cyflwyno a dechrau'r cwrs",
   "footer-terms-conditions-link-label": "Telerau ac amodau",
   "footer-terms-conditions-link": "https://llyw.cymru/gwaith-achos-cynllunio-telerau-ac-amodau",
diff --git a/locales/cy/newappeal.json b/locales/cy/newappeal.json
index ea963b02..4bf19550 100644
--- a/locales/cy/newappeal.json
+++ b/locales/cy/newappeal.json
@@ -49,5 +49,6 @@
     "new-appeal-agricultural-holding-option-no": "(b) (i) Mae safle’r apêl yn ddaliad amaethyddol, neu’n rhan o ddaliad amaethyddol, a’r apelydd yw’r unig denant amaethyddol",
     "new-appeal-agricultural-holding-option-NA": "(b) (ii) Mae safle’r apêl yn ddaliad amaethyddol neu’n rhan o ddaliad amaethyddol ac mae’r apelydd (neu’r asiant) wedi rhoi’r hysbysiad gofynnol i bob person (ac eithrio’r apelydd) sydd, ar y diwrnod 21 diwrnod cyn y dyddiad o’r apêl, a oedd yn denant daliad amaethyddol ar y cyfan neu ran o’r tir y mae’r apêl yn ymwneud ag ef fel a restrir isod:",
     "new-appeal-procedure-option-virtual": "Rhith",
-    "new-appeal-procedure-option-inperson": "Yn bersonol"
+    "new-appeal-procedure-option-inperson": "Yn bersonol",
+    "new-appeal-procedure-option-hybrid": "Hybrid"
 }
\ No newline at end of file
diff --git a/locales/en/common.json b/locales/en/common.json
index 9f8685a5..54896874 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -15,6 +15,9 @@
   "available-in": "Cymraeg",
   "continue-button": "Continue",
   "search-button": "Search",
+  "submit-button": "Submit",
+  "back-link": "Back",
+  "save-exit-button": "Save and exit",
   "submit-and-start": "Submit and start course",
   "footer-terms-conditions-link-label": "Terms and conditions",
   "footer-terms-conditions-link": "https://gov.wales/planning-casework-terms-and-conditions",
diff --git a/locales/en/newappeal.json b/locales/en/newappeal.json
index 16fc758e..013645ef 100644
--- a/locales/en/newappeal.json
+++ b/locales/en/newappeal.json
@@ -49,5 +49,6 @@
     "new-appeal-agricultural-holding-option-no": "(b) (i) The appeal site is, or is part of an agricultural holding, and the appellant is the sole agricultural tenant",
     "new-appeal-agricultural-holding-option-NA": "(b) (ii) The appeal site is, or is part of, an agricultural holding and the appellant (or the agent) has given the requisite notice to every person (other than the appellant) who, on the day 21 days before the date of the appeal, was a tenant of anagricultural holding on all or part of the land to which the appeal relates as listed below:",
     "new-appeal-procedure-option-virtual": "Virtual",
-    "new-appeal-procedure-option-inperson": "In person"
+    "new-appeal-procedure-option-inperson": "In person",
+    "new-appeal-procedure-option-hybrid": "Hybrid"
 }
\ No newline at end of file
diff --git a/pages/api/endpoint/getawaitingsubmission_api.js b/pages/api/endpoint/getawaitingsubmission_api.js
index 23a14d80..5b90d275 100644
--- a/pages/api/endpoint/getawaitingsubmission_api.js
+++ b/pages/api/endpoint/getawaitingsubmission_api.js
@@ -22,10 +22,11 @@ export default async function ApiProxy(req, res) {
     var token = await getToken();
 
     var queryUrl =
-        "incidents?$select=description,numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=_customerid_value eq " +
+        "incidents?$select=description,numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value,pinswg_appellantlastname,pinswg_appellantfirstname,pinswg_appellantagent,pinswg_agentfirstname,pinswg_agentlastname,pinswg_agentcompanyname&$expand=primarycontactid($select=fullname)&$filter=_customerid_value eq " +
         loggedInUserId +
         " and servicestage eq 1 and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true";
 
+    console.log(WEBAPI_URL + queryUrl + hashAPIPath(queryUrl));
     return axios
         .get(
             WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
diff --git a/pages/api/endpoint/getawaitingsubmissionproxy_api.js b/pages/api/endpoint/getawaitingsubmissionproxy_api.js
index c8ef9721..69f1237a 100644
--- a/pages/api/endpoint/getawaitingsubmissionproxy_api.js
+++ b/pages/api/endpoint/getawaitingsubmissionproxy_api.js
@@ -22,7 +22,7 @@ export default async function ApiProxy(req, res) {
     var token = await getToken();
 
     var queryUrl =
-        "incidents?$select=description,numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=_customerid_value eq " +
+        "incidents?$select=description,numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value,pinswg_appellantlastname,pinswg_appellantfirstname,pinswg_appellantagent,pinswg_agentfirstname,pinswg_agentlastname,pinswg_agentcompanyname&$expand=primarycontactid($select=fullname)&$filter=_customerid_value eq " +
         loggedInUserId +
         " and pinswg_appealcasetype ne null&$orderby=createdon desc&$count=true";
 
diff --git a/pages/newappeal/index.js b/pages/newappeal/index.js
index f9482ff3..1a2ff2b9 100644
--- a/pages/newappeal/index.js
+++ b/pages/newappeal/index.js
@@ -2,13 +2,20 @@ import useTranslation from "next-translate/useTranslation";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
-import { getAppealsTypesForNewAppeal, getLPA } from "../../actions";
+import {
+    getAppealsTypesForNewAppeal,
+    getLPA,
+    getPersonalAccount,
+} from "../../actions";
 import Breadcrumbs from "../../components/breadcrumbs";
 import CookieBanner from "../../components/cookieBanner";
 import Footer from "../../components/footer";
 import Header from "../../components/header";
 import CreateCase from "../../components/newappeal/createCase";
-import { setLoggedInUserId } from "../../store/accountDetails/action";
+import {
+    setAccountDetails,
+    setLoggedInUserId,
+} from "../../store/accountDetails/action";
 import { setAppealType } from "../../store/appealType/action";
 import { setLPA } from "../../store/lpa/action";
 import { wrapper } from "../../store/store";
@@ -130,11 +137,16 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
         let loggedInUser = cookies.pinsUser;
 
-        const [appealTypeData, lpaData, caseData] = await Promise.all([
+        console.log("has loggedInUser", loggedInUser);
+
+        const [appealTypeData, lpaData, accountDetails] = await Promise.all([
             await getAppealsTypesForNewAppeal(),
             await getLPA(),
+            await getPersonalAccount(loggedInUser),
         ]);
 
+        console.log("wewerwe s s", accountDetails);
+
         const providerConfig = await getProviderConfig();
         // const lpaData = require("../../data/lpa.json");
         // const appealTypeData = require("../../data/appealtypes.json");
@@ -143,6 +155,7 @@ export const getServerSideProps = wrapper.getServerSideProps(
         store.dispatch(setAppealType(appealTypeData));
         store.dispatch(setLPA(lpaData));
         store.dispatch(setLoggedInUserId(loggedInUser));
+        store.dispatch(setAccountDetails(accountDetails));
     }
 );