merging
This commit is contained in:
AmirHossein Mahmoodi
@@ -1,463 +1,471 @@
|
||||
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 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, Checkbox, FormControlLabel, Grid, Stack, TextField, Typography} from "@mui/material";
|
||||
import {useFormik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useEffect, useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
import {CenterLayout, 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';
|
||||
import {NextLinkComposed} from "@witel/webapp-builder/dist/utils/linkRouting";
|
||||
import SvgDone from "@/core/components/svgs/SvgDone";
|
||||
import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
|
||||
|
||||
const AddFormComponent = () => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const {token} = useUser();
|
||||
const [finishLoanRequest, setFinishLoanRequest] = useState(false)
|
||||
const [checked, setChecked] = useState(false);
|
||||
const requestServer = useRequest()
|
||||
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
|
||||
const {cityTextField, cityList, setProvinceID, isLoadingCityList} = useCities()
|
||||
const {educationsList, isLoadingEducationsList, errorEducationsList} = UseEducations()
|
||||
const {occupationsList, isLoadingOccupationsList, errorOccupationsList} = useOccupations()
|
||||
|
||||
// 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: "",
|
||||
telephone_number: "",
|
||||
vehicle_type: "",
|
||||
plate_number: "",
|
||||
province_id: "",
|
||||
city_id: "",
|
||||
navgan_id: "",
|
||||
national_code: "",
|
||||
shenasname_id: "",
|
||||
national_card_img: null,
|
||||
shenasname_img: null,
|
||||
national_id: "",
|
||||
national_serial_number: "",
|
||||
postal_code: "",
|
||||
navgan_type: "",
|
||||
plate_part1: "",
|
||||
plate_part2: "الف",
|
||||
plate_part3: "",
|
||||
plate_part4: "",
|
||||
address: "",
|
||||
birthday: "",
|
||||
education_id: "",
|
||||
occupation_id: "",
|
||||
checkedBox: false
|
||||
};
|
||||
// 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")
|
||||
),
|
||||
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")
|
||||
),
|
||||
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")),
|
||||
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")
|
||||
),
|
||||
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")
|
||||
),
|
||||
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")
|
||||
),
|
||||
shenasname_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_shenasname_id")
|
||||
),
|
||||
city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
|
||||
national_id: 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().required(t("LoanRequest.error_message_shenasname_serial")),
|
||||
});
|
||||
// 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("vehicle_type", values.vehicle_type);
|
||||
formData.append("plate_number", values.plate_number);
|
||||
formData.append("province_id", values.province_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);
|
||||
props.setSubmitting(true)
|
||||
|
||||
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);
|
||||
});
|
||||
await 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.locale('en').format("YYYY-MM-DD"),
|
||||
education_id: values.education_id,
|
||||
occupation_id: values.occupation_id,
|
||||
}
|
||||
}).then(() => {
|
||||
setFinishLoanRequest(true)
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
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%",
|
||||
}}
|
||||
>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
<>
|
||||
{finishLoanRequest ?
|
||||
(
|
||||
<CenterLayout>
|
||||
<SvgDone width={200} height={200}/>
|
||||
<Stack direction={'row'} spacing={0.7} sx={{mb: 4}}>
|
||||
<Typography variant={'h5'}
|
||||
align={'center'}>{t("LoanRequest.finish_loan_request")}</Typography>
|
||||
<DoneIcon color={'success'}/>
|
||||
</Stack>
|
||||
<Button variant={'contained'} component={NextLinkComposed}
|
||||
to={'/dashboard/navgan/followUp-loan'}>
|
||||
{t("LoanRequest.back_to_dashboard")}
|
||||
</Button>
|
||||
</CenterLayout>
|
||||
) : (
|
||||
<>
|
||||
<Grid container spacing={2} sx={{padding: 2}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
<Grid item xs={12} sm={4}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
<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"
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
|
||||
type={'tel'}
|
||||
onChange={formik.handleChange}
|
||||
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
|
||||
}
|
||||
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
|
||||
helperText={
|
||||
props.touched.national_code
|
||||
? props.errors.national_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={4}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="shenasname_id"
|
||||
name="national_serial_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_id")}
|
||||
label={t("LoanRequest.text_field_shenasname_serial")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.shenasname_id && props.errors.shenasname_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
"LoanRequest.text_field_enter_your_shenasname_serial")}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.shenasname_id
|
||||
? props.errors.shenasname_id
|
||||
: null
|
||||
}
|
||||
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}
|
||||
/>
|
||||
</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>
|
||||
</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"
|
||||
inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
|
||||
type={'tel'}
|
||||
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;
|
||||
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="navgan_type"
|
||||
label={t("LoanRequest.text_field_navgan_type")}
|
||||
size="small"
|
||||
selectType="navgan_type"
|
||||
selectors={[
|
||||
{
|
||||
id: 1,
|
||||
value: "روستایی",
|
||||
name: "روستایی"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "عمومی",
|
||||
name: "عمومی"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "منطقه آزاد",
|
||||
name: "منطقه آزاد"
|
||||
}
|
||||
]}
|
||||
schema={{value: 'value', name: '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"
|
||||
inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
|
||||
type={'tel'}
|
||||
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}
|
||||
schema={{value: 'value', name: 'name'}}
|
||||
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"
|
||||
schema={{value: 'value', name: 'name'}}
|
||||
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"
|
||||
schema={{value: 'value', name: 'name'}}
|
||||
selectType="vehicle_type"
|
||||
selectors={[
|
||||
{
|
||||
id: 0,
|
||||
value: "اتوبوس",
|
||||
name: "اتوبوس"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: "مینی بوس",
|
||||
name: "مینی بوس"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
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}
|
||||
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}
|
||||
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>
|
||||
<Grid container spacing={2} sx={{padding: 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",
|
||||
@@ -469,20 +477,23 @@ const AddFormComponent = () => {
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={formik.handleSubmit}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
sx={{my: 4}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
disabled={formik.values.checkedBox ? (formik.isSubmitting || !formik.dirty || !formik.isValid) : true}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
{formik.isSubmitting
|
||||
? t("LoanRequest.button_while_submit")
|
||||
: t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,29 +1,21 @@
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import {Box, Chip, Divider} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AddFormComponent from "@/components/dashboard/navgan/add-request-loan/forms/AddForm";
|
||||
|
||||
const LoanRequestComponent = () => {
|
||||
const t = useTranslations();
|
||||
const {user} = useUser();
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Box sx={{width: "80%", my: 2}}>
|
||||
<>
|
||||
<Box>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={`${t("LoanRequest.loan_request_page")} | ${
|
||||
user.type_name
|
||||
}`}
|
||||
label={`${t("LoanRequest.loan_request_page")} | ${t("user_navy")} `}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<AddFormComponent/>
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,25 +1,50 @@
|
||||
import {Card, CardContent, CardHeader, Grid, Typography} from "@mui/material";
|
||||
import SellIcon from '@mui/icons-material/Sell';
|
||||
import {Box, Button, Card, CardContent, Grid, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
import moment from "jalali-moment";
|
||||
import {LinkRouting} from "@witel/webapp-builder";
|
||||
import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
|
||||
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
|
||||
const RequestCard = ({item}) => {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Grid item xs={12} lg={6} xl={4}>
|
||||
<Card sx={{
|
||||
width: "100%",
|
||||
boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
|
||||
}}>
|
||||
<CardHeader
|
||||
avatar={<SellIcon color="primary"/>}
|
||||
title={`${t("LoanFollowUp.request_number")}: (${item.id})`}
|
||||
subheader={item.latest_history_created_at}
|
||||
/>
|
||||
<CardContent sx={{pt: 0}}>
|
||||
<Typography variant="button">
|
||||
{item.loan_state}
|
||||
<CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start' , paddingBottom: '16px !important'}}>
|
||||
<Box
|
||||
sx={{
|
||||
borderLeft: '6px solid',
|
||||
borderColor: 'primary.main',
|
||||
borderRadius: '6px 0px 0px 6px',
|
||||
paddingLeft: '10px',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6" sx={{lineHeight: 2 , fontWeight:'bold'}}>
|
||||
{`${t("LoanFollowUp.loan_unique_code")}: ${item.id}`}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
|
||||
{`${t("LoanFollowUp.loan_date")}: ${moment(item.created_at).locale("fa").format("HH:mm | YYYY/MM/DD")}`}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
|
||||
{`${t("LoanFollowUp.loan_bank_branch")}: ${item.branch_info === null ? '-' : item.branch_info}`}
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{lineHeight: 2 , paddingLeft: '20px'}}>
|
||||
{`${t("LoanFollowUp.loan_status")}: `}
|
||||
{item.loan_state}
|
||||
{item.state_id >= 1 && item.state_id <= 6 && <AccessTimeFilledIcon sx={{verticalAlign: 'middle', marginLeft: '4px' , color: '#48a4df'}}/>}
|
||||
{item.state_id === 8 && <CheckCircleIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'green'}}/>}
|
||||
{item.state_id === 7 && <CancelIcon sx={{verticalAlign: 'middle', marginLeft: '4px', color: 'red'}}/>}
|
||||
</Typography>
|
||||
<Button variant="contained" color="primary" sx={{alignSelf: 'flex-end'}}>
|
||||
<LinkRouting underline="none" color="inherit" href={`/dashboard/navgan/${item.id}/show`}>
|
||||
{t("LoanFollowUp.loan_details")}
|
||||
</LinkRouting>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
@@ -1,59 +1,44 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {
|
||||
Grid,
|
||||
Stack,
|
||||
} from "@mui/material";
|
||||
import { Grid } from "@mui/material";
|
||||
import {useEffect, useState} from "react";
|
||||
import {SHOW_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
|
||||
import useLoading from "@/lib/app/hooks/useLoading";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import moment from "jalali-moment";
|
||||
import RequestCard from "@/components/dashboard/navgan/followUp-loan/RequestCard";
|
||||
import {FullPageLayout , useRequest} from "@witel/webapp-builder";
|
||||
|
||||
const LoanFollowUpComponent = () => {
|
||||
const requestServer = useRequest();
|
||||
const {setLoadingPage} = useLoading();
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const [requestsList, setRequestsList] = useState([]);
|
||||
// get form data
|
||||
useEffect(() => {
|
||||
setLoadingPage(true)
|
||||
requestServer(SHOW_LOAN_REQUEST_NAVGAN, "get", {auth: true, notification: false})
|
||||
setIsLoading(true)
|
||||
requestServer(SHOW_LOAN_REQUEST_NAVGAN, "get", {
|
||||
auth: true,
|
||||
pending:false,
|
||||
success:{notification:{show:false}}
|
||||
})
|
||||
.then(function ({data}) {
|
||||
const items = data.data;
|
||||
const formattedData = items.map((item, index) => ({
|
||||
id: item.id,
|
||||
latest_history_created_at: moment(item.latest_history_created_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
|
||||
state_id: item.state_id,
|
||||
loan_state: item.loan_state,
|
||||
}));
|
||||
setRequestsList(formattedData);
|
||||
setLoadingPage(false)
|
||||
setRequestsList(items);
|
||||
setIsLoading(false)
|
||||
})
|
||||
.catch(function (error) {
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 4,
|
||||
width: "100%",
|
||||
}}
|
||||
<FullPageLayout>
|
||||
<Grid
|
||||
container
|
||||
columnSpacing={2}
|
||||
rowSpacing={2}
|
||||
sx={{alignItems: "start", justifyContent: "center", padding: "24px"}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
columnSpacing={2}
|
||||
rowSpacing={2}
|
||||
sx={{alignItems: "start", justifyContent: "center"}}
|
||||
>
|
||||
{requestsList.map((item, index) => (
|
||||
<RequestCard item={item} key={item.id}/>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</DashboardLayouts>
|
||||
{requestsList.map((item) => (
|
||||
<RequestCard item={item} key={item.id}/>
|
||||
))}
|
||||
</Grid>
|
||||
</FullPageLayout>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import {Button, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import {useRouter} from "next/router";
|
||||
import {NextLinkComposed} from "@/core/components/LinkRouting";
|
||||
|
||||
const AccessibilityComponent = () => {
|
||||
const t = useTranslations();
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<CenterLayout>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "16px",
|
||||
fontWeight: 600,
|
||||
my: 2
|
||||
}}>
|
||||
{t("LoanRequest.add_loan_request_permission")}
|
||||
</Typography>
|
||||
<Button color="primary" variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard/refahi/followUp-loan",
|
||||
}}>
|
||||
{t("LoanFollowUp.loan_follow_up_page")}
|
||||
</Button>
|
||||
</CenterLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccessibilityComponent;
|
||||
@@ -1,439 +0,0 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {SEND_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
|
||||
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
Divider,
|
||||
FormControl,
|
||||
FormHelperText,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
TextField
|
||||
} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import useProvince from "@/lib/app/hooks/useProvince";
|
||||
import {useRouter} from "next/router";
|
||||
|
||||
const AddFormComponent = () => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest()
|
||||
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince();
|
||||
const router = useRouter();
|
||||
|
||||
// initial values, validation and request action of form
|
||||
const initialValues = {
|
||||
name: "",
|
||||
phone_number: "",
|
||||
province_id: "",
|
||||
national_id: "",
|
||||
shenasname_id: "",
|
||||
sherkat_naft_doc: null,
|
||||
estate_doc: null,
|
||||
agreement_doc: null,
|
||||
national_card_image: null,
|
||||
shenasname_image: null,
|
||||
payan_khedmat_image: null,
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(t("LoanRequest.error_message_name")),
|
||||
phone_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_phone_number")
|
||||
),
|
||||
province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
|
||||
national_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_national_id")
|
||||
),
|
||||
shenasname_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_shenasname_id")
|
||||
),
|
||||
sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
|
||||
estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
|
||||
agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
|
||||
national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
|
||||
shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
|
||||
payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
|
||||
});
|
||||
const handleSubmit = (values, props) => {
|
||||
const formData = new FormData();
|
||||
formData.append("name", values.name);
|
||||
formData.append("phone_number", values.phone_number);
|
||||
formData.append("province_id", values.province_id);
|
||||
formData.append("national_id", values.national_id);
|
||||
formData.append("shenasname_id", values.shenasname_id);
|
||||
if (values.sherkat_naft_doc != null)
|
||||
formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
|
||||
if (values.estate_doc != null)
|
||||
formData.append("estate_doc", values.estate_doc);
|
||||
if (values.agreement_doc != null)
|
||||
formData.append("agreement_doc", values.agreement_doc);
|
||||
if (values.shenasname_image != null)
|
||||
formData.append("shenasname_image", values.shenasname_image);
|
||||
if (values.national_card_image != null)
|
||||
formData.append("national_card_image", values.national_card_image);
|
||||
if (values.payan_khedmat_image != null)
|
||||
formData.append("payan_khedmat_image", values.payan_khedmat_image);
|
||||
requestServer(SEND_LOAN_REQUEST_WELFARE, "post", {auth: true, data: formData})
|
||||
.then(function (response) {
|
||||
router.replace('/dashboard/refahi/followUp-loan');
|
||||
})
|
||||
.catch(function (error) {
|
||||
})
|
||||
.finally(function () {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
// end initial values, validation and request action of form
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 1,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("LoanRequest.personal_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</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="name"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_name")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_name")}
|
||||
type={"text"}
|
||||
error={!!(props.touched.name && props.errors.name)}
|
||||
fullWidth
|
||||
helperText={props.touched.name ? props.errors.name : null}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_phone_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.phone_number && props.errors.phone_number)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
mt: 0,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<FormControl
|
||||
error={props.touched.province_id && !!props.errors.province_id}
|
||||
sx={{width: "100%", mt: 2}}
|
||||
size="small"
|
||||
>
|
||||
<InputLabel>{t("LoanRequest.text_field_province_id")}</InputLabel>
|
||||
<Select
|
||||
name="province_id"
|
||||
disabled={isLoadingProvinceList || errorProvinceList}
|
||||
label={t("LoanRequest.text_field_province_id")}
|
||||
value={props.values.province_id}
|
||||
onChange={(e) => {
|
||||
props.setFieldValue("province_id", e.target.value);
|
||||
}}
|
||||
onBlur={props.handleBlur}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
>
|
||||
{isLoadingProvinceList ? (
|
||||
<MenuItem>
|
||||
{t("LoanRequest.text_field_loading_provinces_list")}
|
||||
</MenuItem>
|
||||
) : errorProvinceList ? (
|
||||
<MenuItem>
|
||||
{t("LoanRequest.text_field_error_fetching_provinces")}
|
||||
</MenuItem>
|
||||
) : (
|
||||
provinceList.map((item) => (
|
||||
<MenuItem key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</MenuItem>
|
||||
))
|
||||
)}
|
||||
</Select>
|
||||
<FormHelperText>
|
||||
{props.touched.province_id && props.errors.province_id ? props.errors.province_id : ""}
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_national_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.national_id && props.errors.national_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="shenasname_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.shenasname_id && props.errors.shenasname_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.shenasname_id
|
||||
? props.errors.shenasname_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("LoanRequest.uploading_documents")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
|
||||
sx={{justifyContent: "center"}}>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldName="sherkat_naft_doc"
|
||||
imageAlt={t("app_name")}
|
||||
label={t("LoanRequest.file_field_sherkat_naft_doc")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
|
||||
}
|
||||
helperText={
|
||||
props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldName="estate_doc"
|
||||
imageAlt={t("app_name")}
|
||||
label={t("LoanRequest.file_field_estate_doc")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.estate_doc && props.errors.estate_doc)
|
||||
}
|
||||
helperText={
|
||||
props.touched.estate_doc ? props.errors.estate_doc : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldName="agreement_doc"
|
||||
imageAlt={t("app_name")}
|
||||
label={t("LoanRequest.file_field_agreement_doc")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.agreement_doc && props.errors.agreement_doc)
|
||||
}
|
||||
helperText={
|
||||
props.touched.agreement_doc ? props.errors.agreement_doc : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldName="shenasname_image"
|
||||
imageAlt={t("app_name")}
|
||||
label={t("LoanRequest.file_field_shenasname_image")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.shenasname_image && props.errors.shenasname_image)
|
||||
}
|
||||
helperText={
|
||||
props.touched.shenasname_image ? props.errors.shenasname_image : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldName="payan_khedmat_image"
|
||||
imageAlt={t("app_name")}
|
||||
label={t("LoanRequest.file_field_payan_khedmat_image")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
|
||||
}
|
||||
helperText={
|
||||
props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldName="national_card_image"
|
||||
imageAlt={t("app_name")}
|
||||
label={t("LoanRequest.file_field_national_card_image")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.national_card_image && props.errors.national_card_image)
|
||||
}
|
||||
helperText={
|
||||
props.touched.national_card_image ? props.errors.national_card_image : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
my: 2,
|
||||
width: {xs: "100%", sm: "30%", md: "25%"},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddFormComponent;
|
||||
@@ -1,17 +0,0 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AddFormComponent from "@/components/dashboard/refahi/add-request-loan/forms/AddForm";
|
||||
import AccessibilityComponent from "@/components/dashboard/refahi/add-request-loan/accessibility";
|
||||
|
||||
const LoanRequestComponent = () => {
|
||||
const t = useTranslations();
|
||||
const {user} = useUser();
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
{user.can_request_a_new_loan ? <AddFormComponent/> : <AccessibilityComponent/>}
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoanRequestComponent;
|
||||
@@ -1,397 +0,0 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import {UPDATE_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
||||
import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {useRouter} from "next/router";
|
||||
import useLoading from "@/lib/app/hooks/useLoading";
|
||||
|
||||
const EditFormComponent = ({provinceList, initialValues}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest();
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
// validation and request action of form
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(t("LoanRequest.error_message_name")),
|
||||
phone_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_phone_number")
|
||||
),
|
||||
province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
|
||||
national_id: Yup.string().required(t("LoanRequest.error_message_national_id")),
|
||||
shenasname_id: Yup.string().required(t("LoanRequest.error_message_shenasname_id")),
|
||||
sherkat_naft_doc: Yup.mixed().required(t("LoanRequest.error_message_sherkat_naft_doc")),
|
||||
estate_doc: Yup.mixed().required(t("LoanRequest.error_message_estate_doc")),
|
||||
agreement_doc: Yup.mixed().required(t("LoanRequest.error_message_agreement_doc")),
|
||||
national_card_image: Yup.mixed().required(t("LoanRequest.error_message_national_card_image")),
|
||||
shenasname_image: Yup.mixed().required(t("LoanRequest.error_message_shenasname_image")),
|
||||
payan_khedmat_image: Yup.mixed().required(t("LoanRequest.error_message_payan_khedmat_image")),
|
||||
});
|
||||
|
||||
const handleSubmit = (values, props) => {
|
||||
const formData = new FormData();
|
||||
formData.append("name", values.name);
|
||||
formData.append("phone_number", values.phone_number);
|
||||
formData.append("province_id", values.province_id);
|
||||
formData.append("national_id", values.national_id);
|
||||
formData.append("shenasname_id", values.shenasname_id);
|
||||
if (values.sherkat_naft_doc != initialValues.sherkat_naft_doc)
|
||||
formData.append("sherkat_naft_doc", values.sherkat_naft_doc);
|
||||
if (values.estate_doc != initialValues.estate_doc)
|
||||
formData.append("estate_doc", values.estate_doc);
|
||||
if (values.agreement_doc != initialValues.agreement_doc)
|
||||
formData.append("agreement_doc", values.agreement_doc);
|
||||
if (values.shenasname_image != initialValues.shenasname_image)
|
||||
formData.append("shenasname_image", values.shenasname_image);
|
||||
if (values.national_card_image != initialValues.national_card_image)
|
||||
formData.append("national_card_image", values.national_card_image);
|
||||
if (values.payan_khedmat_image != initialValues.payan_khedmat_image)
|
||||
formData.append("payan_khedmat_image", values.payan_khedmat_image);
|
||||
|
||||
requestServer(UPDATE_LOAN_REQUEST_WELFARE + router.query.id, "post", {auth: true, data: formData})
|
||||
.then(function (response) {
|
||||
})
|
||||
.catch(function (error) {
|
||||
})
|
||||
.finally(function () {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
if (!initialValues) return "";
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 1,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("LoanRequest.personal_info")}
|
||||
/>
|
||||
</Divider>
|
||||
</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="name"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_name")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_name")}
|
||||
type={"text"}
|
||||
error={!!(props.touched.name && props.errors.name)}
|
||||
fullWidth
|
||||
helperText={props.touched.name ? props.errors.name : null}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_phone_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.phone_number && props.errors.phone_number)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
name="province_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={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_national_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.national_id && props.errors.national_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="shenasname_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.shenasname_id && props.errors.shenasname_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.shenasname_id
|
||||
? props.errors.shenasname_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{my: 1}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={t("LoanRequest.uploading_documents")}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
<Stack spacing={{xs: 1, sm: 2}} direction="row" useFlexGap flexWrap="wrap"
|
||||
sx={{justifyContent: "center"}}>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
default_image={initialValues.sherkat_naft_doc}
|
||||
fieldName="sherkat_naft_doc"
|
||||
imageAlt={t("LoanRequest.file_field_sherkat_naft_doc")}
|
||||
label={t("LoanRequest.file_field_sherkat_naft_doc")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.sherkat_naft_doc && props.errors.sherkat_naft_doc)
|
||||
}
|
||||
helperText={
|
||||
props.touched.sherkat_naft_doc ? props.errors.sherkat_naft_doc : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
default_image={initialValues.estate_doc}
|
||||
fieldName="estate_doc"
|
||||
imageAlt={t("LoanRequest.file_field_estate_doc")}
|
||||
label={t("LoanRequest.file_field_estate_doc")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.estate_doc && props.errors.estate_doc)
|
||||
}
|
||||
helperText={
|
||||
props.touched.estate_doc ? props.errors.estate_doc : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
default_image={initialValues.agreement_doc}
|
||||
fieldName="agreement_doc"
|
||||
imageAlt={t("LoanRequest.file_field_agreement_doc")}
|
||||
label={t("LoanRequest.file_field_agreement_doc")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.agreement_doc && props.errors.agreement_doc)
|
||||
}
|
||||
helperText={
|
||||
props.touched.agreement_doc ? props.errors.agreement_doc : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
default_image={initialValues.shenasname_image}
|
||||
fieldName="shenasname_image"
|
||||
imageAlt={t("LoanRequest.file_field_shenasname_image")}
|
||||
label={t("LoanRequest.file_field_shenasname_image")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.shenasname_image && props.errors.shenasname_image)
|
||||
}
|
||||
helperText={
|
||||
props.touched.shenasname_image ? props.errors.shenasname_image : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
default_image={initialValues.payan_khedmat_image}
|
||||
fieldName="payan_khedmat_image"
|
||||
imageAlt={t("LoanRequest.file_field_payan_khedmat_image")}
|
||||
label={t("LoanRequest.file_field_payan_khedmat_image")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.payan_khedmat_image && props.errors.payan_khedmat_image)
|
||||
}
|
||||
helperText={
|
||||
props.touched.payan_khedmat_image ? props.errors.payan_khedmat_image : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
mx: {xs: 0, sm: 1},
|
||||
maxWidth: "200px"
|
||||
}}>
|
||||
<UploadSystem
|
||||
setFieldValue={props.setFieldValue}
|
||||
default_image={initialValues.national_card_image}
|
||||
fieldName="national_card_image"
|
||||
imageAlt={t("app_name")}
|
||||
label={t("LoanRequest.file_field_national_card_image")}
|
||||
enableDelete={false}
|
||||
error={
|
||||
!!(props.touched.national_card_image && props.errors.national_card_image)
|
||||
}
|
||||
helperText={
|
||||
props.touched.national_card_image ? props.errors.national_card_image : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
my: 2,
|
||||
width: {xs: "100%", sm: "30%", md: "25%"},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
sx={{mt: 2}}
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditFormComponent;
|
||||
@@ -1,81 +0,0 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import EditFormComponent from "@/components/dashboard/refahi/edit-request-loan/forms/EditForm";
|
||||
import {useEffect, useState} from "react";
|
||||
import {DETAILS_LOAN_REQUEST_WELFARE, GET_PROVINCE_LIST} from "@/core/data/apiRoutes";
|
||||
import useLoading from "@/lib/app/hooks/useLoading";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import {useRouter} from "next/router";
|
||||
import {log} from "next/dist/server/typescript/utils";
|
||||
|
||||
const LoanRequestComponent = () => {
|
||||
const requestServer = useRequest();
|
||||
const {setLoadingPage} = useLoading();
|
||||
const router = useRouter();
|
||||
|
||||
const [provinceList, setProvinceList] = useState(null);
|
||||
const [initialValues, setInitialValues] = useState(null);
|
||||
|
||||
// get province list
|
||||
useEffect(() => {
|
||||
setLoadingPage(true);
|
||||
requestServer(GET_PROVINCE_LIST, "get", {auth: true, notification: false})
|
||||
.then(function ({data}) {
|
||||
const formattedData = data.map((province, index) => ({
|
||||
id: index,
|
||||
name: province.name,
|
||||
value: province.id,
|
||||
}));
|
||||
setProvinceList(formattedData);
|
||||
}).catch(() => {
|
||||
setLoadingPage(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// get form data
|
||||
useEffect(() => {
|
||||
if (!provinceList) return;
|
||||
setLoadingPage(true);
|
||||
requestServer(DETAILS_LOAN_REQUEST_WELFARE + router.query.id, "get", {auth: true, notification: false})
|
||||
.then(function ({data}) {
|
||||
const item = data.data;
|
||||
const formattedData = {
|
||||
name: item.name,
|
||||
phone_number: item.phone_number,
|
||||
province_id: item.province_id,
|
||||
national_id: item.national_id,
|
||||
shenasname_id: item.shenasname_id,
|
||||
sherkat_naft_doc: item.sherkat_naft_doc,
|
||||
estate_doc: item.estate_doc,
|
||||
agreement_doc: item.agreement_doc,
|
||||
national_card_image: item.national_card_image,
|
||||
shenasname_image: item.shenasname_image,
|
||||
payan_khedmat_image: item.payan_khedmat_image,
|
||||
state_id: item.state_id
|
||||
};
|
||||
setInitialValues(formattedData);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoadingPage(false);
|
||||
});
|
||||
}, [provinceList, router]);
|
||||
|
||||
// Redirect to /dashboard/refahi/followUp-loan if state_id is not 7
|
||||
useEffect(() => {
|
||||
if (!initialValues) return
|
||||
if (initialValues.state_id === 7) return
|
||||
|
||||
router.replace('/dashboard/refahi/followUp-loan');
|
||||
}, [initialValues]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{initialValues && initialValues.state_id === 7 && (
|
||||
<DashboardLayouts>
|
||||
<EditFormComponent provinceList={provinceList} initialValues={initialValues}/>
|
||||
</DashboardLayouts>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoanRequestComponent;
|
||||
@@ -1,52 +0,0 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Grid, IconButton, Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import SellIcon from '@mui/icons-material/Sell';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import {useTranslations} from "next-intl";
|
||||
import {NextLinkComposed} from "@/core/components/LinkRouting";
|
||||
|
||||
|
||||
const RequestCard = ({item}) => {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<Card sx={{
|
||||
width: "100%",
|
||||
boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px"
|
||||
}}>
|
||||
<CardHeader
|
||||
avatar={<SellIcon color="primary"/>}
|
||||
title={`${t("LoanFollowUp.request_number")}: (${item.id})`}
|
||||
subheader={item.latest_history_created_at}
|
||||
action={
|
||||
item.state_id === 7 ? ( // Use the ternary operator or if/else inside curly braces
|
||||
<Tooltip title={t("LoanFollowUp.loan_request_correction")}>
|
||||
<IconButton size="small"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: `edit-request-loan/${item.id}`,
|
||||
}} aria-label="fingerprint">
|
||||
<EditIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
<CardContent sx={{pt: 0}}>
|
||||
<Typography variant="button">
|
||||
{item.loan_state}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestCard;
|
||||
@@ -1,54 +0,0 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {Grid, Stack, Typography,} from "@mui/material";
|
||||
import {useEffect, useState} from "react";
|
||||
import {SHOW_LOAN_REQUEST_WELFARE} from "@/core/data/apiRoutes";
|
||||
import useLoading from "@/lib/app/hooks/useLoading";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import moment from "jalali-moment";
|
||||
import RequestCard from "@/components/dashboard/refahi/followUp-loan/RequestCard";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
const LoanFollowUpComponent = () => {
|
||||
const t = useTranslations()
|
||||
const requestServer = useRequest();
|
||||
const {setLoadingPage} = useLoading();
|
||||
const [requestsList, setRequestsList] = useState(null);
|
||||
// get form data
|
||||
useEffect(() => {
|
||||
setLoadingPage(true)
|
||||
requestServer(SHOW_LOAN_REQUEST_WELFARE, "get", {auth: true, notification: false})
|
||||
.then(function ({data}) {
|
||||
const items = data.data;
|
||||
const formattedData = items.map((item, index) => ({
|
||||
id: item.id,
|
||||
latest_history_created_at: moment(item.latest_history_created_at).locale("fa").format("HH:mm | YYYY/MM/DD"),
|
||||
state_id: item.state_id,
|
||||
loan_state: item.loan_state,
|
||||
}));
|
||||
setRequestsList(formattedData);
|
||||
setLoadingPage(false)
|
||||
})
|
||||
.catch(function (error) {
|
||||
})
|
||||
}, []);
|
||||
|
||||
return (<DashboardLayouts>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 4, width: "100%",
|
||||
}}
|
||||
>
|
||||
{requestsList == null ? '' : requestsList.length ? (<Grid
|
||||
container
|
||||
columnSpacing={2}
|
||||
rowSpacing={2}
|
||||
sx={{alignItems: "start", justifyContent: "center"}}
|
||||
>
|
||||
{requestsList.map((item, index) => (<RequestCard item={item} key={item.id}/>))}
|
||||
</Grid>) : (<Typography sx={{textAlign: 'center'}}>{t('LoanFollowUp.no_request_found')}</Typography>)}
|
||||
</Stack>
|
||||
</DashboardLayouts>);
|
||||
};
|
||||
|
||||
export default LoanFollowUpComponent;
|
||||
@@ -1,74 +1,53 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useEffect, useState} from "react";
|
||||
import {useRequest} from "@witel/webapp-builder";
|
||||
import TimelineManager from "@/core/components/timelines/timelineManager";
|
||||
import moment from "jalali-moment";
|
||||
import {Timeline} from "@mui/lab";
|
||||
import {LinearProgress} from "@mui/material";
|
||||
import {useConfig} from "@witel/webapp-builder";
|
||||
|
||||
const TimeLineDetails = () => {
|
||||
const t = useTranslations();
|
||||
const request = useRequest({notification: false, auth: false})
|
||||
const {config} = useConfig()
|
||||
const [timeLineList, setTimeLineList] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const deadlines = Object.keys(config.deadlines).map(key => ({
|
||||
type: key,
|
||||
...config.deadlines[key]
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
request(process.env.NEXT_PUBLIC_CONFIG_APP_URL, 'get').then(res => {
|
||||
let tempArr = []
|
||||
for (const timeLine of res.data.time_lines.navgan_first_page) {
|
||||
let temp = {}
|
||||
temp['label'] = timeLine.label
|
||||
temp['date'] = moment(timeLine.date.from, 'jYYYY/jMM/jDD').locale('fa').format('jD jMMMM')
|
||||
const fromDate = moment(timeLine.date.from, 'jYYYY/jMM/jDD')
|
||||
const toDate = moment(timeLine.date.to, 'jYYYY/jMM/jDD')
|
||||
const today = moment()
|
||||
if (today.isBetween(fromDate, toDate, null, '[]')) {
|
||||
temp['status'] = 'in progress'
|
||||
} else if (today.isAfter(toDate, null)) {
|
||||
temp['status'] = 'done'
|
||||
} else if (today.isBefore(fromDate, null)) {
|
||||
temp['status'] = 'open'
|
||||
}
|
||||
tempArr.push(temp)
|
||||
let tempArr = []
|
||||
for (const timeLine of deadlines) {
|
||||
let temp = {}
|
||||
temp['label'] = timeLine.timeline_label
|
||||
temp['date'] = moment(timeLine.date.from, 'jYYYY/jMM/jDD').locale('fa').format('jD jMMMM')
|
||||
const fromDate = moment(timeLine.date.from, 'jYYYY/jMM/jDD')
|
||||
const toDate = moment(timeLine.date.to, 'jYYYY/jMM/jDD')
|
||||
const today = moment()
|
||||
if (today.isBetween(fromDate, toDate, null, '[]')) {
|
||||
temp['status'] = 'in progress'
|
||||
} else if (today.isAfter(toDate, null)) {
|
||||
temp['status'] = 'done'
|
||||
} else if (today.isBefore(fromDate, null)) {
|
||||
temp['status'] = 'open'
|
||||
}
|
||||
setTimeLineList(tempArr)
|
||||
setLoading(false)
|
||||
}).catch(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
tempArr.push(temp)
|
||||
}
|
||||
setTimeLineList(tempArr)
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
<LinearProgress/>
|
||||
) : (
|
||||
<Timeline position="alternate">
|
||||
{timeLineList.map((timeLine, index) => (
|
||||
<TimelineManager
|
||||
key={index}
|
||||
status={timeLine.status}
|
||||
date={timeLine.date}
|
||||
primaryLabel={timeLine.label.primary}
|
||||
secondaryLabel={timeLine.label.secondary}
|
||||
position={index === (timeLineList.length - 1) ? 'end' : ''}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Timeline>
|
||||
)}
|
||||
</>
|
||||
<Timeline position="alternate">
|
||||
{timeLineList.map((timeLine, index) => (
|
||||
<TimelineManager
|
||||
key={index}
|
||||
status={timeLine.status}
|
||||
date={timeLine.date}
|
||||
primaryLabel={timeLine.label.primary}
|
||||
secondaryLabel={timeLine.label.secondary}
|
||||
position={index === (timeLineList.length - 1) ? 'end' : ''}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Timeline>
|
||||
)
|
||||
// return (
|
||||
// <Timeline position="alternate">
|
||||
// <InProgressTimeLine date={'10 دی'} primaryLabel={'ثبت نام متقاضی'}
|
||||
// secondaryLabel={'ثبت نام متقاضیان واجد شرایط'}/>
|
||||
// <OpenTimeLine date={'10 بهمن'} primaryLabel={'صحت سنجی متقاضیان'}
|
||||
// secondaryLabel={'بررسی و کارشناسی درخواست ها'}/>
|
||||
// <OpenTimeLine position={'end'} date={'10 اسفند'} primaryLabel={'ارجاع به بانک'}
|
||||
// secondaryLabel={'فرآیند معرفی ضامن و پرداخت'}/>
|
||||
// </Timeline>
|
||||
// )
|
||||
}
|
||||
export default TimeLineDetails
|
||||
@@ -5,16 +5,16 @@ import {LinkRouting} from "@witel/webapp-builder";
|
||||
const LoanRegister = () => {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Box sx={{backgroundColor: "primary.light"}}>
|
||||
<Box sx={{backgroundSize: 'cover', backgroundImage: `url(/images/bg-firstpage-bus.png)`}}>
|
||||
<Container sx={{padding: 3, color: "white"}} maxWidth="xl">
|
||||
<Typography sx={{my: 3}} variant={'h3'}>
|
||||
<Typography sx={{my: 3, textShadow: '1px 1px 2px #555555'}} variant={'h3'}>
|
||||
{t("app_name")}
|
||||
</Typography>
|
||||
<Stack sx={{color: "white"}}>
|
||||
<Grid sx={{py: 4}} container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box sx={{paddingBottom: 4}}>
|
||||
<Typography sx={{lineHeight: 2.7}}>
|
||||
<Typography sx={{lineHeight: 2.7, textShadow: '1px 1px 2px black'}}>
|
||||
وام نوسازی ناوگان به هدف رشد و پیشرفت استان های کشور از طریق ارتقای بهره وری و توسعه
|
||||
اعطا میشود. برای استفاده از تسهیلات این سامانه و درخواست وام می بایست ابتدا وارد
|
||||
سامانه شوید.
|
||||
@@ -30,18 +30,6 @@ const LoanRegister = () => {
|
||||
padding: 1
|
||||
}}>
|
||||
<LinkRouting underline="none" color="inherit" href={'/login'}>
|
||||
<Typography variant="h6">
|
||||
{t("firstPage.login_button")}
|
||||
</Typography>
|
||||
</LinkRouting>
|
||||
</Container>
|
||||
<Container maxWidth={'xs'} sx={{
|
||||
backgroundColor: "primary.main",
|
||||
textAlign: "center",
|
||||
borderRadius: 2,
|
||||
padding: 1
|
||||
}}>
|
||||
<LinkRouting underline="none" color="inherit" href={'/register'}>
|
||||
<Typography variant="h6">
|
||||
{t("firstPage.register_button")}
|
||||
</Typography>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
|
||||
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
||||
import PersonAddIcon from "@mui/icons-material/PersonAdd";
|
||||
import {Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
@@ -10,6 +9,7 @@ import * as Yup from "yup";
|
||||
import SvgLogin from "@/core/components/svgs/SvgLogin";
|
||||
import {CenterLayout, FullPageLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
|
||||
|
||||
|
||||
const SendUserDataComponent = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
@@ -94,32 +94,16 @@ const SendUserDataComponent = ({
|
||||
flexDirection: {xs: "column-reverse", sm: "row"},
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{pr: {xs: 0, sm: 1}}}>
|
||||
<LinkRouting href={"/register"}>
|
||||
<Button
|
||||
fullWidth
|
||||
type="button"
|
||||
variant="outlined"
|
||||
size="large"
|
||||
endIcon={<PersonAddIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("LoginPage.button_make_account")}
|
||||
</Button>
|
||||
</LinkRouting>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} sx={{pl: {xs: 0, sm: 1}}}>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<FingerprintIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("LoginPage.button_request_verification")}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<FingerprintIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("LoginPage.button_request_verification")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
|
||||
@@ -1,131 +0,0 @@
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
||||
import {Button, Container, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
import * as Yup from "yup";
|
||||
import SvgLogin from "@/core/components/svgs/SvgLogin";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
|
||||
const RequestOtpComponent = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
PhoneNumber,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
phone_number: Yup.string().required(
|
||||
t("RegisterPage.error_message_phone_number")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = (values, props) => {
|
||||
requestServer(SEND_OTP_TOKEN, "post", {
|
||||
auth: false, data: {
|
||||
phone_number: values.phone_number,
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
}).catch(function (error) {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Stack
|
||||
sx={{width: "100%"}}
|
||||
alignItems='center'
|
||||
>
|
||||
<SvgLogin width={300} height={200}/>
|
||||
</Stack>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("Titles.title_register_page")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_phone_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.phone_number && props.errors.phone_number)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<FingerprintIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("RegisterPage.button_request_verification")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{margin: 2}}
|
||||
href={
|
||||
backUrlDecodedPath
|
||||
? decodeURIComponent(backUrlDecodedPath)
|
||||
: "/register"
|
||||
}
|
||||
>
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("RegisterPage.link_routing_register")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestOtpComponent;
|
||||
@@ -1,90 +0,0 @@
|
||||
import LinkRouting, {NextLinkComposed} from "@/core/components/LinkRouting";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import {Box, Button, Grid, Stack} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
import SvgDashboard from "@/core/components/svgs/SvgDashboard";
|
||||
|
||||
const RegisterComponent = () => {
|
||||
const t = useTranslations();
|
||||
const {isAuth} = useUser();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout spacing={3}>
|
||||
<SvgDashboard width={300} height={200}/>
|
||||
{isAuth ? (
|
||||
<Button
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Box>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={{xs: 1, sm: 0}}
|
||||
sx={{
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{px: {xs: 0, sm: 1}}}>
|
||||
<Button
|
||||
sx={{whiteSpace: "nowrap"}}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "register/navy",
|
||||
}}
|
||||
>
|
||||
{t("register_navy")}
|
||||
</Button>
|
||||
</Grid>
|
||||
{/*<Grid item xs={12} sm={6} sx={{px: {xs: 0, sm: 1}}}>*/}
|
||||
{/* <Button*/}
|
||||
{/* sx={{whiteSpace: "nowrap"}}*/}
|
||||
{/* variant="contained"*/}
|
||||
{/* size="large"*/}
|
||||
{/* component={NextLinkComposed}*/}
|
||||
{/* to={{*/}
|
||||
{/* pathname: "register/welfare-services",*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {t("register_welfare_services")}*/}
|
||||
{/* </Button>*/}
|
||||
{/*</Grid>*/}
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{margin: 2}}
|
||||
href={
|
||||
backUrlDecodedPath
|
||||
? decodeURIComponent(backUrlDecodedPath)
|
||||
: "/"
|
||||
}
|
||||
>
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("LoginPage.link_routing_main_page")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterComponent;
|
||||
@@ -1,176 +0,0 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {REGISTER} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import SvgRegister from "@/core/components/svgs/SvgRegister";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import AutoSubmit from "@/core/components/AutoSubmit";
|
||||
|
||||
const UserRegisterComponent = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {setToken} = useUser();
|
||||
const requestServer = useRequest();
|
||||
|
||||
const initialValues = {
|
||||
type_id: "1",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_verification_code")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_national_id")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = (values, props) => {
|
||||
requestServer(REGISTER, "post", {
|
||||
auth: false, data: {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
}).catch(function (error) {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Stack
|
||||
sx={{width: "100%"}}
|
||||
alignItems='center'
|
||||
>
|
||||
<SvgRegister width={300} height={200}/>
|
||||
</Stack>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("register_navy")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: {xs: "column", sm: "flex"},
|
||||
alignItems: "center",
|
||||
textAlign: {xs: "center", sm: "unset"},
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button" sx={{display: "block"}}>
|
||||
{t("LoginPage.sent_token_to")}: {PhoneNumber}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon/>}
|
||||
variant="outlined"
|
||||
sx={{whiteSpace: "nowrap", my: {xs: 1, sm: 0}}}
|
||||
onClick={() => setOtpToken(false)}
|
||||
>
|
||||
{t("LoginPage.change_phone_number")}
|
||||
</Button>
|
||||
</Box>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="verification_code"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_verification_code")}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_verification_code"
|
||||
)}
|
||||
type={"number"}
|
||||
error={
|
||||
!!(props.touched.verification_code && props.errors.verification_code)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
onChange={(e) => e.target.value.length <= 6 ? props.setFieldValue("verification_code", e.target.value) : ""}
|
||||
/>
|
||||
<AutoSubmit/>
|
||||
<ResendToken
|
||||
initialTimerValue={initialTimerValue}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
PhoneNumber={PhoneNumber}
|
||||
/>
|
||||
<Divider>
|
||||
<Chip label={t("RegisterPage.complete_information")}/>
|
||||
</Divider>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_national_id")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_national_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.national_id && props.errors.national_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserRegisterComponent;
|
||||
@@ -1,37 +0,0 @@
|
||||
import {useState} from "react";
|
||||
import RequestOtpComponent from "../RequestOtp";
|
||||
import UserRegisterComponent from "./UserRegister";
|
||||
|
||||
const NavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtpComponent
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegisterComponent
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NavyComponent;
|
||||
@@ -1,174 +0,0 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {REGISTER} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import SvgRegister from "@/core/components/svgs/SvgRegister";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
|
||||
const UserRegisterComponent = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {setToken} = useUser();
|
||||
const requestServer = useRequest();
|
||||
|
||||
const initialValues = {
|
||||
type_id: "2",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_verification_code")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_national_id")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = (values, props) => {
|
||||
requestServer(REGISTER, "post", {
|
||||
auth: false, data: {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
}).catch(function (error) {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Stack
|
||||
sx={{width: "100%"}}
|
||||
alignItems='center'
|
||||
>
|
||||
<SvgRegister width={300} height={200}/>
|
||||
</Stack>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("register_welfare_services")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: {xs: "column", sm: "flex"},
|
||||
alignItems: "center",
|
||||
textAlign: {xs: "center", sm: "unset"},
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button" sx={{display: "block"}}>
|
||||
{t("LoginPage.sent_token_to")}: {PhoneNumber}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon/>}
|
||||
variant="outlined"
|
||||
onClick={() => setOtpToken(false)}
|
||||
sx={{whiteSpace: "nowrap", my: {xs: 1, sm: 0}}}
|
||||
>
|
||||
{t("LoginPage.change_phone_number")}
|
||||
</Button>
|
||||
</Box>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="verification_code"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_verification_code")}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_verification_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.verification_code && props.errors.verification_code)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<ResendToken
|
||||
initialTimerValue={initialTimerValue}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
PhoneNumber={PhoneNumber}
|
||||
disabled={props.isSubmitting}
|
||||
/>
|
||||
<Divider>
|
||||
<Chip label={t("RegisterPage.complete_information")}/>
|
||||
</Divider>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_national_id")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_national_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.national_id && props.errors.national_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserRegisterComponent;
|
||||
@@ -1,37 +0,0 @@
|
||||
import {useState} from "react";
|
||||
import RequestOtpComponent from "../RequestOtp";
|
||||
import UserRegisterComponent from "./UserRegister";
|
||||
|
||||
const WelfareServicesComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtpComponent
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegisterComponent
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default WelfareServicesComponent;
|
||||
Reference in New Issue
Block a user