merging feature to develop
This commit is contained in:
AmirHossein Mahmoodi
@@ -1,14 +1,12 @@
|
||||
import DashboardLayouts from "@/layouts/dashboardLayouts";
|
||||
import {
|
||||
Grid,
|
||||
Stack,
|
||||
} from "@mui/material";
|
||||
import {useEffect, useState} from "react";
|
||||
import {SHOW_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
|
||||
import useLoading from "@/lib/app/hooks/useLoading";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
import moment from "jalali-moment";
|
||||
import RequestCard from "@/components/dashboard/navgan/followUp-loan/RequestCard";
|
||||
import {useLoading, useRequest} from "@witel/webapp-builder";
|
||||
|
||||
const LoanFollowUpComponent = () => {
|
||||
const requestServer = useRequest();
|
||||
@@ -34,7 +32,6 @@ const LoanFollowUpComponent = () => {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DashboardLayouts>
|
||||
<Stack
|
||||
spacing={2}
|
||||
sx={{
|
||||
@@ -53,7 +50,6 @@ const LoanFollowUpComponent = () => {
|
||||
))}
|
||||
</Grid>
|
||||
</Stack>
|
||||
</DashboardLayouts>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,64 +1,48 @@
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useEffect, useState} from "react";
|
||||
import {useRequest} from "@witel/webapp-builder";
|
||||
import TimelineManager from "@/core/components/timelines/timelineManager";
|
||||
import moment from "jalali-moment";
|
||||
import {Timeline} from "@mui/lab";
|
||||
import {LinearProgress} from "@mui/material";
|
||||
import {useConfig} from "@witel/webapp-builder";
|
||||
|
||||
const TimeLineDetails = () => {
|
||||
const t = useTranslations();
|
||||
const request = useRequest({notification: false, auth: false})
|
||||
const {config} = useConfig()
|
||||
const [timeLineList, setTimeLineList] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
setLoading(true)
|
||||
request(process.env.NEXT_PUBLIC_CONFIG_APP_URL, 'get').then(res => {
|
||||
let tempArr = []
|
||||
for (const timeLine of res.data.time_lines.navgan_first_page) {
|
||||
let temp = {}
|
||||
temp['label'] = timeLine.label
|
||||
temp['date'] = moment(timeLine.date.from, 'jYYYY/jMM/jDD').locale('fa').format('jD jMMMM')
|
||||
const fromDate = moment(timeLine.date.from, 'jYYYY/jMM/jDD')
|
||||
const toDate = moment(timeLine.date.to, 'jYYYY/jMM/jDD')
|
||||
const today = moment()
|
||||
if (today.isBetween(fromDate, toDate, null, '[]')) {
|
||||
temp['status'] = 'in progress'
|
||||
} else if (today.isAfter(toDate, null)) {
|
||||
temp['status'] = 'done'
|
||||
} else if (today.isBefore(fromDate, null)) {
|
||||
temp['status'] = 'open'
|
||||
}
|
||||
tempArr.push(temp)
|
||||
let tempArr = []
|
||||
for (const timeLine of config.time_lines.navgan_first_page) {
|
||||
let temp = {}
|
||||
temp['label'] = timeLine.label
|
||||
temp['date'] = moment(timeLine.date.from, 'jYYYY/jMM/jDD').locale('fa').format('jD jMMMM')
|
||||
const fromDate = moment(timeLine.date.from, 'jYYYY/jMM/jDD')
|
||||
const toDate = moment(timeLine.date.to, 'jYYYY/jMM/jDD')
|
||||
const today = moment()
|
||||
if (today.isBetween(fromDate, toDate, null, '[]')) {
|
||||
temp['status'] = 'in progress'
|
||||
} else if (today.isAfter(toDate, null)) {
|
||||
temp['status'] = 'done'
|
||||
} else if (today.isBefore(fromDate, null)) {
|
||||
temp['status'] = 'open'
|
||||
}
|
||||
setTimeLineList(tempArr)
|
||||
setLoading(false)
|
||||
}).catch(() => {
|
||||
setLoading(false)
|
||||
})
|
||||
tempArr.push(temp)
|
||||
}
|
||||
setTimeLineList(tempArr)
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
<LinearProgress/>
|
||||
) : (
|
||||
<Timeline position="alternate">
|
||||
{timeLineList.map((timeLine, index) => (
|
||||
<TimelineManager
|
||||
key={index}
|
||||
status={timeLine.status}
|
||||
date={timeLine.date}
|
||||
primaryLabel={timeLine.label.primary}
|
||||
secondaryLabel={timeLine.label.secondary}
|
||||
position={index === (timeLineList.length - 1) ? 'end' : ''}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Timeline>
|
||||
)}
|
||||
</>
|
||||
<Timeline position="alternate">
|
||||
{timeLineList.map((timeLine, index) => (
|
||||
<TimelineManager
|
||||
key={index}
|
||||
status={timeLine.status}
|
||||
date={timeLine.date}
|
||||
primaryLabel={timeLine.label.primary}
|
||||
secondaryLabel={timeLine.label.secondary}
|
||||
position={index === (timeLineList.length - 1) ? 'end' : ''}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</Timeline>
|
||||
)
|
||||
}
|
||||
export default TimeLineDetails
|
||||
@@ -5,16 +5,16 @@ import {LinkRouting} from "@witel/webapp-builder";
|
||||
const LoanRegister = () => {
|
||||
const t = useTranslations();
|
||||
return (
|
||||
<Box sx={{backgroundColor: "primary.light"}}>
|
||||
<Box sx={{backgroundSize: 'cover', backgroundImage: `url(/images/bg-firstpage-bus.png)`}}>
|
||||
<Container sx={{padding: 3, color: "white"}} maxWidth="xl">
|
||||
<Typography sx={{my: 3}} variant={'h3'}>
|
||||
<Typography sx={{my: 3, textShadow: '1px 1px 2px #555555'}} variant={'h3'}>
|
||||
{t("app_name")}
|
||||
</Typography>
|
||||
<Stack sx={{color: "white"}}>
|
||||
<Grid sx={{py: 4}} container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<Box sx={{paddingBottom: 4}}>
|
||||
<Typography sx={{lineHeight: 2.7}}>
|
||||
<Typography sx={{lineHeight: 2.7, textShadow: '1px 1px 2px black'}}>
|
||||
وام نوسازی ناوگان به هدف رشد و پیشرفت استان های کشور از طریق ارتقای بهره وری و توسعه
|
||||
اعطا میشود. برای استفاده از تسهیلات این سامانه و درخواست وام می بایست ابتدا وارد
|
||||
سامانه شوید.
|
||||
@@ -30,18 +30,6 @@ const LoanRegister = () => {
|
||||
padding: 1
|
||||
}}>
|
||||
<LinkRouting underline="none" color="inherit" href={'/login'}>
|
||||
<Typography variant="h6">
|
||||
{t("firstPage.login_button")}
|
||||
</Typography>
|
||||
</LinkRouting>
|
||||
</Container>
|
||||
<Container maxWidth={'xs'} sx={{
|
||||
backgroundColor: "primary.main",
|
||||
textAlign: "center",
|
||||
borderRadius: 2,
|
||||
padding: 1
|
||||
}}>
|
||||
<LinkRouting underline="none" color="inherit" href={'/register'}>
|
||||
<Typography variant="h6">
|
||||
{t("firstPage.register_button")}
|
||||
</Typography>
|
||||
|
||||
@@ -10,6 +10,7 @@ import * as Yup from "yup";
|
||||
import SvgLogin from "@/core/components/svgs/SvgLogin";
|
||||
import {CenterLayout, FullPageLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
|
||||
|
||||
|
||||
const SendUserDataComponent = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {SEND_OTP_TOKEN} from "@/core/data/apiRoutes";
|
||||
import FingerprintIcon from "@mui/icons-material/Fingerprint";
|
||||
import {Button, Container, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
import * as Yup from "yup";
|
||||
import SvgLogin from "@/core/components/svgs/SvgLogin";
|
||||
import {CenterLayout, FullPageLayout, LinkRouting, useRequest} from "@witel/webapp-builder";
|
||||
|
||||
const RequestOtpComponent = ({
|
||||
setOtpToken,
|
||||
setPhoneNumber,
|
||||
PhoneNumber,
|
||||
setTimer,
|
||||
initialTimerValue,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const requestServer = useRequest();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
const initialValues = {
|
||||
phone_number: PhoneNumber,
|
||||
};
|
||||
const validationSchema = Yup.object().shape({
|
||||
phone_number: Yup.string().required(
|
||||
t("RegisterPage.error_message_phone_number")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = (values, props) => {
|
||||
requestServer(SEND_OTP_TOKEN, "post", {
|
||||
auth: false, data: {
|
||||
phone_number: values.phone_number,
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
setPhoneNumber(values.phone_number);
|
||||
setOtpToken(true);
|
||||
setTimer(initialTimerValue);
|
||||
}).catch(function (error) {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Stack
|
||||
sx={{width: "100%"}}
|
||||
alignItems='center'
|
||||
>
|
||||
<SvgLogin width={300} height={200}/>
|
||||
</Stack>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("Titles.title_register_page")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="phone_number"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_phone_number")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_phone_number"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.phone_number && props.errors.phone_number)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.phone_number
|
||||
? props.errors.phone_number
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<FingerprintIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("RegisterPage.button_request_verification")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{margin: 2}}
|
||||
href={
|
||||
backUrlDecodedPath
|
||||
? decodeURIComponent(backUrlDecodedPath)
|
||||
: "/register"
|
||||
}
|
||||
>
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("RegisterPage.link_routing_register")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestOtpComponent;
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
import {Box, Button, Grid, Stack} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import {useSearchParams} from "next/navigation";
|
||||
import SvgDashboard from "@/core/components/svgs/SvgDashboard";
|
||||
import {CenterLayout, FullPageLayout, LinkRouting, NextLinkComposed, useUser} from "@witel/webapp-builder";
|
||||
|
||||
const RegisterComponent = () => {
|
||||
const t = useTranslations();
|
||||
const {isAuth} = useUser();
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const backUrlDecodedPath = searchParams.get("back_url");
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout spacing={3}>
|
||||
<SvgDashboard width={300} height={200}/>
|
||||
{isAuth ? (
|
||||
<Button
|
||||
variant="contained"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "/dashboard",
|
||||
}}
|
||||
>
|
||||
{t("dashboard")}
|
||||
</Button>
|
||||
) : (
|
||||
<Box>
|
||||
<Grid
|
||||
container
|
||||
rowSpacing={{xs: 1, sm: 0}}
|
||||
sx={{
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} sm={6} sx={{px: {xs: 0, sm: 1}}}>
|
||||
<Button
|
||||
sx={{whiteSpace: "nowrap"}}
|
||||
variant="contained"
|
||||
size="large"
|
||||
component={NextLinkComposed}
|
||||
to={{
|
||||
pathname: "register/navy",
|
||||
}}
|
||||
>
|
||||
{t("register_navy")}
|
||||
</Button>
|
||||
</Grid>
|
||||
{/*<Grid item xs={12} sm={6} sx={{px: {xs: 0, sm: 1}}}>*/}
|
||||
{/* <Button*/}
|
||||
{/* sx={{whiteSpace: "nowrap"}}*/}
|
||||
{/* variant="contained"*/}
|
||||
{/* size="large"*/}
|
||||
{/* component={NextLinkComposed}*/}
|
||||
{/* to={{*/}
|
||||
{/* pathname: "register/welfare-services",*/}
|
||||
{/* }}*/}
|
||||
{/* >*/}
|
||||
{/* {t("register_welfare_services")}*/}
|
||||
{/* </Button>*/}
|
||||
{/*</Grid>*/}
|
||||
</Grid>
|
||||
</Box>
|
||||
)}
|
||||
</CenterLayout>
|
||||
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||
<LinkRouting
|
||||
sx={{margin: 2}}
|
||||
href={
|
||||
backUrlDecodedPath
|
||||
? decodeURIComponent(backUrlDecodedPath)
|
||||
: "/"
|
||||
}
|
||||
>
|
||||
{t("RegisterPage.link_routing_back_to")}{" "}
|
||||
{backUrlDecodedPath
|
||||
? t("RegisterPage.link_routing_previuos_page")
|
||||
: t("LoginPage.link_routing_main_page")}
|
||||
</LinkRouting>
|
||||
</Stack>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default RegisterComponent;
|
||||
|
||||
@@ -1,173 +0,0 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {REGISTER} from "@/core/data/apiRoutes";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import SvgRegister from "@/core/components/svgs/SvgRegister";
|
||||
import AutoSubmit from "@/core/components/AutoSubmit";
|
||||
import {CenterLayout, FullPageLayout, useRequest, useUser} from "@witel/webapp-builder";
|
||||
|
||||
const UserRegisterComponent = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {setToken} = useUser();
|
||||
const requestServer = useRequest();
|
||||
|
||||
const initialValues = {
|
||||
type_id: "1",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_verification_code")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_national_id")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = (values, props) => {
|
||||
requestServer(REGISTER, "post", {
|
||||
auth: false, data: {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
}).catch(function (error) {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Stack
|
||||
sx={{width: "100%"}}
|
||||
alignItems='center'
|
||||
>
|
||||
<SvgRegister width={300} height={200}/>
|
||||
</Stack>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("register_navy")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: {xs: "column", sm: "flex"},
|
||||
alignItems: "center",
|
||||
textAlign: {xs: "center", sm: "unset"},
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button" sx={{display: "block"}}>
|
||||
{t("LoginPage.sent_token_to")}: {PhoneNumber}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon/>}
|
||||
variant="outlined"
|
||||
sx={{whiteSpace: "nowrap", my: {xs: 1, sm: 0}}}
|
||||
onClick={() => setOtpToken(false)}
|
||||
>
|
||||
{t("LoginPage.change_phone_number")}
|
||||
</Button>
|
||||
</Box>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="verification_code"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_verification_code")}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_verification_code"
|
||||
)}
|
||||
type={"number"}
|
||||
error={
|
||||
!!(props.touched.verification_code && props.errors.verification_code)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
onChange={(e) => e.target.value.length <= 6 ? props.setFieldValue("verification_code", e.target.value) : ""}
|
||||
/>
|
||||
<AutoSubmit/>
|
||||
<ResendToken
|
||||
initialTimerValue={initialTimerValue}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
PhoneNumber={PhoneNumber}
|
||||
/>
|
||||
<Divider>
|
||||
<Chip label={t("RegisterPage.complete_information")}/>
|
||||
</Divider>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_national_id")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_national_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.national_id && props.errors.national_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserRegisterComponent;
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
import {useState} from "react";
|
||||
import RequestOtpComponent from "../RequestOtp";
|
||||
import UserRegisterComponent from "./UserRegister";
|
||||
|
||||
const NavyComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtpComponent
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegisterComponent
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default NavyComponent;
|
||||
@@ -1,174 +0,0 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {REGISTER} from "@/core/data/apiRoutes";
|
||||
import CenterLayout from "@/layouts/CenterLayout";
|
||||
import FullPageLayout from "@/layouts/FullPageLayout";
|
||||
import LoginIcon from "@mui/icons-material/Login";
|
||||
import ChangeCircleIcon from "@mui/icons-material/ChangeCircle";
|
||||
import {Box, Button, Chip, Container, Divider, Paper, Stack, TextField, Typography,} from "@mui/material";
|
||||
import {Field, Formik} from "formik";
|
||||
import {useTranslations} from "next-intl";
|
||||
import * as Yup from "yup";
|
||||
import ResendToken from "@/core/components/ResendToken";
|
||||
import useUser from "@/lib/app/hooks/useUser";
|
||||
import SvgRegister from "@/core/components/svgs/SvgRegister";
|
||||
import useRequest from "@/lib/app/hooks/useRequest";
|
||||
|
||||
const UserRegisterComponent = ({
|
||||
PhoneNumber,
|
||||
setOtpToken,
|
||||
initialTimerValue,
|
||||
timer,
|
||||
setTimer,
|
||||
}) => {
|
||||
const t = useTranslations();
|
||||
const {setToken} = useUser();
|
||||
const requestServer = useRequest();
|
||||
|
||||
const initialValues = {
|
||||
type_id: "2",
|
||||
verification_code: "",
|
||||
phone_number: PhoneNumber,
|
||||
national_id: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
verification_code: Yup.string().required(
|
||||
t("RegisterPage.error_message_verification_code")
|
||||
),
|
||||
national_id: Yup.string().required(
|
||||
t("RegisterPage.error_message_national_id")
|
||||
),
|
||||
});
|
||||
|
||||
const handleSubmit = (values, props) => {
|
||||
requestServer(REGISTER, "post", {
|
||||
auth: false, data: {
|
||||
type_id: values.type_id,
|
||||
national_id: values.national_id,
|
||||
phone_number: values.phone_number,
|
||||
verification_code: values.verification_code,
|
||||
}
|
||||
})
|
||||
.then(function (response) {
|
||||
setOtpToken(true);
|
||||
setToken(response.data.token);
|
||||
}).catch(function (error) {
|
||||
props.setSubmitting(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<FullPageLayout sx={{p: 1}}>
|
||||
<CenterLayout>
|
||||
<Container maxWidth="sm">
|
||||
<Paper elevation={0}>
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleSubmit}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(props) => (
|
||||
<Stack spacing={2} sx={{p: 2}}>
|
||||
<Stack
|
||||
sx={{width: "100%"}}
|
||||
alignItems='center'
|
||||
>
|
||||
<SvgRegister width={300} height={200}/>
|
||||
</Stack>
|
||||
<Typography margin={2} variant="h4" textAlign="center">
|
||||
{t("register_welfare_services")}
|
||||
</Typography>
|
||||
<StyledForm sx={{width: "100%"}}>
|
||||
<Stack spacing={3} sx={{p: 2}}>
|
||||
<Box
|
||||
sx={{
|
||||
display: {xs: "column", sm: "flex"},
|
||||
alignItems: "center",
|
||||
textAlign: {xs: "center", sm: "unset"},
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Typography variant="button" sx={{display: "block"}}>
|
||||
{t("LoginPage.sent_token_to")}: {PhoneNumber}
|
||||
</Typography>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<ChangeCircleIcon/>}
|
||||
variant="outlined"
|
||||
onClick={() => setOtpToken(false)}
|
||||
sx={{whiteSpace: "nowrap", my: {xs: 1, sm: 0}}}
|
||||
>
|
||||
{t("LoginPage.change_phone_number")}
|
||||
</Button>
|
||||
</Box>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="verification_code"
|
||||
variant="outlined"
|
||||
label={t("LoginPage.text_field_verification_code")}
|
||||
placeholder={t(
|
||||
"LoginPage.text_field_enter_your_verification_code"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.verification_code && props.errors.verification_code)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.verification_code
|
||||
? props.errors.verification_code
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<ResendToken
|
||||
initialTimerValue={initialTimerValue}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
PhoneNumber={PhoneNumber}
|
||||
disabled={props.isSubmitting}
|
||||
/>
|
||||
<Divider>
|
||||
<Chip label={t("RegisterPage.complete_information")}/>
|
||||
</Divider>
|
||||
<Field
|
||||
as={TextField}
|
||||
name="national_id"
|
||||
variant="outlined"
|
||||
label={t("RegisterPage.text_field_national_id")}
|
||||
placeholder={t(
|
||||
"RegisterPage.text_field_enter_your_national_id"
|
||||
)}
|
||||
type={"text"}
|
||||
error={
|
||||
!!(props.touched.national_id && props.errors.national_id)
|
||||
}
|
||||
fullWidth
|
||||
helperText={
|
||||
props.touched.national_id
|
||||
? props.errors.national_id
|
||||
: null
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
fullWidth
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
endIcon={<LoginIcon/>}
|
||||
disabled={props.isSubmitting}
|
||||
>
|
||||
{t("RegisterPage.button_submit")}
|
||||
</Button>
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</Stack>
|
||||
)}
|
||||
</Formik>
|
||||
</Paper>
|
||||
</Container>
|
||||
</CenterLayout>
|
||||
</FullPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserRegisterComponent;
|
||||
@@ -1,37 +0,0 @@
|
||||
import {useState} from "react";
|
||||
import RequestOtpComponent from "../RequestOtp";
|
||||
import UserRegisterComponent from "./UserRegister";
|
||||
|
||||
const WelfareServicesComponent = () => {
|
||||
const [otpToken, setOtpToken] = useState(false);
|
||||
const [PhoneNumber, setPhoneNumber] = useState("");
|
||||
|
||||
// For Resend Token (read ResendToken Component Doc)
|
||||
const initialTimerValue = 30;
|
||||
const [timer, setTimer] = useState(initialTimerValue);
|
||||
// End For Resend Token
|
||||
|
||||
if (!otpToken) {
|
||||
return (
|
||||
<RequestOtpComponent
|
||||
setOtpToken={setOtpToken}
|
||||
PhoneNumber={PhoneNumber}
|
||||
setPhoneNumber={setPhoneNumber}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<UserRegisterComponent
|
||||
PhoneNumber={PhoneNumber}
|
||||
setOtpToken={setOtpToken}
|
||||
timer={timer}
|
||||
setTimer={setTimer}
|
||||
initialTimerValue={initialTimerValue}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default WelfareServicesComponent;
|
||||
Reference in New Issue
Block a user