From f8665ee6b7440309051cbea4e13b89cfee8e1aad Mon Sep 17 00:00:00 2001
From: robbond <rob@rdbsolutions.co.uk>
Date: Tue, 7 Apr 2026 12:17:15 +0100
Subject: [PATCH] Refactor field array subfields renderer into dedicated
 component

---
 components/elements/fields/renderSubFields.js | 146 ++++++++++++++++++
 components/elements/index.js                  | 138 +----------------
 2 files changed, 147 insertions(+), 137 deletions(-)
 create mode 100644 components/elements/fields/renderSubFields.js

diff --git a/components/elements/fields/renderSubFields.js b/components/elements/fields/renderSubFields.js
new file mode 100644
index 00000000..5e5665d9
--- /dev/null
+++ b/components/elements/fields/renderSubFields.js
@@ -0,0 +1,146 @@
+import React from "react";
+import { Field } from "redux-form";
+import useTranslation from "next-translate/useTranslation";
+import { RenderTextfield } from "./renderTextfield";
+import { RenderDatePicker } from "./renderDatePicker";
+
+export const RenderSubFields = ({
+    fields,
+    meta: { touched, error },
+    ...custom
+}) => {
+    let { t } = useTranslation();
+
+    let subTitle = fields.name.split("pinswg_")[1];
+
+    const checkValue = (value) => {
+        let errors;
+
+        if (!value) {
+            errors = t("newappeal:is-required-label");
+        } else {
+            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)) {
+                errors = "Emojis are not allowed";
+            }
+        }
+
+        return errors;
+    };
+
+    const required = (value) =>
+        value ? undefined : t("newappeal:is-required-label");
+
+    const email = (value) => {
+        let errors;
+
+        const emailRegex =
+            /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
+
+        if (!emailRegex.test(value)) {
+            errors = t("newappeal:invalid-email-address-errormsg");
+        }
+        return errors;
+    };
+
+    fields.length == 0 && fields.push({});
+
+    return (
+        <ul className="subFieldList">
+            {fields.map((member, index) => (
+                <div key={index}>
+                    <h4>
+                        {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
+                    </h4>
+
+                    <div className="fieldArrayContainer">
+                        <div className="govuk-grid-column-full">
+                            <div
+                                className="gouk-grid-row"
+                                style={{
+                                    display: "flex",
+                                    marginBottom: "20px"
+                                }}
+                            >
+                                <Field
+                                    id={`${member}.${fields.name}_firstname`}
+                                    name={`${member}.${fields.name}_firstname`}
+                                    type="text"
+                                    component={RenderTextfield}
+                                    validate={[checkValue]}
+                                    label={"First name"}
+                                    className="govuk-input govuk-input--width-12"
+                                    showErrorBottom={true}
+                                />
+                                <Field
+                                    id={`${member}.${fields.name}_lastname`}
+                                    name={`${member}.${fields.name}_lastname`}
+                                    type="text"
+                                    component={RenderTextfield}
+                                    validate={[checkValue]}
+                                    label={"Last name"}
+                                    className="govuk-input govuk-input--width-12"
+                                    showErrorBottom={true}
+                                />
+                            </div>
+                            <div
+                                className="gouk-grid-row"
+                                style={{ display: "flex" }}
+                            >
+                                <Field
+                                    id={`${member}.${fields.name}_email`}
+                                    name={`${member}.${fields.name}_email`}
+                                    type="text"
+                                    component={RenderTextfield}
+                                    validate={[email]}
+                                    label={"Email"}
+                                    className="govuk-input govuk-input--width-12"
+                                    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-12"
+                                    showErrorBottom={true}
+                                />
+                            </div>
+                        </div>
+                        <div
+                            className="gouk-grid-row"
+                            style={{ display: "flex" }}
+                        >
+                            <button
+                                type="button"
+                                title="Remove"
+                                onClick={() => fields.remove(index)}
+                                className="govuk-button fieldArrayDelete"
+                            >
+                                X
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            ))}
+
+            <br />
+            {fields.length < custom.maxSubField && (
+                <button
+                    type="button"
+                    className="govuk-link fieldArrayLink"
+                    onClick={() => fields.push({})}
+                >
+                    {subTitle == "owners"
+                        ? t("newappeal:new-appeal-add-owner-label")
+                        : t("newappeal:new-appeal-add-tenant-label")}
+                </button>
+            )}
+        </ul>
+    );
+};
diff --git a/components/elements/index.js b/components/elements/index.js
index de495dba..751a9950 100644
--- a/components/elements/index.js
+++ b/components/elements/index.js
@@ -41,6 +41,7 @@ import { RenderRadio } from "./fields/renderRadio";
 import { RenderCheckBox } from "./fields/renderCheckBox";
 import { RenderPickList } from "./fields/renderPickList";
 import { RenderDecimalField } from "./fields/renderDecimalField";
+import { RenderSubFields } from "./fields/renderSubFields";
 
 export function Textfield(props) {
     const {
@@ -1584,143 +1585,6 @@ const renderField = ({ input, label, type, meta: { touched, error } }) => (
     </div>
 );
 
-const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
-    let { t } = useTranslation();
-
-    let subTitle = fields.name.split("pinswg_")[1];
-
-    const checkValue = (value) => {
-        let errors;
-
-        if (!value) {
-            errors = t("newappeal:is-required-label");
-        } 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)) {
-                errors = "Emojis are not allowed";
-            }
-        }
-
-        return errors;
-    };
-    const required = (value) =>
-        value ? undefined : t("newappeal:is-required-label");
-
-    const email = (value) => {
-        let errors;
-
-        const emailRegex =
-            /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
-
-        if (!emailRegex.test(value)) {
-            errors = t("newappeal:invalid-email-address-errormsg");
-        }
-        return errors;
-    };
-
-    //fields.push({});
-    fields.length == 0 && fields.push({});
-    return (
-        <ul className="subFieldList">
-            {fields.map((member, index) => (
-                <div key={index}>
-                    <h4>
-                        {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
-                    </h4>
-
-                    <div className="fieldArrayContainer">
-                        <div className="govuk-grid-column-full">
-                            <div
-                                className="gouk-grid-row"
-                                style={{
-                                    display: "flex",
-                                    marginBottom: "20px"
-                                }}
-                            >
-                                <Field
-                                    id={`${member}.${fields.name}_firstname`}
-                                    name={`${member}.${fields.name}_firstname`}
-                                    type="text"
-                                    component={RenderTextfield}
-                                    validate={[checkValue]}
-                                    label={"First name"}
-                                    className="govuk-input govuk-input--width-12"
-                                    showErrorBottom={true}
-                                />
-                                <Field
-                                    id={`${member}.${fields.name}_lastname`}
-                                    name={`${member}.${fields.name}_lastname`}
-                                    type="text"
-                                    component={RenderTextfield}
-                                    validate={[checkValue]}
-                                    label={"Last name"}
-                                    className="govuk-input govuk-input--width-12"
-                                    showErrorBottom={true}
-                                />
-                            </div>
-                            <div
-                                className="gouk-grid-row"
-                                style={{ display: "flex" }}
-                            >
-                                <Field
-                                    id={`${member}.${fields.name}_email`}
-                                    name={`${member}.${fields.name}_email`}
-                                    type="text"
-                                    component={RenderTextfield}
-                                    validate={[email]}
-                                    label={"Email"}
-                                    className="govuk-input govuk-input--width-12"
-                                    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-12"
-                                    showErrorBottom={true}
-                                />
-                            </div>
-                        </div>
-                        <div
-                            className="gouk-grid-row"
-                            style={{ display: "flex" }}
-                        >
-                            <button
-                                type="button"
-                                title="Remove"
-                                onClick={() => fields.remove(index)}
-                                className="govuk-button fieldArrayDelete"
-                            >
-                                X
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            ))}
-
-            <br />
-            {fields.length < custom.maxSubField && (
-                <button
-                    type="button"
-                    className="govuk-link fieldArrayLink"
-                    onClick={() => fields.push({})}
-                >
-                    {subTitle == "owners"
-                        ? t("newappeal:new-appeal-add-owner-label")
-                        : t("newappeal:new-appeal-add-tenant-label")}
-                </button>
-            )}
-        </ul>
-    );
-};
-
 export const FieldArrayForm = (props) => {
     const {
         name,