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

added the redeem coupon api

Browse Source
This commit was merged in pull request #167.
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-13 20:49:29 +01:00
parent d7dbacc69e
commit 9a2fd54bd5
5 changed files with 120 additions and 118 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
+15 -12
View File
@@ -8,30 +8,33 @@ const CouponPopup = ({ popUpHandler, data }) => {
const redeemCouponHandler = async () => { const redeemCouponHandler = async () => {
setLoader(true); setLoader(true);
try { try {
const { code, coupon_id } = data; const { code, coupon_id } = data;
const reqData = { code_id: Number(coupon_id), code }; const reqData = { code_id: Number(coupon_id), code };
const res = await apiCall.getCouponRedeem(reqData); const res = await apiCall.getCouponRedeem(reqData);
if(res.statusText === "OK") { if (res.statusText === "OK") {
toast.success("Great news! Your coupon has been redeemed.", { toast.success("Great news! Your coupon has been redeemed.", {
autoClose: 3000, autoClose: 3000,
hideProgressBar: true, hideProgressBar: true,
}); });
} }
popUpHandler(); setTimeout(() => {
setLoader(false); popUpHandler();
setLoader(false);
}, 3000);
throw new Response(res); throw new Response(res);
} catch (error) { } catch (error) {
error && // error &&
toast.warn("An error occurred while processing your coupon.", { // toast.warn("An error occurred while processing your coupon.", {
autoClose: 3000, // autoClose: 3000,
hideProgressBar: true, // hideProgressBar: true,
}); // });
setLoader(false); setLoader(false);
console.log(error) console.log(error);
return;
// throw new Error(error); // throw new Error(error);
} }
}; };
@@ -82,7 +85,7 @@ const CouponPopup = ({ popUpHandler, data }) => {
<button <button
type="button" type="button"
onClick={redeemCouponHandler} onClick={redeemCouponHandler}
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full" 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>
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/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}
/> />
</> </>
); );
} }