Files
expert-front/src/components/dashboard/passenger-boss/Form/ConfirmForm.jsx

104 lines
2.9 KiB
JavaScript

import { CONFIRM_PASSENGER_BOSS } from "@/core/data/apiRoutes";
import {
Dialog,
DialogTitle,
DialogContent,
DialogContentText,
DialogActions,
Button,
TextField,
} from "@mui/material";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
const t = useTranslations();
const [proposedAmount, setProposedAmount] = useState("");
const [description, setDescription] = useState("");
//formik
const validationSchema = Yup.object().shape({
proposed_amount: Yup.string().required(
t("ConfirmDialog.approved_amount_error")
),
});
const formik = useFormik({
initialValues: {
proposed_amount: "",
description: "",
},
validationSchema,
onSubmit: () => {
const formData = new FormData();
formData.append("approved_amount", proposedAmount);
if (description != "") formData.append("expert_description", description);
handleClose();
confirmData(CONFIRM_PASSENGER_BOSS, rowId, formData);
},
});
const handleDescriptionChange = (event) => {
setDescription(event.target.value);
};
const handleAmountChange = (event) => {
if (/^\d*$/.test(event.target.value)) {
setProposedAmount(event.target.value);
}
formik.handleChange(event);
};
return (
<Dialog open={open}>
<DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
<DialogContent>
<DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
<TextField
name="description"
multiline
rows={8}
placeholder={t("ConfirmDialog.description")}
value={description}
onChange={handleDescriptionChange}
fullWidth
variant="outlined"
sx={{ mt: 1 }}
/>
<TextField
name="proposed_amount"
label={t("ConfirmDialog.approved_amount")}
type="number"
inputProps={{
min: 0,
inputMode: "numeric",
pattern: "[0-9]*",
}}
variant="outlined"
value={proposedAmount}
onChange={handleAmountChange}
onBlur={formik.handleBlur("proposed_amount")}
error={
formik.touched.proposed_amount &&
Boolean(formik.errors.proposed_amount)
}
helperText={
formik.touched.proposed_amount && formik.errors.proposed_amount
}
sx={{ mt: 1 }}
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
{t("ConfirmDialog.button-cancel")}
</Button>
<Button onClick={formik.handleSubmit} color="primary">
{t("ConfirmDialog.button-confirm")}
</Button>
</DialogActions>
</Dialog>
);
};
export default ConfirmForm;