diff options
Diffstat (limited to 'client/src')
12 files changed, 403 insertions, 38 deletions
diff --git a/client/src/components/BackButton/BackButton.jsx b/client/src/components/BackButton/BackButton.jsx index ff99eb6..fdb85f1 100644 --- a/client/src/components/BackButton/BackButton.jsx +++ b/client/src/components/BackButton/BackButton.jsx @@ -1,3 +1,4 @@ +import { Typography } from '@mui/material' import React from 'react' import styles from './BackButton.module.css' @@ -10,11 +11,14 @@ const BackButton = ({ onClick, onChange }) => { type="submit" onChange={onChange} > - <img - className={styles.submit__image} - src={`${process.env.PUBLIC_URL}/assets/images/back.svg`} - alt="" - /> + <div className={styles.submit__content}> + <img + className={styles.submit__image} + src={`${process.env.PUBLIC_URL}/assets/images/back.svg`} + alt="" + /> + <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Back</Typography> + </div> </button> </> ) diff --git a/client/src/components/BackButton/BackButton.module.css b/client/src/components/BackButton/BackButton.module.css index cc9b51c..40b6fcc 100644 --- a/client/src/components/BackButton/BackButton.module.css +++ b/client/src/components/BackButton/BackButton.module.css @@ -18,3 +18,9 @@ height: 75px; width: 75px; } + +.submit__content { + display:flex; + justify-content: center; + align-items: center; +}
\ No newline at end of file diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json index fbdf254..3adcc12 100644 --- a/client/src/components/LanguageSelect/locales/hi/translation.json +++ b/client/src/components/LanguageSelect/locales/hi/translation.json @@ -52,7 +52,7 @@ "ENSURE_THAT_RECIEVED_A_CONFIRMATION_MESSAGE": "कृपया सुनिश्चित करें कि आपको जाने से पहले एक पुष्टिकरण संदेश प्राप्त हुआ है", "PLEASE_PUT_YOUR_FINGERS_ON_THE_FINGERPRINT_SCANNER": "कृपया अपनी उंगलियों को एक-एक करके फ़िंगरप्रिंट स्कैनर पर रखें", "WAIT_FOR_PROMPT_AND_BEEP_SOUND_TO_REMOVE_YOUR_FINGERS": "अपनी उंगलियों को हटाने के लिए संकेत और बीप ध्वनि की प्रतीक्षा करें", - "PLEASE_VERIFY_YOUR_IDENTITY": "कृपया अपने पंजीकृत मोबाइल नंबर xxxxxxxx15 पर ओटीपी प्राप्त करके अपनी पहचान सत्यापित करें", + "PLEASE_VERIFY_YOUR_IDENTITY": "कृपया अपने पंजीकृत मोबाइल नंबर पर ओटीपी प्राप्त करके अपनी पहचान सत्यापित करें", "SEND_OTP": "ओटीपी भेजें", "RESEND": "फिर से भेजें", "VERIFY_OTP": "ओटीपी की पुष्टि करें", diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx index ed796d9..df1269f 100644 --- a/client/src/components/SubmitButton/SubmitButton.jsx +++ b/client/src/components/SubmitButton/SubmitButton.jsx @@ -1,5 +1,6 @@ import React from 'react' import styles from './SubmitButton.module.css' +import { Typography } from '@mui/material' const SubmitButton = ({ onClick, onChange, disabled }) => { return ( @@ -11,11 +12,14 @@ const SubmitButton = ({ onClick, onChange, disabled }) => { onChange={onChange} disabled={disabled} > + <div className={styles.submit__content}> + <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Save & Next</Typography> <img className={styles.submit__image} src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`} alt="" /> + </div> </button> </> ) diff --git a/client/src/components/SubmitButton/SubmitButton.module.css b/client/src/components/SubmitButton/SubmitButton.module.css index bb1b015..0105bbf 100644 --- a/client/src/components/SubmitButton/SubmitButton.module.css +++ b/client/src/components/SubmitButton/SubmitButton.module.css @@ -18,3 +18,9 @@ height: 75px; width: 75px; } + +.submit__content { + display:flex; + justify-content: center; + align-items: center; +}
\ No newline at end of file diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx index 598b8b7..1d7fdc0 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -21,6 +21,7 @@ const DocumentScanner = () => { ] const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' }) const [activeStep, setActiveStep] = React.useState(0) + const language = localStorage.getItem('i18nextLng') const [doccu] = useState({ POI: '', POA: '', DOB: '' }) @@ -49,6 +50,13 @@ const DocumentScanner = () => { (!documents.DOB && activeStep === 2) ) { toast.error(t('SCAN_YOUR_DOCUMENT')) + let audio + if (language === 'en') { + 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.play() } else { setActiveStep((prevActiveStep) => prevActiveStep + 1) } diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index 4d8fad2..f3b4c88 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -36,6 +36,7 @@ const Enrollment = () => { const { userData, setUserData } = userContext() const navigate = useNavigate() const [unverified, setUnverified] = useState(true) + const language = localStorage.getItem('i18nextLng') const [model, setModel] = useState() @@ -92,54 +93,170 @@ const Enrollment = () => { sendMessage(payload) }) + let audio + const handleSubmit = () => { if (page === 0) { 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-dob-hindi.mp3`) + } + audio.play() } else { setPage(page + 1) } } else if (page === 1) { 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-hindi.mp3`) + } + audio.play() } else { setPage(page + 1) } } else if (page === 2) { 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-hindi.mp3`) + } + audio.play() } else { setPage(page + 1) } @@ -154,21 +271,45 @@ const Enrollment = () => { if (predictions.length > 0) { 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-photo-hindi.mp3`) + } + audio.play() } else if ( predictions[0].class === 'person' && - predictions[0].score > 0.7 + predictions[0].score > 0.5 ) { setPage(page + 1) } 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-capture-clear-photo-hindi.mp3`) + } + audio.play() } }, 1000) } else if (page === 4) { 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/scan-documents-hindi.mp3`) + } + audio.play() } else { setPage(page + 1) } @@ -179,6 +320,12 @@ const Enrollment = () => { } else if (page === 7) { 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-verify-otp-hindi.mp3`) + } + audio.play() } else { mutate({ indianResident: userData.indianResident, @@ -272,9 +419,11 @@ const Enrollment = () => { return ( <> <ToastContainer - autoClose={1000} + autoClose={5000} hideProgressBar={true} theme={'colored'} + position="top-center" + style={{ fontSize: '1.5rem' }} /> {conditionalComponent()} {conditionalButton()} diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index ddd656c..7643f76 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -27,6 +27,25 @@ const PhotoCapture = () => { 'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO' ] + const svgIcon = () => ( + <svg + width="100%" + height="100%" + className="svg" + viewBox="0 0 300 200" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink"> + <defs> + <mask id="overlay-mask" x="0" y="0" width="100%" height="100%"> + <rect x="0" y="0" width="100%" height="100%" fill="#fff" /> + <circle cx="50%" cy="50%" r="70" /> + </mask> + </defs> + <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" /> + </svg> + ) + return ( <> <Header subheading={t('ENROLLMENT')} /> @@ -50,18 +69,24 @@ const PhotoCapture = () => { /> <div className={styles.card__container}> {!userData.photo ? ( - <Webcam - audio={false} - height={400} - ref={webcamRef} - screenshotFormat="image/jpeg" - width={600} - videoConstraints={{ - height: 400, - width: 600, - facingMode: 'user' - }} - /> + <div className={styles.webcam__container}> + <Webcam + audio={false} + height={400} + ref={webcamRef} + screenshotFormat="image/jpeg" + width={600} + videoConstraints={{ + height: 400, + width: 600, + facingMode: 'user' + }} + /> + <div className={styles.overlay__container}> + {svgIcon()} + </div> + </div> + ) : ( <img id="img" src={userData.photo} /> )} diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css index ad193e1..4a82e8e 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.module.css @@ -2,4 +2,17 @@ display: flex; justify-content: center; margin: 10px; +} + +.webcam__container { + position: relative; +} + +.overlay__container { + position: absolute ; + width: 100%; + top: 0 ; + right: 0 ; + bottom: 0 ; + left: 0; }
\ No newline at end of file diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx index 03f107a..9037028 100644 --- a/client/src/pages/Update/Demographic/Demographic.jsx +++ b/client/src/pages/Update/Demographic/Demographic.jsx @@ -24,25 +24,70 @@ const Demographic = () => { userContext() const navigate = useNavigate() + const language = localStorage.getItem('i18nextLng') const [page, setPage] = useState(0) + let audio + const handleSubmit = () => { if (page === 0) { 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-your-gender-hindi.mp3`) + } + audio.play() } else 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-email-hindi.mp3`) + } + audio.play() } else { setPage(page + 1) } @@ -51,24 +96,84 @@ const Demographic = () => { toast.error(t('PLEASE_SELECT_YOUR_COUNTRY')) } 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-district-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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-village-hindi.mp3`) + } + audio.play() } else 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-locality-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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-post-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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-select-landmark-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`) + } else if (language === 'hi') { + 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`) + } else if (language === 'hi') { + audio = new Audio(`${process.env.PUBLIC_URL}/assets/audios/please-enter-valid-pin-hindi.mp3`) + } + audio.play() } else { setPage(page + 1) } @@ -125,9 +230,11 @@ const Demographic = () => { return ( <> <ToastContainer - autoClose={1000} + autoClose={3000} hideProgressBar={true} theme={'colored'} + position="top-center" + style={{ fontSize: '1.5rem' }} /> {conditionalComponent()} {conditionalButton()} diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx index 86674af..4fa07fb 100644 --- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx @@ -71,6 +71,18 @@ const DocumentScanner = () => { }) }) + const language = localStorage.getItem('i18nextLng') + + let audio +const playAudio = () => { + if (language === 'en') { + 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.play() +} + const handleNext = () => { if ( activeStep === steps.length - 1 && @@ -81,18 +93,25 @@ const DocumentScanner = () => { setUserData({ ...userData, documents: documents }) } else if (documents.POI !== '' && documents.POA !== '') { toast.error(t('SCAN_YOUR_DOCUMENT')) + playAudio() } else if (documents.POI !== '' && documents.DOB !== '') { toast.error(t('SCAN_YOUR_DOCUMENT')) + playAudio() } else if (documents.POA !== '' && documents.DOB !== '') { toast.error(t('SCAN_YOUR_DOCUMENT')) + playAudio() } else if (documents.POI !== '') { toast.error(t('SCAN_YOUR_DOCUMENT')) + playAudio() } else if (documents.POA !== '') { toast.error(t('SCAN_YOUR_DOCUMENT')) + playAudio() } else if (documents.DOB !== '') { toast.error(t('SCAN_YOUR_DOCUMENT')) + playAudio() } else { toast.error(t('SCAN_YOUR_DOCUMENT')) + playAudio() } if ( diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx index b53752c..0b8b4cb 100644 --- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx @@ -37,6 +37,25 @@ const PhotoCapture = () => { 'YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_CAPTURED_A_CLEAR_AND_CENTERED_PHOTO' ] + const svgIcon = () => ( + <svg + width="100%" + height="100%" + className="svg" + viewBox="0 0 300 200" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlnsXlink="http://www.w3.org/1999/xlink"> + <defs> + <mask id="overlay-mask" x="0" y="0" width="100%" height="100%"> + <rect x="0" y="0" width="100%" height="100%" fill="#fff" /> + <circle cx="50%" cy="50%" r="70" /> + </mask> + </defs> + <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" /> + </svg> + ) + return ( <> <Header subheading={t('UPDATE')} /> @@ -58,23 +77,28 @@ const PhotoCapture = () => { </> } /> - <div className={styles.card__container}> - {userData?.photo === '' ? ( - <Webcam - audio={false} - height={300} - ref={webcamRef} - screenshotFormat="image/jpeg" - width={500} - videoConstraints={{ - height: 300, - width: 500, - facingMode: 'user' - }} - /> - ) : ( - <img id="img" src={userData?.photo} /> - )} + <div className={styles.webcam__container}> + <div className={styles.card__container}> + {userData?.photo === '' ? ( + <Webcam + audio={false} + height={300} + ref={webcamRef} + screenshotFormat="image/jpeg" + width={500} + videoConstraints={{ + height: 300, + width: 500, + facingMode: 'user' + }} + /> + ) : ( + <img id="img" src={userData?.photo} /> + )} + </div> + <div className={styles.overlay__container}> + {svgIcon()} + </div> </div> <Grid container columnSpacing={10} justifyContent="center"> <Grid item> |