Merge branch 'develop' into develop

admin/src/components/Accordion/Accordion.module.css

@@ -1,5 +1,5 @@
 .accordion {
-  width: 1500px;
+  width: 800px;
   margin: 2rem auto;
 }
 

admin/src/services/apiservice.js

@@ -23,3 +23,8 @@ export const deleteUser = async (id) => {
   const response = await apiClient.delete(`/user/${id}`);
   return response;
 };
+
+export const updatingUsers = async () => {
+  const response = await apiClient.get(`/users/updating`);
+  return response;
+};

client/src/pages/CheckStatus/CheckStatus.jsx

@@ -10,6 +10,7 @@ import { userContext } from '../../context/User'
 
 import styles from './CheckStatus.module.css'
 import { useNavigate } from 'react-router-dom'
+import AudioAutoplay from '../../components/AudioAutoplay/AudioAutoplay'
 
 const CheckStatus = () => {
   const { t } = useTranslation()
@@ -28,6 +29,9 @@ const CheckStatus = () => {
         theme={'colored'}
       />
       <Header subheading={t('STATUS')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/check-status-main-screen`}
+      />
       <div className={styles.status}>
         <div className={styles.formone__radio}>
           <span className={styles.formone__status}>

client/src/pages/CheckStatus/EnrollmentStatus.jsx

@@ -6,6 +6,7 @@ import styles from './EnrollmentStatus.module.css'
 import { Button } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { userContext } from '../../context/User'
+import AudioAutoplay from '../../components/AudioAutoplay/AudioAutoplay'
 
 const EnrollmentStatus = () => {
   const { t } = useTranslation()
@@ -20,6 +21,9 @@ const EnrollmentStatus = () => {
         <h3 className={styles.status__title}>{t('STATUS')}</h3>
         {!userData?.verified ? (
           <>
+            <AudioAutoplay
+              audio={`${process.env.PUBLIC_URL}/assets/audios/your-aadhaar-enrollment-status-pending`}
+            />
             <img
               src={`${process.env.PUBLIC_URL}/assets/images/pending.svg`}
               alt=""
@@ -36,6 +40,9 @@ const EnrollmentStatus = () => {
           </>
         ) : (
           <>
+            <AudioAutoplay
+              audio={`${process.env.PUBLIC_URL}/assets/audios/your-aadhaar-enrollment-status-approved`}
+            />
             <img
               src={`${process.env.PUBLIC_URL}/assets/images/approved.svg`}
               alt=""

client/src/pages/CheckStatus/StatusOtp.jsx

@@ -10,6 +10,7 @@ import { getUserByAadhaar, sendOTP, getUser } from '../../services/apiservice'
 import SubmitButton from '../../components/SubmitButton/SubmitButton'
 import { toast, ToastContainer } from 'react-toastify'
 import PopUpModal from '../../components/Modal/Modal'
+import AudioAutoplay from '../../components/AudioAutoplay/AudioAutoplay'
 
 import styles from './StatusOtp.module.css'
 import Spinner from '../../components/Spinner/Spinner'
@@ -69,7 +70,7 @@ const StatusOtp = () => {
       }
     })
     if (isLoading) {
-      return <Spinner heading='STATUS' />
+      return <Spinner heading="STATUS" />
     }
 
     if (isError) {
@@ -86,7 +87,7 @@ const StatusOtp = () => {
     })
 
     if (isLoading) {
-      return <Spinner heading='STATUS' />
+      return <Spinner heading="STATUS" />
     }
 
     if (isError) {
@@ -98,7 +99,12 @@ const StatusOtp = () => {
     }
   }
 
-  const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+  const description = [
+    'CLICK_ON_SEND_OTP',
+    'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER',
+    'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET',
+    'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER'
+  ]
 
   return (
     <>
@@ -108,13 +114,20 @@ const StatusOtp = () => {
         theme={'colored'}
       />
       <Header subheading={`${t('STATUS')}`} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/otp-verification`}
+      />
       <PopUpModal
         title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/otp.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/CheckStatus/UpdateStatus.jsx

@@ -6,6 +6,7 @@ import styles from './EnrollmentStatus.module.css'
 import { Button } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { userContext } from '../../context/User'
+import AudioAutoplay from '../../components/AudioAutoplay/AudioAutoplay'
 
 const UpdateStatus = () => {
   const { t } = useTranslation()
@@ -20,6 +21,9 @@ const UpdateStatus = () => {
         <h3 className={styles.status__title}>{t('STATUS')}</h3>
         {userData?.isUpdating ? (
           <>
+            <AudioAutoplay
+              audio={`${process.env.PUBLIC_URL}/assets/audios/aadhaar-update-status-is-pending`}
+            />
             <img
               src={`${process.env.PUBLIC_URL}/assets/images/pending.svg`}
               alt=""
@@ -36,6 +40,9 @@ const UpdateStatus = () => {
           </>
         ) : (
           <>
+            <AudioAutoplay
+              audio={`${process.env.PUBLIC_URL}/assets/audios/aadhaar-update-status-is-approved`}
+            />
             <img
               src={`${process.env.PUBLIC_URL}/assets/images/approved.svg`}
               alt=""

client/src/pages/Enrollment/Address/Address.jsx

@@ -6,6 +6,7 @@ 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 styles from './Address.module.css'
 
@@ -46,18 +47,29 @@ const Address = () => {
     })
   }
 
-  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']
+  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'
+  ]
 
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/address`}
+      />
       <PopUpModal
         title="FILL_YOUR_INFORMATION"
         image={`${process.env.PUBLIC_URL}/assets/images/address.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Enrollment/Agreement/Agreement.jsx

@@ -11,6 +11,7 @@ import { useMutation } from 'react-query'
 import { ToastContainer, toast } from 'react-toastify'
 import PopUpModal from '../../../components/Modal/Modal'
 import 'react-toastify/dist/ReactToastify.css'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const Agreement = ({ unverified, setUnverified }) => {
   const { t } = useTranslation()
@@ -46,7 +47,12 @@ const Agreement = ({ unverified, setUnverified }) => {
     }, 30000)
   }
 
-  const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+  const description = [
+    'CLICK_ON_SEND_OTP',
+    'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER',
+    'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET',
+    'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER'
+  ]
 
   return (
     <>
@@ -56,13 +62,20 @@ const Agreement = ({ unverified, setUnverified }) => {
         theme={'colored'}
       />
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/otp-verification`}
+      />
       <PopUpModal
         title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx

@@ -9,6 +9,7 @@ import { userContext } from '../../../context/User'
 import { toast } from 'react-toastify'
 import PopUpModal from '../../../components/Modal/Modal'
 import { useStyles } from './styles'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const DocumentScanner = () => {
   const { t } = useTranslation()
@@ -147,6 +148,9 @@ const DocumentScanner = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/document`}
+      />
       <PopUpModal
         title="SCAN_YOUR_DOCUMENTS"
         image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
@@ -165,7 +169,9 @@ const DocumentScanner = () => {
                 {t('ENSURE_THAT_YOUR_DOCUMENTS_ARE_IN_THE_CENTER_OF_THE_FRAME')}
               </li>
               <li className="list__item">
-                {t('YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_SCANNED_ALL_THE_REQUIRED_DOCUMENTS')}
+                {t(
+                  'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_SCANNED_ALL_THE_REQUIRED_DOCUMENTS'
+                )}
               </li>
             </ul>
           </>

client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx

@@ -4,12 +4,16 @@ import CardScanner from '../../../components/Card/CardScanner'
 import styles from './FinalSlip.module.css'
 import { Grid, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const FinalSlip = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/enrollment-steps-completion`}
+      />
       <div className={styles.card__container}>
         <CardScanner
           image={`${process.env.PUBLIC_URL}/assets/images/slip.svg`}

client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx

@@ -6,12 +6,16 @@ import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
 import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const Fingerprint = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/fingerprint`}
+      />
       <PopUpModal
         title="Scan your Fingerprints"
         image={`${process.env.PUBLIC_URL}/assets/images/fingerprint_scan.svg`}

client/src/pages/Enrollment/FormOne/FormOne.jsx

@@ -46,7 +46,9 @@ const FormOne = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
-      <AudioAutoplay audio={`${process.env.PUBLIC_URL}/assets/audios/iris`} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/personal-details`}
+      />
       <PopUpModal
         title="FILL_YOUR_INFORMATION"
         image={`${process.env.PUBLIC_URL}/assets/images/id.svg`}

client/src/pages/Enrollment/FormTwo/FormTwo.jsx

@@ -6,21 +6,32 @@ import { userContext } from '../../../context/User'
 
 import styles from './FormTwo.module.css'
 import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const FormTwo = () => {
   const { t } = useTranslation()
   const { userData, setUserData } = userContext()
-  const description = ['ENTER_YOUR_10_DIGIT_MOBILE_NUMBER_WITHOUT_ANY_PREFIX_OR_COUNTRY_ID', 'ENTER_YOUR_EMAIL_ID']
+  const description = [
+    'ENTER_YOUR_10_DIGIT_MOBILE_NUMBER_WITHOUT_ANY_PREFIX_OR_COUNTRY_ID',
+    'ENTER_YOUR_EMAIL_ID'
+  ]
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/mobile-and-email-id`}
+      />
       <PopUpModal
         title="FILL_YOUR_INFORMATION"
         image={`${process.env.PUBLIC_URL}/assets/images/communication.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Enrollment/IrisScan/IrisScan.jsx

@@ -6,12 +6,14 @@ import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import PopUpModal from '../../../components/Modal/Modal'
 import { useTranslation } from 'react-i18next'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const IrisScan = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay audio={`${process.env.PUBLIC_URL}/assets/audios/iris`} />
       <PopUpModal
         title="Scan your Iris"
         image={`${process.env.PUBLIC_URL}/assets/images/iris_scan.svg`}

client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx

@@ -9,6 +9,7 @@ import { Button, Grid, Typography } from '@mui/material'
 import { t } from 'i18next'
 import { userContext } from '../../../context/User'
 import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const PhotoCapture = () => {
   const navigate = useNavigate()
@@ -20,18 +21,29 @@ const PhotoCapture = () => {
     setUserData({ ...userData, photo: imageSrc })
   })
 
-  const description = ['ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS', 'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO', 'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO']
+  const description = [
+    'ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS',
+    'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO',
+    'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
+  ]
 
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/photograph`}
+      />
       <PopUpModal
         title="CAPTURE_YOUR_PHOTO"
         image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Home/Home.jsx

@@ -5,6 +5,7 @@ import Card from '../../components/Card/Card'
 import Header from '../../components/Header/Header'
 import ExtendedPopUpModal from '../../components/Modal/ExtendedModal'
 import styles from './Home.module.css'
+import AudioAutoplay from '../../components/AudioAutoplay/AudioAutoplay'
 
 const Home = ({ page, setPage }) => {
   const { t } = useTranslation()
@@ -13,6 +14,9 @@ const Home = ({ page, setPage }) => {
   return (
     <>
       <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/main-screen`}
+      />
       <ExtendedPopUpModal
         title="Choose the appropriate card"
         description1="For enrollment of new Aadhaar card"

client/src/pages/Update/Address/Address.jsx

@@ -8,6 +8,7 @@ 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'
 
 const Address = () => {
   const { userData, setUserData } = userContext()
@@ -56,18 +57,29 @@ const Address = () => {
     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']
+  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'
+  ]
 
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/address-update`}
+      />
       <PopUpModal
         title="FILL_YOUR_INFORMATION"
         image={`${process.env.PUBLIC_URL}/assets/images/address.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Update/Agreement/Agreement.jsx

@@ -15,6 +15,7 @@ import PopUpModal from '../../../components/Modal/Modal'
 import 'react-toastify/dist/ReactToastify.css'
 import Error from '../../Error/Error'
 import Spinner from '../../../components/Spinner/Spinner'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const Agreement = () => {
   const { t } = useTranslation()
@@ -36,7 +37,7 @@ const Agreement = () => {
         })
       },
       onLoading: () => {
-        return <Spinner heading='UPDATE' />
+        return <Spinner heading="UPDATE" />
       },
       onError: () => {
         return <Error message={t('SOMETHING_WENT_WRONG_PLEASE_TRY_AGAIN')} />
@@ -81,7 +82,12 @@ const Agreement = () => {
     }, 30000)
   }
 
-  const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+  const description = [
+    'CLICK_ON_SEND_OTP',
+    'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER',
+    'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET',
+    'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER'
+  ]
 
   return (
     <>
@@ -91,13 +97,20 @@ const Agreement = () => {
         theme={'colored'}
       />
       <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/otp-verification`}
+      />
       <PopUpModal
         title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Update/BiometricSelect/BiometricSelect.jsx

@@ -5,20 +5,31 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { Link } from 'react-router-dom'
 import PopUpModal from '../../../components/Modal/Modal'
 import { useTranslation } from 'react-i18next'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const BiometricSelect = ({ page, setPage }) => {
   const { t } = useTranslation()
-  const description = ['CLICK_ON_THE_EDIT_BUTTON_TO_UPDATE_THE_REQUIRED_BIOMETRICS', 'YOU_CAN_EDIT_YOUR_PHOTOGRAPH_/_FINGERPRINTS_/_IRIS_SCANS']
+  const description = [
+    'CLICK_ON_THE_EDIT_BUTTON_TO_UPDATE_THE_REQUIRED_BIOMETRICS',
+    'YOU_CAN_EDIT_YOUR_PHOTOGRAPH_/_FINGERPRINTS_/_IRIS_SCANS'
+  ]
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/biometric-update`}
+      />
       <PopUpModal
         title="SELECT_THE_OPTION_TO_BE_EDITED"
         image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Update/DocumentScanner/DocumentScanner.jsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 import { toast } from 'react-toastify'
 import { useStyles } from './styles'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const DocumentScanner = () => {
   const { userData, oriUserData, setUserData } = userContext()
@@ -199,30 +200,39 @@ const DocumentScanner = () => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
-      {steps.length !== 0 && (<PopUpModal
-        title="SCAN_YOUR_DOCUMENTS"
-        image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
-        description={
-          <>
-            <ul>
-              <li className="list__item">
-                {t('CONSISTS_OF_3_STEPS')}
-                <ul>
-                  <li>{t('PROOF_OF_IDENTITY')} </li>
-                  <li>{t(t('PROOF_OF_ADDRESS'))}</li>
-                  <li>{t('PROOF_OF_DOB')} </li>
-                </ul>
-              </li>
-              <li className="list__item">
-                {t('ENSURE_THAT_YOUR_DOCUMENTS_ARE_IN_THE_CENTER_OF_THE_FRAME')}
-              </li>
-              <li className="list__item">
-                {t('YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_SCANNED_ALL_THE_REQUIRED_DOCUMENTS')}
-              </li>
-            </ul>
-          </>
-        }
-      />)}
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/update-document`}
+      />
+      {steps.length !== 0 && (
+        <PopUpModal
+          title="SCAN_YOUR_DOCUMENTS"
+          image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
+          description={
+            <>
+              <ul>
+                <li className="list__item">
+                  {t('CONSISTS_OF_3_STEPS')}
+                  <ul>
+                    <li>{t('PROOF_OF_IDENTITY')} </li>
+                    <li>{t(t('PROOF_OF_ADDRESS'))}</li>
+                    <li>{t('PROOF_OF_DOB')} </li>
+                  </ul>
+                </li>
+                <li className="list__item">
+                  {t(
+                    'ENSURE_THAT_YOUR_DOCUMENTS_ARE_IN_THE_CENTER_OF_THE_FRAME'
+                  )}
+                </li>
+                <li className="list__item">
+                  {t(
+                    'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_SCANNED_ALL_THE_REQUIRED_DOCUMENTS'
+                  )}
+                </li>
+              </ul>
+            </>
+          }
+        />
+      )}
       <div className={styles.stepper__container}>
         <div className={styles.box}>
           <Stepper activeStep={activeStep} sx={{ width: '60%' }}>

client/src/pages/Update/FinalSlip/FinalSlip.jsx

@@ -6,6 +6,7 @@ import { Grid, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useNavigate } from 'react-router-dom'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const FinalSlip = () => {
   const { t } = useTranslation()
@@ -13,6 +14,9 @@ const FinalSlip = () => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/update-message-notification`}
+      />
       <div className={styles.card__container}>
         <CardScanner
           image={`${process.env.PUBLIC_URL}/assets/images/slip.svg`}

client/src/pages/Update/Fingerprint/Fingerprint.jsx

@@ -6,12 +6,16 @@ import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
 import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const Fingerprint = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/fingerprint`}
+      />
       <PopUpModal
         title="Scan your Fingerprints"
         image={`${process.env.PUBLIC_URL}/assets/images/fingerprint_scan.svg`}

client/src/pages/Update/FormOne/FormOne.jsx

@@ -6,6 +6,7 @@ import EditButton from '../../../components/EditButton/EditButton'
 import Gender from '../../../components/Gender/Gender'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 import PopUpModal from '../../../components/Modal/Modal'
 import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'
 import { TextField } from '@mui/material'
@@ -36,18 +37,30 @@ const FormOne = () => {
     }
   }, [userData.gender])
 
-  const description = ['SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX', 'ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION', 'SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD', 'SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER']
+  const description = [
+    'SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX',
+    'ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION',
+    'SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD',
+    'SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER'
+  ]
 
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/demographic-personal-details-to-be-updated`}
+      />
       <PopUpModal
         title="FILL_YOUR_INFORMATION"
         image={`${process.env.PUBLIC_URL}/assets/images/id.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Update/IrisScan/IrisScan.jsx

@@ -6,12 +6,14 @@ import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
 import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const IrisScan = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay audio={`${process.env.PUBLIC_URL}/assets/audios/iris`} />
       <PopUpModal
         title="Scan your Iris"
         image={`${process.env.PUBLIC_URL}/assets/images/iris_scan.svg`}

client/src/pages/Update/Otp/Otp.jsx

@@ -11,6 +11,7 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { toast, ToastContainer } from 'react-toastify'
 import PopUpModal from '../../../components/Modal/Modal'
 import Spinner from '../../../components/Spinner/Spinner'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 import styles from './Otp.module.css'
 
@@ -64,7 +65,7 @@ const Otp = () => {
   }
 
   if (isLoading) {
-    return <Spinner heading='UPDATE'/>
+    return <Spinner heading="UPDATE" />
   }
 
   if (isError) {
@@ -75,7 +76,12 @@ const Otp = () => {
     setOriUserData(data?.data)
   }
 
-  const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+  const description = [
+    'CLICK_ON_SEND_OTP',
+    'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER',
+    'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET',
+    'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER'
+  ]
 
   return (
     <>
@@ -85,13 +91,20 @@ const Otp = () => {
         theme={'colored'}
       />
       <Header subheading={`${t('UPDATE')}`} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/otp-verification`}
+      />
       <PopUpModal
         title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/otp.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Update/PhotoCapture/PhotoCapture.jsx

@@ -9,6 +9,7 @@ import { Button, Grid, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
 import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 const PhotoCapture = () => {
   const { t } = useTranslation()
@@ -30,18 +31,29 @@ const PhotoCapture = () => {
     }
   }
 
-  const description = ['ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS', 'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO', 'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO']
+  const description = [
+    'ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS',
+    'ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO',
+    'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO'
+  ]
 
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/photograph-update`}
+      />
       <PopUpModal
         title="CAPTURE_YOUR_PHOTO"
         image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
         description={
           <>
             <ul>
-              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
             </ul>
           </>
         }

client/src/pages/Update/Update.jsx

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { ToastContainer, toast } from 'react-toastify'
 import { validAadhaar } from '../../constants/RegEx'
+import AudioAutoplay from '../../components/AudioAutoplay/AudioAutoplay'
 
 const Update = () => {
   const { aadhaarNumber, setAadhaarNumber } = userContext()
@@ -23,6 +24,9 @@ const Update = () => {
         theme={'colored'}
       />
       <Header subheading={`${t('UPDATE')}`} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/enter-aadhaar-no`}
+      />
       <div className={styles.subheading__container}>
         <h3 className={styles.subheading}>
           {t('PROVIDE_YOUR_AADHAAR_NUMBER')}

client/src/pages/Update/UpdateSelect/UpdateSelect.jsx

@@ -5,6 +5,7 @@ import Card from '../../../components/Card/Card'
 import Header from '../../../components/Header/Header'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { userContext } from '../../../context/User'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
 
 import styles from './UpdateSelect.module.css'
 
@@ -14,6 +15,9 @@ const UpdateSelect = () => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/choose-demographic-or-biometric`}
+      />
       <div className={styles.card__container}>
         <Link to="/update/demographic">
           <Card