feat: delete transaction.

src/common/cashflowOptions.js

@@ -30,3 +30,12 @@ export const addMoneyOut = [
     value: 'transfer_to_account',
   },
 ];
+
+export const TRANSACRIONS_TYPE = [
+  'OwnerContribution',
+  'OtherIncome',
+  'TransferFromAccount',
+  'OnwersDrawing',
+  'OtherExpense',
+  'TransferToAccount',
+];

src/containers/Alerts/CashFlow/AccountDeleteTransactionAlert.js

@@ -0,0 +1,80 @@
+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 { useDeleteCashflowTransaction } from 'hooks/query';
+
+import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
+import withAlertActions from 'containers/Alert/withAlertActions';
+
+import { compose } from 'utils';
+
+/**
+ * Account delete transaction alert.
+ */
+function AccountDeleteTransactionAlert({
+  name,
+
+  // #withAlertStoreConnect
+  isOpen,
+  payload: { referenceId },
+
+  // #withAlertActions
+  closeAlert,
+}) {
+  const { mutateAsync: deleteTransactionMutate, isLoading } =
+    useDeleteCashflowTransaction();
+
+  // handle cancel delete alert
+  const handleCancelDeleteAlert = () => {
+    closeAlert(name);
+  };
+
+  // handleConfirm delete transaction.
+  const handleConfirmTransactioneDelete = () => {
+    deleteTransactionMutate(referenceId)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('cash_flow_transaction.delete.alert_message'),
+          intent: Intent.SUCCESS,
+        });
+      })
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {},
+      )
+      .finally(() => {
+        closeAlert(name);
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={<T id={'delete'} />}
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancelDeleteAlert}
+      onConfirm={handleConfirmTransactioneDelete}
+      loading={isLoading}
+    >
+      <p>
+        <FormattedHTMLMessage
+          id={
+            'cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it'
+          }
+        />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(AccountDeleteTransactionAlert);

src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import AccountDeleteTransactionAlert from '../../Alerts/CashFlow/AccountDeleteTransactionAlert';
+
+/**
+ * Account transaction alert.
+ */
+export default function AccountTransactionsAlerts() {
+  return (
+    <div>
+      <AccountDeleteTransactionAlert name={'account-transaction-delete'} />
+    </div>
+  );
+}

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -8,9 +8,10 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import withSettings from '../../Settings/withSettings';
+import withAlertsActions from 'containers/Alert/withAlertActions';
 
 import { useMemorizedColumnsWidths } from '../../../hooks';
-import { useAccountTransactionsColumns } from './components';
+import { useAccountTransactionsColumns, ActionsMenu } from './components';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { compose } from 'utils';
 
@@ -20,6 +21,9 @@ import { compose } from 'utils';
 function AccountTransactionsDataTable({
   // #withSettings
   cashflowTansactionsTableSize,
+
+  // #withAlertsActions
+  openAlert,
 }) {
   // Retrieve table columns.
   const columns = useAccountTransactionsColumns();
@@ -35,6 +39,11 @@ function AccountTransactionsDataTable({
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
 
+  // handle delete transaction
+  const handleDeleteTransaction = ({ reference_id }) => {
+    openAlert('account-transaction-delete', { referenceId: reference_id });
+  };
+
   return (
     <DataTable
       noInitialFetch={true}
@@ -51,6 +60,7 @@ function AccountTransactionsDataTable({
       TableLoadingRenderer={TableSkeletonRows}
       TableRowsRenderer={TableVirtualizedListRows}
       TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      ContextMenu={ActionsMenu}
       // #TableVirtualizedListRows props.
       vListrowHeight={cashflowTansactionsTableSize == 'small' ? 32 : 40}
       vListOverscanRowCount={0}
@@ -58,8 +68,13 @@ function AccountTransactionsDataTable({
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
       size={cashflowTansactionsTableSize}
-      noResults={'There is deposit/withdrawal transactions on the current account.'}
+      noResults={
+        'There is deposit/withdrawal transactions on the current account.'
+      }
       className="table-constrant"
+      payload={{
+        onDelete: handleDeleteTransaction,
+      }}
     />
   );
 }
@@ -68,4 +83,5 @@ export default compose(
   withSettings(({ cashflowTransactionsSettings }) => ({
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
+  withAlertsActions,
 )(AccountTransactionsDataTable);

src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js

@@ -8,7 +8,7 @@ import { AccountTransactionsProvider } from './AccountTransactionsProvider';
 import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
 import AccountTransactionsDataTable from './AccountTransactionsDataTable';
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
-
+import AccountTransactionsAlerts from './AccountTransactionsAlerts';
 import { AccountTransactionsProgressBar } from './components';
 
 /**
@@ -26,6 +26,7 @@ function AccountTransactionsList() {
           <AccountTransactionsDataTable />
         </DashboardContentTable>
       </DashboardPageContent>
+      <AccountTransactionsAlerts />
     </AccountTransactionsProvider>
   );
 }

src/containers/CashFlow/AccountTransactions/components.js

@@ -1,9 +1,28 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { MaterialProgressBar } from 'components';
-import { FormatDateCell } from 'components';
-import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 
+import { Intent, Menu, MenuItem } from '@blueprintjs/core';
+
+import { MaterialProgressBar } from 'components';
+import { FormatDateCell, If, Icon } from 'components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { TRANSACRIONS_TYPE } from 'common/cashflowOptions';
+import { safeCallback } from 'utils';
+
+export function ActionsMenu({ payload: { onDelete }, row: { original } }) {
+  return (
+    <If condition={TRANSACRIONS_TYPE.includes(original.reference_type)}>
+      <Menu>
+        <MenuItem
+          text={intl.get('delete_transaction')}
+          intent={Intent.DANGER}
+          onClick={safeCallback(onDelete, original)}
+          icon={<Icon icon="trash-16" iconSize={16} />}
+        />
+      </Menu>
+    </If>
+  );
+}
 /**
  * Retrieve account transctions table columns.
  */
@@ -47,7 +66,7 @@ export function useAccountTransactionsColumns() {
         width: 110,
         className: 'deposit',
         textOverview: true,
-        align: 'right'
+        align: 'right',
       },
       {
         id: 'withdrawal',
@@ -65,7 +84,7 @@ export function useAccountTransactionsColumns() {
         className: 'running_balance',
         width: 150,
         textOverview: true,
-        align: 'right'
+        align: 'right',
       },
     ],
     [],