hamid zarghami
182 lines
12 KiB
TypeScript
182 lines
12 KiB
TypeScript
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'
|
|
import { usePermissions } from '../../hooks/usePermissions'
|
|
|
|
const PaymentList: FC = () => {
|
|
|
|
const { t } = useTranslation('global')
|
|
const { canUpdate } = usePermissions()
|
|
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 ?
|
|
<div className='mt-5'>
|
|
<PageLoading />
|
|
</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.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' && canUpdate('payments') &&
|
|
<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 |