Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
43f59e8e84 | ||
 ameye
|
ca53101b55 | ||
|
victorAnumudu
|
f3b8190418 | ||
|
ameye
|
6a37da92f0 | ||
|
ameye
|
3d382695cd | ||
|
victorAnumudu
|
7231d97492 |
@@ -13,7 +13,7 @@ function JobsCompleted() {
|
||||
|
||||
const apiCall = new usersService()
|
||||
|
||||
let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
|
||||
let [jobHistory, setJobHistory] = useState({ // FOR PURCHASE HISTORY
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false
|
||||
@@ -22,7 +22,7 @@ function JobsCompleted() {
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
|
||||
const currentReward = jobHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e,setCurrentPage)
|
||||
@@ -31,17 +31,17 @@ function JobsCompleted() {
|
||||
|
||||
//FUNCTION TO GET FAMILY REWARD HISTORY
|
||||
const getJobCompletedHistory = ()=>{
|
||||
// apiCall.getFamilyRewardHx().then((res)=>{
|
||||
// if(res.data.internal_return < 0){ // success but no data
|
||||
// setFamilyRewardHistory(prev => ({...prev, loading: false}))
|
||||
// return
|
||||
// }
|
||||
// setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
// }).catch((error)=>{
|
||||
// setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
|
||||
// })
|
||||
apiCall.getContractHx().then((res)=>{
|
||||
if(res.data.internal_return < 0){ // success but no data
|
||||
setJobHistory(prev => ({...prev, loading: false}))
|
||||
return
|
||||
}
|
||||
setJobHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
|
||||
}).catch((error)=>{
|
||||
setJobHistory(prev => ({...prev, loading: false, error: true}))
|
||||
})
|
||||
setTimeout(()=>{
|
||||
setFamilyRewardHistory(prev => ({...prev, loading: false, error:true}))
|
||||
setJobHistory(prev => ({...prev, loading: false, error:true}))
|
||||
},3000)
|
||||
}
|
||||
|
||||
@@ -51,42 +51,42 @@ function JobsCompleted() {
|
||||
|
||||
return (
|
||||
<div className='flex flex-col justify-between min-h-[500px]'>
|
||||
{familyRewardHistory.loading ?
|
||||
{jobHistory.loading ?
|
||||
<LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
|
||||
: familyRewardHistory.data.length ?
|
||||
: jobHistory.data.length ?
|
||||
<table className="wallet-activity w-full table-auto border-collapse text-left">
|
||||
<thead className='w-full'>
|
||||
<tr className='text-slate-600 dark:text-white'>
|
||||
<th className="p-4"></th>
|
||||
<th className="p-4">Amount</th>
|
||||
<th className="p-4">Date</th>
|
||||
<th className="p-4">Confirmation</th>
|
||||
<th className="p-4">Title</th>
|
||||
<th className="p-4 text-right">Amount</th>
|
||||
{/* <th className="p-4">Date</th>
|
||||
<th className="p-4">Contract</th> */}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{currentReward.map((item, index) => {
|
||||
let date = new Date(item.added).toLocaleDateString()
|
||||
let date = new Date(item?.delivery_date).toLocaleDateString()
|
||||
return (
|
||||
<tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
|
||||
<td className="p-4">
|
||||
<td className="p-4 w-full">
|
||||
<div className='flex items-center gap-2'>
|
||||
<img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
|
||||
{/* <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' /> */}
|
||||
<div className='flex flex-col'>
|
||||
<h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname}</h1>
|
||||
<p className='text-sm'>{item.description}</p>
|
||||
<h1 className='text-lg font-bold line-clamp-1'>{item?.title}</h1>
|
||||
<p className='text-sm line-clamp-2'>{item?.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
|
||||
<td className="p-4">{date}</td>
|
||||
<td className="p-4">{item.confirmation}</td>
|
||||
<td className="p-4 text-right">{AmountTo2DP(item?.price*0.01)} {item?.currency}</td>
|
||||
{/* <td className="p-4">{date}</td>
|
||||
<td className="p-4">{item?.contract}</td> */}
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
:familyRewardHistory.error ?
|
||||
:jobHistory.error ?
|
||||
<div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
|
||||
<span>Opps! an error occurred. Please try again!</span>
|
||||
</div>
|
||||
@@ -97,7 +97,7 @@ function JobsCompleted() {
|
||||
}
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
|
||||
<PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= jobHistory?.data?.length ? true : false} data={jobHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -55,7 +55,7 @@ export const RewardsTable = memo(() => {
|
||||
<thead className='w-full'>
|
||||
<tr className='text-slate-600 dark:text-white'>
|
||||
<th className="p-4"></th>
|
||||
<th className="p-4">Amount</th>
|
||||
<th className="p-4 text-right">Amount</th>
|
||||
<th className="p-4">Date</th>
|
||||
<th className="p-4">Confirmation</th>
|
||||
</tr>
|
||||
@@ -74,7 +74,7 @@ export const RewardsTable = memo(() => {
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
|
||||
<td className="p-4 text-right">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
|
||||
<td className="p-4">{date}</td>
|
||||
<td className="p-4">{item.confirmation}</td>
|
||||
</tr>
|
||||
|
||||
@@ -51,7 +51,7 @@ function AmountSection({ currency, amount, country }) {
|
||||
<div className={`flex items-center gap-8`}>
|
||||
{/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Amount({currency})
|
||||
Amount ({currency})
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedAmount}
|
||||
@@ -91,7 +91,7 @@ function TotalSection({ currency, amount, fee, country }) {
|
||||
return (
|
||||
<div className={`flex items-center gap-8`}>
|
||||
<h1 className="min-w-[150px] job-label">
|
||||
Total
|
||||
Total ({currency})
|
||||
</h1>
|
||||
<span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
|
||||
{formattedTotal}
|
||||
|
||||
@@ -21,8 +21,8 @@ function PurchasesTable({purchase}) {
|
||||
<thead className='w-full'>
|
||||
<tr className='text-slate-600 dark:text-white'>
|
||||
<th className="p-4">Trx.</th>
|
||||
<th className="p-4">Amount</th>
|
||||
<th className="p-4">Fee</th>
|
||||
<th className="p-4 text-right">Amount</th>
|
||||
<th className="p-4 text-right">Fee</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -31,8 +31,8 @@ function PurchasesTable({purchase}) {
|
||||
<td className="p-4">{item.added_date}<br />
|
||||
<b>{item.confirmation} </b>
|
||||
</td>
|
||||
<td className="p-4">{item.amount}</td>
|
||||
<td className="p-4">{item.fee}</td>
|
||||
<td className="p-4 text-right">{item.amount}</td>
|
||||
<td className="p-4 text-right">{item.fee}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@@ -25,7 +25,7 @@ function RecentActivityTable({ payment }) {
|
||||
<tr className="text-slate-600 dark:text-white">
|
||||
<th className="p-4">Date</th>
|
||||
<th className="p-4">Trx.</th>
|
||||
<th className="p-4">Amnt./Fee</th>
|
||||
<th className="p-4 text-right">Amnt./Fee</th>
|
||||
<th className="p-4">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -37,7 +37,7 @@ function RecentActivityTable({ payment }) {
|
||||
className="p-4"
|
||||
dangerouslySetInnerHTML={{ __html: item.recipient }}
|
||||
></td>
|
||||
<td className="p-4">
|
||||
<td className="p-4 text-right">
|
||||
{item.amount}
|
||||
<br />
|
||||
{item.fee}
|
||||
|
||||
@@ -6,10 +6,18 @@ import CommonHead from "../UserHeader/CommonHead";
|
||||
import usersService from "../../services/UsersService";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import OthersInterestedTable from "./OthersInterestedTable";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { tableReload } from "../../store/TableReloads";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
|
||||
export default function ManageInterestOffer(props) {
|
||||
|
||||
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||
|
||||
let walletBal = walletDetails?.data?.filter(wallet => wallet.code == props?.offerDetails?.currency_code) // USER WALLET BALANCE FOR CORRESPONDING TASK CURRENCY
|
||||
|
||||
let clientAdded = new Date(props.offerDetails?.client_added)
|
||||
|
||||
const dispatch = useDispatch()
|
||||
const navigate = useNavigate()
|
||||
const apiCall = new usersService()
|
||||
@@ -183,12 +191,21 @@ export default function ManageInterestOffer(props) {
|
||||
<button
|
||||
name="message"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`px-4 py-1 rounded-t-2xl ${
|
||||
className={`px-4 py-1 rounded-t-2xl flex gap-2 ${
|
||||
tab == "message" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
|
||||
}`}
|
||||
>
|
||||
Messages ({messageList.data.length})
|
||||
</button>
|
||||
<button
|
||||
name="details"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`px-4 py-1 rounded-t-2xl ${
|
||||
tab == "details" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
|
||||
}`}
|
||||
>
|
||||
Delivery Details
|
||||
</button>
|
||||
</div>
|
||||
{/* END OF switch button */}
|
||||
|
||||
@@ -202,7 +219,10 @@ export default function ManageInterestOffer(props) {
|
||||
</div>
|
||||
<div className="my-3 md:my-0 flex items-center gap-1">
|
||||
<span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
|
||||
<span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{clientAdded.getFullYear()}{" - "}
|
||||
{clientAdded.getMonth() < 9 ? '0'+ (clientAdded.getMonth() + 1) : clientAdded.getMonth() + 1}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-3 flex items-center gap-1">
|
||||
@@ -230,7 +250,7 @@ export default function ManageInterestOffer(props) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
: tab == 'message' ?
|
||||
<div className="message-details w-full border-t">
|
||||
<p className="my-1 text-base text-dark-gray dark:text-white tracking-wide">To: <span className="font-bold">{props.offerDetails?.client_name}</span></p>
|
||||
<div className="w-full flex items-center gap-5">
|
||||
@@ -294,14 +314,31 @@ export default function ManageInterestOffer(props) {
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
: tab == 'details' ?
|
||||
<div className="info-details w-full border-t">
|
||||
<h1 className="my-3 text-base font-medium text-dark-gray dark:text-white tracking-wide">{props?.offerDetails?.description}</h1>
|
||||
</div>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{/* END OF Detail section */}
|
||||
|
||||
{/* BUTTON section */}
|
||||
<div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
|
||||
<div className="w-full h-full">
|
||||
{/* Wallet balance and reward */}
|
||||
<div className='mb-4 border-b-2 flex flex-col justify-center items-center gap-4'>
|
||||
<div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Wallet:</p>
|
||||
<span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(walletBal[0]?.amount * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
|
||||
</div>
|
||||
<div className='w-full flex flex-col lg:flex-row justify-center items-center gap-2'>
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">Reward:</p>
|
||||
<span className="font-medium text-dark-gray dark:text-white">{PriceFormatter(props?.offerDetails?.price * 0.01,props?.offerDetails?.currency_code,props?.offerDetails?.currency)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* BUTTON section */}
|
||||
<div className="w-full">
|
||||
<div className="h-full flex sm:flex-col justify-center items-center gap-10">
|
||||
{requestStatus.loading && requestStatus.processType == 'accept' ?
|
||||
<LoadingSpinner color='sky-blue' size='10' />
|
||||
@@ -333,6 +370,7 @@ export default function ManageInterestOffer(props) {
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
{/* END of BUTTON section */}
|
||||
|
||||
{/* ERROR DISPLAY */}
|
||||
<div className="w-full">
|
||||
@@ -357,7 +395,6 @@ export default function ManageInterestOffer(props) {
|
||||
{/* End of error or success display */}
|
||||
</div>
|
||||
</div>
|
||||
{/* END of BUTTON section */}
|
||||
</div>
|
||||
</div>
|
||||
{/* END OF manage offer section */}
|
||||
|
||||
@@ -100,9 +100,21 @@ export default function OffersInterestTable({offerInterestList, className}) {
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className='w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'
|
||||
>
|
||||
View
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 11 20"
|
||||
id="Arrow"
|
||||
className="w-[0.7rem]"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
|
||||
// fill=""
|
||||
className="color000000 svgShape fill-[#fff]"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -101,9 +101,22 @@ export default function OthersInterestTable({othersInterestedList, className}) {
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
className="w-12 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
View
|
||||
{/* View */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 11 20"
|
||||
id="Arrow"
|
||||
className="w-[0.7rem]"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
|
||||
// fill=""
|
||||
className="color000000 svgShape fill-[#fff]"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -570,6 +570,20 @@ class usersService {
|
||||
return this.postAuxEnd("/familyrewardhx", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO GET CONTRACT HISTORY
|
||||
getContractHx() {
|
||||
var postData = {
|
||||
uid: localStorage.getItem("uid"),
|
||||
member_id: localStorage.getItem("member_id"),
|
||||
sessionid: localStorage.getItem("session_token"),
|
||||
offset: 1,
|
||||
limit: 20,
|
||||
// action: apiConst.WRENCHBOARD_FAMILY_TRANSFERHX,
|
||||
action: "",
|
||||
};
|
||||
return this.postAuxEnd("/contracthx", postData);
|
||||
}
|
||||
|
||||
// API FUNCTION TO GET PAYMENT HISTORY
|
||||
getPaymentHx() {
|
||||
var postData = {
|
||||
|
||||
Reference in New Issue
Block a user