added modal

17 files changed, 287 insertions, 12 deletions

diff --git a/client/src/App.js b/client/src/App.js
index 0d6d904..f6ff8dd 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import LanguageSelect from './components/LanguageSelect/LanguageSelect'
 import Index from './routes'
+import './styles/GlobalVariables.css'
 
 const App = () => {
   return (
diff --git a/client/src/components/Modal/ExtendedModal.jsx b/client/src/components/Modal/ExtendedModal.jsx
new file mode 100644
index 0000000..c181b14
--- /dev/null
+++ b/client/src/components/Modal/ExtendedModal.jsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import { Modal, Box, Button } from '@mui/material'
+import styles from './ExtendedModal.module.css'
+import { Container } from '@mui/system'
+
+const ExtendedPopUpModal = ({
+  title,
+  description1,
+  image1,
+  description2,
+  image2,
+  description3,
+  image3
+}) => {
+  const style = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 1000,
+    bgcolor: 'background.paper',
+    borderRadius: '10px',
+    boxShadow: 24,
+    p: 4
+  }
+  const [open, setOpen] = React.useState(false)
+  const handleOpen = () => setOpen(true)
+  const handleClose = () => setOpen(false)
+
+  return (
+    <div className={styles.modal}>
+      <Button onClick={handleOpen} sx={{ borderRadius: '50%' }}>
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/help.svg`}
+          height="65px"
+          width="65px"
+        />
+      </Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style}>
+          <h1 id="modal-modal-title" className={styles.modal__title}>
+            {title}
+          </h1>
+          <Container sx={{ display: 'flex', flexDirection: 'column' }}>
+            <Container
+              sx={{
+                display: 'flex',
+                alignItems: 'center'
+              }}
+            >
+              <img
+                src={image1}
+                height="200px"
+                width="200px"
+                className={styles.modal__image}
+              />
+              <h3 className={styles.modal__content}>{description1}</h3>
+            </Container>
+            <Container sx={{ display: 'flex', alignItems: 'center' }}>
+              <h3 className={styles.modal__content}>{description2}</h3>
+              <img
+                src={image2}
+                height="200px"
+                width="200px"
+                className={styles.modal__image}
+              />
+            </Container>
+            <Container sx={{ display: 'flex', alignItems: 'center' }}>
+              <img
+                src={image3}
+                height="200px"
+                width="200px"
+                className={styles.modal__image}
+              />
+              <h3 className={styles.modal__content}>{description3}</h3>
+            </Container>
+          </Container>
+        </Box>
+      </Modal>
+    </div>
+  )
+}
+
+export default ExtendedPopUpModal
diff --git a/client/src/components/Modal/ExtendedModal.module.css b/client/src/components/Modal/ExtendedModal.module.css
new file mode 100644
index 0000000..b1252bd
--- /dev/null
+++ b/client/src/components/Modal/ExtendedModal.module.css
@@ -0,0 +1,22 @@
+.modal {
+  margin: 0px 15px;
+  position: absolute;
+  top: 100px;
+  right: 250px;
+}
+
+.modal__title {
+  text-align: center;
+  margin: 20px 0px 40px;
+  font-size: var(--font-medium);
+}
+
+.modal__image {
+  width: 50%;
+}
+
+.modal__content {
+  text-align: center;
+  width: 50%;
+  font-size: var(--font-medium-s);
+}
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
index 57cb9bb..679503e 100644
--- a/client/src/components/Modal/Modal.jsx
+++ b/client/src/components/Modal/Modal.jsx
@@ -38,14 +38,14 @@ const PopUpModal = ({ title, description, image }) => {
           <h1 id="modal-modal-title" className={styles.modal__title}>
             {title}
           </h1>
-          <Container sx={{ display: 'flex' }}>
+          <Container sx={{ display: 'flex', alignItems: 'center' }}>
             <img
               src={image}
-              height="200px"
-              width="200px"
+              height="300px"
+              width="300px"
               className={styles.modal__image}
             />
-            <p className={styles.modal__content}>{description}</p>
+            <h3 className={styles.modal__content}>{description}</h3>
           </Container>
         </Box>
       </Modal>
diff --git a/client/src/components/Modal/Modal.module.css b/client/src/components/Modal/Modal.module.css
index 547445b..fd5e327 100644
--- a/client/src/components/Modal/Modal.module.css
+++ b/client/src/components/Modal/Modal.module.css
@@ -1,16 +1,21 @@
 .modal {
   margin: 0px 15px;
+  position: absolute;
+  top: 100px;
+  right: 250px;
 }
 
 .modal__title {
   text-align: center;
   margin: 20px 0px 40px;
+  font-size: var(--font-medium-large);
 }
 
 .modal__image {
-  width: 40%;
+  width: 50%;
 }
 
 .modal__content {
-  width: 60%;
+  width: 50%;
+  font-size: var(--font-medium-sm);
 }
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 6bf4044..78b0737 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -5,6 +5,7 @@ import { State, City } from 'country-state-city'
 import Select from 'react-select'
 import { userContext } from '../../../context/User'
 import { useTranslation } from 'react-i18next'
+import PopUpModal from '../../../components/Modal/Modal'
 
 import styles from './Address.module.css'
 
@@ -47,6 +48,26 @@ const Address = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Fill your information"
+        image={`${process.env.PUBLIC_URL}/assets/images/address.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Enter your details according to the relevant fields
+              </li>
+              <li className="list__item">
+                State: Select the state you belong to. from the dropdown list
+              </li>
+              <li className="list__item">
+                District: Select the district you belong to. from the dropdown
+                list
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.address}>
         <div className={styles.address__container}>
           <Input
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx
index 15bb639..9dedb56 100644
--- a/client/src/pages/Enrollment/Agreement/Agreement.jsx
+++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx
@@ -9,6 +9,7 @@ import { sendOTP } from '../../../services/apiservice'
 import { userContext } from '../../../context/User'
 import { useMutation } from 'react-query'
 import { ToastContainer, toast } from 'react-toastify'
+import PopUpModal from '../../../components/Modal/Modal'
 import 'react-toastify/dist/ReactToastify.css'
 
 const Agreement = ({ unverified, setUnverified }) => {
@@ -53,6 +54,17 @@ const Agreement = ({ unverified, setUnverified }) => {
         theme={'colored'}
       />
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Verify your mobile number"
+        image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.card__container}>
         <CardAgreement
           image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
index d61f16f..3f7b0f6 100644
--- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -4,10 +4,10 @@ import Webcam from 'react-webcam'
 import Header from '../../../components/Header/Header'
 import styles from './DocumentScanner.module.css'
 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 PopUpModal from '../../../components/Modal/Modal'
 import { useStyles } from './styles'
 
 const DocumentScanner = () => {
@@ -147,7 +147,31 @@ const DocumentScanner = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
-      <SubmitButton />
+      <PopUpModal
+        title="Scan your documents"
+        image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Consists of 3 steps :
+                <ul>
+                  <li>Proof of Identity: </li>
+                  <li>Proof of Address: </li>
+                  <li>Proof of Date of Birth: </li>
+                </ul>
+              </li>
+              <li className="list__item">
+                Ensure that your documents are in the center of the frame
+              </li>
+              <li className="list__item">
+                You won&apos;t be able to proceed until you have scanned all the
+                required documents
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.stepper__container}>
         <div className={styles.box}>
           <Stepper activeStep={activeStep} sx={{ width: '60%' }}>
diff --git a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx
index 1860a2f..e2fe104 100644
--- a/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx
+++ b/client/src/pages/Enrollment/Fingerprint/Fingerprint.jsx
@@ -5,12 +5,24 @@ import styles from './Fingerprint.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { useTranslation } from 'react-i18next'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const Fingerprint = () => {
   const { t } = useTranslation()
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Scan your Fingerprints"
+        image={`${process.env.PUBLIC_URL}/assets/images/fingerprint_scan.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.card__container}>
         <CardBiometrics
           image={`${process.env.PUBLIC_URL}/assets/images/fingerprint.svg`}
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index f601921..3fd5a21 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -5,6 +5,7 @@ import Input from '../../../components/Input/Input'
 import LabelCard from '../../../components/LabelCard/LabelCard'
 import styles from './FormOne.module.css'
 import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const FormOne = () => {
   const { t } = useTranslation()
@@ -33,6 +34,28 @@ const FormOne = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Fill your information"
+        image={`${process.env.PUBLIC_URL}/assets/images/id.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Select your residency by selecting the appropriate checkbox
+              </li>
+              <li className="list__item">
+                Enter your full name without any title or salutation
+              </li>
+              <li className="list__item">
+                Select your gender by clicking on the appropriate card
+              </li>
+              <li className="list__item">
+                Select your date of birth from the provided calender
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.formone}>
         <div className={styles.formone__radio}>
           <span className={styles.formone__resident}>
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.module.css b/client/src/pages/Enrollment/FormOne/FormOne.module.css
index fae8e9f..646ea12 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.module.css
+++ b/client/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -45,7 +45,7 @@
 }
 
 .formone__dob_input {
-  width: 300px;
+  width: 330px;
   margin: 10px 0px;
   padding: 11px 10px;
   border: 3px solid;
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index 0bce4bc..b4a53ed 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -5,6 +5,7 @@ import Header from '../../../components/Header/Header'
 import { userContext } from '../../../context/User'
 
 import styles from './FormTwo.module.css'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const FormTwo = () => {
   const { t } = useTranslation()
@@ -12,6 +13,23 @@ const FormTwo = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Fill your information"
+        image={`${process.env.PUBLIC_URL}/assets/images/communication.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Enter your 10 digit mobile number without any prefix or country
+                code
+              </li>
+              <li className="list__item">
+                Enter your email address in proper format
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.formtwo__input}>
         <Input
           id="mobile"
diff --git a/client/src/pages/Enrollment/IrisScan/IrisScan.jsx b/client/src/pages/Enrollment/IrisScan/IrisScan.jsx
index c1e24d7..c1ab2c7 100644
--- a/client/src/pages/Enrollment/IrisScan/IrisScan.jsx
+++ b/client/src/pages/Enrollment/IrisScan/IrisScan.jsx
@@ -4,6 +4,7 @@ import CardBiometrics from '../../../components/Card/CardBiometrics'
 import styles from './IrisScan.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import PopUpModal from '../../../components/Modal/Modal'
 import { useTranslation } from 'react-i18next'
 
 const IrisScan = () => {
@@ -11,6 +12,17 @@ const IrisScan = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Scan your Iris"
+        image={`${process.env.PUBLIC_URL}/assets/images/iris_scan.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">INSTRUCTIONS TO BE ADDED</li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.card__container}>
         <CardBiometrics
           image={`${process.env.PUBLIC_URL}/assets/images/iris.svg`}
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
index 17fe3df..4e4a2b3 100644
--- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
@@ -8,6 +8,7 @@ import styles from './PhotoCapture.module.css'
 import { Button, Grid, Typography } from '@mui/material'
 import { t } from 'i18next'
 import { userContext } from '../../../context/User'
+import PopUpModal from '../../../components/Modal/Modal'
 
 const PhotoCapture = () => {
   const navigate = useNavigate()
@@ -22,6 +23,26 @@ const PhotoCapture = () => {
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
+      <PopUpModal
+        title="Capture your photo"
+        image={`${process.env.PUBLIC_URL}/assets/images/photo.svg`}
+        description={
+          <>
+            <ul>
+              <li className="list__item">
+                Ensure that your photo is clear and in focus
+              </li>
+              <li className="list__item">
+                Also, ensure that you are in the center of your photo
+              </li>
+              <li className="list__item">
+                You won&apos;t be able to proceed until you have captured a
+                clear and centered photo
+              </li>
+            </ul>
+          </>
+        }
+      />
       <div className={styles.card__container}>
         {!userData.photo ? (
           <Webcam
diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
index 7f1fe04..4c9d620 100644
--- a/client/src/pages/Home/Home.jsx
+++ b/client/src/pages/Home/Home.jsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import Card from '../../components/Card/Card'
 import Header from '../../components/Header/Header'
-import PopUpModal from '../../components/Modal/Modal'
+import ExtendedPopUpModal from '../../components/Modal/ExtendedModal'
 import styles from './Home.module.css'
 
 const Home = ({ page, setPage }) => {
@@ -11,7 +11,15 @@ const Home = ({ page, setPage }) => {
   return (
     <>
       <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} />
-      <PopUpModal title={t('FORM_ONE')} />
+      <ExtendedPopUpModal
+        title="Choose the appropriate card"
+        description1="For enrollment of new Aadhaar card"
+        image1={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`}
+        description2="For updation of details of existing Aadhaar card holders"
+        image2={`${process.env.PUBLIC_URL}/assets/images/update.svg`}
+        description3="For checking the status of Aadhaar card enrollment and update requests"
+        image3={`${process.env.PUBLIC_URL}/assets/images/status.svg`}
+      />
       <div className={styles.card__container}>
         <Link to="/enrollment">
           <Card
diff --git a/client/src/services/apiservice.js b/client/src/services/apiservice.js
index e989c01..31262f6 100644
--- a/client/src/services/apiservice.js
+++ b/client/src/services/apiservice.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const apiClient = axios.create({
-  baseURL: 'http://localhost:5000'
+  baseURL: 'https://aadhaar-kiosk.herokuapp.com/'
 })
 
 export const createUser = async (payload) => {
diff --git a/client/src/styles/GlobalVariables.css b/client/src/styles/GlobalVariables.css
index a1e3384..0d29d26 100644
--- a/client/src/styles/GlobalVariables.css
+++ b/client/src/styles/GlobalVariables.css
@@ -3,6 +3,13 @@
   --color-shadow: rgba(0, 0, 0, 0.24);
 
   --font-large: 4rem;
+  --font-medium-large: 2.5rem;
   --font-medium: 2rem;
+  --font-medium-sm: 1.5rem;
   --font-medium-s: 1.25rem;
 }
+
+.list__item {
+  margin: 10px 0px;
+  padding: 10px 0px;
+}