added new section to family acct dashboard

src/App.jsx

@@ -1,22 +1,22 @@
-import Toaster from "./components/Helpers/Toaster";
-import Routers from "./Routers";
-import Default from "./components/Partials/Default";
 import { Navigate, useLocation } from "react-router-dom";
+import Routers from "./Routers";
+import Toaster from "./components/Helpers/Toaster";
+import Default from "./components/Partials/Default";
 
 function App() {
-    const {pathname} = useLocation()
+  const { pathname } = useLocation();
-    return (
+  return (
-        <Default>
+    <Default>
-            <>
+      <>
-            {pathname.startsWith('/@') ?
+        {pathname.startsWith("/@") ? (
-                <Navigate to="/app" replace={true} />
+          <Navigate to="/app" replace={true} />
-            :
+        ) : (
-                <Routers />
+          <Routers />
-            }
+        )}
-                <Toaster />
+        <Toaster />
-            </>
+      </>
-        </Default>
+    </Default>
-    );
+  );
 }
 
 export default App;

src/components/AuthPages/SignUp/index2.jsx

@@ -9,19 +9,21 @@ export default function SignUp() {
   // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
   const country = queryParams.get("cnt")?.toUpperCase();
-  
+
-  const {pathname} = useLocation()
+  const { pathname } = useLocation();
-  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+  const currentPath = country
+    ? `${pathname}?cnt=${country.toLowerCase()}`
+    : pathname; // Determines the new pathname is country query params exist
 
   const [signUpLoading, setSignUpLoading] = useState(false);
   const [checked, setValue] = useState(false);
   // for the catch error
   const [msgError, setMsgError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [countries, setCountries] = useState({loading:true, data:[]});
+  const [countries, setCountries] = useState({ loading: true, data: [] });
 
   const [formData, setFormData] = useState({
-    country: country? country : "",
+    country: country ? country : "",
     first_name: "",
     last_name: "",
     email: "",
@@ -47,22 +49,23 @@ export default function SignUp() {
 
   // Get Country Api
   const getCountryList = useCallback(async () => {
-    
     try {
       const res = await userApi.getSignupCountryData();
       if (res.status === 200 && res.data.internal_return >= 0) {
         const { result_list } = await res.data;
-        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
+        if (country) {
-          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
+          // IF LINK/PATHNAME HAS CNT QUERY VALUE
-          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+          let cnt = result_list.filter((item) => item.code == country); // test to see country passed in query param exist from list of countries supplied by API
-            setFormData(prev => ({...prev, country: ''}))
+          if (!cnt.length) {
-            return setCountries({loading: false, data: result_list});
+            // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData((prev) => ({ ...prev, country: "" }));
+            return setCountries({ loading: false, data: result_list });
           }
-          return setCountries({loading: false, data: cnt});
+          return setCountries({ loading: false, data: cnt });
         }
-        setCountries({loading: false, data:result_list});
+        setCountries({ loading: false, data: result_list });
       } else if (res.data.result !== 100) {
-        setCountries({loading: false, data:[]});
+        setCountries({ loading: false, data: [] });
       }
     } catch (error) {
       throw new Error(error);
@@ -113,9 +116,7 @@ export default function SignUp() {
         if (res.status === 200) {
           const { data } = res;
           if (data && data.acc === "DULPICATE") {
-            setMsgError(
+            setMsgError("Duplicate username. Please try another email.");
-              "Unable to use this username. Please try another username."
-            );
             setSignUpLoading(false);
           }
           if (data && data.status === "1") {
@@ -124,6 +125,11 @@ export default function SignUp() {
               setSignUpLoading(false);
             }, 2000);
           }
+
+          if (data && data.status === "5") {
+            setMsgError("Something went wrong. Please try another email.");
+            setSignUpLoading(false);
+          }
         } else {
           setSignUpLoading(false);
           setMsgError("An error occurred");
@@ -187,7 +193,9 @@ export default function SignUp() {
                   name="country"
                   value={formData.country}
                   inputHandler={handleInputChange}
-                  disable={country && countries?.data?.length <= 1 ? true : false}
+                  disable={
+                    country && countries?.data?.length <= 1 ? true : false
+                  }
                 />
                 <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
                   <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
@@ -339,27 +347,40 @@ export default function SignUp() {
                 {/* APP DOWNLOAD STORE */}
                 <div className="w-full mt-4">
                   <div className="w-full flex justify-center items-center gap-4">
-                      <div className='w-28 lg:w-32'>
+                    <div className="w-28 lg:w-32">
-                          <a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
+                      <a
-                              <i className="fa-brands fa-apple text-3xl"></i>
+                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
-                              <div className="flex flex-col">
+                        target="_blank"
-                                  <span className="text-[11px]">Available on the</span> 
+                        href={process.env.REACT_APP_APPLE_APP}
-                                  <span className="text-[12px] lg:text-base">App Store</span>
+                        rel="noreferrer"
-                              </div>
+                      >
-                          </a>
+                        <i className="fa-brands fa-apple text-3xl"></i>
-                      </div>
+                        <div className="flex flex-col">
-                      <div className='w-28 lg:w-32'>
+                          <span className="text-[11px]">Available on the</span>
-                          <a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                          <span className="text-[12px] lg:text-base">
-                              <i className="fa-brands fa-google-play text-2xl"></i>
+                            App Store
-                              <div className="flex flex-col">
+                          </span>
-                                  <span className="text-[11px]">Available on the</span>
+                        </div>
-                                  <span className="text-[12px] lg:text-base">Google Play</span>
+                      </a>
-                              </div>
-                          </a>
-                      </div>
                     </div>
+                    <div className="w-28 lg:w-32">
+                      <a
+                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                        target="_blank"
+                        href={process.env.REACT_APP_ANDROID_APP}
+                        rel="noreferrer"
+                      >
+                        <i className="fa-brands fa-google-play text-2xl"></i>
+                        <div className="flex flex-col">
+                          <span className="text-[11px]">Available on the</span>
+                          <span className="text-[12px] lg:text-base">
+                            Google Play
+                          </span>
+                        </div>
+                      </a>
+                    </div>
+                  </div>
                 </div>
-
               </div>
             </div>
           </div>
@@ -375,7 +396,7 @@ const SelectOption = ({
   inputHandler,
   value,
   data, // passing the data from parent
-  disable
+  disable,
 }) => {
   return (
     <div className="input-com mb-7">
@@ -389,39 +410,33 @@ const SelectOption = ({
       </div>
       <div>
         <select
-        disabled={disable}
+          disabled={disable}
           name={name}
           id={name}
           className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >
-          {data?.data?.length > 1 ?
+          {data?.data?.length > 1 ? (
             <>
-            <option value={""}>Select your Country</option>
+              <option value={""}>Select your Country</option>
-            {data?.data?.map((item) => (
+              {data?.data?.map((item) => (
-              <option value={item.code} key={item.uid}>
+                <option value={item.code} key={item.uid}>
-                {item.country}
+                  {item.country}
-              </option>
+                </option>
-            ))}
+              ))}
             </>
-            :
+          ) : data?.data?.length == 1 ? (
-            data?.data?.length == 1 ?
             data?.data?.map((item) => (
               <option value={item.code} key={item.uid}>
                 {item.country}
               </option>
             ))
-            :
+          ) : data?.data?.length < 1 && data.loading ? (
-            data?.data?.length < 1 && data.loading ?
+            <option value="">Loading...</option>
-            <option value=''>
+          ) : (
-              Loading...
+            <option value="">No Country Found!</option>
-            </option>
+          )}
-            :
-            <option value=''>
-              No Country Found!
-            </option>
-          }
         </select>
       </div>
     </div>

src/components/AuthPages/VerifyLink/index.jsx

@@ -51,8 +51,7 @@ export default function VerifyLink() {
             localStorage.setItem("member_id", `${data?.member_id}`);
             localStorage.setItem("session_token", `${data?.session}`);
             localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid)
+            localStorage.setItem("uid", data?.uid);
-
 
             navigate("/", { replace: true });
             setLinkLoader(false);
@@ -80,19 +79,19 @@ export default function VerifyLink() {
   };
 
   // for verifying the incoming verification link and render the correct component
-  const verifyEmail = useCallback(async (code) => {
+  const verifyEmail = async (code) => {
     try {
       const verifyRes = await userApi.verifyEmail(code);
       if (verifyRes.status === 200) {
         let { data } = verifyRes;
-        console.log('TESTING VERIFY',data)
+        console.log("TESTING VERIFY", data);
         if (
           data &&
-          data.internal_return >= 0 && 
+          data.internal_return >= 0 &&
-          data.status == 0 && 
+          data.status == 0 &&
-          data.pending_id != '' && 
+          data.pending_id != "" &&
-          data.pending_uid != '' && 
+          data.pending_uid != "" &&
-          data.username != '' &&
+          data.username != "" &&
           data.status_text === "Link Verified"
         ) {
           setPageLoader(false);
@@ -106,12 +105,13 @@ export default function VerifyLink() {
       setLinkSuccess(false);
       throw new Error(error);
     }
-  }, []);
+  };
 
   // delay verify requests by 10000ms
   const debouncedEmail = debounce(verifyEmail, 1000);
 
   useEffect(() => {
+    setEmail("")
     debouncedEmail(token);
   }, []);
 
@@ -171,53 +171,57 @@ const SuccessfulComponent = ({
   handleEmail,
   msgErr,
   loader,
-}) => (
+}) => {
-  <div className="input-area">
+  return (
-    {/* INPUT */}
+    <div className="input-area">
-    <div className="mb-5">
+      {/* INPUT */}
-      <InputCom
+      <div className="mb-5">
-        fieldClass="px-6"
+        <InputCom
-        value={email}
+          fieldClass="px-6"
-        inputHandler={handleEmail}
+          value={email}
-        placeholder="support@mermsemr.com"
+          inputHandler={handleEmail}
-        label="Email"
+          placeholder="support@mermsemr.com"
-        name="email"
+          label="Email"
-        type="email"
+          name="email"
-        iconName="message"
+          type="email"
-      />
+          iconName="message"
-    </div>
+          autoComplete="off"
-    <div className="mb-5">
+        />
-      <InputCom
+      </div>
-        fieldClass="px-6"
+      <div className="mb-5">
-        value={password}
+        <InputCom
-        inputHandler={handlePassword}
+          fieldClass="px-6"
-        placeholder="● ● ● ● ● ●"
+          value={password}
-        label="Password"
+          inputHandler={handlePassword}
-        name="password"
+          placeholder="● ● ● ● ● ●"
-        type="password"
+          label="Password"
-        iconName="password"
+          name="password"
-      />
+          type="password"
-    </div>
+          iconName="password"
-    {msgErr && (
+          autoComplete="off"
-      <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]">
+        />
-        {msgErr}
+      </div>
+      {msgErr && (
+        <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]">
+          {msgErr}
+        </div>
+      )}
+      <div className="signin-area mb-3.5">
+        <button
+          onClick={onSubmit}
+          type="button"
+          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+        >
+          {loader ? (
+            <div className="signup btn-loader"></div>
+          ) : (
+            <span>Continue</span>
+          )}
+        </button>
       </div>
-    )}
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={onSubmit}
-        type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-      >
-        {loader ? (
-          <div className="signup btn-loader"></div>
-        ) : (
-          <span>Continue</span>
-        )}
-      </button>
     </div>
-  </div>
+  );
-);
+};
 
 const ErrorComponent = ({ onClick }) => (
   <div className="input-area">

src/components/AuthPages/VerifyLink/index2.jsx

@@ -51,8 +51,7 @@ export default function VerifyLink() {
             localStorage.setItem("member_id", `${data?.member_id}`);
             localStorage.setItem("session_token", `${data?.session}`);
             localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid)
+            localStorage.setItem("uid", data?.uid);
-
 
             navigate("/", { replace: true });
             setLinkLoader(false);
@@ -85,16 +84,17 @@ export default function VerifyLink() {
       const verifyRes = await userApi.verifyEmail(code);
       if (verifyRes.status === 200) {
         let { data } = verifyRes;
-        console.log('TESTING VERIFY',data)
+        console.log("TESTING VERIFY", data);
         if (
           data &&
-          data.internal_return >= 0 && 
+          data.internal_return >= 0 &&
-          data.status == 0 && 
+          data.status == 0 &&
-          data.pending_id != '' && 
+          data.pending_id != "" &&
-          data.pending_uid != '' && 
+          data.pending_uid != "" &&
-          data.username != '' &&
+          data.username != "" &&
           data.status_text === "Link Verified"
         ) {
+          setEmail(data.username);
           setPageLoader(false);
         } else {
           setPageLoader(false);
@@ -184,6 +184,7 @@ const SuccessfulComponent = ({
         name="email"
         type="email"
         iconName="message"
+        autoComplete="off"
       />
     </div>
     <div className="mb-5">
@@ -196,6 +197,7 @@ const SuccessfulComponent = ({
         name="password"
         type="password"
         iconName="password"
+        autoComplete="off"
       />
     </div>
     {msgErr && (

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

@@ -27,6 +27,7 @@ export default function InputCom({
   direction,
   tabIndex,
   error,
+  autoComplete="on"
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -107,6 +108,7 @@ export default function InputCom({
           readOnly={disable}
           onBlur={blurHandler}
           dir={direction}
+          autoComplete={autoComplete}
         />
         {iconName && (
           <div className="absolute right-6 bottom-3 z-10 flex gap-2">

src/components/Home/FamilyDash.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import ParentWaiting from "../MyOffers/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
+import { Link } from "react-router-dom";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
@@ -11,6 +12,30 @@ export default function FamilyDash({ familyOffers, MyActiveJobList }) {
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
+
+        <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+          {[1,2,3,4,5].map((item, index) => (
+            <Link to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+              <div >
+
+              </div>
+            </Link>
+          ))}
+        </div>
+        
+        <div className="my-4">
+          <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
+          <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
+            {[1,2,3,4,5].map((item, index) => (
+              <Link to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                <div >
+
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+
         {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
           <MyOffersFamilyTable
             familyOffers={familyOffers?.result_list}

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -66,6 +66,8 @@ const initialValues = {
 function AddFundDollars(props) {
   let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
 
+  let [loadingState, setLoadingState] = useState(false)
+
   const apiCall = new usersService();
   let countryWallet = props.walletItem.country;
   const [selectedOption, setSelectedOption] = useState("previous");
@@ -162,10 +164,11 @@ function AddFundDollars(props) {
       }
     }
 
-    props.setConfirmCredit((prev) => ({
+    // props.setConfirmCredit((prev) => ({
-      ...prev,
+    //   ...prev,
-      show: { awaitConfirm: { loader: true } },
+    //   show: { awaitConfirm: { loader: true } },
-    }));
+    // }));
+    setLoadingState(true)
 
     // Extracting card_uid from the previous card details
     const paymentCardValue = prevCardDetails["payment-card"];
@@ -193,6 +196,18 @@ function AddFundDollars(props) {
       if (res.data.internal_return < 0) {
         props.setInputError("An Error Occurred");
         throw new Error("An Error Occurred");
+
+        // use commented code when you when to display pop for failed start credit API
+        // props.setConfirmCredit((prev) => ({
+        //   ...prev,
+        //   show: {
+        //     awaitConfirm: { loader: false, state: false },
+        //     acceptConfirm: { loader: false, state: true },
+        //   },
+        //   data: {internal_return: -1}
+        // }));
+        setLoadingState(false)
+        return
       }
 
       const _response = res.data;
@@ -204,6 +219,7 @@ function AddFundDollars(props) {
       stateData = { ...stateData, ..._response };
 
       setTimeout(() => {
+        setLoadingState(false)
         props.setConfirmCredit({
           show: {
             awaitConfirm: { loader: false, state: true },
@@ -213,6 +229,7 @@ function AddFundDollars(props) {
         });
       }, 1500);
     } catch (error) {
+      setLoadingState(false)
       props.setInputError(error.message);
       setTimeout(() => props.setInputError(""), 5000);
       props.setConfirmCredit((prev) => ({
@@ -582,7 +599,7 @@ function AddFundDollars(props) {
                             type="submit"
                             className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
-                            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+                            {loadingState ? (
                               <LoadingSpinner size="6" color="sky-blue" />
                             ) : (
                               <>
@@ -616,7 +633,7 @@ function AddFundDollars(props) {
             type="button"
             className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+            {loadingState ? (
               <LoadingSpinner size="6" color="sky-blue" />
             ) : (
               <span className="text-white">Continue</span>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -86,6 +86,16 @@ function AddFundPop({
         }));
         setInputError("An Error Occurred");
         setTimeout(() => setInputError(""), 5000);
+
+        // use commented code when you when to display pop for failed start credit API
+        // setConfirmCredit((prev) => ({
+        //   ...prev,
+        //   show: {
+        //     awaitConfirm: { loader: false, state: false },
+        //     acceptConfirm: { loader: false, state: true },
+        //   },
+        //   data: {internal_return: -1}
+        // }));
         return;
       }
 

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -70,7 +70,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                             }`}
                           </span>
                         </div>
-
+                        
+                        {data?.curr_balance &&
                         <div className="flex items-center gap-8">
                           <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                             Wallet Balance
@@ -79,6 +80,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                             {data?.curr_balance * 0.01}
                           </span>
                         </div>
+                        }
 
                         {isSuccess && (
                           <div className="flex items-center gap-8">

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -239,7 +239,8 @@ function ConfirmAddFund({
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
-            acceptConfirm: { loader: false },
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
           },
         }));
         return;
@@ -261,7 +262,8 @@ function ConfirmAddFund({
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
-          acceptConfirm: { loader: false },
+          awaitConfirm: { loader: false, state: false },
+          acceptConfirm: { loader: false, state: true },
         },
       }));
       console.log(error);
@@ -333,7 +335,8 @@ function ConfirmAddFund({
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
-          acceptConfirm: { loader: false },
+          awaitConfirm: { loader: false, state: false },
+          acceptConfirm: { loader: false, state: true },
         },
       }));
       setTimeout(() => onClose, 10000);

src/components/MyWallet/Wallet.jsx

@@ -47,7 +47,7 @@ const WalletRoutes = () => {
         }
         setAllCountries((prev) => ({
           loading: false,
-          data: res.data.result_list,
+          data: res?.data?.result_list,
         }));
       })
       .catch((error) => {

src/components/Partials/Header.jsx

@@ -48,6 +48,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
   // 9308RDR122
 
+
   const handlerBalance = () => {
     setbalanceValue.toggle();
     if (notificationDropdown) {
@@ -238,9 +239,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               </div>
             </button>
             {/* balance */}
-            
+
             {/* My Page Button */}
-            <PageButton />
+            {userDetails.account_type === "FULL" ? <PageButton /> : null}
 
             {/*<div className="lg:hidden block"></div>*/}
             <WalletHeader
@@ -671,28 +672,28 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   );
 }
 
-
 const PageButton = () => {
   return (
-    <Link to="/yourpage" className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4">
+    <Link
-      <div
+      to="/yourpage"
-          className="flex items-center lg:justify-between justify-center w-full h-full"
+      className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4"
-        >
+    >
-          <span className="lg:block hidden w-[25px]">
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="lg:block hidden w-[25px]">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
-          <path
+            <path
-            fillRule="evenodd"
+              fillRule="evenodd"
-            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+              d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
-            fill="#ffffff"
+              fill="#ffffff"
-            className="color000000 svgShape"
+              className="color000000 svgShape"
-          ></path>
+            ></path>
-        </svg>
+          </svg>
-          </span>
+        </span>
-          <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
+        <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
-          <span className="lg:block hidden">
+        <span className="lg:block hidden">
-            {/* <Icons name="deep-plus" /> */}
+          {/* <Icons name="deep-plus" /> */}
-          </span>
+        </span>
-        </div>
+      </div>
     </Link>
-  )
+  );
-}
+};