+
+
+
+ );
+};
diff --git a/components/elements/fields/renderDatePicker.js b/components/elements/fields/renderDatePicker.js
new file mode 100644
index 00000000..bb512802
--- /dev/null
+++ b/components/elements/fields/renderDatePicker.js
@@ -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 (
+ <>
+
+
+
+
+ );
+};
diff --git a/components/elements/fields/renderDecimalField.js b/components/elements/fields/renderDecimalField.js
new file mode 100644
index 00000000..3711d2ed
--- /dev/null
+++ b/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 (
+ <>
+
+
+ {touched && error && (
+
+ Error:{" "}
+ {error}
+
+ )}
+
+
+
+ );
+};
diff --git a/components/elements/fields/renderFileUpload.js b/components/elements/fields/renderFileUpload.js
new file mode 100644
index 00000000..5164cc59
--- /dev/null
+++ b/components/elements/fields/renderFileUpload.js
@@ -0,0 +1,448 @@
+import { JSONPath as jsonpath } from "jsonpath-plus";
+import React, { useMemo, useState } from "react";
+import useTranslation from "next-translate/useTranslation";
+import Link from "next/link";
+import Dropzone from "react-dropzone";
+import {
+ deleteBlob,
+ getFilesFromBlobHashed,
+ uploadSingleFile,
+ getFilesFromBlobproxy
+} from "../../../actions/services/documentService";
+import { bytesToSize, getThumbnailIconByExtension } from "../../utils";
+import {
+ getDocumentTypePrefix,
+ getThumbnailIconByMimeType,
+ validateUploadFilename
+} from "../helpers/fileUploadHelpers";
+
+const baseStyle = {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ padding: "20px",
+ borderWidth: 2,
+ borderRadius: 2,
+ borderColor: "#eeeeee",
+ borderStyle: "dashed",
+ backgroundColor: "#fafafa",
+ color: "#bdbdbd",
+ transition: "border .3s ease-in-out"
+};
+
+const activeStyle = {
+ borderColor: "#2196f3"
+};
+
+const acceptStyle = {
+ borderColor: "#00e676"
+};
+
+const rejectStyle = {
+ borderColor: "#ff1744"
+};
+
+export const RenderFileUpload = (field) => {
+ let files = field.input.value;
+ let { t } = useTranslation();
+
+ const style = useMemo(
+ () => ({
+ ...baseStyle
+ // ...(isDragActive ? activeStyle : {}),
+ // ...(isDragAccept ? acceptStyle : {}),
+ // ...(isDragReject ? rejectStyle : {}),
+ }),
+ []
+ // [isDragActive, isDragReject, isDragAccept]
+ );
+ const [filesList, setFilesList] = useState([]);
+
+ const thumbs = filesList.map((file) => (
+
+ 
-{" "}
+
+ {file.name} ({file.size / 1024}kb)
+
+
+ ));
+
+ const filelistObj = field.fileList || {};
+
+ const blobList = jsonpath({
+ path: "$..[?(@ && @.documentType=='" + field.documentTypeCode + "')]",
+ json: filelistObj,
+ eval: true
+ });
+ //const blobList = filelistObj;
+
+ const deleteThisBlob = async (
+ containerName,
+ blobName,
+ deleteblobhash,
+ getblobshash,
+ casefolderID
+ ) => {
+ //console.log(containerName, blobName, deleteblobhash);
+ deleteBlob(containerName, blobName, deleteblobhash, casefolderID)
+ .then((data) => data)
+ .then(() => {
+ getFilesFromBlobHashed(
+ containerName,
+ getblobshash,
+ casefolderID
+ ).then((newfilelist) => field.setFilesForAppeal(newfilelist));
+ });
+ };
+
+ const removeFile = (file) => {
+ const newFilesArr = files.filter((user) => user.name != file.name);
+ files == newFilesArr;
+ field.input.onChange(newFilesArr);
+ };
+
+ function removeEmptyObjects(arr) {
+ return arr.filter((obj) => Object.keys(obj).length > 0);
+ }
+
+ const [errorMessage, setErrorMessage] = useState(null);
+ const [rejectedFiles, setRejectedFiles] = useState([]); // Store rejected files
+
+ const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
+ const [uploadCountMessage, setUploadCountMessage] = useState("");
+ const [totalUploadFiles, setTotalUploadFiles] = useState(0);
+
+ const handleDropRejected = (fileRejections) => {
+ const errors = fileRejections
+ .map(({ file, errors }) => {
+ return errors.map((error) => {
+ if (error.code === "file-too-large") {
+ return `${file.name} ${t(
+ "newappeal:new-appeal-fileupload-file-error-filesize-label"
+ )}`;
+ }
+ if (error.code === "file-invalid-type") {
+ return `${file.name} ${t(
+ "newappeal:new-appeal-fileupload-file-error-invalid-type-label"
+ )}`;
+ }
+ if (error.code === "filename-invalid-chars") {
+ return (
+ error.message ||
+ `${file.name} ${t(
+ "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
+ )}`
+ );
+ }
+ return `${file.name} ${t(
+ "newappeal:new-appeal-fileupload-file-error-invalid-label"
+ )}`;
+ });
+ })
+ .flat(); // Flatten the errors array
+
+ setRejectedFiles(errors); // Store the error messages for rejected files
+ };
+
+ // Handle accepted files (clear error message when files are accepted)
+ const handleDropAccepted = () => {
+ setErrorMessage(null); // Clear any previous error messages when files are accepted
+ setRejectedFiles([]); // Clear any previously rejected file errorsss
+ };
+
+ return (
+ <>
+
+ {" "}
+
+
+ {/* */}
+
+ {t(
+ "newappeal:new-appeal-fileupload-drop-label"
+ )}{" "}
+ (Max 50 MB)
+
+
+ (
+ {t(
+ "newappeal:new-appeal-fileupload-file-list-label"
+ )}
+ )
+
+
+
+ )}
+ {totalUploadFiles > 0 && completedUploadFiles == false && (
+ -
+ {rejectedFiles.map((error, index) => (
+
- {error} + ))} +
+ {t("home:uploading-files-label", {
+ number:
+ totalUploadFiles > 0
+ ? `${uploadCountMessage} of ${totalUploadFiles}`
+ : uploadCountMessage
+ })}
+
+ )}
+ {completedUploadFiles > 0 && uploadCountMessage >= 0 && (
+
+ {t("home:completed-uploading-files-label", {
+ number: uploadCountMessage
+ })}
+
+ )}
+ {field.meta.touched && field.meta.error && (
+ {field.meta.error}
+ )}
+ {files && Array.isArray(files) && (
+ <>
+ {/* {(files = removeEmptyObjects(files))} */}
+
+ {!completedUploadFiles &&
+ files.map(
+ (file, i) =>
+ typeof file.name != "undefined" && (
+
+ {" "}
+ {/* removeFile(file)}
+ >
+ −
+ */}
+ 
+
+ {file.name} (
+ {bytesToSize(file.size)})
+
+ )
+ )}
+
+ )}
+ {blobList.length > 0 && (
+ +
+ {completedUploadFiles ? (
+
+
+ + Upload complete +
+ ) : ( ++ {t( + "home:uploading-files-progress-label" + )}{" "} +
+ )} +{t("newappeal:previously-added-files")}
+ )} + {blobList.map( + (blob, i) => + blob.documentType == field.documentTypeCode && ( +
+ })
+
+
+ {blob.name} ({bytesToSize(blob.contentLength)})
+
+
+ )
+ )}{" "}
+
+ );
+};
diff --git a/components/elements/fields/renderMultiline.js b/components/elements/fields/renderMultiline.js
new file mode 100644
index 00000000..49918fd0
--- /dev/null
+++ b/components/elements/fields/renderMultiline.js
@@ -0,0 +1,51 @@
+import React from "react";
+
+export const RenderMultiline = ({
+ id,
+ className,
+ rows,
+ datafieldname,
+ name,
+ label,
+ input,
+ errorMsg,
+ meta: { touched, error },
+ ...custom
+}) => {
+ return (
+ <>
+
+ {
+ setUploadCountMessage(
+ uploadCountMessage - 1
+ );
+ deleteThisBlob(
+ field.containerID,
+ blob.name,
+ blob.hasheddeletepath,
+ blob.hashgetblobs,
+ field.ticketnumber
+ );
+ }}
+ title={t("home:remove-this-file-label")}
+ >
+ −
+
+
+
+ {touched && error && (
+
+ Error:{" "}
+ {touched &&
+ ((error && (
+ {errorMsg ? errorMsg : error}
+ )) ||
+ (warning && {warning}))}
+
+ )}
+
+
+
+ );
+};
diff --git a/components/elements/fields/renderPickList.js b/components/elements/fields/renderPickList.js
new file mode 100644
index 00000000..521b82d9
--- /dev/null
+++ b/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 (
+ <>
+
+
+ {touched && error && (
+
+ Error:{" "}
+ {error}
+
+ )}
+
+
+
+ );
+};
diff --git a/components/elements/fields/renderRadio.js b/components/elements/fields/renderRadio.js
new file mode 100644
index 00000000..22aef6b2
--- /dev/null
+++ b/components/elements/fields/renderRadio.js
@@ -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 (
+ <>
+
+
+
+
+ );
+};
diff --git a/components/elements/fields/renderRichMultiline.js b/components/elements/fields/renderRichMultiline.js
new file mode 100644
index 00000000..f09b77e8
--- /dev/null
+++ b/components/elements/fields/renderRichMultiline.js
@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import dynamic from "next/dynamic";
+import { updateLinks } from "../../utils";
+
+const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
+
+export const RenderRichMultiline = ({
+ id,
+ className,
+ rows,
+ datafieldname,
+ name,
+ label,
+ input,
+ meta: { touched, error },
+ ...custom
+}) => {
+ const [editValue, setEditValue] = useState(
+ input.value != null ? input.value : ""
+ );
+
+ const changeEdit = (valStr) => {
+ setEditValue(valStr);
+ input.onChange(valStr);
+ };
+
+ const handleBlur = () => {
+ const updated = updateLinks(editValue);
+ setEditValue(updated);
+ input.onChange(updated);
+ };
+
+ var modules = {
+ toolbar: [
+ [{ "header": [1, 2, false] }],
+ ["bold", "italic", "underline", "blockquote"],
+ [{ "list": "ordered" }, { "list": "bullet" }],
+ ["clean"]
+ ]
+ };
+
+ return (
+ <>
+
+
+
+ {error && (
+
+ Error:{" "}
+ {error}
+
+ )}
+
+
+
+ );
+};
diff --git a/components/elements/fields/renderSubFields.js b/components/elements/fields/renderSubFields.js
new file mode 100644
index 00000000..d6d087f1
--- /dev/null
+++ b/components/elements/fields/renderSubFields.js
@@ -0,0 +1,150 @@
+import React, { useEffect } from "react";
+import { Field } from "redux-form";
+import useTranslation from "next-translate/useTranslation";
+import { RenderTextfield } from "./renderTextfield";
+import { RenderDatePicker } from "./renderDatePicker";
+
+export const RenderSubFields = ({
+ fields,
+ meta: { touched, error },
+ ...custom
+}) => {
+ let { t } = useTranslation();
+
+ let subTitle = fields.name.split("pinswg_")[1];
+
+ const checkValue = (value) => {
+ let errors;
+
+ if (!value) {
+ errors = t("newappeal:is-required-label");
+ } else {
+ const emojiRegex =
+ /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
+
+ if (emojiRegex.test(value)) {
+ errors = "Emojis are not allowed";
+ }
+ }
+
+ return errors;
+ };
+
+ const required = (value) =>
+ value ? undefined : t("newappeal:is-required-label");
+
+ const email = (value) => {
+ let errors;
+
+ const emailRegex =
+ /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
+
+ if (!emailRegex.test(value)) {
+ errors = t("newappeal:invalid-email-address-errormsg");
+ }
+ return errors;
+ };
+
+ useEffect(() => {
+ if (fields.length === 0) {
+ fields.push({});
+ }
+ }, [fields, fields.length]);
+
+ return (
+ -
+ {fields.map((member, index) => (
+
+
+ ))}
+
+ + {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1} +
+ +
+
+
+
+
+
+
+
+
+
+
+ + {fields.length < custom.maxSubField && ( + + )} +
+
+ {!custom.hasOwnProperty("showErrorBottom")
+ ? touched &&
+ error && (
+
+
+ Error:
+ {" "}
+ {error}
+
+ )
+ : ""}
+
+ {custom.hasOwnProperty("showErrorBottom")
+ ? touched &&
+ error && (
+
+
+ Error:
+ {" "}
+ {error}
+
+ )
+ : ""}
+
+
+ );
+};
diff --git a/components/elements/fields/renderYesNo.js b/components/elements/fields/renderYesNo.js
new file mode 100644
index 00000000..70fd5b58
--- /dev/null
+++ b/components/elements/fields/renderYesNo.js
@@ -0,0 +1,135 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Field } from "redux-form";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import { getFieldTranslation } from "../helpers/translationHelpers";
+
+export const RenderYesNo = ({
+ 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 (
+ <>
+
+
+
+
+ );
+};
diff --git a/components/elements/fields/yesNoField.js b/components/elements/fields/yesNoField.js
new file mode 100644
index 00000000..d768979b
--- /dev/null
+++ b/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 && (
+
-
- {!custom.hasOwnProperty("showErrorBottom")
- ? touched &&
- error && (
-
-
- Error:
- {" "}
- {error}
-
- )
- : ""}
-
- {custom.hasOwnProperty("showErrorBottom")
- ? touched &&
- error && (
-
-
- Error:
- {" "}
- {error}
-
- )
- : ""}
-
-
- );
-};
+const getValidationMessages = (t) => ({
+ requiredMessage: t("newappeal:is-required-label"),
+ emojiNotAllowedMessage: t("newappeal:emojis-not-allowed-label"),
+ invalidPostcodeMessage: t("newappeal:invalid-postcode-label")
+});
+
+const hasParentFieldValue = ({ parentField, form, formProps }) =>
+ parentField != false &&
+ !_.isEmpty(formProps[form]) &&
+ _.has(formProps[form].values, parentField);
+
+const isVisibleByEquality = ({
+ parentField,
+ form,
+ formProps,
+ parentFieldShowOnValue
+}) =>
+ (hasParentFieldValue({ parentField, form, formProps }) &&
+ formProps[form].values[parentField]) == parentFieldShowOnValue;
+
+const isVisibleByInclusion = ({
+ parentField,
+ form,
+ formProps,
+ parentFieldShowOnValue
+}) =>
+ hasParentFieldValue({ parentField, form, formProps }) &&
+ parentFieldShowOnValue.indexOf(
+ formProps[form].values[parentField].toString()
+ ) > -1;
export function Textfield(props) {
const {
@@ -133,33 +76,6 @@ export function Textfield(props) {
hint
} = props;
- const required = (value) => {
- let errors;
-
- // Check for the required field
- if (!value) {
- errors = t("newappeal:is-required-label");
- } else {
- // Check for emojis using a regular expression
- const emojiRegex =
- /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
-
- if (emojiRegex.test(value)) {
- errors = "Emojis are not allowed";
- }
- }
-
- return errors;
- };
-
- const postcode = (value) =>
- value &&
- !/^([A-Z][A-HJ-Y]?[0-9][A-Z0-9]? ?[0-9][A-Z]{2}|GIR ?0A{2})$/i.test(
- value
- )
- ? t("newappeal:invalid-postcode-label")
- : undefined;
-
let { t } = useTranslation();
if (name == "pinswg_name") {
@@ -218,19 +134,22 @@ export function Textfield(props) {
);
} else {
- var showIfHasParentShowValue =
- (parentField != false &&
- !_.isEmpty(formProps[form]) &&
- _.has(formProps[form].values, parentField) &&
- formProps[form].values[parentField]) == parentFieldShowOnValue;
+ var showIfHasParentShowValue = isVisibleByEquality({
+ parentField,
+ form,
+ formProps,
+ parentFieldShowOnValue
+ });
// console.log(parentField, showIfHasParentShowValue);
// console.log(parentField, formProps, form);
//console.log("validation props:", validation);
- const requiredMessage = t("newappeal:is-required-label");
- const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
- const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
+ const {
+ requiredMessage,
+ emojiNotAllowedMessage,
+ invalidPostcodeMessage
+ } = getValidationMessages(t);
return (
{parentField != false ? (
@@ -280,59 +199,6 @@ export function Textfield(props) {
}
}
-const RenderMultiline = ({
- id,
- className,
- rows,
- datafieldname,
- name,
- label,
- input,
- errorMsg,
- meta: { touched, error },
- ...custom
-}) => {
- return (
- <>
-
- {/* */}
- {touched && error && (
-
- Error:{" "}
- {touched &&
- ((error && (
- {errorMsg ? errorMsg : error}
- )) ||
- (warning && {warning}))}
-
- )}
-
-
-
- );
-};
-
export function MultiLinefield(props) {
const {
name,
@@ -346,49 +212,29 @@ export function MultiLinefield(props) {
hint
} = props;
- const required = (value) => {
- let errors;
-
- // Check for the required field
- if (!value) {
- errors = t("newappeal:is-required-label");
- } else {
- // Check for emojis using a regular expression
- const emojiRegex =
- /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
-
- if (emojiRegex.test(value)) {
- errors = t("newappeal:emojis-not-allowed-label");
- }
- }
-
- return errors;
- };
-
- var showIfHasParentShowValue =
- parentField != false &&
- !_.isEmpty(formProps[form]) &&
- _.has(formProps[form].values, parentField) &&
- parentFieldShowOnValue.indexOf(
- formProps[form].values[parentField].toString()
- ) > -1;
+ var showIfHasParentShowValue = isVisibleByInclusion({
+ parentField,
+ form,
+ formProps,
+ parentFieldShowOnValue
+ });
(showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue;
//console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
let { t } = useTranslation();
+ const translatedLabel = FieldsTranslations(props.label);
- const requiredMessage = t("newappeal:is-required-label");
- const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
- const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
+ const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
+ getValidationMessages(t);
return (
<>
{parentField != false ? (
showIfHasParentShowValue && (
{
- const [editValue, setEditValue] = useState(
- input.value != null ? input.value : ""
- );
-
- const changeEdit = (valStr) => {
- setEditValue(valStr);
- input.onChange(valStr);
- };
-
- const handleBlur = () => {
- const updated = updateLinks(editValue);
- setEditValue(updated);
- input.onChange(updated);
- };
-
- var modules = {
- toolbar: [
- [{ "header": [1, 2, false] }],
- ["bold", "italic", "underline", "blockquote"],
- [{ "list": "ordered" }, { "list": "bullet" }],
- ["clean"]
- ]
- };
-
- return (
- <>
-
- validateField(
- value,
- validation,
- requiredMessage,
- emojiNotAllowedMessage,
- invalidPostcodeMessage
- )
- } // Use the external validate function
- requiredDocumentLabel={props.requiredDocumentLabel}
- requiredDocumentValue={props.requiredDocumentValue}
- setDocumentsList={props.setDocumentsList}
- documentList={props.documentList}
- />
- )
- ) : (
-
- validateField(
- value,
- validation,
- requiredMessage,
- emojiNotAllowedMessage,
- invalidPostcodeMessage
- )
- } // Use the external validate function
- requiredDocumentLabel={props.requiredDocumentLabel}
- requiredDocumentValue={props.requiredDocumentValue}
- setDocumentsList={props.setDocumentsList}
- documentList={props.documentList}
- />
- )}
-
- );
-}
-
-const RenderCheckBox = ({
- datafieldname,
- name,
- label,
- id,
- errorMsg,
- options,
- input: { onChange, value },
- meta: { touched, error },
- ...custom
-}) => {
- return (
- <>
-
@@ -1947,769 +556,3 @@ export function FileUploadField(props) {
);
}
-
-const baseStyle = {
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
- padding: "20px",
- borderWidth: 2,
- borderRadius: 2,
- borderColor: "#eeeeee",
- borderStyle: "dashed",
- backgroundColor: "#fafafa",
- color: "#bdbdbd",
- transition: "border .3s ease-in-out"
-};
-
-const activeStyle = {
- borderColor: "#2196f3"
-};
-
-const acceptStyle = {
- borderColor: "#00e676"
-};
-
-const rejectStyle = {
- borderColor: "#ff1744"
-};
-
-const RenderFileUpload = (field) => {
- let files = field.input.value;
- let { t } = useTranslation();
-
- const style = useMemo(
- () => ({
- ...baseStyle
- // ...(isDragActive ? activeStyle : {}),
- // ...(isDragAccept ? acceptStyle : {}),
- // ...(isDragReject ? rejectStyle : {}),
- }),
- []
- // [isDragActive, isDragReject, isDragAccept]
- );
- const [filesList, setFilesList] = useState([]);
-
- const thumbs = filesList.map((file) => (
-
-
-
- {error && (
-
- Error:{" "}
- {error}
-
- )}
-
-
-
- );
-};
-
export function RichMultiLinefield(props) {
const {
name,
@@ -550,25 +320,20 @@ export function RichMultiLinefield(props) {
validation,
maxFieldLength
} = props;
- const required = (value) =>
- value ? undefined : t("newappeal:is-required-label");
-
- var showIfHasParentShowValue =
- parentField != false &&
- !_.isEmpty(formProps[form]) &&
- _.has(formProps[form].values, parentField) &&
- parentFieldShowOnValue.indexOf(
- formProps[form].values[parentField].toString()
- ) > -1;
+ var showIfHasParentShowValue = isVisibleByInclusion({
+ parentField,
+ form,
+ formProps,
+ parentFieldShowOnValue
+ });
(showIfHasParentShowValue == parentField) != false &&
showIfHasParentShowValue;
//console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
let { t } = useTranslation();
- const requiredMessage = t("newappeal:is-required-label");
- const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
- const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
+ const { requiredMessage, emojiNotAllowedMessage, invalidPostcodeMessage } =
+ getValidationMessages(t);
return (
<>
{parentField != false ? (
@@ -649,246 +414,6 @@ export function RichMultiLinefield(props) {
);
}
-const RenderDatePicker = ({
- datafieldname,
- name,
- label,
- id,
- errorMsg,
- input: { onChange, value },
- meta: { touched, error },
- ...custom
-}) => {
- const router = useRouter();
-
- let { t } = useTranslation();
-
- function dateFromOffset(offsetStr) {
- const today = new Date();
-
- // "0" means today
- if (!offsetStr || offsetStr === "0") {
- return today;
- }
-
- // Expect formats like: -5d, +18m, -10y
- const match = offsetStr.match(/^([+-])(\d+)([dmy])$/i);
-
- if (!match) {
- console.warn("Invalid offset format:", offsetStr);
- return today; // fallback
- }
-
- 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 (
- <>
-
-
-
-
- );
-};
-
-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 required = (value) => (value ? undefined : "Required");
- var 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");
-
- // a and b are javascript Date objects
- function dateDiffInDays(a, b) {
- const _MS_PER_DAY = 1000 * 60 * 60 * 24;
- // Discard the time and time-zone information.
- 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);
- }
-
- dateStart =
- showIfHasParentShowValue && name == "pinswg_dateoflpadecision"
- ? "-" +
- (dateDiffInDays(
- new Date(formProps[form].values["pinswg_dateofapplication"]),
- new Date()
- ) -
- 1) +
- "d"
- : dateStart;
-
- return (
-
- {parentField != false ? (
- showIfHasParentShowValue && (
-
- validateField(
- value,
- validation,
- requiredMessage,
- emojiNotAllowedMessage,
- invalidPostcodeMessage
- )
- } // Use the external validate function
- errorMsg={t("newappeal:select-a-date-label")}
- dateStart={dateStart}
- dateEnd={dateEnd}
- hint={props.hint}
- />
- )
- ) : (
-
- validateField(
- value,
- validation,
- requiredMessage,
- emojiNotAllowedMessage,
- invalidPostcodeMessage
- )
- } // Use the external validate function
- errorMsg={t("newappeal:select-a-date-label")}
- dateStart={dateStart}
- dateEnd={dateEnd}
- hint={props.hint}
- />
- )}
-
- );
-}
-
export function DateField(props) {
const { name, label } = props;
@@ -968,886 +493,6 @@ export function DateField(props) {
);
}
-const RenderYesNo = ({
- datafieldname,
- name,
- label,
- id,
- errorMsg,
- options,
- input: { onChange, value },
- meta: { touched, error },
- ...custom
-}) => {
- return (
- <>
-
-
-
-
- );
-};
-
-export function YesNofield(props) {
- const router = useRouter();
- let { t } = useTranslation();
-
- const {
- name,
- label,
- inline,
- form,
- formProps,
- validation,
- parentFieldShowOnValue,
- parentField
- } = props;
- const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
- const required = (value) => (value ? undefined : "Required");
-
- var showIfHasParentShowValue =
- parentField != false &&
- !_.isEmpty(formProps[form]) &&
- _.has(formProps[form].values, parentField) &&
- parentFieldShowOnValue.indexOf(
- formProps[form].values[parentField].toString()
- ) > -1;
-
- (showIfHasParentShowValue == parentField) != false &&
- showIfHasParentShowValue;
-
- return (
- <>
- {parentField != false ? (
- showIfHasParentShowValue && (
-
-
-
-
- );
-};
-
-export function Radiofield(props) {
- const {
- name,
- label,
- datafieldname,
- form,
- formProps,
- parentFieldShowOnValue,
- parentField,
- validation
- } = props;
-
- const router = useRouter();
- const required = (value) => (value ? undefined : "Required");
- // console.log(props.options);
- let { t } = useTranslation();
-
- const fieldOptions = props.options
- .slice(1, props.options.length - 1)
- .split(",");
-
- //parentFieldShowOnValue
- var showIfHasParentShowValue =
- parentField != false &&
- !_.isEmpty(formProps[form]) &&
- _.has(formProps[form].values, parentField) &&
- parentFieldShowOnValue.indexOf(
- formProps[form].values[parentField].toString()
- ) > -1;
-
- (showIfHasParentShowValue == parentField) != false &&
- showIfHasParentShowValue;
-
- const requiredMessage = t("newappeal:is-required-label");
- const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
- const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
- return (
- <>
- {parentField != false ? (
- showIfHasParentShowValue && (
-
-
-
-
- );
-};
-
-export function CheckBoxfield(props) {
- const router = useRouter();
-
- console.log(props);
- const required = (value) => (value ? undefined : "Required");
- const fieldOptions =
- router.locale == "cy" ? ["Ydw", "Na", "2323"] : ["Yes", "No", "23232"];
- return (
-
-
- {touched && error && (
-
- Error:{" "}
- {error}
-
- )}
-
-
-
- );
-};
-
-export function PickList(props) {
- const { name, label, datafieldname, hint } = props;
- let { t } = useTranslation();
- const required = (value) => {
- return value || value == 0
- ? undefined
- : t("newappeal:is-required-label");
- };
- return (
-
-
- validateField(
- value,
- validation,
- requiredMessage,
- emojiNotAllowedMessage,
- invalidPostcodeMessage
- )
- } // Use the external validate function
- component={RenderTextfield}
- label={label}
- maxFieldLength={props.maxFieldLength}
- />
-
- )
- ) : (
-
- parseInt(value)}
- // maxFieldLength={props.maxFieldLength}
-
- name={props.name}
- id={props.name}
- type="text"
- className="govuk-input govuk-input--width-10"
- aria-describedby={name}
- //pattern="^\d*\.?\d+$"
- pattern="[0-9]*"
- validate={[
- required,
- isNumber,
- maxLength(props.maxFieldLength)
- ]}
- component={RenderTextfield}
- label={props.label}
- maxFieldLength={props.maxFieldLength}
- />
-
- )}
-
- );
-}
-
-export function DecimalField(props) {
- const {
- name,
- label,
- validation,
- form,
- formProps,
- parentFieldShowOnValue,
- parentField,
- maxFieldLength
- } = props;
-
- let { t } = useTranslation();
-
- const required = (value) =>
- value ? undefined : t("newappeal:is-required-label");
-
- const isNumber = (value) => {
- const regex = /^\d*\.?\d{0,1}$/;
- return regex.test(value)
- ? undefined
- : t("newappeal:invalid-number-label");
- };
-
- const maxLength = (max) => (value) =>
- value && value.length > max
- ? `Must be ${max} characters or less`
- : undefined;
-
- //parentFieldShowOnValue
- var showIfHasParentShowValue =
- parentField != false &&
- !_.isEmpty(formProps[form]) &&
- _.has(formProps[form].values, parentField) &&
- parentFieldShowOnValue.indexOf(
- formProps[form].values[parentField].toString()
- ) > -1;
-
- (showIfHasParentShowValue == parentField) != false &&
- showIfHasParentShowValue;
-
- //console.log("parentField:", parentField, showIfHasParentShowValue);
-
- const normalizeDecimal = (value) => {
- return value ? parseFloat(value) : value;
- };
-
- const validateDecimal = (value) => {
- if (!value) return t("newappeal:is-required-label");
-
- // Regex to match whole numbers or decimal numbers (up to 7 characters including decimal)
- const regex = /^\d{1,6}(\.\d{1,2})?$/; // Up to 6 digits before the decimal, 2 after
-
- // Check if the value matches the regex pattern
- if (!regex.test(value)) {
- return t("newappeal:invalid-decimal-label");
- }
-
- return undefined;
- };
-
- const requiredMessage = t("newappeal:is-required-label");
- const emojiNotAllowedMessage = t("newappeal:emojis-not-allowed-label");
- const invalidPostcodeMessage = t("newappeal:invalid-postcode-label");
- return (
- <>
- {parentField != false ? (
- showIfHasParentShowValue && (
-
-
- validateField(
- value,
- validation,
- requiredMessage,
- emojiNotAllowedMessage,
- invalidPostcodeMessage
- )
- } // Use the external validate function
- component={RenderTextfield}
- label={props.label}
- maxFieldLength={props.maxFieldLength}
- />
-
- )
- ) : (
-
-
- )}
-
- );
-}
-
-const RenderDecimalField = ({
- name,
- id,
- label,
- datafieldname,
- className,
- input,
- errorMsg,
- meta: { touched, error },
- ...custom
-}) => {
- //
- //
- //
- // {touched && error && {error}}
- //
;
-
- return (
- <>
-
-
- {touched && error && (
-
- Error:{" "}
- {error}
-
- )}
-
-
-
- );
-};
-
-const RenderCaseID = {};
-
export function ReadOnlyfield(props) {
const { name, label, value } = props;
//console.log(props.value.refno);
@@ -1876,51 +521,15 @@ export const FieldsTranslations = (label) => {
const { locale } = router;
const { appealtypes } = router.query;
- let formObj = jsonpath({
- path: "$['" + appealtypes + "']",
- json: fieldLookup,
- eval: true
+ return getFieldTranslation({
+ label,
+ locale,
+ appealtypes,
+ fieldLookup
});
-
- let labelTrans =
- router.locale == "cy"
- ? jsonpath({
- path: '$..[?(@ && @.value=="' + label + '")].value_cy',
- json: formObj,
- eval: true
- })[0]
- : label;
-
- //labelTrans = labelTrans.length > 1 ? labelTrans[0] : labelTrans;
-
- return labelTrans;
-};
-
-const PickListTranslations = (optionValue) => {
- const router = useRouter();
- const { locale } = router;
- const { appealtypes } = router.query;
- //console.log(optionValue);
- let optionTrans =
- router.locale == "cy"
- ? jsonpath({
- path: '$..[?(@ && @.value=="' + optionValue + '")].value_cy',
- json: pickListLookup,
- eval: true
- })
- : optionValue;
- //console.log(optionTrans, optionValue);
- return optionTrans;
};
export function FileUploadField(props) {
- const uploadCount =
- typeof props.uploadCount === "number" ? props.uploadCount : 0;
- const setFileCount =
- typeof props.setFileCount === "function"
- ? props.setFileCount
- : () => {};
-
return (
<>
@@ -1947,769 +556,3 @@ export function FileUploadField(props) {
);
}
-
-const baseStyle = {
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
- padding: "20px",
- borderWidth: 2,
- borderRadius: 2,
- borderColor: "#eeeeee",
- borderStyle: "dashed",
- backgroundColor: "#fafafa",
- color: "#bdbdbd",
- transition: "border .3s ease-in-out"
-};
-
-const activeStyle = {
- borderColor: "#2196f3"
-};
-
-const acceptStyle = {
- borderColor: "#00e676"
-};
-
-const rejectStyle = {
- borderColor: "#ff1744"
-};
-
-const RenderFileUpload = (field) => {
- let files = field.input.value;
- let { t } = useTranslation();
-
- const style = useMemo(
- () => ({
- ...baseStyle
- // ...(isDragActive ? activeStyle : {}),
- // ...(isDragAccept ? acceptStyle : {}),
- // ...(isDragReject ? rejectStyle : {}),
- }),
- []
- // [isDragActive, isDragReject, isDragAccept]
- );
- const [filesList, setFilesList] = useState([]);
-
- const thumbs = filesList.map((file) => (
-
- -{" "}
-
- {file.name} ({file.size / 1024}kb)
-
-
- ));
-
- const getThumbnailIcon = (fileObj, fileType) => {
- switch (fileType) {
- case "text/html":
- return "/assets/images/documenttypes/html.png";
- break;
- case "text/plain":
- return "/assets/images/documenttypes/txt.png";
- break;
- case "application/msword":
- return "/assets/images/documenttypes/doc.png";
- break;
- case "application/pdf":
- return "/assets/images/documenttypes/pdf.png";
- break;
- case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
- return "/assets/images/documenttypes/docx.png";
- break;
- case "text/csv":
- return "/assets/images/documenttypes/csv.png";
- break;
- case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
- return "/assets/images/documenttypes/xlsx.png";
- break;
- case "image/jpeg":
- return "/assets/images/documenttypes/jpg.png";
- case "image/png":
- return "/assets/images/documenttypes/png.png";
- //return URL.createObjectURL(fileObj);
- break;
- default:
- return "/assets/images/documenttypes/default.png";
- break;
- }
- };
-
- const getDocumentType = (docCode) => {
- const repDate = new Date();
-
- let day = repDate.getDate();
- let month = repDate.getMonth() + 1;
- let year = repDate.getFullYear();
-
- const pdfFileNameDateStamp =
- year + "-" + ("0" + month).slice(-2) + "-" + ("0" + day).slice(-2);
-
- switch (docCode) {
- case "000000":
- return pdfFileNameDateStamp + "_-_Statement_of_Case";
- case "000001":
- return pdfFileNameDateStamp + "_-_Application_Form";
- break;
- case "000002":
- return pdfFileNameDateStamp + "_-_Site_Ownership_Certificate";
- break;
- case "000003":
- return pdfFileNameDateStamp + "_-_Decision_Notice";
- break;
- case "000004":
- return pdfFileNameDateStamp + "_-_Site_Location_Plan";
- break;
- case "000005":
- return pdfFileNameDateStamp + "_-_Plans_Drawing_Documents";
- break;
- case "000006":
- return (
- pdfFileNameDateStamp +
- "_-_Additional_Plans_Drawings_Documents"
- );
- break;
- case "000007":
- return pdfFileNameDateStamp + "_-_Design_and_Access_Statement";
- break;
- case "000008":
- return pdfFileNameDateStamp + "_-_NSB_LPA_Additional_Documents";
- break;
- case "000009":
- return pdfFileNameDateStamp + "_-_LPA_Correspondence";
- break;
- case "000010":
- return pdfFileNameDateStamp + "_-_LPA_Original_Permission";
- break;
- case "000011":
- return pdfFileNameDateStamp + "_-_LPA's_Registration_Letter";
- break;
- case "000012":
- return pdfFileNameDateStamp + "_-_Environmental_Statement";
- break;
- case "000013":
- return pdfFileNameDateStamp + "_-_Cost_of_Application";
- break;
- case "000014":
- return pdfFileNameDateStamp + "_-_Other_Relevant_Material";
- break;
- case "000015":
- return (
- pdfFileNameDateStamp +
- "_-_S106_Agreement_or_Unilateral_Undertaking"
- );
- break;
-
- default:
- return pdfFileNameDateStamp + "_-_000000_-_";
- }
- };
-
- const filelistObj = field.fileList || {};
-
- const blobList = jsonpath({
- path: "$..[?(@ && @.documentType=='" + field.documentTypeCode + "')]",
- json: filelistObj,
- eval: true
- });
- //const blobList = filelistObj;
-
- const deleteThisBlob = async (
- containerName,
- blobName,
- deleteblobhash,
- getblobshash,
- casefolderID
- ) => {
- //console.log(containerName, blobName, deleteblobhash);
- deleteBlob(containerName, blobName, deleteblobhash, casefolderID)
- .then((data) => data)
- .then(() => {
- getFilesFromBlobHashed(
- containerName,
- getblobshash,
- casefolderID
- ).then((newfilelist) => field.setFilesForAppeal(newfilelist));
- });
- };
-
- const removeFile = (file) => {
- const newFilesArr = files.filter((user) => user.name != file.name);
- files == newFilesArr;
- field.input.onChange(newFilesArr);
- };
-
- function removeEmptyObjects(arr) {
- return arr.filter((obj) => Object.keys(obj).length > 0);
- }
-
- const [errorMessage, setErrorMessage] = useState(null);
- const [rejectedFiles, setRejectedFiles] = useState([]); // Store rejected files
-
- const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
- const [uploadCountMessage, setUploadCountMessage] = useState("");
- const [totalUploadFiles, setTotalUploadFiles] = useState(0);
-
- const handleDropRejected = (fileRejections) => {
- const errors = fileRejections
- .map(({ file, errors }) => {
- return errors.map((error) => {
- if (error.code === "file-too-large") {
- return `${file.name} ${t(
- "newappeal:new-appeal-fileupload-file-error-filesize-label"
- )}`;
- }
- if (error.code === "file-invalid-type") {
- return `${file.name} ${t(
- "newappeal:new-appeal-fileupload-file-error-invalid-type-label"
- )}`;
- }
- if (error.code === "filename-invalid-chars") {
- return (
- error.message ||
- `${file.name} ${t(
- "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
- )}`
- );
- }
- return `${file.name} ${t(
- "newappeal:new-appeal-fileupload-file-error-invalid-label"
- )}`;
- });
- })
- .flat(); // Flatten the errors array
-
- setRejectedFiles(errors); // Store the error messages for rejected files
- };
-
- // Handle accepted files (clear error message when files are accepted)
- const handleDropAccepted = () => {
- setErrorMessage(null); // Clear any previous error messages when files are accepted
- setRejectedFiles([]); // Clear any previously rejected file errorsss
- };
-
- const FILENAME_ALLOWED = /^[A-Za-z0-9 ._\-:()—']+$/;
-
- const validateFilename = (file, t) => {
- const name = file.name;
-
- // block #
- if (name.includes("#")) {
- return {
- code: "filename-invalid-chars",
- message: `${name} ${t(
- "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
- )}`
- };
- }
-
- if (!FILENAME_ALLOWED.test(name)) {
- return {
- code: "filename-invalid-chars",
- message: `${name} ${t(
- "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
- )}`
- };
- }
-
- // block characters < > " / \ | ? *
- if (/[<>"/\\|?*]/.test(name)) {
- return {
- code: "filename-invalid-chars",
- message: `${name} ${t(
- "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
- )}`
- };
- }
-
- return null; // valid
- };
-
- return (
- <>
- validateFilename(file, t)}
- onDrop={(acceptedFiles, fileRejections, e) => {
- // build + display rejected messages (ALWAYS, even if some accepted)
- if (fileRejections?.length) {
- handleDropRejected(fileRejections);
- } else {
- // only clear rejections when nothing was rejected on this drop
- setRejectedFiles([]);
- setErrorMessage(null);
- }
-
- // if nothing accepted, stop (prevents showing only "uploading" when all invalid)
- if (!acceptedFiles || acceptedFiles.length === 0) {
- setCompletedUploadFiles(true); // optional: depends on your UX
- setUploadCountMessage(0);
- setTotalUploadFiles(0);
- return;
- }
-
- // continue with your existing upload logic for accepted files
- setCompletedUploadFiles(false);
-
- const renamedAcceptedFiles = acceptedFiles.map(
- (file) =>
- new File(
- [file],
- `${getDocumentType(field.documentTypeCode)}_-_${
- file.name
- }`,
- { type: file.type }
- )
- );
-
- field.input.onChange(renamedAcceptedFiles);
-
- if (typeof field.setFileCount === "function") {
- field.setFileCount(
- (field.uploadCount || 0) +
- renamedAcceptedFiles.length
- );
- }
-
- setUploadCountMessage(0);
- setTotalUploadFiles(renamedAcceptedFiles.length);
-
- uploadSingleFile(
- renamedAcceptedFiles,
- field.containerID,
- field.ticketnumber,
- {
- onChunkComplete: ({ cumulativeUploaded }) => {
- setUploadCountMessage(cumulativeUploaded);
- }
- }
- )
- .then((data) => {
- let buildAppealFilesArray = [];
- let values = field.form.appealForm.values;
- let filesUploadObj = renamedAcceptedFiles;
-
- for (let key in filesUploadObj) {
- typeof filesUploadObj[key].name !==
- "undefined" &&
- buildAppealFilesArray.push({
- name: filesUploadObj[key].name,
- size: filesUploadObj[key].size
- });
- }
-
- function removeDuplicates(arr, key) {
- const seen = new Set();
- return arr.filter((item) => {
- const value = item[key];
- if (seen.has(value)) return false;
- seen.add(value);
- return true;
- });
- }
-
- buildAppealFilesArray = values.hasOwnProperty(
- "filesList"
- )
- ? buildAppealFilesArray.concat(values.filesList)
- : buildAppealFilesArray;
-
- buildAppealFilesArray = removeDuplicates(
- buildAppealFilesArray,
- "name"
- );
-
- Object.assign(values, {
- filesList: buildAppealFilesArray
- });
-
- // keep your existing server-side invalid handling
- if (data.invalidFiles?.length > 0) {
- setRejectedFiles((prev) => [
- ...prev,
- ...data.invalidFiles
- ]);
- setUploadCountMessage(
- renamedAcceptedFiles.length -
- data.invalidFiles.length
- );
- }
-
- return getFilesFromBlobproxy(
- field.containerID,
- field.ticketnumber
- );
- })
- .then((data) => {
- field.setFilesForAppeal(data);
- setCompletedUploadFiles(true);
- });
- }}
- >
- {({ getRootProps, getInputProps }) => (
- <>
-
-
- {" "}
-
-
- {t(
- "newappeal:new-appeal-fileupload-drop-label"
- )}{" "}
- (Max 50 MB)
-
-
- (
- {t(
- "newappeal:new-appeal-fileupload-file-list-label"
- )}
- )
-
-
- {/* */}
-
-
- )}
-
- {rejectedFiles.length > 0 && (
-
-
- {rejectedFiles.map((error, index) => (
- - {error}
- ))}
-
-
- )}
- {totalUploadFiles > 0 && completedUploadFiles == false && (
-
- {t("home:uploading-files-label", {
- number:
- totalUploadFiles > 0
- ? `${uploadCountMessage} of ${totalUploadFiles}`
- : uploadCountMessage
- })}
-
- )}
- {completedUploadFiles > 0 && uploadCountMessage >= 0 && (
-
- {t("home:completed-uploading-files-label", {
- number: uploadCountMessage
- })}
-
- )}
- {field.meta.touched && field.meta.error && (
- {field.meta.error}
- )}
- {files && Array.isArray(files) && (
- <>
- {/* {(files = removeEmptyObjects(files))} */}
-
- {!completedUploadFiles &&
- files.map(
- (file, i) =>
- typeof file.name != "undefined" && (
-
- {" "}
- {/* removeFile(file)}
- >
- −
- */}
- 
-
- {file.name} (
- {bytesToSize(file.size)})
-
- {completedUploadFiles ? (
-
- Upload complete
-
- ) : (
-
- {t(
- "home:uploading-files-progress-label"
- )}{" "}
-
- )}
-
-
-
- )
- )}
-
- )}
- {blobList.length > 0 && (
- {t("newappeal:previously-added-files")}
- )}
- {blobList.map(
- (blob, i) =>
- blob.documentType == field.documentTypeCode && (
-
-
- {
- setUploadCountMessage(
- uploadCountMessage - 1
- );
- deleteThisBlob(
- field.containerID,
- blob.name,
- blob.hasheddeletepath,
- blob.hashgetblobs,
- field.ticketnumber
- );
- }}
- title={t("home:remove-this-file-label")}
- >
- −
-
-
-
-
-
- {blob.name} ({bytesToSize(blob.contentLength)})
-
-
- )
- )}{" "}
-
- );
-};
-
-const renderField = ({ input, label, type, meta: { touched, error } }) => (
-
-
-
-
- {touched && error && {error}}
-
-
-);
-
-const RenderSubFields = ({ fields, meta: { touched, error }, ...custom }) => {
- let { t } = useTranslation();
-
- let subTitle = fields.name.split("pinswg_")[1];
-
- const checkValue = (value) => {
- let errors;
-
- if (!value) {
- errors = t("newappeal:is-required-label");
- } else {
- // Check for emojis using a regular expression
- const emojiRegex =
- /[\u{1F600}-\u{1F64F}\u{1F300}-\u{1F5FF}\u{1F680}-\u{1F6FF}\u{1F700}-\u{1F77F}\u{1F780}-\u{1F7FF}\u{1F800}-\u{1F8FF}\u{1F900}-\u{1F9FF}\u{1FA00}-\u{1FA6F}\u{1FA70}-\u{1FAFF}\u{2600}-\u{26FF}\u{2700}-\u{27BF}\u{2300}-\u{23FF}\u{2B50}\u{1F004}-\u{1F0CF}\u{1F0A0}-\u{1F0A5}\u{1F170}-\u{1F251}]/gu;
-
- if (emojiRegex.test(value)) {
- errors = "Emojis are not allowed";
- }
- }
-
- return errors;
- };
- const required = (value) =>
- value ? undefined : t("newappeal:is-required-label");
-
- const email = (value) => {
- let errors;
-
- const emailRegex =
- /(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
-
- if (!emailRegex.test(value)) {
- errors = t("newappeal:invalid-email-address-errormsg");
- }
- return errors;
- };
-
- //fields.push({});
- fields.length == 0 && fields.push({});
- return (
-
- {fields.map((member, index) => (
-
-
- {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
-
-
-
-
-
-
- {fields.length < custom.maxSubField && (
-
- )}
-
- );
-};
-
-export const FieldArrayForm = (props) => {
- const {
- name,
- label,
- validation,
- form,
- formProps,
- parentFieldShowOnValue,
- parentField,
- maxFieldLength,
- maxSubField
- } = props;
-
- const dispatch = useDispatch(); // Get dispatch using useDispatch hook
-
- var showIfHasParentShowValue =
- parentField != false &&
- !_.isEmpty(formProps[form]) &&
- _.has(formProps[form].values, parentField) &&
- parentFieldShowOnValue.indexOf(
- formProps[form].values[parentField].toString()
- ) > -1;
-
- (showIfHasParentShowValue == parentField) != false &&
- showIfHasParentShowValue;
-
- !showIfHasParentShowValue && dispatch(change("appealForm", name, null));
-
- parentFieldShowOnValue;
- const { handleSubmit, pristine, reset, submitting } = props;
-
- return (
- <>
- {" "}
- {showIfHasParentShowValue && (
-
- {" "}
-
-
- {/* */}
-
- {t(
- "newappeal:new-appeal-fileupload-drop-label"
- )}{" "}
- (Max 50 MB)
-
-
- (
- {t(
- "newappeal:new-appeal-fileupload-file-list-label"
- )}
- )
-
- -
- {rejectedFiles.map((error, index) => (
-
- {error} - ))} -
-
- {completedUploadFiles ? (
-
-
- - Upload complete -
- ) : ( -- {t( - "home:uploading-files-progress-label" - )}{" "} -
- )} -
- {
- setUploadCountMessage(
- uploadCountMessage - 1
- );
- deleteThisBlob(
- field.containerID,
- blob.name,
- blob.hasheddeletepath,
- blob.hashgetblobs,
- field.ticketnumber
- );
- }}
- title={t("home:remove-this-file-label")}
- >
- −
-
-
-
-
- {touched && error && {error}}
-
-
-
- ))}
-
- - {subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1} -
- -
-
-
-
-
-
-
-
-
-
-
- - {fields.length < custom.maxSubField && ( - - )} -