updated address component

5 files changed, 339 insertions, 253 deletions

diff --git a/client/package.json b/client/package.json
index 10b5b15..7d2b958 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,7 +25,8 @@
     "react-scripts": "5.0.1",
     "react-select": "^5.4.0",
     "react-toastify": "^9.0.8",
-    "react-webcam": "^7.0.1"
+    "react-webcam": "^7.0.1",
+    "react-pincode": "^1.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 194b66b..4028fc2 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -1,57 +1,25 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
-import { State, City } from 'country-state-city'
-import Select from 'react-select'
 import { userContext } from '../../../context/User'
 import { useTranslation } from 'react-i18next'
 import PopUpModal from '../../../components/Modal/Modal'
 import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
+import Pincode from 'react-pincode'
 
 import styles from './Address.module.css'
 
 const Address = () => {
   const { t } = useTranslation()
+  const [pincodeData, setPincodeData] = useState('')
   const { userData, setUserData } = userContext()
 
-  const updatedStates = (countryId) =>
-    State.getStatesOfCountry(countryId).map((state) => ({
-      label: state.name,
-      value: state.id,
-      ...state
-    }))
-  const updatedCities = (countryID, stateId) =>
-    City.getCitiesOfState(countryID, stateId).map((city) => ({
-      label: city.name,
-      value: city.id,
-      ...city
-    }))
-
-  const customStyles = {
-    control: (base) => ({
-      ...base,
-      width: '500px',
-      height: '80px',
-      margin: '10px 0px',
-      border: '3px solid',
-      fontSize: '1.5rem',
-      borderRadius: '10px !important'
-    }),
-    input: (base) => ({
-      ...base,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: '0px',
-      margin: '0px'
-    })
-  }
-
   const description = [
     'ENTER_YOUR_DETAILS_ACCORDING_TO_THE_RELEVANT_FIELDS',
     'SELECT_THE_STATE_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST',
     'SELECT_THE_DISTRICT_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST'
   ]
+  console.log(pincodeData)
 
   return (
     <>
@@ -108,25 +76,24 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
           />
-          <div className={styles.input__container}>
-            <label htmlFor="state">{t('STATE')}</label>
-            <Select
-              id="state"
-              name="state"
-              options={updatedStates('IN')}
-              value={userData.address?.state}
-              onChange={(e) => {
-                setUserData({
-                  ...userData,
-                  address: {
-                    ...userData.address,
-                    state: e
+          <Input
+            id="state"
+            label={t('STATE')}
+            value={userData.address.state.name}
+            type="text"
+            onChange={(e) => {
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  state: {
+                    name: e.target.value
                   }
-                })
-              }}
-              styles={customStyles}
-            />
-          </div>
+                }
+              })
+            }}
+            placeholder={t('ENTER_YOUR_STATE')}
+          />
         </div>
         <div className={styles.address__container}>
           <Input
@@ -145,41 +112,72 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_STREET_ROAD')}
           />
+          <div className={styles.input}>
+            <div className={styles.input__container}>
+              <label htmlFor="pincode">{t('PINCODE')}</label>
+              <Pincode
+                showCity={false}
+                showDistrict={false}
+                showState={false}
+                showArea={false}
+                invalidError=""
+                lengthError=""
+                onChange={(e) => {
+                  setUserData({
+                    ...userData,
+                    address: {
+                      ...userData.address,
+                      pincode: e.target.value
+                    }
+                  })
+                }}
+                pincodeInput={{
+                  width: '500px',
+                  height: '80px',
+                  margin: '10px 0px',
+                  padding: '18px 10px',
+                  border: '3px solid',
+                  borderRadius: '10px',
+                  fontSize: '1.5rem'
+                }}
+                getData={(data) => {
+                  setPincodeData(data)
+                  setUserData({
+                    ...userData,
+                    address: {
+                      ...userData.address,
+                      pincode: data.pincode,
+                      state: {
+                        name: data.stateName
+                      },
+                      district: {
+                        name: data.district
+                      },
+                      postOffice: data.areaName
+                    }
+                  })
+                }}
+              />
+            </div>
+          </div>
           <Input
-            id="postOffice"
-            label={t('POST_OFFICE')}
-            value={userData.address.postOffice}
+            id="district"
+            label={t('DISTRICT')}
+            value={userData.address.district.name}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  postOffice: e.target.value
+                  district: {
+                    name: e.target.value
+                  }
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
+            placeholder={t('ENTER_YOUR_DISTRICT')}
           />
-          <div className={styles.input__container}>
-            <label htmlFor="city">{t('DISTRICT')}</label>
-            <Select
-              id="city"
-              name="city"
-              options={updatedCities('IN', userData.address?.state?.isoCode)}
-              value={userData.address?.district}
-              onChange={(e) => {
-                setUserData({
-                  ...userData,
-                  address: {
-                    ...userData.address,
-                    district: e
-                  }
-                })
-              }}
-              styles={customStyles}
-            />
-          </div>
         </div>
         <div className={styles.address__container}>
           <Input
@@ -198,21 +196,22 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
           />
+
           <Input
-            id="pincode"
-            label={t('PINCODE')}
-            value={userData.address.pincode}
+            id="postOffice"
+            label={t('POST_OFFICE')}
+            value={userData.address.postOffice}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  pincode: e.target.value
+                  postOffice: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_AREA_PINCODE')}
+            placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
           />
           <Input
             id="landmark"
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index f3b4c88..c2a895a 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -76,7 +76,7 @@ const Enrollment = () => {
       setPage(page + 1)
     },
     onLoading: () => {
-      return <Spinner heading='ENROLLMENT' />
+      return <Spinner heading="ENROLLMENT" />
     },
     onError: (error) => {
       console.log(error)
@@ -100,41 +100,61 @@ const Enrollment = () => {
       if (userData.indianResident === '') {
         toast.error(t('PLEASE_SELECT_YOUR_RESIDENCY'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/select-residency-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/select-residency-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/select-residency-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/select-residency-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.name === '' || userData.name.length < 1) {
         toast.error(t('PLEASE_ENTER_YOUR_NAME'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-name-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-name-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-name-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-name-hindi.mp3`
+          )
         }
         audio.play()
       } else if (!validString.test(userData.name)) {
         toast.error(t('PLEASE_ENTER_VALID_NAME'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-name-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.gender === '') {
         toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.dob === '') {
         toast.error(t('PLEASE_SELECT_YOUR_DOB'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-dob-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-dob-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-dob-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-dob-hindi.mp3`
+          )
         }
         audio.play()
       } else {
@@ -144,33 +164,49 @@ const Enrollment = () => {
       if (userData.mobile === '') {
         toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-mobile-hindi.mp3`
+          )
         }
         audio.play()
       } else if (!validMobileNumber.test(userData.mobile)) {
         toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-valid-mobile-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.email === '') {
         toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-email-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-email-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-email-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-email-hindi.mp3`
+          )
         }
         audio.play()
       } else if (!validEmail.test(userData.email)) {
         toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-hindi.mp3`
+          )
         }
         audio.play()
       } else {
@@ -180,81 +216,121 @@ const Enrollment = () => {
       if (userData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-house-no-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-street-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-street-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-street-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-street-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.address.village === '') {
         toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-village-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-village-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-village-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-village-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-post-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-post-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-post-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-post-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-pin-hindi.mp3`
+          )
         }
         audio.play()
       } else if (!validPincode.test(userData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-hindi.mp3`
+          )
         }
         audio.play()
       } else if (!userData.address.state.name) {
         toast.error(t('PLEASE_SELECT_YOUR_STATE'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-state-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-state-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-state-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-state-hindi.mp3`
+          )
         }
         audio.play()
       } else if (!userData.address.district.name) {
         toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-district-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-district-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-district-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-district-hindi.mp3`
+          )
         }
         audio.play()
       } else if (userData.address.landmark === '') {
         toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-hindi.mp3`
+          )
         }
         audio.play()
       } else {
@@ -272,9 +348,13 @@ const Enrollment = () => {
           if (!userData.photo) {
             toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH'))
             if (language === 'en') {
-              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-photo-english.mp3`)
+              audio = new Audio(
+                `${process.env.PUBLIC_URL}/assets/audios/please-capture-photo-english.mp3`
+              )
             } else if (language === 'hi') {
-              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-photo-hindi.mp3`)
+              audio = new Audio(
+                `${process.env.PUBLIC_URL}/assets/audios/please-capture-photo-hindi.mp3`
+              )
             }
             audio.play()
           } else if (
@@ -285,18 +365,26 @@ const Enrollment = () => {
           } else {
             toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
             if (language === 'en') {
-              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-english.mp3`)
+              audio = new Audio(
+                `${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-english.mp3`
+              )
             } else if (language === 'hi') {
-              audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-hindi.mp3`)
+              audio = new Audio(
+                `${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-hindi.mp3`
+              )
             }
             audio.play()
           }
         } else {
           toast.error(t('PLEASE_CAPTURE_CLEAR_PHOTOGRAPH'))
           if (language === 'en') {
-            audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-english.mp3`)
+            audio = new Audio(
+              `${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-english.mp3`
+            )
           } else if (language === 'hi') {
-            audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-hindi.mp3`)
+            audio = new Audio(
+              `${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-hindi.mp3`
+            )
           }
           audio.play()
         }
@@ -305,9 +393,13 @@ const Enrollment = () => {
       if (!userData.documents.POI) {
         toast.error(t('SCAN_YOUR_DOCUMENT'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/scan-documents-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/scan-documents-hindi.mp3`
+          )
         }
         audio.play()
       } else {
@@ -321,9 +413,13 @@ const Enrollment = () => {
       if (unverified) {
         toast.error(t('PLEASE_VERIFY_OTP'))
         if (language === 'en') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-verify-otp-english.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-verify-otp-english.mp3`
+          )
         } else if (language === 'hi') {
-          audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-verify-otp-hindi.mp3`)
+          audio = new Audio(
+            `${process.env.PUBLIC_URL}/assets/audios/please-verify-otp-hindi.mp3`
+          )
         }
         audio.play()
       } else {
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 29c2fda..03ef76b 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -1,68 +1,31 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Header from '../../../components/Header/Header'
 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 PopUpModal from '../../../components/Modal/Modal'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 import styles from './Address.module.css'
 import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
+import Pincode from 'react-pincode'
 
 const Address = () => {
   const { userData, setUserData } = userContext()
   const { t } = useTranslation()
 
-  const updatedStates = (countryId) =>
-    State.getStatesOfCountry(countryId).map((state) => ({
-      label: state.name,
-      value: state.id,
-      ...state
-    }))
-  const updatedCities = (countryID, stateId) =>
-    City.getCitiesOfState(countryID, stateId).map((city) => ({
-      label: city.name,
-      value: city.id,
-      ...city
-    }))
-
-  const customStyles = {
-    control: (base) => ({
-      ...base,
-      width: '500px',
-      height: '80px',
-      margin: '10px 0px',
-      border: '3px solid',
-      borderRadius: '10px !important',
-      fontSize: '1.5rem'
-    }),
-    input: (base) => ({
-      ...base,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: '0px',
-      margin: '0px'
-    })
-  }
-
   const [editable1, setEditable1] = React.useState(true)
-  const [editable2, setEditable2] = React.useState(true)
+  const [pincodeData, setPincodeData] = useState('')
 
   const handleEdit1 = () => {
     setEditable1(!editable1)
   }
-  const handleEdit2 = () => {
-    setEditable2(!editable2)
-  }
 
   const description = [
     '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_WONT_SHOW_ANY_OPTIONS_UNTIL_YOU_HAVE_SELECTED_THE_STATE'
   ]
-
+  console.log(pincodeData)
   return (
     <>
       <Header subheading={t('UPDATE')} />
@@ -118,94 +81,116 @@ const Address = () => {
             }}
             placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
           />
-          <div className={styles.input__container}>
-            <label className={styles.label} htmlFor="state">{t('STATE')}</label>
-            <div className={styles.input__edit}>
-              <Select
-                id="state"
-                name="state"
-                options={updatedStates('IN')}
-                defaultValue={userData.address.state}
-                isDisabled={editable1}
-                isSearchable={!editable1}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      state: e
+          <div className={styles.input__edit}>
+            <UpdateInput
+              id="state"
+              label={t('STATE')}
+              value={userData.address.state.name}
+              type="text"
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    state: {
+                      name: e.target.value
                     }
-                  })
-                }}
-                styles={customStyles}
-              />
-              <EditButton
-                onClick={handleEdit1}
-                enabled={!editable1 ? '1' : '0'}
-              />
+                  }
+                })
+              }}
+              placeholder={t('ENTER_YOUR_STATE')}
+            />
+            <EditButton
+              onClick={handleEdit1}
+              enabled={!editable1 ? '1' : '0'}
+            />
+          </div>
+          <div className={styles.address__container}>
+            <UpdateInput
+              id="street"
+              label={t('STREET_ROAD')}
+              defaultValue={userData.address.street}
+              type="text"
+              onChange={(e) => {
+                setUserData({
+                  ...userData,
+                  address: {
+                    ...userData.address,
+                    street: e.target.value
+                  }
+                })
+              }}
+              placeholder={t('ENTER_YOUR_STREET_ROAD')}
+            />
+            <div className={styles.input}>
+              <div className={styles.input__container}>
+                <div className={styles.input__edit}>
+                  <label htmlFor="pincode">{t('PINCODE')}</label>
+                  <Pincode
+                    showCity={false}
+                    showDistrict={false}
+                    showState={false}
+                    showArea={false}
+                    invalidError=""
+                    lengthError=""
+                    onChange={(e) => {
+                      setUserData({
+                        ...userData,
+                        address: {
+                          ...userData.address,
+                          pincode: e.target.value
+                        }
+                      })
+                    }}
+                    pincodeInput={{
+                      width: '500px',
+                      height: '80px',
+                      margin: '10px 0px',
+                      padding: '18px 10px',
+                      border: '3px solid',
+                      borderRadius: '10px',
+                      fontSize: '1.5rem'
+                    }}
+                    getData={(data) => {
+                      setPincodeData(data)
+                      setUserData({
+                        ...userData,
+                        address: {
+                          ...userData.address,
+                          pincode: data.pincode,
+                          state: {
+                            name: data.stateName
+                          },
+                          district: {
+                            name: data.district
+                          },
+                          postOffice: data.areaName
+                        }
+                      })
+                    }}
+                  />
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-        <div className={styles.address__container}>
-          <UpdateInput
-            id="street"
-            label={t('STREET_ROAD')}
-            defaultValue={userData.address.street}
-            type="text"
-            onChange={(e) => {
-              setUserData({
-                ...userData,
-                address: {
-                  ...userData.address,
-                  street: e.target.value
-                }
-              })
-            }}
-            placeholder={t('ENTER_YOUR_STREET_ROAD')}
-          />
           <UpdateInput
-            id="postOffice"
-            label={t('POST_OFFICE')}
-            defaultValue={userData.address.postOffice}
+            id="district"
+            label={t('DISTRICT')}
+            value={userData.address.district.name}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  postOffice: e.target.value
+                  district: {
+                    name: e.target.value
+                  }
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
+            placeholder={t('ENTER_YOUR_DISTRICT')}
           />
-          <div className={styles.input__container}>
-            <label className={styles.label} htmlFor="city">{t('DISTRICT')}</label>
-            <div className={styles.input__edit}>
-              <Select
-                id="city"
-                name="city"
-                options={updatedCities('IN', userData.address.state.isoCode)}
-                defaultValue={userData.address.district}
-                isDisabled={editable2}
-                isSearchable={!editable2}
-                onChange={(e) => {
-                  setUserData({
-                    ...userData,
-                    address: {
-                      ...userData.address,
-                      district: e
-                    }
-                  })
-                }}
-                styles={customStyles}
-              />
-              <EditButton
-                onClick={handleEdit2}
-                enabled={!editable2 ? '1' : '0'}
-              />
-            </div>
-          </div>
         </div>
         <div className={styles.address__container}>
           <UpdateInput
@@ -225,20 +210,20 @@ const Address = () => {
             placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
           />
           <UpdateInput
-            id="pincode"
-            label={t('PINCODE')}
-            defaultValue={userData.address.pincode}
+            id="postOffice"
+            label={t('POST_OFFICE')}
+            defaultValue={userData.address.postOffice}
             type="text"
             onChange={(e) => {
               setUserData({
                 ...userData,
                 address: {
                   ...userData.address,
-                  pincode: e.target.value
+                  postOffice: e.target.value
                 }
               })
             }}
-            placeholder={t('ENTER_YOUR_AREA_PINCODE')}
+            placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
           />
           <UpdateInput
             id="landmark"
diff --git a/client/yarn.lock b/client/yarn.lock
index d436e47..dee27d8 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -7959,6 +7959,11 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-pincode@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-pincode/-/react-pincode-1.1.3.tgz#25e582f8473d8e83ed276cb2ed173482183093b9"
+  integrity sha512-21GHGpYvB9p4Dd176Ifjmepy115/OmVQ/u0rCTOIin0YNuuHOP5m0BTOkPLVCqPn13V35V1clHegQKeZwR+fUQ==
+
 react-query@^3.39.2:
   version "3.39.2"
   resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.2.tgz#9224140f0296f01e9664b78ed6e4f69a0cc9216f"