From ffd2c78b86111a5d1f7914e7dab4ffc946cb5287 Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Tue, 23 Aug 2022 14:39:22 +0530 Subject: check status feature --- client/src/pages/CheckStatus/CheckStatus.jsx | 130 ++++++++++++++ .../src/pages/CheckStatus/CheckStatus.module.css | 43 +++++ client/src/pages/CheckStatus/EnrollmentStatus.jsx | 70 ++++++++ .../pages/CheckStatus/EnrollmentStatus.module.css | 20 +++ client/src/pages/CheckStatus/StatusOtp.jsx | 192 +++++++++++++++++++++ client/src/pages/CheckStatus/StatusOtp.module.css | 19 ++ client/src/pages/CheckStatus/UpdateStatus.jsx | 70 ++++++++ .../src/pages/CheckStatus/UpdateStatus.module.css | 20 +++ .../src/pages/Enrollment/Agreement/Agreement.jsx | 12 +- client/src/pages/Enrollment/Enrollment.jsx | 34 ++-- client/src/pages/Enrollment/FormOne/FormOne.jsx | 4 +- client/src/pages/Error/Error.jsx | 6 + client/src/pages/Error/Error.module.css | 1 + client/src/pages/Home/Home.jsx | 6 + client/src/pages/Update/Address/Address.jsx | 27 ++- client/src/pages/Update/Agreement/Agreement.jsx | 24 ++- client/src/pages/Update/Biometric/Biometric.jsx | 69 +++++++- .../Update/BiometricSelect/BiometricSelect.jsx | 17 ++ .../Update/DocumentScanner/DocumentScanner.jsx | 28 ++- .../src/pages/Update/Fingerprint/Fingerprint.jsx | 12 ++ client/src/pages/Update/FormOne/FormOne.jsx | 30 ++++ client/src/pages/Update/IrisScan/IrisScan.jsx | 12 ++ client/src/pages/Update/Otp/Otp.jsx | 22 +++ .../src/pages/Update/PhotoCapture/PhotoCapture.jsx | 29 +++- .../src/pages/Update/UpdateSelect/UpdateSelect.jsx | 17 +- 25 files changed, 879 insertions(+), 35 deletions(-) create mode 100644 client/src/pages/CheckStatus/CheckStatus.jsx create mode 100644 client/src/pages/CheckStatus/CheckStatus.module.css create mode 100644 client/src/pages/CheckStatus/EnrollmentStatus.jsx create mode 100644 client/src/pages/CheckStatus/EnrollmentStatus.module.css create mode 100644 client/src/pages/CheckStatus/StatusOtp.jsx create mode 100644 client/src/pages/CheckStatus/StatusOtp.module.css create mode 100644 client/src/pages/CheckStatus/UpdateStatus.jsx create mode 100644 client/src/pages/CheckStatus/UpdateStatus.module.css (limited to 'client/src/pages') 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 ( + <> + +
+
+
+ + { + setStatus('enrollment') + }} + required + /> + + + + { + setStatus('update') + }} + required + /> + + +
+
+
+ {status === 'enrollment' ? ( +
+

+ {t('PROVIDE_YOUR_EID_NUMBER')} +

+ setEidNumber(e.target.value)} + placeholder={`${t('ENTER_YOUR_EID_NUMBER')}`} + required + /> + + + + + +
+ ) : ( +
+

+ {t('PROVIDE_YOUR_AADHAAR_NUMBER')} +

+ setAadhaarNumber(e.target.value)} + placeholder={`${t('ENTER_YOUR_AADHAAR_NUMBER')}`} + required + /> + + + + + +
+ )} +
+ + ) +} + +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 ( + <> +
+
+

{t('STATUS')}

+ {!userData?.verified ? ( + <> + +

{t('PENDING')}

+

+ {t('YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE')} +

+

+ {t('PLEASE_HAVE_PATIENCE')} +

+ + ) : ( + <> + +

{t('APPROVED')}

+

+ {t('YOUR_AADHAAR_STATUS_IS_APPROVED')} +

+

+ {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')} +

+ + )} + +
+ + ) +} + +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
{t('loading')}
+ } + + if (isError) { + return
{t('error')}
+ } + + 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
{t('loading')}
+ } + + if (isError) { + return
{t('error')}
+ } + + if (data) { + setOriUserData(data?.data) + } + } + + return ( + <> + +
+ +
    +
  • Click on "SEND OTP"
    • +
  • + You will recieve an OTP on your entered mobile number +
    • +
  • + You can "RESEND" the OTP after 30 seconds, if you + haven't received it yet. +
    • +
  • + Click on "VERIFY OTP" to verify your mobile number +
    • +
+ + } + /> +
+

{t('ENTER_OTP')}

+

+ {t('SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER')} +

+ + {show && ( + <> + setOtp(e.target.value)} + maxLength="6" + placeholder={t('ENTER_OTP')} + /> + + + )} +
+ { + 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 ( + <> +
+
+

{t('STATUS')}

+ {userData?.isUpdating ? ( + <> + +

{t('PENDING')}

+

+ {t('YOUR_AADHAAR_UPDATE_STATUS_IS_IN_PENDING_STATE')} +

+

+ {t('PLEASE_HAVE_PATIENCE')} +

+ + ) : ( + <> + +

{t('APPROVED')}

+

+ {t('YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED')} +

+

+ {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')} +

+ + )} + +
+ + ) +} + +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); +} diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx index 9dedb56..13b46ba 100644 --- a/client/src/pages/Enrollment/Agreement/Agreement.jsx +++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx @@ -60,7 +60,17 @@ const Agreement = ({ unverified, setUnverified }) => { description={ <>
    -
  • INSTRUCTIONS TO BE ADDED
    • +
  • Click on "SEND OTP"
    • +
  • + You will recieve an OTP on your entered mobile number +
    • +
  • + You can "RESEND" the OTP after 30 seconds, if you + haven't received it yet. +
    • +
  • + Click on "VERIFY OTP" to verify your mobile number +
} diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index 53d64d5..35a599f 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -1,3 +1,4 @@ +/* eslint-disable space-before-function-paren */ import React, { useState, useEffect } from 'react' import Address from './Address/Address' import Agreement from './Agreement/Agreement' @@ -37,7 +38,7 @@ const Enrollment = () => { const [model, setModel] = useState() - async function loadModel () { + async function loadModel() { try { const model = await cocoSsd.load() setModel(model) @@ -55,7 +56,7 @@ const Enrollment = () => { }, []) let predictions = [] - async function predictionFunction () { + async function predictionFunction() { predictions = await model.detect(document.getElementById('img')) if (predictions.length > 0) { console.log(predictions) @@ -140,21 +141,26 @@ const Enrollment = () => { } } else if (page === 3) { predictionFunction() - if (predictions.length === 0) { - toast.warning(t('PLEASE_WAIT'), { + if (predictions.length === 0) { + toast.warning(t('PLEASE_WAIT'), { timeout: 1000 - }) - } + }) + } setTimeout(() => { if (predictions.length > 0) { - if (!userData.photo) { - toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH')) - } else if (predictions[0].class === 'person' && predictions[0].score > 0.5) { - setPage(page + 1) - } else { - toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH')) - } - } + if (!userData.photo) { + toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH')) + } else if ( + predictions[0].class === 'person' && + predictions[0].score > 0.8 + ) { + setPage(page + 1) + } else { + toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH')) + } + } else { + toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH')) + } }, 1000) } else if (page === 4) { if (!userData.documents.POI) { diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx index 3fd5a21..fb37457 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx @@ -88,7 +88,9 @@ const FormOne = () => { }} required /> - + diff --git a/client/src/pages/Error/Error.jsx b/client/src/pages/Error/Error.jsx index 5d06226..dc4732c 100644 --- a/client/src/pages/Error/Error.jsx +++ b/client/src/pages/Error/Error.jsx @@ -1,13 +1,19 @@ import React, { useEffect } from 'react' import { useNavigate } from 'react-router-dom' +import { initialUserData } from '../../constants/userData' +import { userContext } from '../../context/User' import styles from './Error.module.css' const Error = ({ message }) => { const navigate = useNavigate() + const { setUserData, setOriUserData, setAadhaarNumber } = userContext() useEffect(() => { setTimeout(() => { + setUserData(initialUserData) + setOriUserData(initialUserData) + setAadhaarNumber('') navigate('/') }, 3000) }, []) diff --git a/client/src/pages/Error/Error.module.css b/client/src/pages/Error/Error.module.css index d66c6b7..d58d354 100644 --- a/client/src/pages/Error/Error.module.css +++ b/client/src/pages/Error/Error.module.css @@ -11,6 +11,7 @@ font-family: 'Barlow', sans-serif; font-weight: 400; font-size: var(--font-large); + text-align: center; } .error__image { diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx index 4c9d620..9771877 100644 --- a/client/src/pages/Home/Home.jsx +++ b/client/src/pages/Home/Home.jsx @@ -33,6 +33,12 @@ const Home = ({ page, setPage }) => { image={`${process.env.PUBLIC_URL}/assets/images/update.svg`} /> + + + ) 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 ( <>
+ +
    +
  • + Update the required details in the relevant fields by clicking + the edit button +
    • +
  • + If required, select the state you belong to. from the dropdown + list +
    • +
  • + If required, select the district you belong to. from the + dropdown list. This won't show any options until you have + selected the state +
    • +
+ + } + />
{ @@ -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'} />
+ +
    +
  • Click on "SEND OTP"
    • +
  • + You will recieve an OTP on your entered mobile number +
    • +
  • + You can "RESEND" the OTP after 30 seconds, if you + haven't received it yet. +
    • +
  • + Click on "VERIFY OTP" to verify your mobile number +
    • +
+ + } + />
{ + 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 ( <> + {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 ( <>
+ +
    +
  • + Click on the edit button to update the required biometrics +
    • +
  • + You can edit your Photograph/Fingerprints/Iris Scans +
    • +
+ + } + /> setPage(0)} /> setPage(1)} /> 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 ( <>
- + +
    +
  • + Consists of 3 steps : +
      +
    • Proof of Identity:
      • +
    • Proof of Address:
      • +
    • Proof of Date of Birth:
      • +
    +
    • +
  • + Ensure that your documents are in the center of the frame +
    • +
  • + You won't be able to proceed until you have scanned all the + required documents +
    • +
+ + } + />
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 ( <>
+ +
    +
  • INSTRUCTIONS TO BE ADDED
    • +
+ + } + />
{ const { userData, setUserData } = userContext() @@ -34,6 +35,35 @@ const FormOne = () => { return ( <>
+ +
    +
  • + Select your residency by selecting the appropriate checkbox +
    • +
  • + Enter your full name without any title or salutation +
    • +
  • + Select your gender by clicking on the appropriate card +
    • +
  • + Select your date of birth from the provided calender +
    • +
  • + Enter your 10 digit mobile number without any prefix or country + code +
    • +
  • + Enter your email address in proper format +
    • +
+ + } + />
{ const { t } = useTranslation() return ( <>
+ +
    +
  • INSTRUCTIONS TO BE ADDED
    • +
+ + } + />
{ theme={'colored'} />
+ +
    +
  • Click on "SEND OTP"
    • +
  • + You will recieve an OTP on your entered mobile number +
    • +
  • + You can "RESEND" the OTP after 30 seconds, if you + haven't received it yet. +
    • +
  • + Click on "VERIFY OTP" to verify your mobile number +
    • +
+ + } + />

{t('ENTER_OTP')}

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 ( <>

+ +
    +
  • + Ensure that your photo is clear and in focus +
    • +
  • + Also, ensure that you are in the center of your photo +
    • +
  • + You won't be able to proceed until you have captured a + clear and centered photo +
    • +
+ + } + />
{userData?.photo === '' ? ( { }} /> ) : ( - + )}
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 ( <>
@@ -24,9 +27,15 @@ const UpdateSelect = () => { image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`} /> - - - + { + if (userData === oriUserData) { + navigate('/no-update') + } else { + navigate('/update/agreement') + } + }} + />
) -- cgit