From 821b534e7b5f2ef82048dcbb0fb971be2d85d30c Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Fri, 26 Apr 2024 11:20:13 +0100
Subject: [PATCH] yesno field value true/false & validation on picklist

---
 components/elements/index.js | 133 ++++++++++++++++++++++-------------
 1 file changed, 83 insertions(+), 50 deletions(-)

diff --git a/components/elements/index.js b/components/elements/index.js
index c328e35f..3b9bcc3e 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -774,18 +774,35 @@ const RenderYesNo = ({
                                     component="input"
                                     type="radio"
                                     className="govuk-radios__input"
-                                    value={options[key]}
+                                    value={
+                                        options[key] == "Yes" ||
+                                        options[key] == "Ydw"
+                                            ? true
+                                            : false
+                                    }
                                     //checked={value == options[key]}
+
+                                    checked={
+                                        typeof value != "undefined" &&
+                                        value ==
+                                            (options[key] == "Yes" ||
+                                            options[key] == "Ydw"
+                                                ? "true"
+                                                : "false")
+                                    }
                                     onChange={(e) => {
                                         let docListObj = custom.documentList;
                                         if (
                                             custom.requiredDocumentValue ==
                                                 "Yes" ||
                                             custom.requiredDocumentValue ==
-                                                "Ydw"
+                                                "Ydw" ||
+                                            custom.requiredDocumentValue ==
+                                                "true"
                                         ) {
                                             e.target.value == "Ydw" ||
-                                            e.target.value == "Yes"
+                                            e.target.value == "Yes" ||
+                                            e.target.value == "true"
                                                 ? (docListObj = Object.assign(
                                                       docListObj,
                                                       {
@@ -855,7 +872,7 @@ export function YesNofield(props) {
                         options={yesNo}
                         id={props.name}
                         className={"govuk-radios__input"}
-                        validate={eval(validation)}
+                        validate={[required]}
                         errorMsg={t("newappeal:select-an-option-label")}
                         component={RenderYesNo}
                         inline={_.has(props, "inline") ? props.inline : "true"}
@@ -873,7 +890,7 @@ export function YesNofield(props) {
                     options={yesNo}
                     id={props.name}
                     className={"govuk-radios__input"}
-                    validate={eval(validation)}
+                    validate={[required]}
                     errorMsg={t("newappeal:select-an-option-label")}
                     component={RenderYesNo}
                     inline={_.has(props, "inline") ? props.inline : "true"}
@@ -1175,10 +1192,12 @@ export function CheckBoxfield(props) {
 const RenderPickList = ({
     datafieldname,
     picklistData,
+    id,
     name,
     label,
     input,
-    meta: { touched, errorStr },
+    errorMsg,
+    meta: { touched, error },
 }) => {
     let { t } = useTranslation();
 
@@ -1187,56 +1206,70 @@ const RenderPickList = ({
         picklistData
     );
     dropdownObj = dropdownObj[0];
-    return (
-        <div>
-            <select
-                {...input}
-                className="govuk-select "
-                id={label}
-                name={label}
-            >
-                <option>{t("newappeal:select-default")}</option>
-                {Object.keys(dropdownObj).map((key, index) => {
-                    return (
-                        <option key={key} value={dropdownObj[key].Value}>
-                            {PickListTranslations(
-                                dropdownObj[key].Label.LocalizedLabels[0].Label
-                            )}
-                        </option>
-                    );
-                })}
-            </select>
 
-            {touched && errorStr && <span>{errorStr}</span>}
-        </div>
+    const required = (value) => {
+        return value || value == 0 ? undefined : "Requirewwwd";
+    };
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {FieldsTranslations(label)}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </span>
+                )}
+                <select
+                    {...input}
+                    className="govuk-select "
+                    id={label}
+                    name={label}
+                >
+                    <option>{t("newappeal:select-default")}</option>
+                    {Object.keys(dropdownObj).map((key, index) => {
+                        return (
+                            <option key={key} value={dropdownObj[key].Value}>
+                                {PickListTranslations(
+                                    dropdownObj[key].Label.LocalizedLabels[0]
+                                        .Label
+                                )}
+                            </option>
+                        );
+                    })}
+                </select>
+            </div>
+        </>
     );
 };
 
 export function PickList(props) {
     const { name, label, datafieldname, hint } = props;
     let { t } = useTranslation();
+    const required = (value) => {
+        return value || value == 0 ? undefined : "Is required";
+    };
     return (
-        <div className="govuk-form-group">
-            <label className="govuk-label govuk-body-m" htmlFor={props.name}>
-                {FieldsTranslations(label)}
-            </label>
-            <div
-                id={props.name + "-hint"}
-                className="govuk-hint govuk-!-font-size-14"
-            >
-                {props.hasOwnProperty("hint") &&
-                    props.hint != false &&
-                    t(props.hint)}{" "}
-            </div>
-            <Field
-                name={props.name}
-                label={props.name}
-                component={RenderPickList}
-                datafieldname={datafieldname}
-                picklistData={props.picklistData}
-                hint={props.hint}
-            />
-        </div>
+        <Field
+            name={props.name}
+            id={props.name}
+            label={props.label}
+            component={RenderPickList}
+            datafieldname={datafieldname}
+            picklistData={props.picklistData}
+            hint={props.hint}
+            errorMsg="Is required"
+            validate={[required]}
+        />
     );
 }
 
@@ -1251,7 +1284,7 @@ export function NumericField(props) {
         parentField,
     } = props;
     const required = (value) => {
-        return value || value == 0 ? undefined : "Requirewwwd";
+        return value || value == 0 ? undefined : "Is required";
     };
 
     //parentFieldShowOnValue
@@ -1324,7 +1357,7 @@ export function DecimalField(props) {
         parentField,
         maxFieldLength,
     } = props;
-    const required = (value) => (value ? undefined : "Required");
+    const required = (value) => (value ? undefined : "Is required");
 
     //parentFieldShowOnValue
     var showIfHasParentShowValue =