Merge pull request #14 from Blaster4385/develop

Misc changes and add more translation

1 files changed, 7 insertions, 13 deletions

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>
           </>
         }