diff options
Diffstat (limited to 'client/src/pages')
4 files changed, 136 insertions, 98 deletions
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx index cf74d46..d3a5b90 100644 --- a/client/src/pages/Enrollment/Agreement/Agreement.jsx +++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx @@ -68,6 +68,7 @@ const Agreement = ({ unverified, setUnverified }) => { type="submit" variant="contained" disabled={disabled} + sx={{ marginTop: '1rem' }} onClick={() => { mutate() setDisabled(true) diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx index 20ea7d2..86f53f4 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx @@ -3,15 +3,7 @@ import React, { useState } from 'react' import Webcam from 'react-webcam' import Header from '../../../components/Header/Header' import styles from './DocumentScanner.module.css' -import { - Button, - Grid, - Typography, - StepLabel, - Step, - Stepper, - Box -} from '@mui/material' +import { Button, Typography, StepLabel, Step, Stepper } from '@mui/material' import SubmitButton from '../../../components/SubmitButton/SubmitButton' import { useTranslation } from 'react-i18next' import { userContext } from '../../../context/User' @@ -45,15 +37,15 @@ const DocumentScanner = () => { DOB: doccu.DOB }) }) - + console.log(activeStep) const handleNext = () => { if (activeStep === steps.length - 1) { setUserData({ ...userData, documents: documents }) } if ( - !userData.documents.POI || - !userData.documents.POA || - !userData.documents.DOB + (!documents.POI && activeStep === 0) || + (!documents.POA && activeStep === 1) || + (!documents.DOB && activeStep === 2) ) { toast.error(t('SCAN_YOUR_DOCUMENT')) } else { @@ -68,67 +60,85 @@ const DocumentScanner = () => { const WebcamComponent = ({ doc }) => { return ( <> - <div className={styles.card__container}> - {documents[doc] === '' ? ( - <Webcam - audio={false} - height={400} - ref={webcamRef} - screenshotFormat="image/jpeg" - width={600} - videoConstraints={{ - height: 400, - width: 600, - facingMode: 'user' - }} + <div className={styles.container}> + <button + className={styles.button} + disabled={activeStep === 0} + onClick={handleBack} + > + <img + src={`${process.env.PUBLIC_URL}/assets/images/back_inverse.svg`} + alt="" + className={styles.image} /> - ) : ( - <img src={documents[doc]} /> - )} + </button> + <div className={styles.card__container}> + {documents[doc] === '' ? ( + <Webcam + audio={false} + height={400} + ref={webcamRef} + screenshotFormat="image/jpeg" + width={600} + videoConstraints={{ + height: 400, + width: 600, + facingMode: 'user' + }} + /> + ) : ( + <img src={documents[doc]} /> + )} + </div> + <button onClick={handleNext} className={styles.button}> + <img + src={`${process.env.PUBLIC_URL}/assets/images/next_inverse.svg`} + alt="" + className={styles.image} + /> + </button> + </div> + <div className={styles.button__container}> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + sx={{ margin: '0px 20px' }} + onClick={(e) => { + e.preventDefault() + capture(doc) + }} + > + {t('SCAN')} + </Button> + <Button + color="primary" + size="large" + type="submit" + variant="contained" + sx={{ margin: '0px 20px' }} + onClick={(e) => { + e.preventDefault() + doccu[doc] = '' + setDocuments({ + ...documents, + POI: doccu.POI, + POA: doccu.POA, + DOB: doccu.DOB + }) + }} + > + {t('RESET')} + </Button> </div> - <Grid container columnSpacing={10} justifyContent="center"> - <Grid item sx={{}}> - <Button - color="primary" - size="large" - type="submit" - variant="contained" - onClick={(e) => { - e.preventDefault() - capture(doc) - }} - > - {t('SCAN')} - </Button> - </Grid> - <Grid item> - <Button - color="primary" - size="large" - type="submit" - variant="contained" - onClick={(e) => { - e.preventDefault() - doccu[doc] = '' - setDocuments({ - ...documents, - POI: doccu.POI, - POA: doccu.POA, - DOB: doccu.DOB - }) - }} - > - {t('RESET')} - </Button> - </Grid> - </Grid> <br></br> <div> - <Grid container justifyContent="center"> + <div> <Typography align="center"> {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')} </Typography> - </Grid> + </div> </div> </> ) @@ -139,8 +149,8 @@ const DocumentScanner = () => { <Header subheading={t('ENROLLMENT')} /> <SubmitButton /> <div className={styles.stepper__container}> - <Box sx={{ width: '60%', fontSize: '100px !important' }}> - <Stepper activeStep={activeStep}> + <div className={styles.box}> + <Stepper activeStep={activeStep} sx={{ width: '60%' }}> {steps.map((label, index) => { const stepProps = {} const labelProps = {} @@ -157,14 +167,9 @@ const DocumentScanner = () => { })} </Stepper> {activeStep === steps.length ? ( - <React.Fragment> - <Typography sx={{ mt: 2, mb: 1 }}> - {t('ALL_STEPS_COMPLETED')} - </Typography> - <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> - <Box sx={{ flex: '1 1 auto' }} /> - </Box> - </React.Fragment> + <Typography variant="h3" sx={{ mt: 8, mb: 1 }}> + {t('ALL_STEPS_COMPLETED')} + </Typography> ) : ( <React.Fragment> {activeStep === 0 ? ( @@ -174,23 +179,9 @@ const DocumentScanner = () => { ) : ( activeStep === 2 && <WebcamComponent doc="DOB" /> )} - <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> - <Button - color="inherit" - disabled={activeStep === 0} - onClick={handleBack} - sx={{ mr: 1 }} - > - {t('BACK')} - </Button> - <Box sx={{ flex: '1 1 auto' }} /> - <Button onClick={handleNext}> - {activeStep === steps.length - 1 ? t('FINISH') : t('NEXT')} - </Button> - </Box> </React.Fragment> )} - </Box> + </div> </div> </> ) diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css index 58baaa8..11cd176 100644 --- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css +++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.module.css @@ -1,6 +1,7 @@ .card__container { display: flex; justify-content: center; + align-items: center; margin: 20px; } @@ -8,3 +9,42 @@ display: flex; justify-content: center; } + +.button__container { + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.button { + background: transparent; + border: none; +} + +.image { + height: 50px; + width: 50px; +} + +.image:hover { + cursor: pointer; + transform: scale(1.1); +} + +.image:active { + transform: scale(0.98); +} + +.box { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; +} + +.container { + display: flex; + align-items: center; +}
\ No newline at end of file diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx index f180667..e0cfd84 100644 --- a/client/src/pages/Enrollment/Enrollment.jsx +++ b/client/src/pages/Enrollment/Enrollment.jsx @@ -33,7 +33,9 @@ const Enrollment = () => { const navigate = useNavigate() const [unverified, setUnverified] = useState(true) - const { mutate } = useMutation((payload) => createUser(payload)) + const pushUser = useMutation((payload) => createUser(payload)) + + // const setConfirm = useMutation((payload) => sendMessage(payload)) const handleSubmit = () => { if (page === 0) { @@ -107,9 +109,7 @@ const Enrollment = () => { } else if (page === 6) { setPage(page + 1) } else if (page === 7) { - setPage(page + 1) - } else if (page === 8) { - mutate( + pushUser.mutate( { indianResident: userData.indianResident, name: userData.name, @@ -127,11 +127,17 @@ const Enrollment = () => { }, { onSuccess: () => { - setUserData(initialUserData) - navigate('/') + // setConfirm.mutate({ + // mobile: `+91${userData.mobile}`, + // id: pushUser.data._id + // }) + setPage(page + 1) } } ) + } else if (page === 8) { + setUserData(initialUserData) + navigate('/') } } |