education and occupation inputs and their validation
This commit is contained in:
@@ -1,36 +1,37 @@
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
|
||||
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
||||
import {Box, Button, Grid, TextField} from "@mui/material";
|
||||
import {Box, Button, Grid, Stack, TextField, Typography} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import {useRequest, useUser} from "@witel/webapp-builder";
|
||||
import {CenterLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
|
||||
import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import useCities from "@/lib/app/hooks/useCities";
|
||||
import PlateNumber from "@/core/components/PlateNumber";
|
||||
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
||||
import UseEducations from "@/lib/app/hooks/useEducations";
|
||||
import useOccupations from "@/lib/app/hooks/useOccupations";
|
||||
import {useState} from "react";
|
||||
import DoneIcon from '@mui/icons-material/Done';
|
||||
|
||||
const AddFormComponent = () => {
|
||||
const t = useTranslations();
|
||||
const {token} = useUser();
|
||||
const [finishLoanRequest, setFinishLoanRequest] = useState(false)
|
||||
const requestServer = useRequest()
|
||||
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
|
||||
const {cityTextField, cityList, setProvinceID} = useCities()
|
||||
const {cityTextField, cityList, setProvinceID, isLoadingCityList} = useCities()
|
||||
const {educationsList, isLoadingEducationsList, errorEducationsList} = UseEducations()
|
||||
const {occupationsList, isLoadingOccupationsList, errorOccupationsList} = useOccupations()
|
||||
|
||||
const initialValues = {
|
||||
telephone_number: "",
|
||||
vehicle_type: "",
|
||||
plate_number: "",
|
||||
province_id: "",
|
||||
city_id: "",
|
||||
navgan_id: "",
|
||||
national_id: "",
|
||||
shenasname_serial: "",
|
||||
national_serial_number: "",
|
||||
postal_code: "",
|
||||
navgan_type: "",
|
||||
plate_part1: "",
|
||||
@@ -45,7 +46,10 @@ const AddFormComponent = () => {
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
telephone_number: Yup.mixed()
|
||||
.test("max", `${t("LoanRequest.tel_number_max")}`, (value) => value.toString().length === 11)
|
||||
.test("max", `${t("LoanRequest.tel_number_max")}`, (value) => {
|
||||
const stringValue = String(value);
|
||||
return stringValue.length === 11
|
||||
})
|
||||
.required(t("LoanRequest.error_message_tel_number")),
|
||||
vehicle_type: Yup.string().required(
|
||||
t("LoanRequest.error_message_vehicle_type")
|
||||
@@ -95,7 +99,7 @@ const AddFormComponent = () => {
|
||||
.test("positive", `${t("LoanRequest.national_code_positive")}`, (value) => value >= 0)
|
||||
.test("max", `${t("LoanRequest.national_code_max")}`, (value) => value.toString().length === 10)
|
||||
.required(t("LoanRequest.error_message_national_id")),
|
||||
shenasname_serial: Yup.mixed()
|
||||
national_serial_number: Yup.mixed()
|
||||
.test("max", `${t("LoanRequest.shenasname_serial_max")}`, (value) => value.toString().length === 10)
|
||||
.required(t("LoanRequest.error_message_shenasname_serial")
|
||||
),
|
||||
@@ -108,18 +112,43 @@ const AddFormComponent = () => {
|
||||
formData.append("navgan_type", values.navgan_type);
|
||||
formData.append("postal_code", values.postal_code);
|
||||
formData.append("vehicle_type", values.vehicle_type);
|
||||
formData.append("plate_number", values.plate_number);
|
||||
formData.append("plate_part1", values.plate_part1);
|
||||
formData.append("plate_part2", values.plate_part2);
|
||||
formData.append("plate_part3", values.plate_part3);
|
||||
formData.append("plate_part4", values.plate_part4);
|
||||
formData.append("province_id", values.province_id);
|
||||
formData.append("city_id", values.city_id);
|
||||
formData.append("address", values.address);
|
||||
formData.append("navgan_id", values.navgan_id);
|
||||
formData.append("national_id", values.national_id);
|
||||
formData.append("birthday", values.birthday);
|
||||
formData.append("shenasname_serial", values.shenasname_serial);
|
||||
formData.append("national_serial_number", values.national_serial_number);
|
||||
formData.append("education_id", values.education_id);
|
||||
formData.append("occupation_id", values.occupation_id);
|
||||
|
||||
requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth: true, notification: true}).then().catch(() => {
|
||||
requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {
|
||||
auth: true, notification: true, data: {
|
||||
telephone_number: values.telephone_number,
|
||||
vehicle_type: values.vehicle_type,
|
||||
province_id: values.province_id,
|
||||
city_id: values.city_id,
|
||||
navgan_id: values.navgan_id,
|
||||
national_id: values.national_id,
|
||||
national_serial_number: values.national_serial_number,
|
||||
postal_code: values.postal_code,
|
||||
navgan_type: values.navgan_type,
|
||||
plate_part1: values.plate_part1,
|
||||
plate_part2: values.plate_part2,
|
||||
plate_part3: values.plate_part3,
|
||||
plate_part4: values.plate_part4,
|
||||
address: values.address,
|
||||
birthday: values.birthday,
|
||||
education_id: values.education_id,
|
||||
occupation_id: values.occupation_id,
|
||||
}
|
||||
}).then(() => {
|
||||
setFinishLoanRequest(true)
|
||||
}).catch(() => {
|
||||
props.setSubmitting(false)
|
||||
})
|
||||
};
|
||||
@@ -129,265 +158,299 @@ const AddFormComponent = () => {
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<Grid container spacing={2} sx={{padding: 2}}
|
||||
>
|
||||
<Grid item xs={12} sm={4}
|
||||
>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type={"number"}
|
||||
onChange={formik.handleChange}
|
||||
label={t("LoanRequest.text_field_national_code")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_code"
|
||||
)}
|
||||
onBlur={formik.handleBlur("national_id")}
|
||||
error={formik.touched.national_id && Boolean(formik.errors.national_id)}
|
||||
helperText={formik.touched.national_id && formik.errors.national_id}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}
|
||||
>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="shenasname_serial"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_serial")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_serial")}
|
||||
fullWidth
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("shenasname_serial")}
|
||||
error={formik.touched.shenasname_serial && Boolean(formik.errors.shenasname_serial)}
|
||||
helperText={formik.touched.shenasname_serial && formik.errors.shenasname_serial}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<MuiDatePicker
|
||||
formik={formik}
|
||||
error={formik.touched.birthday && Boolean(formik.errors.birthday)}
|
||||
helperText={formik.touched.birthday && formik.errors.birthday}
|
||||
onBlur={formik.handleBlur("birthday")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="postal_code"
|
||||
variant="outlined"
|
||||
type={'number'}
|
||||
onChange={formik.handleChange}
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_postal_code")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_postal_code")}
|
||||
fullWidth
|
||||
onBlur={formik.handleBlur("postal_code")}
|
||||
error={formik.touched.postal_code && Boolean(formik.errors.postal_code)}
|
||||
helperText={formik.touched.postal_code && formik.errors.postal_code}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="telephone_number"
|
||||
variant="outlined"
|
||||
type={'number'}
|
||||
size="small"
|
||||
onChange={formik.handleChange}
|
||||
label={t("LoanRequest.text_field_tel_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_tel_number"
|
||||
)}
|
||||
fullWidth
|
||||
onBlur={formik.handleBlur("telephone_number")}
|
||||
error={formik.touched.telephone_number && Boolean(formik.errors.telephone_number)}
|
||||
helperText={formik.touched.telephone_number && formik.errors.telephone_number}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="navgan_type"
|
||||
label={t("LoanRequest.text_field_navgan_type")}
|
||||
size="small"
|
||||
selectType="navgan_type"
|
||||
selectors={[{id: 1, value: 1, name: "روستایی"}, {id: 2, value: 2, name: "عمومی"}]}
|
||||
select={formik.values.navgan_type}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('navgan_type', event.target.value)
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.navgan_type && Boolean(formik.errors.navgan_type)}
|
||||
helperText={formik.touched.navgan_type && formik.errors.navgan_type}
|
||||
onBlur={formik.handleBlur("navgan_type")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="navgan_id"
|
||||
variant="outlined"
|
||||
type={'number'}
|
||||
onChange={formik.handleChange}
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_navgan_id")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
|
||||
fullWidth
|
||||
onBlur={formik.handleBlur("navgan_id")}
|
||||
error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
|
||||
helperText={formik.touched.navgan_id && formik.errors.navgan_id}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="province_id"
|
||||
label={t("LoanRequest.text_field_province_id")}
|
||||
size="small"
|
||||
selectType="province_id"
|
||||
isLoading={isLoadingProvinceList}
|
||||
errorEcured={errorProvinceList}
|
||||
selectors={provinceList}
|
||||
select={formik.values.province_id}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('province_id', event.target.value);
|
||||
setProvinceID(event.target.value)
|
||||
formik.setFieldTouched("city_id", false, false);
|
||||
formik.setFieldValue("city_id", "")
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.province_id && Boolean(formik.errors.province_id)}
|
||||
helperText={formik.touched.province_id && formik.errors.province_id}
|
||||
onBlur={formik.handleBlur("province_id")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="city_id"
|
||||
label={cityList.length === 0 ? `${t("LoanRequest.cityList_empty")}` : cityTextField}
|
||||
size="small"
|
||||
selectType="city_id"
|
||||
disabled={cityList.length === 0}
|
||||
selectors={cityList}
|
||||
select={formik.values.city_id}
|
||||
handleChange={(event) => formik.setFieldValue('city_id', event.target.value)}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.city_id && Boolean(formik.errors.city_id)}
|
||||
helperText={formik.touched.city_id && formik.errors.city_id}
|
||||
onBlur={formik.handleBlur("city_id")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="vehicle_type"
|
||||
label={t("LoanRequest.text_field_vehicle_type")}
|
||||
size="small"
|
||||
selectType="vehicle_type"
|
||||
selectors={[{id: 0, value: "اتوبوس", name: "اتوبوس"},
|
||||
{id: 1, value: "مینی بوس", name: "مینی بوس"}]}
|
||||
select={formik.values.vehicle_type}
|
||||
handleChange={(event) => formik.setFieldValue('vehicle_type', event.target.value)}
|
||||
error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
|
||||
helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
|
||||
onBlur={formik.handleBlur("vehicle_type")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<PlateNumber formik={formik}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="education_id"
|
||||
label={t("LoanRequest.text_field_education_id")}
|
||||
size="small"
|
||||
isLoading={isLoadingEducationsList}
|
||||
errorEcured={errorEducationsList}
|
||||
selectType="education_id"
|
||||
selectors={educationsList}
|
||||
select={formik.values.education_id}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('education_id', event.target.value)
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.education_id && Boolean(formik.errors.education_id)}
|
||||
helperText={formik.touched.education_id && formik.errors.education_id}
|
||||
onBlur={formik.handleBlur("education_id")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="occupation_id"
|
||||
label={t("LoanRequest.text_field_occupation_id")}
|
||||
size="small"
|
||||
isLoading={isLoadingOccupationsList}
|
||||
errorEcured={errorOccupationsList}
|
||||
selectType="occupation_id"
|
||||
selectors={occupationsList}
|
||||
select={formik.values.occupation_id}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('occupation_id', event.target.value)
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.occupation_id && Boolean(formik.errors.occupation_id)}
|
||||
helperText={formik.touched.occupation_id && formik.errors.occupation_id}
|
||||
onBlur={formik.handleBlur("occupation_id")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
multiline
|
||||
rows={8}
|
||||
sx={{width: "100%"}}
|
||||
name="address"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_address")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_address")}
|
||||
fullWidth
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("address")}
|
||||
error={formik.touched.address && Boolean(formik.errors.address)}
|
||||
helperText={formik.touched.address && formik.errors.address}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
width: {xs: "100%", sm: "30%", md: "25%"},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={formik.handleSubmit}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={formik.isSubmitting}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
{finishLoanRequest ?
|
||||
(
|
||||
<CenterLayout>
|
||||
<Stack direction={'row'} spacing={0.7}>
|
||||
<Typography align={'center'}>{t("LoanRequest.finish_loan_request")}</Typography>
|
||||
<DoneIcon color={'success'}/>
|
||||
</Stack>
|
||||
<LinkRouting sx={{margin: 2}} href={'/dashboard'}>
|
||||
{t("LoanRequest.back_to_dashboard")}
|
||||
</LinkRouting>
|
||||
</CenterLayout>
|
||||
) : (
|
||||
<>
|
||||
<Grid container spacing={2} sx={{padding: 2}}
|
||||
>
|
||||
<Grid item xs={12} sm={4}
|
||||
>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type={"number"}
|
||||
onChange={formik.handleChange}
|
||||
label={t("LoanRequest.text_field_national_code")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_code"
|
||||
)}
|
||||
onBlur={formik.handleBlur("national_id")}
|
||||
error={formik.touched.national_id && Boolean(formik.errors.national_id)}
|
||||
helperText={formik.touched.national_id && formik.errors.national_id}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}
|
||||
>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="national_serial_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_serial")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_serial")}
|
||||
fullWidth
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("national_serial_number")}
|
||||
error={formik.touched.national_serial_number && Boolean(formik.errors.national_serial_number)}
|
||||
helperText={formik.touched.national_serial_number && formik.errors.national_serial_number}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}>
|
||||
<MuiDatePicker
|
||||
formik={formik}
|
||||
error={formik.touched.birthday && Boolean(formik.errors.birthday)}
|
||||
helperText={formik.touched.birthday && formik.errors.birthday}
|
||||
onBlur={formik.handleBlur("birthday")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="postal_code"
|
||||
variant="outlined"
|
||||
type={'number'}
|
||||
onChange={formik.handleChange}
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_postal_code")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_postal_code")}
|
||||
fullWidth
|
||||
onBlur={formik.handleBlur("postal_code")}
|
||||
error={formik.touched.postal_code && Boolean(formik.errors.postal_code)}
|
||||
helperText={formik.touched.postal_code && formik.errors.postal_code}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="telephone_number"
|
||||
variant="outlined"
|
||||
value={formik.values.telephone_number}
|
||||
inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
|
||||
type={'tel'}
|
||||
size="small"
|
||||
onChange={(event) => {
|
||||
const inputValue = event.target.value;
|
||||
|
||||
// Check if the input value is numeric
|
||||
if (isNaN(Number(inputValue))) {
|
||||
return; // Exit the function without making any changes
|
||||
}
|
||||
|
||||
// If the input value is numeric, update the formik field
|
||||
formik.handleChange({
|
||||
target: {
|
||||
name: "telephone_number",
|
||||
value: inputValue,
|
||||
},
|
||||
});
|
||||
}}
|
||||
label={t("LoanRequest.text_field_tel_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_tel_number"
|
||||
)}
|
||||
fullWidth
|
||||
onBlur={formik.handleBlur("telephone_number")}
|
||||
error={formik.touched.telephone_number && Boolean(formik.errors.telephone_number)}
|
||||
helperText={formik.touched.telephone_number && formik.errors.telephone_number}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="navgan_type"
|
||||
label={t("LoanRequest.text_field_navgan_type")}
|
||||
size="small"
|
||||
selectType="navgan_type"
|
||||
selectors={[{id: 1, value: 1, name: "روستایی"}, {id: 2, value: 2, name: "عمومی"}]}
|
||||
select={formik.values.navgan_type}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('navgan_type', event.target.value)
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.navgan_type && Boolean(formik.errors.navgan_type)}
|
||||
helperText={formik.touched.navgan_type && formik.errors.navgan_type}
|
||||
onBlur={formik.handleBlur("navgan_type")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="navgan_id"
|
||||
variant="outlined"
|
||||
type={'number'}
|
||||
onChange={formik.handleChange}
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_navgan_id")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
|
||||
fullWidth
|
||||
onBlur={formik.handleBlur("navgan_id")}
|
||||
error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
|
||||
helperText={formik.touched.navgan_id && formik.errors.navgan_id}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="province_id"
|
||||
label={t("LoanRequest.text_field_province_id")}
|
||||
size="small"
|
||||
selectType="province_id"
|
||||
isLoading={isLoadingProvinceList}
|
||||
errorEcured={errorProvinceList}
|
||||
selectors={provinceList}
|
||||
select={formik.values.province_id}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('province_id', event.target.value);
|
||||
setProvinceID(event.target.value)
|
||||
formik.setFieldTouched("city_id", false, false);
|
||||
formik.setFieldValue("city_id", "")
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.province_id && Boolean(formik.errors.province_id)}
|
||||
helperText={formik.touched.province_id && formik.errors.province_id}
|
||||
onBlur={formik.handleBlur("province_id")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="city_id"
|
||||
label={isLoadingCityList ? `${t("LoanRequest.cityList_loading")}` : (cityList.length === 0 ? `${t("LoanRequest.cityList_empty")}` : cityTextField)}
|
||||
size="small"
|
||||
selectType="city_id"
|
||||
disabled={cityList.length === 0}
|
||||
selectors={cityList}
|
||||
select={formik.values.city_id}
|
||||
handleChange={(event) => formik.setFieldValue('city_id', event.target.value)}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.city_id && Boolean(formik.errors.city_id)}
|
||||
helperText={formik.touched.city_id && formik.errors.city_id}
|
||||
onBlur={formik.handleBlur("city_id")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="vehicle_type"
|
||||
label={t("LoanRequest.text_field_vehicle_type")}
|
||||
size="small"
|
||||
selectType="vehicle_type"
|
||||
selectors={[{id: 0, value: "اتوبوس", name: "اتوبوس"},
|
||||
{id: 1, value: "مینی بوس", name: "مینی بوس"}]}
|
||||
select={formik.values.vehicle_type}
|
||||
handleChange={(event) => formik.setFieldValue('vehicle_type', event.target.value)}
|
||||
error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
|
||||
helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
|
||||
onBlur={formik.handleBlur("vehicle_type")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<PlateNumber formik={formik}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="education_id"
|
||||
label={t("LoanRequest.text_field_education_id")}
|
||||
size="small"
|
||||
isLoading={isLoadingEducationsList}
|
||||
errorEcured={errorEducationsList}
|
||||
selectType="education_id"
|
||||
selectors={educationsList}
|
||||
select={formik.values.education_id}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('education_id', event.target.value)
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.education_id && Boolean(formik.errors.education_id)}
|
||||
helperText={formik.touched.education_id && formik.errors.education_id}
|
||||
onBlur={formik.handleBlur("education_id")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<SelectBox
|
||||
name="occupation_id"
|
||||
label={t("LoanRequest.text_field_occupation_id")}
|
||||
size="small"
|
||||
isLoading={isLoadingOccupationsList}
|
||||
errorEcured={errorOccupationsList}
|
||||
selectType="occupation_id"
|
||||
selectors={occupationsList}
|
||||
select={formik.values.occupation_id}
|
||||
handleChange={(event) => {
|
||||
formik.setFieldValue('occupation_id', event.target.value)
|
||||
}}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.occupation_id && Boolean(formik.errors.occupation_id)}
|
||||
helperText={formik.touched.occupation_id && formik.errors.occupation_id}
|
||||
onBlur={formik.handleBlur("occupation_id")}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={2} sx={{padding: 2}}>
|
||||
<Grid item xs={12}>
|
||||
<TextField
|
||||
multiline
|
||||
rows={8}
|
||||
sx={{width: "100%"}}
|
||||
name="address"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_address")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_address")}
|
||||
fullWidth
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("address")}
|
||||
error={formik.touched.address && Boolean(formik.errors.address)}
|
||||
helperText={formik.touched.address && formik.errors.address}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
width: {xs: "100%", sm: "30%", md: "25%"},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={formik.handleSubmit}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={formik.isSubmitting}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user