feat: add payment trasnactions.

src/containers/Drawers/BillDrawer/BillPaymentTransactions/BillPaymentTransactionTable.js

@@ -5,6 +5,7 @@ import 'style/pages/PaymentTransactions/List.scss';
 
 import { useBillPaymentTransactionsColumns } from './components';
 import { useBillDrawerContext } from '../BillDrawerProvider';
+import { useBillPaymentTransactions } from 'hooks/query';
 
 /**
  * Bill payment transactions datatable.
@@ -12,11 +13,16 @@ import { useBillDrawerContext } from '../BillDrawerProvider';
 export default function BillPaymentTransactionTable() {
   const columns = useBillPaymentTransactionsColumns();
 
+  const { billId } = useBillDrawerContext();
+
+  // Handle fetch bill payment transaction.
   const {
-    paymentTransactions,
-    isPaymentTransactionsLoading,
-    isPaymentTransactionFetching,
-  } = useBillDrawerContext();
+    isLoading: isPaymentTransactionsLoading,
+    isFetching: isPaymentTransactionFetching,
+    data: paymentTransactions,
+  } = useBillPaymentTransactions(billId, {
+    enabled: !!billId,
+  });
 
   return (
     <Card>

src/containers/Drawers/BillDrawer/BillPaymentTransactions/components.js

@@ -14,17 +14,23 @@ export const useBillPaymentTransactionsColumns = () => {
       {
         id: 'date',
         Header: intl.get('payment_date'),
-        accessor: 'date',
+        accessor: 'formatted_payment_date',
         Cell: FormatDateCell,
         width: 110,
         className: 'date',
         textOverview: true,
       },
+      {
+        id: 'payment_account_name',
+        Header: intl.get('bill_transactions.column.deposit_account'),
+        accessor: 'payment_account_name',
+        width: 120,
+        textOverview: true,
+      },
       {
         id: 'amount',
         Header: intl.get('amount'),
-        accessor: 'amount',
-        // accessor: 'formatted_amount',
+        accessor: 'formatted_payment_amount',
         align: 'right',
         width: 100,
         className: clsx(CLASSES.FONT_BOLD),
@@ -40,9 +46,9 @@ export const useBillPaymentTransactionsColumns = () => {
       {
         id: 'reference',
         Header: intl.get('reference_no'),
-        accessor: 'reference',
+        accessor: 'payment_reference_no',
         width: 90,
-        className: 'reference',
+        className: 'payment_reference_no',
         clickable: true,
         textOverview: true,
       },