From 4480f2d62865a585f8bbf0cd7122a25d0413bf2b Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Sun, 21 Aug 2022 01:46:36 +0530
Subject: fixed update components

---
 .../Update/DocumentScanner/DocumentScanner.jsx     | 240 ++++++++++-----------
 .../DocumentScanner/DocumentScanner.module.css     |  53 ++++-
 client/src/pages/Update/DocumentScanner/styles.js  |   7 +
 3 files changed, 175 insertions(+), 125 deletions(-)
 create mode 100644 client/src/pages/Update/DocumentScanner/styles.js

(limited to 'client/src/pages/Update/DocumentScanner')

diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index f6fe0b5..0fe8d42 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -3,34 +3,18 @@ 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'
+import { toast } from 'react-toastify'
+import { useStyles } from './styles'
 
 const DocumentScanner = () => {
   const { userData, oriUserData, setUserData } = userContext()
   const { t } = useTranslation()
-
-  // JSON.stringify(oriUserData?.address) ===
   let steps
 
-  // use conditional statements to compare userData and oriUserData to determine the steps
-  // 1st case: if only address is changed, then step=['POA']
-  // 2nd case: if only either name or gender is changed, then step=['POI']
-  // 3rd case: if only dob is changed, then step=['DOB']
-  // 4th case: If only address and name or gender is changed, then step=['POA', 'POI']
-  // 5th case: If only address and dob is changed, then step=['POA', 'DOB']
-  // 6th case: If only name or gender and dob is changed, then step=['POI', 'DOB']
-  // 7th case: If everything is changed, then step=['POA', 'POI', 'DOB']
   if (
     (userData.address !== oriUserData.address &&
       userData.dob !== oriUserData.dob &&
@@ -71,7 +55,7 @@ const DocumentScanner = () => {
 
   const [doccu] = useState({ POI: '', POA: '', DOB: '' })
 
-  console.log(documents)
+  const classes = useStyles()
 
   const webcamRef = React.useRef(null)
 
@@ -90,7 +74,15 @@ const DocumentScanner = () => {
     if (activeStep === steps.length - 1) {
       setUserData({ ...userData, documents: documents })
     }
-    setActiveStep((prevActiveStep) => prevActiveStep + 1)
+    if (
+      (!documents.POI && activeStep === 0) ||
+      (!documents.POA && activeStep === 1) ||
+      (!documents.DOB && activeStep === 2)
+    ) {
+      toast.error(t('SCAN_YOUR_DOCUMENT'))
+    } else {
+      setActiveStep((prevActiveStep) => prevActiveStep + 1)
+    }
   }
 
   const handleBack = () => {
@@ -100,67 +92,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>
-            <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>
       </>
     )
@@ -168,55 +178,43 @@ const DocumentScanner = () => {
 
   return (
     <>
-      <Header subheading={t('ENROLLMENT')} />
+      <Header subheading={t('UPDATE')} />
       <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 }}>
+      <div className={styles.stepper__container}>
+        <div className={styles.box}>
+          <Stepper activeStep={activeStep} sx={{ width: '60%' }}>
+            {steps.map((label, index) => {
+              const stepProps = {}
+              const labelProps = {}
+              return (
+                <Step key={label} {...stepProps}>
+                  <StepLabel
+                    {...labelProps}
+                    classes={{ label: classes.stepLabel }}
+                  >
+                    {label}
+                  </StepLabel>
+                </Step>
+              )
+            })}
+          </Stepper>
+          {activeStep === steps.length ? (
+            <Typography variant="h3" sx={{ mt: 8, 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>
+          ) : (
+            <React.Fragment>
+              {activeStep === 0 ? (
+                <WebcamComponent doc="POI" />
+              ) : activeStep === 1 ? (
+                <WebcamComponent doc="POA" />
+              ) : (
+                activeStep === 2 && <WebcamComponent doc="DOB" />
+              )}
+            </React.Fragment>
+          )}
+        </div>
+      </div>
     </>
   )
 }
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
index ec59f61..f73d192 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.module.css
@@ -1,5 +1,50 @@
 .card__container {
-    display: flex;
-    justify-content: center;
-  }
-  
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px;
+}
+
+.stepper__container {
+  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;
+}
diff --git a/client/src/pages/Update/DocumentScanner/styles.js b/client/src/pages/Update/DocumentScanner/styles.js
new file mode 100644
index 0000000..0b7e915
--- /dev/null
+++ b/client/src/pages/Update/DocumentScanner/styles.js
@@ -0,0 +1,7 @@
+import { makeStyles } from '@mui/styles'
+
+export const useStyles = makeStyles({
+  stepLabel: {
+    fontSize: '20px'
+  }
+})
-- 
cgit