payment
This commit is contained in:
hamid zarghami
@@ -0,0 +1,178 @@
|
||||
import { FC, Fragment, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Tabs from '../../components/Tabs'
|
||||
import { Cards, Money3, MoneyRecive } from 'iconsax-react'
|
||||
import { useGetGateWayPayment, useGetPayments } from './hooks/usePaymentData'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import Td from '../../components/Td'
|
||||
import { PaymentGatewayType, PaymentItemsType, PaymentStatusType } from './types/PaymentTypes'
|
||||
import Pagination from '../../components/Pagination'
|
||||
import moment from 'moment-jalaali'
|
||||
import Accept from './components/Accept'
|
||||
import Reject from './components/Reject'
|
||||
|
||||
const PaymentList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const [pageGateWay, setPageGateWay] = useState<number>(1)
|
||||
const [activeTab, setActiveTab] = useState<PaymentStatusType>('GATEWAY')
|
||||
const getGateWayPayment = useGetGateWayPayment(pageGateWay)
|
||||
const getPayments = useGetPayments(page, activeTab)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='mt-8 flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
<Tabs
|
||||
active={activeTab}
|
||||
items={[
|
||||
{
|
||||
label: t('wallet.online_pay'),
|
||||
value: 'GATEWAY',
|
||||
icon: <MoneyRecive color={activeTab === 'GATEWAY' ? 'black' : '#8C90A3'} size={22} />
|
||||
},
|
||||
{
|
||||
icon: <Cards color={activeTab === 'CARD_TO_CARD' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('wallet.card_to_card'),
|
||||
value: 'CARD_TO_CARD'
|
||||
},
|
||||
{
|
||||
icon: <Money3 color={activeTab === 'SHEBA' ? 'black' : '#8C90A3'} size={22} />,
|
||||
label: t('wallet.sheba'),
|
||||
value: 'SHEBA'
|
||||
},
|
||||
]}
|
||||
onChange={(value) => setActiveTab(value as PaymentStatusType)}
|
||||
/>
|
||||
|
||||
{
|
||||
getPayments.isFetching || getGateWayPayment.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<Fragment>
|
||||
{
|
||||
activeTab === 'GATEWAY' &&
|
||||
<Fragment>
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('payment.user')} />
|
||||
<Td text={t('payment.amount')} />
|
||||
<Td text={t('payment.date')} />
|
||||
<Td text={t('payment.status_payment')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getGateWayPayment.data?.data?.payments?.map((item: PaymentGatewayType) => {
|
||||
return (
|
||||
<tr className='tr' key={item.id}>
|
||||
<Td text={`${item.user.firstName} ${item.user.lastName}`} />
|
||||
<Td text={item.amount.toLocaleString()} />
|
||||
<Td text={''}>
|
||||
<div className='dltr text-right'>
|
||||
{moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={t(`payment.${item.status}`)} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={pageGateWay}
|
||||
totalPages={getGateWayPayment.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPageGateWay}
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
}
|
||||
{
|
||||
activeTab !== 'GATEWAY' &&
|
||||
<Fragment>
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('payment.receip_image')} />
|
||||
<Td text={t('payment.user')} />
|
||||
<Td text={t('payment.card_number')} />
|
||||
<Td text={t('payment.sheba_number')} />
|
||||
<Td text={t('payment.amount')} />
|
||||
<Td text={t('payment.date')} />
|
||||
<Td text={t('payment.payment_type')} />
|
||||
<Td text={t('payment.status_payment')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getPayments.data?.data?.depositRequests?.map((item: PaymentItemsType) => {
|
||||
return (
|
||||
<tr className='tr' key={item.id}>
|
||||
<Td text={''}>
|
||||
<a href={item.receiptUrl} target='_blank'>
|
||||
<img
|
||||
src={item.receiptUrl}
|
||||
className='w-16 h-16 rounded-lg'
|
||||
/>
|
||||
</a>
|
||||
</Td>
|
||||
<Td text={`${item.user.firstName} ${item.user.lastName}`} />
|
||||
<Td text={item.bankAccount.cardNumber} />
|
||||
<Td text={item.bankAccount.IBan} />
|
||||
<Td text={item.amount.toLocaleString()} />
|
||||
<Td text={''}>
|
||||
<div className='dltr text-right'>
|
||||
{moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
|
||||
</div>
|
||||
</Td>
|
||||
<Td text={item.type === 'CARD_TO_CARD' ? t('wallet.card_to_card') : t('wallet.bank_transfer')} />
|
||||
<Td text={t(`payment.${item.status}`)} />
|
||||
<Td text={''}>
|
||||
{
|
||||
item.status === 'PENDING' &&
|
||||
<Fragment>
|
||||
<div className='flex gap-2'>
|
||||
<Accept
|
||||
id={item.id}
|
||||
/>
|
||||
<Reject id={item.id} />
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end'>
|
||||
<Pagination
|
||||
currentPage={page}
|
||||
totalPages={getPayments.data?.data?.pager?.totalPages}
|
||||
onPageChange={setPage}
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
}
|
||||
|
||||
</Fragment>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PaymentList
|
||||
@@ -0,0 +1,51 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../../components/Button'
|
||||
import { useApproveTransfer } from '../hooks/usePaymentData'
|
||||
import ModalConfrim from '../../../components/ModalConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const Accept: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [openConfrimModal, setOpenConfrimModal] = useState<boolean>(false)
|
||||
const approveTransfer = useApproveTransfer()
|
||||
|
||||
const handleApproveTransfer = () => {
|
||||
approveTransfer.mutate(props.id, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
setOpenConfrimModal(false)
|
||||
window.location.reload()
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast.error(error?.response?.data?.error?.message[0])
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
label={t('payment.aceept')}
|
||||
className='px-4 bg-green-50 text-green-500 font-semibold'
|
||||
onClick={() => setOpenConfrimModal(true)}
|
||||
/>
|
||||
|
||||
<ModalConfrim
|
||||
isOpen={openConfrimModal}
|
||||
close={() => setOpenConfrimModal(false)}
|
||||
onConfrim={handleApproveTransfer}
|
||||
isLoading={approveTransfer.isPending}
|
||||
label={t('payment.accept_confrim')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Accept
|
||||
@@ -0,0 +1,56 @@
|
||||
import { FC, useState } from 'react'
|
||||
import Button from '../../../components/Button'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRejectTransfer } from '../hooks/usePaymentData'
|
||||
import ModalConfrim from '../../../components/ModalConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../../helpers/types'
|
||||
|
||||
type Props = {
|
||||
id: string
|
||||
}
|
||||
|
||||
const Reject: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const [openConfrimModal, setOpenConfrimModal] = useState<boolean>(false)
|
||||
const rejectTransfer = useRejectTransfer()
|
||||
|
||||
const handleRejectTransfer = (text?: string) => {
|
||||
if (text && text.length > 0) {
|
||||
rejectTransfer.mutate({ id: props.id, comment: text }, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
setOpenConfrimModal(false)
|
||||
window.location.reload()
|
||||
},
|
||||
onError(error: ErrorType) {
|
||||
toast.error(error?.response?.data?.error?.message[0])
|
||||
},
|
||||
})
|
||||
} else {
|
||||
toast.error(t('payment.reject_comment_error'))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
label={t('payment.reject')}
|
||||
className='px-4 w-fit bg-red-50 text-red-500 font-semibold'
|
||||
onClick={() => setOpenConfrimModal(true)}
|
||||
/>
|
||||
|
||||
<ModalConfrim
|
||||
isOpen={openConfrimModal}
|
||||
close={() => setOpenConfrimModal(false)}
|
||||
onConfrim={handleRejectTransfer}
|
||||
isLoading={rejectTransfer.isPending}
|
||||
label={t('payment.accept_confrim')}
|
||||
isHasDescription
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Reject
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/PaymentService";
|
||||
import { PaymentStatusType, RejectPaymentType } from "../types/PaymentTypes";
|
||||
|
||||
export const useGetPayments = (page: number, type: PaymentStatusType) => {
|
||||
return useQuery({
|
||||
queryKey: ["payments", page, type],
|
||||
queryFn: () => api.getPayments(page, type),
|
||||
enabled: type !== "GATEWAY",
|
||||
});
|
||||
};
|
||||
|
||||
export const useApproveTransfer = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: string) => api.approveTransfer(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useRejectTransfer = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: RejectPaymentType) => api.rejectTransfer(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetGateWayPayment = (page: number) => {
|
||||
return useQuery({
|
||||
queryKey: ["gateway-payments", page],
|
||||
queryFn: () => api.getPaymentGateways(page),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { PaymentStatusType, RejectPaymentType } from "../types/PaymentTypes";
|
||||
|
||||
export const getPayments = async (page: number, type: PaymentStatusType) => {
|
||||
const { data } = await axios.get(
|
||||
`/payments/deposit/transfer?page=${page}&type=${type}`
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const approveTransfer = async (id: string) => {
|
||||
const { data } = await axios.post(`/payments/deposit/transfer/approve/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const rejectTransfer = async (params: RejectPaymentType) => {
|
||||
const { data } = await axios.post(
|
||||
`/payments/deposit/transfer/reject/${params.id}`,
|
||||
params
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getPaymentGateways = async (page: number) => {
|
||||
const { data } = await axios.get(`/payments/deposit/gateway?page=${page}`);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
export type PaymentType = {
|
||||
id: string;
|
||||
amount: number;
|
||||
createdAt: string;
|
||||
reference: string;
|
||||
status: "PENDING" | "COMPLETED" | "FAILED" | "CANCELED";
|
||||
transactionId: string | null;
|
||||
type: "CARD_TO_CARD" | "BANK_TRANSFER";
|
||||
};
|
||||
|
||||
export type PaymentItemsType = {
|
||||
id: string;
|
||||
amount: number;
|
||||
bankAccount: {
|
||||
IBan: string;
|
||||
cardNumber: string;
|
||||
accountOwnerName: string;
|
||||
};
|
||||
comment?: string;
|
||||
createdAt: string;
|
||||
receiptUrl: string;
|
||||
status: "PENDING" | "APPROVED" | "REJECTED";
|
||||
user: {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
phone: string;
|
||||
};
|
||||
type: PaymentStatusType;
|
||||
};
|
||||
|
||||
export type PaymentStatusType = "CARD_TO_CARD" | "GATEWAY" | "SHEBA";
|
||||
|
||||
export type PaymentGatewayType = {
|
||||
amount: string;
|
||||
id: string;
|
||||
createdAt: string;
|
||||
reference: string;
|
||||
status: "PENDING" | "COMPLETED" | "FAILED" | "CANCELED";
|
||||
paymentGateway: {
|
||||
id: string;
|
||||
name: string;
|
||||
nameFa: string;
|
||||
description: string;
|
||||
};
|
||||
user: {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
phone: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type RejectPaymentType = {
|
||||
id: string;
|
||||
comment?: string;
|
||||
};
|
||||
Reference in New Issue
Block a user