From 777df3f90774db06576cc103184e62caf79f4061 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Wed, 28 Jul 2021 15:29:20 +0100
Subject: [PATCH] mobile fixes

---
 components/account/personaldetails.js     |  5 +---
 components/elements/index.js              | 14 +++++-----
 components/newappeal/buildcheckrow.js     | 30 +++++++++++++++++----
 components/newappeal/buildchecksection.js |  5 +++-
 components/newappeal/buildsection.js      |  2 +-
 components/newappeal/createCase.js        |  4 +--
 pages/newappeal/index.js                  | 32 ++++++++++-------------
 styles/sass/welshgov/_application.scss    |  7 +++++
 8 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/components/account/personaldetails.js b/components/account/personaldetails.js
index 78701686..5bb8040d 100644
--- a/components/account/personaldetails.js
+++ b/components/account/personaldetails.js
@@ -96,7 +96,7 @@ const PersonalDetails = (props) => {
 
     return (
         <>
-            {props.accountUpdatedComplete != true ? (
+            {props.accountUpdatedComplete == false ? (
                 props.personalDetailsComplete == false ? (
                     <form onSubmit={handleSubmit(onHandleSubmit)}>
                         <fieldset className="govuk-fieldset">
@@ -216,9 +216,6 @@ const PersonalDetails = (props) => {
                                 type="submit"
                                 className="govuk-button"
                                 data-module="govuk-button"
-                                onClick={() => {
-                                    setPersonalDetailsComplete(true);
-                                }}
                             >
                                 Continue
                             </button>
diff --git a/components/elements/index.js b/components/elements/index.js
index 8b3409a8..60e6afe2 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -53,7 +53,7 @@ export function Textfield(props) {
             component={RenderTextfield}
             type="text"
             className="govuk-input govuk-input--width-20"
-            validate={[required]}
+            //validate={[required]}
             label={props.label}
             errorMsg="Is required"
         />
@@ -83,12 +83,12 @@ export function MultiLinefield(props) {
     return (
         <div className="govuk-form-group">
             <h1 className="govuk-label-wrapper">
-                <label className="govuk-label" htmlFor="more-detail">
+                <label className="govuk-label" htmlFor={props.name}>
                     {props.label}
                 </label>
             </h1>
             <div
-                id="more-detail-hint"
+                id={props.name + "-hint"}
                 className="govuk-hint govuk-!-font-size-14"
             >
                 Do not include personal or financial information, like your
@@ -102,7 +102,7 @@ export function MultiLinefield(props) {
                 type="text"
                 rows="5"
                 className="govuk-textarea govuk-input--width-30"
-                aria-describedby="more-detail-hint"
+                aria-describedby={props.name + "-hint"}
             />
         </div>
     );
@@ -387,7 +387,7 @@ const RenderPickList = ({
 
     return (
         <div>
-            <select {...input} className="govuk-select" id={name} name={name}>
+            <select {...input} className="govuk-select " id={name} name={name}>
                 <option>Select...</option>
                 {Object.keys(dropdownObj).map((key, index) => {
                     return (
@@ -441,7 +441,7 @@ export function NumericField(props) {
                 type="text"
                 className="govuk-input  govuk-input--width-20"
                 spellCheck="false"
-                aria-describedby="account-number-hint"
+                //aria-describedby="account-number-hint"
                 pattern="[0-9]*"
                 inputMode="numeric"
             />
@@ -464,7 +464,7 @@ export function DecimalField(props) {
                 type="text"
                 className="govuk-input  govuk-input--width-10"
                 spellCheck="false"
-                aria-describedby="account-number-hint"
+                //aria-describedby="account-number-hint"
                 pattern="[0-9]*"
                 inputMode="numeric"
             />
diff --git a/components/newappeal/buildcheckrow.js b/components/newappeal/buildcheckrow.js
index 145abfc8..6eda3f21 100644
--- a/components/newappeal/buildcheckrow.js
+++ b/components/newappeal/buildcheckrow.js
@@ -34,6 +34,21 @@ let BuildCheckRow = (props) => {
         doc
     );
 
+    function formatDate(dateObj) {
+        var m = new Date(dateObj);
+        var dateString;
+        dateObj != null
+            ? (dateString =
+                  ("0" + m.getDate()).slice(-2) +
+                  "/" +
+                  ("0" + (m.getMonth() + 1)).slice(-2) +
+                  "/" +
+                  m.getFullYear())
+            : (dateString = "");
+
+        return dateString;
+    }
+
     return (
         <>
             {Object.keys(rowXML).map((key, index) => {
@@ -51,11 +66,16 @@ let BuildCheckRow = (props) => {
                             {rows[0].value}
                         </dt>
                         <dd className="govuk-summary-list__value">
-                            {
-                                props.props.form["appealForm"].values[
-                                    datafieldname[0].value
-                                ]
-                            }
+                            {fieldtype[0].value ==
+                            "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
+                                ? formatDate(
+                                      props.props.form["appealForm"].values[
+                                          datafieldname[0].value
+                                      ]
+                                  )
+                                : props.props.form["appealForm"].values[
+                                      datafieldname[0].value
+                                  ]}
                         </dd>
                         <dd className="govuk-summary-list__actions">
                             <a
diff --git a/components/newappeal/buildchecksection.js b/components/newappeal/buildchecksection.js
index ca02941a..310fa566 100644
--- a/components/newappeal/buildchecksection.js
+++ b/components/newappeal/buildchecksection.js
@@ -67,7 +67,10 @@ let BuildCheckSection = (props) => {
                                 {titles[key].value}
                             </h2>
 
-                            <dl className="govuk-summary-list  govuk-!-margin-bottom-9">
+                            <dl
+                                className="govuk-summary-list  govuk-!-margin-bottom-9"
+                                key={key}
+                            >
                                 <BuildCheckRow
                                     formXML={formXML}
                                     whichSection={parseInt(key) + 1}
diff --git a/components/newappeal/buildsection.js b/components/newappeal/buildsection.js
index 0002d5dd..e9bcbda0 100644
--- a/components/newappeal/buildsection.js
+++ b/components/newappeal/buildsection.js
@@ -88,7 +88,7 @@ let BuildSection = (props) => {
                 //get label from error key - search rowxml for id = errorobj
 
                 errorList.push(
-                    <li>
+                    <li key={i}>
                         <a href={"#" + errorsobj[i] + "_label"}>
                             {" "}
                             {getErrorLabel(errorsobj[i])}
diff --git a/components/newappeal/createCase.js b/components/newappeal/createCase.js
index f80c367e..db727b74 100644
--- a/components/newappeal/createCase.js
+++ b/components/newappeal/createCase.js
@@ -82,7 +82,7 @@ let CreateCase = (props) => {
                     <div>
                         <select
                             {...input}
-                            className="govuk-select govuk-input--error"
+                            className="govuk-select govuk-!-width-one-half"
                             id="lpatypes"
                             name={name}
                             //onChange={(e) => props.onChangeSelectLPA(e)}
@@ -143,7 +143,7 @@ let CreateCase = (props) => {
                     <div>
                         <select
                             {...input}
-                            className="govuk-select"
+                            className="govuk-select govuk-!-width-one-half"
                             id="appealTypes"
                             name={name}
                             //onChange={(e) => props.onChangeSelectAppealType(e)}
diff --git a/pages/newappeal/index.js b/pages/newappeal/index.js
index f5570892..e946b9fe 100644
--- a/pages/newappeal/index.js
+++ b/pages/newappeal/index.js
@@ -50,24 +50,20 @@ const Home = (props) => {
                 <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} />
-                            <main
-                                className="govuk-main-wrapper--auto-spacing"
-                                id="main-content"
-                                role="main"
-                            >
-                                <h1>New Appeal</h1>
-                                <CreateCase
-                                    LPAData={props.LPAData}
-                                    appealType={props.setAppealType}
-                                />
-                            </main>
-                        </div>
-                    </div>
+                <div className="govuk-width-container">
+                    <Banner />
+                    <Breadcrumbs slug={appealtypes} />
+                    <main
+                        className="govuk-main-wrapper--auto-spacing"
+                        id="main-content"
+                        role="main"
+                    >
+                        <h1>New Appeal</h1>
+                        <CreateCase
+                            LPAData={props.LPAData}
+                            appealType={props.setAppealType}
+                        />
+                    </main>
                 </div>
 
                 <Footer footerLinks={footerLinks} />
diff --git a/styles/sass/welshgov/_application.scss b/styles/sass/welshgov/_application.scss
index 9f52ce25..dd75933c 100644
--- a/styles/sass/welshgov/_application.scss
+++ b/styles/sass/welshgov/_application.scss
@@ -30,6 +30,13 @@ a {
     background-color: #323232;
 }
 
+.govuk-grid-row {
+    @media screen and (max-width: 900px) {
+        // margin-right: 0px;
+        // margin-left: 0px;
+    }
+}
+
 .govuk-button {
     background-color: $red;