loan/user-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

education and occupation inputs and their validation

Browse Source
This commit is contained in:
AminGhasempoor
2023-12-19 10:59:06 +03:30
parent 62670863a1
commit cd3560083d
8 changed files with 357 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
public/locales/fa/app.json
View File

@@ -134,7 +134,10 @@
"no_request_found": "درخواستی یافت نشد"
},
"LoanRequest": {
"finish_loan_request": "درخواست شما با موفقیت ثبت شد",
"back_to_dashboard": "بازگشت به صفحه اصلی",
"cityList_empty": "ابتدا استان را وارد کنید",
"cityList_loading": "درحال دریافت لیست شهر ها ...",
"loan_request_page": "ثبت درخواست وام",
"personal_info": "اطلاعات شخصی",
"national_code_number": "کد ملی می بایست شامل اعداد باشد",
@@ -146,6 +149,8 @@
"uploading_documents": "اسناد",
"error_message_name": "لطفا نام خود را وارد کنید!",
"error_message_plate_number": "لطفا شماره پلاک را به درستی وارد کنید!",
"error_message_occupation_id": "لطفا کد شغل (با توجه به مستندات ارائه شده) را به درستی وارد کنید!",
"error_message_education_id": "لطفا تحصیلات (با توجه به مستندات ارائه شده) را به درستی وارد کنید!",
"error_message_tel_number": "لطفا شماره ثابت (با پیش شماره استان) خود را وارد کنید!",
"error_message_vehicle_type": "لطفا نوع وسیله نقلیه خود را وارد کنید!",
"error_message_navgan_id": "لطفا کد هوشمند ناوگان خود را وارد کنید!",
@@ -158,6 +163,8 @@
"error_message_navgan_type": "لطفا نوع ناوگان خود را وارد کنید!",
"error_message_address": "لطفا آدرس خود را وارد کنید!",
"text_field_tel_number": "شماره ثابت (با پیش شماره استان)",
"text_field_education_id": "تحصیلات",
"text_field_occupation_id": "شغل",
"text_field_enter_your_tel_number": "شماره ثابت (با پیش شماره استان) خود را وارد کنید",
"text_field_name": "نام",
"text_field_plate_part4": "بخش چهارم",

603
src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
View File

@@ -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>
</>
)
}
</>
);
};

6
src/core/components/MuiDatePicker.jsx
View File

@@ -58,7 +58,7 @@ function ButtonDatePicker(props) {
);
}
export default function PickerWithButtonField({formik, error, helperText}) {
export default function PickerWithButtonField({formik}) {
const [value, setValue] = useState(null);
return (
<FormControl
@@ -75,8 +75,10 @@ export default function PickerWithButtonField({formik, error, helperText}) {
value={value}
formik={formik}
onChange={(newValue) => {
formik.setFieldValue("birthday", newValue)
const formattedBirthday = moment(newValue).locale("fa").format("YYYY-MM-DD")
formik.setFieldValue("birthday", formattedBirthday)
setValue(newValue)
console.log(formattedBirthday)
}}
/>

7
src/core/components/PlateNumber.jsx
View File

@@ -123,14 +123,15 @@ const plate_words = [
const PlateNumber = ({formik}) => {
const t = useTranslations();
const [plateDrawer, setPlateDrawer] = useState(false);
const isValidPlate = Boolean(formik.errors.plate_part1 || formik.errors.plate_part3 || formik.errors.plate_part4)
const isErrorPlate = Boolean(formik.errors.plate_part1 || formik.errors.plate_part3 || formik.errors.plate_part4)
const isTouched = (formik.touched.plate_part1 || formik.touched.plate_part3 || formik.touched.plate_part4)
return (
<>
<Stack direction={'row'}
sx={{
border: 1,
overflow: 'hidden',
borderColor: isValidPlate ? 'error.main' : 'divider',
borderColor: (isTouched && isErrorPlate) ? 'error.main' : 'divider',
borderRadius: 1
}}>
<TextField
@@ -223,7 +224,7 @@ const PlateNumber = ({formik}) => {
</Stack>
</Stack>
<FormHelperText
error={isValidPlate}>{isValidPlate ? `${t("LoanRequest.error_message_plate_number")}` : null}</FormHelperText>
error={(isTouched && isErrorPlate)}>{(isTouched && isErrorPlate) ? `${t("LoanRequest.error_message_plate_number")}` : null}</FormHelperText>
</>
)

4
src/core/components/SelectBox.jsx
View File

@@ -42,8 +42,8 @@ function SelectBox({
</MenuItem>
) : (
selectors.map((selector) => (
<MenuItem key={selector.id} value={selector.value}>
{selector.name}
<MenuItem key={selector.id} value={selector.value || selector.id}>
{selector.name || selector.title}
</MenuItem>
))
)}

6
src/lib/app/hooks/useCities.jsx
View File

@@ -8,10 +8,12 @@ const useCities = () => {
const [provinceID, setProvinceID] = useState(null)
const [cityList, setCityList] = useState([]);
const [cityTextField, setCityTextField] = useState(t("text_field_city_id"));
const [isLoadingCityList, setIsLoadingCityList] = useState(false)
const requestServer = useRequest({auth: true, notification: false})
useEffect(() => {
if (provinceID === null) return
setIsLoadingCityList(true)
setCityTextField(t("text_field_loading_cities_list"))
requestServer(`${GET_CITIES_LIST}?province_id=${provinceID}`, "get", {auth: true, notification: false})
.then(({data}) => {
@@ -22,13 +24,15 @@ const useCities = () => {
value: city.id,
}));
setCityList(formattedData);
setIsLoadingCityList(false)
setCityTextField(t("text_field_city_id"))
}).catch(() => {
setIsLoadingCityList(false)
setCityTextField(t("text_field_error_fetching_cities"))
});
}, [provinceID])
return {cityTextField, cityList, setProvinceID}
return {cityTextField, cityList, setProvinceID, isLoadingCityList}
}
export default useCities

7
src/lib/app/hooks/useEducations.jsx
View File

@@ -11,13 +11,8 @@ const useEducations = () => {
useEffect(() => {
setIsLoadingEducationsList(true)
requestServer(GET_EDUCATIONS_LIST, 'get', {auth: true, notification: false}).then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setIsLoadingEducationsList(false)
setEducationsList(formattedData);
setEducationsList(data.data);
}).catch(() => {
setIsLoadingEducationsList(false)
setErrorEducationsList(true)

7
src/lib/app/hooks/useOccupations.jsx
View File

@@ -11,13 +11,8 @@ const useOccupations = () => {
useEffect(() => {
setIsLoadingOccupationsList(true)
requestServer(GET_OCCUPATIONS_LIST, 'get', {auth: true, notification: false}).then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setIsLoadingOccupationsList(false)
setOccupationsList(formattedData);
setOccupationsList(data.data);
}).catch(() => {
setIsLoadingOccupationsList(false)
setErrorOccupationsList(true)