Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
560897f6f9 | ||
 ameye
|
630a029c6e | ||
|
ameye
|
6e2fdc46d1 | ||
|
victorAnumudu
|
d3b2cddd6c | ||
|
CHIEFSOFT\ameye
|
f6bd70fdca | ||
|
victorAnumudu
|
de3bfa2541 | ||
|
CHIEFSOFT\ameye
|
cd60831f76 | ||
|
ameye
|
71152f7a05 | ||
|
victorAnumudu
|
8cbdb1b8a6 | ||
|
ameye
|
abbf60ad48 | ||
|
Ebube
|
c956befed9 | ||
|
Ebube
|
a5dbeaecbf | ||
|
CHIEFSOFT\ameye
|
0b0b563dda | ||
|
CHIEFSOFT\ameye
|
f8a3e42fe6 | ||
|
CHIEFSOFT\ameye
|
ced88fa497 | ||
|
ameye
|
89e2527ba6 |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
@@ -0,0 +1,79 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
import Icons from "../Helpers/Icons";
|
||||
|
||||
export default function ProductCardStyleTwo({
|
||||
className,
|
||||
datas,
|
||||
hidden = false,
|
||||
}) {
|
||||
// debugger;
|
||||
const [addFavorite, setValue] = useState(datas.whishlisted);
|
||||
const [options, setOption] = useState(false);
|
||||
const favoriteHandler = () => {
|
||||
if (!addFavorite) {
|
||||
setValue(true);
|
||||
toast.success("Added to Favorite List");
|
||||
} else {
|
||||
setValue(false);
|
||||
toast.warn("Remove to Favorite List");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col justify-between w-full h-full">
|
||||
<div className="thumbnail-area w-full">
|
||||
<div
|
||||
className="w-full h-[236px] p-6 rounded-xl overflow-hidden"
|
||||
style={{
|
||||
background: `url(${`https://blog.float.sg/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
|
||||
}}
|
||||
>
|
||||
<div className="product-two-options flex justify-between mb-5 relative">
|
||||
<div className="status">
|
||||
{datas?.isActive && (
|
||||
<span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">
|
||||
Active
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{hidden && (
|
||||
<div className="flex justify-center">
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="details-area">
|
||||
{/* title */}
|
||||
<Link to="/shop-details" className="mb-2.5">
|
||||
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
||||
{datas.post_title}
|
||||
</h1>
|
||||
</Link>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -11,6 +11,7 @@ export default function FamilyManage() {
|
||||
let location = useLocation();
|
||||
let navigate = useNavigate();
|
||||
let accountDetails = location?.state;
|
||||
|
||||
// tab handler
|
||||
const filterHandler = (value) => {
|
||||
setValue(value);
|
||||
|
||||
@@ -152,7 +152,7 @@ function AssignTaskPopout({action, situation, familyDetails}) {
|
||||
onChange={()=>handleActiveTask(item.job_uid, item)}
|
||||
className="w-[15px] h-[15px] cursor-pointer"
|
||||
/>
|
||||
<p className="text-dark-gray tracking-wide">{item?.title}</p>
|
||||
<p className="w-full text-dark-gray tracking-wide">{item?.title}</p>
|
||||
</div>
|
||||
))
|
||||
:
|
||||
|
||||
@@ -14,6 +14,9 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import profile from "../../../assets/images/profile-info-profile.png";
|
||||
import FamilyTasks from "./FamilyTasks";
|
||||
|
||||
import AssignTaskPopout from '../FamilyPopout/AssignTaskPopout'
|
||||
|
||||
|
||||
export default function FamilyManageTabs({
|
||||
className,
|
||||
accountDetails,
|
||||
@@ -50,6 +53,13 @@ export default function FamilyManageTabs({
|
||||
const tabHandler = (value) => {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
let [familyTaskPopout, setFamilyTaskPopout] = useState(false) // DETERMINES WHEN FAMILY ADD TASK POPOUT DISPLAYS
|
||||
|
||||
const familyPopUpHandler = () => { // FUNCTION TO CHANGE THE FAMILY ADD TASK POPOIUT STATE
|
||||
setFamilyTaskPopout(prev => !prev)
|
||||
}
|
||||
|
||||
// For profile uploads
|
||||
const [profileImg, setProfileImg] = useState(profile);
|
||||
// profile img
|
||||
@@ -120,7 +130,7 @@ export default function FamilyManageTabs({
|
||||
className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
>
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg">
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -141,21 +151,31 @@ export default function FamilyManageTabs({
|
||||
</div>
|
||||
<div className="col-span-3 justify-self-end h-full w-full">
|
||||
<div className="flex flex-col w-full">
|
||||
<ul className="flex-[0.1] flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
|
||||
{tabs.map(({ name, id }) => (
|
||||
<li
|
||||
onClick={() => tabHandler(name)}
|
||||
className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
|
||||
tab === name
|
||||
? "text-purple border-r"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
key={id}
|
||||
>
|
||||
<h1>{name}</h1>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="w-full pr-8 flex items-center gap-1">
|
||||
<ul className="flex gap-2 items-center border-b border-b-[#FAFAF] w-full">
|
||||
{tabs.map(({ name, id }) => (
|
||||
<li
|
||||
onClick={() => tabHandler(name)}
|
||||
className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl ${
|
||||
tab === name
|
||||
? "text-purple border-r"
|
||||
: " text-thin-light-gray"
|
||||
}`}
|
||||
key={id}
|
||||
>
|
||||
<h1>{name}</h1>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<button
|
||||
type="button"
|
||||
onClick={familyPopUpHandler}
|
||||
className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Add task
|
||||
{/* {accountDetails?.firstname} */}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-[0.9] lg:min-h-[450px] h-full">
|
||||
{/* Your content here */}
|
||||
{tabs.map(({ name, id }) => {
|
||||
@@ -171,7 +191,7 @@ export default function FamilyManageTabs({
|
||||
className={className}
|
||||
loader={details.familyTasks.loading}
|
||||
familyData={details.familyTasks.data}
|
||||
familyDetails={details.familyDetails.data}
|
||||
accountDetails={accountDetails}
|
||||
/>
|
||||
)}
|
||||
{name === "Account" && (
|
||||
@@ -192,6 +212,15 @@ export default function FamilyManageTabs({
|
||||
</div>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{/* FAMILY ADD TASK POPOUT */}
|
||||
{familyTaskPopout &&
|
||||
<AssignTaskPopout
|
||||
action={familyPopUpHandler}
|
||||
situation={familyTaskPopout}
|
||||
familyDetails={details.familyDetails.data}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -8,18 +8,12 @@ import Icons from "../../Helpers/Icons";
|
||||
import { PriceFormatter } from "../../Helpers/PriceFormatter";
|
||||
import ModalCom from "../../Helpers/ModalCom";
|
||||
import Detail from "../../jobPopout/popoutcomponent/Detail";
|
||||
import AssignTaskPopout from "../FamilyPopout/AssignTaskPopout";
|
||||
|
||||
export default function FamilyTasks({ familyData, familyDetails, className, loader }) {
|
||||
|
||||
export default function FamilyTasks({ familyData, className, loader, accountDetails }) {
|
||||
let navigate = useNavigate();
|
||||
let { pathname } = useLocation();
|
||||
|
||||
let [familyTaskPopout, setFamilyTaskPopout] = useState(false)
|
||||
|
||||
const familyPopUpHandler = () => {
|
||||
setFamilyTaskPopout(prev => !prev)
|
||||
}
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =
|
||||
@@ -43,15 +37,6 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="w-full p-2 my-2 flex justify-end items-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={familyPopUpHandler}
|
||||
className="px-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Add task for {familyDetails?.firstname}
|
||||
</button>
|
||||
</div>
|
||||
{familyData && familyData?.result_list && (
|
||||
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
|
||||
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
||||
@@ -122,9 +107,8 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
|
||||
state: {
|
||||
...value,
|
||||
pathname,
|
||||
dueDate,
|
||||
thePrice,
|
||||
},
|
||||
accountDetails
|
||||
}
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
@@ -158,13 +142,6 @@ export default function FamilyTasks({ familyData, familyDetails, className, load
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{familyTaskPopout &&
|
||||
<AssignTaskPopout
|
||||
action={familyPopUpHandler}
|
||||
situation={familyTaskPopout}
|
||||
familyDetails={familyDetails}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
// export const PriceFormatter = (price, currency, currencyName) => {
|
||||
// const supportedCurrencies = ["USD", "EUR", "GBP"];
|
||||
@@ -17,32 +17,35 @@ import React from 'react'
|
||||
// return `${formatter.format(price)} ${displayCurrencyName}`;
|
||||
// };
|
||||
|
||||
|
||||
export const PriceFormatter = (price='00', currency='', currencyName='') => {
|
||||
export const PriceFormatter = (
|
||||
price = "00",
|
||||
currency = "",
|
||||
currencyName = ""
|
||||
) => {
|
||||
// Convert the number to a string
|
||||
let numStr = String(price);
|
||||
let numStr = String(price);
|
||||
|
||||
// Split the string into integer and decimal parts
|
||||
let parts = numStr.split('.');
|
||||
let integerPart = parts[0];
|
||||
let decimalPart = parts[1] || '';
|
||||
// Split the string into integer and decimal parts
|
||||
let parts = numStr.split(".");
|
||||
let integerPart = parts[0] || "";
|
||||
let decimalPart = parts[1] || "";
|
||||
|
||||
// Add thousands separators to the integer part
|
||||
// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
let formattedInteger = integerPart;
|
||||
// Add thousands separators to the integer part
|
||||
// let formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
let formattedInteger = integerPart;
|
||||
|
||||
// Truncate or pad the decimal part to two decimal points
|
||||
let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, '0');
|
||||
// Truncate or pad the decimal part to two decimal points
|
||||
let formattedDecimal = decimalPart.slice(0, 2).padEnd(2, "0");
|
||||
|
||||
// Combine the formatted integer and decimal parts
|
||||
// let formattedNumber = formattedInteger + '.' + formattedDecimal;
|
||||
// Combine the formatted integer and decimal parts
|
||||
// let formattedNumber = formattedInteger + '.' + formattedDecimal;
|
||||
|
||||
// return formattedNumber;
|
||||
// return formattedNumber;
|
||||
return (
|
||||
<span className='text-sm flex items-center'>
|
||||
<sup>{currency || currencyName || ''}</sup>
|
||||
<span className='px-1 font-bold text-lg'>{formattedInteger}</span>
|
||||
<sup>{formattedDecimal}</sup>
|
||||
<span className="text-sm flex items-center">
|
||||
<sup>{currency || currencyName || ""}</sup>
|
||||
<span className="px-1 font-bold text-lg">{formattedInteger || ""}</span>
|
||||
<sup>{formattedDecimal || ""}</sup>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,7 +3,8 @@ 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";
|
||||
|
||||
|
||||
export default function FamilyDash(props) {
|
||||
@@ -18,7 +19,8 @@ export default function FamilyDash(props) {
|
||||
commonHeadData={props.commonHeadData}
|
||||
/>
|
||||
<FamilyActiveLSlde trending={trending} className="mb-10" />
|
||||
<TopSellerTopBuyerSliderSection className="mb-10" />
|
||||
{/*<TopSellerTopBuyerSliderSection className="mb-10" />*/}
|
||||
<ParentWaiting className="mb-10" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -61,10 +61,10 @@ export default function Hero({ className, bannerList, nextDueTask }) {
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{nextDueTask.next_due.item_code}
|
||||
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">
|
||||
{nextDueTask.next_due.price} Naira
|
||||
{nextDueTask.next_due.price * 0.01} Naira
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||
|
||||
@@ -259,8 +259,13 @@ function ActiveJobs(props) {
|
||||
<button
|
||||
type="button"
|
||||
className="min-w-[45px] h-auto text-[#374557] border border-sky-blue p-1 rounded-full"
|
||||
onClick={() =>
|
||||
navigate(props.details.pathname, { replace: true })
|
||||
onClick={() =>{
|
||||
if(props.details.pathname == '/manage-family'){
|
||||
navigate(props.details.pathname, {state: { ...props.details.accountDetails }}, { replace: true })
|
||||
}else{
|
||||
navigate(props.details.pathname, { replace: true })
|
||||
}
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import activeAidsBanner from "../../assets/images/kids-waiting.jpg";
|
||||
import HeroUser from "../../assets/images/hero-user.png";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
import ParentWaitingTable from "./ParentWaitingTable";
|
||||
|
||||
export default function ParentWaiting({ className }) {
|
||||
const [addFavorite, setValue] = useState(false);
|
||||
const favoriteHandler = () => {
|
||||
if (!addFavorite) {
|
||||
setValue(true);
|
||||
toast.success("Added to Favorite List");
|
||||
} else {
|
||||
setValue(false);
|
||||
toast.warn("Remove to Favorite List");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className={`overview-section w-full ${className || ""}`}>
|
||||
<div>
|
||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white">Waiting for Parent to Get Started...</h1>
|
||||
</div>
|
||||
<div className="overview-section-wrapper lg:flex lg:h-[494px] lg:pace-x-2">
|
||||
<div className="lg:w-[540px] w-full h-full bg-white dark:bg-dark-white rounded-2xl overflow-hidden mb-10">
|
||||
<img
|
||||
src={activeAidsBanner}
|
||||
alt="banner"
|
||||
className="w-full lg:h-full h-[400px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="overview-countdown lg:w-2/5 w-full h-full flex flex-col justify-between lg:pl-11 rounded-2xl bg-white dark:bg-dark-white ">
|
||||
{<ParentWaitingTable />}
|
||||
|
||||
{/* <div className="lg:mb-0 mb-3">*/}
|
||||
{/* <h1 className="text-2xl font-bold text-dark-gray dark:text-white tracking-wide">*/}
|
||||
{/* Lock and Lob x Fiesta Spurs*/}
|
||||
{/* </h1>*/}
|
||||
{/* <span className="text-[18px] font-thin tracking-wide text-dark-gray dark:text-white">*/}
|
||||
{/* ID : 2320382*/}
|
||||
{/*</span>*/}
|
||||
{/* </div>*/}
|
||||
{/* /!* user *!/*/}
|
||||
{/* <div className="flex items-center space-x-3 lg:mb-0 mb-3">*/}
|
||||
{/* <div className="w-14 h-14 flex justify-center items-center rounded-full overflow-hidden">*/}
|
||||
{/* <img src={HeroUser} alt="" />*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="text-xl tracking-wide font-bold antise text-dark-gray dark:text-white">*/}
|
||||
{/* Brokln Simons*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="text-sm tracking-wide text-dark-gray dark:text-white">*/}
|
||||
{/* @broklinslam_75*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,339 @@
|
||||
import React, { useState } from "react";
|
||||
import transaction1 from "../../assets/images/recent-transation-1.png";
|
||||
import transaction2 from "../../assets/images/recent-transation-2.png";
|
||||
import transaction3 from "../../assets/images/recent-transation-3.png";
|
||||
|
||||
export default function ParentWaitingTable() {
|
||||
const transationFilterData = [
|
||||
{
|
||||
id: 1,
|
||||
name: "all",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "send",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "recent",
|
||||
uniqueId: Math.random(),
|
||||
},
|
||||
];
|
||||
const [filterActive, setValue] = useState(transationFilterData[0].id);
|
||||
const filterHander = (value) => {
|
||||
setValue(value);
|
||||
};
|
||||
return (
|
||||
<div className="rounded-2xl bg-white dark:bg-dark-white ">
|
||||
{/* heading */}
|
||||
<div className="heading sm:flex justify-between items-center">
|
||||
|
||||
<div>
|
||||
<ul className="flex space-x-5 items-center">
|
||||
{transationFilterData.map((value) => (
|
||||
<li
|
||||
onClick={() => filterHander(value.id)}
|
||||
key={value.uniqueId}
|
||||
className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase ${
|
||||
filterActive === value.id ? "border-purple text-purple" : ""
|
||||
}`}
|
||||
>
|
||||
{value.name}
|
||||
</li>
|
||||
))}
|
||||
{/* <li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
All
|
||||
</li>
|
||||
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
SEND
|
||||
</li>
|
||||
<li className="text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase">
|
||||
recent
|
||||
</li> */}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/* content */}
|
||||
|
||||
{filterActive === 2 ? (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction3} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Buy Nft art from LTC
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-924.54
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : filterActive === 3 ? (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<div className="content">
|
||||
<ul>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction2} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add BTC from Coinbase Wallet
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-824.78
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction3} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Buy Nft art from LTC
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-red text-right">
|
||||
-924.54
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="content-item py-3 border-b dark:border-[#5356fb29] border-light-purple dark:border-[#5356fb29] hover:border-purple">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center">
|
||||
<div className="icon w-14 h-14 flex justify-center items-center">
|
||||
<img src={transaction1} alt="" className="" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="name">
|
||||
<p className="text-base text-dark-gray dark:text-white font-medium mb-1">
|
||||
Add ETH from MetaMask
|
||||
</p>
|
||||
</div>
|
||||
<div className="time">
|
||||
<p className="text-sm text-thin-light-gray font-medium">
|
||||
22 hours ago
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-dark-gray dark:text-white">
|
||||
$512.44
|
||||
</p>
|
||||
<p className="usd text-base text-light-green text-right">
|
||||
+324.75
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -143,7 +143,10 @@ export default function MyOffersTable({ className, MyActiveOffersList }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setOfferPopout({ show: true, data: value });
|
||||
setOfferPopout({
|
||||
show: true,
|
||||
data: {...value, thePrice },
|
||||
});
|
||||
}}
|
||||
className="w-20 h-11 self-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
|
||||
@@ -4,11 +4,11 @@ import { Link } from "react-router-dom";
|
||||
// import profileBanner from "../../assets/images/profile-cover.png";
|
||||
// import collections from "../../data/collectionplan_data.json"; Should this be cleaned off?
|
||||
// import marketPlace from "../../data/marketplace_data.json";
|
||||
import LoadingSpinner from "../../components/Spinners/LoadingSpinner"
|
||||
import LoadingSpinner from "../../components/Spinners/LoadingSpinner";
|
||||
import products from "../../data/product_data.json";
|
||||
import Layout from "../Partials/Layout";
|
||||
import {
|
||||
ActivitiesTab,
|
||||
ActivitiesTab, BlogTab,
|
||||
CollectionTab,
|
||||
CreatedTab,
|
||||
HiddenProductsTab,
|
||||
@@ -21,13 +21,14 @@ export default function Resources(props) {
|
||||
const ownProducts = products.datas;
|
||||
// Resource Props
|
||||
const __resources = props.MyResourceData;
|
||||
|
||||
//debugger;
|
||||
// Collection Items
|
||||
const collectionProducts = __resources?.collectiondata?.data;
|
||||
const tab_categories = __resources?.tab_categories?.data;
|
||||
const onSaleProducts = __resources?.marketdata?.data;
|
||||
const CreatedSell = __resources?.marketdata?.data;
|
||||
const CreatedBits = __resources?.productdata?.data;
|
||||
const blogItems = __resources?.blogdata?.payload;
|
||||
|
||||
const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
|
||||
|
||||
@@ -35,8 +36,11 @@ export default function Resources(props) {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
console.log("first")
|
||||
|
||||
// Category Components
|
||||
const tabComponents = {
|
||||
blog: <BlogTab blogdata={blogItems} />,
|
||||
onsale: <OnSaleTab products={onSaleProducts} />,
|
||||
owned: <OwnTab products={ownProducts} />,
|
||||
created: (
|
||||
@@ -105,38 +109,35 @@ export default function Resources(props) {
|
||||
<>
|
||||
<Layout>
|
||||
<div className="nft-authprofile-wrapper w-full">
|
||||
{__resources.length == 0 ||
|
||||
Object.keys(__resources).length == 0 ? (
|
||||
{__resources.length == 0 || Object.keys(__resources).length == 0 ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<LoadingSpinner size={16} color="sky-blue" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="content-wrapper-profile-only w-full mb-6">
|
||||
<div className="auth-tab-content relative mb-10">
|
||||
<div className="lg:flex justify-between">
|
||||
<div className="tab-items">
|
||||
<ul className="lg:flex lg:space-x-14 space-x-8">
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="content-wrapper-profile-only w-full mb-6">
|
||||
<div className="auth-tab-content relative mb-10">
|
||||
<div className="lg:flex justify-between">
|
||||
<div className="tab-items">
|
||||
<TabList tabCategories={tab_categories} />
|
||||
</ul>
|
||||
</div>
|
||||
<div style={{ transform: "translateY(-22px)" }}>
|
||||
<Link
|
||||
to="/upload-product"
|
||||
className="btn-gradient lg:flex hidden w-[153px] h-[46px] rounded-full text-white justify-center items-center"
|
||||
>
|
||||
Upload Product
|
||||
</Link>
|
||||
</div>
|
||||
<div style={{ transform: "translateY(-22px)" }}>
|
||||
<Link
|
||||
to="/upload-product"
|
||||
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 className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
|
||||
</div>
|
||||
<div className="hidden lg:block w-full h-[1px] bg-[#DCD5FE] dark:bg-[#5356fb29] absolute top-[42px] left-0"></div>
|
||||
</div>
|
||||
|
||||
<div className="tab-cotainer w-full mb-10">
|
||||
{selectedTabComponent}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tab-cotainer w-full mb-10">
|
||||
{selectedTabComponent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
import ProductCardStyleTwo from "../../Cards/ProductCardStyleTwo";
|
||||
import DataIteration from "../../Helpers/DataIteration";
|
||||
import SearchCom from "../../Helpers/SearchCom";
|
||||
import ResourceBlogCard from "../../Cards/ResourceBlogCard";
|
||||
|
||||
export default function BlogTab({ className, blogdata }) {
|
||||
// debugger;
|
||||
return (
|
||||
<>
|
||||
<div className={`onsale-tab-wrapper w-full ${className || ""}`}>
|
||||
<div className="main-container w-full">
|
||||
<div className="filter-section w-full items-center sm:flex justify-between mb-6">
|
||||
{/* filter-search */}
|
||||
<div className="sm:w-1/2 w-full sm:pr-20 pr-0 mb-5 sm:mb-0">
|
||||
<SearchCom />
|
||||
</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>
|
||||
</div>
|
||||
<div className="content-section w-full-width">
|
||||
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-[30px]">
|
||||
<DataIteration
|
||||
datas={blogdata?.blogdata}
|
||||
startLength={process.env.REACT_APP_ZERO_STATE}
|
||||
endLength={blogdata?.blogdata.length}
|
||||
>
|
||||
{({ datas }) => (
|
||||
<ResourceBlogCard key={datas.id} datas={datas} />
|
||||
)}
|
||||
</DataIteration>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -4,8 +4,10 @@ import CreatedTab from "./CreatedTab";
|
||||
import HiddenProductsTab from "./HiddenProductsTab";
|
||||
import OnSaleTab from "./OnSaleTab";
|
||||
import OwnTab from "./OwnTab";
|
||||
import BlogTab from "./BlogTab";
|
||||
|
||||
export {
|
||||
BlogTab,
|
||||
ActivitiesTab,
|
||||
CollectionTab,
|
||||
CreatedTab,
|
||||
|
||||
@@ -1,64 +1,108 @@
|
||||
import React, {useState} from 'react'
|
||||
import Detail from './popoutcomponent/Detail'
|
||||
import ModalCom from '../Helpers/ModalCom'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import React, { useState } from "react";
|
||||
import Detail from "./popoutcomponent/Detail";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import usersService from '../../services/UsersService'
|
||||
import LoadingSpinner from '../Spinners/LoadingSpinner'
|
||||
import usersService from "../../services/UsersService";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
import { tableReload } from '../../store/TableReloads'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { tableReload } from "../../store/TableReloads";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
function OfferJobPopout({details, onClose, situation}) {
|
||||
const apiUrl = new usersService()
|
||||
const navigate = useNavigate()
|
||||
const dispatch = useDispatch()
|
||||
function OfferJobPopout({ details, onClose, situation }) {
|
||||
const apiUrl = new usersService();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: '', trigger: ''})
|
||||
const [requestStatus, setRequestStatus] = useState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "",
|
||||
});
|
||||
|
||||
//FUNCTION TO HANDLE AN OFFER
|
||||
const handleOffer = ({target:{name}}) => {
|
||||
const handleOffer = ({ target: { name } }) => {
|
||||
const reqData = {
|
||||
// offer_result: 100,
|
||||
offer_code: details.contract,
|
||||
contract: details.contract
|
||||
}
|
||||
contract: details.contract,
|
||||
};
|
||||
|
||||
//logic to determine the button pressed and set reqDate accordingly
|
||||
if(name == 'accept'){
|
||||
setRequestStatus({loading: true, status: false, message: '', trigger: 'offer'})
|
||||
reqData.offer_result = 100
|
||||
if (name == "accept") {
|
||||
setRequestStatus({
|
||||
loading: true,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "offer",
|
||||
});
|
||||
reqData.offer_result = 100;
|
||||
}
|
||||
if(name == 'reject'){
|
||||
setRequestStatus({loading: true, status: false, message: '', trigger: 'reject'})
|
||||
reqData.offer_result = 333
|
||||
if (name == "reject") {
|
||||
setRequestStatus({
|
||||
loading: true,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "reject",
|
||||
});
|
||||
reqData.offer_result = 333;
|
||||
}
|
||||
|
||||
// API CALL
|
||||
apiUrl.offersResponse(reqData).then(response => {
|
||||
if(response.status != 200 || response.data.internal_return < 0){
|
||||
setRequestStatus({loading: false, status: false, message: `Unable to ${name} Offer, try again later`, trigger: ''})
|
||||
return
|
||||
}
|
||||
setRequestStatus({loading: false, status: true, message: `Offer ${name}ed Successfully`, trigger: ''})
|
||||
setTimeout(()=>{
|
||||
onClose()
|
||||
dispatch(tableReload({type:'MYTASKTABLE'}))
|
||||
navigate('/mytask', {replace:true})
|
||||
setRequestStatus({loading: false, status: false, message: '', trigger: ''})
|
||||
},2000)
|
||||
}).catch(error => {
|
||||
setRequestStatus({loading: false, status: false, message: `Opps! An Error Occurred`, trigger: ''})
|
||||
}).finally(()=>{
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading: false, status: false, message: '', trigger: ''})
|
||||
},5000)
|
||||
})
|
||||
}
|
||||
apiUrl
|
||||
.offersResponse(reqData)
|
||||
.then((response) => {
|
||||
if (response.status != 200 || response.data.internal_return < 0) {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: `Unable to ${name} Offer, try again later`,
|
||||
trigger: "",
|
||||
});
|
||||
return;
|
||||
}
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: true,
|
||||
message: `Offer ${name}ed Successfully`,
|
||||
trigger: "",
|
||||
});
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
dispatch(tableReload({ type: "MYTASKTABLE" }));
|
||||
navigate("/mytask", { replace: true });
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "",
|
||||
});
|
||||
}, 2000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: `Opps! An Error Occurred`,
|
||||
trigger: "",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
trigger: "",
|
||||
});
|
||||
}, 5000);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalCom action={onClose} situation={situation}>
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||
<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">
|
||||
Start Task
|
||||
@@ -89,117 +133,123 @@ function OfferJobPopout({details, onClose, situation}) {
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className='md:flex bg-white rounded-lg shadow-lg'>
|
||||
<div className='p-4 w-full md:w-3/4 md:border-r-2'>
|
||||
<p className='text-lg my-5 font-semibold text-slate-900 tracking-wide'>{details.title}</p>
|
||||
|
||||
<div className="md:flex bg-white rounded-lg shadow-lg">
|
||||
<div className="p-4 w-full md:w-3/4 md:border-r-2">
|
||||
<p className="text-lg my-5 font-semibold text-slate-900 tracking-wide">
|
||||
{details.title}
|
||||
</p>
|
||||
|
||||
{/* INPUT SECTION */}
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Date'
|
||||
value={details.offer_added || 'default'}
|
||||
/>
|
||||
<div className="my-2 md:flex">
|
||||
<Detail label="Date" value={details.offer_added || "default"} />
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Description'
|
||||
value={details.description}
|
||||
/>
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail label="Description" value={details.description} />
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Offer Expire'
|
||||
value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Price'
|
||||
value={`${details.price*0.01} ${details.currency}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Duration'
|
||||
value={`${details.timeline_days} day(s)`}
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Offer Expire"
|
||||
value={
|
||||
details.expire &&
|
||||
`${details.expire.split(" ")[0]} ${
|
||||
details.expire.split(" ")[1].split(".")[0]
|
||||
}`
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='my-2 md:flex'>
|
||||
<Detail
|
||||
label='Detail'
|
||||
value={details.job_description || details.description}
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Price"
|
||||
value={details.thePrice}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className='p-4 w-full md:w-1/4 h-full'>
|
||||
<div className='my-3 md:flex md:justify-center'>
|
||||
{requestStatus.loading && requestStatus.trigger == 'offer' ?
|
||||
<LoadingSpinner size={8} color='sky-blue' />
|
||||
:
|
||||
<button
|
||||
name='accept'
|
||||
onClick={handleOffer}
|
||||
disabled={requestStatus.loading}
|
||||
className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
|
||||
Accept Offer
|
||||
</button>
|
||||
}
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Duration"
|
||||
value={`${details.timeline_days} day(s)`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 md:mt-20 md:flex md:justify-center'>
|
||||
{requestStatus.loading && requestStatus.trigger == 'reject' ?
|
||||
<LoadingSpinner size={8} color='sky-blue' />
|
||||
:
|
||||
<button
|
||||
name='reject'
|
||||
|
||||
<div className="my-2 md:flex">
|
||||
<Detail
|
||||
label="Detail"
|
||||
value={details.job_description || details.description}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ACTION SECTION */}
|
||||
<div className="p-4 w-full md:w-1/4 h-full">
|
||||
<div className="my-3 md:flex md:justify-center">
|
||||
{requestStatus.loading && requestStatus.trigger == "offer" ? (
|
||||
<LoadingSpinner size={8} color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
name="accept"
|
||||
onClick={handleOffer}
|
||||
disabled={requestStatus.loading}
|
||||
className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>
|
||||
Reject Offer
|
||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Accept Offer
|
||||
</button>
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-10 md:mt-20 md:flex md:justify-center">
|
||||
{requestStatus.loading && requestStatus.trigger == "reject" ? (
|
||||
<LoadingSpinner size={8} color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
name="reject"
|
||||
onClick={handleOffer}
|
||||
disabled={requestStatus.loading}
|
||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Reject Offer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
{requestStatus.message != "" && (
|
||||
!requestStatus.status ?
|
||||
(<div className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
|
||||
{requestStatus.message}
|
||||
</div>)
|
||||
:
|
||||
requestStatus.status &&
|
||||
(<div className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{requestStatus.message != "" &&
|
||||
(!requestStatus.status ? (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
) : (
|
||||
requestStatus.status && (
|
||||
<div
|
||||
className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)
|
||||
))}
|
||||
{/* End of error or success display */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* close button */}
|
||||
{/* close button */}
|
||||
<div className="p-6 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={requestStatus.loading}
|
||||
type="button"
|
||||
className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Cancel</span>
|
||||
</button>
|
||||
onClick={onClose}
|
||||
disabled={requestStatus.loading}
|
||||
type="button"
|
||||
className="border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Cancel</span>
|
||||
</button>
|
||||
</div>
|
||||
{/* end of close button */}
|
||||
</div>
|
||||
</ModalCom>
|
||||
)
|
||||
</div>
|
||||
</ModalCom>
|
||||
);
|
||||
}
|
||||
|
||||
export default OfferJobPopout
|
||||
export default OfferJobPopout;
|
||||
|
||||
Reference in New Issue
Block a user