.
This commit is contained in:
@@ -1,8 +1,3 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import method1 from "../../../assets/images/payment-method-1.png";
|
||||
import method2 from "../../../assets/images/payment-method-2.png";
|
||||
import method3 from "../../../assets/images/payment-method-3.png";
|
||||
import method4 from "../../../assets/images/payment-method-4.png";
|
||||
import CardList from "./CardList";
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useState } from "react";
|
||||
import method1 from "../../../assets/images/icons/bank.svg";
|
||||
import localImgLoad from "../../../lib/localImgLoad";
|
||||
import { PaginatedList, handlePagingFunc } from "../../Pagination";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
|
||||
export default function RecipientAccountTab({
|
||||
recipientAccount,
|
||||
setRecipientAccount,
|
||||
}) {
|
||||
const cardList = recipientAccount?.data?.result_list;
|
||||
const handleDeleteCardModal = () => {
|
||||
setRecipientAccount((prev) => ({ ...prev, state: !prev.state }));
|
||||
};
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(0);
|
||||
const indexOfFirstItem = Number(currentPage);
|
||||
const indexOfLastItem =
|
||||
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
||||
const currentCardList = cardList?.slice(indexOfFirstItem, indexOfLastItem);
|
||||
|
||||
const handlePagination = (e) => {
|
||||
handlePagingFunc(e, setCurrentPage);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="payment-method-tab w-full">
|
||||
<div className="payment-item-wrapper w-full">
|
||||
<ul className="payment-items w-full min-h-[400px]">
|
||||
{recipientAccount?.loading ? (
|
||||
<div className="w-full h-[300px] flex justify-center items-center">
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
</div>
|
||||
) : cardList?.length ? (
|
||||
currentCardList.map((item) => {
|
||||
let image =
|
||||
item.description &&
|
||||
localImgLoad(
|
||||
`images/settings/${item.description.toLowerCase()}.svg`
|
||||
);
|
||||
let addedDate = item?.added?.split(" ")[0];
|
||||
|
||||
return (
|
||||
<li
|
||||
key={item.recipient_id}
|
||||
className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] "
|
||||
>
|
||||
<div className="flex space-x-5 mb-2 sm:mb-0">
|
||||
<div className="w-[70px] h-[70px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
|
||||
<img
|
||||
src={image ? image : method1}
|
||||
className="w-[50px] h-[50px]"
|
||||
alt="payment"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-around">
|
||||
<p className="sm:text-xl text-lg tracking-wide text-dark-gray dark:text-white">
|
||||
Added: {addedDate}
|
||||
</p>
|
||||
<p className="text-thin-light-gray sm:text-18 text-base tracking-wide">
|
||||
{item?.recipient}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setRecipientAccount({ state: true, data: item });
|
||||
}}
|
||||
className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
|
||||
No Cards Found
|
||||
</h1>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{/* PAGINATION BUTTON */}
|
||||
<PaginatedList
|
||||
onClick={handlePagination}
|
||||
prev={currentPage == 0 ? true : false}
|
||||
next={
|
||||
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
||||
cardList?.length
|
||||
? true
|
||||
: false
|
||||
}
|
||||
data={cardList}
|
||||
start={indexOfFirstItem}
|
||||
stop={indexOfLastItem}
|
||||
/>
|
||||
{/* END OF PAGINATION BUTTON */}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,13 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import cover from "../../assets/images/profile-info-cover.png";
|
||||
import profile from "../../assets/images/profile-info-profile.png";
|
||||
import usersService from "../../services/UsersService";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import Layout from "../Partials/Layout";
|
||||
import {
|
||||
@@ -13,11 +20,13 @@ import {
|
||||
PrivacyPolicyTab,
|
||||
TermsConditionTab,
|
||||
} from "./Tabs";
|
||||
import RecipientAccountTab from "./Tabs/RecipientAccountTab";
|
||||
|
||||
export default function Settings({ faq }) {
|
||||
const [profileImg, setProfileImg] = useState(profile);
|
||||
const [coverImg, setCoverImg] = useState(cover);
|
||||
|
||||
const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
|
||||
|
||||
// profile img
|
||||
const profileImgInput = useRef(null);
|
||||
const browseProfileImg = () => {
|
||||
@@ -47,6 +56,7 @@ export default function Settings({ faq }) {
|
||||
}
|
||||
};
|
||||
|
||||
const apiCall = useMemo(() => new usersService(), []);
|
||||
// Tabs Handling
|
||||
const tabs = [
|
||||
{
|
||||
@@ -63,30 +73,36 @@ export default function Settings({ faq }) {
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "recipients-account",
|
||||
title: "Recipients Account",
|
||||
iconName: "bank-card",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "notification",
|
||||
title: "Notification Setting",
|
||||
iconName: "notification-setting",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
id: 5,
|
||||
name: "login_activity",
|
||||
title: "Login Activity",
|
||||
iconName: "login-activity",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 6,
|
||||
name: "password",
|
||||
title: "Change Password",
|
||||
iconName: "password-hover",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
id: 7,
|
||||
name: "faq",
|
||||
title: "FAQ",
|
||||
iconName: "block-question",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
id: 8,
|
||||
name: "privacy",
|
||||
title: "Privacy Policy",
|
||||
iconName: "page-right",
|
||||
@@ -103,6 +119,48 @@ export default function Settings({ faq }) {
|
||||
setTab(value);
|
||||
};
|
||||
|
||||
// Recipient Account
|
||||
const [recipientAccount, setRecipientAccount] = useState({
|
||||
state: false,
|
||||
loader: false,
|
||||
msg: "",
|
||||
data: null,
|
||||
});
|
||||
|
||||
const getRecipientAccount = useCallback(async () => {
|
||||
setRecipientAccount((prev) => ({ loader: true }));
|
||||
|
||||
let res;
|
||||
try {
|
||||
res = await apiCall.getRecipient();
|
||||
res = res.data;
|
||||
|
||||
if (res?.internal_return < 0) {
|
||||
setRecipientAccount((prev) => ({
|
||||
loader: false,
|
||||
msg: "Sorry, something went wrong",
|
||||
}));
|
||||
setTimeout(() => setRecipientAccount((prev) => prev), 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
return setTimeout(() => {
|
||||
setRecipientAccount((prev) => ({ loader: false, data: res }));
|
||||
});
|
||||
} catch (error) {
|
||||
setRecipientAccount((prev) => ({
|
||||
loader: false,
|
||||
msg: "Sorry, an error occurred",
|
||||
}));
|
||||
setTimeout(() => setRecipientAccount((prev) => prev), 5000);
|
||||
return;
|
||||
}
|
||||
}, [apiCall]);
|
||||
|
||||
useEffect(() => {
|
||||
getRecipientAccount();
|
||||
}, [reloadCardList]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
@@ -162,6 +220,15 @@ export default function Settings({ faq }) {
|
||||
<PaymentMathodsTab />
|
||||
</div>
|
||||
)}
|
||||
{tab === "recipients-account" && (
|
||||
<div className="tab-item">
|
||||
<RecipientAccountTab
|
||||
recipientAccount={recipientAccount}
|
||||
setRecipientAccount={setRecipientAccount}
|
||||
setReloadCardList={setReloadCardList}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{tab === "notification" && (
|
||||
<div className="tab-item">
|
||||
<NotificationSettingTab />
|
||||
|
||||
Reference in New Issue
Block a user