fixed update components

2 files changed, 92 insertions, 19 deletions

diff --git a/client/src/pages/Update/Otp/Otp.jsx b/client/src/pages/Update/Otp/Otp.jsx
index 31d8096..bce6ef7 100644
--- a/client/src/pages/Update/Otp/Otp.jsx
+++ b/client/src/pages/Update/Otp/Otp.jsx
@@ -1,19 +1,26 @@
-import React, { useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import Header from '../../../components/Header/Header'
 import Input from '../../../components/Input/Input'
-import { Button, Grid } from '@mui/material'
+import { Button } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { userContext } from '../../../context/User'
-import { useQuery } from 'react-query'
-import { getUserByAadhaar } from '../../../services/apiservice'
-import styles from './Otp.module.css'
+import { useQuery, useMutation } from 'react-query'
+import { getUserByAadhaar, sendOTP } from '../../../services/apiservice'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { toast, ToastContainer } from 'react-toastify'
+
+import styles from './Otp.module.css'
 
 const Otp = () => {
   const navigate = useNavigate()
   const { t } = useTranslation()
-  const { aadhaarNumber, setUserData, oriUserData, setOriUserData } =
+  const [otp, setOtp] = useState()
+  const [disabled, setDisabled] = useState(false)
+  const [finalDisable, setFinalDisable] = useState(false)
+  const [unverified, setUnverified] = useState(true)
+  const [show, setShow] = useState(false)
+  const { aadhaarNumber, userData, setUserData, oriUserData, setOriUserData } =
     userContext()
 
   useEffect(() => {
@@ -22,7 +29,6 @@ const Otp = () => {
 
   const isLongEnough = aadhaarNumber?.toString().length > 11
 
-  // Make api call using the provided aadhaar number and set the user data in the context if the api call is successful. Set form data to the user data if the api call is successful and prevent too many re-renders.
   const { isLoading, isError, data } = useQuery('user', async () => {
     if (isLongEnough) {
       const response = await getUserByAadhaar(aadhaarNumber)
@@ -30,6 +36,31 @@ const Otp = () => {
     }
   })
 
+  const mutateOTP = useMutation(() =>
+    sendOTP({ mobile: `+91${userData?.mobile}` })
+  )
+
+  const verifyOTP = () => {
+    if (mutateOTP?.data?.data?.otpCode === Number(otp)) {
+      setFinalDisable(true)
+      setDisabled(true)
+      setShow(false)
+      setUnverified(false)
+      toast.success(t('OTP_VERIFIED!'))
+    } else {
+      toast.error(t('INCORRECT_OTP'))
+    }
+  }
+
+  const sendResendOTP = () => {
+    setTimeout(() => {
+      if (finalDisable === false) {
+        console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+        setDisabled(false)
+      }
+    }, 30000)
+  }
+
   if (isLoading) {
     return <div>{t('loading')}</div>
   }
@@ -43,29 +74,66 @@ const Otp = () => {
   }
   return (
     <>
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
       <Header subheading={`${t('UPDATE')}`} />
       <div className={styles.subheading__container}>
-        <h3 className={styles.subheading}> {t('ENTER_OTP')} </h3>
-        <Input
-          type="text"
-          id="aadhaarNumber"
-          placeholder={`${t('ENTER_OTP')}`}
-        />
-        <Grid container columnSpacing={10} justifyContent="center">
-          <Grid item>
+        <h3 className={styles.subheading}>{t('ENTER_OTP')}</h3>
+        <p className={styles.subsubheading}>
+          {t('SENT_TO_YOUR_REGISTERED_MOBILE_NUMBER')}
+        </p>
+        <Button
+          color="primary"
+          size="large"
+          type="submit"
+          variant="contained"
+          disabled={disabled}
+          sx={{ marginTop: '1rem' }}
+          onClick={() => {
+            mutateOTP.mutate()
+            setDisabled(true)
+            setShow(true)
+            sendResendOTP()
+          }}
+        >
+          {show ? t('RESEND') : t('SEND_OTP')}
+        </Button>
+        {show && (
+          <>
+            <Input
+              type="text"
+              id="otp"
+              value={otp}
+              onChange={(e) => setOtp(e.target.value)}
+              maxLength="6"
+              placeholder={t('ENTER_OTP')}
+            />
             <Button
               color="primary"
               size="large"
               type="submit"
               variant="contained"
-              onClick={() => {}}
+              onClick={() => {
+                verifyOTP()
+              }}
             >
               {t('VERIFY_OTP')}
             </Button>
-          </Grid>
-        </Grid>
+          </>
+        )}
       </div>
-      <SubmitButton onClick={() => navigate('/update/select-update')} />
+      <SubmitButton
+        onClick={() => {
+          if (unverified) {
+            toast.error(t('PLEASE_VERIFY_OTP'))
+          } else {
+            navigate('/update/select-update')
+          }
+        }}
+      />
     </>
   )
 }
diff --git a/client/src/pages/Update/Otp/Otp.module.css b/client/src/pages/Update/Otp/Otp.module.css
index 261d7aa..b88d5d4 100644
--- a/client/src/pages/Update/Otp/Otp.module.css
+++ b/client/src/pages/Update/Otp/Otp.module.css
@@ -12,3 +12,8 @@
   font-size: var(--font-medium);
   font-weight: 400;
 }
+
+.subsubheading {
+  font-size: var(--font-medium-s);
+  margin: 10px 0px;
+}