implemented logout

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import NairaBag from "../../assets/images/dashboard/naira-bag.png";
 import { Button } from "../";
+import { useSelector } from "react-redux";
 
 export interface DashBoardCardProps {
   title?: string;
@@ -73,11 +74,12 @@ interface DashboardHomeIntroProps {
 }
 
 const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step }) => {
+  const { userDetails } = useSelector((state:any) => state?.userDetails); // CHECKS IF USER Details are avaliable
   return (
     <>
     {step == 1 ?
       <>
-        <h1 className="font-bold my-5 text-2xl">Hello, Olanrewaju</h1>
+        <h1 className="font-bold my-5 text-2xl">Hello, {userDetails.firstname}</h1>
         <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
           <DashBoardCard
             cardClass="bg-[#5C2684] relative"
@@ -95,7 +97,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({ handleNextStep, step
       </>
       :
       <>
-        <h1 className="font-bold my-5 text-2xl">Welcome Back, Olanrewaju</h1>
+        <h1 className="font-bold my-5 text-2xl">Welcome Back, {userDetails.firstname}</h1>
         <div className="group w-full lg:w-[27.8125rem] h-[12.75rem] mt-7 ">
           <DashBoardCard
             cardClass="bg-[#5C2684] relative"

src/components/LetsGetStated/LetsGetStarted.tsx

@@ -5,6 +5,9 @@ import { InputCompOne } from "..";
 import {useNavigate} from 'react-router-dom'
 import { RouteHandler } from "../../router/routes";
 
+import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../store/UserDetails";
+
 import { validateBVN, verifyOTP } from "../../core/apiRequest";
 import { RequestStatus } from "../../core/models";
 
@@ -54,6 +57,7 @@ type ValidBVN = {
 }
 
 const LetsGetStarted: React.FC = () => {
+  const dispatch = useDispatch()
   const navigate = useNavigate()
   // const [pinValues, setPinValues] = React.useState({
   //   bvn: "",
@@ -63,6 +67,8 @@ const LetsGetStarted: React.FC = () => {
 
   const [requestStatusBVN, setRequestStatusBVN] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
 
+  const [requestStatusOTP, setRequestStatusOTP] = React.useState<RequestStatus>({loading:false, status:undefined, message:''});
+
   const [bvnIsValid, setBvnIsValid] = React.useState<ValidBVN>({
     verification_id: '',
     valid: undefined
@@ -91,12 +97,26 @@ const LetsGetStarted: React.FC = () => {
   };
 
   const handleSubmit = (values:any) => {  // Function to VERIFY OTP AND LOGIN USER
+    setRequestStatusOTP({loading:true, status:false, message:''})
     // console.log('values', values)
     verifyOTP({...values, verification_id:bvnIsValid.verification_id}).then(res=>{
-      console.log(res.data)
+      if(!res || !res.data.call_return){
+        setRequestStatusOTP({loading:false, status:false, message:'wrong otp'})
+        return setTimeout(()=>{
+          setRequestStatusOTP({loading:false, status:false, message:''})
+        },4000)
+      }
+      // console.log(res.data)
+      localStorage.setItem('token', res.data.token)
+      localStorage.setItem('uid', res.data.uid)
+      dispatch(updateUserDetails({ ...res.data }));
       navigate(RouteHandler.dashboardHome, {replace:true})
     }).catch(err => {
+      setRequestStatusOTP({loading:false, status:false, message:'something went wrong, try again'})
       console.log(err)
+      return setTimeout(()=>{
+        setRequestStatusOTP({loading:false, status:false, message:''})
+      },4000)
     })
   };
 
@@ -159,6 +179,7 @@ const LetsGetStarted: React.FC = () => {
                 Enter
               </button>
               
+              <p className={`p-2 ${!requestStatusOTP.status ? 'text-red-500' : 'text-emerald-500'}`}>{requestStatusOTP.message}</p>
 
               {bvnIsValid.valid || bvnIsValid.valid == undefined ? (
                 <p className="text-[#5C2684] mt-[1.5625rem] w-fit">