diff options
Diffstat (limited to 'client/src/pages/Enrollment')
| -rw-r--r-- | client/src/pages/Enrollment/Address/Address.jsx | 15 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/Agreement/Agreement.jsx | 16 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx | 15 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/Enrollment.jsx | 6 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/FormOne/FormOne.jsx | 17 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/FormTwo/FormTwo.jsx | 11 | ||||
| -rw-r--r-- | client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 15 |
7 files changed, 31 insertions, 64 deletions
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx index 78b0737..fc27448 100644 --- a/client/src/pages/Enrollment/Address/Address.jsx +++ b/client/src/pages/Enrollment/Address/Address.jsx @@ -45,25 +45,18 @@ 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'] + return ( <> <Header subheading={t('ENROLLMENT')} /> <PopUpModal - title="Fill your information" + title="FILL_YOUR_INFORMATION" image={`${process.env.PUBLIC_URL}/assets/images/address.svg`} description={ <> <ul> - <li className="list__item"> - Enter your details according to the relevant fields - </li> - <li className="list__item"> - State: Select the state you belong to. from the dropdown list - </li> - <li className="list__item"> - District: Select the district you belong to. from the dropdown - list - </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 13b46ba..5b7950b 100644 --- a/client/src/pages/Enrollment/Agreement/Agreement.jsx +++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx @@ -46,6 +46,8 @@ 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'] + return ( <> <ToastContainer @@ -55,22 +57,12 @@ const Agreement = ({ unverified, setUnverified }) => { /> <Header subheading={t('ENROLLMENT')} /> <PopUpModal - title="Verify your mobile number" + title="VERIFY_YOUR_MOBILE_NUMBER" image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`} description={ <> <ul> - <li className="list__item">Click on "SEND OTP"</li> - <li className="list__item"> - You will recieve an OTP on your entered mobile number - </li> - <li className="list__item"> - You can "RESEND" the OTP after 30 seconds, if you - haven't received it yet. - </li> - <li className="list__item"> - Click on "VERIFY OTP" to verify your mobile number - </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 3f7b0f6..2e40523 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -148,25 +148,24 @@ const DocumentScanner = () => { <> <Header subheading={t('ENROLLMENT')} /> <PopUpModal - title="Scan your documents" + title="SCAN_YOUR_DOCUMENTS" image={`${process.env.PUBLIC_URL}/assets/images/document.svg`} description={ <> <ul> <li className="list__item"> - Consists of 3 steps : + {t('CONSISTS_OF_3_STEPS')} <ul> - <li>Proof of Identity: </li> - <li>Proof of Address: </li> - <li>Proof of Date of Birth: </li> + <li>{t('PROOF_OF_IDENTITY')} </li> + <li>{t(t('PROOF_OF_ADDRESS'))}</li> + <li>{t('PROOF_OF_DOB')} </li> </ul> </li> <li className="list__item"> - Ensure that your documents are in the center of the frame + {t('ENSURE_THAT_YOUR_DOCUMENTS_ARE_IN_THE_CENTER_OF_THE_FRAME')} </li> <li className="list__item"> - You won't 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/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index 35a599f..4d8fad2 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -28,6 +28,7 @@ import BackButton from '../../components/BackButton/BackButton' import { initialUserData } from '../../constants/userData' import * as cocoSsd from '@tensorflow-models/coco-ssd' import * as tf from '@tensorflow/tfjs' +import Spinner from '../../components/Spinner/Spinner' const Enrollment = () => { const { t } = useTranslation() @@ -73,6 +74,9 @@ const Enrollment = () => { }) setPage(page + 1) }, + onLoading: () => { + return <Spinner heading='ENROLLMENT' /> + }, onError: (error) => { console.log(error) if (error?.response?.data?.message === 'User already exists.') { @@ -152,7 +156,7 @@ const Enrollment = () => { toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH')) } else if ( predictions[0].class === 'person' && - predictions[0].score > 0.8 + predictions[0].score > 0.7 ) { setPage(page + 1) } else { diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx index fb37457..4fd2d41 100644 --- a/client/src/pages/Enrollment/FormOne/FormOne.jsx +++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx @@ -31,27 +31,18 @@ const FormOne = () => { } }, [userData.gender]) + const description = ['SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX', 'ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION', 'SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD', 'SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER'] + return ( <> <Header subheading={t('ENROLLMENT')} /> <PopUpModal - title="Fill your information" + title="FILL_YOUR_INFORMATION" image={`${process.env.PUBLIC_URL}/assets/images/id.svg`} description={ <> <ul> - <li className="list__item"> - Select your residency by selecting the appropriate checkbox - </li> - <li className="list__item"> - Enter your full name without any title or salutation - </li> - <li className="list__item"> - Select your gender by clicking on the appropriate card - </li> - <li className="list__item"> - Select your date of birth from the provided calender - </li> + {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))} </ul> </> } diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx index b4a53ed..e7c8ae1 100644 --- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx +++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx @@ -10,22 +10,17 @@ import PopUpModal from '../../../components/Modal/Modal' 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'] return ( <> <Header subheading={t('ENROLLMENT')} /> <PopUpModal - title="Fill your information" + title="FILL_YOUR_INFORMATION" image={`${process.env.PUBLIC_URL}/assets/images/communication.svg`} description={ <> <ul> - <li className="list__item"> - Enter your 10 digit mobile number without any prefix or country - code - </li> - <li className="list__item"> - Enter your email address in proper format - </li> + {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))} </ul> </> } diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx index 2430016..fd5a051 100644 --- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx +++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx @@ -20,25 +20,18 @@ 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'] + return ( <> <Header subheading={t('ENROLLMENT')} /> <PopUpModal - title="Capture your photo" + title="CAPTURE_YOUR_PHOTO" image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`} description={ <> <ul> - <li className="list__item"> - Ensure that your photo is clear and in focus - </li> - <li className="list__item"> - Also, ensure that you are in the center of your photo - </li> - <li className="list__item"> - You won't be able to proceed until you have captured a - clear and centered photo - </li> + {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))} </ul> </> } |