Yo Man

8 files changed, 178 insertions, 10 deletions

diff --git a/client/src/components/BackButton/BackButton.jsx b/client/src/components/BackButton/BackButton.jsx
index fdb85f1..c6bba82 100644
--- a/client/src/components/BackButton/BackButton.jsx
+++ b/client/src/components/BackButton/BackButton.jsx
@@ -1,8 +1,10 @@
 import { Typography } from '@mui/material'
 import React from 'react'
 import styles from './BackButton.module.css'
+import { useTranslation } from 'react-i18next'
 
 const BackButton = ({ onClick, onChange }) => {
+  const { t } = useTranslation()
   return (
     <>
       <button
@@ -17,7 +19,7 @@ const BackButton = ({ onClick, onChange }) => {
             src={`${process.env.PUBLIC_URL}/assets/images/back.svg`}
             alt=""
           />
-          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Back</Typography>
+          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>{t('BACK')}</Typography>
         </div>
       </button>
     </>
diff --git a/client/src/components/LanguageSelect/locales/en/translation.json b/client/src/components/LanguageSelect/locales/en/translation.json
index 4cf2201..c25f669 100644
--- a/client/src/components/LanguageSelect/locales/en/translation.json
+++ b/client/src/components/LanguageSelect/locales/en/translation.json
@@ -143,5 +143,6 @@
   "APPROVED": "Approved",
   "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "Your Aadhaar update status is approved",
   "ENTER_YOUR_EID_NUMBER": "Enter your EID number",
-  "PENDING": "Pending"
+  "PENDING": "Pending",
+  "SAVE_&_NEXT": "Save & Next"
 }
diff --git a/client/src/components/LanguageSelect/locales/hi/translation.json b/client/src/components/LanguageSelect/locales/hi/translation.json
index 3adcc12..12cba40 100644
--- a/client/src/components/LanguageSelect/locales/hi/translation.json
+++ b/client/src/components/LanguageSelect/locales/hi/translation.json
@@ -142,5 +142,6 @@
   "YOUR_AADHAAR_STATUS_IS_APPROVED": "आपका आधार नामांकन अनुरोध स्वीकृत हो गया है",
   "PENDING": "लंबित",
   "YOUR_AADHAAR_STATUS_IS_IN_PENDING_STATE": "आपका आधार नामांकन अनुरोध प्रक्रिया में है",
-  "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें"
+  "PLEASE_HAVE_PATIENCE": "कृपया धैर्य रखें, और कम से कम 48 घंटे तक प्रतीक्षा करें",
+  "SAVE_&_NEXT": "सहेजें और अगला"
 }
diff --git a/client/src/components/LanguageSelect/locales/te/translation.json b/client/src/components/LanguageSelect/locales/te/translation.json
index 14de630..725ba0c 100644
--- a/client/src/components/LanguageSelect/locales/te/translation.json
+++ b/client/src/components/LanguageSelect/locales/te/translation.json
@@ -143,5 +143,6 @@
   "APPROVED": "ఆమోదించబడింది",
   "YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED": "మీ ఆధార్ అప్‌డేట్ స్థితి ఆమోదించబడింది",
   "ENTER_YOUR_EID_NUMBER": "మీ EID నంబర్‌ని నమోదు చేయండి",
-  "PENDING": "పెండింగ్‌లో ఉంది"
+  "PENDING": "పెండింగ్‌లో ఉంది",
+  "SAVE_&_NEXT": "భద్రపరచు & తదుపరి"
 }
diff --git a/client/src/components/SubmitButton/SubmitButton.jsx b/client/src/components/SubmitButton/SubmitButton.jsx
index df1269f..230f973 100644
--- a/client/src/components/SubmitButton/SubmitButton.jsx
+++ b/client/src/components/SubmitButton/SubmitButton.jsx
@@ -1,8 +1,10 @@
 import React from 'react'
 import styles from './SubmitButton.module.css'
 import { Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 
 const SubmitButton = ({ onClick, onChange, disabled }) => {
+  const { t } = useTranslation()
   return (
     <>
       <button
@@ -13,12 +15,12 @@ const SubmitButton = ({ onClick, onChange, disabled }) => {
         disabled={disabled}
       >
         <div className={styles.submit__content}>
-        <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>Save & Next</Typography>
-        <img
-          className={styles.submit__image}
-          src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
-          alt=""
-        />
+          <Typography sx={{ fontSize: '1.5rem', fontWeight: 'bolder', margin: '10px', color: '#323c7a' }}>{t('SAVE_&_NEXT')}</Typography>
+          <img
+            className={styles.submit__image}
+            src={`${process.env.PUBLIC_URL}/assets/images/next_icon.svg`}
+            alt=""
+          />
         </div>
       </button>
     </>
diff --git a/client/src/i18nextInit.js b/client/src/i18nextInit.js
index 3ae0848..a6f764b 100644
--- a/client/src/i18nextInit.js
+++ b/client/src/i18nextInit.js
@@ -4,6 +4,7 @@ import Backend from 'i18next-xhr-backend'
 import LanguageDetector from 'i18next-browser-languagedetector'
 import translationEN from '../src/components/LanguageSelect/locales/en/translation.json'
 import translationHI from '../src/components/LanguageSelect/locales/hi/translation.json'
+import translationTE from '../src/components/LanguageSelect/locales/te/translation.json'
 
 const fallbackLng = ['en']
 const availableLanguages = ['en', 'hi']
@@ -14,6 +15,9 @@ const resources = {
   },
   hi: {
     translation: translationHI
+  },
+  te: {
+    translation: translationTE
   }
 }
 
diff --git a/client/src/pages/Enrollment/Scanner/Scanner.jsx b/client/src/pages/Enrollment/Scanner/Scanner.jsx
new file mode 100644
index 0000000..fb015fe
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.jsx
@@ -0,0 +1,139 @@
+/* eslint-disable multiline-ternary */
+import React from 'react'
+import Webcam from 'react-webcam'
+import { useNavigate } from 'react-router-dom'
+import Header from '../../../components/Header/Header'
+import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import styles from './Scanner.module.css'
+import { Button, Grid, Typography } from '@mui/material'
+import { t } from 'i18next'
+import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
+import AudioAutoplay from '../../../components/AudioAutoplay/AudioAutoplay'
+
+const Scanner = () => {
+  const navigate = useNavigate()
+  const { userData, setUserData } = userContext()
+  const webcamRef = React.useRef(null)
+
+  const capture = React.useCallback(() => {
+    const imageSrc = webcamRef.current.getScreenshot()
+    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'
+  ]
+
+  const svgIcon = () => (
+    <svg
+      width="100%"
+      height="100%"
+      className="svg"
+      viewBox="0 0 300 200"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
+          <rect x="0" y="0" width="100%" height="100%" fill="#fff" />
+          <circle cx="50%" cy="50%" r="70" />
+        </mask>
+      </defs>
+      <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fillOpacity="0.7" />
+    </svg>
+  )
+
+  return (
+    <>
+      <Header subheading={t('ENROLLMENT')} />
+      <AudioAutoplay
+        audio={`${process.env.PUBLIC_URL}/assets/audios/photograph`}
+      />
+      <PopUpModal
+        title="CAPTURE_YOUR_PHOTO"
+        image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
+        description={
+          <>
+            <ul>
+              {description.map((item) => (
+                <li className="list__item" key="id">
+                  {t(item)}
+                </li>
+              ))}
+            </ul>
+          </>
+        }
+      />
+      <div className={styles.card__container}>
+          <div className={styles.webcam__container}>
+            <Webcam
+              audio={false}
+              height={400}
+              ref={webcamRef}
+              screenshotFormat="image/jpeg"
+              width={600}
+              videoConstraints={{
+                height: 400,
+                width: 600,
+                facingMode: 'user'
+              }}
+            />
+            <div className={styles.overlay__container}>
+              {svgIcon()}
+            </div>
+          </div>
+          <img id="img" src={userData.photo} />
+      </div>
+      <Grid container columnSpacing={10} justifyContent="center">
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ fontSize: '1.5rem', padding: '10px 30px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              capture()
+            }}
+          >
+            {t('CAPTURE')}
+          </Button>
+        </Grid>
+        <Grid item>
+          <Button
+            color="primary"
+            size="large"
+            type="submit"
+            variant="contained"
+            sx={{ fontSize: '1.5rem', padding: '10px 48px' }}
+            onClick={(e) => {
+              e.preventDefault()
+              setUserData({ ...userData, photo: '' })
+            }}
+          >
+            {t('RESET')}
+          </Button>
+        </Grid>
+      </Grid>
+      <br></br>
+      <div>
+        <Grid container justifyContent="center">
+          <Typography align="center" sx={{ fontSize: '1.25rem' }}>
+            {t('PLEASE_LOOK_INTO_THE_CAMERA')}
+            <br></br>
+            {t('CLICK_CAPTURE_TO_CAPTURE_THE_PHOTO')}
+            <br></br>
+            {t('CLICK_RESET_TO_REMOVE_THE_CAPTURED_PHOTO')}
+          </Typography>
+        </Grid>
+      </div>
+      <SubmitButton onClick={() => navigate('/enrollment/documents')} />
+    </>
+  )
+}
+
+export default Scanner
diff --git a/client/src/pages/Enrollment/Scanner/Scanner.module.css b/client/src/pages/Enrollment/Scanner/Scanner.module.css
new file mode 100644
index 0000000..4a82e8e
--- /dev/null
+++ b/client/src/pages/Enrollment/Scanner/Scanner.module.css
@@ -0,0 +1,18 @@
+.card__container {
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+}
+
+.webcam__container {
+  position: relative;
+}
+
+.overlay__container {
+  position: absolute ;
+  width: 100%;
+  top: 0 ;
+  right: 0 ;
+  bottom: 0 ;
+  left: 0;
+}
\ No newline at end of file