check status feature

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 &quot;SEND OTP&quot;</li>
+              <li className="list__item">
+                You will recieve an OTP on your entered mobile number
+              </li>
+              <li className="list__item">
+                You can &quot;RESEND&quot; the OTP after 30 seconds, if you
+                haven&apos;t received it yet.
+              </li>
+              <li className="list__item">
+                Click on &quot;VERIFY OTP&quot; 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);
+}