check status feature

11 files changed, 268 insertions, 19 deletions

diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 20a97f7..0af60a5 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -4,10 +4,10 @@ import UpdateInput from '../../../components/UpdateInput/UpdateInput'
 import { State, City } from 'country-state-city'
 import EditButton from '../../../components/EditButton/EditButton'
 import Select from 'react-select'
-
-import styles from './Address.module.css'
+import PopUpModal from '../../../components/Modal/Modal'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
+import styles from './Address.module.css'
 
 const Address = () => {
   const { userData, setUserData } = userContext()
@@ -58,6 +58,29 @@ const Address = () => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <PopUpModal
+        title="Fill your information"
+        image={`${process.env.PUBLIC_URL}/assets/images/address.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Update the required details in the relevant fields by clicking
+                the edit button
+              </li>
+              <li className="list__item">
+                If required, select the state you belong to. from the dropdown
+                list
+              </li>
+              <li className="list__item">
+                If required, select the district you belong to. from the
+                dropdown list. This won&apos;t show any options until you have
+                selected the state
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.address}>
         <div className={styles.address__container}>
           <UpdateInput
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index e49bbe6..22ffa80 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -11,6 +11,7 @@ import { sendOTP, updateUser, sendMessage } 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 = () => {
@@ -24,7 +25,7 @@ const Agreement = () => {
   const { userData } = userContext()
 
   const updateUse = useMutation(
-    () => updateUser(userData._id, { ...userData }),
+    () => updateUser(userData._id, { ...userData, isUpdating: true }),
     {
       onSuccess: () => {
         setConfirm.mutate({
@@ -80,6 +81,27 @@ const Agreement = () => {
         theme={'colored'}
       />
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Verify your mobile number"
+        image={`${process.env.PUBLIC_URL}/assets/images/agreement.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.card__container}>
         <CardAgreement
           image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
index 275df89..10b2776 100644
--- a/client/src/pages/Update/Biometric/Biometric.jsx
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+/* eslint-disable space-before-function-paren */
+import React, { useState, useEffect } from 'react'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import PhotoCapture from '../PhotoCapture/PhotoCapture'
 import Fingerprint from '../Fingerprint/Fingerprint'
@@ -6,11 +7,47 @@ import IrisScan from '../IrisScan/IrisScan'
 import BiometricSelect from '../BiometricSelect/BiometricSelect'
 import BackButton from '../../../components/BackButton/BackButton'
 import { userContext } from '../../../context/User'
+import * as cocoSsd from '@tensorflow-models/coco-ssd'
+import * as tf from '@tensorflow/tfjs'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useTranslation } from 'react-i18next'
 
 const Biometric = () => {
+  const { t } = useTranslation()
   const [page, setPage] = useState(4)
   const { userData, oriUserData, setUserData } = userContext()
 
+  const [model, setModel] = useState()
+
+  async function loadModel() {
+    try {
+      const model = await cocoSsd.load()
+      setModel(model)
+      console.log('setloadedModel')
+    } catch (err) {
+      console.log(err)
+      console.log('failed load model')
+    }
+  }
+
+  useEffect(() => {
+    tf.ready().then(() => {
+      loadModel()
+    })
+  }, [])
+
+  let predictions = []
+  async function predictionFunction() {
+    predictions = await model.detect(document.getElementById('img'))
+    console.log(predictions)
+    if (predictions.length > 0) {
+      console.log(predictions)
+      console.log(predictions[0])
+    }
+    return predictions
+  }
+
   const conditionalComponent = () => {
     switch (page) {
       case 0:
@@ -32,10 +69,29 @@ const Biometric = () => {
   }
 
   const handleSubmit = () => {
-    if (!userData.photo) {
-      setUserData({ ...userData, photo: oriUserData.photo })
+    predictionFunction()
+    if (predictions.length === 0) {
+      toast.warning(t('PLEASE_WAIT'), {
+        timeout: 1000
+      })
     }
-    setPage(4)
+    console.log('befoer start')
+    setTimeout(() => {
+      if (predictions.length > 0) {
+        if (!userData.photo) {
+          setUserData({ ...userData, photo: oriUserData.photo })
+        } else if (
+          predictions[0].class === 'person' &&
+          predictions[0].score > 0.8
+        ) {
+          setPage(4)
+        } else {
+          toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+        }
+      } else {
+        toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
+      }
+    }, 1000)
   }
 
   const conditionalButton = () => {
@@ -65,6 +121,11 @@ const Biometric = () => {
   }
   return (
     <>
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
       {conditionalComponent()}
       {conditionalButton()}
     </>
diff --git a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
index b7be260..a942aef 100644
--- a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
+++ b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
@@ -3,6 +3,7 @@ import Header from '../../../components/Header/Header'
 import BiometricCard from '../../../components/BiometricCard/BiometricCard'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { Link } from 'react-router-dom'
+import PopUpModal from '../../../components/Modal/Modal'
 import { useTranslation } from 'react-i18next'
 
 const BiometricSelect = ({ page, setPage }) => {
@@ -10,6 +11,22 @@ const BiometricSelect = ({ page, setPage }) => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <PopUpModal
+        title="Select the option to be edited"
+        image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Click on the edit button to update the required biometrics
+              </li>
+              <li className="list__item">
+                You can edit your Photograph/Fingerprints/Iris Scans
+              </li>
+            </ul>
+          </>
+        }
+      />
       <BiometricCard label={t('PHOTOGRAPH')} onclick={() => setPage(0)} />
       <BiometricCard label={t('FINGERPRINT_SCAN')} onclick={() => setPage(1)} />
       <BiometricCard label={t('IRIS_SCAN')} onclick={() => setPage(2)} />
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index 89c9479..c4f8ad6 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -4,7 +4,7 @@ import Webcam from 'react-webcam'
 import Header from '../../../components/Header/Header'
 import styles from './DocumentScanner.module.css'
 import { Button, Typography, StepLabel, Step, Stepper } from '@mui/material'
-import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import PopUpModal from '../../../components/Modal/Modal'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 import { toast } from 'react-toastify'
@@ -199,7 +199,31 @@ const DocumentScanner = () => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
-      <SubmitButton />
+      <PopUpModal
+        title="Scan your documents"
+        image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Consists of 3 steps :
+                <ul>
+                  <li>Proof of Identity: </li>
+                  <li>Proof of Address: </li>
+                  <li>Proof of Date of Birth: </li>
+                </ul>
+              </li>
+              <li className="list__item">
+                Ensure that your documents are in the center of the frame
+              </li>
+              <li className="list__item">
+                You won&apos;t be able to proceed until you have scanned all the
+                required documents
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.stepper__container}>
         <div className={styles.box}>
           <Stepper activeStep={activeStep} sx={{ width: '60%' }}>
diff --git a/client/src/pages/Update/Fingerprint/Fingerprint.jsx b/client/src/pages/Update/Fingerprint/Fingerprint.jsx
index cda36d5..933e944 100644
--- a/client/src/pages/Update/Fingerprint/Fingerprint.jsx
+++ b/client/src/pages/Update/Fingerprint/Fingerprint.jsx
@@ -5,12 +5,24 @@ import styles from './Fingerprint.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const Fingerprint = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <PopUpModal
+        title="Scan your Fingerprints"
+        image={`${process.env.PUBLIC_URL}/assets/images/fingerprint_scan.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.card__container}>
         <CardBiometrics
           image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`}
diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx
index d5fb8ba..2c61fb9 100644
--- a/client/src/pages/Update/FormOne/FormOne.jsx
+++ b/client/src/pages/Update/FormOne/FormOne.jsx
@@ -6,6 +6,7 @@ import EditButton from '../../../components/EditButton/EditButton'
 import Gender from '../../../components/Gender/Gender'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const FormOne = () => {
   const { userData, setUserData } = userContext()
@@ -34,6 +35,35 @@ const FormOne = () => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <PopUpModal
+        title="Fill your information"
+        image={`${process.env.PUBLIC_URL}/assets/images/id.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Select your residency by selecting the appropriate checkbox
+              </li>
+              <li className="list__item">
+                Enter your full name without any title or salutation
+              </li>
+              <li className="list__item">
+                Select your gender by clicking on the appropriate card
+              </li>
+              <li className="list__item">
+                Select your date of birth from the provided calender
+              </li>
+              <li className="list__item">
+                Enter your 10 digit mobile number without any prefix or country
+                code
+              </li>
+              <li className="list__item">
+                Enter your email address in proper format
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.formone}>
         <UpdateInput
           type="text"
diff --git a/client/src/pages/Update/IrisScan/IrisScan.jsx b/client/src/pages/Update/IrisScan/IrisScan.jsx
index e00a0a7..05a34b3 100644
--- a/client/src/pages/Update/IrisScan/IrisScan.jsx
+++ b/client/src/pages/Update/IrisScan/IrisScan.jsx
@@ -5,12 +5,24 @@ import styles from './IrisScan.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const IrisScan = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <PopUpModal
+        title="Scan your Iris"
+        image={`${process.env.PUBLIC_URL}/assets/images/iris_scan.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.card__container}>
         <CardBiometrics
           image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`}
diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
index bce6ef7..75a4d73 100644
--- a/client/src/pages/Update/Otp/Otp.jsx
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -9,6 +9,7 @@ import { useQuery, useMutation } from 'react-query'
 import { getUserByAadhaar, sendOTP } from '../../../services/apiservice'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { toast, ToastContainer } from 'react-toastify'
+import PopUpModal from '../../../components/Modal/Modal'
 
 import styles from './Otp.module.css'
 
@@ -80,6 +81,27 @@ const Otp = () => {
         theme={'colored'}
       />
       <Header subheading={`${t('UPDATE')}`} />
+      <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}>
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index 8e483a6..25f8572 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -8,10 +8,11 @@ import styles from './PhotoCapture.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const PhotoCapture = () => {
   const { t } = useTranslation()
-  const { userData, setUserData, oriUserData } = userContext()
+  const { userData, setUserData } = userContext()
 
   const navigate = useNavigate()
 
@@ -22,8 +23,6 @@ const PhotoCapture = () => {
     setUserData({ ...userData, photo: imageSrc })
   })
 
-  console.log(oriUserData.photo)
-
   const handleSubmit = () => {
     console.log(userData.photo)
     if (userData.photo) {
@@ -31,11 +30,29 @@ const PhotoCapture = () => {
     }
   }
 
-  console.log(userData?.photo)
-
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <PopUpModal
+        title="Update your photo"
+        image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Ensure that your photo is clear and in focus
+              </li>
+              <li className="list__item">
+                Also, ensure that you are in the center of your photo
+              </li>
+              <li className="list__item">
+                You won&apos;t be able to proceed until you have captured a
+                clear and centered photo
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.card__container}>
         {userData?.photo === '' ? (
           <Webcam
@@ -51,7 +68,7 @@ const PhotoCapture = () => {
             }}
           />
         ) : (
-          <img src={userData?.photo} />
+          <img id="img" src={userData?.photo} />
         )}
       </div>
       <Grid container columnSpacing={10} justifyContent="center">
diff --git a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
index 3c2edb3..3b6a717 100644
--- a/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
+++ b/client/src/pages/Update/UpdateSelect/UpdateSelect.jsx
@@ -1,13 +1,16 @@
 import { t } from 'i18next'
 import React from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import Card from '../../../components/Card/Card'
 import Header from '../../../components/Header/Header'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { userContext } from '../../../context/User'
 
 import styles from './UpdateSelect.module.css'
 
 const UpdateSelect = () => {
+  const { userData, oriUserData } = userContext()
+  const navigate = useNavigate()
   return (
     <>
       <Header subheading={t('UPDATE')} />
@@ -24,9 +27,15 @@ const UpdateSelect = () => {
             image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
           />
         </Link>
-        <Link to="/update/agreement">
-          <SubmitButton />
-        </Link>
+        <SubmitButton
+          onClick={() => {
+            if (userData === oriUserData) {
+              navigate('/no-update')
+            } else {
+              navigate('/update/agreement')
+            }
+          }}
+        />
       </div>
     </>
   )