Merge pull request #7 from rohan09-raj/fix2

Added modal and audio assets, and Completed update flow

25 files changed, 346 insertions, 106 deletions

diff --git a/client/public/assets/audios/document-english.mp3 b/client/public/assets/audios/document-english.mp3
new file mode 100644
index 0000000..7782d06
--- /dev/null
+++ b/client/public/assets/audios/document-english.mp3
diff --git a/client/public/assets/audios/document-hindi.mp3 b/client/public/assets/audios/document-hindi.mp3
new file mode 100644
index 0000000..74d7631
--- /dev/null
+++ b/client/public/assets/audios/document-hindi.mp3
diff --git a/client/public/assets/audios/fingerprint-english.mp3 b/client/public/assets/audios/fingerprint-english.mp3
new file mode 100644
index 0000000..4bf56cb
--- /dev/null
+++ b/client/public/assets/audios/fingerprint-english.mp3
diff --git a/client/public/assets/audios/fingerprint-hindi.mp3 b/client/public/assets/audios/fingerprint-hindi.mp3
new file mode 100644
index 0000000..64b3c9e
--- /dev/null
+++ b/client/public/assets/audios/fingerprint-hindi.mp3
diff --git a/client/public/assets/audios/iris-english.mp3 b/client/public/assets/audios/iris-english.mp3
new file mode 100644
index 0000000..a7a9b38
--- /dev/null
+++ b/client/public/assets/audios/iris-english.mp3
diff --git a/client/public/assets/audios/iris-hindi.mp3 b/client/public/assets/audios/iris-hindi.mp3
new file mode 100644
index 0000000..c8336b8
--- /dev/null
+++ b/client/public/assets/audios/iris-hindi.mp3
diff --git a/client/public/assets/audios/photograph-english.mp3 b/client/public/assets/audios/photograph-english.mp3
new file mode 100644
index 0000000..a534ddf
--- /dev/null
+++ b/client/public/assets/audios/photograph-english.mp3
diff --git a/client/public/assets/audios/photograph-hindi.mp3 b/client/public/assets/audios/photograph-hindi.mp3
new file mode 100644
index 0000000..378c736
--- /dev/null
+++ b/client/public/assets/audios/photograph-hindi.mp3
diff --git a/client/src/components/BackButton/BackButton.jsx b/client/src/components/BackButton/BackButton.jsx
new file mode 100644
index 0000000..c02681b
--- /dev/null
+++ b/client/src/components/BackButton/BackButton.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import styles from './BackButton.module.css'
+
+const BackButton = ({ onClick, onChange }) => {
+  return (
+    <>
+      <button
+        onClick={onClick}
+        className={styles.submit}
+        type="submit"
+        onChange={onChange}
+      >
+        <img
+          className={styles.submit__image}
+          src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
+          alt=""
+        />
+      </button>
+    </>
+  )
+}
+
+export default BackButton
diff --git a/client/src/components/BackButton/BackButton.module.css b/client/src/components/BackButton/BackButton.module.css
new file mode 100644
index 0000000..cc9b51c
--- /dev/null
+++ b/client/src/components/BackButton/BackButton.module.css
@@ -0,0 +1,20 @@
+.submit {
+  position: absolute;
+  top: 100px;
+  left: 150px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  transition: 0.2s all;
+  cursor: pointer;
+}
+
+.submit:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.submit__image {
+  height: 75px;
+  width: 75px;
+}
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
new file mode 100644
index 0000000..312d01e
--- /dev/null
+++ b/client/src/components/Modal/Modal.jsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Modal, Typography, Box, Button } from '@mui/material'
+
+const PopUpModal = () => {
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 1000,
+    bgcolor: 'background.paper',
+    borderRadius: '10px',
+    boxShadow: 24,
+    p: 4
+  }
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <>
+      <Button onClick={handleOpen}>Open modal</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <Typography id="modal-modal-title" variant="h6" component="h2">
+            Text in a modal
+          </Typography>
+          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+          </Typography>
+        </Box>
+      </Modal>
+    </>
+  )
+}
+
+export default PopUpModal
diff --git a/client/src/components/UpdateInput/UpdateInput.jsx b/client/src/components/UpdateInput/UpdateInput.jsx
index 8fa3ba1..1cbfcbd 100644
--- a/client/src/components/UpdateInput/UpdateInput.jsx
+++ b/client/src/components/UpdateInput/UpdateInput.jsx
@@ -2,7 +2,22 @@ import React from 'react'
 import styles from './UpdateInput.module.css'
 import EditButton from '../EditButton/EditButton'
 
-const UpdateInput = ({ label, id, value, type, name, onChange, placeholder, maxLength, pattern, minLength, onInvalid, onValid, readOnly }) => {
+const UpdateInput = ({
+  label,
+  id,
+  value,
+  defaultValue,
+  type,
+  name,
+  onChange,
+  placeholder,
+  maxLength,
+  pattern,
+  minLength,
+  onInvalid,
+  onValid,
+  readOnly
+}) => {
   const [editable, setEditable] = React.useState(true)
 
   const handleEdit = () => {
@@ -14,25 +29,24 @@ const UpdateInput = ({ label, id, value, type, name, onChange, placeholder, maxL
       <div className={styles.input__container}>
         <label htmlFor={id}>{label}</label>
         <div className={styles.input__edit}>
-        <input
-          className={styles.input__field}
-          type={type}
-          id={id}
-          name={name}
-          value={value}
-          onChange={onChange}
-          required
-          placeholder={placeholder}
-          pattern={pattern}
-          maxLength={maxLength}
-          minLength={minLength}
-          onInvalid={onInvalid}
-          onValid={onValid}
-          readOnly={editable}
-        />
-        <EditButton
-          onClick={handleEdit}
-          enabled={!editable ? '1' : '0' } />
+          <input
+            className={styles.input__field}
+            type={type}
+            id={id}
+            name={name}
+            value={value}
+            defaultValue={defaultValue}
+            onChange={onChange}
+            required
+            placeholder={placeholder}
+            pattern={pattern}
+            maxLength={maxLength}
+            minLength={minLength}
+            onInvalid={onInvalid}
+            onValid={onValid}
+            readOnly={editable}
+          />
+          <EditButton onClick={handleEdit} enabled={!editable ? '1' : '0'} />
         </div>
       </div>
     </div>
diff --git a/client/src/context/User.js b/client/src/context/User.js
index fce7eda..b3b42e5 100644
--- a/client/src/context/User.js
+++ b/client/src/context/User.js
@@ -5,12 +5,15 @@ export const UserContext = createContext()
 export const Context = ({ children }) => {
   const [aadhaarNumber, setAadhaarNumber] = useState(null)
   const [userData, setUserData] = useState({})
+  const [oriUserData, setOriUserData] = useState({})
 
   const initialUser = {
     aadhaarNumber,
     setAadhaarNumber,
     userData,
-    setUserData
+    setUserData,
+    oriUserData,
+    setOriUserData
   }
 
   return (
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index 354b2e9..4539120 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import Card from '../../components/Card/Card'
 import Header from '../../components/Header/Header'
 import LanguageSelect from '../../components/LanguageSelect/LanguageSelect'
+import PopUpModal from '../../components/Modal/Modal'
 import styles from './Home.module.css'
 
 const Home = ({ page, setPage }) => {
@@ -11,6 +12,7 @@ const Home = ({ page, setPage }) => {
   return (
     <>
       <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} />
+      <PopUpModal />
       <LanguageSelect />
       <div className={styles.card__container}>
         <Link to="/enrollment">
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 94e60d0..9159508 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -55,6 +55,8 @@ const Address = () => {
     setEditable2(!editable2)
   }
 
+  console.log(userData.address.village)
+
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
@@ -68,7 +70,7 @@ const Address = () => {
                   id="state"
                   name="state"
                   options={updatedStates('IN')}
-                  value={userData.address.state}
+                  defaultValue={userData.address.state}
                   isDisabled={editable1}
                   isSearchable={!editable1}
                   onChange={(e) => {
@@ -97,7 +99,7 @@ const Address = () => {
                   id="city"
                   name="city"
                   options={updatedCities('IN', userData.address.state.isoCode)}
-                  value={userData.address.district}
+                  defaultValue={userData.address.district}
                   isDisabled={editable2}
                   isSearchable={!editable2}
                   onChange={(e) => {
@@ -121,7 +123,7 @@ const Address = () => {
           <UpdateInput
             id="town"
             label={t('VILLAGE_TOWN')}
-            value={userData.address.village}
+            defaultValue={userData.address.village}
             type="text"
             onChange={(e) => {
               setUserData({
@@ -139,7 +141,7 @@ const Address = () => {
           <UpdateInput
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
-            value={userData.address.houseNo}
+            defaultValue={userData.address.houseNo}
             type="text"
             onChange={(e) => {
               setUserData({
@@ -155,7 +157,7 @@ const Address = () => {
           <UpdateInput
             id="street"
             label={t('STREET_ROAD')}
-            value={userData.address.street}
+            defaultValue={userData.address.street}
             type="text"
             onChange={(e) => {
               setUserData({
@@ -171,7 +173,7 @@ const Address = () => {
           <UpdateInput
             id="locality"
             label={t('AREA_LOCALITY')}
-            value={userData.address.locality}
+            defaultValue={userData.address.locality}
             type="text"
             onChange={(e) => {
               setUserData({
@@ -187,7 +189,7 @@ const Address = () => {
           <UpdateInput
             id="postOffice"
             label={t('POST_OFFICE')}
-            value={userData.address.postOffice}
+            defaultValue={userData.address.postOffice}
             type="text"
             onChange={(e) => {
               setUserData({
@@ -205,7 +207,7 @@ const Address = () => {
           <UpdateInput
             id="landmark"
             label={t('LANDMARK')}
-            value={userData.address.landmark}
+            defaultValue={userData.address.landmark}
             type="text"
             onChange={(e) => {
               setUserData({
@@ -221,7 +223,7 @@ const Address = () => {
           <UpdateInput
             id="pincode"
             label={t('PINCODE')}
-            value={userData.address.pincode}
+            defaultValue={userData.address.pincode}
             type="text"
             onChange={(e) => {
               setUserData({
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index 91dade7..804561b 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -13,7 +13,7 @@ import { updateUser } from '../../../services/apiservice'
 
 const Agreement = () => {
   const { userData } = userContext()
-  const updateUse = useMutation(() => updateUser(userData._id, ...userData))
+  const updateUse = useMutation(() => updateUser(userData._id, { ...userData }))
 
   const { t } = useTranslation()
   return (
diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
index c105ad8..72aa1b7 100644
--- a/client/src/pages/Update/Biometric/Biometric.jsx
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -4,9 +4,12 @@ import PhotoCapture from '../PhotoCapture/PhotoCapture'
 import Fingerprint from '../Fingerprint/Fingerprint'
 import IrisScan from '../IrisScan/IrisScan'
 import BiometricSelect from '../BiometricSelect/BiometricSelect'
+import BackButton from '../../../components/BackButton/BackButton'
+import { userContext } from '../../../context/User'
 
 const Biometric = () => {
   const [page, setPage] = useState(4)
+  const { userData, oriUserData, setUserData } = userContext()
 
   const [formData, setFormData] = useState({
     photo: '',
@@ -27,14 +30,43 @@ const Biometric = () => {
     }
   }
 
+  const handleBack = () => {
+    if (!userData.photo) {
+      setUserData({ ...userData, photo: oriUserData.photo })
+    }
+    setPage(page - 1)
+  }
+
+  const handleSubmit = () => {
+    if (!userData.photo) {
+      setUserData({ ...userData, photo: oriUserData.photo })
+    }
+    setPage(page + 1)
+  }
+
   const conditionalButton = () => {
     switch (page) {
       case 0:
-        return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+        return (
+          <>
+            <SubmitButton onClick={() => handleSubmit()}> Next</SubmitButton>
+            <BackButton onClick={() => handleBack()} />
+          </>
+        )
       case 1:
-        return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+        return (
+          <>
+            <SubmitButton onClick={() => setPage(4)}> Next</SubmitButton>
+            <BackButton onClick={() => setPage(page - 1)} />
+          </>
+        )
       case 2:
-        return <SubmitButton onClick={() => setPage(4)}>Next</SubmitButton>
+        return (
+          <>
+            <SubmitButton onClick={() => setPage(4)}> Next</SubmitButton>
+            <BackButton onClick={() => setPage(page - 1)} />
+          </>
+        )
     }
   }
   return (
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 7638f39..61fe972 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -1,6 +1,4 @@
 import React, { useState } from 'react'
-import { useQuery } from 'react-query'
-import { getUserByAadhaar } from '../../../services/apiservice'
 import Address from '../Address/Address'
 import DocumentScanner from '../DocumentScanner/DocumentScanner'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
@@ -19,32 +17,10 @@ import 'react-toastify/dist/ReactToastify.css'
 
 const Demographic = () => {
   const { t } = useTranslation()
-  const { aadhaarNumber, userData, setUserData } = userContext()
+  const { userData } = userContext()
 
   const [page, setPage] = useState(0)
 
-  const isLongEnough = aadhaarNumber?.toString().length > 11
-
-  // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
-  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) {
-    setUserData(data?.data)
-  }
-
   const handleSubmit = () => {
     if (page === 0) {
       if (userData.name === '' || userData.name.length < 1) {
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index 14fb769..f6fe0b5 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -17,13 +17,55 @@ import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 
 const DocumentScanner = () => {
-  const { userData, setUserData } = userContext()
+  const { userData, oriUserData, setUserData } = userContext()
   const { t } = useTranslation()
-  const steps = [
-    t('PROOF_OF_IDENTITY'),
-    t('PROOF_OF_ADDRESS'),
-    t('PROOF_OF_DOB')
-  ]
+
+  // JSON.stringify(oriUserData?.address) ===
+  let steps
+
+  // use conditional statements to compare userData and oriUserData to determine the steps
+  // 1st case: if only address is changed, then step=['POA']
+  // 2nd case: if only either name or gender is changed, then step=['POI']
+  // 3rd case: if only dob is changed, then step=['DOB']
+  // 4th case: If only address and name or gender is changed, then step=['POA', 'POI']
+  // 5th case: If only address and dob is changed, then step=['POA', 'DOB']
+  // 6th case: If only name or gender and dob is changed, then step=['POI', 'DOB']
+  // 7th case: If everything is changed, then step=['POA', 'POI', 'DOB']
+  if (
+    (userData.address !== oriUserData.address &&
+      userData.dob !== oriUserData.dob &&
+      userData.name !== oriUserData.name) ||
+    userData.gender !== oriUserData.gender
+  ) {
+    steps = ['POA', 'POI', 'DOB']
+  } else {
+    if (userData.address !== oriUserData.address) {
+      if (
+        userData.name !== oriUserData.name ||
+        userData.gender !== oriUserData.gender
+      ) {
+        steps = ['POA', 'POI']
+      } else if (userData.dob !== oriUserData.dob) {
+        steps = ['POA', 'DOB']
+      } else {
+        steps = ['POA']
+      }
+    } else if (
+      userData.name !== oriUserData.name ||
+      userData.gender !== oriUserData.gender
+    ) {
+      if (userData.dob !== oriUserData.dob) {
+        steps = ['POI', 'DOB']
+      } else {
+        steps = ['POI']
+      }
+    } else if (userData.dob !== oriUserData.dob) {
+      steps = ['DOB']
+    } else {
+      steps = []
+    }
+  }
+
   const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' })
   const [activeStep, setActiveStep] = React.useState(0)
 
diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
new file mode 100644
index 0000000..2728ba3
--- /dev/null
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -0,0 +1,73 @@
+import React, { useEffect } from 'react'
+import Header from '../../../components/Header/Header'
+import Input from '../../../components/Input/Input'
+import { Button, Grid } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
+import { useQuery } from 'react-query'
+import { getUserByAadhaar } from '../../../services/apiservice'
+import styles from './Otp.module.css'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+
+const Otp = () => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const { aadhaarNumber, setUserData, oriUserData, setOriUserData } =
+    userContext()
+
+  useEffect(() => {
+    setUserData(oriUserData)
+  }, [oriUserData])
+
+  const isLongEnough = aadhaarNumber?.toString().length > 11
+
+  // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
+  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)
+  }
+  return (
+    <>
+      <Header subheading="Update" />
+      <div className={styles.subheading__container}>
+        <h3 className={styles.subheading}> Enter OTP </h3>
+        <Input
+          type="text"
+          id="aadhaarNumber"
+          placeholder="Enter One Time Password"
+        />
+        <Grid container columnSpacing={10} justifyContent="center">
+          <Grid item>
+            <Button
+              color="primary"
+              size="large"
+              type="submit"
+              variant="contained"
+              onClick={() => {}}
+            >
+              Verify OTP
+            </Button>
+          </Grid>
+        </Grid>
+      </div>
+      <SubmitButton onClick={() => navigate('/update/select-update')} />
+    </>
+  )
+}
+
+export default Otp
diff --git a/client/src/pages/Update/Otp/Otp.module.css b/client/src/pages/Update/Otp/Otp.module.css
new file mode 100644
index 0000000..261d7aa
--- /dev/null
+++ b/client/src/pages/Update/Otp/Otp.module.css
@@ -0,0 +1,14 @@
+.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;
+}
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index 0c4e9f2..8e483a6 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable multiline-ternary */
-import React, { useState } from 'react'
+import React from 'react'
 import Webcam from 'react-webcam'
 import { useNavigate } from 'react-router-dom'
 import Header from '../../../components/Header/Header'
@@ -7,10 +7,11 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import styles from './PhotoCapture.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
 const PhotoCapture = () => {
   const { t } = useTranslation()
-  const [photo, setPhoto] = useState()
+  const { userData, setUserData, oriUserData } = userContext()
 
   const navigate = useNavigate()
 
@@ -18,14 +19,25 @@ const PhotoCapture = () => {
 
   const capture = React.useCallback(() => {
     const imageSrc = webcamRef.current.getScreenshot()
-    setPhoto(imageSrc)
+    setUserData({ ...userData, photo: imageSrc })
   })
 
+  console.log(oriUserData.photo)
+
+  const handleSubmit = () => {
+    console.log(userData.photo)
+    if (userData.photo) {
+      navigate('/enrollment/documents')
+    }
+  }
+
+  console.log(userData?.photo)
+
   return (
     <>
       <Header subheading={t('UPDATE')} />
       <div className={styles.card__container}>
-        {photo === '' ? (
+        {userData?.photo === '' ? (
           <Webcam
             audio={false}
             height={300}
@@ -39,7 +51,7 @@ const PhotoCapture = () => {
             }}
           />
         ) : (
-          <img src={photo} />
+          <img src={userData?.photo} />
         )}
       </div>
       <Grid container columnSpacing={10} justifyContent="center">
@@ -65,7 +77,7 @@ const PhotoCapture = () => {
             variant="contained"
             onClick={(e) => {
               e.preventDefault()
-              setPhoto('')
+              setUserData({ ...userData, photo: '' })
             }}
           >
             {t('RESET')}
@@ -84,7 +96,7 @@ const PhotoCapture = () => {
           </Typography>
         </Grid>
       </div>
-      <SubmitButton onClick={() => navigate('/enrollment/documents')} />
+      <SubmitButton onClick={() => handleSubmit} />
     </>
   )
 }
diff --git a/client/src/pages/Update/Update.jsx b/client/src/pages/Update/Update.jsx
index eb0aa58..63343f1 100644
--- a/client/src/pages/Update/Update.jsx
+++ b/client/src/pages/Update/Update.jsx
@@ -1,13 +1,14 @@
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
 import Header from '../../components/Header/Header'
 import styles from './Update.module.css'
 import Input from '../../components/Input/Input'
 import { Grid, Button } from '@mui/material'
 import { userContext } from '../../context/User'
+import { useNavigate } from 'react-router-dom'
 
 const Update = () => {
   const { aadhaarNumber, setAadhaarNumber } = userContext()
+
   const navigate = useNavigate()
 
   return (
@@ -30,29 +31,11 @@ const Update = () => {
               size="large"
               type="submit"
               variant="contained"
+              onClick={() => {
+                navigate('/update/otp')
+              }}
             >
-              Send OTP
-            </Button>
-          </Grid>
-        </Grid>
-      </div>
-      <div className={styles.subheading__container}>
-        <h3 className={styles.subheading}> Enter OTP </h3>
-        <Input
-          type="text"
-          id="aadhaarNumber"
-          placeholder="Enter One Time Password"
-        />
-        <Grid container columnSpacing={10} justifyContent="center">
-          <Grid item>
-            <Button
-              color="primary"
-              size="large"
-              type="submit"
-              variant="contained"
-              onClick={() => navigate('/update/select-update')}
-            >
-              Verify OTP
+              Submit
             </Button>
           </Grid>
         </Grid>
diff --git a/client/src/pages/Update/Update.module.css b/client/src/pages/Update/Update.module.css
index 421dcfd..261d7aa 100644
--- a/client/src/pages/Update/Update.module.css
+++ b/client/src/pages/Update/Update.module.css
@@ -1,14 +1,14 @@
 .subheading__container {
-    font-family: 'Barlow';
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    font-weight: bolder;
-    margin: 20px;
-    padding: 20px;
-  }
+  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;
-  }
\ No newline at end of file
+  font-size: var(--font-medium);
+  font-weight: 400;
+}
diff --git a/client/src/routes/index.js b/client/src/routes/index.js
index 41beeca..6bc2342 100644
--- a/client/src/routes/index.js
+++ b/client/src/routes/index.js
@@ -9,6 +9,7 @@ import UpdateSelect from '../pages/Update/UpdateSelect/UpdateSelect'
 import Biometric from '../pages/Update/Biometric/Biometric'
 import Agreement from '../pages/Update/Agreement/Agreement'
 import FinalSlip from '../pages/Update/FinalSlip/FinalSlip'
+import Otp from '../pages/Update/Otp/Otp'
 
 const Index = () => {
   return (
@@ -19,6 +20,7 @@ const Index = () => {
       </Route>
       <Route path="update">
         <Route index element={<Update />} />
+        <Route path="otp" element={<Otp />} />
         <Route path="select-update" element={<UpdateSelect />} />
         <Route path="demographic" element={<Demographic />} />
         <Route path="biometric" element={<Biometric />} />