Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 victorAnumudu
|
2c11a0755d | ||
 ameye
|
f4ed892c5c | ||
|
ameye
|
30403f27c5 | ||
|
victorAnumudu
|
cf2df7529d | ||
|
Ebube
|
b3695324b3 | ||
|
ameye
|
cf8f32ed64 |
+3
-2
@@ -64,6 +64,7 @@ import FamAIQuestionPage from "./views/FamAIQuestionPage"
|
||||
import FamMyFilesPage from "./views/FamMyFilesPage"
|
||||
import FamWorkInProgressPage from "./views/FamWorkInProgressPage";
|
||||
import MyPastDueTasksPage from "./views/MyPastDueTasksPage";
|
||||
import FamilyWalletPage from "./views/FamilyWalletPage";
|
||||
|
||||
export default function Routers() {
|
||||
return (
|
||||
@@ -124,13 +125,13 @@ export default function Routers() {
|
||||
<Route exact path="/notification" element={<Notification />} />
|
||||
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
||||
<Route exact path="/shop-details" element={<ShopDetailsPage />} />
|
||||
<Route exact path="/my-wallet" element={<MyWalletPage />} />
|
||||
<Route exact path="/my-collection" element={<MyCollection />} />*/}
|
||||
<Route exact path="/my-collection" element={<MyCollection />} />*/}
|
||||
<Route exact path="/reminders" element={<RemindersPage />} />
|
||||
<Route exact path="/tracking" element={<TrackingPage />} />
|
||||
<Route exact path="/calendar" element={<CalendarPage />} />
|
||||
<Route exact path="/resources" element={<ResourcePage />} />
|
||||
<Route exact path="/my-wallet/*" element={<MyWalletPage />} />
|
||||
<Route exact path="/family-wallet" element={<FamilyWalletPage />} />
|
||||
<Route exact path="/my-coupon" element={<MyCouponPage />} />
|
||||
<Route exact path="/notification" element={<Notification />} />
|
||||
<Route exact path="/market-place" element={<MarketPlacePage />} />
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
// import HomeSliders from "./HomeSliders";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
@@ -41,39 +40,6 @@ export default function FamilyParentDashboard({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* countdown */}
|
||||
{nextDueTask?.next_due &&
|
||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Current Task
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">
|
||||
{nextDueTask.next_due.price * 0.01} Naira
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Next due in
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||
</p>
|
||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
// import HomeSliders from "./HomeSliders";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
@@ -38,38 +37,6 @@ export default function HomeDashboard({ className, bannerList, nextDueTask }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* countdown */}
|
||||
{nextDueTask?.next_due &&
|
||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Current Task
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">
|
||||
{nextDueTask.next_due.price * 0.01} Naira
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Next due in
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||
</p>
|
||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
// import HomeSliders from "./HomeSliders";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
@@ -42,38 +41,6 @@ export default function JobOwnerDashboard({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* countdown */}
|
||||
{nextDueTask?.next_due &&
|
||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Current Task
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">
|
||||
{nextDueTask.next_due.price * 0.01} Naira
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Next due in
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||
</p>
|
||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import heroBg from "../../assets/images/bg-sky-blue.jpg"; //hero-bg.svg";
|
||||
import heroUser from "../../assets/images/hero-user.png";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
// import HomeSliders from "./HomeSliders";
|
||||
import { useSelector } from "react-redux";
|
||||
import HomeSliders from "../Home/HomeSliders";
|
||||
|
||||
export default function WorkerDashboard({ className, bannerList, nextDueTask }) {
|
||||
export default function WorkerDashboard({
|
||||
className,
|
||||
bannerList,
|
||||
nextDueTask,
|
||||
}) {
|
||||
const settings = {
|
||||
autoplay: true,
|
||||
dots: true,
|
||||
@@ -57,32 +59,37 @@ export default function WorkerDashboard({ className, bannerList, nextDueTask })
|
||||
</div>
|
||||
</div>
|
||||
{/* countdown */}
|
||||
{nextDueTask?.next_due && Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">Current Task</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{(nextDueTask.next_due.item_code).substr(0,4)+'...'}
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">
|
||||
{nextDueTask.next_due.price * 0.01} Naira
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">Next due in</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||
</p>
|
||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
{nextDueTask?.next_due &&
|
||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Current Task
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">
|
||||
{nextDueTask.next_due.price * 0.01} Naira
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Next due in
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||
</p>
|
||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{/* action */}
|
||||
<div className="flex lg:space-x-3 space-x-1 items-center">
|
||||
<Link to="/mytask" className="text-white text-base">
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from "react";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
// import HomeSliders from "./HomeSliders";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
@@ -41,39 +40,6 @@ export default function WorkerDashboard({
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* countdown */}
|
||||
{nextDueTask?.next_due &&
|
||||
Object.keys(nextDueTask.next_due)?.length != 0 && (
|
||||
<div className="w-full h-32 flex justify-evenly items-center sm:p-6 p-1 rounded-2xl border back-dark1 border-white-opacity">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Current Task
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{nextDueTask.next_due.item_code.substr(0, 4) + "..."}
|
||||
</p>
|
||||
<p className="text-base text-white tracking-wide">
|
||||
{nextDueTask.next_due.price * 0.01} Naira
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-white-opacity"></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-base text-white tracking-wide">
|
||||
Next due in
|
||||
</p>
|
||||
<p className="lg:text-2xl text-lg font-bold tracking-wide text-white">
|
||||
{/* <CountDown lastDate="2023-04-26 4:00:00" /> */}
|
||||
<CountDown lastDate={nextDueTask.next_due.due_date} />
|
||||
</p>
|
||||
<div className="text-base text-white tracking-wide flex gap-[23px]">
|
||||
<span>Hrs</span>
|
||||
<span>Min</span>
|
||||
<span>Sec</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span className="text-base font-thin tracking-wide text-white flex items-end">
|
||||
Last Login : {loginDate}
|
||||
</span>
|
||||
|
||||
@@ -14,6 +14,7 @@ export default function InputCom({
|
||||
forgotPassword,
|
||||
parentClass,
|
||||
labelClass,
|
||||
labalClass,
|
||||
inputClass,
|
||||
fieldClass,
|
||||
onClick,
|
||||
@@ -53,7 +54,7 @@ export default function InputCom({
|
||||
<div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
|
||||
{label && (
|
||||
<label
|
||||
className="input-label text-[#181c32] text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
|
||||
className={`input-label text-[#181c32] text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1 ${labalClass}`}
|
||||
htmlFor={name}
|
||||
>
|
||||
{label}
|
||||
|
||||
@@ -42,14 +42,16 @@ export default function FamilyDash({ MyActiveJobList=[], serverImg }) {
|
||||
<div>
|
||||
<div className="home-page-wrapper">
|
||||
{/* Header */}
|
||||
<div className="text-white mb-4 p-2 w-full rounded-xl bg-sky-blue place-content-center">
|
||||
<div className="w-full flex flex-wrap gap-x-4">
|
||||
<p className="text-lg font-normal leading-5">Welcome</p>
|
||||
<div className="">
|
||||
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
|
||||
<div className="text-white mb-4 min-h-[3rem] px-2 w-full flex justify-between items-center rounded-xl bg-family-header-bg">
|
||||
<div className="w-full">
|
||||
<div className="w-full flex flex-wrap gap-x-4 ">
|
||||
<p className="text-lg font-normal leading-5">Welcome</p>
|
||||
<div className="">
|
||||
<h1 className="text-lg font-normal leading-5">{`${userDetails?.firstname} ${userDetails?.lastname}`}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full text-sm flex justify-end items-end">
|
||||
<div className="py-1 w-full text-sm text-right self-end">
|
||||
<p className="leading-4">Last Login: {`${userDetails?.last_login.split(' ')[0]}`}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function ActiveJobMessage({ activeJobMesList }) {
|
||||
|
||||
return (
|
||||
<div className='flex flex-col justify-between'>
|
||||
<div className="w-full min-h-[450px] max-h-[450px] overflow-y-scroll">
|
||||
<div className="w-full h-full min-h-[400px] max-h-[400px] overflow-y-auto">
|
||||
<table className="wallet-activity w-full table-auto border-collapse text-left">
|
||||
<thead className='border-b-2'>
|
||||
<tr className='text-slate-600'>
|
||||
|
||||
@@ -286,7 +286,7 @@ function ActiveJobs(props) {
|
||||
<path d="M19 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H19v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-[22px] font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
<h1 className="text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
{props.details?.title && props.details.title}
|
||||
</h1>
|
||||
</div>
|
||||
@@ -421,7 +421,7 @@ function ActiveJobs(props) {
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div className="p-4 w-full h-[300px] text-base text-slate-600 border border-slate-300">
|
||||
<div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300">
|
||||
<div className="files">
|
||||
<label
|
||||
htmlFor="file"
|
||||
@@ -535,8 +535,15 @@ function ActiveJobs(props) {
|
||||
{/* MESSAGE SECTION */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="flex justify-between items-center gap-5">
|
||||
<p className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
|
||||
Message
|
||||
<p className="w-full text-lg font-bold text-dark-gray dark:text-white tracking-wide flex items-center gap-2">
|
||||
<span>Message</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={popUpHandler}
|
||||
className="text-[12px] tracking-wider text-emerald-600 dark:text-emerald-300"
|
||||
>
|
||||
View all
|
||||
</button>
|
||||
</p>
|
||||
{/* <button
|
||||
type="button"
|
||||
|
||||
@@ -13,13 +13,6 @@ function CurrentJobAction() {
|
||||
<div>
|
||||
Waiting for the completion message from the client before you can approve.
|
||||
</div>
|
||||
{/*<div className="flex flex-col flex-[0.9]"> </div>*/}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td className="text-right py-4 px-2">
|
||||
<div className="flex justify-center items-center">
|
||||
.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
import React, { Suspense, lazy, useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import usersService from "../../services/UsersService";
|
||||
import Layout from "../Partials/Layout";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import CustomBreadcrumb from "../Breadcrumb/CustomBreadcrumb";
|
||||
const FamilyWalletBox = lazy(() => import("./FamilyWalletBox"));
|
||||
|
||||
const FamilyWallet = () => {
|
||||
const apiCall = new usersService();
|
||||
const { walletDetails } = useSelector((state) => state?.walletDetails); // WALLET STORE
|
||||
const { walletTable } = useSelector((state) => state.tableReload);
|
||||
|
||||
const [paymentHistory, setPaymentHistory] = useState({
|
||||
loading: true,
|
||||
data: [],
|
||||
});
|
||||
|
||||
const [allCountries, setAllCountries] = useState({
|
||||
// STATE TO HOLD LIST OF COUNTRIES
|
||||
loading: true,
|
||||
data: [],
|
||||
});
|
||||
|
||||
const getPaymentHistory = () => {
|
||||
apiCall
|
||||
.getPaymentHx()
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setPaymentHistory({ loading: false, data: [] });
|
||||
} else {
|
||||
setPaymentHistory({ loading: false, data: res.data?.result_list });
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setPaymentHistory({ loading: false, data: [] });
|
||||
});
|
||||
};
|
||||
|
||||
// FUNCTION TO GET COUNTRIES
|
||||
const getCountry = () => {
|
||||
apiCall
|
||||
.getSignupCountryData()
|
||||
.then((res) => {
|
||||
if (res?.data?.internal_return < 0) {
|
||||
setAllCountries((prev) => ({ loading: false, data: [] }));
|
||||
return;
|
||||
}
|
||||
setAllCountries((prev) => ({
|
||||
loading: false,
|
||||
data: res?.data?.result_list,
|
||||
}));
|
||||
})
|
||||
.catch((error) => {
|
||||
setAllCountries((prev) => ({ loading: false, data: [] }));
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getCountry();
|
||||
getPaymentHistory();
|
||||
}, [walletTable]);
|
||||
|
||||
console.log(
|
||||
"Testing all country: ",
|
||||
allCountries,
|
||||
"Testing wallet: ",
|
||||
walletDetails
|
||||
);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className='mb-4'>
|
||||
<CustomBreadcrumb
|
||||
title={'Wallet'}
|
||||
breadcrumb = {
|
||||
[
|
||||
{ link: "/", title: "Home" },
|
||||
{ link: '/family-wallet', title: 'Wallet', active: true},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
<FamilyWalletBox
|
||||
wallet={walletDetails}
|
||||
payment={paymentHistory}
|
||||
countries={allCountries.data}
|
||||
/>
|
||||
</Suspense>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default FamilyWallet;
|
||||
@@ -0,0 +1,34 @@
|
||||
import { useSelector } from "react-redux";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
import WalletItemCard from "./WalletItemCard";
|
||||
import WalletItemCardFamily from "./WalletItemCardFamily";
|
||||
|
||||
/**
|
||||
* Renders a list of wallet items or a loading spinner depending on the state of the `wallet` object.
|
||||
*/
|
||||
export default function FamilyWalletBox({ wallet, payment, countries }) {
|
||||
const { loading, data } = wallet;
|
||||
|
||||
const { userDetails } = useSelector((state) => state.userDetails);
|
||||
const accountType = userDetails?.account_type === "FAMILY";
|
||||
|
||||
return (
|
||||
<div className="my-wallet-wrapper w-full mb-10">
|
||||
<div className="main-wrapper w-full">
|
||||
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
|
||||
{loading ? (
|
||||
<div className="w-full h-full flex items-center justify-center bg-white">
|
||||
<LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
|
||||
</div>
|
||||
) : (
|
||||
data.length > 0 && data.map((item) => (
|
||||
<div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
|
||||
<WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,21 +15,6 @@ export default function WalletBox({ wallet, payment, countries }) {
|
||||
return (
|
||||
<div className="my-wallet-wrapper w-full mb-10">
|
||||
<div className="main-wrapper w-full">
|
||||
{accountType ?
|
||||
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
|
||||
{loading ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<LoadingSpinner size="16" color="sky-blue" />
|
||||
</div>
|
||||
) : (
|
||||
data.length > 0 && data.map((item) => (
|
||||
<div key={item.wallet_uid} className="lg:w-full h-full mb-10 lg:mb-0">
|
||||
<WalletItemCardFamily walletItem={item} payment={payment} countries={countries} />
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
:
|
||||
<div className="balance-inquery w-auto grid sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-[repeat(auto-fill,_minmax(354px,_1fr))] min-[1440px]:grid-cols-[repeat(auto-fill,_minmax(415px,_1fr))] gap-5 mb-11 h-auto">
|
||||
{loading ? (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
@@ -43,7 +28,6 @@ export default function WalletBox({ wallet, payment, countries }) {
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,8 +7,11 @@ import Icons from "../Helpers/Icons";
|
||||
import Accordion from "../Helpers/Accordion";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function WalletHeader(props) {
|
||||
|
||||
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
|
||||
// debugger;
|
||||
//props.myWalletList.result_list
|
||||
let { pathname } = useLocation();
|
||||
@@ -21,187 +24,196 @@ export default function WalletHeader(props) {
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
|
||||
<div
|
||||
onClick={() => props.handlerBalance()}
|
||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||
>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="wallet" />
|
||||
</span>
|
||||
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="deep-plus" />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
||||
props.balanceDropdown ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
Wallet
|
||||
</h3>
|
||||
{account_type == 'FULL' ?
|
||||
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
|
||||
<div
|
||||
onClick={() => props.handlerBalance()}
|
||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||
>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="wallet" />
|
||||
</span>
|
||||
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="deep-plus" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="content px-7 pb-7">
|
||||
<ul>
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.length > 0 &&
|
||||
props.myWalletList.map((value, index) =>
|
||||
{
|
||||
let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
|
||||
return(
|
||||
<li
|
||||
key={index}
|
||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
onClick={onWalletClick}
|
||||
>
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
|
||||
<div
|
||||
className={`balance-dropdown w-96 z-30 bg-white dark:bg-dark-white absolute -left-24 rounded-lg cursor-pointer ${
|
||||
props.balanceDropdown ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-6">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
Wallet
|
||||
</h3>
|
||||
</div>
|
||||
<div className="content px-7 pb-7">
|
||||
<ul>
|
||||
{props.myWalletList &&
|
||||
props.myWalletList?.length > 0 &&
|
||||
props.myWalletList.map((value, index) =>
|
||||
{
|
||||
let image = value.code ? `${value.code.toLocaleLowerCase()}.svg` : 'default.png'
|
||||
return(
|
||||
<li
|
||||
key={index}
|
||||
className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple"
|
||||
onClick={onWalletClick}
|
||||
>
|
||||
<div className="sm:flex justify-between items-center">
|
||||
<div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">
|
||||
<div className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img src={localImgLoad(`images/currency/${image}`)} className="w-14 h-14" alt="" />
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-2xl font-bold text-dark-gray dark:text-white">
|
||||
{value.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="name">
|
||||
<p className="text-2xl font-bold text-dark-gray dark:text-white">
|
||||
{value.description}
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="eth text-xl font-bold text-purple">
|
||||
{PriceFormatter(value.amount * 0.01, value.code)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
)}
|
||||
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank1} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* MetaMask*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 75,320 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank2} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Coinbase Wallet*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 56,124 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank3} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Bitski*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 99,123 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-5">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank4} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* WalletConnect*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 43,728 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
||||
else navigate('/my-wallet', {replace: true})
|
||||
}}
|
||||
type="button"
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button> */}
|
||||
<Link
|
||||
to="/my-wallet"
|
||||
onClick={onWalletClick}
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</Link>
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank1} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* MetaMask*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 75,320 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank2} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Coinbase Wallet*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 56,124 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-4 border-b dark:border-[#5356fb29] border-light-purple hover:border-purple dark:hover:border-purple">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank3} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* Bitski*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 99,123 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
{/*<li className="content-item py-5">*/}
|
||||
{/* <div className="sm:flex justify-between items-center">*/}
|
||||
{/* <div className="account-name flex space-x-4 items-center mb-2 sm:mb-0">*/}
|
||||
{/* <div*/}
|
||||
{/* className="icon w-14 h-14 transition duration-300 ease-in-out rounded-full flex justify-center items-center bg-light-purple dark:bg-dark-light-purple ">*/}
|
||||
{/* <img src={bank4} alt=""/>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div className="name">*/}
|
||||
{/* <p className="text-base text-dark-gray dark:text-white font-medium">*/}
|
||||
{/* WalletConnect*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/* <div>*/}
|
||||
{/* <p className="eth text-xl font-bold text-purple">*/}
|
||||
{/* 43,728 ETH*/}
|
||||
{/* </p>*/}
|
||||
{/* <p className="usd text-base text-thin-light-gray text-right">*/}
|
||||
{/* (773.69 USD)*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/* </div>*/}
|
||||
{/*</li>*/}
|
||||
</ul>
|
||||
<div className="add-money-btn flex justify-center items-center mt-3">
|
||||
{/* <button
|
||||
onClick={() => {
|
||||
if(pathname == '/my-wallet') props.setBalanceDropdown.toggle()
|
||||
else navigate('/my-wallet', {replace: true})
|
||||
}}
|
||||
type="button"
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</button> */}
|
||||
<Link
|
||||
to="/my-wallet"
|
||||
onClick={onWalletClick}
|
||||
className="w-[122px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Manage
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*<div*/}
|
||||
{/* className="lg:hidden flex user-balance cursor-pointer lg:w-[252px] w-[150px] h-[48px] items-center rounded-full relative bg-purple">*/}
|
||||
{/* <div className="flex items-center lg:justify-between justify-center w-full h-full">*/}
|
||||
{/* <p className="lg:text-xl text-lg font-bold text-white">*/}
|
||||
{/* $ 234,435.34*/}
|
||||
{/* </p>*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
:
|
||||
<div className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px] items-center rounded-full relative bg-sky-blue pr-1.5 pl-4">
|
||||
<div
|
||||
onClick={() => navigate("/family-wallet", { replace: true })}
|
||||
className="flex items-center lg:justify-between justify-center w-full h-full"
|
||||
>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="wallet" />
|
||||
</span>
|
||||
<p className="lg:text-xl text-lg font-bold text-white">Wallet</p>
|
||||
<span className="lg:block hidden">
|
||||
<Icons name="deep-plus" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div className="lg:hidden block"></div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -34,9 +34,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
};
|
||||
|
||||
const currentWalletCurrency = countries
|
||||
// .map((country) => country)
|
||||
.filter((country) => country.code === walletItem.country);
|
||||
const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
|
||||
|
||||
const image = walletItem.code
|
||||
? `${walletItem.code.toLowerCase()}.svg`
|
||||
|
||||
@@ -34,9 +34,7 @@ export default function WalletItemCardFamily({ walletItem, payment, countries })
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
};
|
||||
|
||||
const currentWalletCurrency = countries
|
||||
// .map((country) => country)
|
||||
.filter((country) => country.code === walletItem.country);
|
||||
const currentWalletCurrency = countries?.filter((country) => country.code === walletItem.country);
|
||||
|
||||
const image = walletItem.code
|
||||
? `${walletItem.code.toLowerCase()}.svg`
|
||||
|
||||
@@ -20,6 +20,9 @@ import TimeDifference from "../Helpers/TimeDifference";
|
||||
const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
|
||||
|
||||
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
|
||||
const {userDetails: { account_type }} = useSelector((state) => state?.userDetails);
|
||||
|
||||
const [balanceDropdown, setbalanceValue] = useToggle(false);
|
||||
const [notificationDropdown, setNotificationValue] = useToggle(false);
|
||||
const [userProfileDropdown, setProfileDropdown] = useToggle(false);
|
||||
@@ -402,7 +405,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</li>
|
||||
)}
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="/my-wallet" className="notifications">
|
||||
<Link to={ account_type == "FULL" ? "/my-wallet" : "/family-wallet"} className="notifications">
|
||||
<div className="name">
|
||||
<p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
My Wallet
|
||||
|
||||
@@ -6,7 +6,7 @@ const LoadedPage = ({reloader}) => {
|
||||
const { loading, data, error } = GetMyPageLoad(reloader);
|
||||
|
||||
return (
|
||||
<div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
|
||||
<div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto dark:text-white">
|
||||
{loading ? (
|
||||
<>
|
||||
<h1 className="text-xl font-bold tracking-wide">...</h1>
|
||||
|
||||
@@ -8,6 +8,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
|
||||
fieldClass="px-4"
|
||||
parentClass="flex items-center gap-1 justify-between"
|
||||
labelClass="flex-[0.2] mb-0 font-semibold"
|
||||
labalClass="dark:text-white"
|
||||
inputClass="flex-[0.8]"
|
||||
inputBg="bg-slate-100"
|
||||
label="Introduction: "
|
||||
@@ -24,7 +25,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
|
||||
</label>
|
||||
<textarea
|
||||
style={{ resize: "none" }}
|
||||
className="text-base px-4 py-2 rounded-md min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none flex-[0.8]"
|
||||
className="text-base px-4 py-2 rounded-[36px] min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 focus:ring-0 focus:outline-none flex-[0.8]"
|
||||
name="description"
|
||||
cols="30"
|
||||
rows="2"
|
||||
|
||||
@@ -13,12 +13,39 @@ const YourPage = () => {
|
||||
const handleChange = ({ target: { name, value } }) =>
|
||||
setPageValues((prev) => ({ ...prev, [name]: value }));
|
||||
|
||||
const updateYourPageDetails = updateYourPage(
|
||||
pageValues,
|
||||
setResponse,
|
||||
setPageValues,
|
||||
setReloader
|
||||
);
|
||||
const updateYourPageDetails = async () => {
|
||||
if (!pageValues.intro || !pageValues.description) return;
|
||||
|
||||
try {
|
||||
setResponse({ loading: true, error: "", msg: "" });
|
||||
|
||||
let api = new usersService();
|
||||
const res = await api.MyPageIntro(pageValues);
|
||||
|
||||
setTimeout(() => {
|
||||
setResponse({
|
||||
loading: false,
|
||||
data: res.data,
|
||||
msg: "Update Complete",
|
||||
});
|
||||
|
||||
setReloader((prev) => !prev);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
setResponse({ msg: "" });
|
||||
// Clear form after successful update
|
||||
setPageValues({ intro: "", description: "" });
|
||||
}, 3000);
|
||||
} catch (error) {
|
||||
return setResponse({
|
||||
loading: false,
|
||||
data: {},
|
||||
error: "Error updating page",
|
||||
msg: "",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
@@ -57,39 +84,3 @@ const responseInitialValues = {
|
||||
error: "",
|
||||
msg: "",
|
||||
};
|
||||
|
||||
function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
|
||||
return async () => {
|
||||
if (!pageValues.intro || !pageValues.description) return;
|
||||
|
||||
try {
|
||||
setResponse({ loading: true, error: "", msg: "" });
|
||||
|
||||
let api = new usersService();
|
||||
const res = await api.MyPageIntro(pageValues);
|
||||
|
||||
setTimeout(() => {
|
||||
setResponse({
|
||||
loading: false,
|
||||
data: res.data,
|
||||
msg: "Update Complete",
|
||||
});
|
||||
|
||||
setReloader((prev) => !prev);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
setResponse({ msg: "" });
|
||||
// Clear form after successful update
|
||||
setPageValues({ intro: "", description: "" });
|
||||
}, 3000);
|
||||
} catch (error) {
|
||||
return setResponse({
|
||||
loading: false,
|
||||
data: {},
|
||||
error: "Error updating page",
|
||||
msg: "",
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
+1
-2
@@ -52,9 +52,8 @@
|
||||
}
|
||||
.job-action {
|
||||
background-color: #4687ba;
|
||||
height: 100px;
|
||||
border-radius: 15px;
|
||||
padding: 5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.msg_box {
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import FamilyWallet from "../components/MyWallet/FamilyWallet";
|
||||
|
||||
export default function FamilyWalletPage() {
|
||||
return <FamilyWallet />;
|
||||
}
|
||||
@@ -23,6 +23,9 @@ module.exports = {
|
||||
screens:{
|
||||
xxs: '400px',
|
||||
xxl:'1900px'
|
||||
},
|
||||
backgroundImage: {
|
||||
'family-header-bg': "linear-gradient(90deg, rgba(45,126,241,1) 0%, rgba(58,143,195,1) 0%, rgba(11,100,119,1) 100%)",
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user