401 lines
12 KiB
JavaScript
401 lines
12 KiB
JavaScript
import Notifications from "@/core/components/notifications";
|
|
import StyledForm from "@/core/components/StyledForm";
|
|
import useDirection from "@/lib/app/hooks/useDirection";
|
|
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
|
|
import { Box, Button, Stack, TextField } from "@mui/material";
|
|
import { Field, Formik } from "formik";
|
|
import { useTranslations } from "next-intl";
|
|
import Image from "next/image";
|
|
|
|
const NavyForm = () => {
|
|
const t = useTranslations();
|
|
const { directionApp } = useDirection();
|
|
|
|
const initialValues = {
|
|
name: "",
|
|
phone_number: "",
|
|
vehicle_type: "",
|
|
plate_number: "",
|
|
province: "",
|
|
navgan_id: "",
|
|
national_code: "",
|
|
shenasname_id: "",
|
|
national_card_img: "",
|
|
shenasname_img: "",
|
|
};
|
|
|
|
const handleSubmit = async (values, props) => {
|
|
Notifications(directionApp, t, undefined);
|
|
await axios
|
|
.post(SEND_LOAN_REQUEST_NAVGAN, {
|
|
name: values.name,
|
|
phone_number: values.phone_number,
|
|
vehicle_type: values.vehicle_type,
|
|
plate_number: values.plate_number,
|
|
province_id: values.province,
|
|
navgan_id: values.navgan_id,
|
|
national_code: values.national_code,
|
|
shenasname_id: values.shenasname_id,
|
|
})
|
|
.then(function (response) {
|
|
Notifications(directionApp, t, response);
|
|
})
|
|
.catch(function (error) {
|
|
Notifications(directionApp, t, error.response);
|
|
props.setSubmitting(false);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Formik initialValues={initialValues} onSubmit={handleSubmit}>
|
|
{(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%",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
mx: { xs: 0, sm: 2 },
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
as={TextField}
|
|
sx={{ width: "100%" }}
|
|
name="name"
|
|
variant="outlined"
|
|
size="small"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
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"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
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"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
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"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
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
|
|
as={TextField}
|
|
sx={{ width: "100%" }}
|
|
name="province"
|
|
variant="outlined"
|
|
size="small"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
label={t("LoanRequest.text_field_province")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_province")}
|
|
type={"text"}
|
|
error={
|
|
props.touched.province && props.errors.province
|
|
? true
|
|
: false
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.province ? props.errors.province : 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"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
label={t("LoanRequest.text_field_navgan_id")}
|
|
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
|
|
type={"text"}
|
|
error={
|
|
props.touched.navgan_id && props.errors.navgan_id
|
|
? true
|
|
: false
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.navgan_id ? props.errors.navgan_id : null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
mx: { xs: 0, sm: 2 },
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
as={TextField}
|
|
sx={{ width: "100%" }}
|
|
name="national_code"
|
|
variant="outlined"
|
|
size="small"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
label={t("LoanRequest.text_field_national_code")}
|
|
placeholder={t(
|
|
"LoanRequest.text_field_enter_your_national_code"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
props.touched.national_code && props.errors.national_code
|
|
? true
|
|
: false
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.national_code
|
|
? props.errors.national_code
|
|
: null
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
mx: { xs: 0, sm: 2 },
|
|
my: 2,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Field
|
|
as={TextField}
|
|
sx={{ width: "100%" }}
|
|
name="shenasname_id"
|
|
variant="outlined"
|
|
size="small"
|
|
InputProps={{
|
|
readOnly: true,
|
|
}}
|
|
label={t("LoanRequest.text_field_shenasname_id")}
|
|
placeholder={t(
|
|
"LoanRequest.text_field_enter_your_shenasname_id"
|
|
)}
|
|
type={"text"}
|
|
error={
|
|
props.touched.shenasname_id &&
|
|
props.errors.shenasname_id
|
|
? true
|
|
: false
|
|
}
|
|
fullWidth
|
|
helperText={
|
|
props.touched.shenasname_id
|
|
? props.errors.shenasname_id
|
|
: null
|
|
}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: { xs: "column", sm: "row" },
|
|
alignItems: "center",
|
|
justifyContent: "space-around",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Box>
|
|
<Image
|
|
width={300}
|
|
height={300}
|
|
src="/images/login.svg"
|
|
priority
|
|
alt={t("app_name")}
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<Image
|
|
width={300}
|
|
height={300}
|
|
src="/images/login.svg"
|
|
priority
|
|
alt={t("app_name")}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: { xs: "column", sm: "row" },
|
|
alignItems: "center",
|
|
mx: "auto",
|
|
width: { xs: "100%", sm: "30%", md: "25%" },
|
|
}}
|
|
>
|
|
<Button
|
|
fullWidth
|
|
type="submit"
|
|
variant="contained"
|
|
size="large"
|
|
endIcon={<DataSaverOnIcon />}
|
|
disabled={props.isSubmitting ? true : false}
|
|
>
|
|
{t("LoanRequest.button_submit")}
|
|
</Button>
|
|
</Box>
|
|
</StyledForm>
|
|
</Stack>
|
|
)}
|
|
</Formik>
|
|
);
|
|
};
|
|
|
|
export default NavyForm;
|