recode and add editor config
This commit is contained in:
Amirhossein Mahmoodi
@@ -1,7 +1,7 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
|
||||
const DashboardFirstComponent = () => {
|
||||
return <DashboardLayouts></DashboardLayouts>;
|
||||
return <DashboardLayouts></DashboardLayouts>;
|
||||
};
|
||||
|
||||
export default DashboardFirstComponent;
|
||||
|
||||
@@ -2,121 +2,122 @@ import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import {
|
||||
Avatar, Card,
|
||||
CardActions,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Collapse,
|
||||
Grid,
|
||||
IconButton,
|
||||
Stack,
|
||||
Typography
|
||||
Avatar,
|
||||
Card,
|
||||
CardActions,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Collapse,
|
||||
Grid,
|
||||
IconButton,
|
||||
Stack,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import { styled } from "@mui/material/styles";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import {styled} from "@mui/material/styles";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
|
||||
const ExpandMore = styled((props) => {
|
||||
const { expand, ...other } = props;
|
||||
return <IconButton {...other} />;
|
||||
})(({ theme, expand }) => ({
|
||||
transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
|
||||
marginLeft: "auto",
|
||||
transition: theme.transitions.create("transform", {
|
||||
duration: theme.transitions.duration.shortest,
|
||||
}),
|
||||
const {expand, ...other} = props;
|
||||
return <IconButton {...other} />;
|
||||
})(({theme, expand}) => ({
|
||||
transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
|
||||
marginLeft: "auto",
|
||||
transition: theme.transitions.create("transform", {
|
||||
duration: theme.transitions.duration.shortest,
|
||||
}),
|
||||
}));
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "جان دو",
|
||||
date: "۱۳۹۹/۰۴/۲۵",
|
||||
description:
|
||||
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
|
||||
},
|
||||
{
|
||||
name: "جین اسمیت",
|
||||
date: "۱۳۹۹/۰۴/۲۶",
|
||||
description: "نُلا ویته الیت لیبرو آ، آ فارِترا آوگوه.",
|
||||
},
|
||||
{
|
||||
name: "مایک جانسون",
|
||||
date: "۱۳۹۹/۰۴/۲۷",
|
||||
description:
|
||||
"دوئیس مولیس، است نُن کُمُدو لُکتوس، نیسی ارات پورتیتور لیگولا.",
|
||||
},
|
||||
{
|
||||
name: "جان دو",
|
||||
date: "۱۳۹۹/۰۴/۲۵",
|
||||
description:
|
||||
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.",
|
||||
},
|
||||
{
|
||||
name: "جین اسمیت",
|
||||
date: "۱۳۹۹/۰۴/۲۶",
|
||||
description: "نُلا ویته الیت لیبرو آ، آ فارِترا آوگوه.",
|
||||
},
|
||||
{
|
||||
name: "مایک جانسون",
|
||||
date: "۱۳۹۹/۰۴/۲۷",
|
||||
description:
|
||||
"دوئیس مولیس، است نُن کُمُدو لُکتوس، نیسی ارات پورتیتور لیگولا.",
|
||||
},
|
||||
];
|
||||
|
||||
const DashboardLoanFollowUpComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { token } = useUser();
|
||||
const t = useTranslations();
|
||||
const {token} = useUser();
|
||||
|
||||
const [expanded, setExpanded] = useState([]);
|
||||
const [expanded, setExpanded] = useState([]);
|
||||
|
||||
const handleExpandClick = (index) => {
|
||||
setExpanded((prevExpanded) => {
|
||||
const newExpanded = [...prevExpanded];
|
||||
newExpanded[index] = !newExpanded[index];
|
||||
return newExpanded;
|
||||
});
|
||||
};
|
||||
const handleExpandClick = (index) => {
|
||||
setExpanded((prevExpanded) => {
|
||||
const newExpanded = [...prevExpanded];
|
||||
newExpanded[index] = !newExpanded[index];
|
||||
return newExpanded;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 4,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
columnSpacing={2}
|
||||
rowSpacing={2}
|
||||
sx={{ alignItems: "start", justifyContent: "center" }}
|
||||
>
|
||||
{data.map((item, index) => (
|
||||
<Grid item xs={12} md={6} lg={4} key={index}>
|
||||
<Card sx={{ width: "100%" }}>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar
|
||||
sx={{ bgcolor: "primary.main" }}
|
||||
aria-label="recipe"
|
||||
></Avatar>
|
||||
}
|
||||
title={item.name}
|
||||
subheader={item.date}
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
متن تست
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions disableSpacing>
|
||||
<ExpandMore
|
||||
expand={expanded[index]}
|
||||
onClick={() => handleExpandClick(index)}
|
||||
aria-expanded={expanded[index]}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon />
|
||||
</ExpandMore>
|
||||
</CardActions>
|
||||
<Collapse in={expanded[index]} timeout="auto" unmountOnExit>
|
||||
<CardContent>
|
||||
<Typography paragraph>اطلاعات تکمیلی:</Typography>
|
||||
<Typography paragraph>{item.description}</Typography>
|
||||
</CardContent>
|
||||
</Collapse>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 4,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
columnSpacing={2}
|
||||
rowSpacing={2}
|
||||
sx={{alignItems: "start", justifyContent: "center"}}
|
||||
>
|
||||
{data.map((item, index) => (
|
||||
<Grid item xs={12} md={6} lg={4} key={index}>
|
||||
<Card sx={{width: "100%"}}>
|
||||
<CardHeader
|
||||
avatar={
|
||||
<Avatar
|
||||
sx={{bgcolor: "primary.main"}}
|
||||
aria-label="recipe"
|
||||
></Avatar>
|
||||
}
|
||||
title={item.name}
|
||||
subheader={item.date}
|
||||
/>
|
||||
<CardContent>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
متن تست
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardActions disableSpacing>
|
||||
<ExpandMore
|
||||
expand={expanded[index]}
|
||||
onClick={() => handleExpandClick(index)}
|
||||
aria-expanded={expanded[index]}
|
||||
aria-label="show more"
|
||||
>
|
||||
<ExpandMoreIcon/>
|
||||
</ExpandMore>
|
||||
</CardActions>
|
||||
<Collapse in={expanded[index]} timeout="auto" unmountOnExit>
|
||||
<CardContent>
|
||||
<Typography paragraph>اطلاعات تکمیلی:</Typography>
|
||||
<Typography paragraph>{item.description}</Typography>
|
||||
</CardContent>
|
||||
</Collapse>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardLoanFollowUpComponent;
|
||||
|
||||
@@ -2,490 +2,487 @@ 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 {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 {Box, Button, Stack, TextField} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useEffect, useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const NavyForm = () => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { token } = useUser();
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const {token} = useUser();
|
||||
|
||||
// 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(directionApp, t, error.response);
|
||||
});
|
||||
}, []);
|
||||
// end get province list
|
||||
// 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(directionApp, 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);
|
||||
// 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
|
||||
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: "",
|
||||
vehicle_type: "",
|
||||
plate_number: "",
|
||||
province: "",
|
||||
navgan_id: "",
|
||||
national_code: "",
|
||||
shenasname_id: "",
|
||||
national_card_img: null,
|
||||
shenasname_img: null,
|
||||
};
|
||||
// end initial values
|
||||
// initial values
|
||||
const initialValues = {
|
||||
name: "",
|
||||
phone_number: "",
|
||||
vehicle_type: "",
|
||||
plate_number: "",
|
||||
province: "",
|
||||
navgan_id: "",
|
||||
national_code: "",
|
||||
shenasname_id: "",
|
||||
national_card_img: null,
|
||||
shenasname_img: null,
|
||||
};
|
||||
// end initial values
|
||||
|
||||
// validation
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
phone_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
vehicle_type: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
plate_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
navgan_id: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
province: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
national_code: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
shenasname_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
});
|
||||
// end validation
|
||||
// validation
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
phone_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
vehicle_type: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
plate_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
navgan_id: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
province: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
national_code: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
shenasname_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
});
|
||||
// end validation
|
||||
|
||||
// submit
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, 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);
|
||||
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);
|
||||
// submit
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, 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);
|
||||
formData.append("navgan_id", values.navgan_id);
|
||||
formData.append("national_code", values.national_code);
|
||||
formData.append("shenasname_id", values.shenasname_id);
|
||||
if (values.shenasname_img != null)
|
||||
formData.append("shenasname_image", values.shenasname_img);
|
||||
if (values.national_card_img != null)
|
||||
formData.append("national_card_image", values.national_card_img);
|
||||
|
||||
await axios
|
||||
.post(SEND_LOAN_REQUEST_NAVGAN, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
// end submit
|
||||
await axios
|
||||
.post(SEND_LOAN_REQUEST_NAVGAN, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
// end submit
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
p: 1,
|
||||
width: "100%",
|
||||
}}
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="name"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_name")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_name")}
|
||||
type={"text"}
|
||||
error={props.touched.name && props.errors.name ? true : false}
|
||||
fullWidth
|
||||
helperText={props.touched.name ? props.errors.name : null}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_phone_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.phone_number && props.errors.phone_number
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="vehicle_type"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_vehicle_type")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_vehicle_type"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.vehicle_type && props.errors.vehicle_type
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.vehicle_type
|
||||
? props.errors.vehicle_type
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="plate_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_plate_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.plate_number && props.errors.plate_number
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.plate_number
|
||||
? props.errors.plate_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
name="province"
|
||||
label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
|
||||
size="small"
|
||||
selectType="province"
|
||||
component={SelectBox}
|
||||
selectors={provinceList}
|
||||
select={props.values.province}
|
||||
setFieldValue={props.setFieldValue}
|
||||
setFieldTouched={props.setFieldTouched}
|
||||
error={
|
||||
props.touched.gender && props.errors.province ? true : false
|
||||
}
|
||||
helperText={
|
||||
props.touched.gender ? 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"
|
||||
label={t("LoanRequest.text_field_navgan_id")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.navgan_id && props.errors.navgan_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.navgan_id ? props.errors.navgan_id : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="national_code"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_national_code")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.national_code && props.errors.national_code
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_code
|
||||
? props.errors.national_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="shenasname_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.shenasname_id && props.errors.shenasname_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.shenasname_id
|
||||
? props.errors.shenasname_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageShenasname}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeShenasname(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageShenasname}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="shenasname_img"
|
||||
fileType={fileTypeShenasname}
|
||||
fileName={fileNameShenasname}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_shenasname_image")}
|
||||
/>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageNationalCard}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeNationalCard(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageNationalCard}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="national_card_img"
|
||||
fileType={fileTypeNationalCard}
|
||||
fileName={fileNameNationalCard}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_national_card_image")}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
width: { xs: "100%", sm: "30%", md: "25%" },
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<DataSaverOnIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
{(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"
|
||||
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"
|
||||
label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
|
||||
size="small"
|
||||
selectType="province"
|
||||
component={SelectBox}
|
||||
selectors={provinceList}
|
||||
select={props.values.province}
|
||||
setFieldValue={props.setFieldValue}
|
||||
setFieldTouched={props.setFieldTouched}
|
||||
error={
|
||||
props.touched.gender && props.errors.province ? true : false
|
||||
}
|
||||
helperText={
|
||||
props.touched.gender ? 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"
|
||||
label={t("LoanRequest.text_field_navgan_id")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.navgan_id && props.errors.navgan_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.navgan_id ? props.errors.navgan_id : null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="national_code"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_national_code")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.national_code && props.errors.national_code
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_code
|
||||
? props.errors.national_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="shenasname_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.shenasname_id && props.errors.shenasname_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.shenasname_id
|
||||
? props.errors.shenasname_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageShenasname}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeShenasname(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageShenasname}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="shenasname_img"
|
||||
fileType={fileTypeShenasname}
|
||||
fileName={fileNameShenasname}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_shenasname_image")}
|
||||
/>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageNationalCard}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeNationalCard(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageNationalCard}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="national_card_img"
|
||||
fileType={fileTypeNationalCard}
|
||||
fileName={fileNameNationalCard}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_national_card_image")}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
width: {xs: "100%", sm: "30%", md: "25%"},
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<DataSaverOnIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("LoanRequest.button_submit")}
|
||||
</Button>
|
||||
</Box>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default NavyForm;
|
||||
|
||||
@@ -1,435 +1,435 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import UploadSystem from "@/core/components/UploadSystem";
|
||||
import { SEND_LOAN_REQUEST_WELFARE } from "@/core/data/apiRoutes";
|
||||
import {SEND_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, Stack, TextField } from "@mui/material";
|
||||
import {Box, Button, Stack, TextField} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useState } from "react";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useState} from "react";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const WelfareServicesForm = () => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { token } = useUser();
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const {token} = useUser();
|
||||
|
||||
// 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);
|
||||
// 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
|
||||
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, validation and request action of form
|
||||
const initialValues = {
|
||||
name: "",
|
||||
phone_number: "",
|
||||
vehicle_type: "",
|
||||
plate_number: "",
|
||||
province: "",
|
||||
national_code: "",
|
||||
shenasname_id: "",
|
||||
national_card_img: null,
|
||||
shenasname_img: null,
|
||||
};
|
||||
// initial values, validation and request action of form
|
||||
const initialValues = {
|
||||
name: "",
|
||||
phone_number: "",
|
||||
vehicle_type: "",
|
||||
plate_number: "",
|
||||
province: "",
|
||||
national_code: "",
|
||||
shenasname_id: "",
|
||||
national_card_img: null,
|
||||
shenasname_img: null,
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
phone_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
vehicle_type: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
plate_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
province: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
national_code: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
shenasname_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
name: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
phone_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
vehicle_type: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
plate_number: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
province: Yup.string().required(t("LoanRequest.error_message_required")),
|
||||
national_code: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
shenasname_id: Yup.string().required(
|
||||
t("LoanRequest.error_message_required")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, 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);
|
||||
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);
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, 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);
|
||||
formData.append("national_code", values.national_code);
|
||||
formData.append("shenasname_id", values.shenasname_id);
|
||||
if (values.shenasname_img != null)
|
||||
formData.append("shenasname_image", values.shenasname_img);
|
||||
if (values.national_card_img != null)
|
||||
formData.append("national_card_image", values.national_card_img);
|
||||
|
||||
await axios
|
||||
.post(SEND_LOAN_REQUEST_WELFARE, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
// end initial values, validation and request action of form
|
||||
await axios
|
||||
.post(SEND_LOAN_REQUEST_WELFARE, formData, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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%",
|
||||
}}
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="name"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_name")}
|
||||
placeholder={t("LoanRequest.text_field_enter_your_name")}
|
||||
type={"text"}
|
||||
error={props.touched.name && props.errors.name ? true : false}
|
||||
fullWidth
|
||||
helperText={props.touched.name ? props.errors.name : null}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_phone_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.phone_number && props.errors.phone_number
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "start",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="vehicle_type"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_vehicle_type")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_vehicle_type"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.vehicle_type && props.errors.vehicle_type
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.vehicle_type
|
||||
? props.errors.vehicle_type
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="plate_number"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_plate_number")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.plate_number && props.errors.plate_number
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.plate_number
|
||||
? props.errors.plate_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="province"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
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="national_code"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_national_code")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.national_code && props.errors.national_code
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_code
|
||||
? props.errors.national_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: { xs: 0, sm: 2 },
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{ width: "100%" }}
|
||||
name="shenasname_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.shenasname_id && props.errors.shenasname_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.shenasname_id
|
||||
? props.errors.shenasname_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageShenasname}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeShenasname(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageShenasname}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="shenasname_img"
|
||||
fileType={fileTypeShenasname}
|
||||
fileName={fileNameShenasname}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_shenasname_image")}
|
||||
/>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageNationalCard}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeNationalCard(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageNationalCard}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="national_card_img"
|
||||
fileType={fileTypeNationalCard}
|
||||
fileName={fileNameNationalCard}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_national_card_image")}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
my: 2,
|
||||
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>
|
||||
);
|
||||
{(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"
|
||||
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
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="province"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
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="national_code"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_national_code")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_national_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.national_code && props.errors.national_code
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_code
|
||||
? props.errors.national_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
mx: {xs: 0, sm: 2},
|
||||
my: 2,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
as={TextField}
|
||||
sx={{width: "100%"}}
|
||||
name="shenasname_id"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_shenasname_id")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_shenasname_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
props.touched.shenasname_id && props.errors.shenasname_id
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.shenasname_id
|
||||
? props.errors.shenasname_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageShenasname}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeShenasname(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageShenasname}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="shenasname_img"
|
||||
fileType={fileTypeShenasname}
|
||||
fileName={fileNameShenasname}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_shenasname_image")}
|
||||
/>
|
||||
<UploadSystem
|
||||
selectedImage={selectedImageNationalCard}
|
||||
handleUploadChange={(e) =>
|
||||
handleUploadChangeNationalCard(e, props.setFieldValue)
|
||||
}
|
||||
setselectedImage={setSelectedImageNationalCard}
|
||||
setFieldValue={props.setFieldValue}
|
||||
fieldname="national_card_img"
|
||||
fileType={fileTypeNationalCard}
|
||||
fileName={fileNameNationalCard}
|
||||
imageAlt={t("app_name")}
|
||||
imageSize={[300 /*width*/, 150 /*height*/]}
|
||||
label={t("LoanRequest.file_field_national_card_image")}
|
||||
/>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
mx: "auto",
|
||||
my: 2,
|
||||
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 WelfareServicesForm;
|
||||
|
||||
@@ -3,29 +3,29 @@ import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import NavyForm from "./NavyForm";
|
||||
import WelfareServicesForm from "./WelfareServicesForm";
|
||||
import { Divider, Chip, Box } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Box, Chip, Divider} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
const DashboardLoanRequestComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { user } = useUser();
|
||||
const t = useTranslations();
|
||||
const {user} = useUser();
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Box sx={{ width: "80%", my: 2 }}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={`${t("LoanRequest.loan_request_page")} | ${
|
||||
user.type_name
|
||||
}`}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
{user.type_id == 1 ? <NavyForm /> : <WelfareServicesForm />}
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<CenterLayout>
|
||||
<Box sx={{width: "80%", my: 2}}>
|
||||
<Divider>
|
||||
<Chip
|
||||
label={`${t("LoanRequest.loan_request_page")} | ${
|
||||
user.type_name
|
||||
}`}
|
||||
/>
|
||||
</Divider>
|
||||
</Box>
|
||||
{user.type_id == 1 ? <NavyForm/> : <WelfareServicesForm/>}
|
||||
</CenterLayout>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardLoanRequestComponent;
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
import dahsboardImage from "&/images/dashboard.svg";
|
||||
import { NextLinkComposed } from "@/core/components/LinkRouting";
|
||||
import {NextLinkComposed} from "@/core/components/LinkRouting";
|
||||
import StyledImage from "@/core/components/StyledImage";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import { Button, Typography } from "@mui/material";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Button, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
const FirstComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { isAuth } = useUser();
|
||||
const t = useTranslations();
|
||||
const {isAuth} = useUser();
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{ p: 1 }}>
|
||||
<CenterLayout spacing={3}>
|
||||
<StyledImage
|
||||
src={dahsboardImage}
|
||||
alt={t("app_name")}
|
||||
width={300}
|
||||
height={200}
|
||||
priority
|
||||
/>
|
||||
<Typography variant="h5" sx={{ textAlign: "center" }}>
|
||||
{t("app_name")}
|
||||
</Typography>
|
||||
{isAuth ? (
|
||||
<Button
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
sx={{ whiteSpace: "nowrap" }}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/login",
|
||||
}}
|
||||
>
|
||||
{t("login_user_panel")}
|
||||
</Button>
|
||||
)}
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout spacing={3}>
|
||||
<StyledImage
|
||||
src={dahsboardImage}
|
||||
alt={t("app_name")}
|
||||
width={300}
|
||||
height={200}
|
||||
priority
|
||||
/>
|
||||
<Typography variant="h5" sx={{textAlign: "center"}}>
|
||||
{t("app_name")}
|
||||
</Typography>
|
||||
{isAuth ? (
|
||||
<Button
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
sx={{whiteSpace: "nowrap"}}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/login",
|
||||
}}
|
||||
>
|
||||
{t("login_user_panel")}
|
||||
</Button>
|
||||
)}
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default FirstComponent;
|
||||
|
||||
@@ -1,167 +1,158 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { LOGIN } from "@/core/data/apiRoutes";
|
||||
import {LOGIN} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {Box, Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const SendToken = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
timer,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { setToken } = useUser();
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
timer,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const {setToken} = useUser();
|
||||
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
verification_code: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("LoginPage.error_message_required")
|
||||
),
|
||||
});
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
verification_code: "",
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("LoginPage.error_message_required")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(LOGIN, {
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(LOGIN, {
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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 }}>
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/login.svg"
|
||||
priority
|
||||
alt={t("app_name")}
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("login")}
|
||||
</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 } }}
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("LoginPage.button_submit")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ResendToken
|
||||
initialTimerValue={initialTimerValue}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
PhoneNumber={PhoneNumber}
|
||||
/>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/login.svg"
|
||||
priority
|
||||
alt={t("app_name")}
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("login")}
|
||||
</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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("LoginPage.button_submit")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ResendToken
|
||||
initialTimerValue={initialTimerValue}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
PhoneNumber={PhoneNumber}
|
||||
/>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default SendToken;
|
||||
|
||||
@@ -1,173 +1,164 @@
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||
import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
||||
import PersonAddIcon from "@mui/icons-material/PersonAdd";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Grid,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {Box, Button, Container, Grid, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const SendUserData = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
PhoneNumber,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
PhoneNumber,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
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("LoginPage.error_message_required")),
|
||||
});
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
phone_number: Yup.string().required(t("LoginPage.error_message_required")),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(SEND_OTP_TOKEN, {
|
||||
phone_number: values.phone_number,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(SEND_OTP_TOKEN, {
|
||||
phone_number: values.phone_number,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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 }}>
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/login.svg"
|
||||
priority
|
||||
alt={t("app_name")}
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("Titles.title_login_page")}
|
||||
</Typography>
|
||||
<StyledForm sx={{ width: "100%" }}>
|
||||
<Stack spacing={3} sx={{ p: 2 }}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"LoginPage.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
|
||||
}
|
||||
/>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={{ xs: 1, sm: 0 }}
|
||||
sx={{
|
||||
flexDirection: { xs: "column-reverse", sm: "row" },
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{ pr: { xs: 0, sm: 1 } }}>
|
||||
<LinkRouting href={"/register"}>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="outlined"
|
||||
size="large"
|
||||
endIcon={<PersonAddIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{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 ? true : false}
|
||||
>
|
||||
{t("LoginPage.button_request_verification")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{ margin: 2 }}
|
||||
href={
|
||||
backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
|
||||
}
|
||||
>
|
||||
{t("LoginPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("LoginPage.link_routing_previuos_page")
|
||||
: t("LoginPage.link_routing_main_page")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
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}}>
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/login.svg"
|
||||
priority
|
||||
alt={t("app_name")}
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("Titles.title_login_page")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"LoginPage.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
|
||||
}
|
||||
/>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={{xs: 1, sm: 0}}
|
||||
sx={{
|
||||
flexDirection: {xs: "column-reverse", sm: "row"},
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{pr: {xs: 0, sm: 1}}}>
|
||||
<LinkRouting href={"/register"}>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="outlined"
|
||||
size="large"
|
||||
endIcon={<PersonAddIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{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 ? true : false}
|
||||
>
|
||||
{t("LoginPage.button_request_verification")}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{margin: 2}}
|
||||
href={
|
||||
backUrlDecodedPath ? decodeURIComponent(backUrlDecodedPath) : "/"
|
||||
}
|
||||
>
|
||||
{t("LoginPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("LoginPage.link_routing_previuos_page")
|
||||
: t("LoginPage.link_routing_main_page")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default SendUserData;
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import SendToken from "./SendToken";
|
||||
import SendUserData from "./SendUserData";
|
||||
|
||||
const LoginComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
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
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<SendUserData
|
||||
setOtpToken={setOtpToken}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
PhoneNumber={PhoneNumber}
|
||||
initialTimerValue={initialTimerValue}
|
||||
setTimer={setTimer}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<SendToken
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
setTimer={setTimer}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<SendUserData
|
||||
setOtpToken={setOtpToken}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
PhoneNumber={PhoneNumber}
|
||||
initialTimerValue={initialTimerValue}
|
||||
setTimer={setTimer}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<SendToken
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
setTimer={setTimer}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default LoginComponent;
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import { Box, Button, Typography } from "@mui/material";
|
||||
import { NextLinkComposed } from "@/core/components/LinkRouting";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Box, Button, Typography} from "@mui/material";
|
||||
import {NextLinkComposed} from "@/core/components/LinkRouting";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
|
||||
const NotFoundComponent = () => {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<FullPageLayout sx={{ p: 1 }}>
|
||||
<CenterLayout>
|
||||
<Box sx={{ position: "relative", width: "100%", height: 250 }}>
|
||||
<Image
|
||||
fill
|
||||
src="/images/not-found.svg"
|
||||
alt="not found image"
|
||||
priority
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h6" textAlign="center">
|
||||
صفحه ای با این عنوان یافت نشد
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
رفتن به داشبورد
|
||||
</Button>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Box sx={{position: "relative", width: "100%", height: 250}}>
|
||||
<Image
|
||||
fill
|
||||
src="/images/not-found.svg"
|
||||
alt="not found image"
|
||||
priority
|
||||
/>
|
||||
</Box>
|
||||
<Typography margin={2} variant="h6" textAlign="center">
|
||||
صفحه ای با این عنوان یافت نشد
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
رفتن به داشبورد
|
||||
</Button>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFoundComponent;
|
||||
|
||||
@@ -1,151 +1,143 @@
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { SEND_OTP_TOKEN } from "@/core/data/apiRoutes";
|
||||
import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
Paper,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {Box, Button, Container, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const RequestOtp = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
PhoneNumber,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
PhoneNumber,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
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_required")
|
||||
),
|
||||
});
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
phone_number: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(SEND_OTP_TOKEN, {
|
||||
phone_number: values.phone_number,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
await axios
|
||||
.post(SEND_OTP_TOKEN, {
|
||||
phone_number: values.phone_number,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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 }}>
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/login.svg"
|
||||
priority
|
||||
alt={t("app_name")}
|
||||
/>
|
||||
</Box>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<FingerprintIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
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}}>
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/login.svg"
|
||||
priority
|
||||
alt={t("app_name")}
|
||||
/>
|
||||
</Box>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<FingerprintIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{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 RequestOtp;
|
||||
|
||||
@@ -1,98 +1,97 @@
|
||||
import dahsboardImage from "&/images/dashboard.svg";
|
||||
import LinkRouting from "@/core/components/LinkRouting";
|
||||
import { NextLinkComposed } from "@/core/components/LinkRouting";
|
||||
import LinkRouting, {NextLinkComposed} from "@/core/components/LinkRouting";
|
||||
import StyledImage from "@/core/components/StyledImage";
|
||||
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 {Box, Button, Grid, Stack} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
|
||||
const RegisterComponent = () => {
|
||||
const t = useTranslations();
|
||||
const { isAuth } = useUser();
|
||||
const t = useTranslations();
|
||||
const {isAuth} = useUser();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{ p: 1 }}>
|
||||
<CenterLayout spacing={3}>
|
||||
<StyledImage
|
||||
src={dahsboardImage}
|
||||
alt={t("app_name")}
|
||||
width={300}
|
||||
height={200}
|
||||
priority
|
||||
/>
|
||||
{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",
|
||||
}}
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout spacing={3}>
|
||||
<StyledImage
|
||||
src={dahsboardImage}
|
||||
alt={t("app_name")}
|
||||
width={300}
|
||||
height={200}
|
||||
priority
|
||||
/>
|
||||
{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)
|
||||
: "/login"
|
||||
}
|
||||
>
|
||||
{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)
|
||||
: "/login"
|
||||
}
|
||||
>
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("RegisterPage.link_routing_login")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("RegisterPage.link_routing_login")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterComponent;
|
||||
|
||||
@@ -1,222 +1,212 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { REGISTER } from "@/core/data/apiRoutes";
|
||||
import {REGISTER} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
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 {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
import * as Yup from "yup";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
|
||||
const UserRegister = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { setToken } = useUser();
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const {setToken} = useUser();
|
||||
|
||||
const initialValues = {
|
||||
type_id: "1",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
navgan_id: "",
|
||||
};
|
||||
const initialValues = {
|
||||
type_id: "1",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
navgan_id: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
navgan_id: Yup.string().required(t("RegisterPage.error_message_required")),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
navgan_id: Yup.string().required(t("RegisterPage.error_message_required")),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
console.log(initialValues);
|
||||
await axios
|
||||
.post(REGISTER, {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
navgan_id: values.navgan_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
console.log(initialValues);
|
||||
await axios
|
||||
.post(REGISTER, {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
navgan_id: values.navgan_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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 }}>
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/register.svg"
|
||||
alt={t("app_name")}
|
||||
priority
|
||||
/>
|
||||
</Box>
|
||||
<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)}
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="navgan_id"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_navgan_id")}
|
||||
placeholder={t(
|
||||
"RegisterPage.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
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/register.svg"
|
||||
alt={t("app_name")}
|
||||
priority
|
||||
/>
|
||||
</Box>
|
||||
<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={"text"}
|
||||
error={
|
||||
props.touched.verification_code &&
|
||||
props.errors.verification_code
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="navgan_id"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_navgan_id")}
|
||||
placeholder={t(
|
||||
"RegisterPage.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
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserRegister;
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import RequestOtp from "../RequestOtp";
|
||||
import UserRegister from "./UserRegister";
|
||||
|
||||
const NavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
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
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtp
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegister
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtp
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegister
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NavyComponent;
|
||||
|
||||
@@ -1,198 +1,188 @@
|
||||
import Notifications from "@/core/components/notifications";
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import { REGISTER } from "@/core/data/apiRoutes";
|
||||
import {REGISTER} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import useDirection from "@/lib/app/hooks/useDirection";
|
||||
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 {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import axios from "axios";
|
||||
import { Field, Formik } from "formik";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import Image from "next/image";
|
||||
import * as Yup from "yup";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
|
||||
const UserRegister = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const { directionApp } = useDirection();
|
||||
const { setToken } = useUser();
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {directionApp} = useDirection();
|
||||
const {setToken} = useUser();
|
||||
|
||||
const initialValues = {
|
||||
type_id: "2",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
};
|
||||
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_required")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
});
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_required")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
console.log(initialValues);
|
||||
await axios
|
||||
.post(REGISTER, {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
const handleSubmit = async (values, props) => {
|
||||
Notifications(directionApp, t, undefined);
|
||||
console.log(initialValues);
|
||||
await axios
|
||||
.post(REGISTER, {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
})
|
||||
.then(function (response) {
|
||||
Notifications(directionApp, t, response);
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
})
|
||||
.catch(function (error) {
|
||||
Notifications(directionApp, t, error.response);
|
||||
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 }}>
|
||||
<Box
|
||||
sx={{ position: "relative", width: "100%", height: 200 }}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/register.svg"
|
||||
alt={t("app_name")}
|
||||
priority
|
||||
/>
|
||||
</Box>
|
||||
<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 } }}
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon />}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{position: "relative", width: "100%", height: 200}}
|
||||
>
|
||||
<Image
|
||||
fill
|
||||
src="/images/register.svg"
|
||||
alt={t("app_name")}
|
||||
priority
|
||||
/>
|
||||
</Box>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<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
|
||||
? true
|
||||
: false
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting ? true : false}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserRegister;
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import { useState } from "react";
|
||||
import {useState} from "react";
|
||||
import RequestOtp from "../RequestOtp";
|
||||
import UserRegister from "./UserRegister";
|
||||
|
||||
const NavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
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
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtp
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegister
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtp
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegister
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NavyComponent;
|
||||
|
||||
Reference in New Issue
Block a user