WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

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

Browse Source
This commit is contained in:
Olusesan Ameye
2023-06-13 20:02:53 +00:00
committed by Gogs
parent 464969530d 9a2fd54bd5
commit a2a9fb2842
6 changed files with 156 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyActiveJobs/ActiveJobs.jsx
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef, forwardRef } from "react";
import React, { useEffect, useState, useRef } from "react";
import { useSelector } from "react-redux";
import Layout from "../Partials/Layout";
import { useNavigate } from "react-router-dom";
src/components/MyCoupons/CouponPopup.jsx
+48 -7
View File
@@ -1,6 +1,44 @@
import { useMemo, useState } from "react";
import { toast } from "react-toastify";
import usersService from "../../services/UsersService";
const CouponPopup = ({ popUpHandler, data }) => {
const [loader, setLoader] = useState(false);
const apiCall = useMemo(() => new usersService(), []);
const redeemCouponHandler = async () => {
setLoader(true);
try {
const { code, coupon_id } = data;
const reqData = { code_id: Number(coupon_id), code };
const res = await apiCall.getCouponRedeem(reqData);
if (res.statusText === "OK") {
toast.success("Great news! Your coupon has been redeemed.", {
autoClose: 3000,
hideProgressBar: true,
});
}
setTimeout(() => {
popUpHandler();
setLoader(false);
}, 3000);
throw new Response(res);
} catch (error) {
// error &&
// toast.warn("An error occurred while processing your coupon.", {
// autoClose: 3000,
// hideProgressBar: true,
// });
setLoader(false);
console.log(error);
return;
// throw new Error(error);
}
};
return (
<div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
<div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
@@ -45,14 +83,17 @@ const CouponPopup = ({ popUpHandler, data }) => {
<div className="signin-area w-full">
<div className="flex justify-end">
<button
// type="button"
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
type="button"
onClick={redeemCouponHandler}
className="text-white lg:w-[167px] btn-gradient flex justify-center items-center text-lg tracking-wide px-6 py-2 rounded-full"
>
{/* {loader ? (
{loader ? (
<div className="signup btn-loader"></div>
) : (
)} */}
<span className="font-semibold tracking-wider">Redeem Now!</span>
) : (
<span className="font-semibold tracking-wider">
Redeem Now!
</span>
)}
</button>
</div>
</div>
src/components/MyPendingJobs/MyPendingJobTable.jsx
+79 -79
View File
@@ -1,13 +1,10 @@
import React, { useState } from "react";
import dataImage2 from "../../assets/images/data-table-user-2.png";
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";
export default function MyPendingJobTable({ MyJobList, className }) {
const filterCategories = ["All Categories", "Explore", "Featured"];
const [selectedCategory, setCategory] = useState(filterCategories[0]);
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
const [currentPage, setCurrentPage] = useState(0);
@@ -24,26 +21,28 @@ export default function MyPendingJobTable({ MyJobList, className }) {
};
return (
<div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
className || ""
}`}
>
{MyJobList && MyJobList?.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">
<tbody>
{/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom ">*/}
{/* <td className="py-4">All Product</td>*/}
{/* <td className="py-4 text-right">.</td>*/}
{/*</tr>*/}
<div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
className || ""
}`}
>
{MyJobList && MyJobList?.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">
<tbody>
{/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom ">*/}
{/* <td className="py-4">All Product</td>*/}
{/* <td className="py-4 text-right">.</td>*/}
{/*</tr>*/}
{
<>
{MyJobList &&
MyJobList?.result_list &&
MyJobList.result_list.length > 0 ?
currentActiveJobList.map((value, index) => (
{
<>
{MyJobList &&
MyJobList?.result_list &&
MyJobList.result_list.length > 0 ? (
currentActiveJobList.map((value, index) => {
let deliveryDate = value?.expire?.split(" ")[0];
return (
<tr
key={index}
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
@@ -68,31 +67,33 @@ export default function MyPendingJobTable({ MyJobList, className }) {
{value.price * 0.01}
</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration:{" "}
<span className="text-purple">
{" "}
{value.timeline_days} day(s)
<div className="flex items-center gap-4">
<span className="text-sm text-thin-light-gray">
Duration:{" "}
<span className="text-purple">
{" "}
{value.timeline_days} day(s)
</span>
</span>
</span>
<span className="text-sm text-thin-light-gray">
Expire:{" "}
<span className="text-purple">
{" "}
{value.expire}
<span className="text-sm text-thin-light-gray">
Expire:{" "}
<span className="text-purple">
{" "}
{deliveryDate}
</span>
</span>
</span>
<span className="text-sm text-thin-light-gray">
Send to:{" "}
<span className="text-purple">
{" "}
{value.job_to}
<span className="text-sm text-thin-light-gray">
Send to:{" "}
<span className="text-purple">
{" "}
{value.job_to}
</span>
</span>
</span>
</div>
</div>
</div>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
@@ -105,47 +106,46 @@ export default function MyPendingJobTable({ MyJobList, className }) {
</button>
</td>
</tr>
))
:
)
})
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">
No Pending Task!
</td>
<td className="p-2">No Pending Task!</td>
</tr>
}
</>
}
</tbody>
</table>
{/* PAGINATION BUTTON */}
<PaginatedList
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
MyJobList?.result_list.length
? true
: false
)}
</>
}
data={MyJobList?.result_list}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
{/* END OF PAGINATION BUTTON */}
</div>
)}
{/* Active Job Popout */}
{jobPopout.show && (
<PendingJobsPopout
details={jobPopout.data}
onClose={() => {
setJobPopout({ show: false, data: {} });
}}
situation={jobPopout.show}
</tbody>
</table>
{/* PAGINATION BUTTON */}
<PaginatedList
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
MyJobList?.result_list.length
? true
: false
}
data={MyJobList?.result_list}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
)}
{/* End of Active Job Popout */}
</div>
{/* END OF PAGINATION BUTTON */}
</div>
)}
{/* Active Job Popout */}
{jobPopout.show && (
<PendingJobsPopout
details={jobPopout.data}
onClose={() => {
setJobPopout({ show: false, data: {} });
}}
situation={jobPopout.show}
/>
)}
{/* End of Active Job Popout */}
</div>
);
}
src/components/MyTasks/MyJobTable.jsx
+1
View File
@@ -85,6 +85,7 @@ export default function MyJobTable({ className, ActiveJobList }) {
{Number(task?.price) * 0.01}
</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration:
<span className="text-purple ml-1">
src/services/UsersService.js
+3 -3
View File
@@ -455,13 +455,13 @@ class usersService {
return this.postAuxEnd("/stepresetpass", reqData);
}
getCouponRedeem() {
getCouponRedeem(reqData) {
var postData = {
uuid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
page: 0,
limit: 100,
action: 85020,
...reqData
};
return this.postAuxEnd("/couponredeem", postData);
}
src/views/MyPendingJobsPage.jsx
+24 -26
View File
@@ -1,34 +1,32 @@
import React, { useContext,useState, useEffect } from "react";
import React, { useContext, useState, useEffect } from "react";
import usersService from "../services/UsersService";
//import MyJobs from "../components/MyJobs";
import MyActiveJobs from "../components/MyActiveJobs";
import MyPendingJobs from "../components/MyPendingJobs";
import { useSelector } from "react-redux";
export default function MyPendingJobsPage() {
let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
const [MyJobList, setMyJobList] = useState([]);
const api = new usersService();
let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
const [MyJobList, setMyJobList] = useState([]);
const api = new usersService();
const getMyJobList = async () => {
try {
const res = await api.getMyPendingJobList();
setMyJobList(res.data);
} catch (error) {
console.log("Error getting mode");
}
};
useEffect(() => {
getMyJobList();
}, []);
const getMyJobList = async () => {
try {
const res = await api.getMyPendingJobList();
setMyJobList(res.data);
} catch (error) {
console.log("Error getting mode");
}
};
useEffect(() => {
getMyJobList();
}, []);
// debugger;
return (
<>
<MyPendingJobs
MyJobList={MyJobList}
commonHeadData={commonHeadBanner.result_list}
/>
</>
);
// debugger;
return (
<>
<MyPendingJobs
MyJobList={MyJobList}
commonHeadData={commonHeadBanner.result_list}
/>
</>
);
}