check status feature

1 files changed, 130 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