Fixed components

5 files changed, 284 insertions, 216 deletions

diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 29f0f40..94e60d0 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -1,22 +1,17 @@
 import React from 'react'
 import Header from '../../../components/Header/Header'
-import { Country, State, City } from 'country-state-city'
+import UpdateInput from '../../../components/UpdateInput/UpdateInput'
+import { State, City } from 'country-state-city'
+import EditButton from '../../../components/EditButton/EditButton'
 import Select from 'react-select'
 
 import styles from './Address.module.css'
-import UpdateInput from '../../../components/UpdateInput/UpdateInput'
-import EditButton from '../../../components/EditButton/EditButton'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
-const Address = ({ formData, setFormData }) => {
+const Address = () => {
+  const { userData, setUserData } = userContext()
   const { t } = useTranslation()
-  const countries = Country.getAllCountries()
-
-  const updatedCountries = countries.map((country) => ({
-    label: country.name,
-    value: country.id,
-    ...country
-  }))
 
   const updatedStates = (countryId) =>
     State.getStatesOfCountry(countryId).map((state) => ({
@@ -50,13 +45,9 @@ const Address = ({ formData, setFormData }) => {
     })
   }
 
-  const [editable, setEditable] = React.useState(true)
   const [editable1, setEditable1] = React.useState(true)
   const [editable2, setEditable2] = React.useState(true)
 
-  const handleEdit = () => {
-    setEditable(!editable)
-  }
   const handleEdit1 = () => {
     setEditable1(!editable1)
   }
@@ -64,60 +55,29 @@ const Address = ({ formData, setFormData }) => {
     setEditable2(!editable2)
   }
 
-  console.log(
-    formData.country,
-    formData.state,
-    formData.district,
-    formData.village
-  )
-
   return (
     <>
-      <Header subheading={t('UPDATE')} />
+      <Header subheading={t('ENROLLMENT')} />
       <div className={styles.address}>
         <div className={styles.address__container}>
           <div className={styles.input}>
             <div className={styles.input__container}>
-              <label htmlFor="country">{t('COUNTRY')}</label>
-              <div className={styles.input__edit}>
-                <Select
-                  id="country"
-                  name="country"
-                  label="country"
-                  options={updatedCountries}
-                  value={formData.country}
-                  isDisabled={editable}
-                  isSearchable={!editable}
-                  onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      country: e
-                    })
-                  }}
-                  styles={customStyles}
-                />
-                <EditButton
-                  onClick={handleEdit}
-                  enabled={!editable ? '1' : '0'}
-                />
-              </div>
-            </div>
-          </div>
-          <div className={styles.input}>
-            <div className={styles.input__container}>
               <label htmlFor="state">{t('STATE')}</label>
               <div className={styles.input__edit}>
                 <Select
                   id="state"
                   name="state"
-                  options={updatedStates(formData.country.isoCode)}
-                  value={formData.state}
+                  options={updatedStates('IN')}
+                  value={userData.address.state}
                   isDisabled={editable1}
                   isSearchable={!editable1}
                   onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      state: e
+                    setUserData({
+                      ...userData,
+                      address: {
+                        ...userData.address,
+                        state: e
+                      }
                     })
                   }}
                   styles={customStyles}
@@ -136,17 +96,17 @@ const Address = ({ formData, setFormData }) => {
                 <Select
                   id="city"
                   name="city"
-                  options={updatedCities(
-                    formData.country.isoCode,
-                    formData.state.isoCode
-                  )}
-                  value={formData.district}
+                  options={updatedCities('IN', userData.address.state.isoCode)}
+                  value={userData.address.district}
                   isDisabled={editable2}
                   isSearchable={!editable2}
                   onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      district: e
+                    setUserData({
+                      ...userData,
+                      address: {
+                        ...userData.address,
+                        district: e
+                      }
                     })
                   }}
                   styles={customStyles}
@@ -161,12 +121,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="town"
             label={t('VILLAGE_TOWN')}
-            value={formData.village}
+            value={userData.address.village}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                village: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  village: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_VILLAGE_TOWN')}
@@ -176,12 +139,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="houseNo"
             label={t('HOUSE_NUMBER_APARTMENT')}
-            value={formData.houseNo}
+            value={userData.address.houseNo}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                houseNo: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  houseNo: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_HOUSE_NUMBER_APARTMENT')}
@@ -189,12 +155,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="street"
             label={t('STREET_ROAD')}
-            value={formData.street}
+            value={userData.address.street}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                street: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  street: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_STREET_ROAD')}
@@ -202,12 +171,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="locality"
             label={t('AREA_LOCALITY')}
-            value={formData.locality}
+            value={userData.address.locality}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                locality: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  locality: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_LOCALITY')}
@@ -215,12 +187,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="postOffice"
             label={t('POST_OFFICE')}
-            value={formData.postOffice}
+            value={userData.address.postOffice}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                postOffice: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  postOffice: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_POST_OFFICE')}
@@ -230,12 +205,15 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="landmark"
             label={t('LANDMARK')}
-            value={formData.landmark}
+            value={userData.address.landmark}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                landmark: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  landmark: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_ANY_NEAREST_LANDMARK')}
@@ -243,16 +221,18 @@ const Address = ({ formData, setFormData }) => {
           <UpdateInput
             id="pincode"
             label={t('PINCODE')}
-            value={formData.pincode}
+            value={userData.address.pincode}
             type="text"
             onChange={(e) => {
-              setFormData({
-                ...formData,
-                pincode: e.target.value
+              setUserData({
+                ...userData,
+                address: {
+                  ...userData.address,
+                  pincode: e.target.value
+                }
               })
             }}
             placeholder={t('ENTER_YOUR_AREA_PINCODE')}
-            pattern="[0-9]+"
           />
         </div>
       </div>
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index 6452bd8..91dade7 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -7,8 +7,14 @@ import { Grid, Button } from '@mui/material'
 import { Link } from 'react-router-dom'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
+import { useMutation } from 'react-query'
+import { updateUser } from '../../../services/apiservice'
 
 const Agreement = () => {
+  const { userData } = userContext()
+  const updateUse = useMutation(() => updateUser(userData._id, ...userData))
+
   const { t } = useTranslation()
   return (
     <>
@@ -47,7 +53,7 @@ const Agreement = () => {
         </Grid>
       </Grid>
       <Link to="/update/final-slip">
-        <SubmitButton />
+        <SubmitButton onClick={() => updateUse.mutate()} />
       </Link>
     </>
   )
diff --git a/client/src/pages/Update/Demographic/Demographic.jsx b/client/src/pages/Update/Demographic/Demographic.jsx
index 3e95d60..7638f39 100644
--- a/client/src/pages/Update/Demographic/Demographic.jsx
+++ b/client/src/pages/Update/Demographic/Demographic.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useQuery } from 'react-query'
 import { getUserByAadhaar } from '../../../services/apiservice'
 import Address from '../Address/Address'
@@ -25,45 +25,6 @@ const Demographic = () => {
 
   const isLongEnough = aadhaarNumber?.toString().length > 11
 
-  const [formData, setFormData] = useState({
-    name: '',
-    gender: '',
-    dob: '',
-    mobile: '',
-    email: '',
-    country: '',
-    state: '',
-    district: '',
-    village: '',
-    houseNo: '',
-    street: '',
-    locality: '',
-    postOffice: '',
-    landmark: '',
-    pincode: ''
-    // address: userData?.address
-  })
-
-  useEffect(() => {
-    const address = userData?.address?.split(',')
-    const addressObj = {
-      houseNo: address[0],
-      street: address[1],
-      locality: address[2],
-      landmark: address[3],
-      village: address[4],
-      district: address[5],
-      country: address[6],
-      pincode: address[7]
-    }
-
-    setFormData({
-      ...formData,
-      ...userData,
-      ...addressObj
-    })
-  }, [userData])
-
   // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
   const { isLoading, isError, data } = useQuery('user', async () => {
     if (isLongEnough) {
@@ -84,58 +45,49 @@ const Demographic = () => {
     setUserData(data?.data)
   }
 
-  const address = userData?.address
-  console.log(address)
-
-  console.log('Form Data: ', formData, userData)
-
   const handleSubmit = () => {
     if (page === 0) {
-      if (formData.name === '' || formData.name.length < 1) {
+      if (userData.name === '' || userData.name.length < 1) {
         toast.error(t('PLEASE_ENTER_YOUR_NAME'))
-      } else if (!validString.test(formData.name)) {
+      } else if (!validString.test(userData.name)) {
         toast.error(t('PLEASE_ENTER_VALID_NAME'))
-      } else if (formData.gender === '') {
+      } else if (userData.gender === '') {
         toast.error(t('PLEASE_SELECT_YOUR_GENDER'))
-      } else if (formData.mobile === '') {
+      } else if (userData.mobile === '') {
         toast.error(t('PLEASE_ENTER_YOUR_MOBILE_NUMBER'))
-      } else if (!validMobileNumber.test(formData.mobile)) {
+      } else if (!validMobileNumber.test(userData.mobile)) {
         toast.error(t('PLEASE_ENTER_VALID_MOBILE_NUMBER'))
-      } else if (formData.email === '') {
+      } else if (userData.email === '') {
         toast.error(t('PLEASE_ENTER_YOUR_EMAIL'))
-      } else if (!validEmail.test(formData.email)) {
+      } else if (!validEmail.test(userData.email)) {
         toast.error(t('PLEASE_ENTER_VALID_EMAIL'))
       } else {
         setPage(page + 1)
       }
     } else if (page === 1) {
-      if (formData.country === '') {
+      if (userData.country === '') {
         toast.error(t('PLEASE_SELECT_YOUR_COUNTRY'))
-      } else if (formData.state === '') {
+      } else if (userData.address.state.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_STATE'))
-      } else if (formData.district === '') {
+      } else if (userData.address.district.name === '') {
         toast.error(t('PLEASE_SELECT_YOUR_DISTRICT'))
-      } else if (formData.village === '') {
+      } else if (userData.address.village === '') {
         toast.error(t('PLEASE_ENTER_YOUR_VILLAGE'))
-      } else if (formData.houseNo === '') {
+      } else if (userData.address.houseNo === '') {
         toast.error(t('PLEASE_ENTER_YOUR_HOUSE_NUMBER'))
-      } else if (formData.street === '') {
+      } else if (userData.address.street === '') {
         toast.error(t('PLEASE_ENTER_YOUR_STREET'))
-      } else if (formData.locality === '') {
+      } else if (userData.address.locality === '') {
         toast.error(t('PLEASE_ENTER_YOUR_LOCALITY'))
-      } else if (formData.postOffice === '') {
+      } else if (userData.address.postOffice === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_POST_OFFICE'))
-      } else if (formData.landmark === '') {
+      } else if (userData.address.landmark === '') {
         toast.error(t('PLEASE_ENTER_NEAREST_LANDMARK'))
-      } else if (formData.pincode === '') {
+      } else if (userData.address.pincode === '') {
         toast.error(t('PLEASE_ENTER_YOUR_AREA_PINCODE'))
-      } else if (!validPincode.test(formData.pincode)) {
+      } else if (!validPincode.test(userData.address.pincode)) {
         toast.error(t('PLEASE_ENTER_VALID_PINCODE'))
       } else {
-        setFormData({
-          ...formData,
-          address: `${formData.houseNo}, ${formData.street}, ${formData.locality}, ${formData.landmark}, ${formData.village}, ${formData.district.label}, ${formData.country.label}, ${formData.pincode}`
-        })
         setPage(page + 1)
       }
     } else if (page === 3) {
@@ -146,11 +98,11 @@ const Demographic = () => {
   const conditionalComponent = () => {
     switch (page) {
       case 0:
-        return <FormOne formData={formData} setFormData={setFormData} />
+        return <FormOne />
       case 1:
-        return <Address formData={formData} setFormData={setFormData} />
+        return <Address />
       case 2:
-        return <DocumentScanner formData={formData} setFormData={setFormData} />
+        return <DocumentScanner />
       default:
         return <UpdateSelect />
     }
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index ae8846c..14fb769 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -1,52 +1,180 @@
-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'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
 const DocumentScanner = () => {
+  const { userData, setUserData } = userContext()
   const { t } = useTranslation()
+  const steps = [
+    t('PROOF_OF_IDENTITY'),
+    t('PROOF_OF_ADDRESS'),
+    t('PROOF_OF_DOB')
+  ]
+  const [documents, setDocuments] = useState({ POI: '', POA: '', DOB: '' })
+  const [activeStep, setActiveStep] = React.useState(0)
+
+  const [doccu] = 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 - 1) {
+      setUserData({ ...userData, documents: documents })
+    }
+    setActiveStep((prevActiveStep) => prevActiveStep + 1)
+  }
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1)
+  }
+
+  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'
+              }}
+            />
+          ) : (
+            <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)
+              }}
+            >
+              {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">
+            <Typography align="center">
+              {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
+            </Typography>
+          </Grid>
+        </div>
+      </>
+    )
+  }
+
   return (
     <>
-      <Header subheading="Update" />
-      <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"
-          >
-            {t('SCAN')}
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            {t('RESET')}
-          </Button>
-        </Grid>
-      </Grid>
-      <br></br>
-      <div>
-        <Grid container justifyContent="center">
-          <Typography align="center">
-            {t('KINDLY_CLICK_THE_PICTURE_OF_YOUR_DOCUMENTS')}
-          </Typography>
-        </Grid>
-      </div>
+      <Header subheading={t('ENROLLMENT')} />
       <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 }}>
+              {t('ALL_STEPS_COMPLETED')}
+            </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 }}
+              >
+                {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>
     </>
   )
 }
diff --git a/client/src/pages/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx
index 629588d..fafce05 100644
--- a/client/src/pages/Update/FormOne/FormOne.jsx
+++ b/client/src/pages/Update/FormOne/FormOne.jsx
@@ -5,8 +5,10 @@ import styles from './FormOne.module.css'
 import EditButton from '../../../components/EditButton/EditButton'
 import Gender from '../../../components/Gender/Gender'
 import { useTranslation } from 'react-i18next'
+import { userContext } from '../../../context/User'
 
-const FormOne = ({ formData, setFormData }) => {
+const FormOne = () => {
+  const { userData, setUserData } = userContext()
   const { t } = useTranslation()
 
   const [editable, setEditable] = React.useState(true)
@@ -23,10 +25,10 @@ const FormOne = ({ formData, setFormData }) => {
           type="text"
           id="fullName"
           label={t('FULL_NAME')}
-          value={formData.name}
+          value={userData?.name}
           onChange={(e) => {
-            setFormData({
-              ...formData,
+            setUserData({
+              ...userData,
               name: e.target.value
             })
           }}
@@ -35,12 +37,12 @@ const FormOne = ({ formData, setFormData }) => {
 
         <UpdateInput
           id="mobile"
-          value={formData.mobile}
+          value={userData?.mobile}
           label={t('MOBILE')}
           type="text"
           onChange={(e) => {
-            setFormData({
-              ...formData,
+            setUserData({
+              ...userData,
               mobile: e.target.value
             })
           }}
@@ -55,11 +57,11 @@ const FormOne = ({ formData, setFormData }) => {
               type="date"
               id="dob"
               name="dob"
-              value={formData.dob}
+              value={userData?.dob}
               readOnly={editable}
               onChange={(e) => {
-                setFormData({
-                  ...formData,
+                setUserData({
+                  ...userData,
                   dob: e.target.value
                 })
               }}
@@ -71,19 +73,19 @@ const FormOne = ({ formData, setFormData }) => {
 
         <UpdateInput
           id="email"
-          value={formData.email}
+          value={userData?.email}
           label={t('EMAIL')}
           type="email"
           onChange={(e) => {
-            setFormData({
-              ...formData,
+            setUserData({
+              ...userData,
               email: e.target.value
             })
           }}
           placeholder={t('ENTER_YOUR_EMAIL_ID')}
         />
 
-        <Gender formData={formData} setFormData={setFormData} />
+        <Gender formData={userData} setFormData={setUserData} />
       </div>
     </>
   )