feat: add refund transactions.

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);

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);

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,
+      },
+    ],
+    [],
+  );
+}

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);

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,
+      },
+    ],
+    [],
+  );
+}

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>
   );

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

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')}

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

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}

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,
+  },
 ];

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,
+  },
 ];

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

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}