Merge pull request #14 from Blaster4385/develop
Misc changes and add more translation
This commit is contained in:
commit
772fc663fd
29 changed files with 298 additions and 178 deletions
27
admin/public/assets/images/error.svg
Normal file
27
admin/public/assets/images/error.svg
Normal file
|
@ -0,0 +1,27 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="256" height="256" viewBox="0 0 64 64"
|
||||
style=" fill:#000000;">
|
||||
<path fill="#FAB400" d="M44,14v41c0,0.55-0.44,1-1,1H9c-0.55,0-1-0.45-1-1V5c0-0.55,0.45-1,1-1h25L44,14z"></path>
|
||||
<path fill="#DC9600"
|
||||
d="M44,46.307v8.28l-7.526-7.557c-0.361-0.351-0.403-0.919-0.103-1.342l-2.282-2.271 c-2.416,1.807-5.42,2.891-8.673,2.891c-7.981,0-14.454-6.484-14.454-14.454c0-7.991,6.473-14.454,14.454-14.454 S39.87,23.861,39.87,31.852c0,3.232-1.063,6.215-2.87,8.631v0.01l2.292,2.271c0.413-0.258,0.96-0.207,1.311,0.134L44,46.307z">
|
||||
</path>
|
||||
<rect width="3.999" height="4.487" x="34.998" y="38.757" fill="#F0F0F0" transform="rotate(-45.001 36.997 41)">
|
||||
</rect>
|
||||
<path fill="#0A5078"
|
||||
d="M27.557,16.102c6.095,0.751,11.09,5.56,12.045,11.626c0.627,3.985-0.436,7.741-2.602,10.624v0.01 c-0.8,1.07-1.75,2.02-2.82,2.83c-2.893,2.163-6.657,3.257-10.669,2.62c-6.087-0.967-10.905-5.99-11.63-12.111 C10.804,22.609,18.458,14.981,27.557,16.102z">
|
||||
</path>
|
||||
<path fill="#DC9600" d="M44.02,16H34c-1.105,0-2-0.895-2-2V4h2.003L44,13.98L44.02,16z"></path>
|
||||
<path fill="#FAB400" d="M44,14h-9c-0.552,0-1-0.448-1-1V4L44,14z"></path>
|
||||
<path fill="#00143C"
|
||||
d="M25.009,10h-12c-0.552,0-1,0.448-1,1s0.448,1,1,1h12c0.552,0,1-0.448,1-1S25.561,10,25.009,10z"></path>
|
||||
<path fill="#00143C"
|
||||
d="M31.009,50h-18c-0.552,0-1,0.448-1,1s0.448,1,1,1h18c0.552,0,1-0.448,1-1S31.561,50,31.009,50z"></path>
|
||||
<path fill="#00143C" d="M18.009,46h-5c-0.552,0-1,0.448-1,1s0.448,1,1,1h5c0.552,0,1-0.448,1-1S18.561,46,18.009,46z">
|
||||
</path>
|
||||
<circle cx="26" cy="30" r="10" fill="#FAB400"></circle>
|
||||
<path fill="#C80A50"
|
||||
d="M29.009,29.993l2.293-2.293c0.391-0.391,0.391-1.024,0-1.414L29.716,24.7 c-0.391-0.391-1.024-0.391-1.414,0l-2.293,2.293L23.716,24.7c-0.391-0.391-1.024-0.391-1.414,0l-1.586,1.586 c-0.391,0.391-0.391,1.024,0,1.414l2.293,2.293l-2.293,2.293c-0.391,0.391-0.391,1.024,0,1.414l1.586,1.586 c0.391,0.391,1.024,0.391,1.414,0l2.293-2.293l2.293,2.293c0.391,0.391,1.024,0.391,1.414,0l1.586-1.586 c0.391-0.391,0.391-1.024,0-1.414L29.009,29.993z">
|
||||
</path>
|
||||
<path fill="#0A5078"
|
||||
d="M55.159,59.183c-1.1,1.1-2.89,1.1-4,0l-14.44-14.48c-0.35-0.35-0.39-0.9-0.1-1.3 c0.03-0.04,0.06-0.08,0.1-0.12l2.58-2.58c0.05-0.05,0.1-0.09,0.15-0.13c0.4-0.25,0.93-0.21,1.27,0.13l14.44,14.48 C56.249,56.253,56.289,58.063,55.159,59.183z">
|
||||
</path>
|
||||
</svg>
|
After Width: | Height: | Size: 2.4 KiB |
29
admin/src/components/Error/Error.jsx
Normal file
29
admin/src/components/Error/Error.jsx
Normal file
|
@ -0,0 +1,29 @@
|
|||
import React, { useEffect } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { initialUserData } from '../../constants/userData'
|
||||
import { userContext } from '../../context/User'
|
||||
|
||||
import styles from './Error.module.css'
|
||||
|
||||
const Error = ({ message }) => {
|
||||
const navigate = useNavigate()
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
navigate('/')
|
||||
}, 3000)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.error}>
|
||||
<img
|
||||
src={`${process.env.PUBLIC_URL}/assets/images/error.svg`}
|
||||
className={styles.error__image}
|
||||
/>
|
||||
<h1 className={styles.error__title}>{message}</h1>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Error
|
19
admin/src/components/Error/Error.module.css
Normal file
19
admin/src/components/Error/Error.module.css
Normal file
|
@ -0,0 +1,19 @@
|
|||
.error {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error__title {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: var(--font-large);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error__image {
|
||||
margin-left: 40px;
|
||||
}
|
16
admin/src/components/Spinner/Spinner.jsx
Normal file
16
admin/src/components/Spinner/Spinner.jsx
Normal file
|
@ -0,0 +1,16 @@
|
|||
import React from 'react'
|
||||
import CircularProgress from '@mui/material/CircularProgress'
|
||||
import Header from '../Header/Header'
|
||||
import styles from './Spinner.module.css'
|
||||
|
||||
const Spinner = ({ heading }) => {
|
||||
console.log(heading)
|
||||
return (
|
||||
<div className={styles.spinner}>
|
||||
<Header subheading={heading} />
|
||||
<CircularProgress />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Spinner
|
6
admin/src/components/Spinner/Spinner.module.css
Normal file
6
admin/src/components/Spinner/Spinner.module.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
.spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
|
@ -10,14 +10,24 @@ import {
|
|||
import {useQuery, useMutation} from 'react-query';
|
||||
|
||||
import styles from './UnverifiedUsers.module.css';
|
||||
import Spinner from '../../components/Spinner/Spinner';
|
||||
|
||||
const UnverifiedUsers = () => {
|
||||
const {data} = useQuery('unverified', getUnverifiedUsers);
|
||||
const {data, isLoading, isError} = useQuery('unverified', getUnverifiedUsers);
|
||||
const deleteUse = useMutation((id) => deleteUser(id));
|
||||
const updateUse = useMutation((id) => updateUser(id, {verified: true}));
|
||||
|
||||
useEffect(() => {}, [data]);
|
||||
|
||||
if (isLoading) {
|
||||
return <Spinner heading='Admin' />
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return <div>Error</div>
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.unverified_users}>
|
||||
<Header subheading='Admin' />
|
||||
|
|
|
@ -103,8 +103,45 @@
|
|||
"STATUS": "Status",
|
||||
"ENROLLMENT_STATUS": "Enrollment Status",
|
||||
"YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE": "Your Aadhaar enrollment request is in process.",
|
||||
"PLEASE_HAVE_PATIENCE": "Please have patience, and wait for maximum 48hrs",
|
||||
"PLEASE_HAVE_PATIENCE": "Please have patience, and wait for minimum 48hrs",
|
||||
"YOUR_AADHAAR_STATUS_IS_APPROVED": "Your Aadhaar enrollment request has been approved",
|
||||
"PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE": "You may now print your Aadhaar card from the official website",
|
||||
"BACK_TO_HOME": "Back to Home"
|
||||
"BACK_TO_HOME": "Back to Home",
|
||||
"FILL_YOUR_INFORMATION": "Fill your information",
|
||||
"SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX": "Select your residency by selecting the appropriate checkbox",
|
||||
"ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION": "Enter your full name without any title or salutation",
|
||||
"SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD": "Select your gender by clicking on the appropriate card",
|
||||
"SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER": "Select your date of birth from the provided calender",
|
||||
"ENTER_YOUR_10_DIGIT_MOBILE_NUMBER_WITHOUT_ANY_PREFIX_OR_COUNTRY_ID": "Enter your 10 digit mobile number without any prefix or country ID",
|
||||
"ENTER_YOUR_DETAILS_ACCORDING_TO_THE_RELEVANT_FIELDS": "Enter your details according to the relevant fields",
|
||||
"SELECT_THE_STATE_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST": "Select the state you belong to from the dropdown list",
|
||||
"SELECT_THE_DISTRICT_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST": "Select the district you belong to from the dropdown list",
|
||||
"CAPTURE_YOUR_PHOTO": "Capture your photo",
|
||||
"ENSURE_THAT_YOUR_PHOTO_IS_CLEAR_AND_IN_FOCUS": "Ensure that your photo is clear and in focus",
|
||||
"ALSO_ENSURE_THAT_YOU_ARE_IN_THE_CENTER_OF_YOUR_PHOTO": "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": "You won't be able to proceed until you have captured a clear and centered photo",
|
||||
"PLEASE_CAPTURE_CLEAR_PHOTOGRAPH": "Please capture clear photograph",
|
||||
"PLEASE_WAIT": "Please wait",
|
||||
"SCAN_YOUR_DOCUMENTS": "Scan your documents",
|
||||
"CONSISTS_OF_3_STEPS": "Consists of 3 steps",
|
||||
"ENSURE_THAT_YOUR_DOCUMENTS_ARE_IN_THE_CENTER_OF_THE_FRAME": "Ensure that your documents are in the center of the frame",
|
||||
"YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_SCANNED_ALL_THE_REQUIRED_DOCUMENTS": "You won't be able to proceed until you have scanned all the required documents",
|
||||
"CLICK_ON_SEND_OTP": "Click on \"Send OTP\"",
|
||||
"YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET": "You can resend the OTP after 30 seconds if you haven't received it yet",
|
||||
"CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER": "Click on Verify OTP to verify your mobile number",
|
||||
"VERIFY_YOUR_MOBILE_NUMBER": "Verify your mobile number",
|
||||
"UPDATE_THE_REQUIRED_DETAILS_IN_THE_RELEVANT_FIELDS_BY_CLICKING_THE_EDIT_BUTTON": "Update the required details in the relevant fields by clicking the edit button",
|
||||
"IF_REQUIRED_SELECT_THE_STATE_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST": "If required, select the state you belong to from the dropdown list",
|
||||
"IF_REQUIRED_SELECT_THE_DISTRICT_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST_THIS_WONT_SHOW_ANY_OPTIONS_UNTIL_YOU_HAVE_SELECTED_THE_STATE": "If required, select the district you belong to from the dropdown list. This won't show any options until you have selected the state",
|
||||
"YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER": "You will receive an OTP on your mobile number",
|
||||
"CLICK_ON_THE_EDIT_BUTTON_TO_UPDATE_THE_REQUIRED_BIOMETRICS": "Click on the edit button to update the required biometrics",
|
||||
"YOU_CAN_EDIT_YOUR_PHOTOGRAPH_/_FINGERPRINTS_/_IRIS_SCANS": "You can edit your photograph / fingerprints / iris scans",
|
||||
"SELECT_THE_OPTION_TO_BE_EDITED": "Select the option to be edited",
|
||||
"CHECK_STATUS": "Check Status",
|
||||
"PROVIDE_YOUR_EID_NUMBER": "Provide your EID number",
|
||||
"UPDATE_STATUS": "Update Status",
|
||||
"APPROVED": "Approved",
|
||||
"YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "Your Aadhaar update status is approved",
|
||||
"ENTER_YOUR_EID_NUMBER": "Enter your EID number",
|
||||
"PENDING": "Pending"
|
||||
}
|
||||
|
|
|
@ -102,5 +102,45 @@
|
|||
"YOU_HAVENT_UPDATED_ANYTHING_DIRECTING_YOU_TO_MAIN_PAGE": "आपने कोई भी अपडेट नहीं किया है, आपको मुखपृष्ठ पर भेजा जा रहा हैं",
|
||||
"STATUS": "स्थिति",
|
||||
"ENROLLMENT_STATUS": "नामांकन की स्थिति",
|
||||
"BACK_TO_HOME": "मुखपृष्ठ पर वापस"
|
||||
"BACK_TO_HOME": "मुखपृष्ठ पर वापस",
|
||||
"FILL_YOUR_INFORMATION": "अपनी जानकारी भरें",
|
||||
"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": "प्रदान किए गए कैलेंडर से अपनी जन्मतिथि चुनें",
|
||||
"ENTER_YOUR_10_DIGIT_MOBILE_NUMBER_WITHOUT_ANY_PREFIX_OR_COUNTRY_ID": "कोई उपसर्ग या देश आईडी बिना अपना 10 अंकों का मोबाइल नंबर दर्ज करें",
|
||||
"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": "ड्रॉपडाउन सूची से जिस जिले में आप शामिल हैं उसे चुनें",
|
||||
"CAPTURE_YOUR_PHOTO": "अपनी तस्वीर लें",
|
||||
"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": "जब तक आप एक स्पष्ट और केंद्रित तस्वीर लेने तक आप आगे नहीं बढ़ सकते हैं",
|
||||
"PLEASE_CAPTURE_CLEAR_PHOTOGRAPH": "कृपया स्पष्ट तस्वीर लें",
|
||||
"PLEASE_WAIT": "कृपया प्रतीक्षा करें",
|
||||
"SCAN_YOUR_DOCUMENTS": "अपने दस्तावेज़ों को स्कैन करें",
|
||||
"CONSISTS_OF_3_STEPS": "3 चरणों का अवलोकन करें",
|
||||
"ENSURE_THAT_YOUR_DOCUMENTS_ARE_IN_THE_CENTER_OF_THE_FRAME": "यह सुनिश्चित करें कि आपके दस्तावेज़ केंद्र में हैं",
|
||||
"YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_SCANNED_ALL_THE_REQUIRED_DOCUMENTS": "जब तक आप सभी आवश्यक दस्तावेज़ों को स्कैन नहीं करते तब तक आप आगे नहीं बढ़ सकते हैं",
|
||||
"CLICK_ON_SEND_OTP": "ओटीपी भेजने पर क्लिक करें",
|
||||
"YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET": "यदि आपने अभी तक इसे प्राप्त नहीं किया है तो आप 30 सेकंड के बाद ओटीपी को फिर से भेज सकते हैं",
|
||||
"CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER": "अपना मोबाइल नंबर सत्यापित करने के लिए ओटीपी सत्यापित करने पर क्लिक करें",
|
||||
"VERIFY_YOUR_MOBILE_NUMBER": "अपना मोबाइल नंबर सत्यापित करें",
|
||||
"UPDATE_THE_REQUIRED_DETAILS_IN_THE_RELEVANT_FIELDS_BY_CLICKING_THE_EDIT_BUTTON": "संशोधित बटन पर क्लिक करके उपयुक्त फ़ील्ड में आवश्यक विवरणों को अपडेट करें",
|
||||
"IF_REQUIRED_SELECT_THE_STATE_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST": "यदि आवश्यक हो तो ड्रॉपडाउन सूची से आपके जिस राज्य में आप हैं उसे चुनें",
|
||||
"IF_REQUIRED_SELECT_THE_DISTRICT_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST_THIS_WONT_SHOW_ANY_OPTIONS_UNTIL_YOU_HAVE_SELECTED_THE_STATE": "यदि आवश्यक हो तो ड्रॉपडाउन सूची से आपके जिस जिले में आप हैं उसे चुनें, यह राज्य का चयन करने तक कोई विकल्प नहीं दिखाएगा",
|
||||
"YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER": "आपको अपने मोबाइल नंबर पर एक ओटीपी प्राप्त होगा",
|
||||
"CLICK_ON_THE_EDIT_BUTTON_TO_UPDATE_THE_REQUIRED_BIOMETRICS": "आवश्यक बीयमेट्री को अपडेट करने के लिए बटन पर क्लिक करें",
|
||||
"YOU_CAN_EDIT_YOUR_PHOTOGRAPH_/_FINGERPRINTS_/_IRIS_SCANS": "आप अपने फोटो/फिंगरप्रिंट/आईरिस स्कैन संपादित कर सकते हैं",
|
||||
"SELECT_THE_OPTION_TO_BE_EDITED": "संपादित करने के लिए विकल्प चुनें",
|
||||
"CHECK_STATUS": "स्थिति की जाँच करें",
|
||||
"PROVIDE_YOUR_EID_NUMBER": "अपना ईडी नंबर दर्ज करें",
|
||||
"UPDATE_STATUS": "अपडेट की स्तिथि",
|
||||
"APPROVED": "स्वीकृत",
|
||||
"YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "आपका आधार अपडेट स्तिथि स्वीकृत है",
|
||||
"ENTER_YOUR_EID_NUMBER": "अपना ईडी नंबर दर्ज करें",
|
||||
"YOUR_AADHAAR_STATUS_IS_APPROVED": "आपका आधार नामांकन अनुरोध स्वीकृत हो गया है",
|
||||
"PENDING": "लंबित",
|
||||
"YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE": "आपका आधार नामांकन अनुरोध प्रक्रिया में है",
|
||||
"PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें"
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react'
|
|||
import { Modal, Box, Button } from '@mui/material'
|
||||
import styles from './Modal.module.css'
|
||||
import { Container } from '@mui/system'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const PopUpModal = ({ title, description, image }) => {
|
||||
const style = {
|
||||
|
@ -15,6 +16,7 @@ const PopUpModal = ({ title, description, image }) => {
|
|||
boxShadow: 24,
|
||||
p: 4
|
||||
}
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const handleOpen = () => setOpen(true)
|
||||
const handleClose = () => setOpen(false)
|
||||
|
@ -36,7 +38,7 @@ const PopUpModal = ({ title, description, image }) => {
|
|||
>
|
||||
<Box sx={style}>
|
||||
<h1 id="modal-modal-title" className={styles.modal__title}>
|
||||
{title}
|
||||
{t(`${title}`)}
|
||||
</h1>
|
||||
<Container sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<img
|
||||
|
|
18
client/src/components/Spinner/Spinner.jsx
Normal file
18
client/src/components/Spinner/Spinner.jsx
Normal file
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
import CircularProgress from '@mui/material/CircularProgress'
|
||||
import Header from '../Header/Header'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import styles from './Spinner.module.css'
|
||||
|
||||
const Spinner = ({ heading }) => {
|
||||
const { t } = useTranslation()
|
||||
console.log(heading)
|
||||
return (
|
||||
<div className={styles.spinner}>
|
||||
<Header subheading={`${t(`${heading}`)}`} />
|
||||
<CircularProgress />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Spinner
|
6
client/src/components/Spinner/Spinner.module.css
Normal file
6
client/src/components/Spinner/Spinner.module.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
.spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
|
@ -46,9 +46,6 @@ const EnrollmentStatus = () => {
|
|||
<p className={styles.status__content}>
|
||||
{t('YOUR_AADHAAR_STATUS_IS_APPROVED')}
|
||||
</p>
|
||||
<p className={styles.status__content}>
|
||||
{t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
|
|
|
@ -12,6 +12,7 @@ import { toast, ToastContainer } from 'react-toastify'
|
|||
import PopUpModal from '../../components/Modal/Modal'
|
||||
|
||||
import styles from './StatusOtp.module.css'
|
||||
import Spinner from '../../components/Spinner/Spinner'
|
||||
|
||||
const StatusOtp = () => {
|
||||
const navigate = useNavigate()
|
||||
|
@ -68,7 +69,7 @@ const StatusOtp = () => {
|
|||
}
|
||||
})
|
||||
if (isLoading) {
|
||||
return <div>{t('loading')}</div>
|
||||
return <Spinner heading='STATUS' />
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
|
@ -85,7 +86,7 @@ const StatusOtp = () => {
|
|||
})
|
||||
|
||||
if (isLoading) {
|
||||
return <div>{t('loading')}</div>
|
||||
return <Spinner heading='STATUS' />
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
|
@ -97,6 +98,8 @@ const StatusOtp = () => {
|
|||
}
|
||||
}
|
||||
|
||||
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
|
||||
|
@ -106,22 +109,12 @@ const StatusOtp = () => {
|
|||
/>
|
||||
<Header subheading={`${t('STATUS')}`} />
|
||||
<PopUpModal
|
||||
title="Verify your mobile number"
|
||||
title="VERIFY_YOUR_MOBILE_NUMBER"
|
||||
image={`${process.env.PUBLIC_URL}/assets/images/otp.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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -46,9 +46,6 @@ const UpdateStatus = () => {
|
|||
<p className={styles.status__content}>
|
||||
{t('YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED')}
|
||||
</p>
|
||||
<p className={styles.status__content}>
|
||||
{t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -55,28 +55,18 @@ const Address = () => {
|
|||
setEditable2(!editable2)
|
||||
}
|
||||
|
||||
const description = ['UPDATE_THE_REQUIRED_DETAILS_IN_THE_RELEVANT_FIELDS_BY_CLICKING_THE_EDIT_BUTTON', 'IF_REQUIRED_SELECT_THE_STATE_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST', 'IF_REQUIRED_SELECT_THE_DISTRICT_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST_THIS_WONT_SHOW_ANY_OPTIONS_UNTIL_YOU_HAVE_SELECTED_THE_STATE']
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header subheading={t('UPDATE')} />
|
||||
<PopUpModal
|
||||
title="Fill your information"
|
||||
title="FILL_YOUR_INFORMATION"
|
||||
image={`${process.env.PUBLIC_URL}/assets/images/address.svg`}
|
||||
description={
|
||||
<>
|
||||
<ul>
|
||||
<li className="list__item">
|
||||
Update the required details in the relevant fields by clicking
|
||||
the edit button
|
||||
</li>
|
||||
<li className="list__item">
|
||||
If required, select the state you belong to. from the dropdown
|
||||
list
|
||||
</li>
|
||||
<li className="list__item">
|
||||
If required, select the district you belong to. from the
|
||||
dropdown list. This won't show any options until you have
|
||||
selected the state
|
||||
</li>
|
||||
{description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
|
||||
</ul>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -13,6 +13,8 @@ import { useMutation } from 'react-query'
|
|||
import { ToastContainer, toast } from 'react-toastify'
|
||||
import PopUpModal from '../../../components/Modal/Modal'
|
||||
import 'react-toastify/dist/ReactToastify.css'
|
||||
import Error from '../../Error/Error'
|
||||
import Spinner from '../../../components/Spinner/Spinner'
|
||||
|
||||
const Agreement = () => {
|
||||
const { t } = useTranslation()
|
||||
|
@ -32,6 +34,12 @@ const Agreement = () => {
|
|||
mobile: `+91${userData.mobile}`,
|
||||
id: userData._id
|
||||
})
|
||||
},
|
||||
onLoading: () => {
|
||||
return <Spinner heading='UPDATE' />
|
||||
},
|
||||
onError: () => {
|
||||
return <Error message={t('SOMETHING_WENT_WRONG_PLEASE_TRY_AGAIN')} />
|
||||
}
|
||||
}
|
||||
)
|
||||
|
@ -73,6 +81,8 @@ const Agreement = () => {
|
|||
}, 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
|
||||
|
@ -82,22 +92,12 @@ const Agreement = () => {
|
|||
/>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -82,7 +82,7 @@ const Biometric = () => {
|
|||
setUserData({ ...userData, photo: oriUserData.photo })
|
||||
} else if (
|
||||
predictions[0].class === 'person' &&
|
||||
predictions[0].score > 0.8
|
||||
predictions[0].score > 0.7
|
||||
) {
|
||||
setPage(4)
|
||||
} else {
|
||||
|
|
|
@ -8,21 +8,17 @@ import { useTranslation } from 'react-i18next'
|
|||
|
||||
const BiometricSelect = ({ page, setPage }) => {
|
||||
const { t } = useTranslation()
|
||||
const description = ['CLICK_ON_THE_EDIT_BUTTON_TO_UPDATE_THE_REQUIRED_BIOMETRICS', 'YOU_CAN_EDIT_YOUR_PHOTOGRAPH_/_FINGERPRINTS_/_IRIS_SCANS']
|
||||
return (
|
||||
<>
|
||||
<Header subheading={t('UPDATE')} />
|
||||
<PopUpModal
|
||||
title="Select the option to be edited"
|
||||
title="SELECT_THE_OPTION_TO_BE_EDITED"
|
||||
image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
|
||||
description={
|
||||
<>
|
||||
<ul>
|
||||
<li className="list__item">
|
||||
Click on the edit button to update the required biometrics
|
||||
</li>
|
||||
<li className="list__item">
|
||||
You can edit your Photograph/Fingerprints/Iris Scans
|
||||
</li>
|
||||
{description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
|
||||
</ul>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -199,31 +199,30 @@ const DocumentScanner = () => {
|
|||
return (
|
||||
<>
|
||||
<Header subheading={t('UPDATE')} />
|
||||
<PopUpModal
|
||||
title="Scan your documents"
|
||||
{steps.length !== 0 && (<PopUpModal
|
||||
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>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
/>)}
|
||||
<div className={styles.stepper__container}>
|
||||
<div className={styles.box}>
|
||||
<Stepper activeStep={activeStep} sx={{ width: '60%' }}>
|
||||
|
|
|
@ -32,34 +32,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('UPDATE')} />
|
||||
<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>
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -10,6 +10,7 @@ import { getUserByAadhaar, sendOTP } from '../../../services/apiservice'
|
|||
import SubmitButton from '../../../components/SubmitButton/SubmitButton'
|
||||
import { toast, ToastContainer } from 'react-toastify'
|
||||
import PopUpModal from '../../../components/Modal/Modal'
|
||||
import Spinner from '../../../components/Spinner/Spinner'
|
||||
|
||||
import styles from './Otp.module.css'
|
||||
|
||||
|
@ -63,7 +64,7 @@ const Otp = () => {
|
|||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <div>{t('loading')}</div>
|
||||
return <Spinner heading='UPDATE'/>
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
|
@ -73,6 +74,9 @@ const Otp = () => {
|
|||
if (data) {
|
||||
setOriUserData(data?.data)
|
||||
}
|
||||
|
||||
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
|
||||
|
@ -82,22 +86,12 @@ const Otp = () => {
|
|||
/>
|
||||
<Header subheading={`${t('UPDATE')}`} />
|
||||
<PopUpModal
|
||||
title="Verify your mobile number"
|
||||
title="VERIFY_YOUR_MOBILE_NUMBER"
|
||||
image={`${process.env.PUBLIC_URL}/assets/images/otp.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>
|
||||
</>
|
||||
}
|
||||
|
|
|
@ -30,25 +30,18 @@ const PhotoCapture = () => {
|
|||
}
|
||||
}
|
||||
|
||||
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('UPDATE')} />
|
||||
<PopUpModal
|
||||
title="Update 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>
|
||||
</>
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue