add document scanner components

5 files changed, 219 insertions, 116 deletions

diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
index 1ca2558..4255ece 100644
--- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -1,54 +1,181 @@
-import React from 'react'
+/* eslint-disable multiline-ternary */
+import React, { useState } from 'react'
+import Webcam from 'react-webcam'
 import Header from '../../../components/Header/Header'
-import CardScanner from '../../../components/Card/CardScanner'
 import styles from './DocumentScanner.module.css'
-import { Button, Grid, Typography } from '@mui/material'
+import {
+  Button,
+  Grid,
+  Typography,
+  StepLabel,
+  Step,
+  Stepper,
+  Box
+} from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 
-const DocumentScanner = () => {
+const steps = [
+  'Proof of Identity',
+  'Proof of Address',
+  'Proof of Date of Birth'
+]
+
+const DocumentScanner = ({ formData, setFormData }) => {
+  const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' })
+  const [activeStep, setActiveStep] = React.useState(0)
+
+  // eslint-disable-next-line no-unused-vars
+  const [doccu, setDoccu] = useState({ POI: '', POA: '', DOB: '' })
+
+  console.log(documents)
+
+  const webcamRef = React.useRef(null)
+
+  const capture = React.useCallback((doc) => {
+    const imageSrc = webcamRef.current.getScreenshot()
+    doccu[doc] = imageSrc
+    setDocuments({
+      ...documents,
+      POI: doccu.POI,
+      POA: doccu.POA,
+      DOB: doccu.DOB
+    })
+  })
+
+  const handleNext = () => {
+    if (activeStep === steps.length) {
+      setFormData({ ...formData, documents })
+    }
+    setActiveStep((prevActiveStep) => prevActiveStep + 1)
+  }
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1)
+  }
+
+  // setDocuments({ ...documents, POI: '' })
+
+  const WebcamComponent = ({ doc }) => {
+    console.log(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'
+              }}
+            />
+          ) : (
+            <img src={documents[doc]} />
+          )}
+        </div>
+        <Grid container columnSpacing={10} justifyContent="center">
+          <Grid item>
+            <Button
+              color="primary"
+              size="large"
+              type="submit"
+              variant="contained"
+              onClick={(e) => {
+                e.preventDefault()
+                capture(doc)
+              }}
+            >
+              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
+                })
+              }}
+            >
+              Reset
+            </Button>
+          </Grid>
+        </Grid>
+        <br></br>
+        <div>
+          <Grid container justifyContent="center">
+            <Typography align="center">
+              Kindly click the picture of your documents
+            </Typography>
+          </Grid>
+        </div>
+      </>
+    )
+  }
+
   return (
     <>
       <Header subheading="Enrollment" />
-      <div className={styles.card__container}>
-        <CardScanner
-          image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
-        />
-      </div>
-      <Grid container columnSpacing={10} justifyContent="center">
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            Scan
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            Reset
-          </Button>
-        </Grid>
-      </Grid>
-      <br></br>
-      <div>
-        <Grid container justifyContent="center">
-          <Typography align="center">
-            Please place your document on the scanner.
-            <br />
-            Close the lid.
-            <br />
-            Wait for prompt to remove your document
-          </Typography>
-        </Grid>
-      </div>
       <SubmitButton />
+      <Box sx={{ width: '100%' }}>
+        <Stepper activeStep={activeStep}>
+          {steps.map((label, index) => {
+            const stepProps = {}
+            const labelProps = {}
+            return (
+              <Step key={label} {...stepProps}>
+                <StepLabel {...labelProps}>{label}</StepLabel>
+              </Step>
+            )
+          })}
+        </Stepper>
+        {activeStep === steps.length ? (
+          <React.Fragment>
+            <Typography sx={{ mt: 2, mb: 1 }}>
+              All steps completed - you&apos;re finished
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Box sx={{ flex: '1 1 auto' }} />
+            </Box>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            {activeStep === 0 ? (
+              <WebcamComponent doc="POI" />
+            ) : activeStep === 1 ? (
+              <WebcamComponent doc="POA" />
+            ) : (
+              activeStep === 2 && <WebcamComponent doc="DOB" />
+            )}
+            <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
+              <Button
+                color="inherit"
+                disabled={activeStep === 0}
+                onClick={handleBack}
+                sx={{ mr: 1 }}
+              >
+                Back
+              </Button>
+              <Box sx={{ flex: '1 1 auto' }} />
+              <Button onClick={handleNext}>
+                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
+              </Button>
+            </Box>
+          </React.Fragment>
+        )}
+      </Box>
     </>
   )
 }
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 5800a14..fd046f4 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -6,10 +6,17 @@ import FinalSlip from './FinalSlip/FinalSlip'
 import Fingerprint from './Fingerprint/Fingerprint'
 import FormTwo from './FormTwo/FormTwo'
 import IrisScan from './IrisScan/IrisScan'
+// import { useMutation } from 'react-query'
 import PhotoCapture from './PhotoCapture/PhotoCapture'
 import SubmitButton from '../../components/SubmitButton/SubmitButton'
 import FormOne from './FormOne/FormOne'
-import { validEmail, validMobileNumber, validPincode } from '../../components/RegEx/RegEx'
+import Home from '../Home/Home'
+import {
+  validEmail,
+  validMobileNumber,
+  validPincode
+} from '../../components/RegEx/RegEx'
+// import { createUser } from '../../services/apiservice'
 
 const Enrollment = () => {
   const [page, setPage] = useState(0)
@@ -31,10 +38,18 @@ const Enrollment = () => {
     postOffice: '',
     landmark: '',
     pincode: '',
-    address: ''
+    address: '',
+    photo: '',
+    documents: {
+      POI: '',
+      POA: '',
+      DOB: ''
+    }
   })
 
-  function handleSubmit () {
+  // const { mutate } = useMutation((payload) => createUser(payload))
+
+  const handleSubmit = () => {
     if (page === 0) {
       if (formData.indianResident === '') {
         return alert('Please select your residency')
@@ -98,24 +113,23 @@ const Enrollment = () => {
     } else if (page === 7) {
       setPage(page + 1)
     } else if (page === 8) {
+      console.log(formData)
       setPage(page + 1)
-    } else if (page === 9) {
-      setPage(page + 1)
-    } else setPage(page + 1)
+    }
   }
 
   const conditionalComponent = () => {
     switch (page) {
       case 0:
-        return <FormOne formData={formData} setFormData={setFormData} />
+        return <DocumentScanner formData={formData} setFormData={setFormData} />
       case 1:
         return <FormTwo formData={formData} setFormData={setFormData} />
       case 2:
         return <Address formData={formData} setFormData={setFormData} />
       case 3:
-        return <DocumentScanner formData={formData} setFormData={setFormData} />
-      case 4:
         return <PhotoCapture formData={formData} setFormData={setFormData} />
+      case 4:
+        return <FormOne formData={formData} setFormData={setFormData} />
       case 5:
         return <IrisScan formData={formData} setFormData={setFormData} />
       case 6:
@@ -125,52 +139,32 @@ const Enrollment = () => {
       case 8:
         return <FinalSlip formData={formData} setFormData={setFormData} />
       default:
-        return <FormOne formData={formData} setFormData={setFormData} />
+        return <Home />
     }
   }
 
   const conditionalButton = () => {
     switch (page) {
       case 0:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
       case 1:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
       case 2:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
       case 3:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
       case 4:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
       case 5:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
       case 6:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
       case 7:
-        return <SubmitButton onClick={handleSubmit}>
-            Submit
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Submit</SubmitButton>
       case 8:
-        return <SubmitButton onClick={handleSubmit}>
-            Exit
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Exit</SubmitButton>
       default:
-        return <SubmitButton onClick={handleSubmit}>
-            Next
-          </SubmitButton>
+        return <SubmitButton onClick={handleSubmit}>Next</SubmitButton>
     }
   }
   return (
diff --git a/client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css b/client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css
index ec59f61..de1cead 100644
--- a/client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css
+++ b/client/src/pages/Enrollment/FinalSlip/FinalSlip.module.css
@@ -1,5 +1,4 @@
 .card__container {
-    display: flex;
-    justify-content: center;
-  }
-  
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+}
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
index c4960c2..509030b 100644
--- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable multiline-ternary */
-import React, { useState } from 'react'
+import React from 'react'
 import Webcam from 'react-webcam'
 import { useNavigate } from 'react-router-dom'
 import Header from '../../../components/Header/Header'
@@ -7,37 +7,35 @@ import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import styles from './PhotoCapture.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 
-const PhotoCapture = () => {
-  const [photo, setPhoto] = useState()
-
+const PhotoCapture = ({ formData, setFormData }) => {
   const navigate = useNavigate()
 
   const webcamRef = React.useRef(null)
 
   const capture = React.useCallback(() => {
     const imageSrc = webcamRef.current.getScreenshot()
-    setPhoto(imageSrc)
+    setFormData({ ...formData, photo: imageSrc })
   })
 
   return (
     <>
       <Header subheading="Enrollment" />
       <div className={styles.card__container}>
-        {photo === '' ? (
+        {formData.photo === '' ? (
           <Webcam
             audio={false}
-            height={300}
+            height={400}
             ref={webcamRef}
             screenshotFormat="image/jpeg"
-            width={500}
+            width={600}
             videoConstraints={{
-              height: 300,
-              width: 500,
+              height: 400,
+              width: 600,
               facingMode: 'user'
             }}
           />
         ) : (
-          <img src={photo} />
+          <img src={formData.photo} />
         )}
       </div>
       <Grid container columnSpacing={10} justifyContent="center">
@@ -63,7 +61,7 @@ const PhotoCapture = () => {
             variant="contained"
             onClick={(e) => {
               e.preventDefault()
-              setPhoto('')
+              setFormData({ ...formData, photo: '' })
             }}
           >
             Reset
diff --git a/client/src/services/apiservice.js b/client/src/services/apiservice.js
index 9a5b654..4cfd2ba 100644
--- a/client/src/services/apiservice.js
+++ b/client/src/services/apiservice.js
@@ -4,22 +4,7 @@ const apiClient = axios.create({
   baseURL: 'http://localhost:5000'
 })
 
-export const getVerifiedUsers = async () => {
-  const response = await apiClient.get('/verifiedusers')
-  return response
-}
-
-export const getUnverifiedUsers = async () => {
-  const response = await apiClient.get('/unverifiedusers')
-  return response
-}
-
-export const updateUser = async (id, payload) => {
-  const response = await apiClient.patch(`/user/${id}`, payload)
-  return response
-}
-
-export const deleteUser = async (id) => {
-  const response = await apiClient.delete(`/user/${id}`)
+export const createUser = async (payload) => {
+  const response = await apiClient.post('/user', payload)
   return response
 }