151 lines
6.3 KiB
JavaScript
151 lines
6.3 KiB
JavaScript
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 (
|
|
<ul className="subFieldList">
|
|
{fields.map((member, index) => (
|
|
<div key={index}>
|
|
<h4>
|
|
{subTitle == "owners" ? "Owner" : "Tenant"} #{index + 1}
|
|
</h4>
|
|
|
|
<div className="fieldArrayContainer">
|
|
<div className="govuk-grid-column-full">
|
|
<div
|
|
className="gouk-grid-row"
|
|
style={{
|
|
display: "flex",
|
|
marginBottom: "20px"
|
|
}}
|
|
>
|
|
<Field
|
|
id={`${member}.${fields.name}_firstname`}
|
|
name={`${member}.${fields.name}_firstname`}
|
|
type="text"
|
|
component={RenderTextfield}
|
|
validate={[checkValue]}
|
|
label={"First name"}
|
|
className="govuk-input govuk-input--width-12"
|
|
showErrorBottom={true}
|
|
/>
|
|
<Field
|
|
id={`${member}.${fields.name}_lastname`}
|
|
name={`${member}.${fields.name}_lastname`}
|
|
type="text"
|
|
component={RenderTextfield}
|
|
validate={[checkValue]}
|
|
label={"Last name"}
|
|
className="govuk-input govuk-input--width-12"
|
|
showErrorBottom={true}
|
|
/>
|
|
</div>
|
|
<div
|
|
className="gouk-grid-row"
|
|
style={{ display: "flex" }}
|
|
>
|
|
<Field
|
|
id={`${member}.${fields.name}_email`}
|
|
name={`${member}.${fields.name}_email`}
|
|
type="text"
|
|
component={RenderTextfield}
|
|
validate={[email]}
|
|
label={"Email"}
|
|
className="govuk-input govuk-input--width-12"
|
|
showErrorBottom={true}
|
|
/>
|
|
<Field
|
|
name={`${member}.dateserved`}
|
|
type="text"
|
|
component={RenderDatePicker}
|
|
label="Date served "
|
|
dateStart={"-6m"}
|
|
dateEnd={"0"}
|
|
validate={[required]}
|
|
className="govuk-input govuk-input--width-12"
|
|
showErrorBottom={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="gouk-grid-row"
|
|
style={{ display: "flex" }}
|
|
>
|
|
<button
|
|
type="button"
|
|
title="Remove"
|
|
onClick={() => fields.remove(index)}
|
|
className="govuk-button fieldArrayDelete"
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
<br />
|
|
{fields.length < custom.maxSubField && (
|
|
<button
|
|
type="button"
|
|
className="govuk-link fieldArrayLink"
|
|
onClick={() => fields.push({})}
|
|
>
|
|
{subTitle == "owners"
|
|
? t("newappeal:new-appeal-add-owner-label")
|
|
: t("newappeal:new-appeal-add-tenant-label")}
|
|
</button>
|
|
)}
|
|
</ul>
|
|
);
|
|
};
|