Merge branch 'master' into add_recipient

.env

@@ -19,5 +19,7 @@ REACT_APP_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/svs/user"
 
 REACT_APP_SESSION_EXPIRE_MINUTES=5
 
+REACT_APP_LOGIN_ERROR_TIMEOUT=7000
+
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

src/components/AuthPages/Login/index.jsx

@@ -17,11 +17,15 @@ export default function Login() {
 
   //login error state
   const [loginError, setLoginError] = useState(false);
+  // for the catch error
+  const [msgError, setMsgError] = useState('');
 
   const rememberMe = () => {
     setValue(!checked);
   };
 
+  console.log(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT)
+
   // email
   const [email, setMail] = useState("");
   const handleEmail = (e) => {
@@ -34,41 +38,56 @@ export default function Login() {
   };
   const navigate = useNavigate();
   const userApi = new usersService();
+
+
   const doLogin = async () => {
-    if (email !== "" && password !== "") {
-      var postData = {
-        username: email,
-        password: password,
-        sessionid: 'STARTING'
-      };
-      const loginResult = await userApi.logInUser(postData);  // just for a test
-      //debugger;
-      // if (email === "support@mermsemr.com") {
-      if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
-        localStorage.setItem("email", `${loginResult.data.email}`);
-        localStorage.setItem("member_id", `${loginResult.data.member_id}`);
-        localStorage.setItem("uid", `${loginResult.data.uid}`);
-        localStorage.setItem("session_token", `${loginResult.data.session}`);
-        localStorage.setItem("added", `${loginResult.data.added}`);
-        localStorage.setItem("city", `${loginResult.data.city}`);
-        localStorage.setItem("country", `${loginResult.data.country}`);
-        localStorage.setItem("firstname", `${loginResult.data.firstname}`);
-        localStorage.setItem("last_login", `${loginResult.data.last_login}`);
-        localStorage.setItem("lastname", `${loginResult.data.lastname}`);
-        localStorage.setItem("state", `${loginResult.data.state}`);
-        localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
-        localStorage.setItem("session", `${loginResult.data.session}`);
-        setLoginLoading(true);
-        // userApi.getUserReminders(); //testing
-        setTimeout(() => {
-          toast.success("Login Successfully");
-          navigate("/", { replace: true });
-          setLoginLoading(false);
-        }, 2000);
-      } else {
-        // toast.error("Invalid Credential");
-        setLoginError(true)
+    if (email == '' && password == '') {
+      setMsgError('Please fill in fields')
+    }
+    try {
+      if (email !== "" && password !== "") {
+        var postData = {
+          username: email,
+          password: password,
+          sessionid: 'STARTING'
+        };
+        const loginResult = await userApi.logInUser(postData);  // just for a test
+        //debugger;
+        // if (email === "support@mermsemr.com") {
+        if (loginResult.data.status > 0 && loginResult.data.internal_return == 100 && loginResult.data.session != '') { // just for a start
+          localStorage.setItem("email", `${loginResult.data.email}`);
+          localStorage.setItem("member_id", `${loginResult.data.member_id}`);
+          localStorage.setItem("uid", `${loginResult.data.uid}`);
+          localStorage.setItem("session_token", `${loginResult.data.session}`);
+          localStorage.setItem("added", `${loginResult.data.added}`);
+          localStorage.setItem("city", `${loginResult.data.city}`);
+          localStorage.setItem("country", `${loginResult.data.country}`);
+          localStorage.setItem("firstname", `${loginResult.data.firstname}`);
+          localStorage.setItem("last_login", `${loginResult.data.last_login}`);
+          localStorage.setItem("lastname", `${loginResult.data.lastname}`);
+          localStorage.setItem("state", `${loginResult.data.state}`);
+          localStorage.setItem("zip_code", `${loginResult.data.zip_code}`);
+          localStorage.setItem("session", `${loginResult.data.session}`);
+          setLoginLoading(true);
+          // userApi.getUserReminders(); //testing
+          setTimeout(() => {
+            toast.success("Login Successfully");
+            navigate("/", { replace: true });
+            setLoginLoading(false);
+          }, 2000);
+        } else {
+          // toast.error("Invalid Credential");
+          setLoginError(true)
+        }
       }
+    } catch (error) {
+      console.log(error)
+      setMsgError('An error occurred')
+    } finally {
+      setTimeout(() => {
+        setLoginError(false)
+        setMsgError(null)
+      }, Number(process.env.REACT_APP_LOGIN_ERROR_TIMEOUT))
     }
   };
 
@@ -78,11 +97,11 @@ export default function Login() {
         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='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="w-full">
               <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
@@ -150,6 +169,8 @@ 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-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">
                     <button
@@ -165,7 +186,6 @@ export default function Login() {
                       )}
                     </button>
                   </div>
-                  {loginError && <p class="text-center text-red-700 pb-4">Invalid username or password</p>}
                   <BrandBtn link='#' imgSrc={googleLogo} brand='Google' />
                   <BrandBtn link='#' imgSrc={facebookLogo} brand='Facebook' />
                   <BrandBtn link='#' imgSrc={appleLogo} brand='Apple' />
@@ -178,7 +198,7 @@ export default function Login() {
                   </a>
                 </p>
               </div> */}
-              <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
+                <div className="pt-5 text-[#181c32] text-center font-semibold text-base">This site is protected by hCaptcha and the our Privacy Policy and Terms of Service apply.</div>
               </div>
             </div>
           </div>

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

@@ -33,6 +33,7 @@ export default function InputCom({
           className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
+          required
         />
         {iconName && (
           <div className="absolute right-6 bottom-[19px] z-10">

src/components/Home/Hero.jsx

@@ -43,10 +43,10 @@ export default function Hero({ className }) {
         {/* heading */}
         <div>
           <h1 className="lg:text-2xl text-xl font-medium text-white tracking-wide">
-            Lock and Lob x Fiesta Spurs
+            Welcome
           </h1>
           <span className="text-[18px] font-thin tracking-wide text-white">
-            ID : 2320382
+            Last Login :  10-10-2026
           </span>
         </div>
         {/* user */}
@@ -64,9 +64,9 @@ export default function Hero({ className }) {
         {/* countdown */}
         <div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border border-white-opacity">
           <div className="flex flex-col justify-between">
-            <p className="text-base text-white tracking-wide">Current Bid</p>
+            <p className="text-base text-white tracking-wide">Current Task</p>
             <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-              75,320 ETH
+              ABCDEFGH01
             </p>
             <p className="text-base text-white tracking-wide">773.69 USD</p>
           </div>
@@ -74,7 +74,7 @@ export default function Hero({ className }) {
           <div className="flex flex-col justify-between">
             <p className="text-base text-white tracking-wide">Next due in</p>
             <p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
-              <CountDown lastDate="2023-03-04 4:00:00" />
+              <CountDown lastDate="2023-04-26 4:00:00" />
             </p>
             <div className="text-base text-white tracking-wide flex gap-[23px]">
               <span>Hrs</span>
@@ -85,19 +85,13 @@ export default function Hero({ className }) {
         </div>
         {/* action */}
         <div className="flex lg:space-x-3 space-x-1 items-center">
-          <Link
-            to="/active-bids"
-            className=" btn-shine  w-[116px] h-[46px] text-white rounded-full text-base bg-pink flex justify-center items-center"
-          >
-            Place a Bid
-          </Link>
           <Link
             to="/market-place"
             className="text-white text-base sm:block hidden"
           >
             <span className=" border-b dark:border-[#5356fb29]  border-white">
               {" "}
-              View Art Work
+              View All Task(s)
             </span>
           </Link>
         </div>

src/components/MyWallet/AddRecipient.jsx

@@ -0,0 +1,166 @@
+import React, {useState} from 'react'
+import { Link } from 'react-router-dom'
+import Icons from '../Helpers/Icons'
+
+function AddRecipient() {
+   
+    //STATE FOR CONTROLLED INPUTS
+    let [inputs, setInputs] = useState({
+        firstname: '',
+        lastname: '',
+        country: '',
+        'bank-name': '',
+        'account-number': '',
+        'repeat-account-number': '',
+        'account-type': '',
+        state: '',
+        city: ''
+    })
+
+    // FUNCTION TO HANDLE INPUT CHANGE
+    const handleChange = ({target:{name, value}}) => {
+        setInputs(prev => ({...prev, [name]:value}))
+    }
+
+    //FUNCTION TO HANDLE SUBMIT
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        //valid inputs before submitting. Just for texting remove later
+    
+        // setInputs((prev)=>{
+        //     for(let input in prev){
+        //         prev[input] = ''
+        //     }
+        // })
+        // RETURN INPUTS TO EMPTY STRING
+        setInputs({
+            firstname: '',
+            lastname: '',
+            country: '',
+            'bank-name': '',
+            'account-number': '',
+            'repeat-account-number': '',
+            'account-type': '',
+            state: '',
+            city: ''
+        })
+    }
+    return (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            <div className="w-full mb-10 lg:mb-0">
+                <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+                        <h2 className='my-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-semibold'>ADD BANK ACCOUNT</h2>
+                   <form className='add-recipient-info px-1 md:px-[50px] lg:px-[100px]' onSubmit={handleSubmit}>
+                        
+                        {/* inputs starts here */}
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>First Name <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.firstname} 
+                                name='firstname' 
+                                type="text" 
+                                placeholder='Account Firstname' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Last Name <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.lastname} 
+                                name='lastname' 
+                                type="text" 
+                                placeholder='Account Lastname' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Country <span className='text-red-500'>*</span></label>
+                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='country' onChange={handleChange}>
+                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                            </select>
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Bank Name <span className='text-red-500'>*</span></label>
+                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='bank-name' onChange={handleChange}>
+                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                            </select>
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account Number <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs['account-number']} 
+                                name='account-number' 
+                                type="text" 
+                                placeholder='Account No' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Repeat Account Number <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs['repeat-account-number']} 
+                                name='repeat-account-number' 
+                                type="text" 
+                                placeholder='Repeat Account No' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>Account type <span className='text-red-500'>*</span></label>
+                            <select className='mt-2 w-full md:w-3/4 p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='account-type' onChange={handleChange}>
+                                <option className='text-slate-500 text-lg' value="">Select...</option>
+                            </select>
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>State/Province <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.state} 
+                                name='state' 
+                                type="text" 
+                                placeholder='State' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        <div className='add-recipient my-3 md:flex items-center justify-between'>
+                            <label className='w-full md:w-1/4 text-slate-600 text-lg'>City <span className='text-red-500'>*</span></label>
+                            <input className='w-full md:w-3/4 p-3 text-lg bg-slate-100 rounded-md outline-0 placeholder:text-slate-500 placeholder:text-lg' 
+                                value={inputs.city} 
+                                name='city' 
+                                type="text" 
+                                placeholder='City' 
+                                required
+                                onChange={handleChange}
+                                />
+                        </div>
+
+                        {/* end of inputs starts here */}
+
+                        <div className='add-recipient-btn flex justify-end items-center py-4'>
+                            <button className='text-lg text-white bg-sky-blue px-4 py-2 hover:opacity-90 rounded-md flex items-center space-x-1'>
+                                <span className='pr-2'>ADD RECIPIENT</span>
+                                <Icons name="arrows" />
+                            </button>
+                        </div>
+                   </form>
+                </div>
+            </div>
+
+        </div>
+      )
+}
+
+export default AddRecipient

src/components/MyWallet/TransferFund.jsx

@@ -83,7 +83,7 @@ function TransferFund() {
                                         <span className='text-red-500 mx-2'>*</span> 
                                         <span title='Transfer Recipient' className={`text-white text-sm bg-slate-500 w-1 h-1 rounded-full px-3 py-1 cursor-pointer`}>!</span>
                                     </label>
-                                    <Link to='#' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
+                                    <Link to='add-recipient' className='mx-1 text-base text-white p-3 bg-[orange] rounded-md hover:opacity-80'>Add New</Link>
                                 </div>
                                 <select className='mt-2 w-full p-3 text-lg bg-white rounded-md border border-slate-300 outline-0' name='recipient' onChange={handleChange}>
                                     <option className='text-slate-500 text-lg' value="">Select...</option>

src/components/MyWallet/Wallet.jsx

@@ -6,6 +6,7 @@ import Layout from '../Partials/Layout'
 import Balance from './Balance'
 import TransferFund from './TransferFund'
 import AddFund from './AddFund'
+import AddRecipient from './AddRecipient'
 
 function Wallet() {
   return (
@@ -27,6 +28,7 @@ const WalletRoutes = () => {
                 <Route path='transfer-fund' element={<TransferFund />} />
                 <Route index element={<Balance />} />
                 <Route path='*' element={<Navigate to='/' />} />
+                <Route path='transfer-fund/add-recipient' element={<AddRecipient />} />
             </Route>
         </Routes>
     )

src/components/Partials/Header.jsx

@@ -641,7 +641,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
                     <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
                       <Link
-                        to="/profile"
+                        to="/settings"
                         className="notifications"
                       >
                         <div className="name">
@@ -679,7 +679,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                         <ul className="p-3">
                           <li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
                             <Link
-                              to="#"
+                              to="/referral"
                               className="notifications"
                             >
                               <div className="name">
@@ -794,13 +794,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                                 <p className="text-sm">English </p>
                               </div>
                               </div>
-                              {/* <div className="px-1 flex items-center space-x-1 bg-slate-100 rounded-sm text-sm py-1 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                                <img className="w-[15px] h-[15px]" src={Flag} alt="U.S.A Flag" />
-                                <p className="text-sm">English </p>
-                              </div> */}
                             </Link>
                           </li>
-                         
                         </ul>
                       </div>
                     {/* end Language list items*/}

src/components/Partials/MobileSideBar.jsx

@@ -122,7 +122,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
                   className="nav-item flex items-center justify-start space-x-3.5"
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full   text-dark-gray dark:text-white">
-                    <Icons name="wallet-two" />
+                    <Icons name="notification" />
                   </span>
                   <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
                     Messages

src/components/Partials/Sidebar.jsx

@@ -122,7 +122,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   }`}
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                    <Icons name="market" />
                   </span>
                   <span
                     className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
@@ -165,7 +165,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   }`}
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                    <Icons name="notification-setting" />
                   </span>
                   <span
                     className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
@@ -185,7 +185,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   }`}
                 >
                   <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                    <Icons name="wallet-two" />
                   </span>
                   <span
                     className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${

src/components/Settings/index.jsx

@@ -113,7 +113,7 @@ export default function Settings() {
                         <Icons name="people-hover" />
                       </div>
                       <div>
-                        <p className="text-18 tracking-wide">Personal Info</p>
+                        <p className="text-18 tracking-wide">Edit Profile</p>
                       </div>
                     </li>
                     <li

src/index.css

@@ -458,6 +458,9 @@ input[type="number"] {
   background-size: cover;
 }
 
+.content{
+  overflow: hidden;
+}
 
 .content-item .inner-list-items {
   top: 0;
@@ -468,7 +471,7 @@ input[type="number"] {
 }
 
 .content-item:hover .inner-list-items {
-  right: -30%;
+  right: 0%;
   opacity: 1;
   z-index: 2;
 }