upload action implemented

src/Routers.jsx

@@ -121,7 +121,8 @@ export default function Routers() {
           <Route exact path="/sell" element={<SellPage />} />
           <Route exact path="/saved" element={<SavedPage />} />
           <Route exact path="/history" element={<HistoryPage />} />
-          <Route exact path="/upload-product" element={<UploadProductPage />} />
+          {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
+          <Route exact path="/my-uploads" element={<UploadProductPage />} />
           <Route exact path="/profile" element={<AuthProfilePage />} />
           <Route exact path="/user-profile" element={<UserProfilePage />} />
           <Route exact path="/settings" element={<SettingsPage />} />

src/assets/images/icons/error.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="error"><path fill="#ff1d25" d="M29.75,25.73,18.68,3.59a3,3,0,0,0-4-1.33,3.05,3.05,0,0,0-1.33,1.33L2.25,25.73a3,3,0,0,0,2.68,4.34H27.07a3,3,0,0,0,3-3A2.88,2.88,0,0,0,29.75,25.73ZM16,25.38a.94.94,0,1,1,.94-.94A.94.94,0,0,1,16,25.38Zm.94-4.69a.94.94,0,1,1-1.88,0V11.31a.94.94,0,1,1,1.88,0Z"></path></svg>

src/assets/images/icons/success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" id="success"><path fill="#80af52" d="M256 26c127.03 0 230 102.97 230 230S383.03 486 256 486 26 383.03 26 256 128.97 26 256 26z"></path><path fill="#fff" d="M215.999 386a9.998 9.998 0 0 1-7.525-3.415l-70-80c-3.637-4.156-3.215-10.474.941-14.11s10.475-3.217 14.111.94l60.961 69.67 142.938-238.23c2.842-4.736 8.983-6.273 13.72-3.43 4.736 2.841 6.271 8.984 3.431 13.72l-150 250a9.998 9.998 0 0 1-8.577 4.855z"></path></svg>

src/components/AuthPages/AuthRedirect/FbookRedirect.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
+import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from 'react-router-dom';
 import usersService from '../../../services/UsersService';
-import {updateUserDetails} from "../../../store/UserDetails";
-import { useDispatch } from "react-redux";
+import { updateUserDetails } from "../../../store/UserDetails";
 import AuthLayout from "../AuthLayout";
 
 function FbookRedirect() {
@@ -22,38 +22,50 @@ function FbookRedirect() {
       console.log(codeResponse);
       
       /*
-      POST /token HTTP/1.1
-      Host: oauth2.googleapis.com
-      Content-Type: application/x-www-form-urlencoded
+      https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow/#exchangecode
+      Step 1. Get access token by code
 
-      code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7&
-      client_id=your_client_id&
-      client_secret=your_client_secret&
-      redirect_uri=https%3A//oauth2.example.com/code&
-      grant_type=authorization_code
+      GET https://graph.facebook.com/v17.0/oauth/access_token?
+        client_id={app-id}
+        &redirect_uri={redirect-uri}
+        &client_secret={app-secret}
+        &code={code-parameter}
+
+      https://developers.facebook.com/docs/facebook-login/guides/access-tokens/get-long-lived
+      Step 2. Get long-lived token by access token
+      
+      curl -i -X GET "https://graph.facebook.com/{graph-api-version}/oauth/access_token?  
+      grant_type=fb_exchange_token&          
+      client_id={app-id}&
+      client_secret={app-secret}&
+      fb_exchange_token={your-access-token}" 
       */
+
+      // process.env.REACT_APP_FACEBOOK_CLIENT_ID
+      // process.env.REACT_APP_FACEBOOK_CLIENT_SCOPE
+      
       var reqData = {
         auth_type: "FACEBOOK",
         code: codeResponse,
-        redirect_uri: process.env.REACT_APP_GOOGLE_REDIRECT_URL,
+        redirect_uri: process.env.REACT_APP_FACEBOOK_REDIRECT_URL,
       };
-    //   userApi
-    //     .authStart(reqData)
-    //     .then((res) => {
-    //       if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
-    //         localStorage.setItem("member_id", `${res.data.member_id}`);
-    //         localStorage.setItem("uid", `${res.data.uid}`);
-    //         localStorage.setItem("session_token", `${res.data.session}`);
-    //         dispatch(updateUserDetails({...res.data}));
-    //         navigate('/', {replace: true})
-    //         return
-    //       }
-    //       navigate('/login', {state: {error: true}})
-    //     })
-    //     .catch((error) => {
-    //       navigate('/login', {state: {error: true}})
-    //       console.log(error);
-    //     });
+      userApi
+        .authStart(reqData)
+        .then((res) => {
+          if (res.status == 200  && res.data.internal_return >= 0 && res.data.member_id && res.data.uid && res.data.session) {
+            localStorage.setItem("member_id", `${res.data.member_id}`);
+            localStorage.setItem("uid", `${res.data.uid}`);
+            localStorage.setItem("session_token", `${res.data.session}`);
+            dispatch(updateUserDetails({...res.data}));
+            navigate('/', {replace: true})
+            return
+          }
+          navigate('/login', {state: {error: true}})
+        })
+        .catch((error) => {
+          navigate('/login', {state: {error: true}})
+          console.log(error);
+        });
     },[])
   return (
     <AuthLayout>

src/components/AuthPages/ForgetPwdResponse.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom'
+import localImgLoad from '../../lib/localImgLoad'
+
+const ForgetPwdResponse = ({title, message, type}) => {
+  const navigate = useNavigate()
+  return (
+    <>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <h1 className={`${type ? 'text-black' : 'text-red-500'}text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]`}>
+            {title}
+            </h1>
+        </div>
+        <div className="title-area w-[100px] h-[100px] mx-auto flex flex-col justify-center items-center relative text-center mb-7">
+            <img className='w-full h-full' src={`${type ? localImgLoad('images/icons/success.svg') : localImgLoad('images/icons/error.svg')}`} alt='alert-banner' />
+        </div>
+        <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+            <p className={`${type ? 'text-sky-blue' : 'text-red-500'} font-semibold dark:text-white mb-3 leading-[27.3px] text-[18px]`}>
+            {message}
+            </p>
+        </div>
+        <div className="signin-area mb-3.5">
+            <div className="flex justify-center items-center gap-2">
+                <button
+                type="button"
+                onClick={() => navigate("/login")}
+                className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem]`}
+                >
+                    <span>Home</span>
+                </button>
+            </div>
+        </div>
+    </>
+  )
+}
+
+export default ForgetPwdResponse

src/components/AuthPages/ForgotPassword/index.jsx

@@ -4,6 +4,8 @@ import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import EmailValidator from "../../../lib/EmailValidator";
+import ForgetPwdResponse from "../ForgetPwdResponse";
 
 export default function ForgotPassword() {
   const [checked, setValue] = useState(false);
@@ -11,7 +13,7 @@ export default function ForgotPassword() {
   // email
   const [email, setMail] = useState("");
   const [msgError, setMsgError] = useState("");
-  const [msgSuccess, setMsgSuccess] = useState(false);
+  const [msgSuccess, setMsgSuccess] = useState(null);
 
   const navigate = useNavigate();
   const userApi = new usersService();
@@ -27,12 +29,26 @@ export default function ForgotPassword() {
   const resetHandler = async () => {
     if (email == "") {
       setMsgError("An email is required");
-    } else if (!checked) {
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    } 
+    if (!checked) {
       setMsgError("Check if you are human");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+
+    if(!EmailValidator(email)){ // CHECKS IF EMAIL IS VALID
+      setMsgError("Invalid Email");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
     }
 
     if (email !== "" && checked) {
-      const reqData = { email };
+      const reqData = { email, action:11013 };
       setResetLoading(true);
       try {
         const res = await userApi.StartResetPassword(reqData);
@@ -41,8 +57,11 @@ export default function ForgotPassword() {
           setMail("");
           setValue(false);
           setResetLoading(false);
+        }else{
+          setMsgSuccess(false);
         }
       } catch (error) {
+        setMsgSuccess(false);
         setResetLoading(false);
         setMail("");
         setMsgError("An error occurred");
@@ -53,9 +72,6 @@ export default function ForgotPassword() {
         }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
       }
     }
-    setTimeout(() => {
-      setMsgError(null);
-    }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
   };
 
   return (
@@ -73,106 +89,102 @@ export default function ForgotPassword() {
           </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 leading-[27.3px] text-[22.75px]">
-                  Forget Password
-                </h1>
-                <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                  Enter your email to reset your password.
-                </span>
-              </div>
-              <div className="input-area">
-                <div className="input-item mb-10">
-                  <InputCom
-                    fieldClass="px-6"
-                    placeholder="Your Username/Email"
-                    label="Email"
-                    name="email"
-                    type="email"
-                    value={email}
-                    inputHandler={handleEmail}
-                    iconName="message"
-                  />
+            {msgSuccess == null ?
+              <>
+                <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 leading-[27.3px] text-[22.75px]">
+                    Forget Password
+                  </h1>
+                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                    Enter your email to reset your password.
+                  </span>
                 </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"
-                                checked={checked}
-                                onChange={humanChecker}
-                              />
+                <div className="input-area">
+                  <div className="input-item mb-10">
+                    <InputCom
+                      fieldClass="px-6"
+                      placeholder="Your Username/Email"
+                      label="Email"
+                      name="email"
+                      type="email"
+                      value={email}
+                      inputHandler={handleEmail}
+                      iconName="message"
+                    />
+                  </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"
+                                  checked={checked}
+                                  onChange={humanChecker}
+                                />
+                              </div>
                             </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
+                        <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>
-                        </label>
+                        </div>
+                        <div className="h-full relative inline-block w-16"></div>
                       </div>
-                      <div className="h-full relative inline-block w-16"></div>
+                    </div>
+                  </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] text-[13px]">
+                      {msgError}
+                    </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-[15px] 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-[15px] 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>
-                {msgError && (
-                  <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    {msgError}
-                  </div>
-                )}
-                {msgSuccess && (
-                  <div className="relative p-4 text-[#44228c] bg-[#e3d7fb] border-[#d5c4f9] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-                    If we find your email, you will receive a link to reset your
-                    password. Please use or{" "}
-                    <Link
-                      to="/contact"
-                      className="text-[#4687ba] hover:text-[#009ef7]"
-                    >
-                      contact form
-                    </Link>{" "}
-                    if you did not get our message after few minutes.
-                  </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-[15px] 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-[15px] 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>
+              </>
+            :
+            <ForgetPwdResponse 
+              title={'Forget Password'}
+              message={msgSuccess? `Check your email for the link to continue password reset. Note the reset link will expire short time` : 'We are unable to continue with your request. Please try another username or contact us for help'}
+              type={msgSuccess}
+            />
+            }
             </div>
           </div>
         </div>

src/components/AuthPages/VerifyPassword/index.jsx

@@ -1,16 +1,20 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout";
+import ForgetPwdResponse from "../ForgetPwdResponse";
+import PasswordValidator from "../../../lib/PasswordValidator";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const VerifyPassword = () => {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
+  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
   const [msgError, setMsgError] = useState("");
   const [linkLoader, setLinkLoader] = useState(false);
-  const [linkSuccess, setLinkSuccess] = useState(true);
+  const [linkSuccess, setLinkSuccess] = useState(null);
   const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
@@ -23,11 +27,6 @@ const VerifyPassword = () => {
     setShowPassword(!showPassword);
   };
 
-  // little checker for the validity of the token
-  if (token?.length != 64) {
-    setLinkSuccess(false);
-  }
-
   // Password
   const handlePassword = (e) => {
     let { name, value } = e?.target;
@@ -36,46 +35,60 @@ const VerifyPassword = () => {
   };
 
   const completeReset = async () => {
+    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
+      setMsgError("Please fill in fields");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
+      setMsgError("Passwords does not match");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
+      setMsgError("Password must be upto six characters");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
+    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
+      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
+      return setTimeout(() => {
+        setMsgError(null);
+      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
+    }
     try {
-      if (password !== "" && confirmPassword !== "") {
-        if (password === confirmPassword) {
           setLinkLoader(true);
           var reqData = {
             sessionid: "DUMMY-CANNOT_BE_EMPTY",
             reset_link: token,
             newpass: password,
+            m_uid: requestStatus.data?.m_uid || '',
+            reset_uid: requestStatus.data?.reset_uid || '',
             step: 300,
             action: 730,
           };
-
           const res = await userApi?.CompleteResetPassword(reqData);
 
-          if (res.status === 200) {
+          if (res.status == 200) {
             const { data } = res;
-
-            if (data?.status > 0 && data?.email) {
-              setTimeout(() => {
-                navigate("/login", { replace: true });
-                setLinkLoader(false);
-              }, 2000);
-            } else if (data && data?.status == "Invalid Request") {
-              setLinkLoader(false);
-              setLinkSuccess(false);
+            if (data?.internal_return >= 0) {
+              // setTimeout(() => {
+              //   navigate("/login", { replace: true });
+              //   setLinkLoader(false);
+              // }, 2000);
+              setLinkSuccess(true);
             } else {
               setLinkLoader(false);
               setMsgError("An error occurred");
+              setLinkSuccess(false);
             }
           } else {
             setLinkLoader(false);
             setLinkSuccess(false);
           }
-        } else {
-          setLinkLoader(false);
-          setMsgError("Passwords does not match");
-        }
-      } else {
-        setMsgError("Please fill in fields");
-      }
     } catch (error) {
       setLinkLoader(false);
       setLinkSuccess(false);
@@ -87,6 +100,31 @@ const VerifyPassword = () => {
     }
   };
 
+  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
+    setRequestStatus({loading: true, status:false, data: []})
+    var reqData = {
+      sessionid: "DUMMY-CANNOT_BE_EMPTY",
+      reset_link: token,
+      step: 200,
+      action: 730,
+    };
+    userApi.CompleteResetPassword(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        return setRequestStatus({loading: false, status:false, data: []})
+      }
+      setRequestStatus({loading: false, status:true, data: res.data})
+    }).catch(error => {
+      setRequestStatus({loading: false, status:false, data: []})
+    })
+  }
+
+  useEffect(()=>{
+    // little checker for the validity of the token
+  if (token==null || token?.length != 64) {
+    return setRequestStatus({loading: false, status:false, data: []});
+  }
+  verifyResetPwd()
+  },[])
   return (
     <>
       <AuthLayout slogan="Welcome to WrenchBoard">
@@ -101,39 +139,59 @@ const VerifyPassword = () => {
             </Link>
           </div>
           <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
+            {requestStatus.loading ?
+            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
+            :
+            !requestStatus.loading && requestStatus.status ?
             <div className="w-full">
-              <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 leading-[27.3px] text-[22.75px]">
-                  {linkSuccess ? "Password Reset" : "Invalid verification link"}
-                </h1>
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    Enter a new password to reset
-                  </span>
-                )}
-                {linkSuccess && (
-                  <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
-                    We'll send an email to confirm reset
-                  </span>
-                )}
-              </div>
-              {/* If the verification was a success */}
-              {linkSuccess ? (
-                <SuccessfulComponent
-                  password={password}
-                  confirmPassword={confirmPassword}
-                  handlePassword={handlePassword}
-                  onSubmit={completeReset}
-                  msgErr={msgError}
-                  loader={linkLoader}
-                  showPassword={showPassword}
-                  onClick={togglePasswordVisibility}
-                  navigateHandler={() => navigate("/login")}
-                />
-              ) : (
-                <ErrorComponent onClick={() => navigate("/login")} />
-              )}
+              {linkSuccess == null ?
+              <>
+                <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 leading-[27.3px] text-[22.75px]">
+                    Password Reset
+                  </h1>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      Enter a new password to reset
+                    </span>
+                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
+                      We'll send an email to confirm reset
+                    </span>
+                </div>
+                <div>
+                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
+                    Must include a special, numeric, uppercase and lowercase character
+                  </p>
+                </div>
+                  <SuccessfulComponent
+                    password={password}
+                    confirmPassword={confirmPassword}
+                    handlePassword={handlePassword}
+                    onSubmit={completeReset}
+                    msgErr={msgError}
+                    loader={linkLoader}
+                    showPassword={showPassword}
+                    onClick={togglePasswordVisibility}
+                    navigateHandler={() => navigate("/login")}
+                  />
+                </>
+                :
+                <ForgetPwdResponse 
+                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
+                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
+                }
+                type={linkSuccess}
+              />
+              }
             </div>
+            :
+            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
+              <ForgetPwdResponse 
+                title={'Forget Password'}
+                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
+                type={requestStatus.status}
+              />
+            </div>
+            }
           </div>
         </div>
       </AuthLayout>
@@ -159,7 +217,7 @@ const SuccessfulComponent = ({
     <div className="mb-5">
       <InputCom
         fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={password?.replace(/./g, "●")}
+        value={password}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
@@ -172,7 +230,7 @@ const SuccessfulComponent = ({
     <div className="mb-5">
       <InputCom
         fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={confirmPassword?.replace(/./g, "●")}
+        value={confirmPassword}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Confirm Password"
@@ -209,25 +267,3 @@ const SuccessfulComponent = ({
     </div>
   </div>
 );
-
-const ErrorComponent = ({ onClick }) => (
-  <div className="input-area">
-    <div className="my-5">
-      <p className="text-[14px] leading-[19px] text-center text-[#181c32]">
-        This error occurs because you have already used this link or the link
-        has broken/expired. Start with the reset process again. If it doesn't
-        work, try to create the account from the start.
-      </p>
-    </div>
-
-    <div className="signin-area flex justify-center mb-3.5">
-      <button
-        onClick={onClick}
-        type="button"
-        className={`rounded-[0.475rem] mb-6 text-[15px] 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.81rem]`}
-      >
-        <span>Return Home</span>
-      </button>
-    </div>
-  </div>
-);

src/components/Blogs/index.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import Layout from "../Partials/Layout";
-import CommonHead from "../UserHeader/CommonHead";
+import { useNavigate } from "react-router-dom";
 import usersService from "../../services/UsersService";
+import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import CommonHead from "../UserHeader/CommonHead";
 
 export default function BlogItem(props) {
 
@@ -16,6 +16,7 @@ export default function BlogItem(props) {
     const filterHandler = (value) => {
         setValue(value);
     };
+    // eslint-disable-next-line no-restricted-globals
     const queryParams = new URLSearchParams(location?.search);
     const blog_id = queryParams.get("blog_id");
     

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -261,7 +261,7 @@ function AddFundDollars(props) {
 
         {/* previous tab */}
         {tab === "previous" && (
-          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col">
+          <div className="p-4 previous-details w-full min-h-[16.5rem] flex flex-col">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
@@ -313,7 +313,7 @@ function AddFundDollars(props) {
         )}
 
         {tab === "new" && (
-          <div className="new-details w-full max-h-[23rem]">
+          <div className="new-details w-full max-h-[22rem]">
             <div className="w-full flex flex-col justify-between">
               <Formik
                 initialValues={initialValues}
@@ -527,9 +527,9 @@ function AddFundDollars(props) {
                         </div>
                       </div>
 
-                      <div className="md:px-8 add-fund-btn flex justify-end items-center gap-3">
+                      <div className="add-fund-btn flex justify-end items-center gap-2 mt-4">
                         <button
-                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
                           onClick={handleClose}
                         >
                           Cancel
@@ -558,9 +558,9 @@ function AddFundDollars(props) {
       </div>
 
       {tab == "previous" && (
-        <div className="md:py-8 px-[38px] add-fund-btn flex justify-end items-center gap-4 py-4">
+        <div className="md:py-8 add-fund-btn flex justify-end items-center gap-2 py-4">
           <button
-            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+            className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
             onClick={props.onClose}
           >
             Cancel

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -138,12 +138,12 @@ function AddFundPop({
               </div>
             )}
 
-            {countryWallet == "NG" && <div className="h-[18rem]"></div>}
+            {countryWallet == "NG" && <div className="h-[19rem]"></div>}
 
             {countryWallet == "NG" && (
               <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
                 <button
-                  className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
                   onClick={onClose}
                 >
                   Cancel

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -63,7 +63,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                     </h1>
                   </div>
 
-                  {data?.internal_return >= 0 ? (
+                  {data?.internal_return >= 0 &&
+                  data?.result !== "Charge failed" ? (
                     <>
                       <div className="flex items-center gap-8">
                         <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -379,7 +379,7 @@ function ConfirmAddFund({
           <hr />
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
-              className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
+              className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
               onClick={getBack}
             >
               Back

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
+import { useDispatch } from "react-redux";
 import usersService from "../../../services/UsersService";
+import { tableReload } from "../../../store/TableReloads";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import ModalCom from "../../Helpers/ModalCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
-import { useDispatch } from "react-redux";
-import { tableReload } from "../../../store/TableReloads";
 
 function ConfirmNairaWithdraw({
   payment,
@@ -393,9 +393,9 @@ function ConfirmNairaWithdraw({
                     <button
                       type="button"
                       onClick={action}
-                      className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                      className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
                     >
-                      <span className="text-gradient">Cancel</span>
+                      Cancel
                     </button>
                   )}
 

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -25,8 +25,10 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             {confirmCredit?.show?.acceptConfirm?.state &&
-            (confirmCredit?.data?.internal_return < 0 ||
-              confirmCredit?.data?.status !== "successful") ? (
+            (confirmCredit?.data?.internal_return < 0 
+              // ||
+              // confirmCredit?.data?.status !== "successful"
+              ) ? (
               "Credit Unsuccessful"
             ) : (
               <>

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -171,7 +171,7 @@ function NairaWithdraw({
         setErrorMsgs({ amount: "amount required" });
         setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
         return;
-      }else      if (Number(values.amount * 100) > Number(wallet?.transfer_limit)) {
+      } else if (Number(values.amount * 100) > Number(wallet?.transfer_limit)) {
         setErrorMsgs({ amount: "Withdraw limit has been exceeded" });
         setTimeout(() => setErrorMsgs({ amount: "" }), 3000);
         return;
@@ -517,7 +517,7 @@ function NairaWithdraw({
                               </div>
                             </div>
                           </div>
-                          <div className="h-[7.8rem]"></div>
+                          <div className="h-[6.1rem]"></div>
                         </>
                       )}
 
@@ -796,9 +796,9 @@ function NairaWithdraw({
                       <button
                         type="button"
                         onClick={action}
-                        className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                        className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
                       >
-                        <span className="text-gradient">Cancel</span>
+                        Cancel
                       </button>
 
                       <button

src/components/Partials/Header.jsx

@@ -4,7 +4,7 @@ import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
 import bank4 from "../../assets/images/bank-4.png";
-import profileImg from "../../assets/images/profile-pic.jpg";
+import profileImg from "../../assets/images/profile.jpg";
 import useToggle from "../../hooks/useToggle";
 import usersService from "../../services/UsersService";
 import DarkModeContext from "../Contexts/DarkModeContext";
@@ -15,10 +15,10 @@ import WalletHeader from "../MyWallet/WalletHeader";
 import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
 import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
-import formattedDate from "../../lib/fomattedDate";
-import { updateNotifications } from "../../store/notifications";
 import TimeDifference from "../Helpers/TimeDifference";
 
+const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
+
 export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [balanceDropdown, setbalanceValue] = useToggle(false);
   const [notificationDropdown, setNotificationValue] = useToggle(false);
@@ -30,7 +30,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [myWalletList, setMyWalletList] = useState([]);
   const api = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
 
@@ -100,10 +100,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   };
 
   // User Profile
-  let { firstname, lastname, email, profile_pic } = userDetails;
+  let { firstname, lastname, email, profile_pic_url } = userDetails;
   let userEmail = email?.split("@")[0];
+  const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE;
 
-  // console.log("Notify: ", notifications?.data?.raw);
 
   return (
     <>
@@ -255,9 +255,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               >
                 <Icons name="notification" />
                 <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
-                  {notifications?.loading
-                    ? "●"
-                    : notifications?.data?.length}
+                  {notifications?.loading ? "●" : notifications?.data?.length}
                 </span>
               </div>
               <div
@@ -273,46 +271,45 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
                 <div className="content px-7 pb-7">
                   <ul>
-                    {notifications?.data?.length && notifications?.data?.map((item, idx) => 
-                    {
-                      if(idx < 5){
-                      return (
-                        <li
-                          className={`content-item ${
-                            idx == 4
-                              ? "py-5 "
-                              : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                          }`}
-                          key={idx}
-                        >
-                          <div className="notifications flex space-x-4 items-center">
-                            <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
-                              <img
-                                src={require(`../../assets/images/notifications/${item?.icon}`)}
-                                alt="icon"
-                                className="w-full h-full"
-                              />
-                            </div>
-                            <div className="name">
-                              <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                                {item?.title}
-                                {/* <span className="ml-1 font-bold">
+                    {notifications?.data?.length &&
+                      notifications?.data?.map((item, idx) => {
+                        if (idx < 5) {
+                          return (
+                            <li
+                              className={`content-item ${
+                                idx == 4
+                                  ? "py-5 "
+                                  : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                              }`}
+                              key={idx}
+                            >
+                              <div className="notifications flex space-x-4 items-center">
+                                <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
+                                  <img
+                                    src={require(`../../assets/images/notifications/${item?.icon}`)}
+                                    alt="icon"
+                                    className="w-full h-full"
+                                  />
+                                </div>
+                                <div className="name">
+                                  <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
+                                    {item?.title}
+                                    {/* <span className="ml-1 font-bold">
                                 successfully done
                               </span> */}
-                              </p>
-                              <p className="text-sm text-thin-light-gray font-medium">
-                                <TimeDifference
-                                  time={item?.date}
-                                  key={item?.uid}
-                                />
-                              </p>
-                            </div>
-                          </div>
-                        </li>
-                      )
-                      }
-                    })
-                    }
+                                  </p>
+                                  <p className="text-sm text-thin-light-gray font-medium">
+                                    <TimeDifference
+                                      time={item?.date}
+                                      key={item?.uid}
+                                    />
+                                  </p>
+                                </div>
+                              </div>
+                            </li>
+                          );
+                        }
+                      })}
                   </ul>
 
                   <div className="add-money-btn flex justify-center items-center">
@@ -351,9 +348,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 {/* profile-image */}
                 <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
                   <img
-                    src={profile_pic != "" ? profile_pic : profileImg}
+                    src={userProfileImage}
                     alt="profile"
-                    className="w-full h-full"
+                    className="w-full h-full object-cover"
                   />
                 </div>
                 <div className="lg:block hidden">
@@ -375,7 +372,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                   <img
                     src={profileImg}
                     alt="profile"
-                    className="w-full h-full"
+                    className="w-full h-full object-cover object-center"
                   />
                 </div>
               </div>

src/components/Partials/Layout.jsx

@@ -62,7 +62,7 @@ export default function Layout({ children }) {
               drawer
                 ? "2xl:w-[335px] w-[280px] 2xl:pl-20 pl-10 pr-6 "
                 : "w-[70px]"
-            } bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-8`}
+            } bg-white dark:bg-dark-white   h-full overflow-y-scroll overflow-style-none fixed left-0 top-0 pt-[30px]`}
           >
             <Sidebar
               logoutModalHandler={logoutModalHandler}

src/components/Partials/Sidebar.jsx

@@ -39,7 +39,7 @@ export default function Sidebar({
       {/* logo-area */}
       <div
         className={`w-full flex items-center transition-all duration-300 ease-in-out ${
-          sidebar ? "justify-between  mb-14" : "justify-center"
+          sidebar ? "justify-start gap-3  mb-14" : "justify-center"
         }`}
       >
         <div className={`sidebar-logo ${sidebar ? "enter" : ""}`}>

src/components/Resources/index.jsx

@@ -13,9 +13,11 @@ import {
   CollectionTab,
   CreatedTab,
   HiddenProductsTab,
+  MyUploadedFiles,
   OnSaleTab,
   OwnTab,
 } from "./tabs";
+//import MyUploadedFiles from "./tabs/MyUploadedFiles";
 
 export default function Resources(props) {
   // console.log("RESOURCES=>", props);
@@ -42,9 +44,7 @@ export default function Resources(props) {
     blog: <BlogTab blogdata={blogItems} />,
     onsale: <QuestionsTab products={onSaleProducts} />,
     owned: <OwnTab products={ownProducts} />,
-    created: (
-      <CreatedTab marketProducts={CreatedSell} mainProducts={CreatedBits} />
-    ),
+    created: <MyUploadedFiles marketProducts={CreatedSell} mainProducts={CreatedBits} />,
     hidden: (
       <HiddenProductsTab
         marketProducts={CreatedSell}
@@ -136,14 +136,14 @@ export default function Resources(props) {
                     <div className="tab-items">
                       <TabList tabCategories={tab_categories} />
                     </div>
-                    <div style={{ transform: "translateY(-22px)" }}>
+                    {/* <div style={{ transform: "translateY(-22px)" }}>
                       <Link
-                        to="/upload-product"
+                        to="/my-uploads"
                         className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
                       >
                         Add My Item
                       </Link>
-                    </div>
+                    </div> */}
                   </div>
                   <div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
                 </div>

src/components/Resources/tabs/CreatedTab.jsx

@@ -18,36 +18,36 @@ export default function CreatedTab({
             </div>
             {/* filer-dropdown */}
             <div className="flex-1 flex sm:justify-end">
-              <div className="flex space-x-1 items-center">
-                <span className="text-18 text-thin-light-gray">
-                  Recently Received
-                </span>
-                <span>
-                  <svg
-                    width="20"
-                    height="10"
-                    viewBox="0 0 13 6"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      opacity="0.7"
-                      d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"
-                      fill="#374557"
-                      fillOpacity="0.6"
-                    />
-                  </svg>
-                </span>
-              </div>
+              {/*<div className="flex space-x-1 items-center">*/}
+              {/*  <span className="text-18 text-thin-light-gray">*/}
+              {/*    Recently Received*/}
+              {/*  </span>*/}
+              {/*  <span>*/}
+              {/*    <svg*/}
+              {/*      width="20"*/}
+              {/*      height="10"*/}
+              {/*      viewBox="0 0 13 6"*/}
+              {/*      fill="none"*/}
+              {/*      xmlns="http://www.w3.org/2000/svg"*/}
+              {/*    >*/}
+              {/*      <path*/}
+              {/*        opacity="0.7"*/}
+              {/*        d="M12.4124 0.247421C12.3327 0.169022 12.2379 0.106794 12.1335 0.0643287C12.0291 0.0218632 11.917 0 11.8039 0C11.6908 0 11.5787 0.0218632 11.4743 0.0643287C11.3699 0.106794 11.2751 0.169022 11.1954 0.247421L7.27012 4.07837C7.19045 4.15677 7.09566 4.219 6.99122 4.26146C6.88678 4.30393 6.77476 4.32579 6.66162 4.32579C6.54848 4.32579 6.43646 4.30393 6.33202 4.26146C6.22758 4.219 6.13279 4.15677 6.05312 4.07837L2.12785 0.247421C2.04818 0.169022 1.95338 0.106794 1.84895 0.0643287C1.74451 0.0218632 1.63249 0 1.51935 0C1.40621 0 1.29419 0.0218632 1.18975 0.0643287C1.08531 0.106794 0.990517 0.169022 0.910844 0.247421C0.751218 0.404141 0.661621 0.616141 0.661621 0.837119C0.661621 1.0581 0.751218 1.2701 0.910844 1.42682L4.84468 5.26613C5.32677 5.73605 5.98027 6 6.66162 6C7.34297 6 7.99647 5.73605 8.47856 5.26613L12.4124 1.42682C12.572 1.2701 12.6616 1.0581 12.6616 0.837119C12.6616 0.616141 12.572 0.404141 12.4124 0.247421Z"*/}
+              {/*        fill="#374557"*/}
+              {/*        fillOpacity="0.6"*/}
+              {/*      />*/}
+              {/*    </svg>*/}
+              {/*  </span>*/}
+              {/*</div>*/}
             </div>
           </div>
           <div className="content-section w-full">
-            <div className="marketplace-products-widgets mb-16">
-              <CreateSaleSlider products={marketProducts} />
-            </div>
-            <div className="main-products-widgets">
-              <CreatedBidsSlider products={mainProducts} />
-            </div>
+            {/*<div className="marketplace-products-widgets mb-16">*/}
+            {/*  <CreateSaleSlider products={marketProducts} />*/}
+            {/*</div>*/}
+            {/*<div className="main-products-widgets">*/}
+            {/*  <CreatedBidsSlider products={mainProducts} />*/}
+            {/*</div>*/}
           </div>
         </div>
       </div>

src/components/Resources/tabs/MyUploadedFiles.jsx

@@ -0,0 +1,278 @@
+import React, { useState } from "react";
+import dataImage1 from "../../../assets/images/data-table-user-1.png";
+import dataImage2 from "../../../assets/images/data-table-user-2.png";
+import { Link } from "react-router-dom";
+// import dataImage3 from "../../../assets/images/data-table-user-3.png";
+// import dataImage4 from "../../../assets/images/data-table-user-4.png";
+// import SelectBox from "../Helpers/SelectBox";
+
+export default function MyUploadedFiles({ className }) {
+    const filterCategories = ["All Categories", "Explore", "Featured"];
+    const [selectedCategory, setCategory] = useState(filterCategories[0]);
+    return (
+        <>
+        <div className="mb-4 w-full flex justify-end item-center">
+            <Link
+            to="/my-uploads"
+            className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
+            >
+            Add My Item
+            </Link>
+        </div>
+        <div
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow relative min-h-[520px] ${
+                className || ""
+            }`}
+        >
+            <div className="header w-full sm:flex justify-between items-center mb-5">
+                <div className="flex space-x-2 items-center mb-2 sm:mb-0">
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                        My Uploads
+                    </h1>
+
+                </div>
+            </div>
+            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+                <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+                    <tbody>
+                    {/* table heading */}
+                    {/*<tr className="text-base text-thin-light-gray whitespace-nowrap px-2 border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
+                    {/*    <td className="py-4 w-[300px] block whitespace-nowrap">*/}
+                    {/*        All Product*/}
+                    {/*    </td>*/}
+                    {/*    <td className="py-4 whitespace-nowrap text-center">.</td>*/}
+                    {/*    <td className="py-4 whitespace-nowrap text-center"></td>*/}
+
+                    {/*    <td className="py-4 whitespace-nowrap text-right"></td>*/}
+                    {/*</tr>*/}
+                    <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                        <td className=" py-4">
+                            <div className="flex space-x-2 items-center">
+                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                    <img
+                                        src={dataImage1}
+                                        alt="data"
+                                        className="w-full h-full"
+                                    />
+                                </div>
+                                <div className="flex flex-col">
+                                    <h1 className="font-bold text-xl   text-dark-gray dark:text-white">
+                                        Mullican Computer Joy
+                                    </h1>
+                                    <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                                </div>
+                            </div>
+                        </td>
+                        <td className="text-center py-4 px-2">
+                            <div className="flex space-x-1 items-center justify-center">
+                      <span>
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 18 18"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                              d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
+                              fill="#627EEA"
+                          />
+                          <path
+                              d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                          />
+                          <path
+                              d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
+                              fill="white"
+                          />
+                          <path
+                              d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                          />
+                          <path
+                              d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
+                              fill="white"
+                          />
+                          <path
+                              d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
+                              fill="white"
+                              fillOpacity="0.2"
+                          />
+                          <path
+                              d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                          />
+                        </svg>
+                      </span>
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                        7473 ETH
+                      </span>
+                            </div>
+                        </td>
+                        <td className="text-center py-4 px-2">
+                            <div className="flex space-x-1 items-center justify-center">
+                      <span>
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                              d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
+                              fill="#59BE59"
+                          />
+                          <path
+                              d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
+                              fill="#FEFEFE"
+                          />
+                          <path
+                              d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
+                              fill="#59BE59"
+                          />
+                          <path
+                              d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
+                              fill="#59BE59"
+                          />
+                        </svg>
+                      </span>
+                                <span className="text-base text-dark-gray dark:text-white font-medium">
+                        6392.99$
+                      </span>
+                            </div>
+                        </td>
+
+                        <td className="text-right py-4">
+                            <button
+                                type="button"
+                                className="text-sm text-white bg-purple px-2.5 py-1.5 rounded-full"
+                            >
+                                Active
+                            </button>
+                        </td>
+                    </tr>
+                    <tr className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50">
+                        <td className=" py-4">
+                            <div className="flex space-x-2 items-center">
+                                <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
+                                    <img
+                                        src={dataImage2}
+                                        alt="data"
+                                        className="w-full h-full"
+                                    />
+                                </div>
+                                <div className="flex flex-col">
+                                    <h1 className="font-bold text-xl   text-dark-gray dark:text-white">
+                                        Mullican Computer Joy
+                                    </h1>
+                                    <span className="text-sm text-thin-light-gray">
+                          Owned by <span className="text-purple">Xoeyam</span>
+                        </span>
+                                </div>
+                            </div>
+                        </td>
+                        <td className="text-center py-4 px-2">
+                            <div className="flex space-x-1 items-center justify-center">
+                      <span>
+                        <svg
+                            width="18"
+                            height="18"
+                            viewBox="0 0 18 18"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                              d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18Z"
+                              fill="#627EEA"
+                          />
+                          <path
+                              d="M9.28125 2.25V7.23937L13.4983 9.12375L9.28125 2.25Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                          />
+                          <path
+                              d="M9.28012 2.25L5.0625 9.12375L9.28012 7.23937V2.25Z"
+                              fill="white"
+                          />
+                          <path
+                              d="M9.28125 12.3582V15.7483L13.5011 9.91016L9.28125 12.3582Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                          />
+                          <path
+                              d="M9.28012 15.7483V12.3576L5.0625 9.91016L9.28012 15.7483Z"
+                              fill="white"
+                          />
+                          <path
+                              d="M9.28125 11.572L13.4983 9.12348L9.28125 7.24023V11.572Z"
+                              fill="white"
+                              fillOpacity="0.2"
+                          />
+                          <path
+                              d="M5.0625 9.12348L9.28012 11.572V7.24023L5.0625 9.12348Z"
+                              fill="white"
+                              fillOpacity="0.602"
+                          />
+                        </svg>
+                      </span>
+                                <span className="text-base text-dark-gray dark:text-white font-medium whitespace-nowrap">
+                        7473 ETH
+                      </span>
+                            </div>
+                        </td>
+                        <td className="text-center py-4 px-2">
+                            <div className="flex space-x-1 items-center justify-center">
+                      <span>
+                        <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                              d="M7.55225 0C7.8457 0 8.13914 0 8.43205 0C8.44829 0.026534 8.47537 0.0151623 8.49756 0.0162453C9.28966 0.0649812 10.0606 0.220936 10.8013 0.505229C12.7699 1.26172 14.2323 2.58354 15.183 4.46638C15.5999 5.29218 15.8506 6.16997 15.9561 7.08891C15.9691 7.201 15.9621 7.3158 16 7.42465C16 7.80858 16 8.19251 16 8.57698C15.9778 8.5916 15.9854 8.61543 15.9838 8.63546C15.9475 9.10387 15.8744 9.56686 15.7515 10.0206C15.1787 12.1342 13.9524 13.7603 12.0818 14.8942C11.1516 15.4579 10.1397 15.8002 9.06064 15.941C8.89497 15.9626 8.72875 15.98 8.56308 15.9995C8.17217 15.9995 7.78127 15.9995 7.39036 16C7.3752 15.9789 7.35138 15.9865 7.33135 15.9848C6.96752 15.9545 6.60639 15.9009 6.25068 15.8197C4.77639 15.4829 3.48998 14.793 2.4131 13.7311C0.998917 12.3372 0.204656 10.6461 0.0270709 8.66687C0.0205739 8.59431 0.033568 8.51904 0 8.44972C0 8.15081 0 7.85244 0 7.55352C0.0265295 7.53403 0.0151597 7.50479 0.016784 7.47988C0.0730915 6.64162 0.251218 5.83044 0.564158 5.05066C1.10179 3.71043 1.93774 2.59058 3.07634 1.70142C4.33839 0.715876 5.77098 0.159745 7.36762 0.0270755C7.4288 0.0216604 7.49432 0.0341151 7.55225 0ZM7.24635 9.86252C7.24635 10.2383 7.24526 10.6147 7.24743 10.9905C7.24797 11.0457 7.23389 11.0679 7.17596 11.0593C7.09691 11.0479 7.01678 11.0446 6.93774 11.0338C6.26746 10.9461 5.63563 10.7371 5.03952 10.4192C5.00379 10.4002 4.97834 10.3802 4.9621 10.4425C4.81375 11.0176 4.66324 11.5926 4.51164 12.1666C4.50027 12.2094 4.51272 12.2278 4.54954 12.2473C4.66486 12.3096 4.78235 12.3665 4.90309 12.4152C5.5961 12.6968 6.31998 12.8408 7.06497 12.8842C7.14131 12.8885 7.16134 12.9112 7.1608 12.9865C7.15701 13.4159 7.16026 13.8453 7.15809 14.2747C7.15755 14.3397 7.17488 14.3619 7.2431 14.3614C7.69085 14.3581 8.13914 14.3576 8.5869 14.3614C8.66432 14.3619 8.67731 14.3359 8.67731 14.2666C8.67461 13.8026 8.67677 13.3385 8.67461 12.8744C8.67407 12.8089 8.68544 12.7786 8.76015 12.765C9.09962 12.7049 9.4288 12.6058 9.74228 12.4607C10.3498 12.1802 10.8408 11.7703 11.1603 11.1724C11.4288 10.6699 11.51 10.1327 11.4618 9.56957C11.4158 9.03239 11.2366 8.55207 10.8787 8.14431C10.5506 7.77121 10.1402 7.51129 9.69843 7.29522C9.39145 7.14523 9.07363 7.02284 8.75041 6.91129C8.7098 6.89721 8.67407 6.88693 8.67407 6.82736C8.67623 6.14993 8.67569 5.4725 8.67461 4.79507C8.67461 4.75121 8.68489 4.73117 8.73308 4.73767C8.87547 4.75717 9.01895 4.77016 9.16134 4.79236C9.634 4.86493 10.0796 5.02467 10.5116 5.22395C10.5717 5.25157 10.5945 5.24886 10.6123 5.17684C10.7434 4.6467 10.8771 4.1171 11.0162 3.58913C11.0379 3.5079 11.0244 3.47541 10.948 3.44076C10.2799 3.13751 9.57282 3.01025 8.8457 2.97614C8.78018 2.97289 8.76123 2.95556 8.76178 2.88896C8.76503 2.50232 8.76232 2.11568 8.76448 1.72904C8.76503 1.66785 8.75041 1.64727 8.68489 1.64727C8.23173 1.64998 7.77802 1.64998 7.32485 1.64727C7.26151 1.64673 7.24418 1.66406 7.24418 1.72742C7.24689 2.1433 7.24256 2.55972 7.24797 2.9756C7.24905 3.06116 7.2209 3.08661 7.14239 3.10285C6.73579 3.18679 6.34651 3.32271 5.98646 3.53281C5.20628 3.98822 4.72117 4.64724 4.61938 5.5586C4.51597 6.48837 4.83812 7.2427 5.57661 7.81778C6.05739 8.19251 6.60639 8.43781 7.1738 8.64683C7.2274 8.66633 7.24743 8.68907 7.24689 8.7481C7.24472 9.12066 7.24635 9.49159 7.24635 9.86252Z"
+                              fill="#59BE59"
+                          />
+                          <path
+                              d="M7.2452 9.86252C7.2452 9.49158 7.24358 9.12119 7.24683 8.75026C7.24737 8.69123 7.22734 8.66903 7.17374 8.64899C6.60687 8.43997 6.05787 8.19467 5.57655 7.81994C4.8386 7.24486 4.51591 6.49053 4.61933 5.56076C4.72057 4.6494 5.20568 3.99092 5.98641 3.53497C6.34645 3.32486 6.73519 3.18894 7.14233 3.10501C7.22084 3.08876 7.24899 3.06277 7.24791 2.97775C7.2425 2.56187 7.24683 2.14545 7.24412 1.72957C7.24358 1.66621 7.2609 1.64888 7.32479 1.64943C7.77796 1.65213 8.23167 1.65213 8.68483 1.64943C8.7498 1.64888 8.76442 1.66946 8.76442 1.73119C8.76171 2.11783 8.76496 2.50447 8.76171 2.89111C8.76117 2.95717 8.78012 2.97504 8.84563 2.97829C9.57276 3.01295 10.2793 3.13966 10.948 3.44291C11.0243 3.47757 11.0373 3.51006 11.0162 3.59128C10.877 4.11926 10.7433 4.64885 10.6123 5.17899C10.5944 5.25156 10.5717 5.25372 10.5116 5.2261C10.079 5.02683 9.63394 4.86708 9.16128 4.79452C9.01889 4.77286 8.87595 4.75932 8.73302 4.73983C8.68483 4.73333 8.67455 4.75337 8.67455 4.79723C8.67563 5.47466 8.67617 6.15209 8.674 6.82952C8.674 6.88908 8.70974 6.89937 8.75034 6.91345C9.07303 7.02446 9.39138 7.14684 9.69837 7.29738C10.1396 7.51344 10.5506 7.77283 10.8787 8.14647C11.2365 8.55369 11.4157 9.03455 11.4618 9.57173C11.51 10.1349 11.4287 10.6726 11.1602 11.1746C10.8408 11.7724 10.3497 12.1818 9.74222 12.4629C9.42874 12.608 9.09956 12.7071 8.76009 12.7672C8.68483 12.7802 8.674 12.811 8.67455 12.8766C8.67671 13.3406 8.67455 13.8047 8.67725 14.2688C8.67779 14.3381 8.66426 14.3646 8.58684 14.3636C8.13908 14.3598 7.69079 14.3608 7.24304 14.3636C7.17536 14.3641 7.15803 14.3424 7.15803 14.2769C7.1602 13.8475 7.15695 13.4181 7.16074 12.9887C7.16128 12.9128 7.14179 12.8906 7.06491 12.8863C6.31992 12.843 5.59658 12.699 4.90303 12.4174C4.78229 12.3681 4.66426 12.3112 4.54948 12.2495C4.51321 12.23 4.50075 12.2116 4.51158 12.1688C4.66318 11.5943 4.81369 11.0197 4.96204 10.4446C4.97829 10.3824 5.00373 10.4024 5.03947 10.4214C5.63557 10.7387 6.2674 10.9477 6.93768 11.036C7.01672 11.0463 7.09685 11.0501 7.1759 11.0614C7.23383 11.0695 7.24737 11.0479 7.24737 10.9927C7.24412 10.6147 7.2452 10.2383 7.2452 9.86252ZM8.68537 9.36325C8.67942 9.37245 8.67455 9.37678 8.67455 9.38112C8.674 9.83978 8.67401 10.2984 8.67292 10.7571C8.67292 10.8177 8.70216 10.7928 8.72598 10.7755C8.82452 10.7046 8.90736 10.619 8.96691 10.5123C9.17698 10.1333 9.05679 9.63725 8.68537 9.36325ZM7.23871 6.11147C7.23871 5.75354 7.23871 5.40589 7.23871 5.05174C6.92522 5.33982 6.92522 5.77249 7.23871 6.11147Z"
+                              fill="#FEFEFE"
+                          />
+                          <path
+                              d="M8.68433 9.36328C9.05574 9.63729 9.17539 10.1333 8.96586 10.5118C8.90631 10.619 8.82347 10.7046 8.72493 10.775C8.70111 10.7918 8.67188 10.8172 8.67188 10.7566C8.67242 10.2979 8.67296 9.83927 8.6735 9.38061C8.67404 9.37682 8.67891 9.37249 8.68433 9.36328Z"
+                              fill="#59BE59"
+                          />
+                          <path
+                              d="M7.23882 6.11149C6.92533 5.77305 6.92587 5.33984 7.23882 5.05176C7.23882 5.40591 7.23882 5.75355 7.23882 6.11149Z"
+                              fill="#59BE59"
+                          />
+                        </svg>
+                      </span>
+                                <span className="text-base text-dark-gray dark:text-white font-medium">
+                        6392.99$
+                      </span>
+                            </div>
+                        </td>
+
+                        <td className="text-right py-4">
+                            <button
+                                type="button"
+                                className="text-sm text-white bg-light-green px-2.5 py-1.5 rounded-full"
+                            >
+                                Complated
+                            </button>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        </>
+    );
+}

src/components/Resources/tabs/index.js

@@ -6,6 +6,7 @@ import OnSaleTab from "./OnSaleTab";
 import OwnTab from "./OwnTab";
 import BlogTab from "./BlogTab";
 import QuestionsTab from "./QuestionsTab";
+import MyUploadedFiles from "./MyUploadedFiles";
 
 export {
   BlogTab,
@@ -16,4 +17,5 @@ export {
   HiddenProductsTab,
   OnSaleTab,
   OwnTab,
+  MyUploadedFiles,
 };

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-import { toast } from "react-toastify";
-
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
@@ -60,14 +58,17 @@ export default function PersonalInfoTab({
 
   let navigate = useNavigate();
 
-  let [togglePromotion, setTogglePromotion] = useState(false);
-
   const initialValues = {
     firstname: userDetails?.firstname,
     lastname: userDetails?.lastname,
     state: userDetails?.state,
     city: userDetails?.city,
     email: userDetails?.email,
+    profile: userDetails?.profile_pic,
+    pref_email: 0,
+    pref_phone: 0,
+    accept_promo: false,
+    online_name: "",
   };
 
   let [profile, setProfile] = useState({
@@ -86,8 +87,17 @@ export default function PersonalInfoTab({
   const handleUpdateUser = (values, helpers) => {
     setRequestState({ message: "", loading: true, status: false });
 
+    // there is no profile accommodation on the payload
+    delete values?.profile;
+
+    const reqData = {
+      ...values,
+      pref_email: Number(values.pref_email?.toString()),
+      pref_phone: Number(values.pref_phone?.toString()),
+    };
+
     apiCall
-      .updateProfile(values)
+      .updateProfile(reqData)
       .then((res) => {
         // API CALL TO UPDATE USER DETAILS
         if (res.data.internal_return < 0) {
@@ -98,10 +108,14 @@ export default function PersonalInfoTab({
           });
           return;
         }
-        // setRequestState({message: 'Profile update successfully', loading: false, status: true})
-        toast.success("Update Successful");
+        setRequestState({
+          message: "Profile update successfully",
+          loading: false,
+          status: true,
+        });
+        // toast.success("Update Successful");
         setTimeout(() => {
-          // navigate("/", { replace: true });
+          navigate("/", { replace: true });
           window.location.reload(true);
         }, 1000);
       })
@@ -144,9 +158,9 @@ export default function PersonalInfoTab({
                         fieldClass="px-6"
                         label="User Name"
                         type="text"
-                        name="username"
-                        placeholder=""
-                        value={userDetails.username}
+                        name="online_name"
+                        placeholder="Username"
+                        value={userDetails?.username}
                         disable={true}
                       />
                     </div>
@@ -206,6 +220,25 @@ export default function PersonalInfoTab({
                         )}
                       </div>
                     </div>
+                    {/* Online Name */}
+                    <div className="field w-full mb-6">
+                      <InputCom
+                        fieldClass="px-6"
+                        label="Online Name (optional)"
+                        type="text"
+                        name="online_name"
+                        placeholder=""
+                        value={props.values.online_name}
+                        inputHandler={props.handleChange}
+                        blurHandler={props.handleBlur}
+                      />
+                      {props.errors.online_name &&
+                        props.touched.online_name && (
+                          <p className="text-sm text-red-500">
+                            {props.errors.online_name}
+                          </p>
+                        )}
+                    </div>
 
                     {/* Country */}
                     <div className="field w-full mb-6">
@@ -263,13 +296,17 @@ export default function PersonalInfoTab({
                         Pref. Communication
                       </label>
                       <div className="check-box">
-                        <div className="flex items-center justify-start">
+                        <div
+                          role="group"
+                          className="flex items-center justify-start"
+                        >
                           <div className="check-input flex items-center mr-1">
                             <input
                               className="w-4 h-4 cursor-pointer"
                               type="checkbox"
-                              name="prefcomm1"
-                              id=""
+                              name="pref_email"
+                              value={1}
+                              onChange={props.handleChange}
                             />
                             <span className="mx-2 text-base text-dark-gray dark:text-white">
                               Email
@@ -279,8 +316,9 @@ export default function PersonalInfoTab({
                             <input
                               className="w-4 h-4 cursor-pointer"
                               type="checkbox"
-                              name="prefcomm2"
-                              id=""
+                              name="pref_phone"
+                              value={1}
+                              onChange={props.handleChange}
                             />
                             <span className="mx-2 text-base text-dark-gray dark:text-white">
                               Phone
@@ -292,22 +330,32 @@ export default function PersonalInfoTab({
 
                     {/* Allow Promotions */}
                     <div className="field w-full mb-6 flex items-center space-x-4">
-                      <label className="input-label text-[#181c32] dark:text-white text-base font-semibold">
+                      <label
+                        htmlFor="accept_promo"
+                        className="input-label text-[#181c32] dark:text-white text-base font-semibold"
+                      >
                         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
+                      <div>
+                        <input
+                          type="checkbox"
+                          id="accept_promo"
+                          name="accept_promo"
+                          value={props.values.accept_promo}
+                          checked={props.values.accept_promo}
+                          onChange={props.handleChange}
+                          className="hidden"
+                        />
+                        <label
+                          htmlFor="accept_promo"
+                          className={`cursor-pointer flex items-center h-6 w-8 mr-1 p-1 ${
+                            props.values.accept_promo
                               ? "bg-sky-blue flex justify-end items-center"
                               : "bg-slate-200"
-                          } rounded-full transition`}
+                          } rounded-full transition duration-200`}
                         >
                           <div className="w-4 h-full bg-white rounded-full"></div>
-                        </div>
+                        </label>
                       </div>
                     </div>
                     {/* inputs ends here */}
@@ -336,8 +384,8 @@ export default function PersonalInfoTab({
                       <div className="w-full relative">
                         <img
                           src={profileImg}
-                          alt=""
-                          className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
+                          alt="profile"
+                          className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-contain object-center"
                         />
                         <input
                           ref={profileImgInput}
@@ -384,7 +432,7 @@ export default function PersonalInfoTab({
                 )}
                 <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
-                    <Link
+                    {/* <Link
                       to="/"
                       className="text-18 text-light-red tracking-wide "
                     >
@@ -392,7 +440,7 @@ export default function PersonalInfoTab({
                         {" "}
                         Cancel
                       </span>
-                    </Link>
+                    </Link> */}
 
                     {requestStatus.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />

src/components/Settings/index.jsx

@@ -5,8 +5,9 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useSelector } from "react-redux";
 import cover from "../../assets/images/profile-info-cover.png";
-import profile from "../../assets/images/profile-info-profile.png";
+import profile from "../../assets/images/profile.jpg";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
@@ -23,15 +24,19 @@ import {
 import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 
 export default function Settings({ faq }) {
-  const [profileImg, setProfileImg] = useState(profile);
+  const { userDetails } = useSelector((state) => state?.userDetails);
+  const [profileImg, setProfileImg] = useState(
+    userDetails?.profile_pic_url ? userDetails.profile_pic_url : profile
+  );
   const [coverImg, setCoverImg] = useState(cover);
-    const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
-    
+  const [reloadCardList, setReloadCardList] = useState(false); // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
+
   // profile img
   const profileImgInput = useRef(null);
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
+
   const profileImgChangHandler = (e) => {
     if (e.target.value !== "") {
       const imgReader = new FileReader();

src/components/UploadProduct/ProductUploadField.jsx

@@ -22,132 +22,134 @@ export default function ProductUploadField({
     <div className="w-full lg:pl-[41px]">
       <div className="fields w-full">
         <form onSubmit={(e) => e.preventDefault()}>
-          <div className="field w-full mb-6">
-            <h1 className="field-title">Put on marketplace</h1>
-            <p className="text-thin-light-gray text-base tracking-wide font-medium mb-3">
-              Enter price to allow users instantly purchase your NFT
-            </p>
+          {/*<div className="field w-full mb-6">*/}
+          {/*  <h1 className="field-title">Put on marketplace</h1>*/}
+          {/*  <p className="text-thin-light-gray text-base tracking-wide font-medium mb-3">*/}
+          {/*    Enter price to allow users instantly purchase your NFT*/}
+          {/*  </p>*/}
+
+          {/*  <div className="items sm:flex sm:space-x-5">*/}
+          {/*    <div*/}
+          {/*      className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"*/}
+          {/*      onClick={() => cpt("fixed")}*/}
+          {/*    >*/}
+          {/*      <div*/}
+          {/*        className={`w-full h-full bg-white dark:bg-dark-white   rounded-md z-20 relative  flex justify-center items-center ${*/}
+          {/*          datas.priceType === "fixed"*/}
+          {/*            ? ""*/}
+          {/*            : "border border-light-purple dark:border-[#5356fb29] "*/}
+          {/*        }`}*/}
+          {/*      >*/}
+          {/*        <div className="flex flex-col justify-center items-center">*/}
+          {/*          <div*/}
+          {/*            className={`w-[68px] h-[68px]  rounded-full flex justify-center items-center ${*/}
+          {/*              datas.priceType === "fixed"*/}
+          {/*                ? "primary-gradient"*/}
+          {/*                : "bg-[#F2E8FA]"*/}
+          {/*            }`}*/}
+          {/*          >*/}
+          {/*            <GradientIcons*/}
+          {/*              name={`${*/}
+          {/*                datas.priceType === "fixed"*/}
+          {/*                  ? "doller"*/}
+          {/*                  : "gradient-doller"*/}
+          {/*              }`}*/}
+          {/*            />*/}
+          {/*          </div>*/}
+          {/*          <p className="text-center text-base tracking-wide mt-1   text-dark-gray dark:text-white">*/}
+          {/*            Fixed price*/}
+          {/*          </p>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*      {datas.priceType === "fixed" && (*/}
+          {/*        <div*/}
+          {/*          className="sm:w-[122px]  w-full h-[132px] primary-gradient rounded-md absolute z-10"*/}
+          {/*          style={{ top: "-1px", left: "-1px" }}*/}
+          {/*        ></div>*/}
+          {/*      )}*/}
+          {/*    </div>*/}
+          {/*    <div*/}
+          {/*      className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"*/}
+          {/*      onClick={() => cpt("bids")}*/}
+          {/*    >*/}
+          {/*      <div*/}
+          {/*        className={`w-full h-full bg-white dark:bg-dark-white   rounded-md z-20 relative  flex justify-center items-center ${*/}
+          {/*          datas.priceType === "bids"*/}
+          {/*            ? ""*/}
+          {/*            : "border border-light-purple dark:border-[#5356fb29] "*/}
+          {/*        }`}*/}
+          {/*      >*/}
+          {/*        <div className="flex flex-col justify-center items-center">*/}
+          {/*          <div*/}
+          {/*            className={`w-[68px] h-[68px]  rounded-full flex justify-center items-center ${*/}
+          {/*              datas.priceType === "bids"*/}
+          {/*                ? "primary-gradient"*/}
+          {/*                : "bg-[#F2E8FA]"*/}
+          {/*            }`}*/}
+          {/*          >*/}
+          {/*            <GradientIcons*/}
+          {/*              name={`${*/}
+          {/*                datas.priceType === "bids"*/}
+          {/*                  ? "hammer"*/}
+          {/*                  : "gradient-hammer"*/}
+          {/*              }`}*/}
+          {/*            />*/}
+          {/*          </div>*/}
+          {/*          <p className="text-center text-base tracking-wide mt-1   text-dark-gray dark:text-white">*/}
+          {/*            Open for bids*/}
+          {/*          </p>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*      {datas.priceType === "bids" && (*/}
+          {/*        <div*/}
+          {/*          className="sm:w-[122px]  w-full h-[132px] primary-gradient rounded-md absolute z-10"*/}
+          {/*          style={{ top: "-1px", left: "-1px" }}*/}
+          {/*        ></div>*/}
+          {/*      )}*/}
+          {/*    </div>*/}
+          {/*    <div*/}
+          {/*      className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"*/}
+          {/*      onClick={() => cpt("auction")}*/}
+          {/*    >*/}
+          {/*      <div*/}
+          {/*        className={`w-full h-full bg-white dark:bg-dark-white   rounded-md z-20 relative  flex justify-center items-center ${*/}
+          {/*          datas.priceType === "auction"*/}
+          {/*            ? ""*/}
+          {/*            : "border border-light-purple dark:border-[#5356fb29] "*/}
+          {/*        }`}*/}
+          {/*      >*/}
+          {/*        <div className="flex flex-col justify-center items-center">*/}
+          {/*          <div*/}
+          {/*            className={`w-[68px] h-[68px]  rounded-full flex justify-center items-center ${*/}
+          {/*              datas.priceType === "auction"*/}
+          {/*                ? "primary-gradient"*/}
+          {/*                : "bg-[#F2E8FA]"*/}
+          {/*            }`}*/}
+          {/*          >*/}
+          {/*            <GradientIcons*/}
+          {/*              name={`${*/}
+          {/*                datas.priceType === "auction"*/}
+          {/*                  ? "timeout"*/}
+          {/*                  : "gradient-timeout"*/}
+          {/*              }`}*/}
+          {/*            />*/}
+          {/*          </div>*/}
+          {/*          <p className="text-center text-base tracking-wide mt-1   text-dark-gray dark:text-white">*/}
+          {/*            Timed auction*/}
+          {/*          </p>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*      {datas.priceType === "auction" && (*/}
+          {/*        <div*/}
+          {/*          className="sm:w-[122px]  w-full h-[132px] primary-gradient rounded-md absolute z-10"*/}
+          {/*          style={{ top: "-1px", left: "-1px" }}*/}
+          {/*        ></div>*/}
+          {/*      )}*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
+
 
-            <div className="items sm:flex sm:space-x-5">
-              <div
-                className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"
-                onClick={() => cpt("fixed")}
-              >
-                <div
-                  className={`w-full h-full bg-white dark:bg-dark-white   rounded-md z-20 relative  flex justify-center items-center ${
-                    datas.priceType === "fixed"
-                      ? ""
-                      : "border border-light-purple dark:border-[#5356fb29] "
-                  }`}
-                >
-                  <div className="flex flex-col justify-center items-center">
-                    <div
-                      className={`w-[68px] h-[68px]  rounded-full flex justify-center items-center ${
-                        datas.priceType === "fixed"
-                          ? "primary-gradient"
-                          : "bg-[#F2E8FA]"
-                      }`}
-                    >
-                      <GradientIcons
-                        name={`${
-                          datas.priceType === "fixed"
-                            ? "doller"
-                            : "gradient-doller"
-                        }`}
-                      />
-                    </div>
-                    <p className="text-center text-base tracking-wide mt-1   text-dark-gray dark:text-white">
-                      Fixed price
-                    </p>
-                  </div>
-                </div>
-                {datas.priceType === "fixed" && (
-                  <div
-                    className="sm:w-[122px]  w-full h-[132px] primary-gradient rounded-md absolute z-10"
-                    style={{ top: "-1px", left: "-1px" }}
-                  ></div>
-                )}
-              </div>
-              <div
-                className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"
-                onClick={() => cpt("bids")}
-              >
-                <div
-                  className={`w-full h-full bg-white dark:bg-dark-white   rounded-md z-20 relative  flex justify-center items-center ${
-                    datas.priceType === "bids"
-                      ? ""
-                      : "border border-light-purple dark:border-[#5356fb29] "
-                  }`}
-                >
-                  <div className="flex flex-col justify-center items-center">
-                    <div
-                      className={`w-[68px] h-[68px]  rounded-full flex justify-center items-center ${
-                        datas.priceType === "bids"
-                          ? "primary-gradient"
-                          : "bg-[#F2E8FA]"
-                      }`}
-                    >
-                      <GradientIcons
-                        name={`${
-                          datas.priceType === "bids"
-                            ? "hammer"
-                            : "gradient-hammer"
-                        }`}
-                      />
-                    </div>
-                    <p className="text-center text-base tracking-wide mt-1   text-dark-gray dark:text-white">
-                      Open for bids
-                    </p>
-                  </div>
-                </div>
-                {datas.priceType === "bids" && (
-                  <div
-                    className="sm:w-[122px]  w-full h-[132px] primary-gradient rounded-md absolute z-10"
-                    style={{ top: "-1px", left: "-1px" }}
-                  ></div>
-                )}
-              </div>
-              <div
-                className="item sm:w-[120px] w-full h-[130px] relative mb-5 sm:mb-0"
-                onClick={() => cpt("auction")}
-              >
-                <div
-                  className={`w-full h-full bg-white dark:bg-dark-white   rounded-md z-20 relative  flex justify-center items-center ${
-                    datas.priceType === "auction"
-                      ? ""
-                      : "border border-light-purple dark:border-[#5356fb29] "
-                  }`}
-                >
-                  <div className="flex flex-col justify-center items-center">
-                    <div
-                      className={`w-[68px] h-[68px]  rounded-full flex justify-center items-center ${
-                        datas.priceType === "auction"
-                          ? "primary-gradient"
-                          : "bg-[#F2E8FA]"
-                      }`}
-                    >
-                      <GradientIcons
-                        name={`${
-                          datas.priceType === "auction"
-                            ? "timeout"
-                            : "gradient-timeout"
-                        }`}
-                      />
-                    </div>
-                    <p className="text-center text-base tracking-wide mt-1   text-dark-gray dark:text-white">
-                      Timed auction
-                    </p>
-                  </div>
-                </div>
-                {datas.priceType === "auction" && (
-                  <div
-                    className="sm:w-[122px]  w-full h-[132px] primary-gradient rounded-md absolute z-10"
-                    style={{ top: "-1px", left: "-1px" }}
-                  ></div>
-                )}
-              </div>
-            </div>
-          </div>
           <div className="field w-full mb-6">
             <h1 className="field-title">Item Name </h1>
             <div className="input-field mt-2">
@@ -161,19 +163,22 @@ export default function ProductUploadField({
               />
             </div>
           </div>
-          <div className="field w-full mb-6">
-            <h1 className="field-title">Exter link </h1>
-            <div className="input-field mt-2">
-              <InputCom
-                fieldClass="px-6"
-                type="text"
-                name="link"
-                inputHandler={linkh}
-                value={datas.link}
-                placeholder="https:yoursite.lo/imte/item_name123"
-              />
-            </div>
-          </div>
+
+
+          {/*<div className="field w-full mb-6">*/}
+          {/*  <h1 className="field-title">Exter link </h1>*/}
+          {/*  <div className="input-field mt-2">*/}
+          {/*    <InputCom*/}
+          {/*      fieldClass="px-6"*/}
+          {/*      type="text"*/}
+          {/*      name="link"*/}
+          {/*      inputHandler={linkh}*/}
+          {/*      value={datas.link}*/}
+          {/*      placeholder="https:yoursite.lo/imte/item_name123"*/}
+          {/*    />*/}
+          {/*  </div>*/}
+          {/*</div>*/}
+
           <div className="field w-full mb-6">
             <h1 className="field-title">Description </h1>
             <div className="input-field mt-2">
@@ -188,219 +193,222 @@ export default function ProductUploadField({
               </div>
             </div>
           </div>
-          <div className="field w-full mb-6">
-            <h1 className="field-title">Instant sale price </h1>
-            <div className="input-field my-2">
-              <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] flex items-center overflow-hidden">
-                <input
-                  value={datas.price}
-                  onChange={(e) => priceHndlr(e)}
-                  placeholder="enter the price for which the item will be instantly sold"
-                  className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-10/12 h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
-                  type="number"
-                />
-                <div className="w-[1px] h-[33px] bg-light-purple dark:bg-dark-light-purple "></div>
-                <div className="flex-1 flex h-full justify-center items-center bg-[#FAFAFA] dark:bg-[#11131F] ">
-                  <div className="flex space-x-1 items-center">
-                    <span className="text-dark-gray dark:text-white text-base">
-                      ETH
-                    </span>
-                    <span>
-                      <svg
-                        width="13"
-                        height="6"
-                        viewBox="0 0 13 6"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          opacity="0.7"
-                          d="M12.7488 0.247421C12.6691 0.169022 12.5744 0.106794 12.4699 0.0643287C12.3655 0.0218632 12.2535 0 12.1403 0C12.0272 0 11.9152 0.0218632 11.8107 0.0643287C11.7063 0.106794 11.6115 0.169022 11.5318 0.247421L7.60655 4.07837C7.52688 4.15677 7.43209 4.219 7.32765 4.26146C7.22321 4.30393 7.11119 4.32579 6.99805 4.32579C6.88491 4.32579 6.77289 4.30393 6.66845 4.26146C6.56401 4.219 6.46922 4.15677 6.38954 4.07837L2.46427 0.247421C2.3846 0.169022 2.28981 0.106794 2.18537 0.0643287C2.08093 0.0218632 1.96891 0 1.85577 0C1.74263 0 1.63061 0.0218632 1.52617 0.0643287C1.42173 0.106794 1.32694 0.169022 1.24727 0.247421C1.08764 0.404141 0.998047 0.616141 0.998047 0.837119C0.998047 1.0581 1.08764 1.2701 1.24727 1.42682L5.18111 5.26613C5.6632 5.73605 6.31669 6 6.99805 6C7.6794 6 8.33289 5.73605 8.81498 5.26613L12.7488 1.42682C12.9084 1.2701 12.998 1.0581 12.998 0.837119C12.998 0.616141 12.9084 0.404141 12.7488 0.247421Z"
-                          fill="#374557"
-                        />
-                      </svg>
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="text-base tracking-wide   text-dark-gray dark:text-white">
-              <p>
-                <span className="text-thin-light-gray">Service fee :</span> 1.5%
-              </p>
-              <p>
-                <span className="text-thin-light-gray">You will Receive :</span>
-                .29 ETH $120.56
-              </p>
-            </div>
-          </div>
-          <div className="field w-full mb-6">
-            <h1 className="field-title">Royalties</h1>
-            <div className="input-field my-2">
-              <div className="mb-2">
-                <InputCom
-                  fieldClass="px-6"
-                  type="text"
-                  name="link"
-                  inputHandler={roltsHndlr}
-                  value={datas.royalties}
-                  placeholder="0%"
-                />
-              </div>
-              <p className="text-thin-light-gray text-sm tracking-wide">
-                Suggested: 10%, 20%, 30%
-              </p>
-            </div>
-          </div>
 
-          <div className="field w-full mb-6">
-            <h1 className="field-title">
-              Properties
-              <span className="text-thin-light-gray font-normal ml-2">
-                (Optional)
-              </span>
-            </h1>
-            <div className="input-field my-2">
-              <div className="mb-2">
-                <div className="sm:flex sm:space-x-8">
-                  <div className="sm:w-1/2 w-full mb-2 sm:mb-0">
-                    <InputCom
-                      fieldClass="px-6"
-                      type="text"
-                      name="link"
-                      inputHandler={keyHndlr}
-                      value={datas.propertiesKey}
-                      placeholder="Enter key"
-                    />
-                  </div>
-                  <div className="flex-1">
-                    <InputCom
-                      fieldClass="px-6"
-                      type="text"
-                      name="link"
-                      inputHandler={valueHndlr}
-                      value={datas.propertiesValue}
-                      placeholder="Enter Value"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="field w-full mb-6">
-            <h1 className="field-title">Choose collection</h1>
-            <div className="input-field mt-2">
-              <div className="sm:flex sm:space-x-5">
-                {/* create collection */}
-                <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border border-light-purple dark:border-[#5356fb29]  flex justify-center items-center cursor-pointer">
-                  <div>
-                    <span className="mb-1 flex justify-center">
-                      <svg
-                        width="25"
-                        height="25"
-                        viewBox="0 0 25 25"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M25 12.5125C25.019 19.39 19.3853 24.9989 12.5054 25.0001C5.6017 25.0012 -0.0153836 19.3615 3.1653e-05 12.471C0.0154469 5.59949 5.63965 -0.0224583 12.5469 6.7456e-05C19.396 0.0225932 25.0297 5.61846 25 12.5125ZM14.3007 17.2097C14.3007 16.3324 14.3007 15.4551 14.3007 14.5778C14.3007 14.3525 14.3007 14.3525 14.5224 14.3525C16.2299 14.3525 17.9387 14.3525 19.6462 14.3513C19.7339 14.3513 19.8241 14.349 19.9106 14.3335C20.832 14.1711 21.4581 13.327 21.3798 12.356C21.3099 11.4775 20.4988 10.733 19.6011 10.7306C17.9031 10.7271 16.2062 10.7294 14.5082 10.7294C14.2995 10.7294 14.2995 10.7294 14.2995 10.5243C14.2995 8.7851 14.2995 7.04588 14.2983 5.30784C14.2983 5.22959 14.2983 5.15016 14.2805 5.07547C14.0588 4.16021 13.218 3.59588 12.3465 3.68599C11.3836 3.78676 10.697 4.55026 10.697 5.48212C10.697 7.14309 10.697 8.80288 10.697 10.4639C10.697 10.7555 10.7243 10.7294 10.4243 10.7294C8.79504 10.7294 7.16457 10.7401 5.5353 10.7259C4.40524 10.7152 3.60483 11.6293 3.63922 12.6216C3.67242 13.5451 4.45623 14.3513 5.37996 14.3513C7.08275 14.3513 8.78555 14.3513 10.4883 14.3513C10.697 14.3513 10.697 14.3525 10.697 14.5576C10.697 16.2387 10.697 17.9211 10.697 19.6022C10.697 19.6757 10.6935 19.7492 10.703 19.8215C10.8761 21.1256 12.2884 21.8358 13.4255 21.1719C13.9817 20.847 14.3066 20.3586 14.3018 19.684C14.2947 18.86 14.3007 18.0349 14.3007 17.2097Z"
-                          fill="#374557"
-                          fillOpacity="0.6"
-                        />
-                      </svg>
-                    </span>
-                    <span className="text-thin-light-gray text-center">
-                      Crteate
-                    </span>
-                  </div>
-                </div>
-                {/* saved collection list */}
-                <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border-gradient flex justify-center items-center cursor-pointer">
-                  <div>
-                    <div className="mb-1 flex justify-center ">
-                      <div className="w-[50px] h-[50px] rounded-full overflow-hidden">
-                        <img
-                          src={collection1}
-                          alt=""
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-                    </div>
-                    <span className="text-thin-light-gray text-center">
-                      Name 1
-                    </span>
-                  </div>
-                </div>
-                <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border border-light-purple dark:border-[#5356fb29]  flex justify-center items-center cursor-pointer">
-                  <div>
-                    <div className="mb-1 flex justify-center ">
-                      <div className="w-[50px] h-[50px] rounded-full overflow-hidden">
-                        <img
-                          src={collection2}
-                          alt=""
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-                    </div>
-                    <span className="text-thin-light-gray text-center">
-                      Name 2
-                    </span>
-                  </div>
-                </div>
-                <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border border-light-purple dark:border-[#5356fb29]  flex justify-center items-center cursor-pointer">
-                  <div>
-                    <div className="mb-1 flex justify-center ">
-                      <div className="w-[50px] h-[50px] rounded-full overflow-hidden">
-                        <img
-                          src={collection3}
-                          alt=""
-                          className="w-full h-full object-cover"
-                        />
-                      </div>
-                    </div>
-                    <span className="text-thin-light-gray text-center">
-                      Name 3
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+          {/*<div className="field w-full mb-6">*/}
+          {/*  <h1 className="field-title">Instant sale price </h1>*/}
+          {/*  <div className="input-field my-2">*/}
+          {/*    <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] flex items-center overflow-hidden">*/}
+          {/*      <input*/}
+          {/*        value={datas.price}*/}
+          {/*        onChange={(e) => priceHndlr(e)}*/}
+          {/*        placeholder="enter the price for which the item will be instantly sold"*/}
+          {/*        className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-10/12 h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"*/}
+          {/*        type="number"*/}
+          {/*      />*/}
+          {/*      <div className="w-[1px] h-[33px] bg-light-purple dark:bg-dark-light-purple "></div>*/}
+          {/*      <div className="flex-1 flex h-full justify-center items-center bg-[#FAFAFA] dark:bg-[#11131F] ">*/}
+          {/*        <div className="flex space-x-1 items-center">*/}
+          {/*          <span className="text-dark-gray dark:text-white text-base">*/}
+          {/*            ETH*/}
+          {/*          </span>*/}
+          {/*          <span>*/}
+          {/*            <svg*/}
+          {/*              width="13"*/}
+          {/*              height="6"*/}
+          {/*              viewBox="0 0 13 6"*/}
+          {/*              fill="none"*/}
+          {/*              xmlns="http://www.w3.org/2000/svg"*/}
+          {/*            >*/}
+          {/*              <path*/}
+          {/*                opacity="0.7"*/}
+          {/*                d="M12.7488 0.247421C12.6691 0.169022 12.5744 0.106794 12.4699 0.0643287C12.3655 0.0218632 12.2535 0 12.1403 0C12.0272 0 11.9152 0.0218632 11.8107 0.0643287C11.7063 0.106794 11.6115 0.169022 11.5318 0.247421L7.60655 4.07837C7.52688 4.15677 7.43209 4.219 7.32765 4.26146C7.22321 4.30393 7.11119 4.32579 6.99805 4.32579C6.88491 4.32579 6.77289 4.30393 6.66845 4.26146C6.56401 4.219 6.46922 4.15677 6.38954 4.07837L2.46427 0.247421C2.3846 0.169022 2.28981 0.106794 2.18537 0.0643287C2.08093 0.0218632 1.96891 0 1.85577 0C1.74263 0 1.63061 0.0218632 1.52617 0.0643287C1.42173 0.106794 1.32694 0.169022 1.24727 0.247421C1.08764 0.404141 0.998047 0.616141 0.998047 0.837119C0.998047 1.0581 1.08764 1.2701 1.24727 1.42682L5.18111 5.26613C5.6632 5.73605 6.31669 6 6.99805 6C7.6794 6 8.33289 5.73605 8.81498 5.26613L12.7488 1.42682C12.9084 1.2701 12.998 1.0581 12.998 0.837119C12.998 0.616141 12.9084 0.404141 12.7488 0.247421Z"*/}
+          {/*                fill="#374557"*/}
+          {/*              />*/}
+          {/*            </svg>*/}
+          {/*          </span>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*  <div className="text-base tracking-wide   text-dark-gray dark:text-white">*/}
+          {/*    <p>*/}
+          {/*      <span className="text-thin-light-gray">Service fee :</span> 1.5%*/}
+          {/*    </p>*/}
+          {/*    <p>*/}
+          {/*      <span className="text-thin-light-gray">You will Receive :</span>*/}
+          {/*      .29 ETH $120.56*/}
+          {/*    </p>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
+
+          {/*<div className="field w-full mb-6">*/}
+          {/*  <h1 className="field-title">Royalties</h1>*/}
+          {/*  <div className="input-field my-2">*/}
+          {/*    <div className="mb-2">*/}
+          {/*      <InputCom*/}
+          {/*        fieldClass="px-6"*/}
+          {/*        type="text"*/}
+          {/*        name="link"*/}
+          {/*        inputHandler={roltsHndlr}*/}
+          {/*        value={datas.royalties}*/}
+          {/*        placeholder="0%"*/}
+          {/*      />*/}
+          {/*    </div>*/}
+          {/*    <p className="text-thin-light-gray text-sm tracking-wide">*/}
+          {/*      Suggested: 10%, 20%, 30%*/}
+          {/*    </p>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
+
+          {/*<div className="field w-full mb-6">*/}
+          {/*  <h1 className="field-title">*/}
+          {/*    Properties*/}
+          {/*    <span className="text-thin-light-gray font-normal ml-2">*/}
+          {/*      (Optional)*/}
+          {/*    </span>*/}
+          {/*  </h1>*/}
+          {/*  <div className="input-field my-2">*/}
+          {/*    <div className="mb-2">*/}
+          {/*      <div className="sm:flex sm:space-x-8">*/}
+          {/*        <div className="sm:w-1/2 w-full mb-2 sm:mb-0">*/}
+          {/*          <InputCom*/}
+          {/*            fieldClass="px-6"*/}
+          {/*            type="text"*/}
+          {/*            name="link"*/}
+          {/*            inputHandler={keyHndlr}*/}
+          {/*            value={datas.propertiesKey}*/}
+          {/*            placeholder="Enter key"*/}
+          {/*          />*/}
+          {/*        </div>*/}
+          {/*        <div className="flex-1">*/}
+          {/*          <InputCom*/}
+          {/*            fieldClass="px-6"*/}
+          {/*            type="text"*/}
+          {/*            name="link"*/}
+          {/*            inputHandler={valueHndlr}*/}
+          {/*            value={datas.propertiesValue}*/}
+          {/*            placeholder="Enter Value"*/}
+          {/*          />*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
+
+          {/*<div className="field w-full mb-6">*/}
+          {/*  <h1 className="field-title">Choose collection</h1>*/}
+          {/*  <div className="input-field mt-2">*/}
+          {/*    <div className="sm:flex sm:space-x-5">*/}
+          {/*      /!* create collection *!/*/}
+          {/*      <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border border-light-purple dark:border-[#5356fb29]  flex justify-center items-center cursor-pointer">*/}
+          {/*        <div>*/}
+          {/*          <span className="mb-1 flex justify-center">*/}
+          {/*            <svg*/}
+          {/*              width="25"*/}
+          {/*              height="25"*/}
+          {/*              viewBox="0 0 25 25"*/}
+          {/*              fill="none"*/}
+          {/*              xmlns="http://www.w3.org/2000/svg"*/}
+          {/*            >*/}
+          {/*              <path*/}
+          {/*                d="M25 12.5125C25.019 19.39 19.3853 24.9989 12.5054 25.0001C5.6017 25.0012 -0.0153836 19.3615 3.1653e-05 12.471C0.0154469 5.59949 5.63965 -0.0224583 12.5469 6.7456e-05C19.396 0.0225932 25.0297 5.61846 25 12.5125ZM14.3007 17.2097C14.3007 16.3324 14.3007 15.4551 14.3007 14.5778C14.3007 14.3525 14.3007 14.3525 14.5224 14.3525C16.2299 14.3525 17.9387 14.3525 19.6462 14.3513C19.7339 14.3513 19.8241 14.349 19.9106 14.3335C20.832 14.1711 21.4581 13.327 21.3798 12.356C21.3099 11.4775 20.4988 10.733 19.6011 10.7306C17.9031 10.7271 16.2062 10.7294 14.5082 10.7294C14.2995 10.7294 14.2995 10.7294 14.2995 10.5243C14.2995 8.7851 14.2995 7.04588 14.2983 5.30784C14.2983 5.22959 14.2983 5.15016 14.2805 5.07547C14.0588 4.16021 13.218 3.59588 12.3465 3.68599C11.3836 3.78676 10.697 4.55026 10.697 5.48212C10.697 7.14309 10.697 8.80288 10.697 10.4639C10.697 10.7555 10.7243 10.7294 10.4243 10.7294C8.79504 10.7294 7.16457 10.7401 5.5353 10.7259C4.40524 10.7152 3.60483 11.6293 3.63922 12.6216C3.67242 13.5451 4.45623 14.3513 5.37996 14.3513C7.08275 14.3513 8.78555 14.3513 10.4883 14.3513C10.697 14.3513 10.697 14.3525 10.697 14.5576C10.697 16.2387 10.697 17.9211 10.697 19.6022C10.697 19.6757 10.6935 19.7492 10.703 19.8215C10.8761 21.1256 12.2884 21.8358 13.4255 21.1719C13.9817 20.847 14.3066 20.3586 14.3018 19.684C14.2947 18.86 14.3007 18.0349 14.3007 17.2097Z"*/}
+          {/*                fill="#374557"*/}
+          {/*                fillOpacity="0.6"*/}
+          {/*              />*/}
+          {/*            </svg>*/}
+          {/*          </span>*/}
+          {/*          <span className="text-thin-light-gray text-center">*/}
+          {/*            Crteate*/}
+          {/*          </span>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*      /!* saved collection list *!/*/}
+          {/*      <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border-gradient flex justify-center items-center cursor-pointer">*/}
+          {/*        <div>*/}
+          {/*          <div className="mb-1 flex justify-center ">*/}
+          {/*            <div className="w-[50px] h-[50px] rounded-full overflow-hidden">*/}
+          {/*              <img*/}
+          {/*                src={collection1}*/}
+          {/*                alt=""*/}
+          {/*                className="w-full h-full object-cover"*/}
+          {/*              />*/}
+          {/*            </div>*/}
+          {/*          </div>*/}
+          {/*          <span className="text-thin-light-gray text-center">*/}
+          {/*            Name 1*/}
+          {/*          </span>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*      <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border border-light-purple dark:border-[#5356fb29]  flex justify-center items-center cursor-pointer">*/}
+          {/*        <div>*/}
+          {/*          <div className="mb-1 flex justify-center ">*/}
+          {/*            <div className="w-[50px] h-[50px] rounded-full overflow-hidden">*/}
+          {/*              <img*/}
+          {/*                src={collection2}*/}
+          {/*                alt=""*/}
+          {/*                className="w-full h-full object-cover"*/}
+          {/*              />*/}
+          {/*            </div>*/}
+          {/*          </div>*/}
+          {/*          <span className="text-thin-light-gray text-center">*/}
+          {/*            Name 2*/}
+          {/*          </span>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*      <div className="sm:w-[100px] h-[100px] w-full mb-2 sm:mb-0 rounded-[4px] bg-[#FAFAFA] dark:bg-[#11131F]  border border-light-purple dark:border-[#5356fb29]  flex justify-center items-center cursor-pointer">*/}
+          {/*        <div>*/}
+          {/*          <div className="mb-1 flex justify-center ">*/}
+          {/*            <div className="w-[50px] h-[50px] rounded-full overflow-hidden">*/}
+          {/*              <img*/}
+          {/*                src={collection3}*/}
+          {/*                alt=""*/}
+          {/*                className="w-full h-full object-cover"*/}
+          {/*              />*/}
+          {/*            </div>*/}
+          {/*          </div>*/}
+          {/*          <span className="text-thin-light-gray text-center">*/}
+          {/*            Name 3*/}
+          {/*          </span>*/}
+          {/*        </div>*/}
+          {/*      </div>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*</div>*/}
 
           {/* unlock purchase */}
-          <div className="sm:flex justify-between items-center mb-5">
-            <div className="sm:flex sm:space-x-3 items-center mb-5 sm:mb-0">
-              <div className="w-[60px] h-[60px] rounded-full flex justify-center items-center bg-light-gray">
-                <svg
-                  width="22"
-                  height="28"
-                  viewBox="0 0 22 28"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M10.9703 27.9959C8.44944 27.9959 5.92858 28.0078 3.40773 27.9919C1.27205 27.9799 0.0338085 26.7656 0.0196917 24.6347C-0.00450854 21.2735 -0.00854192 17.9123 0.0196917 14.5511C0.0378419 12.4521 1.3265 11.2158 3.44806 11.2118C8.42121 11.2019 13.3964 11.2039 18.3695 11.2118C20.604 11.2158 21.8564 12.4641 21.8644 14.6909C21.8745 17.9862 21.8786 21.2815 21.8644 24.5767C21.8544 26.7616 20.6242 27.9819 18.43 27.9939C15.9434 28.0058 13.4569 27.9959 10.9703 27.9959ZM8.53213 17.9722C8.61078 18.1699 8.65918 18.789 8.99193 19.0466C9.89541 19.7476 9.75424 20.6544 9.75626 21.567C9.75626 21.9984 9.62719 22.5057 9.81071 22.8412C10.0467 23.2706 10.5367 23.8358 10.9219 23.8398C11.3131 23.8438 11.8496 23.3026 12.0613 22.8752C12.261 22.4698 12.1319 21.9006 12.1319 21.4053C12.1319 20.5525 12.0936 19.7716 12.868 19.0706C13.6041 18.4036 13.4871 17.1354 12.8841 16.3086C12.2811 15.4817 11.2002 15.1262 10.2019 15.4258C9.25208 15.7114 8.54826 16.6621 8.53213 17.9722Z"
-                    fill="black"
-                  />
-                  <path
-                    d="M18.5315 10.2691C17.3356 10.2691 16.2466 10.2691 15.0345 10.2691C15.0345 9.40439 15.0446 8.58556 15.0325 7.76473C14.9982 5.32022 13.2397 3.47086 10.9467 3.45888C8.64969 3.4469 6.88509 5.28028 6.84476 7.73677C6.83064 8.55959 6.84274 9.38441 6.84274 10.2672C5.64483 10.2672 4.55582 10.2672 3.47286 10.2672C2.71257 5.3322 4.5054 1.66744 8.75456 0.347323C13.5603 -1.14654 18.3984 2.36244 18.5274 7.34932C18.5516 8.30396 18.5315 9.26059 18.5315 10.2691Z"
-                    fill="black"
-                  />
-                </svg>
-              </div>
-              <div>
-                <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
-                  Unlock once purchased
-                </h1>
-                <p className="text-base text-thin-light-gray tracking-wide">
-                  Unlockable content, only revealed by the owner of the item.
-                </p>
-              </div>
-            </div>
-            <div>
-              <SwitchCom value={datas.purchase} handler={unlckPrchesHndlr} />
-            </div>
-          </div>
+          {/*<div className="sm:flex justify-between items-center mb-5">*/}
+          {/*  <div className="sm:flex sm:space-x-3 items-center mb-5 sm:mb-0">*/}
+          {/*    <div className="w-[60px] h-[60px] rounded-full flex justify-center items-center bg-light-gray">*/}
+          {/*      <svg*/}
+          {/*        width="22"*/}
+          {/*        height="28"*/}
+          {/*        viewBox="0 0 22 28"*/}
+          {/*        fill="none"*/}
+          {/*        xmlns="http://www.w3.org/2000/svg"*/}
+          {/*      >*/}
+          {/*        <path*/}
+          {/*          d="M10.9703 27.9959C8.44944 27.9959 5.92858 28.0078 3.40773 27.9919C1.27205 27.9799 0.0338085 26.7656 0.0196917 24.6347C-0.00450854 21.2735 -0.00854192 17.9123 0.0196917 14.5511C0.0378419 12.4521 1.3265 11.2158 3.44806 11.2118C8.42121 11.2019 13.3964 11.2039 18.3695 11.2118C20.604 11.2158 21.8564 12.4641 21.8644 14.6909C21.8745 17.9862 21.8786 21.2815 21.8644 24.5767C21.8544 26.7616 20.6242 27.9819 18.43 27.9939C15.9434 28.0058 13.4569 27.9959 10.9703 27.9959ZM8.53213 17.9722C8.61078 18.1699 8.65918 18.789 8.99193 19.0466C9.89541 19.7476 9.75424 20.6544 9.75626 21.567C9.75626 21.9984 9.62719 22.5057 9.81071 22.8412C10.0467 23.2706 10.5367 23.8358 10.9219 23.8398C11.3131 23.8438 11.8496 23.3026 12.0613 22.8752C12.261 22.4698 12.1319 21.9006 12.1319 21.4053C12.1319 20.5525 12.0936 19.7716 12.868 19.0706C13.6041 18.4036 13.4871 17.1354 12.8841 16.3086C12.2811 15.4817 11.2002 15.1262 10.2019 15.4258C9.25208 15.7114 8.54826 16.6621 8.53213 17.9722Z"*/}
+          {/*          fill="black"*/}
+          {/*        />*/}
+          {/*        <path*/}
+          {/*          d="M18.5315 10.2691C17.3356 10.2691 16.2466 10.2691 15.0345 10.2691C15.0345 9.40439 15.0446 8.58556 15.0325 7.76473C14.9982 5.32022 13.2397 3.47086 10.9467 3.45888C8.64969 3.4469 6.88509 5.28028 6.84476 7.73677C6.83064 8.55959 6.84274 9.38441 6.84274 10.2672C5.64483 10.2672 4.55582 10.2672 3.47286 10.2672C2.71257 5.3322 4.5054 1.66744 8.75456 0.347323C13.5603 -1.14654 18.3984 2.36244 18.5274 7.34932C18.5516 8.30396 18.5315 9.26059 18.5315 10.2691Z"*/}
+          {/*          fill="black"*/}
+          {/*        />*/}
+          {/*      </svg>*/}
+          {/*    </div>*/}
+          {/*    <div>*/}
+          {/*      <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
+          {/*        Unlock once purchased*/}
+          {/*      </h1>*/}
+          {/*      <p className="text-base text-thin-light-gray tracking-wide">*/}
+          {/*        Unlockable content, only revealed by the owner of the item.*/}
+          {/*      </p>*/}
+          {/*    </div>*/}
+          {/*  </div>*/}
+          {/*  <div>*/}
+          {/*    <SwitchCom value={datas.purchase} handler={unlckPrchesHndlr} />*/}
+          {/*  </div>*/}
+          {/*</div>*/}
         </form>
       </div>
     </div>

src/components/UploadProduct/index.jsx

@@ -5,8 +5,13 @@ import ModalCom from "../Helpers/ModalCom";
 import Layout from "../Partials/Layout";
 // import DropFileWidget from "./DropFileWidget";
 import ProductUploadField from "./ProductUploadField";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import usersService from "../../services/UsersService";
 
 export default function UploadProduct() {
+  const apiCall = new usersService()
+  const [requestStatus, setRequestStatus] = useState({loading: false, status: null, message: ''}) // DETERMINES THE STATUS OF UPLOAD
+
   // preview modal
   const [previewProductModal, setPreviewProductModal] = useState(false);
   // cancelUploadModal
@@ -68,10 +73,14 @@ export default function UploadProduct() {
   };
   const fileSelect = useRef(null);
   const fileRef = useRef(null);
-  const [selectedFile, setSelectedFile] = useState("");
+  const [selectedFile, setSelectedFile] = useState('');
+  // const [selectedFile, setSelectedFile] = useState({name: '', size: ''});
   const [img, setImg] = useState(null);
+  const [imgDetails, setImgDetails] = useState('')
   const changeFile = (e, file) => {
     if (e) {
+      setSelectedFile(e.target.files[0].name);
+      setImgDetails(e?.target?.files[0])
       const imgRead = new FileReader();
       imgRead.onload = (event) => {
         setImg(event.target.result);
@@ -79,9 +88,10 @@ export default function UploadProduct() {
       // most importend
       imgRead.readAsDataURL(e.target.files[0]);
     }
-    if (file) {
+    if (file.length) {
       if (file[0].name) {
-        setSelectedFile(file[0].name);
+        setSelectedFile(file?.[0].name);
+        setImgDetails(file?.[0])
         const imgRead = new FileReader();
         imgRead.onload = (event) => {
           setImg(event.target.result);
@@ -92,6 +102,78 @@ export default function UploadProduct() {
     }
   };
 
+  //FUNCTION TO UPLOAD ITEM
+  const uploadItem = () => {
+    let errorArr = []
+    let uploadInfo = { // SUBMITTED DETAILS FROM USER
+      img,
+      itemName,
+      description
+    }
+    //LOOPS THROUGH ITEM DETAILS FOR EMPTINESS
+    for(let info in uploadInfo){
+      if(!uploadInfo[info]){
+        errorArr.push(info)
+      }
+    }
+
+    // TEST TO SEE IF FIELDS ARE EMPTY
+    if(errorArr.length){
+      let message = ''
+      if(errorArr.length == 1 && errorArr.includes('img')){
+        message='Please select file to upload'
+      }else if (errorArr.length == 1 && !errorArr.includes('img')){
+        message='Item name or description cannot be empty'
+      }else if (errorArr.length > 1 && errorArr.includes('img')){
+        message='Please select file to upload & Item name/description cannot be empty'
+      }else {
+        message='Item name/description cannot be empty'
+      }
+      setRequestStatus({loading: false, status: null, message})
+      return setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      },5000)
+    }
+
+    if(imgDetails.size > 2097152){ // CHECKS IF IMAGE SIZE IS MORE THAN "MB"
+      setRequestStatus({loading: false, status: null, message: 'Image must be less than 2MB'})
+      return setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      },5000)
+    }
+    
+    let reqData = { // PAYLOAD FOR API CALL
+      file_name: selectedFile,
+      file_size: imgDetails.size,
+      file_type: imgDetails.type,
+      file_data: img,
+      item_name: itemName,
+      item_description: description,
+      msg_type: 'FILE',
+      // action: 'WRENCHBOARD_RESOURCE_MYFILES',
+      action: 11307
+    }
+    // console.log('TESTING', reqData)
+    
+    //API CALL TO UPLOAD COMES HERE
+    setRequestStatus({loading: true, status: null, message: ''}) // SETS REQUEST LOADING TRUE
+    apiCall.sendFiles(reqData).then(res=>{
+      if(res.status != 200 || res.data.internal_return < 0){
+        return setRequestStatus({loading: false, status: false, message: 'Something went wrong, try again'})
+      }
+      setRequestStatus({loading: false, status: true, message: 'Uploaded successfully'})
+      setImg('')
+      setItemName('')
+      setDescription('')
+    }).catch(error=>{
+      setRequestStatus({loading: false, status: false, message: 'Network error, try again'})
+    }).finally(()=>{
+      setTimeout(()=>{
+        setRequestStatus({loading: false, status: false, message: ''})
+      },5000)
+    })
+  }
+    
   //   drop event
   function handleDrop(e) {
     const dt = e.dataTransfer;
@@ -167,7 +249,7 @@ export default function UploadProduct() {
               {/* heading */}
               <div className="mb-6">
                 <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-                  Create new item
+                {requestStatus.status == null ? 'Create new item' : 'Upload new item'}
                 </h1>
               </div>
               {/**
@@ -178,11 +260,11 @@ export default function UploadProduct() {
                 {/* section-heading */}
                 <div className="section-heading w-full mb-5 lg:px-9 px-4 lg:pt-9 pt-5 ">
                   <h1 className="text-dark-gray dark:text-white lg:text-26 text-18 font-bold tracking-wide mb-1">
-                    Image,Video,Audio or 3D Model
+                    Image,Video,Audio or Documents
                   </h1>
                   <p className="text-thin-light-gray text-base tracking-wide font-medium">
-                    File types suppported: JPG, PNG, GIP, SVG, MP4, MP3, WEBM,
-                    OGG, GLB, GLTF. Max Size : 100 MB
+                    File types supported: JPG, PNG, GIP, SVG, MP4, MP3, WEBM,
+                    OGG, GLB, GLTF
                   </p>
                 </div>
                 <div className="main-content w-full lg:flex justify-between lg:px-9 px-4">
@@ -289,7 +371,8 @@ export default function UploadProduct() {
                   </div>
                 </div>
                 {/* bottom action */}
-                <div className="w-full h-[120px] bg-red border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
+                <div className="w-full h-[120px] bg-red border-t border-light-purple dark:border-[#5356fb29]  flex justify-between items-center">
+                  <p className={`px-4 text-sm sm:text-lg ${requestStatus.status ? 'text-green-500' : 'text-red-500'}  tracking-wide`}>{requestStatus.message && requestStatus.message}</p>
                   <div className="flex sm:space-x-4 space-x-2 sm:mr-9 mr-2">
                     <button
                       type="button"
@@ -298,22 +381,27 @@ export default function UploadProduct() {
                     >
                       <span className="border-b dark:border-[#5356fb29]  border-light-red">
                         {" "}
-                        Cancel
+                        {requestStatus.status == null ? 'Cancel' : 'Return'}
                       </span>
                     </button>
+                    {/*<button*/}
+                    {/*  onClick={() => previewUploadProduct(data)}*/}
+                    {/*  type="button"*/}
+                    {/*  className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center border-gradient  sm:text-18 text-sm rounded-full text-back"*/}
+                    {/*>*/}
+                    {/*  <span className="text-gradient"> Preview</span>*/}
+                    {/*</button>*/}
+                    {requestStatus.loading ?
+                    <LoadingSpinner size='8' color='sky-blue' />
+                    :
                     <button
-                      onClick={() => previewUploadProduct(data)}
-                      type="button"
-                      className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center border-gradient  sm:text-18 text-sm rounded-full text-back"
-                    >
-                      <span className="text-gradient"> Preview</span>
-                    </button>
-                    <Link
-                      to="/"
+                      // to="/"
+                      onClick={uploadItem}
                       className="sm:w-[126px] h-[46px] w-[100px] flex justify-center items-center btn-gradient sm:text-18 text-sm rounded-full text-white"
                     >
-                      Create Now
-                    </Link>
+                      Upload
+                    </button>
+                    }
                   </div>
                 </div>
 

src/index.css

@@ -303,7 +303,7 @@ input[type="text"][dir="rtl"] {
 
 .sidebar-logo.enter {
   transform: scale(1);
-  width: 100%;
+  width: 80%;
 }
 .sidebar-logo {
   transform: scale(0);

src/lib/EmailValidator.js

@@ -0,0 +1,9 @@
+export default function EmailValidator(email) {
+    let regEx = /^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/;
+    if (regEx.test(email) == false) {
+      return false
+    }else{
+      return true
+    }
+}
+  

src/lib/PasswordValidator.js

@@ -0,0 +1,9 @@
+export default function PasswordValidator(password) {
+    const regEx = /^[a-zA-Z0-9!@#$%^&*()_+{}\[\]:;<>,.?~\\/\-='"`|]+$/;
+    if (/[!@#$%^&*()_+{}\[\]:;<>,.?~\\/\-='"`|]/.test(password) == false || /[0-9]/.test(password)==false || /[A-Z]/.test(password)==false || /[a-z]/.test(password)==false) {
+      return false
+    }else{
+      return true
+    }
+}
+