From 32664f73e6bc9e244fe4e4cd9f35f560b12e8d2d Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Wed, 11 Dec 2024 05:56:41 +0000
Subject: [PATCH] validation on date field in sub field for owner and tenant

---
 components/elements/index.js | 127 ++++++++++++++++++++---------------
 1 file changed, 73 insertions(+), 54 deletions(-)

diff --git a/components/elements/index.js b/components/elements/index.js
index 00ac5a20..d2c97843 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -656,17 +656,20 @@ const RenderDatePicker = ({
                             </div>
                         )}
                     </legend>
-                    {touched && error && (
-                        <span
-                            id={id + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
+                    {!custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
+                              <span
+                                  id={id + "-error"}
+                                  className="govuk-error-message"
+                              >
+                                  <span className="govuk-visually-hidden">
+                                      Error:
+                                  </span>{" "}
+                                  {errorMsg}
+                              </span>
+                          )
+                        : ""}
 
                     {/* {value}
                     <br />
@@ -693,6 +696,20 @@ const RenderDatePicker = ({
                         autoComplete="off"
                         //value={!value ? null : moment(value, "DD/MM/yyyy")}
                     />
+                    {custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
+                              <span
+                                  id={id + "-error"}
+                                  className="govuk-error-message"
+                              >
+                                  <span className="govuk-visually-hidden">
+                                      Error:
+                                  </span>{" "}
+                                  {error}
+                              </span>
+                          )
+                        : ""}
                 </fieldset>
             </div>
         </>
@@ -2214,54 +2231,56 @@ const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
 
         return errors;
     };
+    const required = (value) =>
+        value ? undefined : t("newappeal:is-required-label");
 
     return (
-        <ul>
-            <div>
-                {fields.map((member, index) => (
-                    <div key={index}>
-                        <h4>
-                            {subTitle == "owners" ? "Owner" : "Tenant"} #
-                            {index + 1}
-                        </h4>
+        <ul className="subFieldList">
+            {fields.map((member, index) => (
+                <div key={index}>
+                    <h4>
+                        {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
+                    </h4>
 
-                        <div className="fieldArrayContainer">
-                            <Field
-                                id={`${member}.${fields.name}`}
-                                name={`${member}.${fields.name}`}
-                                type="text"
-                                component={RenderTextfield}
-                                validate={[checkValue]}
-                                label={
-                                    subTitle == "owners"
-                                        ? "Owner name"
-                                        : "Tenant name"
-                                }
-                                className="govuk-input govuk-input--width-10"
-                                showErrorBottom={true}
-                            />
-                            <Field
-                                name={`${member}.dateserved`}
-                                type="text"
-                                component={RenderDatePicker}
-                                label="Date served "
-                                dateStart={"-6m"}
-                                dateEnd={"0"}
-                                className="govuk-input govuk-input--width-10"
-                            />
+                    <div className="fieldArrayContainer">
+                        <Field
+                            id={`${member}.${fields.name}`}
+                            name={`${member}.${fields.name}`}
+                            type="text"
+                            component={RenderTextfield}
+                            validate={[checkValue]}
+                            label={
+                                subTitle == "owners"
+                                    ? "Owner name"
+                                    : "Tenant name"
+                            }
+                            className="govuk-input govuk-input--width-10"
+                            showErrorBottom={true}
+                        />
+                        <Field
+                            name={`${member}.dateserved`}
+                            type="text"
+                            component={RenderDatePicker}
+                            label="Date served "
+                            dateStart={"-6m"}
+                            dateEnd={"0"}
+                            validate={[required]}
+                            className="govuk-input govuk-input--width-10"
+                            showErrorBottom={true}
+                        />
 
-                            <button
-                                type="button"
-                                title="Remove"
-                                onClick={() => fields.remove(index)}
-                                className="govuk-button fieldArrayDelete"
-                            >
-                                X
-                            </button>
-                        </div>
+                        <button
+                            type="button"
+                            title="Remove"
+                            onClick={() => fields.remove(index)}
+                            className="govuk-button fieldArrayDelete"
+                        >
+                            X
+                        </button>
                     </div>
-                ))}
-            </div>
+                </div>
+            ))}
+
             <br />
             {fields.length < custom.maxSubField && (
                 <button