355 lines
16 KiB
JavaScript
355 lines
16 KiB
JavaScript
import StyledForm from "@/core/components/StyledForm";
|
|
import UploadSystem from "@/core/components/UploadSystem";
|
|
import {GET_PROVINCE_LIST, SEND_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, Stack, TextField} from "@mui/material";
|
|
import axios from "axios";
|
|
import {Field, Formik} from "formik";
|
|
import {useTranslations} from "next-intl";
|
|
import {useEffect, useState} from "react";
|
|
import * as Yup from "yup";
|
|
import SelectBox from "@/core/components/SelectBox";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
|
|
const AddFormComponent = () => {
|
|
const t = useTranslations();
|
|
const {directionApp} = useDirection();
|
|
const {token} = useUser();
|
|
const requestServer = useRequest()
|
|
|
|
// get province list
|
|
const [provinceList, setProvinceList] = useState([]);
|
|
useEffect(() => {
|
|
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(() => {
|
|
})
|
|
}, []);
|
|
// end get province list
|
|
|
|
// upload files
|
|
const [selectedImageShenasname, setSelectedImageShenasname] = useState(
|
|
"/images/upload-image.svg"
|
|
);
|
|
const [fileTypeShenasname, setFileTypeShenasname] = useState(null);
|
|
const [fileNameShenasname, setFileNameShenasname] = useState(null);
|
|
const [selectedImageNationalCard, setSelectedImageNationalCard] = useState(
|
|
"/images/upload-image.svg"
|
|
);
|
|
const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null);
|
|
const [fileNameNationalCard, setFileNameNationalCard] = useState(null);
|
|
|
|
const handleUploadChangeShenasname = (event, setFieldValue) => {
|
|
const uploadedFile = event.target?.files?.[0];
|
|
if (uploadedFile) {
|
|
const fileType = event.target?.files?.[0].type;
|
|
const fileName = event.target?.files?.[0].name;
|
|
setSelectedImageShenasname(URL.createObjectURL(uploadedFile));
|
|
setFileTypeShenasname(fileType);
|
|
setFileNameShenasname(fileName);
|
|
setFieldValue("shenasname_img", uploadedFile);
|
|
}
|
|
};
|
|
const handleUploadChangeNationalCard = (event, setFieldValue) => {
|
|
const uploadedFile = event.target?.files?.[0];
|
|
const fileType = event.target.files[0].type;
|
|
const fileName = event.target.files[0].name;
|
|
if (uploadedFile) {
|
|
setSelectedImageNationalCard(URL.createObjectURL(uploadedFile));
|
|
setFileTypeNationalCard(fileType);
|
|
setFileNameNationalCard(fileName);
|
|
setFieldValue("national_card_img", uploadedFile);
|
|
}
|
|
};
|
|
// end upload files
|
|
|
|
// initial values, validation and request action of form
|
|
const initialValues = {
|
|
name: "",
|
|
phone_number: "",
|
|
province: "",
|
|
national_code: "",
|
|
shenasname_id: "",
|
|
national_card_img: null,
|
|
shenasname_img: null,
|
|
};
|
|
|
|
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: Yup.string().required(t("LoanRequest.error_message_province")),
|
|
national_code: Yup.string().required(
|
|
t("LoanRequest.error_message_national_code")
|
|
),
|
|
shenasname_id: Yup.string().required(
|
|
t("LoanRequest.error_message_shenasname_id")
|
|
),
|
|
});
|
|
|
|
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);
|
|
formData.append("national_id", values.national_code);
|
|
formData.append("shenasname_id", values.shenasname_id);
|
|
if (values.shenasname_img != null)
|
|
formData.append("shenasname_image", values.shenasname_img);
|
|
if (values.national_card_img != null)
|
|
formData.append("national_card_image", values.national_card_img);
|
|
|
|
requestServer(SEND_LOAN_REQUEST_WELFARE, "post", {auth: true, data: formData})
|
|
.then(function (response) {
|
|
|
|
}).catch(function (error) {
|
|
props.setSubmitting(false);
|
|
});
|
|
};
|
|
// end initial values, validation and request action of form
|
|
|
|
return (
|
|
<Formik
|
|
initialValues={initialValues}
|
|
onSubmit={handleSubmit}
|
|
validationSchema={validationSchema}
|
|
>
|
|
{(props) => (
|
|
<Stack
|
|
spacing={2}
|
|
sx={{
|
|
p: 1,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<StyledForm sx={{width: "100%"}}>
|
|
<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"
|
|
label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
|
|
size="small"
|
|
selectType="province"
|
|
component={SelectBox}
|
|
selectors={provinceList}
|
|
select={props.values.province}
|
|
setFieldValue={props.setFieldValue}
|
|
setFieldTouched={props.setFieldTouched}
|
|
error={
|
|
!!(props.touched.province && props.errors.province)
|
|
}
|
|
helperText={
|
|
props.touched.province ? props.errors.province : 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_code"
|
|
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_code && props.errors.national_code)
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.national_code
|
|
? props.errors.national_code
|
|
: 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={{
|
|
display: "flex",
|
|
flexDirection: {xs: "column", sm: "row"},
|
|
alignItems: "center",
|
|
justifyContent: "space-around",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<UploadSystem
|
|
selectedImage={selectedImageShenasname}
|
|
handleUploadChange={(e) =>
|
|
handleUploadChangeShenasname(e, props.setFieldValue)
|
|
}
|
|
setselectedImage={setSelectedImageShenasname}
|
|
setFieldValue={props.setFieldValue}
|
|
fieldname="shenasname_img"
|
|
fileType={fileTypeShenasname}
|
|
fileName={fileNameShenasname}
|
|
imageAlt={t("app_name")}
|
|
imageSize={[300 /*width*/, 150 /*height*/]}
|
|
label={t("LoanRequest.file_field_shenasname_image")}
|
|
/>
|
|
<UploadSystem
|
|
selectedImage={selectedImageNationalCard}
|
|
handleUploadChange={(e) =>
|
|
handleUploadChangeNationalCard(e, props.setFieldValue)
|
|
}
|
|
setselectedImage={setSelectedImageNationalCard}
|
|
setFieldValue={props.setFieldValue}
|
|
fieldname="national_card_img"
|
|
fileType={fileTypeNationalCard}
|
|
fileName={fileNameNationalCard}
|
|
imageAlt={t("app_name")}
|
|
imageSize={[300 /*width*/, 150 /*height*/]}
|
|
label={t("LoanRequest.file_field_national_card_image")}
|
|
/>
|
|
</Box>
|
|
<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 AddFormComponent; |