resolve conflicts
This commit is contained in:
@@ -19,6 +19,7 @@
|
||||
"online_message": "شما به اینترنت وصل هستید",
|
||||
"offline_message": "اتصال شما به اینترنت قطع شده است",
|
||||
"routing_to": "در حال انتقال به صفحه",
|
||||
"error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!",
|
||||
"header": {
|
||||
"open_profile": "پروفایل",
|
||||
"edit_profile": "ویرایش پروفایل",
|
||||
@@ -126,48 +127,56 @@
|
||||
"no_request_found": "درخواستی یافت نشد"
|
||||
},
|
||||
"LoanRequest": {
|
||||
"city_id": "شهر",
|
||||
"loan_request_page": "ثبت درخواست وام",
|
||||
"personal_info": "اطلاعات شخصی",
|
||||
"national_code_number": "کد ملی می بایست شامل اعداد باشد",
|
||||
"national_code_max": "کد ملی می بایست 10 رقم باشد",
|
||||
"tel_number_max": "شماره ثابت می بایست 11 رقم باشد",
|
||||
"national_code_positive": "کد ملی می بایست مثبت باشد",
|
||||
"uploading_documents": "اسناد",
|
||||
"error_message_name": "لطفا نام خود را وارد کنید!",
|
||||
"error_message_phone_number": "لطفا شماره تلفن خود را وارد کنید!",
|
||||
"error_message_tel_number": "لطفا شماره ثابت (با پیش شماره استان) خود را وارد کنید!",
|
||||
"error_message_vehicle_type": "لطفا نوع وسیله نقلیه خود را وارد کنید!",
|
||||
"error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!",
|
||||
"error_message_navgan_id": "لطفا کد ناوگان خود را وارد کنید!",
|
||||
"error_message_navgan_id": "لطفا کد هوشمند خود را وارد کنید!",
|
||||
"error_message_province_id": "لطفا استان خود را وارد کنید!",
|
||||
"error_message_national_id": "لطفا کد ملی خود را وارد کنید!",
|
||||
"error_message_shenasname_id": "لطفا شماره شناسنامه خود را وارد کنید!",
|
||||
"text_field_phone_number": "شماره تلفن",
|
||||
"text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
|
||||
"error_message_national_code": "لطفا کد ملی خود را وارد کنید!",
|
||||
"text_field_tel_number": "شماره ثابت (با پیش شماره استان)",
|
||||
"text_field_enter_your_tel_number": "شماره ثابت (با پیش شماره استان) خود را وارد کنید",
|
||||
"text_field_name": "نام",
|
||||
"text_field_plate_part4": "بخش چهارم",
|
||||
"text_field_plate_part3": "بخش سوم",
|
||||
"text_field_plate_part2": "بخش دوم",
|
||||
"text_field_plate_part1": "بخش اول",
|
||||
"text_field_enter_your_plate_part1": "بخش اول پلاک را وارد کنید",
|
||||
"text_field_enter_your_plate_part2": "بخش دوم پلاک را وارد کنید",
|
||||
"text_field_enter_your_plate_part3": "بخش سوم پلاک را وارد کنید",
|
||||
"text_field_enter_your_plate_part4": "بخش چهارم پلاک راوارد کنید",
|
||||
"text_field_loading_cities_list": "درحال دریافت اطلاعات شهر ها...",
|
||||
"text_field_city_id": "شهر",
|
||||
"text_field_enter_your_name": "نام خود را وارد کنید",
|
||||
"text_field_vehicle_type": "نام وسیله نقلیه",
|
||||
"text_field_enter_your_vehicle_type": "نام وسیله نقلیه خود را وارد کنید",
|
||||
"text_field_vehicle_type": "نوع وسیله نقلیه",
|
||||
"text_field_enter_your_vehicle_type": "نوع وسیله نقلیه خود را وارد کنید",
|
||||
"text_field_province_id": "استان",
|
||||
"text_field_loading_provinces_list": "درحال دریافت استان ها",
|
||||
"text_field_loading_provinces_list": "درحال دریافت استان ها ...",
|
||||
"text_field_error_fetching_provinces": "خطا در دریافت استان ها",
|
||||
"text_field_enter_your_national_code": "کد ملی خود را وارد کنید",
|
||||
"text_field_enter_your_province_id": "استان خود را وارد کنید",
|
||||
"text_field_navgan_id": "شماره ناوگان",
|
||||
"text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",
|
||||
"text_field_enter_your_city_id": "شهر خود را وارد کنید",
|
||||
"text_field_navgan_id": "کد هوشمند ناوگان",
|
||||
"text_field_enter_your_navgan_id": "کد هوشمند ناوگان خود را وارد کنید",
|
||||
"text_field_national_code": "کد ملی",
|
||||
"text_field_enter_your_national_id": "کد ملی خود را وارد کنید",
|
||||
"text_field_shenasname_id": "شماره شناسنامه",
|
||||
"text_field_enter_your_shenasname_id": "شماره شناسنامه خود را وارد کنید",
|
||||
"text_field_plate_number": "شماره پلاک",
|
||||
"text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید",
|
||||
"text_field_error_fetching_cities": "شهر خود را وارد کنید!",
|
||||
"button_submit": "ثبت درخواست",
|
||||
"file_field_sherkat_naft_doc": "مجوز شرکت نفت",
|
||||
"file_field_estate_doc": "سند مالکیت",
|
||||
"file_field_agreement_doc": "موافقت نامه اصولی",
|
||||
"error_message_sherkat_naft_doc": "مجوز شرکت نفت خود را وارد کنید",
|
||||
"error_message_estate_doc": "سند مالکیت خود را وارد کنید",
|
||||
"error_message_agreement_doc": "موافقت نامه اصولی خود را وارد کنید",
|
||||
"file_field_shenasname_image": "تصویر شناسنامه",
|
||||
"file_field_national_card_image": "تصویر کارت ملی",
|
||||
"file_field_payan_khedmat_image": "تصویر کارت پایان خدمت",
|
||||
"error_message_national_card_image": "تصویر کارت ملی خود را وارد کنید",
|
||||
"error_message_shenasname_image": "تصویر شناسنامه خود را وارد کنید",
|
||||
"error_message_payan_khedmat_image": "تصویر کارت پایان خدمت خود را وارد کنید",
|
||||
"error_message_city_id": "لطفا شهر خود را وارد کنید!",
|
||||
"add_loan_request_permission": "اکنون امکان ثبت درخواست جدید برای شما مقدور نیست"
|
||||
},
|
||||
"showLoan": {
|
||||
|
||||
@@ -1,488 +1,287 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
|
||||
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 {Box, Button, Grid, TextField} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useEffect, useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {useRequest, useUser} from "@witel/webapp-builder";
|
||||
import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import useCities from "@/lib/app/hooks/useCities";
|
||||
import PlateNumber from "@/core/components/PlateNumber";
|
||||
|
||||
const AddFormComponent = () => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const {token} = useUser();
|
||||
const requestServer = useRequest()
|
||||
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
|
||||
const {cityTextField, cityList, setProvinceID} = useCities()
|
||||
|
||||
// get province list
|
||||
const [provinceList, setProvinceList] = useState([]);
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get(GET_PROVINCE_LIST, {
|
||||
headers: {Authorization: `Bearer ${token}`},
|
||||
})
|
||||
.then(({data}) => {
|
||||
const formattedData = data.map((province, index) => ({
|
||||
id: index,
|
||||
name: province.name,
|
||||
value: province.id,
|
||||
}));
|
||||
setProvinceList(formattedData);
|
||||
})
|
||||
.catch((error) => {
|
||||
Notifications(t, error.response);
|
||||
});
|
||||
}, []);
|
||||
// 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
|
||||
const initialValues = {
|
||||
name: "",
|
||||
phone_number: "",
|
||||
tel_number: "",
|
||||
vehicle_type: "",
|
||||
plate_number: "",
|
||||
province_id: "",
|
||||
city_id: "",
|
||||
navgan_id: "",
|
||||
national_code: "",
|
||||
shenasname_id: "",
|
||||
national_card_img: null,
|
||||
shenasname_img: null,
|
||||
postal_code: "",
|
||||
navgan_type: "",
|
||||
plate_part1: "",
|
||||
plate_part2: "",
|
||||
plate_part3: "",
|
||||
plate_part4: "",
|
||||
};
|
||||
// end initial values
|
||||
|
||||
// validation
|
||||
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")
|
||||
),
|
||||
tel_number: Yup.mixed()
|
||||
.test("max", `${t("LoanRequest.tel_number_max")}`, (value) => value.toString().length === 11)
|
||||
.required(t("LoanRequest.error_message_tel_number")),
|
||||
vehicle_type: Yup.string().required(
|
||||
t("LoanRequest.error_message_vehicle_type")
|
||||
),
|
||||
plate_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_plate_number")
|
||||
navgan_type: Yup.string().required(
|
||||
t("LoanRequest.error_message_navgan_type")
|
||||
),
|
||||
navgan_id: Yup.string().required(t("LoanRequest.error_message_navgan_id")),
|
||||
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")),
|
||||
national_code: Yup.string().required(
|
||||
t("LoanRequest.error_message_national_code")
|
||||
),
|
||||
city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
|
||||
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")),
|
||||
shenasname_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_shenasname_id")
|
||||
),
|
||||
});
|
||||
// end validation
|
||||
|
||||
// submit
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(t, undefined);
|
||||
const formData = new FormData();
|
||||
formData.append("name", values.name);
|
||||
formData.append("phone_number", values.phone_number);
|
||||
formData.append("tel_number", values.tel_number);
|
||||
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("province_id", values.province_id);
|
||||
formData.append("city_id", values.city_id);
|
||||
formData.append("navgan_id", values.navgan_id);
|
||||
formData.append("national_code", 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);
|
||||
|
||||
await axios
|
||||
.post(SEND_LOAN_REQUEST_NAVGAN, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(t, response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth: true, notification: true}).then().catch(() => {
|
||||
props.setSubmitting(false)
|
||||
})
|
||||
};
|
||||
// end submit
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues, validationSchema, onSubmit: handleSubmit
|
||||
})
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 1,
|
||||
width: "100%",
|
||||
}}
|
||||
<>
|
||||
<Grid container spacing={2} sx={{padding: 2}}
|
||||
>
|
||||
<Grid item xs={12} sm={6}
|
||||
>
|
||||
<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 ? true : false}
|
||||
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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: 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="vehicle_type"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_vehicle_type")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_vehicle_type"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.vehicle_type && props.errors.vehicle_type
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.vehicle_type
|
||||
? props.errors.vehicle_type
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="plate_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_plate_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.plate_number && props.errors.plate_number
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.plate_number
|
||||
? props.errors.plate_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
name="province_id"
|
||||
label={t("LoanRequest.text_field_province_id")} // 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.gender && props.errors.province_id ? true : false
|
||||
}
|
||||
helperText={
|
||||
props.touched.gender ? 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="navgan_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_navgan_id")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.navgan_id && props.errors.navgan_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.navgan_id ? props.errors.navgan_id : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
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",
|
||||
width: {xs: "100%", sm: "30%", md: "25%"},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="national_code"
|
||||
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_code")}
|
||||
error={formik.touched.national_code && Boolean(formik.errors.national_code)}
|
||||
helperText={formik.touched.national_code && formik.errors.national_code}
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}
|
||||
>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="tel_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("tel_number")}
|
||||
error={formik.touched.tel_number && Boolean(formik.errors.tel_number)}
|
||||
helperText={formik.touched.tel_number && formik.errors.tel_number}
|
||||
/>
|
||||
</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: 0, name: "اتوبوس"},
|
||||
{id: 1, value: 1, name: "مینی بوس"}]}
|
||||
select={formik.values.vehicle_type}
|
||||
setFieldValue={formik.setFieldValue}
|
||||
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}>
|
||||
<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}>
|
||||
<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}>
|
||||
<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: "عمومی"}, {
|
||||
id: 3,
|
||||
value: 3,
|
||||
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>
|
||||
<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={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}>
|
||||
<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")}
|
||||
fullWidth
|
||||
onBlur={formik.handleBlur("shenasname_id")}
|
||||
error={formik.touched.shenasname_id && Boolean(formik.errors.shenasname_id)}
|
||||
helperText={formik.touched.shenasname_id && formik.errors.shenasname_id}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<PlateNumber formik={formik}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
width: {xs: "100%", sm: "30%", md: "25%"},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={formik.isSubmitting}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import * as Yup from "yup";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
|
||||
const ShowLoanForm = () => {
|
||||
const t = useTranslations();
|
||||
@@ -231,6 +232,41 @@ const ShowLoanForm = () => {
|
||||
/>
|
||||
</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
|
||||
name="province_id"
|
||||
label={t("LoanRequest.text_field_province_id")} // 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={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
|
||||
232
src/core/components/PlateNumber.jsx
Normal file
232
src/core/components/PlateNumber.jsx
Normal file
@@ -0,0 +1,232 @@
|
||||
import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AccessibleIcon from '@mui/icons-material/Accessible';
|
||||
import {useState} from "react";
|
||||
|
||||
const plate_words = [
|
||||
{
|
||||
id: 1,
|
||||
value: "الف",
|
||||
name: "الف"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "ب",
|
||||
name: "ب"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "پ",
|
||||
name: "پ"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: "ت",
|
||||
name: "ت"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: "ث",
|
||||
name: "ث"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: "ج",
|
||||
name: "ج"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
value: "د",
|
||||
name: "د"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
value: "ز",
|
||||
name: "ز"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
value: "س",
|
||||
name: "س"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
value: "ش",
|
||||
name: "ش"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
value: "ص",
|
||||
name: "ص"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
value: "ط",
|
||||
name: "ط"
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
value: "ع",
|
||||
name: "ع"
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
value: "ف",
|
||||
name: "ف"
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
value: "ق",
|
||||
name: "ق"
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
value: "ک",
|
||||
name: "گ"
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
value: "ل",
|
||||
name: "ل"
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
value: "م",
|
||||
name: "م"
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
value: "ن",
|
||||
name: "ن"
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
value: "و",
|
||||
name: "و"
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
value: "ه",
|
||||
name: "ه"
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
value: "ی",
|
||||
name: "ی"
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
value: "*",
|
||||
name: <AccessibleIcon/>
|
||||
},
|
||||
]
|
||||
const PlateNumber = ({formik}) => {
|
||||
const t = useTranslations();
|
||||
const [plateDrawer, setPlateDrawer] = useState(false);
|
||||
const [selectedWordName, setSelectedWordName] = useState("الف");
|
||||
const [selectedWordValue, setSelectedWordValue] = useState("");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "fit-content",
|
||||
flexDirection: "row",
|
||||
alignItems: "end",
|
||||
justifyContent: "end",
|
||||
gap: 0.75
|
||||
}}>
|
||||
<Box sx={{display: "flex", flexDirection: "column", textAlign: "center"}}>
|
||||
<Typography variant="caption" sx={{fontWeight: 500}}>
|
||||
ایران
|
||||
</Typography>
|
||||
<TextField
|
||||
sx={{width: "50px"}}
|
||||
name="plate_part4"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type='number'
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part4")}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
sx={{width: "70px"}}
|
||||
name="plate_part3"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type='number'
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part3")}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
{/*<TextField*/}
|
||||
{/* sx={{width: "50px"}}*/}
|
||||
{/* name="plate_part2"*/}
|
||||
{/* variant="outlined"*/}
|
||||
{/* type={'number'}*/}
|
||||
{/* size="small"*/}
|
||||
{/* onChange={formik.handleChange}*/}
|
||||
{/* onBlur={formik.handleBlur("plate_part1")}*/}
|
||||
{/*/>*/}
|
||||
<Button onClick={() => setPlateDrawer(true)}
|
||||
sx={{
|
||||
borderColor: "divider",
|
||||
fontSize: "16px"
|
||||
}}
|
||||
variant="outlined"
|
||||
data-selected-word={selectedWordValue}
|
||||
>{selectedWordName}</Button>
|
||||
<Drawer
|
||||
anchor={"bottom"}
|
||||
open={plateDrawer}
|
||||
onClose={() => setPlateDrawer(false)}
|
||||
>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
mx: "auto",
|
||||
my: 2,
|
||||
gap: 2,
|
||||
width: "60%",
|
||||
justifyContent: "center"
|
||||
}}>
|
||||
{plate_words.map((item) => (
|
||||
<Button
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setSelectedWordName(item.name);
|
||||
setSelectedWordValue(item.value);
|
||||
setPlateDrawer(false);
|
||||
}}
|
||||
sx={{
|
||||
width: "fit-content"
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{item.name}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
</Drawer>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
sx={{width: "50px"}}
|
||||
name="plate_part1"
|
||||
variant="outlined"
|
||||
type='number'
|
||||
size="small"
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part1")}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<FormHelperText>{t("error_message_plate_number")}</FormHelperText>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
export default PlateNumber
|
||||
Reference in New Issue
Block a user