2 files changed, 98 insertions, 37 deletions

diff --git a/client/src/pages/Update/Agreement/Agreement.jsx b/client/src/pages/Update/Agreement/Agreement.jsx
index 804561b..2d1361d 100644
--- a/client/src/pages/Update/Agreement/Agreement.jsx
+++ b/client/src/pages/Update/Agreement/Agreement.jsx
@@ -1,57 +1,111 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Header from '../../../components/Header/Header'
 import CardAgreement from '../../../components/Card/CardAgreement'
 import styles from './Agreement.module.css'
 import Input from '../../../components/Input/Input'
-import { Grid, Button } from '@mui/material'
 import { Link } from 'react-router-dom'
 import SubmitButton from '../../../components/SubmitButton/SubmitButton'
+import { Button, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
+import { sendOTP, updateUser } from '../../../services/apiservice'
 import { userContext } from '../../../context/User'
 import { useMutation } from 'react-query'
-import { updateUser } from '../../../services/apiservice'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 
-const Agreement = () => {
+const Agreement = ({ unverified, setUnverified }) => {
+  const { t } = useTranslation()
+  const [otp, setOtp] = useState()
+  const [disabled, setDisabled] = useState(false)
+  const [finalDisable, setFinalDisable] = useState(false)
+  const [show, setShow] = useState(false)
   const { userData } = userContext()
+
   const updateUse = useMutation(() => updateUser(userData._id, { ...userData }))
 
-  const { t } = useTranslation()
+  const { data, mutate } = useMutation(() =>
+    sendOTP({ mobile: `+91${userData?.mobile}` })
+  )
+
+  console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+
+  const verifyOTP = () => {
+    if (data?.data?.otpCode === Number(otp)) {
+      console.log('Disabled: ', disabled, 'Final Disable: ', finalDisable)
+      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)
+  }
+
   return (
     <>
-      <Header subheading={t('UPDATE')} />
+      <ToastContainer
+        autoClose={1000}
+        hideProgressBar={true}
+        theme={'colored'}
+      />
+      <Header subheading={t('ENROLLMENT')} />
       <div className={styles.card__container}>
         <CardAgreement
           image={`${process.env.PUBLIC_URL}/assets/images/agreement.svg`}
         />
       </div>
-      <Input
-        type="text"
-        id="otp"
-        label={t('PLEASE_VERIFY_YOUR_IDENTITY')}
-        placeholder="XXXX"
-      />
-      <Grid container columnSpacing={10} justifyContent="center">
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            {t('SEND_OTP')}
-          </Button>
-        </Grid>
-        <Grid item>
-          <Button
-            color="primary"
-            size="large"
-            type="submit"
-            variant="contained"
-          >
-            {t('RESEND')}
-          </Button>
-        </Grid>
-      </Grid>
+      <div className={styles.card__elements}>
+        <Typography>{t('PLEASE_VERIFY_YOUR_IDENTITY')}</Typography>
+        <Button
+          color="primary"
+          size="large"
+          type="submit"
+          variant="contained"
+          disabled={disabled}
+          sx={{ marginTop: '1rem' }}
+          onClick={() => {
+            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="XXXXXX"
+            />
+            <Button
+              color="primary"
+              size="large"
+              type="submit"
+              variant="contained"
+              onClick={() => {
+                verifyOTP()
+              }}
+            >
+              {t('VERIFY_OTP')}
+            </Button>
+          </>
+        )}
+      </div>
       <Link to="/update/final-slip">
         <SubmitButton onClick={() => updateUse.mutate()} />
       </Link>
diff --git a/client/src/pages/Update/Agreement/Agreement.module.css b/client/src/pages/Update/Agreement/Agreement.module.css
index c618a4d..2580d47 100644
--- a/client/src/pages/Update/Agreement/Agreement.module.css
+++ b/client/src/pages/Update/Agreement/Agreement.module.css
@@ -1,4 +1,11 @@
 .card__container {
-    display: flex;
-    justify-content: center;
-  }
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+}
+
+.card__elements {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}