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

Merge branch 'master' of https://gitlab.chiefsoft.net/WrenchBoard/Users-Wrench into Move-AddJob-to-Popup

Browse Source
This commit is contained in:
Chukwumdiebube Ojinta
2023-06-17 06:21:49 +01:00
parent ae23195e0e 4ef9b2f20e
commit 800c62d76f
15 changed files with 240 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx
+1 -1
View File
@@ -117,7 +117,7 @@ export default function FamilyManageTabs({
return (
<div
className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
className || ""
}`}
>
src/components/FamilyAcc/Tabs/FamilyTasks.jsx
+35 -31
View File
@@ -5,16 +5,12 @@ import { handlePagingFunc } from "../../Pagination/HandlePagination";
import PaginatedList from "../../Pagination/PaginatedList";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import Icons from "../../Helpers/Icons";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
export default function FamilyTasks({ familyData, className, loader }) {
const filterCategories = ["All Categories", "Explore", "Featured"];
const [selectedCategory, setCategory] = useState(filterCategories[0]);
let navigate = useNavigate();
let { pathname } = useLocation();
let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem =
@@ -24,10 +20,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
indexOfLastItem
);
const handlePagination = (e) => {
handlePagingFunc(e, setCurrentPage);
};
const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
return (
<div
@@ -52,8 +45,14 @@ export default function FamilyTasks({ familyData, className, loader }) {
familyData?.result_list &&
familyData.result_list.length > 0 &&
currentTask.map((value, index) => {
// find due date
const dueDate = value?.delivery_date.split(" ")[0]
// find due date
const dueDate = value?.delivery_date.split(" ")[0];
// the price
let thePrice = PriceFormatter(
value?.price * 0.01,
value?.currency_code,
value?.currency
);
return (
<tr
key={index}
@@ -73,37 +72,42 @@ export default function FamilyTasks({ familyData, className, loader }) {
{value.title}
</h1>
<div className="flex gap-4 items-center">
<span className="text-sm text-thin-light-gray">
Price:{" "}
<span className="text-purple">
{value.price * 0.01}
<span className="text-sm text-thin-light-gray">
Price:{" "}
<span className="text-purple">
{thePrice}
</span>
</span>
</span>
<span className="text-sm text-thin-light-gray">
Duration:{" "}
<span className="text-purple">
{" "}
{value.timeline_days} day(s)
<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">
Due Date:{" "}
<span className="text-purple">
{" "}
{dueDate}
<span className="text-sm text-thin-light-gray">
Due Date:{" "}
<span className="text-purple">
{" "}
{dueDate}
</span>
</span>
</span>
</div>
</div>
</div>
</td>
<td className="text-right py-4 px-2">
<button
type="button"
onClick={() => {
navigate("/manage-active-job", {
state: { ...value, pathname },
state: {
...value,
pathname,
dueDate,
thePrice,
},
});
}}
className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -112,7 +116,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
</button>
</td>
</tr>
)
);
})}
</>
}
src/components/Helpers/Accordion.jsx
+2 -2
View File
@@ -10,7 +10,7 @@ export default function Accordion({ datas }) {
<>
<div className="accordion-item overflow-hidden relative z-[1]">
<div
className="accordion-title-bar flex items-center space-x-3 py-5 border-b border-light-purple dark:border-[#5356fb29] "
className="accordion-title-bar flex items-center space-x-3 py-5 border-b border-light-purple dark:border-[#5356fb29] cursor-pointer"
onClick={accordionHandler}
>
<div className="accordion-title-icon relative">
@@ -36,7 +36,7 @@ export default function Accordion({ datas }) {
<div className="w-[3px] h-auto bg-purple rounded-[28px]"></div>
<div className="flex-1">
<p className="text-base text-thin-light-gray tracking-wide">
{datas.content}
{datas.msg}
</p>
</div>
</div>
src/components/MyCoupons/CouponPopup.jsx
+37 -19
View File
@@ -1,10 +1,17 @@
import { useMemo, useState } from "react";
import { toast } from "react-toastify";
import usersService from "../../services/UsersService";
import { useDispatch } from "react-redux";
import { tableReload } from "../../store/TableReloads";
const CouponPopup = ({ popUpHandler, data }) => {
const [loader, setLoader] = useState(false);
const apiCall = useMemo(() => new usersService(), []);
const [statusMsg, setStatusMsg] = useState({
success: "",
error: "",
});
const dispatch = useDispatch();
const redeemCouponHandler = async () => {
setLoader(true);
@@ -14,28 +21,34 @@ const CouponPopup = ({ popUpHandler, 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,
});
}
if (res.data?.internal_return < 0)
setStatusMsg({ error: "An error occurred" });
else setStatusMsg({ success: res.data?.status_text });
dispatch(tableReload({ type: "COUPONTABLE" }));
setTimeout(() => {
popUpHandler();
setLoader(false);
}, 3000);
throw new Response(res);
}, 10000);
} 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);
if (error?.status !== 200)
setStatusMsg({
error: {
status: true,
msg:
error?.statusText !== ""
? error?.statusText
: "An error occurred",
},
});
throw new Error(error);
} finally {
setStatusMsg({
success: "",
error: "",
});
}
};
@@ -77,9 +90,8 @@ const CouponPopup = ({ popUpHandler, data }) => {
Amount:
</label>
</div>
<div className=" flex-[0.7] max-w-[150px]">{`${data?.amount} Naira`}</div>
<div className=" flex-[0.7] max-w-[150px]">{data?.thePrice}</div>
</div>
<div className="signin-area w-full">
<div className="flex justify-end">
<button
@@ -96,6 +108,12 @@ const CouponPopup = ({ popUpHandler, data }) => {
)}
</button>
</div>
{statusMsg.success && (
<p className="text-sm text-green-500 italic">{statusMsg.success}</p>
)}
{statusMsg.error && (
<p className="text-sm text-red-500 italic">{statusMsg.error}</p>
)}
</div>
</form>
<div className="signin-area w-full px-5 py-4">
src/components/MyCoupons/CouponTable.jsx
+11 -4
View File
@@ -4,6 +4,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
import ModalCom from "../Helpers/ModalCom";
import CouponPopup from "./CouponPopup";
import { useNavigate } from "react-router-dom";
import { PriceFormatter } from "../Helpers/PriceFormatter";
function CouponTable({ coupon }) {
const [currentPage, setCurrentPage] = useState(0);
@@ -38,12 +39,18 @@ function CouponTable({ coupon }) {
</thead>
{coupon.data.length ? (
<tbody>
{currentCoupon.map((item, index) => (
{currentCoupon.map((item, index) => {
let thePrice = PriceFormatter(
item?.amount * 0.01,
item?.currency_code,
item?.currency
);
return(
<tr key={index} className="text-slate-500">
<td className="p-2 cursor-default">
{item.added} <br /> {item.code}
</td>
<td className="p-2 text-center cursor-default">{`${item.amount} Naira`}</td>
<td className="p-2 text-center cursor-default">{thePrice}</td>
<td className="p-2 h-20 flex items-center justify-end">
<button
type="button"
@@ -51,7 +58,7 @@ function CouponTable({ coupon }) {
onClick={() => {
setCouponPopup((prev) => ({
state: !prev.state,
data: item,
data: {...item, thePrice},
}));
}}
>
@@ -59,7 +66,7 @@ function CouponTable({ coupon }) {
</button>
</td>
</tr>
))}
)})}
</tbody>
) : coupon.error ? (
<tbody>
src/components/MyCoupons/MyCoupons.jsx
+8 -6
View File
@@ -1,11 +1,13 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import Layout from "../Partials/Layout";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import CouponTable from "./CouponTable";
import usersService from "../../services/UsersService";
import { useSelector } from "react-redux";
export default function MyCoupons() {
const apiCall = new usersService();
const apiCall = useMemo(() => new usersService(), []);
const {couponTable} = useSelector(state => state.tableReload)
let [couponHistory, setCouponHistory] = useState({
// FOR COUPON HISTORY
loading: true,
@@ -14,7 +16,7 @@ export default function MyCoupons() {
});
//FUNCTION TO GET COUPON HISTORY
const getCouponHistory = () => {
const getCouponHistory = useCallback(() => {
apiCall
.getCouponPending()
.then((res) => {
@@ -32,11 +34,11 @@ export default function MyCoupons() {
.catch((error) => {
setCouponHistory((prev) => ({ ...prev, loading: false, error: true }));
});
};
}, [apiCall]);
useEffect(() => {
getCouponHistory();
}, []);
}, [couponTable]);
return (
<>
@@ -59,7 +61,7 @@ export default function MyCoupons() {
<LoadingSpinner size="16" color="sky-blue" />
</div>
) : (
<CouponTable coupon={couponHistory} />
<CouponTable coupon={couponHistory} />
)}
</div>
</div>
src/components/MyJobs/MyJobTable.jsx
+15 -10
View File
@@ -11,6 +11,7 @@ import usersService from "../../services/UsersService";
import { handlePagingFunc } from "../Pagination/HandlePagination";
import PaginatedList from "../Pagination/PaginatedList";
import EditJobPopOut from "../jobPopout/EditJobPopout";
import { PriceFormatter } from "../Helpers/PriceFormatter";
export default function MyJobTable({ MyJobList, reloadJobList, className }) {
const [myCountry, setCountries] = useState("");
@@ -101,9 +102,15 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
{selectedCategory === "All Categories" ? (
<>
{MyJobList &&
MyJobList?.data?.result_list &&
MyJobList.data?.result_list.length > 0 ?
currentJobList.map((value, index) => (
MyJobList?.data?.result_list &&
MyJobList.data?.result_list.length > 0 ? (
currentJobList.map((value, index) => {
let thePrice = PriceFormatter(
value?.price * 0.01,
value?.currency_code,
value?.currency
);
return(
<tr
key={index}
className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50"
@@ -126,7 +133,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
<span className="text-sm text-thin-light-gray">
Price:{" "}
<span className="text-purple">
{value.price * 0.01}
{thePrice}
</span>
</span>
<span className="text-sm text-thin-light-gray">
@@ -181,14 +188,12 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
</button>
</td>
</tr>
))
:
)})
) : (
<tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
<td className="p-2">
No Jobs Avaliable!
</td>
<td className="p-2">No Jobs Avaliable!</td>
</tr>
}
)}
</>
) : selectedCategory === "Explore" ? (
<></>
src/components/MyJobs/index.jsx
+1 -1
View File
@@ -40,4 +40,4 @@ export default function MyJobs(props) {
{/* End of Add Job List Popout */}
</Layout>
);
}
}
src/components/MyWallet/WalletComponent/CouponTable.jsx
+69 -50
View File
@@ -1,66 +1,85 @@
import React, {useState} from 'react'
import React, { useState } from "react";
import PaginatedList from '../../Pagination/PaginatedList'
import { handlePagingFunc } from '../../Pagination/HandlePagination';
import PaginatedList from "../../Pagination/PaginatedList";
import { handlePagingFunc } from "../../Pagination/HandlePagination";
import { PriceFormatter } from "../../Helpers/PriceFormatter";
function CouponTable({coupon}) {
function CouponTable({ coupon }) {
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem =
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
}
const handlePagination = (e) => {
handlePagingFunc(e, setCurrentPage);
};
return (
<div className='flex flex-col justify-between h-full'>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<div className="flex flex-col justify-between h-full">
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className="border-b-2">
<tr className="text-slate-600">
<th className="p-2">Date</th>
<th className="p-2">Description</th>
<th className="p-2">Amount</th>
<th className="p-2">Active</th>
</tr>
</tr>
</thead>
{coupon.data.length ?
(
<tbody>
{currentCoupon.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-2">{item.added}</td>
<td className="p-2">{item.code}</td>
<td className="p-2">{item.amount}</td>
<td className="p-2">{item.status}</td>
{coupon.data.length ? (
<tbody>
{currentCoupon.map((item, index) => {
let thePrice = PriceFormatter(
item?.price * 0.01,
item?.currency_code,
item?.currency
);
return (
<tr key={index} className="text-slate-500">
<td className="p-2">{item.added}</td>
<td className="p-2">{item.code}</td>
<td className="p-2">{item.amount}</td>
<td className="p-2">{item.status}</td>
</tr>
);
})}
</tbody>
) : coupon.error ? (
<tbody>
<tr className="text-slate-500">
<td className="p-2" colSpan={4}>
Opps! an error occurred. Please try again!
</td>
</tr>
))}
</tbody>
)
:
coupon.error ?
(
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
</tbody>
) : (
<tbody>
<tr className="text-slate-500">
<td className="p-2" colSpan={4}>
No Purchase History Found!
</td>
</tr>
</tbody>
)
:
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>No Purchase History Found!</td>
</tr>
</tbody>
}
</table>
</tbody>
)}
</table>
{/* PAGINATION BUTTON */}
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
{/* END OF PAGINATION BUTTON */}
{/* PAGINATION BUTTON */}
<PaginatedList
onClick={handlePagination}
prev={currentPage == 0 ? true : false}
next={
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
coupon?.data?.length
? true
: false
}
data={coupon?.data}
start={indexOfFirstItem}
stop={indexOfLastItem}
/>
{/* END OF PAGINATION BUTTON */}
</div>
)
);
}
export default CouponTable
export default CouponTable;
src/components/Settings/Tabs/FaqTab.jsx
+9 -5
View File
@@ -1,14 +1,18 @@
import React from "react";
import Accordion from "../../Helpers/Accordion";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
export default function FaqTab({ datas = [] }) {
export default function FaqTab({ datas }) {
return (
<div className="faq-tab w-full">
<div className="accordion-items w-full">
{datas &&
datas.length > 0 &&
datas.map((value) => (
<Accordion key={value.id + Math.random()} datas={value} />
{datas.loading ?
<LoadingSpinner color='sky-blue' size={16} />
:
datas &&
datas?.data?.length > 0 &&
datas.data.map((value, index) => (
<Accordion key={index + Math.random()} datas={value} />
))}
</div>
</div>
src/components/Settings/index.jsx
+3 -5
View File
@@ -1,7 +1,7 @@
import React, { useRef, useState } from "react";
import cover from "../../assets/images/profile-info-cover.png";
import profile from "../../assets/images/profile-info-profile.png";
import faq from "../../data/faq.json";
import Icons from "../Helpers/Icons";
import Layout from "../Partials/Layout";
import ChangePasswordTab from "./Tabs/ChangePasswordTab";
@@ -12,7 +12,7 @@ import PaymentMathodsTab from "./Tabs/PaymentMathodsTab";
import PersonalInfoTab from "./Tabs/PersonalInfoTab";
import TermsConditionTab from "./Tabs/TermsConditionTab";
export default function Settings() {
export default function Settings({faq}) {
const tabs = [
{
id: 1,
@@ -83,8 +83,6 @@ export default function Settings() {
}
};
// fab tab
const faqData = faq.datas;
return (
<>
<Layout>
@@ -259,7 +257,7 @@ export default function Settings() {
)}
{tab === "login_activity" && <LoginActivityTab />}
{tab === "password" && <ChangePasswordTab />}
{tab === "faq" && <FaqTab datas={faqData} />}
{tab === "faq" && <FaqTab datas={faq} />}
{tab === "terms" && <TermsConditionTab />}
</div>
</div>
src/services/UsersService.js
+11 -1
View File
@@ -687,9 +687,19 @@ class usersService {
action: 14015,
...reqData,
};
return this.postAuxEnd("/activejobstatus ", postData);
return this.postAuxEnd("/activejobstatus", postData);
}
// END POINT FOR OWNER JOB ACTION
getFaq() {
var postData = {
uid: localStorage.getItem("uid"),
// member_id: localStorage.getItem("member_id"),
sessionid: localStorage.getItem("session_token"),
};
return this.postAuxEnd("/faq", postData);
}
/*
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username)
- 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(password)
src/store/TableReloads.js
+16 -12
View File
@@ -4,7 +4,8 @@ const initialState = {
jobListTable: false,
pendingListTable: false,
myTaskTable: false,
othersInterestedTable: false
othersInterestedTable: false,
couponTable: false
};
export const tableReloadSlice = createSlice({
@@ -12,21 +13,24 @@ export const tableReloadSlice = createSlice({
initialState,
reducers: {
tableReload: (state, action) => {
switch(action.payload.type){
case 'JOBTABLE':
switch (action.payload.type) {
case "JOBTABLE":
state.jobListTable = !state.jobListTable;
return
case 'PENDINGTABLE' :
return;
case "PENDINGTABLE":
state.pendingListTable = !state.pendingListTable;
return
case 'MYTASKTABLE' :
return;
case "MYTASKTABLE":
state.myTaskTable = !state.myTaskTable;
return
case 'OTHERSINTERESTEDTABLE' :
return;
case "OTHERSINTERESTEDTABLE":
state.othersInterestedTable = !state.othersInterestedTable;
return
return;
case "COUPONTABLE":
state.couponTable = !state.couponTable;
return;
default:
return state
return state;
}
},
},
@@ -34,4 +38,4 @@ export const tableReloadSlice = createSlice({
export const { tableReload } = tableReloadSlice.actions;
export default tableReloadSlice.reducer;
export default tableReloadSlice.reducer;
src/views/MyJobsPage.jsx
+1 -1
View File
@@ -12,4 +12,4 @@ export default function MyJobsPage() {
/>
</>
);
}
}
src/views/SettingsPage.jsx
+21 -2
View File
@@ -1,10 +1,29 @@
import React from "react";
import React,{useState, useEffect} from "react";
import Settings from "../components/Settings";
import usersService from "../services/UsersService";
export default function SettingsPage() {
const apiCall = new usersService()
let [faq, setFaq] = useState({loading:true, data:[]}) // STATE TO HOLD FAQ DATA
//FUNCTION TO GET FAQ
const getFaq = () => {
apiCall.getFaq().then(res => {
setFaq({loading:false, data:res.data.result_list})
}).catch(err => {
setFaq({loading:false, data:[]})
console.log('Error', err)
})
}
useEffect(()=>{
getFaq()
},[])
return (
<>
<Settings />
<Settings faq={faq} />
</>
);
}