115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
import { useTranslation } from "react-i18next";
|
|
import FormField from "../components/FormField";
|
|
import FormInput from "../components/FormInput";
|
|
import FormSelect from "../components/FormSelect";
|
|
import Button from "../components/Button";
|
|
import FormBox from "../components/FormBox";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useState } from "react";
|
|
import { useToast } from "../hooks/useToast";
|
|
import FieldsWrapper from "../components/FieldsWrapper";
|
|
|
|
function ChargeManagement() {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const showToast = useToast();
|
|
|
|
const [productDetails, setProductDetails] = useState({
|
|
productCode: "",
|
|
interestCategory: "",
|
|
productCodeValid: true,
|
|
interestCategoryValid: true,
|
|
});
|
|
|
|
const formFields = [
|
|
{
|
|
name: "productCode",
|
|
label: t("productCode"),
|
|
type: "input",
|
|
subType: "number",
|
|
maxLength: 4,
|
|
validate: (value) => /^[0-9]{4}/.test(value),
|
|
},
|
|
{
|
|
name: "interestCategory",
|
|
label: t("interestCategory"),
|
|
type: "input",
|
|
subType: "number",
|
|
maxLength: 4,
|
|
validate: (value) => /^[0-9]{4}/.test(value),
|
|
},
|
|
];
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
const newProductDetails = { ...productDetails };
|
|
let isValid = true;
|
|
|
|
formFields.forEach((field) => {
|
|
if (!field.validate(newProductDetails[field.name])) {
|
|
isValid = false;
|
|
newProductDetails[`${field.name}Valid`] = false;
|
|
}
|
|
});
|
|
|
|
if (!isValid) {
|
|
setProductDetails(newProductDetails);
|
|
showToast(t("highlightedFieldsInvalid"), "error");
|
|
return;
|
|
}
|
|
|
|
navigate("change", {
|
|
state: {
|
|
productCode: productDetails.productCode,
|
|
interestCategory: productDetails.interestCategory,
|
|
},
|
|
});
|
|
};
|
|
|
|
const renderField = (field) => {
|
|
const commonProps = {
|
|
value: productDetails[field.name],
|
|
onChange: (e) => {
|
|
const newLockerDetails = { ...productDetails };
|
|
if (field.subType === "number") {
|
|
e.target.value = e.target.value.replace(/\D/g, "");
|
|
if (e.target.value.length > field.maxLength) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
newLockerDetails[field.name] = e.target.value;
|
|
newLockerDetails[`${field.name}Valid`] = true;
|
|
setProductDetails(newLockerDetails);
|
|
},
|
|
maxLength: field.maxLength,
|
|
type: field.subType,
|
|
readOnly: field.readOnly,
|
|
};
|
|
const valid = productDetails[`${field.name}Valid`];
|
|
return (
|
|
<FormField key={field.name} label={field.label} icon={field.icon}>
|
|
{field.type === "input" ? (
|
|
<FormInput
|
|
props={commonProps}
|
|
valid={valid}
|
|
/>
|
|
) : (
|
|
<FormSelect props={commonProps} valid={valid} options={field.options} />
|
|
)}
|
|
</FormField>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<FormBox title={t("chargeManagement")}>
|
|
<FieldsWrapper>
|
|
{formFields.map(renderField)}
|
|
</FieldsWrapper>
|
|
<Button text={t("submit")} onClick={handleSubmit} />
|
|
</FormBox>
|
|
);
|
|
}
|
|
|
|
export default ChargeManagement;
|