feat(InvoiceDetails): invoice payment transactions ability access control.

src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetail.js

@@ -3,7 +3,8 @@ import { Tab } from '@blueprintjs/core';
 import styled from 'styled-components';
 import intl from 'react-intl-universal';
 
-import { Can, DrawerMainTabs } from 'components';
+import { useAbilityContext } from 'hooks/utils';
+import { DrawerMainTabs } from 'components';
 import {
   PaymentReceiveAction,
   AbilitySubject,
@@ -18,6 +19,8 @@ import InvoiceDetailTab from './InvoiceDetailTab';
  * @returns {React.JSX}
  */
 function InvoiceDetailsTabs() {
+  const ability = useAbilityContext();
+
   return (
     <DrawerMainTabs
       renderActiveTabPanelOnly={true}
@@ -33,13 +36,16 @@ function InvoiceDetailsTabs() {
         id={'journal_entries'}
         panel={<InvoiceGLEntriesTable />}
       />
-      {/* <Can I={PaymentReceiveAction.View} a={AbilitySubject.PaymentReceive}> */}
+      {ability.can(
-      <Tab
+        PaymentReceiveAction.View,
-        title={intl.get('payment_transactions')}
+        AbilitySubject.PaymentReceive,
-        id={'payment_transactions'}
+      ) && (
-        panel={<InvoicePaymentTransactionsTable />}
+        <Tab
-      />
+          title={intl.get('payment_transactions')}
-      {/* </Can> */}
+          id={'payment_transactions'}
+          panel={<InvoicePaymentTransactionsTable />}
+        />
+      )}
     </DrawerMainTabs>
   );
 }