Extract CheckBox, DateFieldPicker and YesNo wrappers

components/elements/fields/checkBoxField.js

@@ -0,0 +1,26 @@
+import React from "react";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { Field } from "redux-form";
+import { RenderCheckBox } from "./renderCheckBox";
+
+export function CheckBoxfield(props) {
+    const router = useRouter();
+    let { t } = useTranslation();
+
+    const fieldOptions =
+        router.locale == "cy" ? ["Ydw", "Na", "2323"] : ["Yes", "No", "23232"];
+
+    return (
+        <Field
+            name={props.name}
+            datafieldname={props.datafieldname}
+            label={props.label}
+            options={fieldOptions}
+            id={props.id}
+            className={props.className}
+            errorMsg={t("newappeal:select-an-option-label")}
+            component={RenderCheckBox}
+        />
+    );
+}

components/elements/fields/dateFieldPicker.js

@@ -0,0 +1,99 @@
+import React from "react";
+import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { Field } from "redux-form";
+import { RenderDatePicker } from "./renderDatePicker";
+import { validateField } from "../validationUtils";
+
+const dateDiffInDays = (a, b) => {
+    const _MS_PER_DAY = 1000 * 60 * 60 * 24;
+    const utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
+    const utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
+
+    return Math.floor((utc2 - utc1) / _MS_PER_DAY);
+};
+
+export function DateFieldPicker(props) {
+    const {
+        name,
+        label,
+        parentField,
+        form,
+        formProps,
+        parentFieldShowOnValue,
+        validation
+    } = props;
+
+    let dateStart = props.dateStart;
+    let dateEnd = props.dateEnd;
+    let { t } = useTranslation();
+
+    const showIfHasParentShowValue =
+        parentField != false &&
+        !_.isEmpty(formProps[form]) &&
+        _.has(formProps[form].values, parentField) &&
+        formProps[form].values[parentField] == parentFieldShowOnValue;
+
+    const requiredMessage = t("newappeal:is-required-label");
+    const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
+    const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
+
+    dateStart =
+        showIfHasParentShowValue && name == "pinswg_dateoflpadecision"
+            ? "-" +
+              (dateDiffInDays(
+                  new Date(formProps[form].values["pinswg_dateofapplication"]),
+                  new Date()
+              ) -
+                  1) +
+              "d"
+            : dateStart;
+
+    return (
+        <div className="govuk-form-group">
+            {parentField != false ? (
+                showIfHasParentShowValue && (
+                    <Field
+                        name={name}
+                        id={name}
+                        label={label}
+                        component={RenderDatePicker}
+                        validate={(value) =>
+                            validateField(
+                                value,
+                                validation,
+                                requiredMessage,
+                                emojiNotAllowedMessage,
+                                invalidPostcodeMessage
+                            )
+                        }
+                        errorMsg={t("newappeal:select-a-date-label")}
+                        dateStart={dateStart}
+                        dateEnd={dateEnd}
+                        hint={props.hint}
+                    />
+                )
+            ) : (
+                <Field
+                    name={name}
+                    id={name}
+                    label={label}
+                    component={RenderDatePicker}
+                    validate={(value) =>
+                        validateField(
+                            value,
+                            validation,
+                            requiredMessage,
+                            emojiNotAllowedMessage,
+                            invalidPostcodeMessage
+                        )
+                    }
+                    errorMsg={t("newappeal:select-a-date-label")}
+                    dateStart={dateStart}
+                    dateEnd={dateEnd}
+                    hint={props.hint}
+                />
+            )}
+        </div>
+    );
+}

components/elements/fields/yesNoField.js

@@ -0,0 +1,66 @@
+import React from "react";
+import _ from "lodash";
+import useTranslation from "next-translate/useTranslation";
+import { useRouter } from "next/router";
+import { Field } from "redux-form";
+import { RenderYesNo } from "./renderYesNo";
+
+export function YesNofield(props) {
+    const router = useRouter();
+    let { t } = useTranslation();
+
+    const { parentField, form, formProps, parentFieldShowOnValue } = props;
+
+    const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
+    const required = (value) => (value ? undefined : "Required");
+
+    const showIfHasParentShowValue =
+        parentField != false &&
+        !_.isEmpty(formProps[form]) &&
+        _.has(formProps[form].values, parentField) &&
+        parentFieldShowOnValue.indexOf(
+            formProps[form].values[parentField].toString()
+        ) > -1;
+
+    return (
+        <>
+            {parentField != false ? (
+                showIfHasParentShowValue && (
+                    <Field
+                        name={props.name}
+                        datafieldname={props.name}
+                        label={props.label}
+                        options={yesNo}
+                        id={props.name}
+                        className={"govuk-radios__input"}
+                        validate={[required]}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                        component={RenderYesNo}
+                        inline={_.has(props, "inline") ? props.inline : "true"}
+                        requiredDocumentLabel={props.requiredDocumentLabel}
+                        requiredDocumentValue={props.requiredDocumentValue}
+                        setDocumentsList={props.setDocumentsList}
+                        documentList={props.documentList}
+                    />
+                )
+            ) : (
+                <Field
+                    name={props.name}
+                    datafieldname={props.name}
+                    label={props.label}
+                    options={yesNo}
+                    id={props.name}
+                    className={"govuk-radios__input"}
+                    validate={[required]}
+                    errorMsg={t("newappeal:select-an-option-label")}
+                    component={RenderYesNo}
+                    inline={_.has(props, "inline") ? props.inline : "true"}
+                    requiredDocumentLabel={props.requiredDocumentLabel}
+                    requiredDocumentValue={props.requiredDocumentValue}
+                    setDocumentsList={props.setDocumentsList}
+                    documentList={props.documentList}
+                />
+            )}
+        </>
+    );
+}