10 files changed, 156 insertions, 5 deletions
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