Refactor elements renderers into dedicated field components

2026-04-07 11:25:48 +01:00
parent 5b5a91b33b
commit b022c0a0d9
4 changed files with 429 additions and 389 deletions
@@ -0,0 +1,129 @@
+import React from "react";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { Field } from "redux-form";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderRadio = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={id + "_label"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {translatedLabel}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div
+                        className={
+                            custom.inline == false
+                                ? "govuk-radios govuk-radios--small"
+                                : "govuk-radios govuk-radios--inline govuk-radios--small"
+                        }
+                    >
+                        {" "}
+                        {custom.hint != false && (
+                            <div className="govuk-hint">{t(custom.hint)}</div>
+                        )}
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-radios__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id}
+                                    component="input"
+                                    type="radio"
+                                    className="govuk-radios__input"
+                                    value={options[key].split("|")[0]}
+                                    checked={
+                                        typeof value != "undefined" &&
+                                        value ==
+                                            parseInt(options[key].split("|")[0])
+                                            ? true
+                                            : false
+                                    }
+                                    onChange={(e) => {
+                                        let docListObj = custom.documentList;
+                                        if (
+                                            custom.requiredDocumentValue ==
+                                            "Yes"
+                                        ) {
+                                            e.target.value != "846040000"
+                                                ? (docListObj = Object.assign(
+                                                      docListObj,
+                                                      {
+                                                          ["documentCheckList_" +
+                                                          id]:
+                                                              custom.requiredDocumentLabel
+                                                      }
+                                                  ))
+                                                : delete docListObj[
+                                                      "documentCheckList_" + id
+                                                  ];
+                                            custom.setDocumentsList(docListObj);
+                                        }
+                                    }}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {t(options[key].split("|")[1])}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};