Refactor checkbox, picklist, and decimal renderers into field components

components/elements/fields/renderCheckBox.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { Field } from "redux-form";
+import { useRouter } from "next/router";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderCheckBox = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    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={name + "-hint"}
+                >
+                    <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="govuk-checkboxes ">
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-checkboxes__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id + "_" + index}
+                                    component="input"
+                                    type="checkbox"
+                                    className="govuk-checkboxes__input"
+                                    value={options[key]}
+                                />
+                                <label
+                                    className="govuk-label govuk-checkboxes__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {options[key]}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};

components/elements/fields/renderDecimalField.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { useRouter } from "next/router";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderDecimalField = ({
+    name,
+    id,
+    label,
+    datafieldname,
+    className,
+    input,
+    errorMsg,
+    meta: { touched, error },
+    ...custom
+}) => {
+    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 "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {translatedLabel}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </span>
+                )}
+                <input
+                    {...input}
+                    className={className}
+                    name={name}
+                    id={id}
+                    maxLength={
+                        custom.hasOwnProperty("maxFieldLength")
+                            ? custom.maxFieldLength
+                                ? custom.maxFieldLength
+                                : 100
+                            : 200
+                    }
+                />
+            </div>
+        </>
+    );
+};

components/elements/fields/renderPickList.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { JSONPath as jsonpath } from "jsonpath-plus";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import pickListLookup from "../../../data/picklistLookups.json";
+import {
+    getFieldTranslation,
+    getPickListTranslation
+} from "../helpers/translationHelpers";
+
+export const RenderPickList = ({
+    datafieldname,
+    picklistData,
+    id,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error }
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    var dropdownObj = jsonpath({
+        path:
+            "$..value[?(@ && @.LogicalName=='" + datafieldname + "')]..Options",
+        json: picklistData,
+        eval: true
+    });
+    dropdownObj = dropdownObj[0];
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {translatedLabel}
+                </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={id} name={id}>
+                    <option value="" disabled defaultValue>
+                        {t("newappeal:select-default")}
+                    </option>
+                    {Object.keys(dropdownObj).map((key, index) => {
+                        const translatedOption = getPickListTranslation({
+                            optionValue:
+                                dropdownObj[key].Label.LocalizedLabels[0].Label,
+                            locale,
+                            pickListLookup
+                        });
+
+                        return (
+                            <option key={key} value={dropdownObj[key].Value}>
+                                {translatedOption}
+                            </option>
+                        );
+                    })}
+                </select>
+            </div>
+        </>
+    );
+};

components/elements/index.js

@@ -31,16 +31,16 @@ import {
     getThumbnailIconByMimeType,
     validateUploadFilename
 } from "./helpers/fileUploadHelpers";
-import {
-    getFieldTranslation,
-    getPickListTranslation
-} from "./helpers/translationHelpers";
+import { getFieldTranslation } from "./helpers/translationHelpers";
 import { RenderRichMultiline } from "./fields/renderRichMultiline";
 import { RenderTextfield } from "./fields/renderTextfield";
 import { RenderMultiline } from "./fields/renderMultiline";
 import { RenderDatePicker } from "./fields/renderDatePicker";
 import { RenderYesNo } from "./fields/renderYesNo";
 import { RenderRadio } from "./fields/renderRadio";
+import { RenderCheckBox } from "./fields/renderCheckBox";
+import { RenderPickList } from "./fields/renderPickList";
+import { RenderDecimalField } from "./fields/renderDecimalField";
 
 export function Textfield(props) {
     const {
@@ -784,79 +784,6 @@ export function Radiofield(props) {
     );
 }
 
-const RenderCheckBox = ({
-    datafieldname,
-    name,
-    label,
-    id,
-    errorMsg,
-    options,
-    input: { onChange, value },
-    meta: { touched, error },
-    ...custom
-}) => {
-    return (
-        <>
-            <div
-                className={
-                    touched && error
-                        ? "govuk-form-group govuk-form-group--error"
-                        : "govuk-form-group "
-                }
-            >
-                <fieldset
-                    className="govuk-fieldset"
-                    aria-describedby={name + "-hint"}
-                >
-                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                        <label
-                            className="govuk-fieldset__heading govuk-body-m"
-                            id={id + "_label"}
-                        >
-                            {FieldsTranslations(label)}
-                        </label>
-                    </legend>
-                    {touched && error && (
-                        <span
-                            id={id + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
-                    <div className="govuk-checkboxes ">
-                        {Object.keys(options).map((key, index) => (
-                            <div
-                                className="govuk-checkboxes__item"
-                                data-children-count={key}
-                                key={key}
-                            >
-                                <Field
-                                    id={id + "_" + index}
-                                    name={id + "_" + index}
-                                    component="input"
-                                    type="checkbox"
-                                    className="govuk-checkboxes__input"
-                                    value={options[key]}
-                                />
-                                <label
-                                    className="govuk-label govuk-checkboxes__label"
-                                    htmlFor={id + "_" + index}
-                                >
-                                    {options[key]}
-                                </label>
-                            </div>
-                        ))}
-                    </div>
-                </fieldset>
-            </div>
-        </>
-    );
-};
-
 export function CheckBoxfield(props) {
     const router = useRouter();
 
@@ -879,70 +806,6 @@ export function CheckBoxfield(props) {
     );
 }
 
-const RenderPickList = ({
-    datafieldname,
-    picklistData,
-    id,
-    name,
-    label,
-    input,
-    errorMsg,
-    meta: { touched, error }
-}) => {
-    let { t } = useTranslation();
-
-    var dropdownObj = jsonpath({
-        path:
-            "$..value[?(@ && @.LogicalName=='" + datafieldname + "')]..Options",
-        json: picklistData,
-        eval: true
-    });
-    dropdownObj = dropdownObj[0];
-
-    const required = (value) => {
-        return value || value == 0
-            ? undefined
-            : t("newappeal:is-required-label");
-    };
-
-    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={id} name={id}>
-                    <option value="" disabled defaultValue>
-                        {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();
@@ -1207,60 +1070,6 @@ export function DecimalField(props) {
     );
 }
 
-const RenderDecimalField = ({
-    name,
-    id,
-    label,
-    datafieldname,
-    className,
-    input,
-    errorMsg,
-    meta: { touched, error },
-    ...custom
-}) => {
-    // <div>
-    //     <label>{label}</label>
-    //     <input {...input} type="text" />
-    //     {touched && error && <span>{error}</span>}
-    // </div>;
-
-    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>
-                )}
-                <input
-                    {...input}
-                    // type={custom.type}
-                    className={className}
-                    name={name}
-                    id={id}
-                    maxLength={
-                        custom.hasOwnProperty("maxFieldLength")
-                            ? custom.maxFieldLength
-                                ? custom.maxFieldLength
-                                : 100
-                            : 200
-                    }
-                />
-            </div>
-        </>
-    );
-};
-
 const RenderCaseID = {};
 
 export function ReadOnlyfield(props) {
@@ -1299,14 +1108,6 @@ export const FieldsTranslations = (label) => {
     });
 };
 
-const PickListTranslations = (optionValue) => {
-    const router = useRouter();
-    const { locale } = router;
-    const { appealtypes } = router.query;
-
-    return getPickListTranslation({ optionValue, locale, pickListLookup });
-};
-
 export function FileUploadField(props) {
     const uploadCount =
         typeof props.uploadCount === "number" ? props.uploadCount : 0;