446 lines
22 KiB
JavaScript
446 lines
22 KiB
JavaScript
import StyledForm from "@/core/components/StyledForm";
|
|
import UploadSystem from "@/core/components/UploadSystem";
|
|
import {GET_PROVINCE_LIST, UPDATE_LOAN_REQUEST_WELFARE, DETAILS_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
|
|
import useDirection from "@/lib/app/hooks/useDirection";
|
|
import useUser from "@/lib/app/hooks/useUser";
|
|
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
|
import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
|
|
import axios from "axios";
|
|
import {Field, Formik} from "formik";
|
|
import {useTranslations} from "next-intl";
|
|
import {useEffect, useMemo, useState} from "react";
|
|
import * as Yup from "yup";
|
|
import SelectBox from "@/core/components/SelectBox";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
import {useRouter} from "next/router";
|
|
import useLoading from "@/lib/app/hooks/useLoading";
|
|
|
|
const EditFormComponent = () => {
|
|
const t = useTranslations();
|
|
const {directionApp} = useDirection();
|
|
const {token} = useUser();
|
|
const requestServer = useRequest();
|
|
const router = useRouter();
|
|
const {setLoadingPage} = useLoading();
|
|
|
|
const [provinceList, setProvinceList] = useState(null);
|
|
const [initialValues, setInitialValues] = useState(null);
|
|
|
|
// get province list
|
|
useEffect(() => {
|
|
setLoadingPage(true)
|
|
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
|
|
.then(function ({data}) {
|
|
const formattedData = data.map((province, index) => ({
|
|
id: index,
|
|
name: province.name,
|
|
value: province.id,
|
|
}));
|
|
setProvinceList(formattedData);
|
|
}).catch(() => {
|
|
});
|
|
}, []);
|
|
|
|
|
|
// get form data
|
|
useEffect(() => {
|
|
if (!provinceList) return;
|
|
requestServer(DETAILS_LOAN_REQUEST_WELFARE + router.query.id, "get", {auth: true, notification: false})
|
|
.then(function ({data}) {
|
|
const item = data.data;
|
|
const formattedData = {
|
|
name: item.name,
|
|
phone_number: item.phone_number,
|
|
province_id: item.province_id,
|
|
national_id: item.national_id,
|
|
shenasname_id: item.shenasname_id,
|
|
sherkat_naft_doc: item.sherkat_naft_doc,
|
|
estate_doc: item.estate_doc,
|
|
agreement_doc: item.agreement_doc,
|
|
national_card_image: item.national_card_image,
|
|
shenasname_image: item.shenasname_image,
|
|
payan_khedmat_image: item.payan_khedmat_image,
|
|
}
|
|
setInitialValues(formattedData);
|
|
setLoadingPage(false)
|
|
})
|
|
.catch(() => {
|
|
})
|
|
}, [provinceList]);
|
|
|
|
// validation and request action of form
|
|
const validationSchema = Yup.object().shape({
|
|
name: Yup.string().required(t("LoanRequest.error_message_name")),
|
|
phone_number: Yup.string().required(
|
|
t("LoanRequest.error_message_phone_number")
|
|
),
|
|
province_id: Yup.string().required(t("LoanRequest.error_message_province")),
|
|
national_id: Yup.string().required(t("LoanRequest.error_message_national_code")),
|
|
shenasname_id: Yup.string().required(t("LoanRequest.error_message_shenasname_id")),
|
|
sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
|
|
estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
|
|
agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
|
|
national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
|
|
shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
|
|
payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
|
|
});
|
|
|
|
const handleSubmit = async (values, props) => {
|
|
const formData = new FormData();
|
|
formData.append("name", values.name);
|
|
formData.append("phone_number", values.phone_number);
|
|
formData.append("province_id", values.province_id);
|
|
formData.append("national_id", values.national_id);
|
|
formData.append("shenasname_id", values.shenasname_id);
|
|
if (values.sherkat_naft_doc != initialValues.sherkat_naft_doc)
|
|
formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
|
|
if (values.estate_doc != initialValues.estate_doc)
|
|
formData.append("estate_doc", values.estate_doc);
|
|
if (values.agreement_doc != initialValues.agreement_doc)
|
|
formData.append("agreement_doc", values.agreement_doc);
|
|
if (values.shenasname_image != initialValues.shenasname_image)
|
|
formData.append("shenasname_image", values.shenasname_image);
|
|
if (values.national_card_image != initialValues.national_card_image)
|
|
formData.append("national_card_image", values.national_card_image);
|
|
if (values.payan_khedmat_image != initialValues.payan_khedmat_image)
|
|
formData.append("payan_khedmat_image", values.payan_khedmat_image);
|
|
|
|
requestServer(UPDATE_LOAN_REQUEST_WELFARE + router.query.id, "post", {auth: true, data: formData})
|
|
.then(function (response) {
|
|
})
|
|
.catch(function (error) {
|
|
})
|
|
.finally(function () {
|
|
props.setSubmitting(false);
|
|
});
|
|
};
|
|
if (!initialValues) return "";
|
|
return (
|
|
<Formik
|
|
initialValues={initialValues}
|
|
onSubmit={handleSubmit}
|
|
validationSchema={validationSchema}
|
|
>
|
|
{(props) => (
|
|
<Stack
|
|
spacing={2}
|
|
sx={{
|
|
p: 1,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<StyledForm sx={{width: "100%"}}>
|
|
<Box sx={{my: 1}}>
|
|
<Divider>
|
|
<Chip
|
|
label={t("LoanRequest.personal_info")}
|
|
/>
|
|
</Divider>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: {xs: "column", sm: "row"},
|
|
alignItems: "start",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
mx: {xs: 0, sm: 2},
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
as={TextField}
|
|
sx={{width: "100%"}}
|
|
name="name"
|
|
variant="outlined"
|
|
size="small"
|
|
label={t("LoanRequest.text_field_name")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_name")}
|
|
type={"text"}
|
|
error={!!(props.touched.name && props.errors.name)}
|
|
fullWidth
|
|
helperText={props.touched.name ? props.errors.name : null}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
mx: {xs: 0, sm: 2},
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
as={TextField}
|
|
sx={{width: "100%"}}
|
|
name="phone_number"
|
|
variant="outlined"
|
|
size="small"
|
|
label={t("LoanRequest.text_field_phone_number")}
|
|
placeholder={t(
|
|
"LoanRequest.text_field_enter_your_phone_number"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
!!(props.touched.phone_number && props.errors.phone_number)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.phone_number
|
|
? props.errors.phone_number
|
|
: null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
mx: {xs: 0, sm: 2},
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
name="province_id"
|
|
label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
|
|
size="small"
|
|
selectType="province_id"
|
|
component={SelectBox}
|
|
selectors={provinceList}
|
|
select={props.values.province_id}
|
|
setFieldValue={props.setFieldValue}
|
|
setFieldTouched={props.setFieldTouched}
|
|
error={
|
|
!!(props.touched.province_id && props.errors.province_id)
|
|
}
|
|
helperText={
|
|
props.touched.province_id ? props.errors.province_id : null
|
|
}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: {xs: "column", sm: "row"},
|
|
alignItems: "start",
|
|
justifyContent: "center",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
mx: {xs: 0, sm: 2},
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
as={TextField}
|
|
sx={{width: "100%"}}
|
|
name="national_id"
|
|
variant="outlined"
|
|
size="small"
|
|
label={t("LoanRequest.text_field_national_code")}
|
|
placeholder={t(
|
|
"LoanRequest.text_field_enter_your_national_code"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
!!(props.touched.national_id && props.errors.national_id)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.national_id
|
|
? props.errors.national_id
|
|
: null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
mx: {xs: 0, sm: 2},
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
as={TextField}
|
|
sx={{width: "100%"}}
|
|
name="shenasname_id"
|
|
variant="outlined"
|
|
size="small"
|
|
label={t("LoanRequest.text_field_shenasname_id")}
|
|
placeholder={t(
|
|
"LoanRequest.text_field_enter_your_shenasname_id"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
!!(props.touched.shenasname_id && props.errors.shenasname_id)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.shenasname_id
|
|
? props.errors.shenasname_id
|
|
: null
|
|
}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box sx={{my: 1}}>
|
|
<Divider>
|
|
<Chip
|
|
label={t("LoanRequest.uploading_documents")}
|
|
/>
|
|
</Divider>
|
|
</Box>
|
|
<Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
|
|
sx={{justifyContent: "center"}}>
|
|
<Box sx={{
|
|
mx: {xs: 0, sm: 1},
|
|
maxWidth: "200px"
|
|
}}>
|
|
<UploadSystem
|
|
setFieldValue={props.setFieldValue}
|
|
default_image={initialValues.sherkat_naft_doc}
|
|
fieldName="sherkat_naft_doc"
|
|
imageAlt={t("app_name")}
|
|
label={t("LoanRequest.file_field_sherkat_naft_doc")}
|
|
enableDelete={false}
|
|
error={
|
|
!!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
|
|
}
|
|
helperText={
|
|
props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box sx={{
|
|
mx: {xs: 0, sm: 1},
|
|
maxWidth: "200px"
|
|
}}>
|
|
<UploadSystem
|
|
setFieldValue={props.setFieldValue}
|
|
default_image={initialValues.estate_doc}
|
|
fieldName="estate_doc"
|
|
imageAlt={t("app_name")}
|
|
label={t("LoanRequest.file_field_estate_doc")}
|
|
enableDelete={false}
|
|
error={
|
|
!!(props.touched.estate_doc && props.errors.estate_doc)
|
|
}
|
|
helperText={
|
|
props.touched.estate_doc ? props.errors.estate_doc : null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box sx={{
|
|
mx: {xs: 0, sm: 1},
|
|
maxWidth: "200px"
|
|
}}>
|
|
<UploadSystem
|
|
setFieldValue={props.setFieldValue}
|
|
default_image={initialValues.agreement_doc}
|
|
fieldName="agreement_doc"
|
|
imageAlt={t("app_name")}
|
|
label={t("LoanRequest.file_field_agreement_doc")}
|
|
enableDelete={false}
|
|
error={
|
|
!!(props.touched.agreement_doc && props.errors.agreement_doc)
|
|
}
|
|
helperText={
|
|
props.touched.agreement_doc ? props.errors.agreement_doc : null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box sx={{
|
|
mx: {xs: 0, sm: 1},
|
|
maxWidth: "200px"
|
|
}}>
|
|
<UploadSystem
|
|
setFieldValue={props.setFieldValue}
|
|
default_image={initialValues.shenasname_image}
|
|
fieldName="shenasname_image"
|
|
imageAlt={t("app_name")}
|
|
label={t("LoanRequest.file_field_shenasname_image")}
|
|
enableDelete={false}
|
|
error={
|
|
!!(props.touched.shenasname_image && props.errors.shenasname_image)
|
|
}
|
|
helperText={
|
|
props.touched.shenasname_image ? props.errors.shenasname_image : null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box sx={{
|
|
mx: {xs: 0, sm: 1},
|
|
maxWidth: "200px"
|
|
}}>
|
|
<UploadSystem
|
|
setFieldValue={props.setFieldValue}
|
|
default_image={initialValues.payan_khedmat_image}
|
|
fieldName="payan_khedmat_image"
|
|
imageAlt={t("app_name")}
|
|
label={t("LoanRequest.file_field_payan_khedmat_image")}
|
|
enableDelete={false}
|
|
error={
|
|
!!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
|
|
}
|
|
helperText={
|
|
props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box sx={{
|
|
mx: {xs: 0, sm: 1},
|
|
maxWidth: "200px"
|
|
}}>
|
|
<UploadSystem
|
|
setFieldValue={props.setFieldValue}
|
|
default_image={initialValues.national_card_image}
|
|
fieldName="national_card_image"
|
|
imageAlt={t("app_name")}
|
|
label={t("LoanRequest.file_field_national_card_image")}
|
|
enableDelete={false}
|
|
error={
|
|
!!(props.touched.national_card_image && props.errors.national_card_image)
|
|
}
|
|
helperText={
|
|
props.touched.national_card_image ? props.errors.national_card_image : null
|
|
}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: {xs: "column", sm: "row"},
|
|
alignItems: "center",
|
|
mx: "auto",
|
|
my: 2,
|
|
width: {xs: "100%", sm: "30%", md: "25%"},
|
|
}}
|
|
>
|
|
<Button
|
|
fullWidth
|
|
type="submit"
|
|
variant="contained"
|
|
size="large"
|
|
sx={{mt: 2}}
|
|
endIcon={<DataSaverOnIcon/>}
|
|
disabled={props.isSubmitting}
|
|
>
|
|
{t("LoanRequest.button_submit")}
|
|
</Button>
|
|
</Box>
|
|
</StyledForm>
|
|
</Stack>
|
|
)}
|
|
</Formik>
|
|
);
|
|
};
|
|
|
|
export default EditFormComponent; |