Files
Rasadyar_FrontEnd/src/features/steward/components/steward-add-buyer/InquiryForStewardAddBuyer.js

366 lines
11 KiB
JavaScript

import { Autocomplete, IconButton, TextField, Typography } from "@mui/material";
import { Grid } from "../../../../components/grid/Grid";
import { useFormik } from "formik";
import { Yup } from "../../../../lib/yup/yup";
import { SPACING } from "../../../../data/spacing";
import { useDispatch, useSelector } from "react-redux";
import { LOADING_END } from "../../../../lib/redux/slices/appSlice";
import {
stewardSellOutGetBuyers,
stewatdSubmitBuyerDataService,
} from "../../../guild/services/steward-sell-out-get-buyers";
import { useContext, useEffect } from "react";
import { AppContext } from "../../../../contexts/AppContext";
import SearchIcon from "@mui/icons-material/Search";
import { slaughterEditBuyerDataService } from "../../../slaughter-house/services/slaughter-house-submit-buyer";
export const validationSchemaForStewardAddBuyer = Yup.object({
mobile: Yup.string()
.required("این فیلد اجباری است!")
.min(11, "شماره موبایل باید 11 رقم باشد")
.max(11, "شماره موبایل باید 11 رقم باشد")
.matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
firstName: Yup.string()
.required("این فیلد اجباری است!")
.typeError("لطفا فیلد را به درستی وارد کنید!"),
lastName: Yup.string()
.required("این فیلد اجباری است!")
.typeError("لطفا فیلد را به درستی وارد کنید!"),
unit_name: Yup.string()
.required("این فیلد اجباری است!")
.typeError("لطفا فیلد را به درستی وارد کنید!"),
province: Yup.string()
.required("این فیلد اجباری است!")
.typeError("لطفا فیلد را به درستی وارد کنید!"),
city: Yup.string()
.required("این فیلد اجباری است!")
.typeError("لطفا فیلد را به درستی وارد کنید!"),
});
export const handleSubmitForStewardAddBuyer = (
formik,
dispatch,
isEdit,
tableData,
updateTable,
openNotif,
DRAWER,
role
) => {
if (isEdit) {
dispatch(
slaughterEditBuyerDataService({
buyer_key: tableData?.key,
mobile: formik.values.mobile,
first_name: formik.values.firstName,
last_name: formik.values.lastName,
unit_name: formik.values.unit_name,
city: formik.values.city,
province: formik.values.province,
})
).then((r) => {
updateTable();
if (r.payload.error) {
openNotif({
vertical: "top",
horizontal: "center",
msg: r.payload.error,
severity: "error",
});
} else {
dispatch(DRAWER({ right: false, bottom: false, content: null }));
openNotif({
vertical: "top",
horizontal: "center",
msg: "عملیات با موفقیت انجام شد.",
severity: "success",
});
}
});
} else {
dispatch(
stewatdSubmitBuyerDataService({
role: role,
mobile: formik.values.mobile,
first_name: formik.values.firstName,
last_name: formik.values.lastName,
unit_name: formik.values.unit_name,
city: formik.values.city,
province: formik.values.province,
})
).then((r) => {
updateTable();
if (r.payload.error) {
openNotif({
vertical: "top",
horizontal: "center",
msg: r.payload.error,
severity: "error",
});
} else {
dispatch(DRAWER({ right: false, bottom: false, content: null }));
openNotif({
vertical: "top",
horizontal: "center",
msg: "عملیات با موفقیت انجام شد.",
severity: "success",
});
}
});
}
};
export const handleSetFormDataFromTableDataForStewardAddBuyer = (
tableData,
formik
) => {
formik.setValues({
mobile: tableData.mobile || "",
firstName: tableData.firstName || "",
lastName: tableData.lastName || "",
unit_name: tableData.unitName || "",
province: tableData.province || "",
city: tableData.city || "",
});
setTimeout(() => {
formik.validateForm();
}, 1);
};
export const handleSetFormDataFromUserDataForStewardAddBuyer = (
userData,
formik
) => {
const user = userData?.[0];
if (user) {
console.log(user);
formik.setValues({
mobile: user.mobile || "",
firstName: user.firstName || "",
lastName: user.lastName || "",
unit_name: user.unitName || "",
province: user.province || "",
city: user.city || "",
});
setTimeout(() => {
formik.validateForm();
}, 1);
}
};
export const InquiryForStewardAddBuyer = ({
notFound,
setNotFound,
setUserData,
formik,
}) => {
const [openNotif] = useContext(AppContext);
const selectedSubUser = useSelector(
(state) => state.userSlice.selectedSubUser
);
const dispatch = useDispatch();
const formik2 = useFormik({
initialValues: {
mobile: "",
},
validationSchema: Yup.object({
mobile: Yup.string()
.required("این فیلد اجباری است!")
.min(11, "شماره موبایل باید 11 رقم باشد")
.max(11, "شماره موبایل باید 11 رقم باشد")
.matches(/^09\d{9}$/, "شماره موبایل باید با 09 شروع شود و 11 رقم باشد"),
}),
validateOnMount: true,
});
const handleInquiry = () => {
dispatch(
stewardSellOutGetBuyers({
mobile: formik2.values.mobile,
role_key: selectedSubUser?.key || "",
})
).then((r) => {
dispatch(LOADING_END());
if (r.error) {
setNotFound(true);
openNotif({
vertical: "top",
horizontal: "center",
msg: "خریدار یافت نشد، یک خریدار جدید ثبت کنید!",
severity: "error",
});
} else {
const responseData = r.payload?.data;
// Check if response is an empty array
if (Array.isArray(responseData) && responseData.length === 0) {
setNotFound(true);
setUserData(null);
} else {
setNotFound(false);
handleSetFormDataFromUserDataForStewardAddBuyer(responseData, formik);
setUserData(responseData);
}
}
});
};
useEffect(() => {
if (notFound) {
formik.setFieldValue("mobile", formik2.values.mobile);
}
}, [notFound]);
return (
<Grid container xs={12}>
<Typography>جستجو کاربر</Typography>
<Grid mt={SPACING.SMALL} display="flex" width={1}>
<TextField
fullWidth
id="mobile"
label="شماره موبایل"
variant="outlined"
value={formik2.values.mobile}
error={formik2.touched.mobile && Boolean(formik2.errors.mobile)}
onChange={(e) => {
formik2.handleChange(e);
// Reset notFound when user starts typing
if (notFound) {
setNotFound(false);
}
}}
onBlur={formik2.handleBlur}
helperText={formik2.touched.mobile && formik2.errors.mobile}
/>
<IconButton
disabled={!formik2.isValid}
aria-label="search"
color="primary"
onClick={handleInquiry}
>
<SearchIcon />
</IconButton>
</Grid>
{notFound && (
<Grid container xs={12} mt={SPACING.SMALL}>
<Typography variant="body2" color="error" sx={{ width: "100%" }}>
خریداری یافت نشد
</Typography>
</Grid>
)}
</Grid>
);
};
export const StewardAddBuyerForm = ({
formik,
provinceData,
cityData,
notFound,
}) => {
return (
<Grid
container
justifyContent="space-between"
alignItems="start"
xs={12}
direction="column"
gap={2}
>
<TextField
fullWidth
id="mobile"
label="شماره موبایل"
variant="outlined"
value={formik.values.mobile}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
helperText={formik.touched.mobile && formik.errors.mobile}
/>
<TextField
fullWidth
id="firstName"
label="نام"
variant="outlined"
value={formik.values.firstName}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
helperText={formik.touched.firstName && formik.errors.firstName}
/>
<TextField
fullWidth
id="lastName"
label="نام خانوادگی"
variant="outlined"
value={formik.values.lastName}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
helperText={formik.touched.lastName && formik.errors.lastName}
/>
<TextField
fullWidth
id="unit_name"
label="نام واحد"
variant="outlined"
value={formik.values.unit_name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
helperText={formik.touched.unit_name && formik.errors.unit_name}
/>
{provinceData.length > 0 && (
<Autocomplete
style={{ width: "100%" }}
disablePortal
id="province"
options={
provinceData
? provinceData.map((i) => ({ id: i.name, label: i.name }))
: []
}
onChange={(e, value) => {
formik.setFieldValue("province", value ? value.id : "");
formik.setFieldValue("city", "");
}}
renderInput={(params) => (
<TextField {...params} label="استان را انتخاب کنید" />
)}
value={
provinceData.find((i) => i.name === formik.values.province)?.name
}
/>
)}
{!notFound && (
<Typography variant="caption" color="error">
استان: {formik.values.province}
</Typography>
)}
{cityData.length > 0 && (
<Autocomplete
key={formik.values.city}
style={{ width: "100%" }}
disabled={!formik.values.province}
disablePortal
id="city"
options={
cityData ? cityData.map((i) => ({ id: i.name, label: i.name })) : []
}
onChange={(e, value) => {
formik.setFieldValue("city", value ? value.id : "");
}}
renderInput={(params) => (
<TextField {...params} label="شهر را انتخاب کنید" />
)}
value={cityData.find((i) => i.name === formik.values.city)?.name}
/>
)}
{!notFound && (
<Typography variant="caption" color="error">
شهر: {formik.values.city}
</Typography>
)}
</Grid>
);
};