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 { useSelector } from "react-redux";
import Layout from "../Partials/Layout"; import Layout from "../Partials/Layout";
import { useNavigate } from "react-router-dom"; 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 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 ( 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-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"> <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="signin-area w-full">
<div className="flex justify-end"> <div className="flex justify-end">
<button <button
// type="button" type="button"
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full" 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> <div className="signup btn-loader"></div>
) : ( ) : (
)} */} <span className="font-semibold tracking-wider">
<span className="font-semibold tracking-wider">Redeem Now!</span> Redeem Now!
</span>
)}
</button> </button>
</div> </div>
</div> </div>
src/components/MyPendingJobs/MyPendingJobTable.jsx
+79 -79
View File
@@ -1,13 +1,10 @@
import React, { useState } from "react"; import React, { useState } from "react";
import dataImage2 from "../../assets/images/data-table-user-2.png"; import dataImage2 from "../../assets/images/data-table-user-2.png";
import PendingJobsPopout from "../jobPopout/PendingJobsPopout"; import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
import { handlePagingFunc } from "../Pagination/HandlePagination"; import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList"; import PaginatedList from "../Pagination/PaginatedList";
export default function MyPendingJobTable({ MyJobList, className }) { 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 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); const [currentPage, setCurrentPage] = useState(0);
@@ -24,26 +21,28 @@ export default function MyPendingJobTable({ MyJobList, className }) {
}; };
return ( return (
<div <div
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${ className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
className || "" className || ""
}`} }`}
> >
{MyJobList && MyJobList?.result_list && ( {MyJobList && MyJobList?.result_list && (
<div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full"> <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"> <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody> <tbody>
{/*<tr className="text-base text-thin-light-gray border-b dark:border-[#5356fb29] default-border-b dark:border-[#5356fb29] ottom ">*/} {/*<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">All Product</td>*/}
{/* <td className="py-4 text-right">.</td>*/} {/* <td className="py-4 text-right">.</td>*/}
{/*</tr>*/} {/*</tr>*/}
{ {
<> <>
{MyJobList && {MyJobList &&
MyJobList?.result_list && MyJobList?.result_list &&
MyJobList.result_list.length > 0 ? MyJobList.result_list.length > 0 ? (
currentActiveJobList.map((value, index) => ( currentActiveJobList.map((value, index) => {
let deliveryDate = value?.expire?.split(" ")[0];
return (
<tr <tr
key={index} key={index}
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50" 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} {value.price * 0.01}
</span> </span>
</span> </span>
<span className="text-sm text-thin-light-gray"> <div className="flex items-center gap-4">
Duration:{" "} <span className="text-sm text-thin-light-gray">
<span className="text-purple"> Duration:{" "}
{" "} <span className="text-purple">
{value.timeline_days} day(s) {" "}
{value.timeline_days} day(s)
</span>
</span> </span>
</span> <span className="text-sm text-thin-light-gray">
<span className="text-sm text-thin-light-gray"> Expire:{" "}
Expire:{" "} <span className="text-purple">
<span className="text-purple"> {" "}
{" "} {deliveryDate}
{value.expire} </span>
</span> </span>
</span> <span className="text-sm text-thin-light-gray">
<span className="text-sm text-thin-light-gray"> Send to:{" "}
Send to:{" "} <span className="text-purple">
<span className="text-purple"> {" "}
{" "} {value.job_to}
{value.job_to} </span>
</span> </span>
</span> </div>
</div> </div>
</div> </div>
</td> </td>
<td className="text-right py-4 px-2"> <td className="text-right py-4 px-2">
<button <button
type="button" type="button"
@@ -105,47 +106,46 @@ export default function MyPendingJobTable({ MyJobList, className }) {
</button> </button>
</td> </td>
</tr> </tr>
)) )
: })
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap"> <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2"> <td className="p-2">No Pending Task!</td>
No Pending Task!
</td>
</tr> </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} </tbody>
start={indexOfFirstItem} </table>
stop={indexOfLastItem} {/* PAGINATION BUTTON */}
/> <PaginatedList
{/* END OF PAGINATION BUTTON */} onClick={handlePagination}
</div> prev={currentPage == 0 ? true : false}
)} next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
{/* Active Job Popout */} MyJobList?.result_list.length
{jobPopout.show && ( ? true
<PendingJobsPopout : false
details={jobPopout.data} }
onClose={() => { data={MyJobList?.result_list}
setJobPopout({ show: false, data: {} }); start={indexOfFirstItem}
}} stop={indexOfLastItem}
situation={jobPopout.show}
/> />
)} {/* END OF PAGINATION BUTTON */}
{/* End of Active Job Popout */} </div>
</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} {Number(task?.price) * 0.01}
</span> </span>
</span> </span>
<span className="text-sm text-thin-light-gray"> <span className="text-sm text-thin-light-gray">
Duration: Duration:
<span className="text-purple ml-1"> <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); return this.postAuxEnd("/stepresetpass", reqData);
} }
getCouponRedeem() { getCouponRedeem(reqData) {
var postData = { var postData = {
uuid: localStorage.getItem("uid"), uuid: localStorage.getItem("uid"),
member_id: localStorage.getItem("member_id"), member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"), sessionid: localStorage.getItem("session_token"),
page: 0, action: 85020,
limit: 100, ...reqData
}; };
return this.postAuxEnd("/couponredeem", postData); 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 usersService from "../services/UsersService";
//import MyJobs from "../components/MyJobs";
import MyActiveJobs from "../components/MyActiveJobs";
import MyPendingJobs from "../components/MyPendingJobs"; import MyPendingJobs from "../components/MyPendingJobs";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
export default function MyPendingJobsPage() { export default function MyPendingJobsPage() {
let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
const [MyJobList, setMyJobList] = useState([]); const [MyJobList, setMyJobList] = useState([]);
const api = new usersService(); const api = new usersService();
const getMyJobList = async () => { const getMyJobList = async () => {
try { try {
const res = await api.getMyPendingJobList(); const res = await api.getMyPendingJobList();
setMyJobList(res.data); setMyJobList(res.data);
} catch (error) { } catch (error) {
console.log("Error getting mode"); console.log("Error getting mode");
} }
}; };
useEffect(() => { useEffect(() => {
getMyJobList(); getMyJobList();
}, []); }, []);
// debugger; // debugger;
return ( return (
<> <>
<MyPendingJobs <MyPendingJobs
MyJobList={MyJobList} MyJobList={MyJobList}
commonHeadData={commonHeadBanner.result_list} commonHeadData={commonHeadBanner.result_list}
/> />
</> </>
); );
} }