diff options
Diffstat (limited to 'client/src/pages/Enrollment')
4 files changed, 209 insertions, 14 deletions
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 |