From fcc4c3374d85b33755f852bcc559db0a8eb5115a Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkateshchaturvedi12@gmail.com>
Date: Thu, 25 Aug 2022 11:44:08 +0530
Subject: Misc changes and add more translation

---
 client/src/pages/CheckStatus/EnrollmentStatus.jsx  |  3 ---
 client/src/pages/CheckStatus/StatusOtp.jsx         | 21 +++++++------------
 client/src/pages/CheckStatus/UpdateStatus.jsx      |  3 ---
 client/src/pages/Enrollment/Address/Address.jsx    | 15 ++++----------
 .../src/pages/Enrollment/Agreement/Agreement.jsx   | 16 ++++-----------
 .../Enrollment/DocumentScanner/DocumentScanner.jsx | 15 +++++++-------
 client/src/pages/Enrollment/Enrollment.jsx         |  6 +++++-
 client/src/pages/Enrollment/FormOne/FormOne.jsx    | 17 ++++-----------
 client/src/pages/Enrollment/FormTwo/FormTwo.jsx    | 11 +++-------
 .../pages/Enrollment/PhotoCapture/PhotoCapture.jsx | 15 ++++----------
 client/src/pages/Update/Address/Address.jsx        | 18 ++++------------
 client/src/pages/Update/Agreement/Agreement.jsx    | 24 +++++++++++-----------
 client/src/pages/Update/Biometric/Biometric.jsx    |  2 +-
 .../Update/BiometricSelect/BiometricSelect.jsx     | 10 +++------
 .../Update/DocumentScanner/DocumentScanner.jsx     | 19 ++++++++---------
 client/src/pages/Update/FormOne/FormOne.jsx        | 24 ++++------------------
 client/src/pages/Update/Otp/Otp.jsx                | 20 +++++++-----------
 .../src/pages/Update/PhotoCapture/PhotoCapture.jsx | 15 ++++----------
 18 files changed, 82 insertions(+), 172 deletions(-)

(limited to 'client/src/pages')

diff --git a/client/src/pages/CheckStatus/EnrollmentStatus.jsx b/client/src/pages/CheckStatus/EnrollmentStatus.jsx
index 9ae0026..d1e1f4d 100644
--- a/client/src/pages/CheckStatus/EnrollmentStatus.jsx
+++ b/client/src/pages/CheckStatus/EnrollmentStatus.jsx
@@ -46,9 +46,6 @@ const EnrollmentStatus = () => {
             <p className={styles.status__content}>
               {t('YOUR_AADHAAR_STATUS_IS_APPROVED')}
             </p>
-            <p className={styles.status__content}>
-              {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')}
-            </p>
           </>
         )}
         <Button
diff --git a/client/src/pages/CheckStatus/StatusOtp.jsx b/client/src/pages/CheckStatus/StatusOtp.jsx
index d7d62d1..4955ab4 100644
--- a/client/src/pages/CheckStatus/StatusOtp.jsx
+++ b/client/src/pages/CheckStatus/StatusOtp.jsx
@@ -12,6 +12,7 @@ import { toast, ToastContainer } from 'react-toastify'
 import PopUpModal from '../../components/Modal/Modal'
 
 import styles from './StatusOtp.module.css'
+import Spinner from '../../components/Spinner/Spinner'
 
 const StatusOtp = () => {
   const navigate = useNavigate()
@@ -68,7 +69,7 @@ const StatusOtp = () => {
       }
     })
     if (isLoading) {
-      return <div>{t('loading')}</div>
+      return <Spinner heading='STATUS' />
     }
 
     if (isError) {
@@ -85,7 +86,7 @@ const StatusOtp = () => {
     })
 
     if (isLoading) {
-      return <div>{t('loading')}</div>
+      return <Spinner heading='STATUS' />
     }
 
     if (isError) {
@@ -97,6 +98,8 @@ const StatusOtp = () => {
     }
   }
 
+  const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+
   return (
     <>
       <ToastContainer
@@ -106,22 +109,12 @@ const StatusOtp = () => {
       />
       <Header subheading={`${t('STATUS')}`} />
       <PopUpModal
-        title="Verify your mobile number"
+        title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/otp.svg`}
         description={
           <>
             <ul>
-              <li className="list__item">Click on &quot;SEND OTP&quot;</li>
-              <li className="list__item">
-                You will recieve an OTP on your entered mobile number
-              </li>
-              <li className="list__item">
-                You can &quot;RESEND&quot; the OTP after 30 seconds, if you
-                haven&apos;t received it yet.
-              </li>
-              <li className="list__item">
-                Click on &quot;VERIFY OTP&quot; to verify your mobile number
-              </li>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/CheckStatus/UpdateStatus.jsx b/client/src/pages/CheckStatus/UpdateStatus.jsx
index 431f9d5..a9a4b58 100644
--- a/client/src/pages/CheckStatus/UpdateStatus.jsx
+++ b/client/src/pages/CheckStatus/UpdateStatus.jsx
@@ -46,9 +46,6 @@ const UpdateStatus = () => {
             <p className={styles.status__content}>
               {t('YOUR_AADHAAR_UPDATE_STATUS_IS_APPROVED')}
             </p>
-            <p className={styles.status__content}>
-              {t('PRINT_YOUR_AADHAAR_CARD_FROM_WEBSITE')}
-            </p>
           </>
         )}
         <Button
diff --git a/client/src/pages/Enrollment/Address/Address.jsx b/client/src/pages/Enrollment/Address/Address.jsx
index 78b0737..fc27448 100644
--- a/client/src/pages/Enrollment/Address/Address.jsx
+++ b/client/src/pages/Enrollment/Address/Address.jsx
@@ -45,25 +45,18 @@ const Address = () => {
     })
   }
 
+  const description = ['ENTER_YOUR_DETAILS_ACCORDING_TO_THE_RELEVANT_FIELDS', 'SELECT_THE_STATE_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST', 'SELECT_THE_DISTRICT_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST']
+
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
       <PopUpModal
-        title="Fill your information"
+        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>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Enrollment/Agreement/Agreement.jsx b/client/src/pages/Enrollment/Agreement/Agreement.jsx
index 13b46ba..5b7950b 100644
--- a/client/src/pages/Enrollment/Agreement/Agreement.jsx
+++ b/client/src/pages/Enrollment/Agreement/Agreement.jsx
@@ -46,6 +46,8 @@ const Agreement = ({ unverified, setUnverified }) => {
     }, 30000)
   }
 
+ const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+
   return (
     <>
       <ToastContainer
@@ -55,22 +57,12 @@ const Agreement = ({ unverified, setUnverified }) => {
       />
       <Header subheading={t('ENROLLMENT')} />
       <PopUpModal
-        title="Verify your mobile number"
+        title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
         description={
           <>
             <ul>
-              <li className="list__item">Click on &quot;SEND OTP&quot;</li>
-              <li className="list__item">
-                You will recieve an OTP on your entered mobile number
-              </li>
-              <li className="list__item">
-                You can &quot;RESEND&quot; the OTP after 30 seconds, if you
-                haven&apos;t received it yet.
-              </li>
-              <li className="list__item">
-                Click on &quot;VERIFY OTP&quot; to verify your mobile number
-              </li>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
index 3f7b0f6..2e40523 100644
--- a/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Enrollment/DocumentScanner/DocumentScanner.jsx
@@ -148,25 +148,24 @@ const DocumentScanner = () => {
     <>
       <Header subheading={t('ENROLLMENT')} />
       <PopUpModal
-        title="Scan your documents"
+        title="SCAN_YOUR_DOCUMENTS"
         image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
         description={
           <>
             <ul>
               <li className="list__item">
-                Consists of 3 steps :
+                {t('CONSISTS_OF_3_STEPS')}
                 <ul>
-                  <li>Proof of Identity: </li>
-                  <li>Proof of Address: </li>
-                  <li>Proof of Date of Birth: </li>
+                  <li>{t('PROOF_OF_IDENTITY')} </li>
+                  <li>{t(t('PROOF_OF_ADDRESS'))}</li>
+                  <li>{t('PROOF_OF_DOB')} </li>
                 </ul>
               </li>
               <li className="list__item">
-                Ensure that your documents are in the center of the frame
+                {t('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
+                {t('YOU_WONT_BE_ABLE_TO_PROCEED_UNTIL_YOU_HAVE_SCANNED_ALL_THE_REQUIRED_DOCUMENTS')}
               </li>
             </ul>
           </>
diff --git a/client/src/pages/Enrollment/Enrollment.jsx b/client/src/pages/Enrollment/Enrollment.jsx
index 35a599f..4d8fad2 100644
--- a/client/src/pages/Enrollment/Enrollment.jsx
+++ b/client/src/pages/Enrollment/Enrollment.jsx
@@ -28,6 +28,7 @@ import BackButton from '../../components/BackButton/BackButton'
 import { initialUserData } from '../../constants/userData'
 import * as cocoSsd from '@tensorflow-models/coco-ssd'
 import * as tf from '@tensorflow/tfjs'
+import Spinner from '../../components/Spinner/Spinner'
 
 const Enrollment = () => {
   const { t } = useTranslation()
@@ -73,6 +74,9 @@ const Enrollment = () => {
       })
       setPage(page + 1)
     },
+    onLoading: () => {
+      return <Spinner heading='ENROLLMENT' />
+    },
     onError: (error) => {
       console.log(error)
       if (error?.response?.data?.message === 'User already exists.') {
@@ -152,7 +156,7 @@ const Enrollment = () => {
             toast.error(t('PLEASE_CAPTURE_PHOTOGRAPH'))
           } else if (
             predictions[0].class === 'person' &&
-            predictions[0].score > 0.8
+            predictions[0].score > 0.7
           ) {
             setPage(page + 1)
           } else {
diff --git a/client/src/pages/Enrollment/FormOne/FormOne.jsx b/client/src/pages/Enrollment/FormOne/FormOne.jsx
index fb37457..4fd2d41 100644
--- a/client/src/pages/Enrollment/FormOne/FormOne.jsx
+++ b/client/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -31,27 +31,18 @@ const FormOne = () => {
     }
   }, [userData.gender])
 
+  const description = ['SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX', 'ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION', 'SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD', 'SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER']
+
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
       <PopUpModal
-        title="Fill your information"
+        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>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
index b4a53ed..e7c8ae1 100644
--- a/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
+++ b/client/src/pages/Enrollment/FormTwo/FormTwo.jsx
@@ -10,22 +10,17 @@ import PopUpModal from '../../../components/Modal/Modal'
 const FormTwo = () => {
   const { t } = useTranslation()
   const { userData, setUserData } = userContext()
+  const description = ['ENTER_YOUR_10_DIGIT_MOBILE_NUMBER_WITHOUT_ANY_PREFIX_OR_COUNTRY_ID', 'ENTER_YOUR_EMAIL_ID']
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
       <PopUpModal
-        title="Fill your information"
+        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>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
index 2430016..fd5a051 100644
--- a/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Enrollment/PhotoCapture/PhotoCapture.jsx
@@ -20,25 +20,18 @@ const PhotoCapture = () => {
     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']
+
   return (
     <>
       <Header subheading={t('ENROLLMENT')} />
       <PopUpModal
-        title="Capture your photo"
+        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>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Update/Address/Address.jsx b/client/src/pages/Update/Address/Address.jsx
index 0af60a5..39d3f13 100644
--- a/client/src/pages/Update/Address/Address.jsx
+++ b/client/src/pages/Update/Address/Address.jsx
@@ -55,28 +55,18 @@ const Address = () => {
     setEditable2(!editable2)
   }
 
+  const description = ['UPDATE_THE_REQUIRED_DETAILS_IN_THE_RELEVANT_FIELDS_BY_CLICKING_THE_EDIT_BUTTON', 'IF_REQUIRED_SELECT_THE_STATE_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST', 'IF_REQUIRED_SELECT_THE_DISTRICT_YOU_BELONG_TO_FROM_THE_DROPDOWN_LIST_THIS_WONT_SHOW_ANY_OPTIONS_UNTIL_YOU_HAVE_SELECTED_THE_STATE']
+
   return (
     <>
       <Header subheading={t('UPDATE')} />
       <PopUpModal
-        title="Fill your information"
+        title="FILL_YOUR_INFORMATION"
         image={`${process.env.PUBLIC_URL}/assets/images/address.svg`}
         description={
           <>
             <ul>
-              <li className="list__item">
-                Update the required details in the relevant fields by clicking
-                the edit button
-              </li>
-              <li className="list__item">
-                If required, select the state you belong to. from the dropdown
-                list
-              </li>
-              <li className="list__item">
-                If required, select the district you belong to. from the
-                dropdown list. This won&apos;t show any options until you have
-                selected the state
-              </li>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index 22ffa80..720d8a0 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -13,6 +13,8 @@ import { useMutation } from 'react-query'
 import { ToastContainer, toast } from 'react-toastify'
 import PopUpModal from '../../../components/Modal/Modal'
 import 'react-toastify/dist/ReactToastify.css'
+import Error from '../../Error/Error'
+import Spinner from '../../../components/Spinner/Spinner'
 
 const Agreement = () => {
   const { t } = useTranslation()
@@ -32,6 +34,12 @@ const Agreement = () => {
           mobile: `+91${userData.mobile}`,
           id: userData._id
         })
+      },
+      onLoading: () => {
+        return <Spinner heading='UPDATE' />
+      },
+      onError: () => {
+        return <Error message={t('SOMETHING_WENT_WRONG_PLEASE_TRY_AGAIN')} />
       }
     }
   )
@@ -73,6 +81,8 @@ const Agreement = () => {
     }, 30000)
   }
 
+  const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+
   return (
     <>
       <ToastContainer
@@ -82,22 +92,12 @@ const Agreement = () => {
       />
       <Header subheading={t('ENROLLMENT')} />
       <PopUpModal
-        title="Verify your mobile number"
+        title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
         description={
           <>
             <ul>
-              <li className="list__item">Click on &quot;SEND OTP&quot;</li>
-              <li className="list__item">
-                You will recieve an OTP on your entered mobile number
-              </li>
-              <li className="list__item">
-                You can &quot;RESEND&quot; the OTP after 30 seconds, if you
-                haven&apos;t received it yet.
-              </li>
-              <li className="list__item">
-                Click on &quot;VERIFY OTP&quot; to verify your mobile number
-              </li>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Update/Biometric/Biometric.jsx b/client/src/pages/Update/Biometric/Biometric.jsx
index 10b2776..f8bf028 100644
--- a/client/src/pages/Update/Biometric/Biometric.jsx
+++ b/client/src/pages/Update/Biometric/Biometric.jsx
@@ -82,7 +82,7 @@ const Biometric = () => {
           setUserData({ ...userData, photo: oriUserData.photo })
         } else if (
           predictions[0].class === 'person' &&
-          predictions[0].score > 0.8
+          predictions[0].score > 0.7
         ) {
           setPage(4)
         } else {
diff --git a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
index a942aef..89d2bfb 100644
--- a/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
+++ b/client/src/pages/Update/BiometricSelect/BiometricSelect.jsx
@@ -8,21 +8,17 @@ import { useTranslation } from 'react-i18next'
 
 const BiometricSelect = ({ page, setPage }) => {
   const { t } = useTranslation()
+  const description = ['CLICK_ON_THE_EDIT_BUTTON_TO_UPDATE_THE_REQUIRED_BIOMETRICS', 'YOU_CAN_EDIT_YOUR_PHOTOGRAPH_/_FINGERPRINTS_/_IRIS_SCANS']
   return (
     <>
       <Header subheading={t('UPDATE')} />
       <PopUpModal
-        title="Select the option to be edited"
+        title="SELECT_THE_OPTION_TO_BE_EDITED"
         image={`${process.env.PUBLIC_URL}/assets/images/biometrics.svg`}
         description={
           <>
             <ul>
-              <li className="list__item">
-                Click on the edit button to update the required biometrics
-              </li>
-              <li className="list__item">
-                You can edit your Photograph/Fingerprints/Iris Scans
-              </li>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
index c4f8ad6..e4bffc9 100644
--- a/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
+++ b/client/src/pages/Update/DocumentScanner/DocumentScanner.jsx
@@ -199,31 +199,30 @@ const DocumentScanner = () => {
   return (
     <>
       <Header subheading={t('UPDATE')} />
-      <PopUpModal
-        title="Scan your documents"
+      {steps.length !== 0 && (<PopUpModal
+        title="SCAN_YOUR_DOCUMENTS"
         image={`${process.env.PUBLIC_URL}/assets/images/document.svg`}
         description={
           <>
             <ul>
               <li className="list__item">
-                Consists of 3 steps :
+                {t('CONSISTS_OF_3_STEPS')}
                 <ul>
-                  <li>Proof of Identity: </li>
-                  <li>Proof of Address: </li>
-                  <li>Proof of Date of Birth: </li>
+                  <li>{t('PROOF_OF_IDENTITY')} </li>
+                  <li>{t(t('PROOF_OF_ADDRESS'))}</li>
+                  <li>{t('PROOF_OF_DOB')} </li>
                 </ul>
               </li>
               <li className="list__item">
-                Ensure that your documents are in the center of the frame
+                {t('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
+                {t('YOU_WONT_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/Update/FormOne/FormOne.jsx b/client/src/pages/Update/FormOne/FormOne.jsx
index 2c61fb9..fc7ec1c 100644
--- a/client/src/pages/Update/FormOne/FormOne.jsx
+++ b/client/src/pages/Update/FormOne/FormOne.jsx
@@ -32,34 +32,18 @@ const FormOne = () => {
     }
   }, [userData.gender])
 
+  const description = ['SELECT_YOUR_RESIDENCY_BY_SELECTING_THE_APPROPRIATE_CHECKBOX', 'ENTER_YOUR_FULL_NAME_WITHOUT_ANY_TITLE_OR_SALUTATION', 'SELECT_YOUR_GENDER_BY_CLICKING_ON_THE_APPROPRIATE_CARD', 'SELECT_YOUR_DATE_OF_BIRTH_FROM_THE_PROVIDED_CALENDER']
+
   return (
     <>
       <Header subheading={t('UPDATE')} />
       <PopUpModal
-        title="Fill your information"
+        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>
-              <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>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
index 75a4d73..ca792fa 100644
--- a/client/src/pages/Update/Otp/Otp.jsx
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -10,6 +10,7 @@ import { getUserByAadhaar, sendOTP } from '../../../services/apiservice'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
 import { toast, ToastContainer } from 'react-toastify'
 import PopUpModal from '../../../components/Modal/Modal'
+import Spinner from '../../../components/Spinner/Spinner'
 
 import styles from './Otp.module.css'
 
@@ -63,7 +64,7 @@ const Otp = () => {
   }
 
   if (isLoading) {
-    return <div>{t('loading')}</div>
+    return <Spinner heading='UPDATE'/>
   }
 
   if (isError) {
@@ -73,6 +74,9 @@ const Otp = () => {
   if (data) {
     setOriUserData(data?.data)
   }
+
+  const description = ['CLICK_ON_SEND_OTP', 'YOU_WILL_RECIEVE_AN_OTP_ON_YOUR_MOBILE_NUMBER', 'YOU_CAN_RESEND_THE_OTP_AFTER_30_SECONDS_IF_YOU_HAVENT_RECEIVED_IT_YET', 'CLICK_ON_VERIFY_OTP_TO_VERIFY_YOUR_MOBILE_NUMBER']
+
   return (
     <>
       <ToastContainer
@@ -82,22 +86,12 @@ const Otp = () => {
       />
       <Header subheading={`${t('UPDATE')}`} />
       <PopUpModal
-        title="Verify your mobile number"
+        title="VERIFY_YOUR_MOBILE_NUMBER"
         image={`${process.env.PUBLIC_URL}/assets/images/otp.svg`}
         description={
           <>
             <ul>
-              <li className="list__item">Click on &quot;SEND OTP&quot;</li>
-              <li className="list__item">
-                You will recieve an OTP on your entered mobile number
-              </li>
-              <li className="list__item">
-                You can &quot;RESEND&quot; the OTP after 30 seconds, if you
-                haven&apos;t received it yet.
-              </li>
-              <li className="list__item">
-                Click on &quot;VERIFY OTP&quot; to verify your mobile number
-              </li>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
diff --git a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
index 25f8572..4fd4117 100644
--- a/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
+++ b/client/src/pages/Update/PhotoCapture/PhotoCapture.jsx
@@ -30,25 +30,18 @@ const PhotoCapture = () => {
     }
   }
 
+  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']
+
   return (
     <>
       <Header subheading={t('UPDATE')} />
       <PopUpModal
-        title="Update your photo"
+        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>
+              {description.map((item) => (<li className="list__item" key='id'>{t(item)}</li>))}
             </ul>
           </>
         }
-- 
cgit