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
|
||||
Reference in New Issue
Block a user