diff options
62 files changed, 407 insertions, 42 deletions
diff --git a/client/public/assets/audios/please-capture-clear-photo-english.mp3 b/client/public/assets/audios/please-capture-clear-photo-english.mp3 Binary files differnew file mode 100644 index 0000000..9782676 --- /dev/null +++ b/client/public/assets/audios/please-capture-clear-photo-english.mp3 diff --git a/client/public/assets/audios/please-capture-clear-photo-hindi.mp3 b/client/public/assets/audios/please-capture-clear-photo-hindi.mp3 Binary files differnew file mode 100644 index 0000000..d9de5d5 --- /dev/null +++ b/client/public/assets/audios/please-capture-clear-photo-hindi.mp3 diff --git a/client/public/assets/audios/please-capture-photo-english.mp3 b/client/public/assets/audios/please-capture-photo-english.mp3 Binary files differnew file mode 100644 index 0000000..f48c834 --- /dev/null +++ b/client/public/assets/audios/please-capture-photo-english.mp3 diff --git a/client/public/assets/audios/please-capture-photo-hindi.mp3 b/client/public/assets/audios/please-capture-photo-hindi.mp3 Binary files differnew file mode 100644 index 0000000..aba61c9 --- /dev/null +++ b/client/public/assets/audios/please-capture-photo-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-area-pin-english.mp3 b/client/public/assets/audios/please-enter-area-pin-english.mp3 Binary files differnew file mode 100644 index 0000000..0e27ab1 --- /dev/null +++ b/client/public/assets/audios/please-enter-area-pin-english.mp3 diff --git a/client/public/assets/audios/please-enter-email-english.mp3 b/client/public/assets/audios/please-enter-email-english.mp3 Binary files differnew file mode 100644 index 0000000..7ffd86f --- /dev/null +++ b/client/public/assets/audios/please-enter-email-english.mp3 diff --git a/client/public/assets/audios/please-enter-email-hindi.mp3 b/client/public/assets/audios/please-enter-email-hindi.mp3 Binary files differnew file mode 100644 index 0000000..cb9ddda --- /dev/null +++ b/client/public/assets/audios/please-enter-email-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-house-no-english.mp3 b/client/public/assets/audios/please-enter-house-no-english.mp3 Binary files differnew file mode 100644 index 0000000..f616f7d --- /dev/null +++ b/client/public/assets/audios/please-enter-house-no-english.mp3 diff --git a/client/public/assets/audios/please-enter-house-no-hindi.mp3 b/client/public/assets/audios/please-enter-house-no-hindi.mp3 Binary files differnew file mode 100644 index 0000000..a6852a7 --- /dev/null +++ b/client/public/assets/audios/please-enter-house-no-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-landmark-english.mp3 b/client/public/assets/audios/please-enter-landmark-english.mp3 Binary files differnew file mode 100644 index 0000000..1e72bc1 --- /dev/null +++ b/client/public/assets/audios/please-enter-landmark-english.mp3 diff --git a/client/public/assets/audios/please-enter-locality-english.mp3 b/client/public/assets/audios/please-enter-locality-english.mp3 Binary files differnew file mode 100644 index 0000000..7aca22c --- /dev/null +++ b/client/public/assets/audios/please-enter-locality-english.mp3 diff --git a/client/public/assets/audios/please-enter-locality-hindi.mp3 b/client/public/assets/audios/please-enter-locality-hindi.mp3 Binary files differnew file mode 100644 index 0000000..25c36d9 --- /dev/null +++ b/client/public/assets/audios/please-enter-locality-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-mobile-english.mp3 b/client/public/assets/audios/please-enter-mobile-english.mp3 Binary files differnew file mode 100644 index 0000000..3672caa --- /dev/null +++ b/client/public/assets/audios/please-enter-mobile-english.mp3 diff --git a/client/public/assets/audios/please-enter-name-english.mp3 b/client/public/assets/audios/please-enter-name-english.mp3 Binary files differnew file mode 100644 index 0000000..6b80ffd --- /dev/null +++ b/client/public/assets/audios/please-enter-name-english.mp3 diff --git a/client/public/assets/audios/please-enter-name-hindi.mp3 b/client/public/assets/audios/please-enter-name-hindi.mp3 Binary files differnew file mode 100644 index 0000000..9c52a92 --- /dev/null +++ b/client/public/assets/audios/please-enter-name-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-pin-hindi.mp3 b/client/public/assets/audios/please-enter-pin-hindi.mp3 Binary files differnew file mode 100644 index 0000000..af56073 --- /dev/null +++ b/client/public/assets/audios/please-enter-pin-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-post-english.mp3 b/client/public/assets/audios/please-enter-post-english.mp3 Binary files differnew file mode 100644 index 0000000..aac27bd --- /dev/null +++ b/client/public/assets/audios/please-enter-post-english.mp3 diff --git a/client/public/assets/audios/please-enter-post-hindi.mp3 b/client/public/assets/audios/please-enter-post-hindi.mp3 Binary files differnew file mode 100644 index 0000000..7afe720 --- /dev/null +++ b/client/public/assets/audios/please-enter-post-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-street-english.mp3 b/client/public/assets/audios/please-enter-street-english.mp3 Binary files differnew file mode 100644 index 0000000..cd8ba95 --- /dev/null +++ b/client/public/assets/audios/please-enter-street-english.mp3 diff --git a/client/public/assets/audios/please-enter-street-hindi.mp3 b/client/public/assets/audios/please-enter-street-hindi.mp3 Binary files differnew file mode 100644 index 0000000..f899a11 --- /dev/null +++ b/client/public/assets/audios/please-enter-street-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-valid-email-english.mp3 b/client/public/assets/audios/please-enter-valid-email-english.mp3 Binary files differnew file mode 100644 index 0000000..fed4a30 --- /dev/null +++ b/client/public/assets/audios/please-enter-valid-email-english.mp3 diff --git a/client/public/assets/audios/please-enter-valid-email-hindi.mp3 b/client/public/assets/audios/please-enter-valid-email-hindi.mp3 Binary files differnew file mode 100644 index 0000000..a5efae0 --- /dev/null +++ b/client/public/assets/audios/please-enter-valid-email-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-valid-mobile-english.mp3 b/client/public/assets/audios/please-enter-valid-mobile-english.mp3 Binary files differnew file mode 100644 index 0000000..25c6f4c --- /dev/null +++ b/client/public/assets/audios/please-enter-valid-mobile-english.mp3 diff --git a/client/public/assets/audios/please-enter-valid-name-english.mp3 b/client/public/assets/audios/please-enter-valid-name-english.mp3 Binary files differnew file mode 100644 index 0000000..f0413aa --- /dev/null +++ b/client/public/assets/audios/please-enter-valid-name-english.mp3 diff --git a/client/public/assets/audios/please-enter-valid-name-hindi.mp3 b/client/public/assets/audios/please-enter-valid-name-hindi.mp3 Binary files differnew file mode 100644 index 0000000..ce293bf --- /dev/null +++ b/client/public/assets/audios/please-enter-valid-name-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-valid-pin-english.mp3 b/client/public/assets/audios/please-enter-valid-pin-english.mp3 Binary files differnew file mode 100644 index 0000000..01508b1 --- /dev/null +++ b/client/public/assets/audios/please-enter-valid-pin-english.mp3 diff --git a/client/public/assets/audios/please-enter-valid-pin-hindi.mp3 b/client/public/assets/audios/please-enter-valid-pin-hindi.mp3 Binary files differnew file mode 100644 index 0000000..09f2184 --- /dev/null +++ b/client/public/assets/audios/please-enter-valid-pin-hindi.mp3 diff --git a/client/public/assets/audios/please-enter-village-english.mp3 b/client/public/assets/audios/please-enter-village-english.mp3 Binary files differnew file mode 100644 index 0000000..2669b4a --- /dev/null +++ b/client/public/assets/audios/please-enter-village-english.mp3 diff --git a/client/public/assets/audios/please-enter-village-hindi.mp3 b/client/public/assets/audios/please-enter-village-hindi.mp3 Binary files differnew file mode 100644 index 0000000..ff3ec09 --- /dev/null +++ b/client/public/assets/audios/please-enter-village-hindi.mp3 diff --git a/client/public/assets/audios/please-select-district-english.mp3 b/client/public/assets/audios/please-select-district-english.mp3 Binary files differnew file mode 100644 index 0000000..9d2918b --- /dev/null +++ b/client/public/assets/audios/please-select-district-english.mp3 diff --git a/client/public/assets/audios/please-select-district-hindi.mp3 b/client/public/assets/audios/please-select-district-hindi.mp3 Binary files differnew file mode 100644 index 0000000..dd874c5 --- /dev/null +++ b/client/public/assets/audios/please-select-district-hindi.mp3 diff --git a/client/public/assets/audios/please-select-dob-english.mp3 b/client/public/assets/audios/please-select-dob-english.mp3 Binary files differnew file mode 100644 index 0000000..4d57dd0 --- /dev/null +++ b/client/public/assets/audios/please-select-dob-english.mp3 diff --git a/client/public/assets/audios/please-select-dob-hindi.mp3 b/client/public/assets/audios/please-select-dob-hindi.mp3 Binary files differnew file mode 100644 index 0000000..9c7d8c3 --- /dev/null +++ b/client/public/assets/audios/please-select-dob-hindi.mp3 diff --git a/client/public/assets/audios/please-select-landmark-hindi.mp3 b/client/public/assets/audios/please-select-landmark-hindi.mp3 Binary files differnew file mode 100644 index 0000000..56d96a3 --- /dev/null +++ b/client/public/assets/audios/please-select-landmark-hindi.mp3 diff --git a/client/public/assets/audios/please-select-mobile-hindi.mp3 b/client/public/assets/audios/please-select-mobile-hindi.mp3 Binary files differnew file mode 100644 index 0000000..6cd4f36 --- /dev/null +++ b/client/public/assets/audios/please-select-mobile-hindi.mp3 diff --git a/client/public/assets/audios/please-select-state-english.mp3 b/client/public/assets/audios/please-select-state-english.mp3 Binary files differnew file mode 100644 index 0000000..4f46236 --- /dev/null +++ b/client/public/assets/audios/please-select-state-english.mp3 diff --git a/client/public/assets/audios/please-select-state-hindi.mp3 b/client/public/assets/audios/please-select-state-hindi.mp3 Binary files differnew file mode 100644 index 0000000..a680a0e --- /dev/null +++ b/client/public/assets/audios/please-select-state-hindi.mp3 diff --git a/client/public/assets/audios/please-select-valid-mobile-hindi.mp3 b/client/public/assets/audios/please-select-valid-mobile-hindi.mp3 Binary files differnew file mode 100644 index 0000000..9f33713 --- /dev/null +++ b/client/public/assets/audios/please-select-valid-mobile-hindi.mp3 diff --git a/client/public/assets/audios/please-select-your-gender-english.mp3 b/client/public/assets/audios/please-select-your-gender-english.mp3 Binary files differnew file mode 100644 index 0000000..64b9b1b --- /dev/null +++ b/client/public/assets/audios/please-select-your-gender-english.mp3 diff --git a/client/public/assets/audios/please-select-your-gender-hindi.mp3 b/client/public/assets/audios/please-select-your-gender-hindi.mp3 Binary files differnew file mode 100644 index 0000000..a4bce38 --- /dev/null +++ b/client/public/assets/audios/please-select-your-gender-hindi.mp3 diff --git a/client/public/assets/audios/please-verify-otp-english.mp3 b/client/public/assets/audios/please-verify-otp-english.mp3 Binary files differnew file mode 100644 index 0000000..6877ae2 --- /dev/null +++ b/client/public/assets/audios/please-verify-otp-english.mp3 diff --git a/client/public/assets/audios/please-verify-otp-hindi.mp3 b/client/public/assets/audios/please-verify-otp-hindi.mp3 Binary files differnew file mode 100644 index 0000000..7fcd6b0 --- /dev/null +++ b/client/public/assets/audios/please-verify-otp-hindi.mp3 diff --git a/client/public/assets/audios/scan-documents-english.mp3 b/client/public/assets/audios/scan-documents-english.mp3 Binary files differnew file mode 100644 index 0000000..df1ea24 --- /dev/null +++ b/client/public/assets/audios/scan-documents-english.mp3 diff --git a/client/public/assets/audios/scan-documents-hindi.mp3 b/client/public/assets/audios/scan-documents-hindi.mp3 Binary files differnew file mode 100644 index 0000000..e3ab9c6 --- /dev/null +++ b/client/public/assets/audios/scan-documents-hindi.mp3 diff --git a/client/public/assets/audios/select-residency-english.mp3 b/client/public/assets/audios/select-residency-english.mp3 Binary files differnew file mode 100644 index 0000000..6aa3b4b --- /dev/null +++ b/client/public/assets/audios/select-residency-english.mp3 diff --git a/client/public/assets/audios/select-residency-hindi.mp3 b/client/public/assets/audios/select-residency-hindi.mp3 Binary files differnew file mode 100644 index 0000000..b420df6 --- /dev/null +++ b/client/public/assets/audios/select-residency-hindi.mp3 diff --git a/client/public/assets/images/back.svg b/client/public/assets/images/back.svg index 16b658a..23a27ad 100644 --- a/client/public/assets/images/back.svg +++ b/client/public/assets/images/back.svg @@ -1 +1 @@ -<?xml version="1.0"?><svg fill="#609db3" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" viewBox="0 0 24 24" width="192px" height="192px"> <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file +<?xml version="1.0"?><svg fill="#323c7a" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" viewBox="0 0 24 24" width="192px" height="192px"> <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file diff --git a/client/public/assets/images/help.svg b/client/public/assets/images/help.svg index 76f7223..1fdf451 100644 --- a/client/public/assets/images/help.svg +++ b/client/public/assets/images/help.svg @@ -1,6 +1,6 @@ <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="200" height="200" viewBox="0 0 512 512" style=" fill:#000000;"> - <path fill="#609db3" + <path fill="#323c7a" d="M504.1,256C504.1,119,393,7.9,256,7.9C119,7.9,7.9,119,7.9,256C7.9,393,119,504.1,256,504.1C393,504.1,504.1,393,504.1,256z"> </path> <path fill="#FFF" diff --git a/client/public/assets/images/language.svg b/client/public/assets/images/language.svg index 866056b..5d281f4 100644 --- a/client/public/assets/images/language.svg +++ b/client/public/assets/images/language.svg @@ -2,7 +2,7 @@ style=" fill:#000000;"> <path fill="#cfd8dc" d="M39,6H9C7.343,6,6,7.344,6,9v33l8.556-8H39c1.656,0,3-1.344,3-3V9C42,7.344,40.656,6,39,6z"> </path> - <path fill="#609db3" d="M20,6H9C7.343,6,6,7.344,6,9v33l8.556-8H27L20,6z"></path> + <path fill="#323c7a" d="M20,6H9C7.343,6,6,7.344,6,9v33l8.556-8H27L20,6z"></path> <path fill="#546e7a" d="M28.064,24.223c0.061-0.031,4.994-3.219,7.936-9.115L37.79,16c-3.082,6.25-7.457,9.292-8.509,10L28.064,24.223z"> </path> diff --git a/client/public/assets/images/next_icon.svg b/client/public/assets/images/next_icon.svg index 4e5714a..4b24a62 100644 --- a/client/public/assets/images/next_icon.svg +++ b/client/public/assets/images/next_icon.svg @@ -1 +1 @@ -<?xml version="1.0"?><svg fill="#609db3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="192px" height="192px"> <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file +<?xml version="1.0"?><svg fill="#323c7a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="192px" height="192px"> <path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10s10-4.477,10-10C22,6.477,17.523,2,12,2z M10.25,16.321L10.25,16.321 c-0.414-0.414-0.414-1.086,0-1.5L13.071,12L10.25,9.179c-0.414-0.414-0.414-1.086,0-1.5l0,0c0.414-0.414,1.086-0.414,1.5,0 l3.614,3.614c0.391,0.391,0.391,1.024,0,1.414l-3.614,3.614C11.336,16.735,10.664,16.735,10.25,16.321z"/></svg>
\ No newline at end of file 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> |
