Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master
This commit is contained in:
Gogs
@@ -1,8 +1,10 @@
|
||||
import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
|
||||
import React, { useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "react-toastify";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import { tableReload } from "../../../store/TableReloads";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
|
||||
function ThePaymentText({ value, type }) {
|
||||
@@ -98,6 +100,7 @@ function ConfirmAddFund({
|
||||
|
||||
const apiURL = new usersService();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const [requestStatus, setRequestStatus] = useState({
|
||||
message: "",
|
||||
@@ -251,8 +254,9 @@ function ConfirmAddFund({
|
||||
}));
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
dispatch(tableReload({ type: "WALLETTABLE" }));
|
||||
setConfirmCredit((prev) => ({
|
||||
...prev,
|
||||
show: {
|
||||
@@ -274,7 +278,7 @@ function ConfirmAddFund({
|
||||
}
|
||||
};
|
||||
|
||||
console.log(confirmCredit?.data);
|
||||
// console.log(confirmCredit?.data);
|
||||
|
||||
return (
|
||||
<div className="content-wrapper w-full h-[32rem]">
|
||||
|
||||
@@ -4,98 +4,74 @@ import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useReducer,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Navigate, Outlet, Route, Routes } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import usersService from "../../services/UsersService";
|
||||
import Layout from "../Partials/Layout";
|
||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||
|
||||
// const AddFund = lazy(() => import("./AddFund"));
|
||||
// const ConfirmAddFund = lazy(() => import("./ConfirmAddFund"));
|
||||
// const TransferFund = lazy(() => import("./TransferFund"));
|
||||
const WalletBox = lazy(() => import("./WalletBox"));
|
||||
// const NairaWithdraw = lazy(() => import("./Popup/NairaWithdraw"));
|
||||
// const ConfirmNairaWithdraw = lazy(() => import("./ConfirmNairaWithdraw"));
|
||||
// const AddRecipient = lazy(() => import("./AddRecipient"));
|
||||
// const ConfirmTransfer = lazy(() => import("./ConfirmTransfer"));
|
||||
|
||||
// function Wallet() {
|
||||
// return (
|
||||
// <Layout>
|
||||
// <Outlet />
|
||||
// </Layout>
|
||||
// );
|
||||
// }
|
||||
|
||||
const initialState = {
|
||||
loading: true,
|
||||
data: [],
|
||||
error: false,
|
||||
};
|
||||
|
||||
// Currently learning better about useReducer, so I converted this since it seemed like something complex
|
||||
const reducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case "FETCH_SUCCESS":
|
||||
return {
|
||||
...state,
|
||||
loading: false,
|
||||
data: action.payload,
|
||||
};
|
||||
case "FETCH_ERROR":
|
||||
return {
|
||||
...state,
|
||||
loading: false,
|
||||
error: true,
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const WalletRoutes = () => {
|
||||
const apiCall = new usersService();
|
||||
const apiCall = useMemo(() => new usersService(), []);
|
||||
const { walletTable } = useSelector((state) => state.tableReload);
|
||||
const [walletList, setWalletList] = useState({
|
||||
loading: true,
|
||||
data: [],
|
||||
reload: false,
|
||||
});
|
||||
const [paymentHistory, setPaymentHistory] = useState({
|
||||
loading: true,
|
||||
data: [],
|
||||
});
|
||||
|
||||
const [walletList, setWalletList] = useState({loading: true, data: []});
|
||||
const [paymentHistory, setPaymentHistory] = useState({loading: true, data: []});
|
||||
|
||||
const getWalletList = () => {
|
||||
apiCall
|
||||
const getWalletList = useCallback(() => {
|
||||
return apiCall
|
||||
.getUserWallets()
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setWalletList({loading: false, data: []})
|
||||
setWalletList({ loading: false, data: [] });
|
||||
} else {
|
||||
setWalletList({loading: false, data: res.data?.result_list})
|
||||
setWalletList({ loading: true, data: [] });
|
||||
|
||||
setTimeout(
|
||||
() =>
|
||||
setWalletList({ loading: false, data: res.data?.result_list }),
|
||||
500
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setWalletList({loading: false, data: []})
|
||||
setWalletList({ loading: false, data: [] });
|
||||
});
|
||||
}
|
||||
}, [apiCall]);
|
||||
|
||||
const getPaymentHistory = () => {
|
||||
apiCall
|
||||
const getPaymentHistory = useCallback(() => {
|
||||
return apiCall
|
||||
.getPaymentHx()
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
setPaymentHistory({loading: false, data: []})
|
||||
setPaymentHistory({ loading: false, data: [] });
|
||||
} else {
|
||||
setPaymentHistory({loading: false, data: res.data?.result_list})
|
||||
setPaymentHistory({ loading: false, data: res.data?.result_list });
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setPaymentHistory({loading: false, data: []})
|
||||
setPaymentHistory({ loading: false, data: [] });
|
||||
});
|
||||
}
|
||||
}, [apiCall]);
|
||||
|
||||
useEffect(() => {
|
||||
getWalletList();
|
||||
getPaymentHistory();
|
||||
}, []);
|
||||
const fetchData = async () => {
|
||||
await Promise.all([getWalletList(), getPaymentHistory()]);
|
||||
};
|
||||
|
||||
if (walletList.loading) {
|
||||
fetchData();
|
||||
}
|
||||
}, [walletTable, walletList.loading]);
|
||||
|
||||
console.log(walletTable);
|
||||
return (
|
||||
<Layout>
|
||||
<Suspense fallback={<LoadingSpinner size="16" color="sky-blue" />}>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState, useEffect } from "react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { Link, useLocation } from "react-router-dom";
|
||||
import bank1 from "../../assets/images/bank-1.png";
|
||||
import bank2 from "../../assets/images/bank-2.png";
|
||||
@@ -6,16 +6,15 @@ import bank3 from "../../assets/images/bank-3.png";
|
||||
import bank4 from "../../assets/images/bank-4.png";
|
||||
import profileImg from "../../assets/images/profile-pic.jpg";
|
||||
import useToggle from "../../hooks/useToggle";
|
||||
import usersService from "../../services/UsersService";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import ModalCom from "../Helpers/ModalCom";
|
||||
import SearchCom from "../Helpers/SearchCom";
|
||||
import WalletHeader from "../MyWallet/WalletHeader";
|
||||
import usersService from "../../services/UsersService";
|
||||
|
||||
import siteLogo from "../../assets/images/wrenchboard.png";
|
||||
import Flag from "../../assets/images/united-states.svg";
|
||||
import { useSelector } from "react-redux";
|
||||
import Flag from "../../assets/images/united-states.svg";
|
||||
import siteLogo from "../../assets/images/wrenchboard.png";
|
||||
|
||||
export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
const [balanceDropdown, setbalanceValue] = useToggle(false);
|
||||
@@ -489,7 +488,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
{firstname}
|
||||
</h1>
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && <p className="text-sm text-thin-light-gray">@{userEmail}</p>}
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<p className="text-sm text-thin-light-gray">@{userEmail}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -499,7 +500,11 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
onClick={() => handlerProfile()}
|
||||
className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden block"
|
||||
>
|
||||
<img src={profileImg} alt="profile" className="w-full h-full" />
|
||||
<img
|
||||
src={profileImg}
|
||||
alt="profile"
|
||||
className="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -513,7 +518,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</div>
|
||||
<div className="heading border-b dark:border-[#5356fb29] border-light-purple px-7 py-2">
|
||||
<h3 className="text-xl font-bold text-dark-gray dark:text-white">
|
||||
{`${firstname} ${lastname}`}
|
||||
{`${firstname} ${lastname}`}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="content">
|
||||
@@ -540,84 +545,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
|
||||
</li>
|
||||
{userDetails && userDetails?.account_type !== "FAMILY" && (
|
||||
<>
|
||||
<li className="content-item relative my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="#" className="notifications">
|
||||
<div className="name">
|
||||
<p className="flex items-center justify-between text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
<span>Reports</span> <span>></span>
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
{/* report list items*/}
|
||||
<div
|
||||
className="inner-list-items absolute rounded-lg"
|
||||
onClick={setNotification}
|
||||
>
|
||||
<ul className="p-3">
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="/referral" className="notifications">
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Referrals
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="#" className="notifications">
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Billing
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="#" className="notifications">
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Payments
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="#" className="notifications">
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Completed Jobs
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="content-item my-1 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="#" className="notifications">
|
||||
<div className="name">
|
||||
<p className="text-sm py-1 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
|
||||
Previous Task
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<hr />
|
||||
<div className="px-7 py-3 cursor-pointer flex items-center">
|
||||
<div
|
||||
className={`h-6 w-8 mr-1 p-1 ${
|
||||
toggleNotification
|
||||
? "bg-sky-blue flex justify-end items-center"
|
||||
: "bg-slate-200"
|
||||
} rounded-full transition`}
|
||||
>
|
||||
<div className="w-4 h-full bg-white rounded-full"></div>
|
||||
</div>
|
||||
<p className="text-sm py-2 px-4 text-slate-400 dark:text-white">
|
||||
Notifications
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/* end report list items*/}
|
||||
</li>
|
||||
<li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
|
||||
<Link to="#" className="notifications">
|
||||
<div className="name">
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -5,7 +5,8 @@ const initialState = {
|
||||
pendingListTable: false,
|
||||
myTaskTable: false,
|
||||
othersInterestedTable: false,
|
||||
couponTable: false
|
||||
couponTable: false,
|
||||
walletTable: false,
|
||||
};
|
||||
|
||||
export const tableReloadSlice = createSlice({
|
||||
@@ -29,6 +30,9 @@ export const tableReloadSlice = createSlice({
|
||||
case "COUPONTABLE":
|
||||
state.couponTable = !state.couponTable;
|
||||
return;
|
||||
case "WALLETTABLE":
|
||||
state.walletTable = !state.walletTable;
|
||||
return;
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user