feat: add payment trasnactions.

src/containers/Drawers/BillDrawer/BillDrawerDetails.js

@@ -19,11 +19,12 @@ import BillDrawerCls from 'style/components/Drawers/BillDrawer.module.scss';
 export default function BillDrawerDetails() {
   const {
     data: { transactions },
+    billId,
   } = useBillDrawerContext();
 
   return (
     <div className={clsx(BillDrawerCls.root)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
+      <DrawerMainTabs renderActiveTabPanelOnly={true} defaultSelectedTabId="details">
         <Tab
           title={intl.get('details')}
           id={'details'}
@@ -37,7 +38,7 @@ export default function BillDrawerDetails() {
         <Tab
           title={intl.get('payment_transactions')}
           id={'payment_transactions'}
-          panel={<BillPaymentTransactionTable />}
+          panel={<BillPaymentTransactionTable billId={billId} />}
         />
         <Tab
           title={intl.get('located_landed_cost')}

src/containers/Drawers/BillDrawer/BillDrawerProvider.js

@@ -5,7 +5,6 @@ import {
   useBill,
   useTransactionsByReference,
   useBillLocatedLandedCost,
-  useBillPaymentTransactions,
 } from 'hooks/query';
 
 const BillDrawerContext = React.createContext();
@@ -34,31 +33,15 @@ function BillDrawerProvider({ billId, ...props }) {
       enabled: !!billId,
     });
 
-  // Handle fetch bill payment transaction.
-  const {
-    isLoading: isPaymentTransactionsLoading,
-    isFetching: isPaymentTransactionFetching,
-    data: paymentTransactions,
-  } = useBillPaymentTransactions(billId, {
-    enabled: !!billId,
-  });
-
   //provider.
   const provider = {
     transactions,
     billId,
     data,
     bill,
-    paymentTransactions,
-    isPaymentTransactionsLoading,
-    isPaymentTransactionFetching,
   };
 
-  const loading =
-    isLandedCostLoading ||
-    isTransactionLoading ||
-    isPaymentTransactionsLoading ||
-    isBillLoading;
+  const loading = isLandedCostLoading || isTransactionLoading || isBillLoading;
 
   return (
     <DrawerLoading loading={loading}>

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,
       },