feat: add payment trasnactions.

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -20,7 +20,10 @@ export default function InvoiceDetail() {
 
   return (
     <div className={clsx(InvoiceDrawerCls.invoice_details)}>
-      <DrawerMainTabs defaultSelectedTabId="details">
+      <DrawerMainTabs
+        renderActiveTabPanelOnly={true}
+        defaultSelectedTabId="details"
+      >
         <Tab
           title={intl.get('details')}
           id={'details'}

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailDrawerProvider.js

@@ -29,30 +29,14 @@ function InvoiceDetailDrawerProvider({ invoiceId, ...props }) {
     enabled: !!invoiceId,
   });
 
-  // Fetch invoice payment transactions.
-  const {
-    data: paymentTransactions,
-    isFetching: isPaymentTransactionFetching,
-    isLoading: isPaymentTransactionLoading,
-  } = useInvoicePaymentTransactions(invoiceId, {
-    enabled: !!invoiceId,
-  });
-
   //provider.
   const provider = {
     transactions,
-    paymentTransactions,
-    isPaymentTransactionLoading,
-    isPaymentTransactionFetching,
     invoiceId,
     invoice,
   };
   return (
-    <DrawerLoading
-      loading={
-        isTransactionLoading || isInvoiceLoading || isPaymentTransactionLoading
-      }
-    >
+    <DrawerLoading loading={isTransactionLoading || isInvoiceLoading}>
       <DrawerHeaderContent
         name="invoice-detail-drawer"
         title={intl.get('invoice_details')}

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/InvoicePaymentTransactionsTable.js

@@ -5,18 +5,24 @@ import 'style/pages/PaymentTransactions/List.scss';
 
 import { useInvoicePaymentTransactionsColumns } from './components';
 import { useInvoiceDetailDrawerContext } from '../InvoiceDetailDrawerProvider';
+import { useInvoicePaymentTransactions } from 'hooks/query';
 
 /**
  * Invoice payment transactions datatable.
  */
 export default function InvoicePaymentTransactionsTable() {
   const columns = useInvoicePaymentTransactionsColumns();
-  const {
-    paymentTransactions,
-    isPaymentTransactionLoading,
-    isPaymentTransactionFetching,
-  } = useInvoiceDetailDrawerContext();
 
+  const { invoiceId } = useInvoiceDetailDrawerContext();
+
+  // Fetch invoice payment transactions.
+  const {
+    data: paymentTransactions,
+    isFetching: isPaymentTransactionFetching,
+    isLoading: isPaymentTransactionLoading,
+  } = useInvoicePaymentTransactions(invoiceId, {
+    enabled: !!invoiceId,
+  });
   return (
     <Card>
       <DataTable

src/containers/Drawers/InvoiceDetailDrawer/InvoicePaymentTransactions/components.js

@@ -14,35 +14,41 @@ export const useInvoicePaymentTransactionsColumns = () => {
       {
         id: 'date',
         Header: intl.get('payment_date'),
-        accessor: 'date',
+        accessor: 'formatted_payment_date',
         Cell: FormatDateCell,
         width: 110,
         className: 'date',
         textOverview: true,
       },
+      {
+        id: 'deposit_account_name',
+        Header: intl.get('invoice_transactions.column.withdrawal_account'),
+        accessor: 'deposit_account_name',
+        width: 120,
+        textOverview: true,
+      },
       {
         id: 'amount',
         Header: intl.get('amount'),
-        accessor: 'amount',
-        // accessor: 'formatted_amount',
+        accessor: 'formatted_payment_amount',
         align: 'right',
         width: 120,
         className: clsx(CLASSES.FONT_BOLD),
         textOverview: true,
       },
       {
-        id: 'payment_receive_no.',
+        id: 'payment_number.',
         Header: intl.get('payment_no'),
-        accessor: 'payment_receive_no',
+        accessor: 'payment_number',
         width: 100,
-        className: 'payment_receive_no',
+        className: 'payment_number',
       },
       {
-        id: 'reference_no',
+        id: 'payment_reference_no',
         Header: intl.get('reference_no'),
-        accessor: 'reference_no',
+        accessor: 'payment_reference_no',
         width: 90,
-        className: 'reference_no',
+        className: 'payment_reference_no',
         clickable: true,
         textOverview: true,
       },