max 5 owners or tenants in field arry

components/elements/index.js

@@ -51,12 +51,20 @@ const RenderTextfield = ({
                 <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                     {FieldsTranslations(label)}
                 </label>
-                {touched && error && (
+                {!custom.hasOwnProperty("showErrorBottom")
-                    <span id={id + "-error"} className="govuk-error-message">
+                    ? touched &&
-                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                      error && (
-                        {error}
+                          <span
-                    </span>
+                              id={id + "-error"}
-                )}
+                              className="govuk-error-message"
+                          >
+                              <span className="govuk-visually-hidden">
+                                  Error:
+                              </span>{" "}
+                              {error}
+                          </span>
+                      )
+                    : ""}
                 <input
                     {...input}
                     type={custom.type}
@@ -76,6 +84,20 @@ const RenderTextfield = ({
                             : undefined
                     }
                 />
+                {custom.hasOwnProperty("showErrorBottom")
+                    ? touched &&
+                      error && (
+                          <span
+                              id={id + "-error"}
+                              className="govuk-error-message"
+                          >
+                              <span className="govuk-visually-hidden">
+                                  Error:
+                              </span>{" "}
+                              {error}
+                          </span>
+                      )
+                    : ""}
             </div>
         </>
     );
@@ -2037,7 +2059,7 @@ const renderField = ({ input, label, type, meta: { touched, error } }) => (
     </div>
 );
 
-const RenderSubFields = ({ fields }) => {
+const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
     let { t } = useTranslation();
 
     let subTitle = fields.name.split("pinswg_")[1];
@@ -2045,12 +2067,16 @@ const RenderSubFields = ({ fields }) => {
     const checkValue = (value) => {
         let errors;
 
-        // Check for emojis using a regular expression
+        if (!value) {
-        const emojiRegex =
+            errors = t("newappeal:is-required-label");
-            /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
+        } else {
+            // Check for emojis using a regular expression
+            const emojiRegex =
+                /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
 
-        if (emojiRegex.test(value)) {
+            if (emojiRegex.test(value)) {
-            errors = "Emojis are not allowed";
+                errors = "Emojis are not allowed";
+            }
         }
 
         return errors;
@@ -2065,6 +2091,7 @@ const RenderSubFields = ({ fields }) => {
                             {subTitle == "owners" ? "Owners" : "Tenant"} #
                             {index + 1}
                         </h4>
+
                         <div className="fieldArrayContainer">
                             <Field
                                 id={`${member}.${fields.name}`}
@@ -2078,6 +2105,7 @@ const RenderSubFields = ({ fields }) => {
                                         : "Tenant name"
                                 }
                                 className="govuk-input govuk-input--width-10"
+                                showErrorBottom={true}
                             />
                             <Field
                                 name={`${member}.dateserved`}
@@ -2088,6 +2116,7 @@ const RenderSubFields = ({ fields }) => {
                                 dateEnd={"0"}
                                 className="govuk-input govuk-input--width-10"
                             />
+
                             <button
                                 type="button"
                                 title="Remove"
@@ -2100,15 +2129,18 @@ const RenderSubFields = ({ fields }) => {
                     </div>
                 ))}
             </div>
-            <button
+            <br />
-                type="button"
+            {fields.length < custom.maxSubField && (
-                className="govuk-link fieldArrayLink"
+                <button
-                onClick={() => fields.push({})}
+                    type="button"
-            >
+                    className="govuk-link fieldArrayLink"
-                {subTitle == "owners"
+                    onClick={() => fields.push({})}
-                    ? "Add Owners"
+                >
-                    : t("newappeal:new-appeal-add-tenant-label")}
+                    {subTitle == "owners"
-            </button>
+                        ? "Add Owners"
+                        : t("newappeal:new-appeal-add-tenant-label")}
+                </button>
+            )}
         </ul>
     );
 };
@@ -2123,6 +2155,7 @@ export const FieldArrayForm = (props) => {
         parentFieldShowOnValue,
         parentField,
         maxFieldLength,
+        maxSubField,
     } = props;
 
     var showIfHasParentShowValue =
@@ -2143,7 +2176,11 @@ export const FieldArrayForm = (props) => {
         <>
             {" "}
             {showIfHasParentShowValue && (
-                <FieldArray name={name} component={RenderSubFields} />
+                <FieldArray
+                    name={name}
+                    component={RenderSubFields}
+                    maxSubField={maxSubField}
+                />
             )}
         </>
     );

components/newappeal/buildfield.js

@@ -227,6 +227,7 @@ export default function BuildField(props) {
                         formProps={props.props.props.props.form}
                         parentField={props.parentField}
                         parentFieldShowOnValue={props.parentFieldShowOnValue}
+                        maxSubField={props.maxSubField}
                     />
                 );
             case "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":

components/newappeal/buildrow.js

@@ -34,6 +34,7 @@ export default function BuildRow(props) {
                     var fieldtype = xpath.select("//@classid", doc);
                     var validation = xpath.select("//@validation", doc);
                     var maxFieldLength = xpath.select("//@maxFieldLength", doc);
+                    var maxSubField = xpath.select("//@maxsubfield", doc);
                     var datafieldname = xpath.select("//@datafieldname", doc);
                     var datafieldcontent = xpath.select(
                         "//@datafieldcontent",
@@ -74,6 +75,9 @@ export default function BuildRow(props) {
                     maxFieldLength =
                         !_.isEmpty(maxFieldLength) && maxFieldLength[0].value;
 
+                    maxSubField =
+                        !_.isEmpty(maxSubField) && maxSubField[0].value;
+
                     parentField =
                         !_.isEmpty(parentField) && parentField[0].value;
 
@@ -164,6 +168,7 @@ export default function BuildRow(props) {
                                 setFilesForAppeal={
                                     props.props.setFilesForAppeal
                                 }
+                                maxSubField={maxSubField}
                             />
                         );
                         // } else {

data/formsxml/planningappeals78.xml

@@ -148,7 +148,7 @@
 									<labels>
 										<label description="Owners" />
 									</labels>
-									<control id="pinswg_owners" parentField="pinswg_ownershipcertificate" parentFieldShowOnValue="846040002" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_owners" disabled="false" />
+									<control id="pinswg_owners" parentField="pinswg_ownershipcertificate" parentFieldShowOnValue="846040002" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_owners" disabled="false" maxsubfield="5" />
 								</row>
 								<row>
 									<labels>
@@ -160,7 +160,7 @@
 									<labels>
 										<label description="Tenants name" />
 									</labels>
-									<control id="pinswg_agriculturaltenant" parentField="pinswg_agriculturalholding" parentFieldShowOnValue="846040000" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_agriculturaltenantname" disabled="false" />
+									<control id="pinswg_agriculturaltenant" parentField="pinswg_agriculturalholding" parentFieldShowOnValue="846040000" classid="{0273EDBD-AC1D-40d3-9FB2-095C621B552D}" datafieldname="pinswg_agriculturaltenantname" disabled="false" maxsubfield="5" />
 								</row>
 							</rows>
 						</section>