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,162 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import {
+    addDays,
+    addMonths,
+    addYears,
+    parseISO,
+    subDays,
+    subMonths,
+    subYears
+} from "date-fns";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderDatePicker = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    const router = useRouter();
+    let { t } = useTranslation();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    function dateFromOffset(offsetStr) {
+        const today = new Date();
+
+        if (!offsetStr || offsetStr === "0") {
+            return today;
+        }
+
+        const match = offsetStr.match(/^([+-])(\d+)([dmy])$/i);
+
+        if (!match) {
+            console.warn("Invalid offset format:", offsetStr);
+            return today;
+        }
+
+        const [, sign, numberStr, unitRaw] = match;
+        const amount = parseInt(numberStr, 10);
+        const unit = unitRaw.toLowerCase();
+        const isNegative = sign === "-";
+
+        switch (unit) {
+            case "y":
+                return isNegative
+                    ? subYears(today, amount)
+                    : addYears(today, amount);
+
+            case "m":
+                return isNegative
+                    ? subMonths(today, amount)
+                    : addMonths(today, amount);
+
+            case "d":
+                return isNegative
+                    ? subDays(today, amount)
+                    : addDays(today, amount);
+
+            default:
+                return today;
+        }
+    }
+
+    const minDate = dateFromOffset(custom.dateStart);
+    const maxDate = dateFromOffset(custom.dateEnd);
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    role="group"
+                    aria-describedby={id + "_label"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading"
+                            id={id + "_label"}
+                            htmlFor={id}
+                        >
+                            {translatedLabel}
+                        </label>
+                        {custom.hasOwnProperty("hint") && (
+                            <div className="govuk-hint govuk-!-font-size-14">
+                                {t(custom.hint)}
+                            </div>
+                        )}
+                    </legend>
+                    {!custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
+                              <span
+                                  id={id + "-error"}
+                                  className="govuk-error-message"
+                              >
+                                  <span className="govuk-visually-hidden">
+                                      Error:
+                                  </span>{" "}
+                                  {errorMsg}
+                              </span>
+                          )
+                        : ""}
+
+                    <DatePicker
+                        {...custom}
+                        locale={router.locale}
+                        autoOk={true}
+                        id={id}
+                        dateFormat="dd/MM/yyyy"
+                        onChange={onChange}
+                        selected={
+                            value
+                                ? typeof value != "object"
+                                    ? parseISO(value)
+                                    : value
+                                : null
+                        }
+                        className="govuk-input govuk-input--width-10"
+                        minDate={minDate}
+                        maxDate={maxDate}
+                        autoComplete="off"
+                    />
+                    {custom.hasOwnProperty("showErrorBottom")
+                        ? touched &&
+                          error && (
+                              <span
+                                  id={id + "-error"}
+                                  className="govuk-error-message"
+                              >
+                                  <span className="govuk-visually-hidden">
+                                      Error:
+                                  </span>{" "}
+                                  {error}
+                              </span>
+                          )
+                        : ""}
+                </fieldset>
+            </div>
+        </>
+    );
+};