910 lines
44 KiB
JavaScript
910 lines
44 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
Checkbox,
|
|
FormControlLabel,
|
|
Grid,
|
|
TextField,
|
|
ToggleButton,
|
|
ToggleButtonGroup,
|
|
} from "@mui/material";
|
|
import SelectBox from "@/core/components/SelectBox";
|
|
import MuiDatePicker from "@/core/components/MuiDatePicker";
|
|
import { useTranslations } from "next-intl";
|
|
import useLimitedProvince from "@/lib/app/hooks/useLimitedProvince";
|
|
import useCities from "@/lib/app/hooks/useCities";
|
|
import { useFormik } from "formik";
|
|
import * as Yup from "yup";
|
|
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
|
import { SEND_LOAN_REQUEST_NAVGAN } from "@/core/data/apiRoutes";
|
|
import { useRequest, useUser } from "@witel/webapp-builder";
|
|
import { useRouter } from "next/router";
|
|
import PlateNumber from "@/core/components/PlateNumber";
|
|
import * as React from "react";
|
|
import UseEducations from "@/lib/app/hooks/useEducations";
|
|
import useOccupations from "@/lib/app/hooks/useOccupations";
|
|
import useActivityType from "@/lib/app/hooks/useActivityType";
|
|
import useProjectTitle from "@/lib/app/hooks/useProjectTitle";
|
|
import PriceField from "@/core/components/PriceField";
|
|
import { useState } from "react";
|
|
|
|
const vehicle_amount = {
|
|
اتوبوس: parseInt(process.env.NEXT_PUBLIC_BUS_AMOUNT),
|
|
"مینی بوس": parseInt(process.env.NEXT_PUBLIC_MINIBUS_AMOUNT),
|
|
};
|
|
const RealPersonForm = ({ setFinishLoanRequest }) => {
|
|
const t = useTranslations();
|
|
const [vehicleType, setVehicleType] = useState("");
|
|
const { provinceList, isLoadingProvinceList, errorProvinceList } = useLimitedProvince();
|
|
const { cityTextField, cityList, setProvinceID, isLoadingCityList } = useCities();
|
|
const { educationsList, isLoadingEducationsList, errorEducationsList } = UseEducations();
|
|
const { occupationsList, isLoadingOccupationsList, errorOccupationsList } = useOccupations();
|
|
const { activityType, isLoadingActivityType, errorActivityType } = useActivityType();
|
|
const { projectTitle, isLoadingProjectTitle, errorProjectTitle } = useProjectTitle();
|
|
const requestServer = useRequest();
|
|
const { getUser, changeUser } = useUser();
|
|
const router = useRouter();
|
|
|
|
const initialValues = {
|
|
person_type: "real",
|
|
vehicle_type: "",
|
|
telephone_number: "",
|
|
activity_type: "",
|
|
navgan_plan_id: "",
|
|
investment: "",
|
|
requested_facilities: "",
|
|
applicant_payment: "",
|
|
user_existing_employment: "",
|
|
user_committed_employment: "",
|
|
father_name: "",
|
|
gender: "",
|
|
first_name: "",
|
|
last_name: "",
|
|
city_id: "",
|
|
province_id: "",
|
|
education_id: "",
|
|
occupation_id: "",
|
|
navgan_id: "",
|
|
national_code: "",
|
|
national_serial_number: "",
|
|
national_card_tracking_code: "",
|
|
national_serial_number_or_tracking_code: "national_serial_number",
|
|
postal_code: "",
|
|
address: "",
|
|
plate_part1: "",
|
|
plate_part2: "ع",
|
|
plate_part3: "",
|
|
plate_part4: "",
|
|
birthday: "",
|
|
checkedBox: false,
|
|
history_facilities: false,
|
|
};
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
telephone_number: Yup.mixed()
|
|
.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")),
|
|
requested_facilities: Yup.mixed()
|
|
.test(
|
|
"max-amount",
|
|
`${t("LoanRequest.max_amount", {
|
|
value: parseInt(vehicle_amount[vehicleType]).toLocaleString("en"),
|
|
})}`,
|
|
(value) => value <= vehicle_amount[vehicleType]
|
|
)
|
|
.required(t("LoanRequest.error_message_requested_facilities")),
|
|
investment: Yup.string().required(t("LoanRequest.error_message_investment")),
|
|
user_committed_employment: Yup.string().required(t("LoanRequest.error_message_user_committed_employment")),
|
|
user_existing_employment: Yup.string().required(t("LoanRequest.error_message_user_existing_employment")),
|
|
activity_type: Yup.string().required(t("LoanRequest.error_message_activity_type")),
|
|
navgan_plan_id: Yup.string().required(t("LoanRequest.error_message_navgan_plan_id")),
|
|
gender: Yup.string().required(t("LoanRequest.error_message_gender")),
|
|
father_name: Yup.string().required(t("LoanRequest.error_message_father_name")),
|
|
occupation_id: Yup.string().required(t("LoanRequest.error_message_occupation_id")),
|
|
education_id: Yup.string().required(t("LoanRequest.error_message_education_id")),
|
|
address: Yup.string().required(t("LoanRequest.error_message_address")),
|
|
birthday: Yup.string().required(t("LoanRequest.error_message_date_of_birth")),
|
|
postal_code: Yup.mixed()
|
|
.test("max", `${t("LoanRequest.postal_code_max")}`, (value) => value.toString().length === 10)
|
|
.required(t("LoanRequest.error_message_postal_code")),
|
|
navgan_id: Yup.mixed().required(t("LoanRequest.error_message_navgan_id")),
|
|
province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
|
|
city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
|
|
first_name: Yup.string().required(t("LoanRequest.error_message_first_name")),
|
|
last_name: Yup.string().required(t("LoanRequest.error_message_last_name")),
|
|
plate_part1: Yup.mixed()
|
|
.test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
|
|
.required(t("LoanRequest.error_message_plate_number")),
|
|
plate_part2: Yup.mixed().required(t("LoanRequest.error_message_plate_number")),
|
|
plate_part3: Yup.mixed()
|
|
.test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 3)
|
|
.required(t("LoanRequest.error_message_plate_number")),
|
|
plate_part4: Yup.mixed()
|
|
.test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
|
|
.required(t("LoanRequest.error_message_plate_number")),
|
|
national_code: Yup.mixed()
|
|
.test("is-number", `${t("LoanRequest.national_code_number")}`, (value) => !isNaN(value))
|
|
.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")),
|
|
national_serial_number: Yup.string().when(
|
|
"national_serial_number_or_tracking_code",
|
|
([national_serial_number_or_tracking_code], schema) => {
|
|
return national_serial_number_or_tracking_code === "national_serial_number"
|
|
? schema
|
|
.test(
|
|
"max",
|
|
`${t("LoanRequest.national_serial_number_max")}`,
|
|
(value) => value && value.toString().length === 10
|
|
)
|
|
.required(t("LoanRequest.error_message_shenasname_serial"))
|
|
: schema;
|
|
}
|
|
),
|
|
national_card_tracking_code: Yup.string().when(
|
|
"national_serial_number_or_tracking_code",
|
|
([national_serial_number_or_tracking_code], schema) => {
|
|
return national_serial_number_or_tracking_code === "national_card_tracking_code"
|
|
? schema
|
|
.test(
|
|
"max",
|
|
`${t("LoanRequest.national_tracking_code_max")}`,
|
|
(value) => value && value.toString().length === 10
|
|
)
|
|
.required(t("LoanRequest.error_message_tracking_code"))
|
|
: schema;
|
|
}
|
|
),
|
|
});
|
|
|
|
const handleSubmit = async (values, props) => {
|
|
props.setSubmitting(true);
|
|
const _national_card =
|
|
values.national_serial_number_or_tracking_code === "national_serial_number"
|
|
? {
|
|
national_serial_number: values.national_serial_number,
|
|
}
|
|
: {
|
|
national_tracking_code: values.national_card_tracking_code,
|
|
};
|
|
|
|
let _data = {
|
|
is_legal_person: 0,
|
|
telephone_number: values.telephone_number,
|
|
national_id: values.national_code,
|
|
vehicle_type: values.vehicle_type,
|
|
province_id: values.province_id,
|
|
city_id: values.city_id,
|
|
first_name: values.first_name,
|
|
last_name: values.last_name,
|
|
navgan_id: values.navgan_id,
|
|
postal_code: values.postal_code,
|
|
navgan_type: "عمومی",
|
|
gender: values.gender,
|
|
requested_facility_amount: Number(values.requested_facilities),
|
|
investment_amount: Number(values.investment),
|
|
person_share: Number(values.applicant_payment),
|
|
user_committed_employment: Number(values.user_committed_employment),
|
|
user_existing_employment: Number(values.user_existing_employment),
|
|
address: values.address,
|
|
education_id: values.education_id,
|
|
occupation_id: values.occupation_id,
|
|
activity_type_id: values.activity_type,
|
|
navgan_plan_id: values.navgan_plan_id,
|
|
plate_part1: values.plate_part1,
|
|
plate_part2: values.plate_part2,
|
|
plate_part3: values.plate_part3,
|
|
plate_part4: values.plate_part4,
|
|
father_name: values.father_name,
|
|
facility_usage_history: values.history_facilities === true ? 1 : 0,
|
|
birthday: values.birthday.locale("en").format("YYYY-MM-DD"),
|
|
..._national_card,
|
|
};
|
|
|
|
await requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {
|
|
auth: true,
|
|
notification: true,
|
|
data: _data,
|
|
})
|
|
.then(() => {
|
|
router.replace("/dashboard/followUp-loan");
|
|
getUser((data) => {
|
|
changeUser(data);
|
|
});
|
|
})
|
|
.catch(() => {})
|
|
.finally(() => {
|
|
props.setSubmitting(false);
|
|
});
|
|
};
|
|
|
|
const formik = useFormik({
|
|
initialValues,
|
|
validationSchema,
|
|
onSubmit: handleSubmit,
|
|
});
|
|
const handleAmountChange = (event) => {
|
|
if (!isNaN(event.target.value)) {
|
|
formik.setFieldValue("requested_facilities", event.target.value).then(() => {
|
|
formik.setFieldTouched("applicant_payment", false, false);
|
|
formik.setFieldValue("applicant_payment", Math.floor(event.target.value * 0.2));
|
|
});
|
|
} else {
|
|
formik.setFieldValue("requested_facilities", formik.values.requested_facilities);
|
|
}
|
|
};
|
|
return (
|
|
<>
|
|
<Grid container spacing={2} sx={{ p: 2 }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<SelectBox
|
|
name="navgan_plan_id"
|
|
label={t("LoanRequest.text_field_navgan_plan_id")}
|
|
size="small"
|
|
selectType="navgan_plan_id"
|
|
isLoading={isLoadingProjectTitle}
|
|
errorEcured={errorProjectTitle}
|
|
selectors={projectTitle}
|
|
schema={{ value: "value", name: "name" }}
|
|
select={formik.values.navgan_plan_id}
|
|
value={formik.values.navgan_plan_id}
|
|
handleChange={(event) => {
|
|
formik.setFieldValue("navgan_plan_id", event.target.value);
|
|
}}
|
|
setFieldTouched={formik.setFieldTouched}
|
|
error={formik.touched.navgan_plan_id && Boolean(formik.errors.navgan_plan_id)}
|
|
helperText={formik.touched.navgan_plan_id && formik.errors.navgan_plan_id}
|
|
onBlur={formik.handleBlur("navgan_plan_id")}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<SelectBox
|
|
name="activity_type"
|
|
label={t("LoanRequest.text_field_activity_type")}
|
|
size="small"
|
|
selectType="activity_type"
|
|
isLoading={isLoadingActivityType}
|
|
errorEcured={errorActivityType}
|
|
selectors={activityType}
|
|
schema={{ value: "value", name: "name" }}
|
|
select={formik.values.activity_type}
|
|
value={formik.values.activity_type}
|
|
handleChange={(event) => {
|
|
formik.setFieldValue("activity_type", event.target.value);
|
|
}}
|
|
setFieldTouched={formik.setFieldTouched}
|
|
error={formik.touched.activity_type && Boolean(formik.errors.activity_type)}
|
|
helperText={formik.touched.activity_type && formik.errors.activity_type}
|
|
onBlur={formik.handleBlur("activity_type")}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={2} sx={{ padding: 2 }}>
|
|
<Grid item xs={12} sm={4}>
|
|
<ToggleButtonGroup
|
|
color="primary"
|
|
fullWidth
|
|
size={"small"}
|
|
value={formik.values.national_serial_number_or_tracking_code}
|
|
exclusive
|
|
onChange={(e, value) => {
|
|
if (value === null) return;
|
|
formik.handleChange({
|
|
target: {
|
|
name: "national_serial_number_or_tracking_code",
|
|
value: value,
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
<ToggleButton value="national_serial_number">
|
|
{t("LoanRequest.text_field_shenasname_serial")}
|
|
</ToggleButton>
|
|
<ToggleButton value="national_card_tracking_code">
|
|
{t("LoanRequest.text_field_national_trackin_code")}
|
|
</ToggleButton>
|
|
</ToggleButtonGroup>
|
|
</Grid>
|
|
{formik.values.national_serial_number_or_tracking_code === "national_serial_number" ? (
|
|
<Grid item xs={12} sm={4}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="national_serial_number"
|
|
variant="outlined"
|
|
size="small"
|
|
value={formik.values.national_serial_number}
|
|
label={t("LoanRequest.text_field_shenasname_serial")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_shenasname_serial")}
|
|
fullWidth
|
|
onChange={(e) => {
|
|
const inputValue = e.target.value;
|
|
const regex = /^[A-Za-z0-9]*$/;
|
|
if (regex.test(inputValue)) {
|
|
formik.setFieldValue("national_serial_number", inputValue);
|
|
}
|
|
}}
|
|
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}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="national_card_tracking_code"
|
|
variant="outlined"
|
|
size="small"
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
|
|
type={"tel"}
|
|
value={formik.values.national_card_tracking_code}
|
|
label={t("LoanRequest.text_field_national_trackin_code")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_trackin_code")}
|
|
fullWidth
|
|
onChange={(event) => {
|
|
const inputValue = event.target.value;
|
|
if (isNaN(Number(inputValue))) {
|
|
return;
|
|
}
|
|
formik.handleChange({
|
|
target: {
|
|
name: "national_card_tracking_code",
|
|
value: inputValue,
|
|
},
|
|
});
|
|
}}
|
|
onBlur={formik.handleBlur("national_card_tracking_code")}
|
|
error={
|
|
formik.touched.national_card_tracking_code &&
|
|
Boolean(formik.errors.national_card_tracking_code)
|
|
}
|
|
helperText={
|
|
formik.touched.national_card_tracking_code && formik.errors.national_card_tracking_code
|
|
}
|
|
/>
|
|
</Grid>
|
|
)}
|
|
<Grid item xs={12} sm={4}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="national_code"
|
|
variant="outlined"
|
|
size="small"
|
|
value={formik.values.national_code}
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
|
|
type={"tel"}
|
|
onChange={(event) => {
|
|
const inputValue = event.target.value;
|
|
if (isNaN(Number(inputValue))) {
|
|
return;
|
|
}
|
|
formik.handleChange({
|
|
target: {
|
|
name: "national_code",
|
|
value: inputValue,
|
|
},
|
|
});
|
|
}}
|
|
label={t("LoanRequest.text_field_national_code")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_national_code")}
|
|
onBlur={formik.handleBlur("national_code")}
|
|
error={formik.touched.national_code && Boolean(formik.errors.national_code)}
|
|
helperText={formik.touched.national_code && formik.errors.national_code}
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={2} sx={{ padding: 2 }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="first_name"
|
|
variant="outlined"
|
|
size="small"
|
|
value={formik.values.first_name}
|
|
label={t("LoanRequest.text_field_first_name")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_first_name")}
|
|
fullWidth
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur("first_name")}
|
|
error={formik.touched.first_name && Boolean(formik.errors.first_name)}
|
|
helperText={formik.touched.first_name && formik.errors.first_name}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="last_name"
|
|
variant="outlined"
|
|
size="small"
|
|
value={formik.values.last_name}
|
|
label={t("LoanRequest.text_field_last_name")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_last_name")}
|
|
fullWidth
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur("last_name")}
|
|
error={formik.touched.last_name && Boolean(formik.errors.last_name)}
|
|
helperText={formik.touched.last_name && formik.errors.last_name}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={2} sx={{ padding: 2 }}>
|
|
<Grid item xs={12} sm={4}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="father_name"
|
|
variant="outlined"
|
|
value={formik.values.father_name}
|
|
onChange={formik.handleChange}
|
|
size="small"
|
|
label={t("LoanRequest.text_field_father_name")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_father_name")}
|
|
onBlur={formik.handleBlur("father_name")}
|
|
error={formik.touched.father_name && Boolean(formik.errors.father_name)}
|
|
helperText={formik.touched.father_name && formik.errors.father_name}
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={4}>
|
|
<SelectBox
|
|
name="gender"
|
|
label={t("LoanRequest.text_field_gender")}
|
|
size="small"
|
|
value={formik.values.gender}
|
|
selectType="gender"
|
|
selectors={[
|
|
{
|
|
id: 1,
|
|
value: 0,
|
|
name: "زن",
|
|
},
|
|
{
|
|
id: 2,
|
|
value: 1,
|
|
name: "مرد",
|
|
},
|
|
]}
|
|
schema={{ value: "value", name: "name" }}
|
|
select={formik.values.gender}
|
|
handleChange={(event) => {
|
|
formik.setFieldValue("gender", event.target.value);
|
|
}}
|
|
setFieldTouched={formik.setFieldTouched}
|
|
error={formik.touched.gender && Boolean(formik.errors.gender)}
|
|
helperText={formik.touched.gender && formik.errors.gender}
|
|
onBlur={formik.handleBlur("gender")}
|
|
/>
|
|
</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={4}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="navgan_id"
|
|
variant="outlined"
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
|
|
type={"tel"}
|
|
value={formik.values.navgan_id}
|
|
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 item xs={12} sm={4}>
|
|
<TextField
|
|
sx={{ width: "100%" }}
|
|
name="postal_code"
|
|
variant="outlined"
|
|
value={formik.values.postal_code}
|
|
inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
|
|
type={"tel"}
|
|
onChange={(event) => {
|
|
const inputValue = event.target.value;
|
|
if (isNaN(Number(inputValue))) {
|
|
return;
|
|
}
|
|
formik.handleChange({
|
|
target: {
|
|
name: "postal_code",
|
|
value: inputValue,
|
|
},
|
|
});
|
|
}}
|
|
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={4}>
|
|
<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;
|
|
if (isNaN(Number(inputValue))) {
|
|
return;
|
|
}
|
|
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="province_id"
|
|
label={t("LoanRequest.text_field_province_id")}
|
|
size="small"
|
|
selectType="province_id"
|
|
isLoading={isLoadingProvinceList}
|
|
errorEcured={errorProvinceList}
|
|
selectors={provinceList}
|
|
schema={{ value: "value", name: "name" }}
|
|
select={formik.values.province_id}
|
|
value={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.enter_province")}`
|
|
: cityList.length === 0
|
|
? `${t("LoanRequest.cityList_empty")}`
|
|
: cityTextField
|
|
}
|
|
size="small"
|
|
selectType="city_id"
|
|
schema={{ value: "value", name: "name" }}
|
|
disabled={cityList.length === 0}
|
|
selectors={cityList}
|
|
select={formik.values.city_id}
|
|
value={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"
|
|
value={formik.values.vehicle_type}
|
|
schema={{ value: "value", name: "name" }}
|
|
selectType="vehicle_type"
|
|
selectors={[
|
|
{
|
|
id: 0,
|
|
value: "اتوبوس",
|
|
name: "اتوبوس",
|
|
},
|
|
{
|
|
id: 1,
|
|
value: "مینی بوس",
|
|
name: "مینی بوس",
|
|
},
|
|
]}
|
|
select={formik.values.vehicle_type}
|
|
handleChange={(event) => {
|
|
setVehicleType(event.target.value);
|
|
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}
|
|
value={formik.values.education_id}
|
|
schema={{ value: "id", name: "title" }}
|
|
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"
|
|
schema={{ value: "id", name: "title" }}
|
|
selectors={occupationsList}
|
|
select={formik.values.occupation_id}
|
|
value={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={{ p: 2 }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
rows={4}
|
|
sx={{ width: "100%" }}
|
|
name="user_committed_employment"
|
|
variant="outlined"
|
|
value={formik.values.user_committed_employment}
|
|
size="small"
|
|
type={"tel"}
|
|
label={t("ShowLoan.user_committed_employment")}
|
|
error={!!(formik.touched.user_committed_employment && formik.errors.user_committed_employment)}
|
|
onChange={(event) => {
|
|
const inputValue = event.target.value;
|
|
if (isNaN(Number(inputValue))) {
|
|
return;
|
|
}
|
|
formik.handleChange({
|
|
target: {
|
|
name: "user_committed_employment",
|
|
value: inputValue,
|
|
},
|
|
});
|
|
}}
|
|
fullWidth
|
|
helperText={
|
|
formik.touched.user_committed_employment ? formik.errors.user_committed_employment : null
|
|
}
|
|
onBlur={formik.handleBlur("user_committed_employment")}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={6}>
|
|
<TextField
|
|
rows={4}
|
|
sx={{ width: "100%" }}
|
|
name="user_existing_employment"
|
|
variant="outlined"
|
|
type={"tel"}
|
|
value={formik.values.user_existing_employment}
|
|
size="small"
|
|
label={t("ShowLoan.user_existing_employment")}
|
|
error={!!(formik.touched.user_existing_employment && formik.errors.user_existing_employment)}
|
|
onChange={(event) => {
|
|
const inputValue = event.target.value;
|
|
if (isNaN(Number(inputValue))) {
|
|
return;
|
|
}
|
|
formik.handleChange({
|
|
target: {
|
|
name: "user_existing_employment",
|
|
value: inputValue,
|
|
},
|
|
});
|
|
}}
|
|
fullWidth
|
|
helperText={
|
|
formik.touched.user_existing_employment ? formik.errors.user_existing_employment : null
|
|
}
|
|
onBlur={formik.handleBlur("user_existing_employment")}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={2} sx={{ padding: 2 }}>
|
|
<Grid item xs={12} sm={4}>
|
|
<PriceField
|
|
name="investment"
|
|
label={t("LoanRequest.text_field_investment")}
|
|
type="text"
|
|
size="small"
|
|
inputProps={{
|
|
inputMode: "number",
|
|
min: 0,
|
|
pattern: "[0-9]*",
|
|
}}
|
|
variant="outlined"
|
|
value={formik.values.investment}
|
|
onChange={(event) => {
|
|
const inputValue = event.target.value;
|
|
if (isNaN(Number(inputValue))) {
|
|
return;
|
|
}
|
|
formik.setFieldValue("investment", event.target.value);
|
|
}}
|
|
onBlur={formik.handleBlur("investment")}
|
|
error={formik.touched.investment && Boolean(formik.errors.investment)}
|
|
helperText={formik.touched.investment && formik.errors.investment}
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={4}>
|
|
<PriceField
|
|
name="requested_facilities"
|
|
label={
|
|
formik.values.vehicle_type === ""
|
|
? t("LoanRequest.enter_vehicle_type")
|
|
: t("LoanRequest.text_field_requested_facilities")
|
|
}
|
|
type="text"
|
|
size="small"
|
|
inputProps={{
|
|
inputMode: "number",
|
|
min: 0,
|
|
pattern: "[0-9]*",
|
|
}}
|
|
variant="outlined"
|
|
value={formik.values.requested_facilities}
|
|
onChange={handleAmountChange}
|
|
disabled={formik.values.vehicle_type === ""}
|
|
onBlur={formik.handleBlur("requested_facilities")}
|
|
error={formik.touched.requested_facilities && Boolean(formik.errors.requested_facilities)}
|
|
helperText={formik.touched.requested_facilities && formik.errors.requested_facilities}
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={12} sm={4}>
|
|
<PriceField
|
|
name="applicant_payment"
|
|
label={t("LoanRequest.text_field_applicant_payment")}
|
|
type="text"
|
|
size="small"
|
|
inputProps={{
|
|
inputMode: "number",
|
|
min: 0,
|
|
pattern: "[0-9]*",
|
|
}}
|
|
variant="outlined"
|
|
value={formik.values.applicant_payment}
|
|
disabled
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container spacing={2} sx={{ padding: 2 }}>
|
|
<Grid item xs={12}>
|
|
<TextField
|
|
multiline
|
|
rows={4}
|
|
sx={{ width: "100%" }}
|
|
name="address"
|
|
variant="outlined"
|
|
size="small"
|
|
label={t("LoanRequest.text_field_address")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_address")}
|
|
fullWidth
|
|
value={formik.values.address}
|
|
onChange={formik.handleChange}
|
|
onBlur={formik.handleBlur("address")}
|
|
error={formik.touched.address && Boolean(formik.errors.address)}
|
|
helperText={formik.touched.address && formik.errors.address}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container sx={{ padding: 2 }}>
|
|
<Grid item xs={12}>
|
|
<FormControlLabel
|
|
color={"error.main"}
|
|
control={
|
|
<Checkbox
|
|
checked={formik.values.history_facilities}
|
|
onChange={(event) => {
|
|
formik.setFieldValue("history_facilities", event.target.checked);
|
|
}}
|
|
/>
|
|
}
|
|
label={`${t("LoanRequest.history_facilities")}`}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container sx={{ px: 2 }}>
|
|
<Grid item xs={12}>
|
|
<FormControlLabel
|
|
color={"error.main"}
|
|
control={
|
|
<Checkbox
|
|
checked={formik.values.checkedBox}
|
|
onChange={(event) => {
|
|
formik.setFieldValue("checkedBox", event.target.checked);
|
|
}}
|
|
/>
|
|
}
|
|
label={`${t("LoanRequest.checkbox")}`}
|
|
/>
|
|
</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={{ my: 4 }}
|
|
endIcon={<DataSaverOnIcon />}
|
|
disabled={formik.values.checkedBox ? formik.isSubmitting || !formik.dirty || !formik.isValid : true}
|
|
>
|
|
{formik.isSubmitting ? t("LoanRequest.button_while_submit") : t("LoanRequest.button_submit")}
|
|
</Button>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|
|
export default RealPersonForm;
|