From 2a48d9be519e6d979a156bc837b7111765765b4d Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 5 Dec 2021 19:30:52 +0200
Subject: [PATCH] feat: add refund transactions.

---
 .../RefundCreditNoteDeleteAlert.js            | 68 ++++++++++++++++++
 .../RefundVendorCreditDeleteAlert.js          | 70 +++++++++++++++++++
 .../CreditNoteDetail.js                       |  6 ++
 .../CreditNoteDetailActionsBar.js             | 13 ++++
 .../CreditNoteDetailDrawerProvider.js         | 16 ++++-
 .../RefundCreditNoteTransactionsTable.js      | 48 +++++++++++++
 .../components.js                             | 59 ++++++++++++++++
 .../RefundVendorCreditTransactionsTable.js    | 46 ++++++++++++
 .../components.js                             | 57 +++++++++++++++
 .../VendorCreditDetail.js                     |  6 ++
 .../VendorCreditDetailActionsBar.js           | 11 +++
 .../VendorCreditDetailDrawerProvider.js       | 18 ++++-
 .../VendorsCreditNoteDataTable.js             | 10 +++
 .../CreditNotesLanding/components.js          |  7 +-
 .../CreditNotes/VendorCreditNotesAlerts.js    |  8 +++
 .../Sales/CreditNotes/CreditNotesAlerts.js    |  8 +++
 .../CreditNotesDataTable.js                   | 10 +++
 .../CreditNotesLanding/components.js          |  7 +-
 src/hooks/query/creditNote.js                 | 65 +++++++++++++++++
 src/hooks/query/types.js                      |  2 +
 src/hooks/query/vendorCredit.js               | 69 ++++++++++++++++++
 src/lang/en/index.json                        | 47 ++++++++++---
 src/style/pages/RefundCreditNote/List.scss    | 27 +++++++
 src/style/pages/RefundVendorCredit/List.scss  | 27 +++++++
 24 files changed, 688 insertions(+), 17 deletions(-)
 create mode 100644 src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
 create mode 100644 src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
 create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js
 create mode 100644 src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js
 create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js
 create mode 100644 src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
 create mode 100644 src/style/pages/RefundCreditNote/List.scss
 create mode 100644 src/style/pages/RefundVendorCredit/List.scss

diff --git a/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js b/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
new file mode 100644
index 000000000..9fe3774ad
--- /dev/null
+++ b/src/containers/Alerts/CreditNotes/RefundCreditNoteDeleteAlert.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useDeleteRefundCreditNote } from 'hooks/query';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ * Refund credit transactions delete alert
+ */
+function RefundCreditNoteDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { creditNoteId },
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteRefundCreditMutate, isLoading } =
+    useDeleteRefundCreditNote();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundCreditDelete = () => {
+    deleteRefundCreditMutate(creditNoteId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('refund_credit_transactions.alert.delete_message'),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(() => {});
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_credit_transactions.once_your_delete_this_refund_credit_note`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(RefundCreditNoteDeleteAlert);
diff --git a/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js b/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
new file mode 100644
index 000000000..526d92bfb
--- /dev/null
+++ b/src/containers/Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { FormattedMessage as T, FormattedHTMLMessage } from 'components';
+import { Intent, Alert } from '@blueprintjs/core';
+import { AppToaster } from 'components';
+import { useDeleteRefundVendorCredit } from 'hooks/query';
+
+import withAlertActions from 'containers/Alert/withAlertActions';
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+
+import { compose } from 'utils';
+
+/**
+ * Refund Vendor transactions delete alert.
+ */
+function RefundVendorCreditDeleteAlert({
+  name,
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { vendorCreditId },
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteRefundVendorCreditMutate, isLoading } =
+    useDeleteRefundVendorCredit();
+
+  // Handle cancel delete.
+  const handleCancelAlert = () => {
+    closeAlert(name);
+  };
+
+  // Handle confirm delete .
+  const handleConfirmRefundVendorCreditDelete = () => {
+    deleteRefundVendorCreditMutate(vendorCreditId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'refund_vendor_credit_transactions.alert.delete_message',
+          ),
+          intent: Intent.SUCCESS,
+        });
+        closeAlert(name);
+      })
+      .catch(() => {});
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelAlert}
+      onConfirm={handleConfirmRefundVendorCreditDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T
+          id={`refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit`}
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(RefundVendorCreditDeleteAlert);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
index 74f7e760b..3e992afda 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetail.js
+++ b/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>
   );
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
index a7b92ae21..b6e876638 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailActionsBar.js
+++ b/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} />}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js b/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js
index 1b0673d8c..6dc49e32e 100644
--- a/src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js
+++ b/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')}
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/RefundCreditNoteTransactionsTable.js
new file mode 100644
index 000000000..b192330f2
--- /dev/null
+++ b/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);
diff --git a/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js b/src/containers/Drawers/CreditNoteDetailDrawer/RefundCreditNoteTransactions/components.js
new file mode 100644
index 000000000..1d3c12a93
--- /dev/null
+++ b/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,
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js
new file mode 100644
index 000000000..4c924f531
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { DataTable, Card } from 'components';
+
+import 'style/pages/RefundVendorCredit/List.scss';
+
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import { useVendorCreditDetailDrawerContext } from '../VendorCreditDetailDrawerProvider';
+import {
+  useRefundCreditTransactionsTableColumns,
+  ActionsMenu,
+} from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Refund vendor transactions table.
+ */
+function RefundVendorCreditTransactionsTable({
+  // #withAlertsActions
+  openAlert,
+}) {
+  const { refundVendorCredit } = useVendorCreditDetailDrawerContext();
+
+  const columns = useRefundCreditTransactionsTableColumns();
+
+  // Handle delete refund vendor credit.
+  const handleDeleteRefundVendorCredit = ({ id }) => {
+    openAlert('refund-vendor-delete', { vendorCreditId: id });
+  };
+
+  return (
+    <Card>
+      <DataTable
+        columns={columns}
+        data={refundVendorCredit}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteRefundVendorCredit,
+        }}
+        className={'datatable--refund-transactions'}
+      />
+    </Card>
+  );
+}
+
+export default compose(withAlertsActions)(RefundVendorCreditTransactionsTable);
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
new file mode 100644
index 000000000..2eb0dc9d2
--- /dev/null
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/RefundVendorCreditTransactions/components.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Intent, MenuItem, Menu } from '@blueprintjs/core';
+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_vendor_credit.column.amount'),
+        accessor: 'amount',
+        width: 100,
+        className: 'amount',
+        align: 'right',
+      },
+      {
+        Header: intl.get('refund_vendor_credit.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,
+      },
+    ],
+    [],
+  );
+}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
index e603c667f..cbc825676 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetail.js
@@ -4,6 +4,7 @@ import intl from 'react-intl-universal';
 import { DrawerMainTabs } from 'components';
 
 import VendorCreditDetailPanel from './VendorCreditDetailPanel';
+import RefundVendorCreditTransactionsTable from './RefundVendorCreditTransactions/RefundVendorCreditTransactionsTable';
 import clsx from 'classnames';
 
 import VendorCreditDetailCls from '../../../style/components/Drawers/VendorCreditDetail.module.scss';
@@ -20,6 +21,11 @@ export default function VendorCreditDetail() {
           id={'details'}
           panel={<VendorCreditDetailPanel />}
         />
+        <Tab
+          title={intl.get('credit_note.drawer.label_refund_transactions')}
+          id={'refund_transactions'}
+          panel={<RefundVendorCreditTransactionsTable />}
+        />
       </DrawerMainTabs>
     </div>
   );
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
index 9c720ea52..d2cfdead2 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailActionsBar.js
@@ -42,6 +42,9 @@ function VendorCreditDetailActionsBar({
     closeDrawer('vendor-credit-detail-drawer');
   };
 
+  const handleRefundVendorCredit = () => {
+    openDialog('refund-vendor-credit', { vendorCreditId });
+  };
   // Handle delete credit note.
   const handleDeleteVendorCredit = () => {
     openAlert('vendor-credit-delete', { vendorCreditId });
@@ -57,6 +60,14 @@ function VendorCreditDetailActionsBar({
           onClick={handleEditVendorCredit}
         />
         <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="quick-payment-16" iconSize={16} />}
+          text={'Refund'}
+          // text={<T id={'add_payment'} />}
+          onClick={handleRefundVendorCredit}
+        />
+        <NavbarDivider />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon={'trash-16'} iconSize={16} />}
diff --git a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
index 74236d87c..eb15c6d20 100644
--- a/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
+++ b/src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailDrawerProvider.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { useVendorCredit } from 'hooks/query';
+import { useVendorCredit, useRefundVendorCredit } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
 
 const VendorCreditDetailDrawerContext = React.createContext();
@@ -15,13 +15,27 @@ function VendorCreditDetailDrawerProvider({ vendorCreditId, ...props }) {
       enabled: !!vendorCreditId,
     });
 
+  // Handle fetch refund credit note.
+  const {
+    data: refundVendorCredit,
+    isFetching: isRefundVendorCreditFetching,
+    isLoading: isRefundVendorCreditLoading,
+  } = useRefundVendorCredit(vendorCreditId, {
+    enabled: !!vendorCreditId,
+  });
+
   const provider = {
     vendorCredit,
+    refundVendorCredit,
+    isRefundVendorCreditLoading,
+    isRefundVendorCreditFetching,
     vendorCreditId,
   };
 
   return (
-    <DrawerLoading loading={isVendorCreditLoading}>
+    <DrawerLoading
+      loading={isVendorCreditLoading || isRefundVendorCreditLoading}
+    >
       <DrawerHeaderContent
         name="vendor-credit-detail-drawer"
         title={intl.get('vendor_credit.drawer_vendor_credit_detail')}
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
index 05e4389a7..dc2ade068 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/VendorsCreditNoteDataTable.js
@@ -13,6 +13,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withVendorsCreditNotesActions from './withVendorsCreditNotesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from '../../../Settings/withSettings';
 
 import { useVendorsCreditNoteTableColumns, ActionsMenu } from './components';
@@ -33,6 +34,9 @@ function VendorsCreditNoteDataTable({
   // #withDrawerActions
   openDrawer,
 
+  // #withDialogAction
+  openDialog,
+
   // #withSettings
   creditNoteTableSize,
 }) {
@@ -92,6 +96,10 @@ function VendorsCreditNoteDataTable({
     });
   };
 
+  const handleRefundCreditVendor = ({ id }) => {
+    openDialog('refund-vendor-credit', { vendorCreditId: id });
+  };
+
   return (
     <DashboardContentTable>
       <DataTable
@@ -118,6 +126,7 @@ function VendorsCreditNoteDataTable({
           onViewDetails: handleViewDetailVendorCredit,
           onDelete: handleDeleteVendorCreditNote,
           onEdit: hanldeEditVendorCreditNote,
+          onRefund: handleRefundCreditVendor,
         }}
       />
     </DashboardContentTable>
@@ -129,6 +138,7 @@ export default compose(
   withVendorsCreditNotesActions,
   withAlertsActions,
   withDrawerActions,
+  withDialogActions,
   withSettings(({ vendorsCreditNoteSetting }) => ({
     creditNoteTableSize: vendorsCreditNoteSetting?.tableSize,
   })),
diff --git a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
index 20f182f2d..fd4f4adb0 100644
--- a/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Purchases/CreditNotes/CreditNotesLanding/components.js
@@ -25,7 +25,7 @@ import { formattedAmount, safeCallback, calculateStatus } from 'utils';
  * Actions menu.
  */
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onViewDetails },
+  payload: { onEdit, onDelete, onRefund, onViewDetails },
   row: { original },
 }) {
   return (
@@ -41,6 +41,11 @@ export function ActionsMenu({
         text={intl.get('vendor_credits.action.edit_vendor_credit')}
         onClick={safeCallback(onEdit, original)}
       />
+      <MenuItem
+        icon={<Icon icon="quick-payment-16" />}
+        text={intl.get('vendor_credits.action.refund_vendor_credit')}
+        onClick={safeCallback(onRefund, original)}
+      />
       <MenuItem
         text={intl.get('vendor_credits.action.delete_vendor_credit')}
         intent={Intent.DANGER}
diff --git a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
index fb0b1b3ff..56320a325 100644
--- a/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
+++ b/src/containers/Purchases/CreditNotes/VendorCreditNotesAlerts.js
@@ -4,6 +4,10 @@ const VendorCreditDeleteAlert = React.lazy(() =>
   import('../../Alerts/VendorCeditNotes/VendorCreditDeleteAlert'),
 );
 
+const RefundVendorCreditDeleteAlert = React.lazy(() =>
+  import('../../Alerts/VendorCeditNotes/RefundVendorCreditDeleteAlert'),
+);
+
 /**
  * Vendor Credit notes alerts.
  */
@@ -12,4 +16,8 @@ export default [
     name: 'vendor-credit-delete',
     component: VendorCreditDeleteAlert,
   },
+  {
+    name: 'refund-vendor-delete',
+    component: RefundVendorCreditDeleteAlert,
+  },
 ];
diff --git a/src/containers/Sales/CreditNotes/CreditNotesAlerts.js b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
index 58a1f4de6..7bf70e30b 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesAlerts.js
@@ -4,6 +4,10 @@ const CreditNoteDeleteAlert = React.lazy(() =>
   import('../../Alerts/CreditNotes/CreditNoteDeleteAlert'),
 );
 
+const RefundCreditNoteDeleteAlert = React.lazy(() =>
+  import('../../Alerts/CreditNotes/RefundCreditNoteDeleteAlert'),
+);
+
 /**
  * Credit notes alerts.
  */
@@ -12,4 +16,8 @@ export default [
     name: 'credit-note-delete',
     component: CreditNoteDeleteAlert,
   },
+  {
+    name: 'refund-credit-delete',
+    component: RefundCreditNoteDeleteAlert,
+  },
 ];
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
index b66541b6f..98fb9bc4e 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesDataTable.js
@@ -13,6 +13,7 @@ import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withCreditNotesActions from './withCreditNotesActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
 import withSettings from '../../../Settings/withSettings';
 
 import { useCreditNoteTableColumns, ActionsMenu } from './components';
@@ -33,6 +34,9 @@ function CreditNotesDataTable({
   // #withDrawerActions
   openDrawer,
 
+  // #withDialogAction
+  openDialog,
+
   // #withSettings
   creditNoteTableSize,
 }) {
@@ -92,6 +96,10 @@ function CreditNotesDataTable({
     });
   };
 
+  const handleRefundCreditNote = ({ id }) => {
+    openDialog('refund-credit-note', { creditNoteId: id });
+  };
+
   return (
     <DashboardContentTable>
       <DataTable
@@ -117,6 +125,7 @@ function CreditNotesDataTable({
           onViewDetails: handleViewDetailCreditNote,
           onDelete: handleDeleteCreditNote,
           onEdit: hanldeEditCreditNote,
+          onRefund: handleRefundCreditNote,
         }}
       />
     </DashboardContentTable>
@@ -128,6 +137,7 @@ export default compose(
   withCreditNotesActions,
   withDrawerActions,
   withAlertsActions,
+  withDialogActions,
   withSettings(({ creditNoteSettings }) => ({
     creditNoteTableSize: creditNoteSettings?.tableSize,
   })),
diff --git a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
index e7b4a31bc..2ee80875e 100644
--- a/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
+++ b/src/containers/Sales/CreditNotes/CreditNotesLanding/components.js
@@ -22,7 +22,7 @@ import {
 import { formattedAmount, safeCallback, calculateStatus } from 'utils';
 
 export function ActionsMenu({
-  payload: { onEdit, onDelete, onViewDetails },
+  payload: { onEdit, onDelete, onRefund, onViewDetails },
   row: { original },
 }) {
   return (
@@ -38,6 +38,11 @@ export function ActionsMenu({
         text={intl.get('credit_note.action.edit_credit_note')}
         onClick={safeCallback(onEdit, original)}
       />
+      <MenuItem
+        icon={<Icon icon="quick-payment-16" />}
+        text={intl.get('credit_note.action.refund_credit_note')}
+        onClick={safeCallback(onRefund, original)}
+      />
       <MenuItem
         text={intl.get('credit_note.action.delete_credit_note')}
         intent={Intent.DANGER}
diff --git a/src/hooks/query/creditNote.js b/src/hooks/query/creditNote.js
index ee3f8f61e..db43afc33 100644
--- a/src/hooks/query/creditNote.js
+++ b/src/hooks/query/creditNote.js
@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate settings.
   queryClient.invalidateQueries([t.SETTING, t.SETTING_CREDIT_NOTES]);
 
+  // Invalidate refund credit
+  queryClient.invalidateQueries(t.REFUND_CREDIT_NOTE);
+
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 };
@@ -143,3 +146,65 @@ export function useRefreshCreditNotes() {
     },
   };
 }
+
+/**
+ * Create Round creidt note
+ */
+export function useCreateRefundCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`sales/credit_notes/${id}/refund`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given refund credit note.
+ */
+export function useDeleteRefundCreditNote(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`sales/credit_notes/refunds/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useRefundCreditNote(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_CREDIT_NOTE, id],
+    { method: 'get', url: `sales/credit_notes/${id}/refund`, ...requestProps },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js
index 374c6540c..68d14a525 100644
--- a/src/hooks/query/types.js
+++ b/src/hooks/query/types.js
@@ -111,11 +111,13 @@ const ROLES = {
 const CREDIT_NOTES = {
   CREDIT_NOTE: 'CREDIT_NOTE',
   CREDIT_NOTES: 'CREDIT_NOTES',
+  REFUND_CREDIT_NOTE: 'REFUND_CREDIT_NOTE',
 };
 
 const VENDOR_CREDIT_NOTES = {
   VENDOR_CREDITS: 'VENDOR_CREDITS',
   VENDOR_CREDIT: 'VENDOR_CREDIT',
+  REFUND_VENDOR_CREDIT:'REFUND_VENDOR_CREDIT'
 };
 
 const SETTING = {
diff --git a/src/hooks/query/vendorCredit.js b/src/hooks/query/vendorCredit.js
index d4b5206f6..e4d2a93a8 100644
--- a/src/hooks/query/vendorCredit.js
+++ b/src/hooks/query/vendorCredit.js
@@ -24,6 +24,9 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate settings.
   queryClient.invalidateQueries([t.SETTING, t.SETTING_VENDOR_CREDITS]);
 
+  // Invalidate refund vendor credit
+  queryClient.invalidateQueries(t.REFUND_VENDOR_CREDIT);
+
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 };
@@ -150,3 +153,69 @@ export function useRefreshVendorCredits() {
     },
   };
 }
+
+/**
+ * Create Round vendor creidt
+ */
+export function useCreateRefundVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    ([id, values]) =>
+      apiRequest.post(`purchases/vendor-credit/${id}/refund`, values),
+    {
+      onSuccess: (res, [id, values]) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate credit note query.
+        queryClient.invalidateQueries([t.VENDOR_CREDIT, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Delete the given refund vendor credit.
+ */
+export function useDeleteRefundVendorCredit(props) {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation(
+    (id) => apiRequest.delete(`purchases/vendor-credit/refunds/${id}`),
+    {
+      onSuccess: (res, id) => {
+        // Common invalidate queries.
+        commonInvalidateQueries(queryClient);
+
+        // Invalidate vendor credit query.
+        queryClient.invalidateQueries([t.CREDIT_NOTE, id]);
+      },
+      ...props,
+    },
+  );
+}
+
+/**
+ * Retrieve refund credit note detail of the given id.
+ * @param {number} id
+ *
+ */
+export function useRefundVendorCredit(id, props, requestProps) {
+  return useRequestQuery(
+    [t.REFUND_VENDOR_CREDIT, id],
+    {
+      method: 'get',
+      url: `purchases/vendor-credit/${id}/refund`,
+      ...requestProps,
+    },
+    {
+      select: (res) => res.data.data,
+      defaultData: {},
+      ...props,
+    },
+  );
+}
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 3c7434950..4d4fae799 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -1493,6 +1493,7 @@
   "credit_note.label.new_credit_note": "New Credit Note",
   "credit_note.label.edit_credit_note": "Edit Credit Note",
   "credit_note.action.edit_credit_note": "Edit Credit note",
+  "credit_note.action.refund_credit_note": "Refund Credit note",
   "credit_note.action.delete_credit_note": "Delete Credit note",
   "credit_note.column.credit_note_no": "Credit Note #",
   "credit_note.column.credit_date": "Credit Date",
@@ -1512,6 +1513,7 @@
   "vendor_credits.column.vendor_credit_no": "Vendor Credit #",
   "vendor_credits.action.new_vendor_credit": "New Vendor Credit",
   "vendor_credits.action.edit_vendor_credit": "Edit Vendot Credit",
+  "vendor_credits.action.refund_vendor_credit": "Refund Vendot Credit",
   "vendor_credits.action.delete_vendor_credit": "Delete Vendot Credit",
   "vendor_credits.success_message": "The vendor credit has been created successfully",
   "vendor_credits.edit_success_message": "The vendor credit has been edited successfully.",
@@ -1525,18 +1527,41 @@
   "vendor_credit.auto_increment.auto": "Your vendor credit  numbers are set on auto-increment mode. Are you sure changing this setting?",
   "vendor_credit.auto_increment.manually": "Your vendor credit  numbers are set on manual mode. Are you sure chaning this settings?",
   "setting_your_auto_generated_vendor_credit_number": "Setting your auto-generated vendor credit number",
-  "credit_note.drawer_credit_note_detail":"Credit Note details",
-  "credit_note.drawer.label_credit_note_no":"Credit Note #",
-  "credit_note.drawer.label_credit_note_date":"Credit Date",
-  "credit_note.drawer.label_create_at":"Create at",
+  "credit_note.drawer_credit_note_detail": "Credit Note details",
+  "credit_note.drawer.label_credit_note_no": "Credit Note #",
+  "credit_note.drawer.label_credit_note_date": "Credit Date",
+  "credit_note.drawer.label_create_at": "Create at",
   "credit_note.drawer.label_total": "TOTAL",
   "credit_note.drawer.label_subtotal": "Subtotal",
-  "vendor_credit.drawer_vendor_credit_detail":"Vendor Credit details",
-  "vendor_credit.drawer.label_vendor_credit_no":"Vendor Credit #",
-  "vendor_credit.drawer.label_vendor_credit_date":"Vendor Credit Date",
-  "vendor_credit.drawer.label_create_at":"Create at",
+  "credit_note.drawer.label_refund_transactions": "Refund transactions",
+  "vendor_credit.drawer_vendor_credit_detail": "Vendor Credit details",
+  "vendor_credit.drawer.label_vendor_credit_no": "Vendor Credit #",
+  "vendor_credit.drawer.label_vendor_credit_date": "Vendor Credit Date",
+  "vendor_credit.drawer.label_create_at": "Create at",
   "vendor_credit.drawer.label_total": "TOTAL",
   "vendor_credit.drawer.label_subtotal": "Subtotal",
-  "landed_cost.dialog.label_select_transaction":"Select transaction",
-  "landed_cost.dialog.label_select_transaction_entry":"Select transaction entry"
-}
\ No newline at end of file
+  "landed_cost.dialog.label_select_transaction": "Select transaction",
+  "landed_cost.dialog.label_select_transaction_entry": "Select transaction entry",
+  "refund_credit_note.dialog.label": "Refund Credit Note",
+  "refund_credit_note.dialog.success_message": "The customer credit note refund has been created successfully.",
+  "refund_credit_note.dialog.refund_date": "Refund date",
+  "refund_credit_note.dialog.amount": "Amount",
+  "refund_credit_note.dialog.description": "Description",
+  "refund_credit_note.dialog.form_account": "Form account",
+  "refund_vendor_credit.dialog.label": "Refund Vendor Credit",
+  "refund_vendor_credit.dialog.success_message": "The vendor credit refund has been created successfully.",
+  "refund_vendor_credit.dialog.refund_date": "Refund date",
+  "refund_vendor_credit.dialog.amount": "Amount",
+  "refund_vendor_credit.dialog.description": "Description",
+  "refund_vendor_credit.dialog.deposit_to_account": "Deposit to account",
+  "refund_credit_transactions.column.amount_refunded": "Amount refunded",
+  "refund_credit_transactions.column.withdrawal_account": "Withdrawal account",
+  "refund_credit_transactions.alert.delete_message":"The credit note refund has been deleted successfully.",
+  "refund_credit_transactions.once_your_delete_this_refund_credit_note":"Once your delete this refund credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?",
+  "refund_vendor_credit.column.amount": "Amount refunded",
+  "refund_vendor_credit.column.withdrawal_account": "Withdrawal account",
+  "refund_vendor_credit_transactions.alert.delete_message":"The vendor credit refund has been deleted successfully.",
+  "refund_vendor_credit_transactions.once_your_delete_this_refund_vendor_credit":"Once your delete this refund vendor credit note, you won't be able to restore it later, Are your sure you want to delete this transaction?",
+  "refund": "Refund"
+}
+
diff --git a/src/style/pages/RefundCreditNote/List.scss b/src/style/pages/RefundCreditNote/List.scss
new file mode 100644
index 000000000..05ebf36d1
--- /dev/null
+++ b/src/style/pages/RefundCreditNote/List.scss
@@ -0,0 +1,27 @@
+.datatable--refund-transactions {
+  padding: 12px;
+  .table {
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
+      }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+
+        &.credit,
+        &.debit {
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}
diff --git a/src/style/pages/RefundVendorCredit/List.scss b/src/style/pages/RefundVendorCredit/List.scss
new file mode 100644
index 000000000..05ebf36d1
--- /dev/null
+++ b/src/style/pages/RefundVendorCredit/List.scss
@@ -0,0 +1,27 @@
+.datatable--refund-transactions {
+  padding: 12px;
+  .table {
+    .tbody,
+    .thead {
+      .tr .th {
+        padding: 8px 8px;
+        background-color: #fff;
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        border-top: 1px solid #000;
+      }
+    }
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+
+        &.credit,
+        &.debit {
+          font-weight: 600;
+        }
+      }
+    }
+  }
+}