feat: add refund transactions.

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js

@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { DrawerMainTabs } from 'components';
 
 import CreditNoteDetailPanel from './CreditNoteDetailPanel';
+import RefundCreditNoteTransactionsTable from './RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable';
 import clsx from 'classnames';
 
 import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDetails.module.scss';
@@ -20,6 +21,11 @@ export default function CreditNoteDetail() {
           id={'details'}
           panel={<CreditNoteDetailPanel />}
         />
+        <Tab
+          title={intl.get('credit_note.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundCreditNoteTransactionsTable />}
+        />
       </DrawerMainTabs>
     </div>
   );

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js

@@ -42,6 +42,10 @@ function CreditNoteDetailActionsBar({
     closeDrawer('credit-note-detail-drawer');
   };
 
+  const handleRefundCreditNote = () => {
+    openDialog('refund-credit-note', { creditNoteId });
+  };
+
   // Handle delete credit note.
   const handleDeleteCreditNote = () => {
     openAlert('credit-note-delete', { creditNoteId });
@@ -57,6 +61,15 @@ function CreditNoteDetailActionsBar({
           onClick={handleEditCreditNote}
         />
         <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="quick-payment-16" iconSize={16} />}
+          text={'Refund'}
+          // text={<T id={'add_payment'} />}
+          onClick={handleRefundCreditNote}
+        />
+        <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'trash-16'} iconSize={16} />}

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useCreditNote } from 'hooks/query';
+import { useCreditNote, useRefundCreditNote } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const CreditNoteDetailDrawerContext = React.createContext();
@@ -17,13 +17,25 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
     },
   );
 
+  // Handle fetch refund credit note.
+  const {
+    data: refundCreditNote,
+    isFetching: isRefundCreditNoteFetching,
+    isLoading: isRefundCreditNoteLoading,
+  } = useRefundCreditNote(creditNoteId, {
+    enabled: !!creditNoteId,
+  });
+
   const provider = {
     creditNote,
+    refundCreditNote,
+    isRefundCreditNoteLoading,
+    isRefundCreditNoteFetching,
     creditNoteId,
   };
 
   return (
-    <DrawerLoading loading={isCreditNoteLoading}>
+    <DrawerLoading loading={isCreditNoteLoading || isRefundCreditNoteLoading}>
       <DrawerHeaderContent
         name="credit-note-detail-drawer"
         title={intl.get('credit_note.drawer_credit_note_detail')}

src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import '../../../../style/pages/RefundCreditNote/List.scss';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+
+import { useCreditNoteDetailDrawerContext } from '../CreditNoteDetailDrawerProvider';
+import {
+  useRefundCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit note transactions table.
+ */
+function RefundCreditNoteTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundCreditNote } = useCreditNoteDetailDrawerContext();
+
+  const columns = useRefundCreditTransactionsTableColumns();
+
+  // Handle delete refund credit.
+
+  const handleDeleteRefundCreditNote = ({ id }) => {
+    openAlert('refund-credit-delete', { creditNoteId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={refundCreditNote}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteRefundCreditNote,
+        }}
+        className={'datatable--refund-transactions'}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundCreditNoteTransactionsTable);

src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+import { FormatDateCell, Icon } from 'components';
+import { safeCallback } from 'utils';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={intl.get('delete_transaction')}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
+  );
+}
+
+export function useRefundCreditTransactionsTableColumns() {
+  return React.useMemo(
+    () => [
+      {
+        Header: intl.get('date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 100,
+        className: 'date',
+      },
+      {
+        Header: intl.get('refund_credit_transactions.column.amount_refunded'),
+        accessor: 'amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+      {
+        Header: intl.get(
+          'refund_credit_transactions.column.withdrawal_account',
+        ),
+        accessor: ({ from_account }) => from_account.name,
+        width: 100,
+        className: 'from_account',
+      },
+      {
+        id: 'reference_no',
+        Header: intl.get('reference_no'),
+        accessor: 'reference_no',
+        width: 100,
+        className: 'reference_no',
+        textOverview: true,
+      },
+    ],
+    [],
+  );
+}