Moved Offer Table to Dash
This commit was merged in pull request #233.
This commit is contained in:
@@ -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(() => {
|
||||
navigate(Account == "FULL" ? "/market" : "/", { replace: true });
|
||||
const timeoutId = setTimeout(() => {
|
||||
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 className="p-2 font-bold text-3xl text-white whitespace-nowrap">
|
||||
You currently have "0" task
|
||||
</div>
|
||||
<button
|
||||
className="w-[115px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
onClick={navigateMarket}
|
||||
<div
|
||||
className={`flex flex-col ${
|
||||
accountType ? "items-center" : "items-end"
|
||||
} justify-center gap-9 my-5`}
|
||||
>
|
||||
<div
|
||||
className={`p-2 font-bold text-3xl ${
|
||||
accountType ? "text-white" : "text-purple"
|
||||
} whitespace-nowrap`}
|
||||
>
|
||||
{btnLoader ? (
|
||||
<div className="signup btn-loader"></div>
|
||||
) : (
|
||||
"Find Task"
|
||||
)}
|
||||
</button>
|
||||
You currently have {accountType ? '"0"' : "no"} task
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
!accountType &&
|
||||
"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 && (
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user