Merge branch 'resources-page' of WrenchBoard/Users-Wrench into master

src/components/Home/FamilyDash.jsx

@@ -3,25 +3,22 @@ import datas from "../../data/product_data.json";
 import TopSellerTopBuyerSliderSection from "./TopSellerTopBuyerSliderSection";
 import CommonHead from "../UserHeader/CommonHead";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
-import OverviewSection from "../ActiveBids/OverviewSection";
 import ParentWaiting from "../MyPendingJobs/ParentWaiting";
-
+import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 
 export default function FamilyDash(props) {
+  console.log("PROPS IN FAMILY DASH->", props);
 
-    console.log("PROPS IN FAMILY DASH->",props);
+  const trending = datas.datas;
-
+  return (
-    const trending = datas.datas;
+    <div>
-    return (
+      <div className="home-page-wrapper">
-        <div>
+        <CommonHead commonHeadData={props.commonHeadData} />
-            <div className="home-page-wrapper">
+        <MyOffersFamilyTable MyActiveOffersList={trending} className="mb-10" />
-                <CommonHead
+        <FamilyActiveLSlde trending={trending} className="mb-10" />
-                    commonHeadData={props.commonHeadData}
+        {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
-                />
+        <ParentWaiting className="mb-10" />
-                <FamilyActiveLSlde trending={trending} className="mb-10" />
+      </div>
-                {/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
+    </div>
-                <ParentWaiting className="mb-10" />
+  );
-            </div>
+}
-        </div>
-    );
-}

src/components/Home/index.jsx

@@ -39,14 +39,17 @@ export default function Home(props) {
   return (
     <Layout>
       <div className="home-page-wrapper">
-        {userDetails && userDetails?.account_type == "FAMILY" && (
+        {userDetails && userDetails?.account_type == "FAMILY" ? (
-          <FamilyDash commonHeadData={props.bannerList} />
+          <FamilyDash account={userDetails} commonHeadData={props.bannerList} />
-        )}
+        ) : userDetails && userDetails?.account_type == "FULL" ? (
-        {userDetails && userDetails?.account_type == "FULL" && (
           <FullAccountDash
             nextDueTask={nextDueTask}
             bannerList={props.bannerList}
           />
+        ) : (
+          <div>
+            You are not logged in or your account type is not supported.
+          </div>
         )}
       </div>
     </Layout>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -119,13 +119,6 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
     .replace(/"/g, '"')
     .replace(/&/g, "&");
 
-  console.log("first wait", {
-    manageInt,
-    ManageInterest,
-    MarketDetail,
-    marketMsg,
-  });
-
   return (
     <ModalCom action={onClose} situation={situation} className="edit-popup">
       <div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">

src/components/MyTasks/MyJobTable.jsx

@@ -7,6 +7,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 const noTasksBg = require("../../assets/images/no-task-background.jpg");
+const noFamilyTasksBg = require("../../assets/images/family-no-task-background.jpg");
 
 export default function MyJobTable({ className, ActiveJobList, Account }) {
   let navigate = useNavigate();
@@ -25,14 +26,17 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
     handlePagingFunc(e, setCurrentPage);
   };
 
+  let accountType = Account?.account_type == "FULL"
+
   // To navigate to task
   const [btnLoader, setBtnLoader] = useState(false);
   const navigateMarket = () => {
     setBtnLoader(true);
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
-      navigate(Account == "FULL" ? "/market" : "/", { replace: true });
+      navigate(accountType ? "/market" : "/", { replace: true });
       setBtnLoader(false);
     }, 2500);
+    return () => clearTimeout(timeoutId);
   };
 
   return (
@@ -42,12 +46,12 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
       } bg-cover bg-center`}
       style={{
         backgroundImage: !ActiveJobList?.data.length
-          ? `url('${noTasksBg}')`
+          ? `url('${accountType ? noTasksBg : noFamilyTasksBg}')`
           : "none",
       }}
     >
       {/* Adding this dark overlay in order to see the texts properly */}
-      {!ActiveJobList?.data.length && (
+      {!ActiveJobList?.data.length && accountType && (
         <div class="absolute inset-0 bg-black opacity-30"></div>
       )}
       {ActiveJobList?.data.length > 0 && ActiveJobList.loading && (
@@ -134,20 +138,41 @@ export default function MyJobTable({ className, ActiveJobList, Account }) {
             })}
 
           {ActiveJobList?.data?.length <= 0 && (
-            <div className="flex flex-col items-center justify-center gap-9 my-5">
+            <div
-              <div className="p-2 font-bold text-3xl text-white whitespace-nowrap">
+              className={`flex flex-col ${
-                You currently have "0" task
+                accountType ? "items-center" : "items-end"
-              </div>
+              } justify-center gap-9 my-5`}
-              <button
+            >
-                className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+              <div
-                onClick={navigateMarket}
+                className={`p-2 font-bold text-3xl ${
+                  accountType ? "text-white" : "text-purple"
+                } whitespace-nowrap`}
               >
-                {btnLoader ? (
+                You currently have {accountType ? '"0"' : "no"} task
-                  <div className="signup btn-loader"></div>
+              </div>
-                ) : (
+              <div
-                  "Find Task"
+                className={
-                )}
+                  !accountType &&
-              </button>
+                  "bg-black opacity-30 h-[17rem] p-5 rounded-md -translate-x-20"
+                }
+              >
+                <button
+                  className={`${
+                    !accountType
+                      ? "w-[130px] h-20 bg-[#19a706] text-lg font-semibold rounded-md py-2 px-4"
+                      : "w-[115px] h-11 btn-gradient rounded-full"
+                  } flex justify-center items-center text-base text-white`}
+                  onClick={navigateMarket}
+                >
+                  {btnLoader ? (
+                    <div className="signup btn-loader"></div>
+                  ) : accountType ? (
+                    "Find Task"
+                  ) : (
+                    "Ask Parent For New Task"
+                  )}
+                </button>
+              </div>
             </div>
           )}
           {ActiveJobList?.internal_return < 0 && (

src/components/MyTasks/MyOffersFamilyTable.jsx

@@ -0,0 +1,175 @@
+import { useRef, useState } from "react";
+import Icons from "../Helpers/Icons";
+import SliderCom from "../Helpers/SliderCom";
+
+import OfferJobPopout from "../jobPopout/OfferJobPopout";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+
+export default function MyOffersFamilyTable({ className, MyActiveOffersList }) {
+  let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+  const settings = {
+    arrows: false,
+    dots: false,
+    infinite: MyActiveOffersList?.result_list?.length > 4,
+    autoplay: true,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 426,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 1,
+          infinite: MyActiveOffersList?.result_list?.length > 2,
+        },
+      },
+    ],
+  };
+
+  console.log("YES WE SEE OFFERS", MyActiveOffersList);
+  const sellSlider = useRef(null);
+  //const buySlider = useRef(null);
+  const prevHandler = (value) => {
+    if (value === "sell") {
+      sellSlider.current.slickPrev();
+    }
+    // if (value === "buy") {
+    //     buySlider.current.slickPrev();
+    // }
+  };
+  const nextHandler = (value) => {
+    if (value === "sell") {
+      sellSlider.current.slickNext();
+    }
+    // if (value === "buy") {
+    //     buySlider.current.slickNext();
+    // }
+  };
+
+  if (!MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0) {
+    return ""; // want blank or no appear when no items
+  }
+
+  return (
+    <>
+      <div className={`top-seller-top-buyer-wrapper ${className || ""}`}>
+        <div className="top-seller-top-buyer-wrapper-container">
+          <div className="main-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4">
+            <div className="lg:w-2/2 w-full mb-10 lg:mb-0 sm:p-8 p-4 bg-white dark:bg-dark-white   rounded-2xl section-shadow">
+              <div className="heading flex justify-between items-center mb-4">
+                <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-wide">
+                  You Have Task(s) Waiting For You
+                </h1>
+                <div className="slider-btns flex space-x-4">
+                  <button
+                    onClick={() => nextHandler("sell")}
+                    type="button"
+                    className="transform rotate-180 text-dark-gray dark:text-white dark:opacity-25"
+                  >
+                    <Icons name="arrows" />
+                  </button>
+                  <button
+                    onClick={() => prevHandler("sell")}
+                    type="button"
+                    className="transform rotate-180"
+                  >
+                    <div className="  text-dark-gray dark:text-white">
+                      <svg
+                        width="11"
+                        height="19"
+                        viewBox="0 0 11 19"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M9.09766 1.1499L1.13307 9.11449L9.09766 17.0791"
+                          stroke="url(#paint0_linear_220_23410)"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <defs>
+                          <linearGradient
+                            id="paint0_linear_220_23410"
+                            x1="9.09766"
+                            y1="1.1499"
+                            x2="-4.2474"
+                            y2="7.96749"
+                            gradientUnits="userSpaceOnUse"
+                          >
+                            <stop stopColor="#F539F8" />
+                            <stop offset="0.416763" stopColor="#C342F9" />
+                            <stop offset="1" stopColor="#5356FB" />
+                          </linearGradient>
+                        </defs>
+                      </svg>
+                    </div>
+                  </button>
+                </div>
+              </div>
+              <div className="slider-content">
+                <SliderCom settings={settings} selector={sellSlider}>
+                  {MyActiveOffersList &&
+                    MyActiveOffersList?.result_list?.length > 0 &&
+                    MyActiveOffersList?.result_list?.map((value, index) => {
+                      let thePrice = PriceFormatter(
+                        value?.price * 0.01,
+                        value?.currency_code,
+                        value?.currency
+                      );
+                      return (
+                        <div className="item" key={index}>
+                          <div className="offer-slide-item flex flex-col justify-between items-center">
+                            {/* title */}
+                            <div className="flex justify-center">
+                              <p className="text-xl text-dark-gray dark:text-white font-bold mb-2">
+                                {value.title}
+                              </p>
+                            </div>
+                            {/* username */}
+                            <div className="flex flex-col justify-center my-1">
+                              <p className="text-xs text-thin-light-gray">
+                                {value.timeline_days} Days
+                              </p>
+                              <div className="my-2 flex space-x-1 items-center text-purple text-xs">
+                                <span>{thePrice}</span>
+                              </div>
+                            </div>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setOfferPopout({
+                                  show: true,
+                                  data: {...value, thePrice },
+                                });
+                              }}
+                              className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
+                            >
+                              Start Task
+                            </button>
+                          </div>
+                        </div>
+                      );
+                    })}
+                </SliderCom>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Offer Job Popout */}
+        {offerPopout.show && (
+          <OfferJobPopout
+            details={offerPopout.data}
+            onClose={() => {
+              setOfferPopout({ show: false, data: {} });
+            }}
+            situation={offerPopout.show}
+          />
+        )}
+        {/* End of Offer Job Popout */}
+      </div>
+    </>
+  );
+}

src/components/MyTasks/index.jsx

@@ -11,7 +11,7 @@ export default function MyTasks({
   ActiveJobList,
   commonHeadData,
 }) {
-  const { userDetails: account_type } = useSelector(
+  const { userDetails } = useSelector(
     (state) => state?.userDetails
   );
 
@@ -19,6 +19,11 @@ export default function MyTasks({
   const filterHandler = (value) => {
     setValue(value);
   };
+
+  let accountType = userDetails?.account_type == "FULL"
+
+  console.log("Active something >>", MyActiveOffersList)
+
   return (
     <Layout>
       <CommonHead commonHeadData={commonHeadData} />
@@ -42,14 +47,14 @@ export default function MyTasks({
               ></div>
             </div>
           </div>
-          {MyActiveOffersList &&
+          {MyActiveOffersList && accountType &&
             MyActiveOffersList?.result_list?.length >= 0 && (
               <MyOffersTable
                 MyActiveOffersList={MyActiveOffersList}
                 className="mb-10"
               />
             )}
-          <MyJobTable ActiveJobList={ActiveJobList} Account={account_type} />
+          <MyJobTable ActiveJobList={ActiveJobList} Account={userDetails} />
         </div>
       </div>
     </Layout>

src/components/jobPopout/OfferJobPopout.jsx

@@ -141,7 +141,13 @@ function OfferJobPopout({ details, onClose, situation }) {
 
             {/* INPUT SECTION */}
             <div className="my-2 md:flex">
-              <Detail label="Date" value={details.offer_added || "default"} />
+              <Detail
+                label="Date"
+                value={
+                  (details.offer_added && details.offer_added?.split(" ")[0]) ||
+                  "default"
+                }
+              />
             </div>
 
             <div className="my-2 md:flex">
@@ -151,20 +157,12 @@ function OfferJobPopout({ details, onClose, situation }) {
             <div className="my-2 md:flex">
               <Detail
                 label="Offer Expire"
-                value={
+                value={details.expire && details.expire.split(" ")[0]}
-                  details.expire &&
-                  `${details.expire.split(" ")[0]} ${
-                    details.expire.split(" ")[1].split(".")[0]
-                  }`
-                }
               />
             </div>
 
             <div className="my-2 md:flex">
-              <Detail
+              <Detail label="Price" value={details.thePrice} />
-                label="Price"
-                value={details.thePrice}
-              />
             </div>
 
             <div className="my-2 md:flex">