Fixed components

11 files changed, 349 insertions, 319 deletions

diff --git a/client/src/components/Gender/Gender.jsx b/client/src/components/Gender/Gender.jsx
index 98a1b48..0079fc3 100644
--- a/client/src/components/Gender/Gender.jsx
+++ b/client/src/components/Gender/Gender.jsx
@@ -17,7 +17,7 @@ const Gender = ({ formData, setFormData }) => {
         id="male"
         name="gender"
         title={t('MALE')}
-        value={formData.gender}
+        value={formData?.gender}
         readOnly={editable}
         onChange={() => {
           setFormData({
@@ -30,7 +30,7 @@ const Gender = ({ formData, setFormData }) => {
       <LabelCard
         id="female"
         name="gender"
-        value={formData.gender}
+        value={formData?.gender}
         title={t('FEMALE')}
         readOnly={editable}
         onChange={() => {
@@ -44,7 +44,7 @@ const Gender = ({ formData, setFormData }) => {
       <LabelCard
         id="trans"
         name="gender"
-        value={formData.gender}
+        value={formData?.gender}
         title={t('OTHER')}
         readOnly={editable}
         onChange={() => {
diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json
index bedc763..8603116 100644
--- a/client/src/components/LanguageSelect/locales/en/translation.json
+++ b/client/src/components/LanguageSelect/locales/en/translation.json
@@ -79,5 +79,8 @@
   "FINGERPRINT_SCAN": "Fingerprint Scan",
   "IRIS_SCAN": "Iris Scan",
   "DEMOGRAPHIC": "Demographic",
-  "BIOMETRIC": "Biometric"
+  "BIOMETRIC": "Biometric",
+  "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY": "Please take the picture of the Proof of Identity",
+  "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS": "Please take the picture of the Proof of Identity",
+  "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH": "Please take the picture of the Proof of Date of Birth"
 }
diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json
index a5b3080..3c9db8a 100644
--- a/client/src/components/LanguageSelect/locales/hi/translation.json
+++ b/client/src/components/LanguageSelect/locales/hi/translation.json
@@ -73,5 +73,8 @@
   "FINGERPRINT_SCAN": "फिंगरप्रिंट स्कैन",
   "IRIS_SCAN": "आइरिस स्कैन",
   "DEMOGRAPHIC": "जनसांख्यिकीय",
-  "BIOMETRIC": "बायोमेट्रिक"
+  "BIOMETRIC": "बायोमेट्रिक",
+  "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY": "कृपया पहचान प्रमाण पत्र की तस्वीर लें",
+  "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS": "कृपया पते के प्रमाण की तस्वीर लें",
+  "PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH": "कृपया जन्मतिथि के प्रमाण की तस्वीर लें"
 }
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 2e0fc6c..5324413 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,48 +1,14 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
-import { Country, State, City } from 'country-state-city'
+import { State, City } from 'country-state-city'
 import Select from 'react-select'
 
 import styles from './Address.module.css'
 import { useTranslation } from 'react-i18next'
 
 const Address = ({ formData, setFormData }) => {
-  const [tempData, setTempData] = useState({
-    country: '',
-    state: '',
-    district: ''
-  })
   const { t } = useTranslation()
-  const countries = Country.getAllCountries()
-
-  useEffect(() => {
-    setFormData({
-      ...formData,
-      address: {
-        country: {
-          name: tempData.country.label,
-          code: tempData.country.isoCode
-        },
-        state: {
-          name: tempData.state.label,
-          code: tempData.state.isoCode
-        },
-        district: {
-          name: tempData.district.label,
-          code: tempData.district.isoCode
-        }
-      }
-    })
-  }, [tempData])
-
-  console.log('Form Data: ', formData.address)
-
-  const updatedCountries = countries.map((country) => ({
-    label: country.name,
-    value: country.id,
-    ...country
-  }))
 
   const updatedStates = (countryId) =>
     State.getStatesOfCountry(countryId).map((state) => ({
@@ -83,35 +49,19 @@ const Address = ({ formData, setFormData }) => {
         <div className={styles.address__container}>
           <div className={styles.input}>
             <div className={styles.input__container}>
-              <label htmlFor="country">{t('COUNTRY')}</label>
-              <Select
-                id="country"
-                name="country"
-                label="country"
-                options={updatedCountries}
-                value={tempData.country}
-                onChange={(e) => {
-                  setTempData({
-                    ...tempData,
-                    country: e
-                  })
-                }}
-                styles={customStyles}
-              />
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
               <label htmlFor="state">{t('STATE')}</label>
               <Select
                 id="state"
                 name="state"
-                options={updatedStates(tempData.country.isoCode)}
-                value={tempData.state}
+                options={updatedStates('IN')}
+                value={formData.address?.state}
                 onChange={(e) => {
-                  setTempData({
-                    ...tempData,
-                    state: e
+                  setFormData({
+                    ...formData,
+                    address: {
+                      ...formData.address,
+                      state: e
+                    }
                   })
                 }}
                 styles={customStyles}
@@ -124,15 +74,15 @@ const Address = ({ formData, setFormData }) => {
               <Select
                 id="city"
                 name="city"
-                options={updatedCities(
-                  tempData.country.isoCode,
-                  tempData.state.isoCode
-                )}
-                value={tempData.district}
+                options={updatedCities('IN', formData.address?.state?.isoCode)}
+                value={formData.address?.district}
                 onChange={(e) => {
-                  setTempData({
-                    ...tempData,
-                    district: e
+                  setFormData({
+                    ...formData,
+                    address: {
+                      ...formData.address,
+                      district: e
+                    }
                   })
                 }}
                 styles={customStyles}
@@ -147,7 +97,10 @@ const Address = ({ formData, setFormData }) => {
             onChange={(e) => {
               setFormData({
                 ...formData,
-                village: e.target.value
+                address: {
+                  ...formData.address,
+                  village: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
@@ -163,6 +116,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   houseNo: e.target.value
                 }
               })
@@ -178,6 +132,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   street: e.target.value
                 }
               })
@@ -193,6 +148,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   locality: e.target.value
                 }
               })
@@ -208,6 +164,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   postOffice: e.target.value
                 }
               })
@@ -225,6 +182,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   landmark: e.target.value
                 }
               })
@@ -240,6 +198,7 @@ const Address = ({ formData, setFormData }) => {
               setFormData({
                 ...formData,
                 address: {
+                  ...formData.address,
                   pincode: e.target.value
                 }
               })
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 1a2aa03..c4f5b85 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -39,18 +39,8 @@ const Enrollment = () => {
       locality: '',
       landmark: '',
       village: '',
-      district: {
-        name: '',
-        code: ''
-      },
-      state: {
-        name: '',
-        code: ''
-      },
-      country: {
-        name: '',
-        code: ''
-      },
+      district: {},
+      state: {},
       postOffice: '',
       pincode: ''
     },
@@ -90,39 +80,41 @@ const Enrollment = () => {
         setPage(page + 1)
       }
     } else if (page === 2) {
-      if (formData.country === '') {
-        toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
-      } else if (formData.state === '') {
+      if (formData.address.state.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_STATE'))
-      } else if (formData.district === '') {
+      } else if (formData.address.district.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
-      } else if (formData.village === '') {
+      } else if (formData.address.village === '') {
         toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
-      } else if (formData.houseNo === '') {
+      } else if (formData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
-      } else if (formData.street === '') {
+      } else if (formData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
-      } else if (formData.locality === '') {
+      } else if (formData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
-      } else if (formData.postOffice === '') {
+      } else if (formData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
-      } else if (formData.landmark === '') {
+      } else if (formData.address.landmark === '') {
         toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
-      } else if (formData.pincode === '') {
+      } else if (formData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
-      } else if (!validPincode.test(formData.pincode)) {
+      } else if (!validPincode.test(formData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
       } else {
-        setFormData({
-          ...formData,
-          address: `${formData.houseNo}, ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.state.label}, ${formData.country.label}, ${formData.postOffice}, ${formData.pincode}`
-        })
         setPage(page + 1)
       }
     } else if (page === 3) {
       setPage(page + 1)
     } else if (page === 4) {
-      setPage(page + 1)
+      if (formData.documents.POI === '') {
+        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_IDENTITY'))
+      } else if (formData.documents.POA === '') {
+        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_ADDRESS'))
+      } else if (formData.documents.DOB === '') {
+        toast.error(t('PLEASE_TAKE_THE_PICTURE_OF_THE_PROOF_OF_DATE_OF_BIRTH'))
+      } else {
+        setPage(page + 1)
+      }
     } else if (page === 5) {
       setPage(page + 1)
     } else if (page === 6) {
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 29f0f40..94e60d0 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -1,22 +1,17 @@
 import React from 'react'
 import Header from '../../../components/Header/Header'
-import { Country, State, City } from 'country-state-city'
+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 UpdateInput from '../../../components/UpdateInput/UpdateInput'
-import EditButton from '../../../components/EditButton/EditButton'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
-const Address = ({ formData, setFormData }) => {
+const Address = () => {
+  const { userData, setUserData } = userContext()
   const { t } = useTranslation()
-  const countries = Country.getAllCountries()
-
-  const updatedCountries = countries.map((country) => ({
-    label: country.name,
-    value: country.id,
-    ...country
-  }))
 
   const updatedStates = (countryId) =>
     State.getStatesOfCountry(countryId).map((state) => ({
@@ -50,13 +45,9 @@ const Address = ({ formData, setFormData }) => {
     })
   }
 
-  const [editable, setEditable] = React.useState(true)
   const [editable1, setEditable1] = React.useState(true)
   const [editable2, setEditable2] = React.useState(true)
 
-  const handleEdit = () => {
-    setEditable(!editable)
-  }
   const handleEdit1 = () => {
     setEditable1(!editable1)
   }
@@ -64,60 +55,29 @@ const Address = ({ formData, setFormData }) => {
     setEditable2(!editable2)
   }
 
-  console.log(
-    formData.country,
-    formData.state,
-    formData.district,
-    formData.village
-  )
-
   return (
     <>
-      <Header subheading={t('UPDATE')} />
+      <Header subheading={t('ENROLLMENT')} />
       <div className={styles.address}>
         <div className={styles.address__container}>
           <div className={styles.input}>
             <div className={styles.input__container}>
-              <label htmlFor="country">{t('COUNTRY')}</label>
-              <div className={styles.input__edit}>
-                <Select
-                  id="country"
-                  name="country"
-                  label="country"
-                  options={updatedCountries}
-                  value={formData.country}
-                  isDisabled={editable}
-                  isSearchable={!editable}
-                  onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      country: e
-                    })
-                  }}
-                  styles={customStyles}
-                />
-                <EditButton
-                  onClick={handleEdit}
-                  enabled={!editable ? '1' : '0'}
-                />
-              </div>
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
               <label htmlFor="state">{t('STATE')}</label>
               <div className={styles.input__edit}>
                 <Select
                   id="state"
                   name="state"
-                  options={updatedStates(formData.country.isoCode)}
-                  value={formData.state}
+                  options={updatedStates('IN')}
+                  value={userData.address.state}
                   isDisabled={editable1}
                   isSearchable={!editable1}
                   onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      state: e
+                    setUserData({
+                      ...userData,
+                      address: {
+                        ...userData.address,
+                        state: e
+                      }
                     })
                   }}
                   styles={customStyles}
@@ -136,17 +96,17 @@ const Address = ({ formData, setFormData }) => {
                 <Select
                   id="city"
                   name="city"
-                  options={updatedCities(
-                    formData.country.isoCode,
-                    formData.state.isoCode
-                  )}
-                  value={formData.district}
+                  options={updatedCities('IN', userData.address.state.isoCode)}
+                  value={userData.address.district}
                   isDisabled={editable2}
                   isSearchable={!editable2}
                   onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      district: e
+                    setUserData({
+                      ...userData,
+                      address: {
+                        ...userData.address,
+                        district: e
+                      }
                     })
                   }}
                   styles={customStyles}
@@ -161,12 +121,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="town"
             label={t('VILLAGE_TOWN')}
-            value={formData.village}
+            value={userData.address.village}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                village: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  village: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
@@ -176,12 +139,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
-            value={formData.houseNo}
+            value={userData.address.houseNo}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                houseNo: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  houseNo: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
@@ -189,12 +155,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="street"
             label={t('STREET_ROAD')}
-            value={formData.street}
+            value={userData.address.street}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                street: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  street: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_STREET_ROAD')}
@@ -202,12 +171,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="locality"
             label={t('AREA_LOCALITY')}
-            value={formData.locality}
+            value={userData.address.locality}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                locality: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  locality: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
@@ -215,12 +187,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="postOffice"
             label={t('POST_OFFICE')}
-            value={formData.postOffice}
+            value={userData.address.postOffice}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                postOffice: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  postOffice: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
@@ -230,12 +205,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="landmark"
             label={t('LANDMARK')}
-            value={formData.landmark}
+            value={userData.address.landmark}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                landmark: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  landmark: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
@@ -243,16 +221,18 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="pincode"
             label={t('PINCODE')}
-            value={formData.pincode}
+            value={userData.address.pincode}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                pincode: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  pincode: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
-            pattern="[0-9]+"
           />
         </div>
       </div>
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index 6452bd8..91dade7 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -7,8 +7,14 @@ import { Grid, Button } from '@mui/material'
 import { Link } from 'react-router-dom'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
+import { useMutation } from 'react-query'
+import { updateUser } from '../../../services/apiservice'
 
 const Agreement = () => {
+  const { userData } = userContext()
+  const updateUse = useMutation(() => updateUser(userData._id, ...userData))
+
   const { t } = useTranslation()
   return (
     <>
@@ -47,7 +53,7 @@ const Agreement = () => {
         </Grid>
       </Grid>
       <Link to="/update/final-slip">
-        <SubmitButton />
+        <SubmitButton onClick={() => updateUse.mutate()} />
       </Link>
     </>
   )
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 3e95d60..7638f39 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useQuery } from 'react-query'
 import { getUserByAadhaar } from '../../../services/apiservice'
 import Address from '../Address/Address'
@@ -25,45 +25,6 @@ const Demographic = () => {
 
   const isLongEnough = aadhaarNumber?.toString().length > 11
 
-  const [formData, setFormData] = useState({
-    name: '',
-    gender: '',
-    dob: '',
-    mobile: '',
-    email: '',
-    country: '',
-    state: '',
-    district: '',
-    village: '',
-    houseNo: '',
-    street: '',
-    locality: '',
-    postOffice: '',
-    landmark: '',
-    pincode: ''
-    // address: userData?.address
-  })
-
-  useEffect(() => {
-    const address = userData?.address?.split(',')
-    const addressObj = {
-      houseNo: address[0],
-      street: address[1],
-      locality: address[2],
-      landmark: address[3],
-      village: address[4],
-      district: address[5],
-      country: address[6],
-      pincode: address[7]
-    }
-
-    setFormData({
-      ...formData,
-      ...userData,
-      ...addressObj
-    })
-  }, [userData])
-
   // 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) {
@@ -84,58 +45,49 @@ const Demographic = () => {
     setUserData(data?.data)
   }
 
-  const address = userData?.address
-  console.log(address)
-
-  console.log('Form Data: ', formData, userData)
-
   const handleSubmit = () => {
     if (page === 0) {
-      if (formData.name === '' || formData.name.length < 1) {
+      if (userData.name === '' || userData.name.length < 1) {
         toast.error(t('PLEASE_ENTER_YOUR_NAME'))
-      } else if (!validString.test(formData.name)) {
+      } else if (!validString.test(userData.name)) {
         toast.error(t('PLEASE_ENTER_VALID_NAME'))
-      } else if (formData.gender === '') {
+      } else if (userData.gender === '') {
         toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
-      } else if (formData.mobile === '') {
+      } else if (userData.mobile === '') {
         toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
-      } else if (!validMobileNumber.test(formData.mobile)) {
+      } else if (!validMobileNumber.test(userData.mobile)) {
         toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
-      } else if (formData.email === '') {
+      } else if (userData.email === '') {
         toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
-      } else if (!validEmail.test(formData.email)) {
+      } else if (!validEmail.test(userData.email)) {
         toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
       } else {
         setPage(page + 1)
       }
     } else if (page === 1) {
-      if (formData.country === '') {
+      if (userData.country === '') {
         toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
-      } else if (formData.state === '') {
+      } else if (userData.address.state.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_STATE'))
-      } else if (formData.district === '') {
+      } else if (userData.address.district.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
-      } else if (formData.village === '') {
+      } else if (userData.address.village === '') {
         toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
-      } else if (formData.houseNo === '') {
+      } else if (userData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
-      } else if (formData.street === '') {
+      } else if (userData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
-      } else if (formData.locality === '') {
+      } else if (userData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
-      } else if (formData.postOffice === '') {
+      } else if (userData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
-      } else if (formData.landmark === '') {
+      } else if (userData.address.landmark === '') {
         toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
-      } else if (formData.pincode === '') {
+      } else if (userData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
-      } else if (!validPincode.test(formData.pincode)) {
+      } else if (!validPincode.test(userData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
       } else {
-        setFormData({
-          ...formData,
-          address: `${formData.houseNo}, ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label}, ${formData.pincode}`
-        })
         setPage(page + 1)
       }
     } else if (page === 3) {
@@ -146,11 +98,11 @@ const Demographic = () => {
   const conditionalComponent = () => {
     switch (page) {
       case 0:
-        return <FormOne formData={formData} setFormData={setFormData} />
+        return <FormOne />
       case 1:
-        return <Address formData={formData} setFormData={setFormData} />
+        return <Address />
       case 2:
-        return <DocumentScanner formData={formData} setFormData={setFormData} />
+        return <DocumentScanner />
       default:
         return <UpdateSelect />
     }
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index ae8846c..14fb769 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -1,52 +1,180 @@
-import React from 'react'
+/* eslint-disable multiline-ternary */
+import React, { useState } from 'react'
+import Webcam from 'react-webcam'
 import Header from '../../../components/Header/Header'
-import CardScanner from '../../../components/Card/CardScanner'
 import styles from './DocumentScanner.module.css'
-import { Button, Grid, Typography } from '@mui/material'
+import {
+  Button,
+  Grid,
+  Typography,
+  StepLabel,
+  Step,
+  Stepper,
+  Box
+} from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
 const DocumentScanner = () => {
+  const { userData, setUserData } = userContext()
   const { t } = useTranslation()
+  const steps = [
+    t('PROOF_OF_IDENTITY'),
+    t('PROOF_OF_ADDRESS'),
+    t('PROOF_OF_DOB')
+  ]
+  const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' })
+  const [activeStep, setActiveStep] = React.useState(0)
+
+  const [doccu] = useState({ POI: '', POA: '', DOB: '' })
+
+  console.log(documents)
+
+  const webcamRef = React.useRef(null)
+
+  const capture = React.useCallback((doc) => {
+    const imageSrc = webcamRef.current.getScreenshot()
+    doccu[doc] = imageSrc
+    setDocuments({
+      ...documents,
+      POI: doccu.POI,
+      POA: doccu.POA,
+      DOB: doccu.DOB
+    })
+  })
+
+  const handleNext = () => {
+    if (activeStep === steps.length - 1) {
+      setUserData({ ...userData, documents: documents })
+    }
+    setActiveStep((prevActiveStep) => prevActiveStep + 1)
+  }
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1)
+  }
+
+  const WebcamComponent = ({ doc }) => {
+    return (
+      <>
+        <div className={styles.card__container}>
+          {documents[doc] === '' ? (
+            <Webcam
+              audio={false}
+              height={400}
+              ref={webcamRef}
+              screenshotFormat="image/jpeg"
+              width={600}
+              videoConstraints={{
+                height: 400,
+                width: 600,
+                facingMode: 'user'
+              }}
+            />
+          ) : (
+            <img src={documents[doc]} />
+          )}
+        </div>
+        <Grid container columnSpacing={10} justifyContent="center">
+          <Grid item>
+            <Button
+              color="primary"
+              size="large"
+              type="submit"
+              variant="contained"
+              onClick={(e) => {
+                e.preventDefault()
+                capture(doc)
+              }}
+            >
+              {t('SCAN')}
+            </Button>
+          </Grid>
+          <Grid item>
+            <Button
+              color="primary"
+              size="large"
+              type="submit"
+              variant="contained"
+              onClick={(e) => {
+                e.preventDefault()
+                doccu[doc] = ''
+                setDocuments({
+                  ...documents,
+                  POI: doccu.POI,
+                  POA: doccu.POA,
+                  DOB: doccu.DOB
+                })
+              }}
+            >
+              {t('RESET')}
+            </Button>
+          </Grid>
+        </Grid>
+        <br></br>
+        <div>
+          <Grid container justifyContent="center">
+            <Typography align="center">
+              {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
+            </Typography>
+          </Grid>
+        </div>
+      </>
+    )
+  }
+
   return (
     <>
-      <Header subheading="Update" />
-      <div className={styles.card__container}>
-        <CardScanner
-          image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
-        />
-      </div>
-      <Grid container columnSpacing={10} justifyContent="center">
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            {t('SCAN')}
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            {t('RESET')}
-          </Button>
-        </Grid>
-      </Grid>
-      <br></br>
-      <div>
-        <Grid container justifyContent="center">
-          <Typography align="center">
-            {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
-          </Typography>
-        </Grid>
-      </div>
+      <Header subheading={t('ENROLLMENT')} />
       <SubmitButton />
+      <Box sx={{ width: '100%' }}>
+        <Stepper activeStep={activeStep}>
+          {steps.map((label, index) => {
+            const stepProps = {}
+            const labelProps = {}
+            return (
+              <Step key={label} {...stepProps}>
+                <StepLabel {...labelProps}>{label}</StepLabel>
+              </Step>
+            )
+          })}
+        </Stepper>
+        {activeStep === steps.length ? (
+          <React.Fragment>
+            <Typography sx={{ mt: 2, mb: 1 }}>
+              {t('ALL_STEPS_COMPLETED')}
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Box sx={{ flex: '1 1 auto' }} />
+            </Box>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            {activeStep === 0 ? (
+              <WebcamComponent doc="POI" />
+            ) : activeStep === 1 ? (
+              <WebcamComponent doc="POA" />
+            ) : (
+              activeStep === 2 && <WebcamComponent doc="DOB" />
+            )}
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Button
+                color="inherit"
+                disabled={activeStep === 0}
+                onClick={handleBack}
+                sx={{ mr: 1 }}
+              >
+                {t('BACK')}
+              </Button>
+              <Box sx={{ flex: '1 1 auto' }} />
+              <Button onClick={handleNext}>
+                {activeStep === steps.length - 1 ? t('FINISH') : t('NEXT')}
+              </Button>
+            </Box>
+          </React.Fragment>
+        )}
+      </Box>
     </>
   )
 }
diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx
index 629588d..fafce05 100644
--- a/client/src/pages/Update/FormOne/FormOne.jsx
+++ b/client/src/pages/Update/FormOne/FormOne.jsx
@@ -5,8 +5,10 @@ import styles from './FormOne.module.css'
 import EditButton from '../../../components/EditButton/EditButton'
 import Gender from '../../../components/Gender/Gender'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
-const FormOne = ({ formData, setFormData }) => {
+const FormOne = () => {
+  const { userData, setUserData } = userContext()
   const { t } = useTranslation()
 
   const [editable, setEditable] = React.useState(true)
@@ -23,10 +25,10 @@ const FormOne = ({ formData, setFormData }) => {
           type="text"
           id="fullName"
           label={t('FULL_NAME')}
-          value={formData.name}
+          value={userData?.name}
           onChange={(e) => {
-            setFormData({
-              ...formData,
+            setUserData({
+              ...userData,
               name: e.target.value
             })
           }}
@@ -35,12 +37,12 @@ const FormOne = ({ formData, setFormData }) => {
 
         <UpdateInput
           id="mobile"
-          value={formData.mobile}
+          value={userData?.mobile}
           label={t('MOBILE')}
           type="text"
           onChange={(e) => {
-            setFormData({
-              ...formData,
+            setUserData({
+              ...userData,
               mobile: e.target.value
             })
           }}
@@ -55,11 +57,11 @@ const FormOne = ({ formData, setFormData }) => {
               type="date"
               id="dob"
               name="dob"
-              value={formData.dob}
+              value={userData?.dob}
               readOnly={editable}
               onChange={(e) => {
-                setFormData({
-                  ...formData,
+                setUserData({
+                  ...userData,
                   dob: e.target.value
                 })
               }}
@@ -71,19 +73,19 @@ const FormOne = ({ formData, setFormData }) => {
 
         <UpdateInput
           id="email"
-          value={formData.email}
+          value={userData?.email}
           label={t('EMAIL')}
           type="email"
           onChange={(e) => {
-            setFormData({
-              ...formData,
+            setUserData({
+              ...userData,
               email: e.target.value
             })
           }}
           placeholder={t('ENTER_YOUR_EMAIL_ID')}
         />
 
-        <Gender formData={formData} setFormData={setFormData} />
+        <Gender formData={userData} setFormData={setUserData} />
       </div>
     </>
   )
diff --git a/client/src/services/apiservice.js b/client/src/services/apiservice.js
index f6b5f4e..305d557 100644
--- a/client/src/services/apiservice.js
+++ b/client/src/services/apiservice.js
@@ -13,3 +13,8 @@ export const getUserByAadhaar = async (aadhaarNumber) => {
   const response = await apiClient.get(`/user/aadhaar/${aadhaarNumber}`)
   return response
 }
+
+export const updateUser = async (id, payload) => {
+  const response = await apiClient.patch(`/user/${id}`, payload)
+  return response
+}