Extract CheckBox, DateFieldPicker and YesNo wrappers

2026-04-08 08:33:06 +01:00
parent 8350e42d02
commit dbebd03cac
5 changed files with 225 additions and 186 deletions
@@ -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>
+    );
+}