diff options
Diffstat (limited to 'client/src/pages/Enrollment')
9 files changed, 76 insertions, 10 deletions
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index cb2db5a..194b66b 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/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> </> } diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx index 165ab4c..f5661f1 100644 --- a/client/src/pages/Enrollment/Agreement/Agreement.jsx +++ b/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> </> } diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx index d76bcb0..598b8b7 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/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> </> diff --git a/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx b/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx index 5b1b728..38c7855 100644 --- a/client/src/pages/Enrollment/FinalSlip/FinalSlip.jsx +++ b/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`} diff --git a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx index 9bf9adb..b0827ca 100644 --- a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx +++ b/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`} diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx index b6ab85d..abd52e9 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/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`} diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx index e7c8ae1..e245666 100644 --- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx +++ b/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> </> } diff --git a/client/src/pages/Enrollment/IrisScan/IrisScan.jsx b/client/src/pages/Enrollment/IrisScan/IrisScan.jsx index 24ce25c..840fe14 100644 --- a/client/src/pages/Enrollment/IrisScan/IrisScan.jsx +++ b/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`} diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index b5a800b..ddd656c 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/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> </> } |