1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import React, { useState } from 'react'
import Header from '../../../components/Header/Header'
import CardAgreement from '../../../components/Card/CardAgreement'
import styles from './Agreement.module.css'
import Input from '../../../components/Input/Input'
import { Button, Typography } from '@mui/material'
import { useTranslation } from 'react-i18next'
import { sendOTP } from '../../../services/apiservice'
import { userContext } from '../../../context/User'
import { useMutation } from 'react-query'
import { ToastContainer, toast } from 'react-toastify'
import PopUpModal from '../../../components/Modal/Modal'
import 'react-toastify/dist/ReactToastify.css'
const Agreement = ({ unverified, setUnverified }) => {
const { t } = useTranslation()
const [otp, setOtp] = useState()
const [disabled, setDisabled] = useState(false)
const [finalDisable, setFinalDisable] = useState(false)
const [show, setShow] = useState(false)
const { userData } = userContext()
const { data, mutate } = useMutation(() =>
sendOTP({ mobile: `+91${userData?.mobile}` })
)
const verifyOTP = () => {
if (data?.data?.otpCode === Number(otp)) {
console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
setFinalDisable(true)
setDisabled(true)
setShow(false)
setUnverified(false)
toast.success(t('OTP_VERIFIED!'))
} else {
toast.error(t('INCORRECT_OTP!'))
}
}
const sendResendOTP = () => {
setTimeout(() => {
if (finalDisable === false) {
console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
setDisabled(false)
}
}, 30000)
}
const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
return (
<>
<ToastContainer
autoClose={1000}
hideProgressBar={true}
theme={'colored'}
/>
<Header subheading={t('ENROLLMENT')} />
<PopUpModal
title="VERIFY_YOUR_MOBILE_NUMBER"
image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
description={
<>
<ul>
{description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
</ul>
</>
}
/>
<div className={styles.card__container}>
<CardAgreement
image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
/>
</div>
<div className={styles.card__elements}>
<Typography>{t('PLEASE_VERIFY_YOUR_IDENTITY')}</Typography>
<Button
color="primary"
size="large"
type="submit"
variant="contained"
disabled={disabled}
sx={{ marginTop: '1rem' }}
onClick={() => {
mutate()
setDisabled(true)
setShow(true)
sendResendOTP()
}}
>
{show ? t('RESEND') : t('SEND_OTP')}
</Button>
{show && (
<>
<Input
type="text"
id="otp"
value={otp}
onChange={(e) => setOtp(e.target.value)}
maxLength="6"
placeholder="XXXXXX"
/>
<Button
color="primary"
size="large"
type="submit"
variant="contained"
onClick={() => {
verifyOTP()
}}
>
{t('VERIFY_OTP')}
</Button>
</>
)}
</div>
</>
)
}
export default Agreement
|