Profile update implementation

.env

@@ -21,10 +21,6 @@ REACT_APP_SESSION_EXPIRE_MINUTES=300000
 REACT_APP_SESSION_EXPIRE_CHECKER=60000
 
 REACT_APP_LOGIN_ERROR_TIMEOUT=7000
-REACT_APP_SIGNUP_ERROR_TIMEOUT=7000
-
-# Had to change the error time to 3sec cause it took too long
-REACT_APP_RESET_START_ERROR_TIMEOUT=3000
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

src/components/AuthPages/ForgotPassword/index.jsx

@@ -1,153 +1,49 @@
-import React, { useEffect, useState } from "react";
-import { Link, useNavigate } from 'react-router-dom';
-import WrenchBoard from "../../../assets/images/wrenchboard.png"
+import React from "react";
+import { Link } from 'react-router-dom';
+import titleShape from "../../../assets/images/shape/title-shape-two.svg";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
-import usersService from "../../../services/UsersService";
 
 export default function ForgotPassword() {
-  const [checked, setValue] = useState(false);
-  const [resetLoading, setResetLoading] = useState(false)
-  // email
-  const [email, setMail] = useState("");
-  const [msgError, setMsgError] = useState('');
-
-  const navigate = useNavigate();
-  const userApi = new usersService();
-
-  const handleEmail = (e) => {
-    setMail(e?.target.value);
-  };
-
-  const humanChecker = () => {
-    setValue(!checked);
-  };
-
-  const resetHandler = async () => {
-    if (email == '') {
-      setMsgError('An email is required')
-    } else if (!checked) {
-      setMsgError('Check if you are human')
-    }
-
-    if (email != '' && checked) {
-      const reqData = { email }
-      setResetLoading(true)
-      try {
-        const res = await userApi.StartResetPassword(reqData)
-        if (res.status === 200) {
-          const { data } = res
-          if (data.status == -1) {
-            setMsgError('This is an incorrect or duplicate email')
-            setResetLoading(false)
-          } else if (data.status > 0) {
-            setResetLoading(false)
-            navigate("/verify-you", { replace: true })
-          } else{
-            setMsgError("reset was not successful")
-            setResetLoading(false)
-          }
-          setMail("")
-        }
-      } catch (error) {
-        setResetLoading(false)
-        setMail("")
-        setMsgError('An error occurred')
-        throw new Error(error)
-      } finally {
-        setTimeout(() => {
-          setMsgError(null)
-        }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
-      }
-    }
-    setTimeout(() => {
-      setMsgError(null)
-    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT)
-  }
-
   return (
     <>
       <AuthLayout
         slogan="Welcome to WrenchBoard"
       >
-        <div className="w-full">
-          <div className='mb-12'>
-            <Link to='#'>
-              <img src={WrenchBoard} alt="wrenchboard" className="h-10 mx-auto" />
-            </Link>
-          </div>
-          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px]  rounded-[0.475rem] sm:p-7 p-5">
-            <div className="flex flex-col justify-center w-full h-full px-5">
-              <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
-                <h1 className="text-[#181c32] font-semibold dark:text-white mb-3" style={{
-                  fontSize: 'calc(1rem + .6vw)'
-                }}>
-                  Forget Password
-                </h1>
-                <span className="text-gray-400 font-medium text-xl">Enter your email to reset your password.</span>
+        <div className="content-wrapper xl:bg-white dark:bg-dark-white   xl:px-[70px] w-full sm:w-auto   2xl:px-[100px] h-[818px] rounded-xl ">
+          <div className="flex flex-col justify-center w-full h-full px-5">
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+              <h1 className="sm:text-5xl text-4xl font-bold sm:leading-[74px]   text-dark-gray dark:text-white">
+                Forget Password
+              </h1>
+              <div className="shape sm:w-[377px] w-[270px] -mt-1 ml-0">
+                <img src={titleShape} alt="shape" />
               </div>
-              <div className="input-area">
-                <div className="input-item mb-10">
-                  <InputCom
-                    placeholder="Your Username/Email"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    value={email}
-                    inputHandler={handleEmail}
-                    iconName="message"
-                  />
-                </div>
-                {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
-                {/* hCaptha clone for the time being */}
-                <div className="mb-10">
-                  <div className="w-[303px] h-[78px] mx-auto overflow-hidden">
-                    <div className="w-[300px] h-[74px] bg-white bottom-[1px] rounded border-gray-100 overflow-hidden cursor-pointer">
-                      {/* Checkbox */}
-                      <div className="h-full relative inline-block">
-                        <div className="relative table top-0 h-full">
-                          <div className="table-cell align-middle">
-                            <div className="relative w-[30px] h-[30px] mx-[15px]">
-                              <input type="checkbox" name="human-checkbox" id="human-checkbox" className="w-[28px] h-[28px] border-[1px] rounded border-gray-400 checked:bg-white" onClick={humanChecker} />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      <div className="h-full relative inline-block w-[170px]">
-                        <label className="relative table top-0 h-full">
-                          <label className="table-cell align-middle">
-                            <label className="text-800 text-sm" htmlFor="human-checkbox">
-                              I am human
-                            </label>
-                          </label>
-                        </label>
-                      </div>
-                      <div className="h-full relative inline-block w-16"></div>
-                    </div>
-                  </div>
-                </div>
-                <div className="signin-area mb-3.5">
-                  <div className="flex justify-center items-center gap-2">
-                    <button
-                      type="button"
-                      onClick={resetHandler}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
-                    >
-                      {resetLoading ? (
-                        <div className="signup btn-loader"></div>
-                      ) : (
-                        <span>Send Code</span>
-                      )}
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => navigate("/login")}
-                      className={`rounded-[0.475rem] mb-6 text-[1.15rem] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.8125rem] `}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </div>
+            </div>
+            <div className="input-area">
+              <div className="input-item mb-5">
+                <InputCom
+                  placeholder="example@quomodosoft.com"
+                  label="Email Address"
+                  name="email"
+                  type="email"
+                  iconName="message"
+                />
+              </div>
+              <div className="signin-area mb-3.5">
+                <a
+                  href="/verify-you"
+                  className="w-full rounded-[50px] mb-5 h-[58px] text-xl text-white font-bold flex justify-center bg-purple items-center"
+                >
+                  Send Code
+                </a>
+
+
+                <Link to="/"
+                  className=" my-40 font-bold flex justify-center text-red-500 items-center"
+                >
+                  Back to Home
+                </Link>
               </div>
             </div>
           </div>

src/components/AuthPages/Login/index.jsx

@@ -4,6 +4,8 @@ import { toast } from "react-toastify";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
+// import titleShape from "../../../assets/images/shape/title-shape.svg";
+import titleShape from "../../../assets/images/shape/login_straight_underline.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard.png"
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -22,6 +24,8 @@ export default function Login() {
     setValue(!checked);
   };
 
+  console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -164,7 +168,7 @@ export default function Login() {
                   Forgot Password
                 </a>
               </div> */}
-                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-thin leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
+                {loginError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">Invalid username or password- Please <Link to='/#' className='text-[#009ef7]'>reset your password</Link> or <Link to='/signup' className='text-[#009ef7]'>create a new account</Link></div>}
                 {msgError && <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px]">{msgError}</div>}
                 <div className="signin-area mb-3.5">
                   <div className="flex justify-center">

src/components/AuthPages/SignUp/index.jsx

@@ -29,15 +29,14 @@ export default function SignUp() {
   // To Show and Hide Password
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
+    // return console.log('showPassword')
   };
-
   const rememberMe = () => {
     setValue(!checked);
   };
 
   const navigate = useNavigate();
   const userApi = new usersService();
-  
   // Get Country Api
   const getCountryList = async () => {
     const res = await userApi.getSignupCountryData()
@@ -75,32 +74,27 @@ export default function SignUp() {
         }
 
         const res = await userApi.CreateUser(reqData)
-        setSignUpLoading(true)
-
         if (res.status === 200) {
           const { data } = res
           if (data.status == -1 && data.acc == 'DULPICATE') {
             setMsgError('This account has been already created')
-            setSignUpLoading(false)
           }
           if (data.status > 0 && data.internal_return == 100 && data.session != '') {
             localStorage.setItem("email", `${data.email}`);
             localStorage.setItem("country", `${data.country}`);
             localStorage.setItem("firstname", `${data.firstname}`);
             localStorage.setItem("lastname", `${data.lastname}`);
+            setSignUpLoading(true)
 
             setTimeout(() => {
               navigate("/", { replace: true });
               setSignUpLoading(false)
             }, 2000)
+            console.log('Success')
           } else {
             setMsgError(data.status)
-            setSignUpLoading(false)
           }
         }
-      } else {
-        setMsgError('This account does not exist')
-        setSignUpLoading(false)
       }
     } catch (error) {
       throw new Error(error)
@@ -108,7 +102,7 @@ export default function SignUp() {
     } finally {
       setTimeout(() => {
         setMsgError(null)
-      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT)
+      }, 7000)
     }
   }
 

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -25,7 +25,7 @@ export default function InputCom({
           {label}
         </label>
       )}
-      {forgotPassword && <Link to="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
+      {forgotPassword && <Link href="/forgot-password" className="text-base text-[#4687ba] hover:text-[#009ef7]">Forgot Password?</Link>}
       </div>
       <div className="input-wrapper border border-[#f5f8fa]] dark:border-[#5e6278] w-full rounded-[0.475rem] h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ">
         <input

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -1,6 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
+import {Link, useNavigate} from 'react-router-dom'
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+import {toast} from 'react-toastify'
 
 export default function PersonalInfoTab({
   datas,
@@ -16,150 +21,181 @@ export default function PersonalInfoTab({
   browseCoverImg,
   coverImgChangHandler,
 }) {
+
+  const apiCall = new usersService()
+  let navigate = useNavigate()
+
+  let [togglePromotion, setTogglePromotion] = useState(false)
+
+  let [requestStatus, setRequestState] = useState({
+    message: '',
+    loading: false,
+    status: false
+  })
+
+  let [inputs, setInputs] = useState({ // State for input fields
+    firstname: '',
+    lastname: '',
+    state: '',
+    city: '',
+    email: ''
+  })
+
+  const handleChange = ({target:{name, value}}) => {
+    setInputs(prev => ({...prev, [name]:value}))
+  }
+
+  const handleUpdateUser = ()=> {
+    setRequestState({message: '', loading: true, status: false})
+
+    let {firstname, lastname, state, city, email} = inputs
+
+    if(!firstname || !lastname || !state || !city || !email){
+      setRequestState({message: 'Please Fill all fields', loading: false, status: false})
+      return
+    }
+
+    //checks if email is a valid email address
+    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (regEx.test(email) == false) {
+      setRequestState({message: 'Your Email is Invalid', loading: false, status: false})
+      return
+    }
+    
+    
+    apiCall.updateProfile(inputs).then((res)=>{
+      if(res.data.internal_return < 0){
+        setRequestState({message: 'Profile Was unable to update', loading: false, status: false})
+        return
+      }
+      setInputs({
+        firstname: '',
+        lastname: '',
+        state: '',
+        city: '',
+        email: ''
+      })
+      // setRequestState({message: 'Profile update successfully', loading: false, status: true})
+      toast.success("Update Successful");
+      setTimeout(()=>{navigate('/',{replace:true})},1000)
+    }).catch(error => {
+      setRequestState({message: 'Opps! an error occurred. Try Agian', loading: false, status: false})
+    })
+  }
+
   return (
     <div className="personal-info-tab w-full flex flex-col justify-between">
       <div className="flex flex-col-reverse sm:flex-row">
         <div className="flex-1 sm:mr-10">
           <div className="fields w-full">
-            {/* first name and last name */}
-            <div className="xl:flex xl:space-x-7 mb-6">
-              <div className="field w-full mb-6 xl:mb-0">
-                <InputCom
-                  label="First Name"
-                  type="text"
-                  name="firstName"
-                  placeholder="First Name Here"
-                  value={datas}
-                  inputHandler={frstNmeHndlr}
-                />
-              </div>
-              <div className="field w-full">
-                <InputCom
-                  label="Last Name"
-                  type="text"
-                  name="lastName"
-                  placeholder="Last Name Here"
-                  value={datas}
-                  inputHandler={lstNmeHndlr}
-                />
-              </div>
+            {/* inputs starts here */}
+            {/* username */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Username <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-200 opacity-90 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={'username@gamil.com'} 
+                    name='username' 
+                    type="text" 
+                    placeholder='username@gamil.com' 
+                    disabled
+                    />
             </div>
-            {/* User Name */}
-            <div className="field w-full mb-6">
-              <InputCom
-                label="User Name"
-                type="text"
-                name="userName"
-                placeholder="@example"
-                value={datas}
-                inputHandler={lstNmeHndlr}
-              />
+
+            {/* Email */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Email <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-200 opacity-90 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.email} 
+                    name='email' 
+                    type="text" 
+                    placeholder='Firstname' 
+                    onChange={handleChange}
+                    />
             </div>
-            {/* External Links */}
-            <div className="field w-full mb-6">
-              <InputCom
-                label="External Links"
-                type="text"
-                name="link"
-                placeholder="https:yoursite.lo/imte/item_name123"
-                value={datas}
-                inputHandler={lstNmeHndlr}
-              />
+
+            {/* Fullname */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Fullname <span className='text-red-500'>*</span></label>
+                <div className="w-full flex items-center justify-center space-x-1 space-y-1">
+                  <input className='p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.firstname} 
+                    name='firstname' 
+                    type="text" 
+                    placeholder='Firstname' 
+                    onChange={handleChange}
+                    />
+                    <input className='p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.lastname} 
+                    name='lastname' 
+                    type="text" 
+                    placeholder='Lastname' 
+                    onChange={handleChange}
+                    />
+                </div>
             </div>
-            {/* bio */}
-            <div className="field w-full mb-6">
-              <h1 className="field-title">Bio </h1>
-              <div className="input-field mt-2">
-                <div className="input-wrapper w-full ">
-                  <textarea
-                    value={datas}
-                    onChange={(e) => dscrphn(e)}
-                    placeholder="provide a detailed description of your item."
-                    rows="7"
-                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
+
+             {/* Country */}
+             <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-200 opacity-90 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value='Nigeria'
+                    name='country' 
+                    type="text" 
+                    disabled
                   />
-                </div>
-              </div>
             </div>
-            {/* email */}
-            <div className="field w-full mb-6">
-              <InputCom
-                label="Email"
-                type="email"
-                name="email"
-                placeholder="https:yoursite.lo/imte/item_name123"
-                value={datas}
-                inputHandler={lstNmeHndlr}
-              />
-              <p className="text-thin-light-gray text-sm tracking-wide mt-3">
-                Your email for marketplace notifications
-              </p>
+
+             {/* State/Province */}
+             <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.state} 
+                    name='state' 
+                    type="text" 
+                    placeholder='State' 
+                    onChange={handleChange}
+                    />
             </div>
-          </div>
-          {/* border line */}
-          <div className="w-full h-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mb-6"></div>
-          <div className="social-connetion w-full">
-            <div className="mb-6">
-              {/* headings */}
-              <div className="mb-4">
-                <h1 className="text-xl text-dark-gray dark:text-white tracking-wide font-bold mb-1.5">
-                  Social Connections
-                </h1>
-                <p className="text-sm tracking-wide text-thin-light-gray">
-                  Help collectors verify your account by connecting Twitter
-                </p>
-              </div>
-              <div className="flex justify-between items-center ">
-                <div className="flex space-x-2.5 items-center">
-                  <div className="w-[44px] h-[44px] rounded-full bg-[#E0F2FD] flex justify-center items-center">
-                    <span>
-                      <svg
-                        width="23"
-                        height="19"
-                        viewBox="0 0 23 19"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M0 17.0066C2.46188 17.0803 4.69827 16.4768 6.78777 14.9218C4.65896 14.6476 3.19321 13.6316 2.38327 11.5697C3.08253 11.5697 3.68869 11.5697 4.29588 11.5697C2.09881 10.6971 0.869935 9.1764 0.703396 6.7914C1.37576 6.9763 1.99951 7.14666 2.62222 7.31805C0.666157 5.02758 0.227569 2.9085 1.41507 0.9307C4.01246 3.90364 7.22015 5.64253 11.155 5.89391C11.155 5.44101 11.1405 5.04628 11.1571 4.65259C11.2409 2.67998 12.208 1.25376 13.9686 0.46118C15.6847 -0.31166 17.3821 -0.119489 18.8665 1.08548C19.3403 1.47086 19.7509 1.5311 20.2702 1.3192C20.9519 1.04081 21.6367 0.77177 22.3866 0.471567C22.0546 1.52383 21.3605 2.23746 20.6519 3.0103C21.3998 2.80774 22.1476 2.60622 22.8955 2.40367C22.9307 2.43483 22.9659 2.46599 23.001 2.49715C22.4218 3.10587 21.8818 3.76029 21.2498 4.30564C20.8691 4.63389 20.7191 4.95798 20.7067 5.44101C20.6074 9.13796 19.3444 12.3727 16.7698 15.0361C14.2769 17.6143 11.2109 18.8836 7.62874 18.9917C4.97239 19.0716 2.5105 18.4775 0.217225 17.1458C0.141714 17.1032 0.071374 17.0533 0 17.0066Z"
-                          fill="#33AAF2"
-                        />
-                      </svg>
-                    </span>
+
+            {/* City */}
+            <div className='profile-input my-3'>
+                <label className='w-full text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
+                <input className='w-full p-3 text-lg text-slate-500 bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                    value={inputs.city} 
+                    name='city' 
+                    type="text" 
+                    placeholder='City' 
+                    onChange={handleChange}
+                    />
+            </div>
+
+            {/* Preferred Communication*/}
+            <div className='profile-input my-3'>
+                <label className='text-slate-600 text-lg'>Pref. Communication <span className='text-red-500'>*</span></label>
+                <div className="check-box">
+                  <div className="flex items-center justify-start">
+                    <div className="check-input flex items-center">
+                      <input className="mx-2 w-4 h-4 cursor-pointer" type="checkbox" name="prefcomm1" id="" />
+                      <span className="text-slate-600 text-lg">Email</span>
+                    </div>
+                    <div className="check-input flex items-center">
+                      <input className="mx-2 w-4 h-4 cursor-pointer" type="checkbox" name="prefcomm2" id="" />
+                      <span className="text-slate-600 text-lg">Phone</span>
+                    </div>
                   </div>
-                  <p className="text-18 dark:text-white tracking-wide">
-                    Twitter
-                  </p>
                 </div>
-                <div>
-                  <p className="text-18 tracking-wide text-[#33AAF2] border-b dark:border-[#5356fb29]  border-[#33AAF2]">
-                    Cannect
-                  </p>
-                </div>
-              </div>
             </div>
-            <div className="mb-10">
-              {/* headings */}
-              <div className="sm:flex justify-between items-center mb-4">
-                <div className="mr-16 mb-5 sm:mb-0">
-                  <h1 className="text-xl text-dark-gray dark:text-white tracking-wide font-bold mb-1.5">
-                    Verification
-                  </h1>
-                  <p className="text-sm tracking-wide text-thin-light-gray leading-7">
-                    Proceed with verification process to get more visibility and
-                    gain trust on NFTMAX Marketplace.
-                  </p>
+
+            {/* Allow Promotions */}
+            <div className='profile-input my-3 flex items-center space-x-4'>
+                <label className='text-slate-600 text-lg'>Allow Promotions</label>
+                <div className="cursor-pointer flex items-center" onClick={()=>setTogglePromotion(prev => !prev)}>
+                  <div className={`h-6 w-8 mr-1 p-1 ${togglePromotion ? 'bg-sky-blue flex justify-end items-center': 'bg-slate-200'} rounded-full transition`}>
+                    <div className="w-4 h-full bg-white rounded-full"></div>  
+                  </div>
                 </div>
-                <div>
-                  <a
-                    href="#"
-                    className="w-[136px] h-[46px] flex justify-center items-center text-18 tracking-wide rounded-full text-white bg-light-green hover:bg-green-600 transition duration-300 ease-in-out"
-                  >
-                    Get Verified
-                  </a>
-                </div>
-              </div>
             </div>
+            {/* inputs ends here */}
           </div>
         </div>
         <div className="w-[232px] mb-10">
@@ -272,24 +308,30 @@ export default function PersonalInfoTab({
         </div>
       </div>
       <div className="content-footer w-full">
+        {requestStatus.message != '' && <p className={`text-center text-base ${requestStatus.status ? 'text-green-800' : 'text-red-600'}`}>{requestStatus.message}</p>}
         <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-          <div className="flex space-x-4 mr-9">
-            <button
-              type="button"
+          <div className="flex items-center space-x-4 mr-9">
+            <Link
+              to='/'
               className="text-18 text-light-red tracking-wide "
             >
               <span className="border-b dark:border-[#5356fb29]  border-light-red">
                 {" "}
                 Cancel
               </span>
-            </button>
+            </Link>
 
+            {requestStatus.loading ? 
+            <LoadingSpinner size='8' color='sky-blue' />
+            :
             <button
-              type="button"
-              className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            type="button"
+            className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
+            onClick={handleUpdateUser}
             >
               Upadate Profile
             </button>
+            }
           </div>
         </div>
       </div>

src/middleware/AuthRoute.jsx

@@ -8,6 +8,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
+
   //Removing Data stored at localStorage after session expires
   const expireSession = () => {
     localStorage.removeItem("email");

src/services/UsersService.js

@@ -6,11 +6,6 @@ class usersService {
         console.log("WRB Service Entry");
     }
 
-    CreateUser(reqData){
-        localStorage.setItem("session_token", ``);
-        return this.postAuxEnd("/createuser", reqData);
-    }
-
     getHomeDate(){
         var postData = {
             uuid: localStorage.getItem("uuid"),
@@ -53,6 +48,11 @@ class usersService {
         return this.postAuxEnd("/apigate", null);
     }
 
+    CreateUser(reqData){
+        localStorage.setItem("session_token", ``);
+        return this.postAuxEnd("/createuser", reqData);
+    }
+
     getLoadProfile(){
         var postData = {
             uuid: localStorage.getItem("uid"),
@@ -216,15 +216,23 @@ class usersService {
         return this.postAuxEnd("/refferhx", postData);
     }
 
+    //END POINT CALL FOR UPDATE PROFILE
+    updateProfile(post){
+        var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 5031,
+        ...post
+        };
+        return this.postAuxEnd("/updateprofile", postData);
+    }
+
     //END POINT CALL FOR SENDING REFERRAL MESSAGE
     sendReferralMsg(postData){
         return this.postAuxEnd("/sendreferral", postData);
     }
 
-    StartResetPassword(reqData){
-        return this.postAuxEnd("/startresetpasword", reqData)
-    }
-
     getCouponRedeem(){
     var postData = {
         uuid: localStorage.getItem("uid"),