From 4480f2d62865a585f8bbf0cd7122a25d0413bf2b Mon Sep 17 00:00:00 2001
From: rohan09-raj <rajrohan1914@gmail.com>
Date: Sun, 21 Aug 2022 01:46:36 +0530
Subject: fixed update components

---
 client/src/pages/Update/Otp/Otp.jsx | 106 +++++++++++++++++++++++++++++-------
 1 file changed, 87 insertions(+), 19 deletions(-)

(limited to 'client/src/pages/Update/Otp/Otp.jsx')

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')
+          }
+        }}
+      />
     </>
   )
 }
-- 
cgit 

