diff options
Diffstat (limited to 'client/src/pages/CheckStatus')
| -rw-r--r-- | client/src/pages/CheckStatus/CheckStatus.jsx | 130 | ||||
| -rw-r--r-- | client/src/pages/CheckStatus/CheckStatus.module.css | 43 | ||||
| -rw-r--r-- | client/src/pages/CheckStatus/EnrollmentStatus.jsx | 70 | ||||
| -rw-r--r-- | client/src/pages/CheckStatus/EnrollmentStatus.module.css | 20 | ||||
| -rw-r--r-- | client/src/pages/CheckStatus/StatusOtp.jsx | 192 | ||||
| -rw-r--r-- | client/src/pages/CheckStatus/StatusOtp.module.css | 19 | ||||
| -rw-r--r-- | client/src/pages/CheckStatus/UpdateStatus.jsx | 70 | ||||
| -rw-r--r-- | client/src/pages/CheckStatus/UpdateStatus.module.css | 20 |
8 files changed, 564 insertions, 0 deletions
diff --git a/client/src/pages/CheckStatus/CheckStatus.jsx b/client/src/pages/CheckStatus/CheckStatus.jsx new file mode 100644 index 0000000..1732d21 --- /dev/null +++ b/client/src/pages/CheckStatus/CheckStatus.jsx @@ -0,0 +1,130 @@ +/* eslint-disable multiline-ternary */ +import React from 'react' +import Header from '../../components/Header/Header' +import { Grid, Button } from '@mui/material' +import Input from '../../components/Input/Input' +import { useTranslation } from 'react-i18next' +import { validAadhaar } from '../../constants/RegEx' +import { ToastContainer, toast } from 'react-toastify' +import { userContext } from '../../context/User' + +import styles from './CheckStatus.module.css' +import { useNavigate } from 'react-router-dom' + +const CheckStatus = () => { + const { t } = useTranslation() + const [status, setStatus] = React.useState('enrollment') + const { aadhaarNumber, setAadhaarNumber, eidNumber, setEidNumber } = + userContext() + const navigate = useNavigate() + + console.log(eidNumber, aadhaarNumber) + + return ( + <> + <ToastContainer + autoClose={1000} + hideProgressBar={true} + theme={'colored'} + /> + <Header subheading={t('STATUS')} /> + <div className={styles.status}> + <div className={styles.formone__radio}> + <span className={styles.formone__status}> + <input + type="radio" + id="enrollment" + name="status" + value={status} + onChange={() => { + setStatus('enrollment') + }} + required + /> + <label htmlFor="enrollment">{t('ENROLLMENT_STATUS')}</label> + </span> + <span className={styles.formone__status}> + <input + type="radio" + id="update" + name="status" + value={status} + onChange={() => { + setStatus('update') + }} + required + /> + <label htmlFor="update">{t('UPDATE_STATUS')}</label> + </span> + </div> + </div> + <div> + {status === 'enrollment' ? ( + <div className={styles.subheading__container}> + <h3 className={styles.subheading}> + {t('PROVIDE_YOUR_EID_NUMBER')} + </h3> + <Input + type="text" + id="eidNumber" + value={eidNumber} + onChange={(e) => setEidNumber(e.target.value)} + placeholder={`${t('ENTER_YOUR_EID_NUMBER')}`} + required + /> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + onClick={() => { + navigate('/status/otp') + }} + > + {t('SUBMIT')} + </Button> + </Grid> + </Grid> + </div> + ) : ( + <div className={styles.subheading__container}> + <h3 className={styles.subheading}> + {t('PROVIDE_YOUR_AADHAAR_NUMBER')} + </h3> + <Input + type="number" + id="aadhaarNumber" + value={aadhaarNumber} + onChange={(e) => setAadhaarNumber(e.target.value)} + placeholder={`${t('ENTER_YOUR_AADHAAR_NUMBER')}`} + required + /> + <Grid container columnSpacing={10} justifyContent="center"> + <Grid item> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + onClick={() => { + if (!validAadhaar.test(aadhaarNumber)) { + toast.error(t('PLEASE_ENTER_VALID_AADHAAR')) + } else { + navigate('/status/otp') + } + }} + > + {t('SUBMIT')} + </Button> + </Grid> + </Grid> + </div> + )} + </div> + </> + ) +} + +export default CheckStatus diff --git a/client/src/pages/CheckStatus/CheckStatus.module.css b/client/src/pages/CheckStatus/CheckStatus.module.css new file mode 100644 index 0000000..800d969 --- /dev/null +++ b/client/src/pages/CheckStatus/CheckStatus.module.css @@ -0,0 +1,43 @@ +.status { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.formone__radio { + display: flex; + align-items: center; +} + +.formone__status { + display: flex; + align-items: center; + margin: 15px; + cursor: pointer; +} + +.formone__status input[type='radio'] { + width: 1.5rem; + height: 1.5rem; + cursor: pointer; +} + +.subheading__container { + font-family: 'Barlow'; + display: flex; + flex-direction: column; + align-items: center; + font-weight: bolder; + margin: 20px; + padding: 20px; +} + +.subheading { + font-size: var(--font-medium); + font-weight: 400; +} + +.formone__status label { + margin-left: 10px; +} diff --git a/client/src/pages/CheckStatus/EnrollmentStatus.jsx b/client/src/pages/CheckStatus/EnrollmentStatus.jsx new file mode 100644 index 0000000..9ae0026 --- /dev/null +++ b/client/src/pages/CheckStatus/EnrollmentStatus.jsx @@ -0,0 +1,70 @@ +/* eslint-disable multiline-ternary */ +import React from 'react' +import Header from '../../components/Header/Header' +import { useTranslation } from 'react-i18next' +import styles from './EnrollmentStatus.module.css' +import { Button } from '@mui/material' +import { useNavigate } from 'react-router-dom' +import { userContext } from '../../context/User' + +const EnrollmentStatus = () => { + const { t } = useTranslation() + const navigate = useNavigate() + + const { setAadhaarNumber, setEidNumber, userData } = userContext() + + return ( + <> + <Header subheading={t('ENROLLMENT_STATUS')} /> + <div className={styles.status__container}> + <h3 className={styles.status__title}>{t('STATUS')}</h3> + {!userData?.verified ? ( + <> + <img + src={`${process.env.PUBLIC_URL}/assets/images/pending.svg`} + alt="" + height="200px" + width="200px" + /> + <h1 className={styles.status}>{t('PENDING')}</h1> + <p className={styles.status__content}> + {t('YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE')} + </p> + <p className={styles.status__content}> + {t('PLEASE_HAVE_PATIENCE')} + </p> + </> + ) : ( + <> + <img + src={`${process.env.PUBLIC_URL}/assets/images/approved.svg`} + alt="" + height="200px" + width="200px" + /> + <h1 className={styles.status}>{t('APPROVED')}</h1> + <p className={styles.status__content}> + {t('YOUR_AADHAAR_STATUS_IS_APPROVED')} + </p> + <p className={styles.status__content}> + {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')} + </p> + </> + )} + <Button + variant="contained" + onClick={() => { + setAadhaarNumber(null) + setEidNumber(null) + navigate('/') + }} + sx={{ margin: '30px' }} + > + {t('BACK_TO_HOME')} + </Button> + </div> + </> + ) +} + +export default EnrollmentStatus diff --git a/client/src/pages/CheckStatus/EnrollmentStatus.module.css b/client/src/pages/CheckStatus/EnrollmentStatus.module.css new file mode 100644 index 0000000..b4b56a2 --- /dev/null +++ b/client/src/pages/CheckStatus/EnrollmentStatus.module.css @@ -0,0 +1,20 @@ +.status__container { + font-family: 'Barlow', sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.status__title { + font-size: var(--font-medium); +} + +.status { + font-size: var(--font-medium-lm); + margin-bottom: 20px; +} + +.status__content { + font-size: var(--font-medium-sm); +} diff --git a/client/src/pages/CheckStatus/StatusOtp.jsx b/client/src/pages/CheckStatus/StatusOtp.jsx new file mode 100644 index 0000000..d7d62d1 --- /dev/null +++ b/client/src/pages/CheckStatus/StatusOtp.jsx @@ -0,0 +1,192 @@ +import React, { useState, useEffect } from 'react' +import Header from '../../components/Header/Header' +import Input from '../../components/Input/Input' +import { Button } from '@mui/material' +import { useNavigate } from 'react-router-dom' +import { useTranslation } from 'react-i18next' +import { userContext } from '../../context/User' +import { useQuery, useMutation } from 'react-query' +import { getUserByAadhaar, sendOTP, getUser } from '../../services/apiservice' +import SubmitButton from '../../components/SubmitButton/SubmitButton' +import { toast, ToastContainer } from 'react-toastify' +import PopUpModal from '../../components/Modal/Modal' + +import styles from './StatusOtp.module.css' + +const StatusOtp = () => { + const navigate = useNavigate() + const { t } = useTranslation() + const [otp, setOtp] = useState() + const [disabled, setDisabled] = useState(false) + const [finalDisable, setFinalDisable] = useState(false) + const [unverified, setUnverified] = useState(true) + const [show, setShow] = useState(false) + const { + aadhaarNumber, + eidNumber, + userData, + setUserData, + oriUserData, + setOriUserData + } = userContext() + + const mutateOTP = useMutation(() => + sendOTP({ mobile: `+91${userData?.mobile}` }) + ) + + const verifyOTP = () => { + if (mutateOTP?.data?.data?.otpCode === Number(otp)) { + 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) + } + + useEffect(() => { + setUserData(oriUserData) + }, [oriUserData]) + + if (aadhaarNumber) { + const isLongEnough = aadhaarNumber?.toString().length > 11 + const { isLoading, isError, data } = useQuery('user', async () => { + if (isLongEnough) { + const response = await getUserByAadhaar(aadhaarNumber) + return response + } + }) + if (isLoading) { + return <div>{t('loading')}</div> + } + + if (isError) { + return <div>{t('error')}</div> + } + + if (data) { + setOriUserData(data?.data) + } + } else if (eidNumber) { + const { isLoading, isError, data } = useQuery('user', async () => { + const response = await getUser(eidNumber) + return response + }) + + if (isLoading) { + return <div>{t('loading')}</div> + } + + if (isError) { + return <div>{t('error')}</div> + } + + if (data) { + setOriUserData(data?.data) + } + } + + return ( + <> + <ToastContainer + autoClose={1000} + hideProgressBar={true} + theme={'colored'} + /> + <Header subheading={`${t('STATUS')}`} /> + <PopUpModal + title="Verify your mobile number" + image={`${process.env.PUBLIC_URL}/assets/images/otp.svg`} + description={ + <> + <ul> + <li className="list__item">Click on "SEND OTP"</li> + <li className="list__item"> + You will recieve an OTP on your entered mobile number + </li> + <li className="list__item"> + You can "RESEND" the OTP after 30 seconds, if you + haven't received it yet. + </li> + <li className="list__item"> + Click on "VERIFY OTP" to verify your mobile number + </li> + </ul> + </> + } + /> + <div className={styles.subheading__container}> + <h3 className={styles.subheading}>{t('ENTER_OTP')}</h3> + <p className={styles.subsubheading}> + {t('SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER')} + </p> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + Otp + disabled={disabled} + sx={{ marginTop: '1rem' }} + onClick={() => { + mutateOTP.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={t('ENTER_OTP')} + /> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + onClick={() => { + verifyOTP() + }} + > + {t('VERIFY_OTP')} + </Button> + </> + )} + </div> + <SubmitButton + onClick={() => { + if (unverified) { + toast.error(t('PLEASE_VERIFY_OTP')) + } else { + if (aadhaarNumber) { + navigate('/status/update') + } else if (eidNumber) { + navigate('/status/enrollment') + } + } + }} + /> + </> + ) +} + +export default StatusOtp diff --git a/client/src/pages/CheckStatus/StatusOtp.module.css b/client/src/pages/CheckStatus/StatusOtp.module.css new file mode 100644 index 0000000..b88d5d4 --- /dev/null +++ b/client/src/pages/CheckStatus/StatusOtp.module.css @@ -0,0 +1,19 @@ +.subheading__container { + font-family: 'Barlow'; + display: flex; + flex-direction: column; + align-items: center; + font-weight: bolder; + margin: 20px; + padding: 20px; +} + +.subheading { + font-size: var(--font-medium); + font-weight: 400; +} + +.subsubheading { + font-size: var(--font-medium-s); + margin: 10px 0px; +} diff --git a/client/src/pages/CheckStatus/UpdateStatus.jsx b/client/src/pages/CheckStatus/UpdateStatus.jsx new file mode 100644 index 0000000..431f9d5 --- /dev/null +++ b/client/src/pages/CheckStatus/UpdateStatus.jsx @@ -0,0 +1,70 @@ +/* eslint-disable multiline-ternary */ +import React from 'react' +import Header from '../../components/Header/Header' +import { useTranslation } from 'react-i18next' +import styles from './EnrollmentStatus.module.css' +import { Button } from '@mui/material' +import { useNavigate } from 'react-router-dom' +import { userContext } from '../../context/User' + +const UpdateStatus = () => { + const { t } = useTranslation() + const navigate = useNavigate() + + const { setAadhaarNumber, setEidNumber, userData } = userContext() + + return ( + <> + <Header subheading={t('UPDATE_STATUS')} /> + <div className={styles.status__container}> + <h3 className={styles.status__title}>{t('STATUS')}</h3> + {userData?.isUpdating ? ( + <> + <img + src={`${process.env.PUBLIC_URL}/assets/images/pending.svg`} + alt="" + height="200px" + width="200px" + /> + <h1 className={styles.status}>{t('PENDING')}</h1> + <p className={styles.status__content}> + {t('YOUR_AADHAAR_UPDATE_STATUS_IS_IN_PENDING_STATE')} + </p> + <p className={styles.status__content}> + {t('PLEASE_HAVE_PATIENCE')} + </p> + </> + ) : ( + <> + <img + src={`${process.env.PUBLIC_URL}/assets/images/approved.svg`} + alt="" + height="200px" + width="200px" + /> + <h1 className={styles.status}>{t('APPROVED')}</h1> + <p className={styles.status__content}> + {t('YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED')} + </p> + <p className={styles.status__content}> + {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')} + </p> + </> + )} + <Button + variant="contained" + onClick={() => { + setAadhaarNumber(null) + setEidNumber(null) + navigate('/') + }} + sx={{ margin: '30px' }} + > + {t('BACK_TO_HOME')} + </Button> + </div> + </> + ) +} + +export default UpdateStatus diff --git a/client/src/pages/CheckStatus/UpdateStatus.module.css b/client/src/pages/CheckStatus/UpdateStatus.module.css new file mode 100644 index 0000000..b4b56a2 --- /dev/null +++ b/client/src/pages/CheckStatus/UpdateStatus.module.css @@ -0,0 +1,20 @@ +.status__container { + font-family: 'Barlow', sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.status__title { + font-size: var(--font-medium); +} + +.status { + font-size: var(--font-medium-lm); + margin-bottom: 20px; +} + +.status__content { + font-size: var(--font-medium-sm); +} |