wip

packages/webapp/src/containers/Dialogs/Accounts/AccountBulkDeleteDialog.tsx

@@ -0,0 +1,103 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteAccounts } from '@/hooks/query/accounts';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withAccountsTableActions from '@/containers/Accounts/withAccountsTableActions';
+import { compose } from '@/utils';
+import { handleDeleteErrors } from '@/containers/Accounts/utils';
+
+function AccountBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withAccountsTableActions
+  setAccountsSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteAccounts, isLoading } = useBulkDeleteAccounts();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteAccounts({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_accounts_has_been_successfully_deleted'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('accounts-table');
+        closeDialog(dialogName);
+        setAccountsSelectedRows([]);
+      })
+      .catch((errors) => {
+        handleDeleteErrors(errors);
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_account_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_account_singular')}
+        resourcePluralLabel={intl.get('resource_account_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withAccountsTableActions,
+)(AccountBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/Bills/BillBulkDeleteDialog.tsx

@@ -0,0 +1,105 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteBills } from '@/hooks/query/bills';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withBillsActions from '@/containers/Purchases/Bills/BillsLanding/withBillsActions';
+import { compose } from '@/utils';
+
+function BillBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withBillsActions
+  setBillsSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteBills, isLoading } = useBulkDeleteBills();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteBills({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_bills_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('bills-table');
+        closeDialog(dialogName);
+        setBillsSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_bill_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_bill_singular')}
+        resourcePluralLabel={intl.get('resource_bill_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withBillsActions,
+)(BillBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/CreditNotes/CreditNoteBulkDeleteDialog.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteCreditNotes } from '@/hooks/query/creditNote';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withCreditNotesActions from '@/containers/Sales/CreditNotes/CreditNotesLanding/withCreditNotesActions';
+import { compose } from '@/utils';
+
+function CreditNoteBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withCreditNotesActions
+  setCreditNotesSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteCreditNotes, isLoading } =
+    useBulkDeleteCreditNotes();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteCreditNotes({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_credit_notes_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('credit-notes-table');
+        closeDialog(dialogName);
+        setCreditNotesSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_credit_note_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_credit_note_singular')}
+        resourcePluralLabel={intl.get('resource_credit_note_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withCreditNotesActions,
+)(CreditNoteBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/Estimates/EstimateBulkDeleteDialog.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteEstimates } from '@/hooks/query/estimates';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withEstimatesActions from '@/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions';
+import { compose } from '@/utils';
+
+function EstimateBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withEstimatesActions
+  setEstimatesSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteEstimates, isLoading } =
+    useBulkDeleteEstimates();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteEstimates({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_estimates_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+        closeDialog(dialogName);
+        setEstimatesSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_estimate_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_estimate_singular')}
+        resourcePluralLabel={intl.get('resource_estimate_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withEstimatesActions,
+)(EstimateBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/Expenses/ExpenseBulkDeleteDialog.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteExpenses } from '@/hooks/query/expenses';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withExpensesActions from '@/containers/Expenses/ExpensesLanding/withExpensesActions';
+import { compose } from '@/utils';
+
+function ExpenseBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withExpensesActions
+  setExpensesSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteExpenses, isLoading } =
+    useBulkDeleteExpenses();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteExpenses({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_expenses_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('expenses-table');
+        closeDialog(dialogName);
+        setExpensesSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_expense_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_expense_singular')}
+        resourcePluralLabel={intl.get('resource_expense_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withExpensesActions,
+)(ExpenseBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/Invoices/InvoiceBulkDeleteDialog.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withInvoiceActions from '@/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions';
+import { useBulkDeleteInvoices } from '@/hooks/query/invoices';
+import { AppToaster } from '@/components';
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+
+import { compose } from '@/utils';
+
+/**
+ * Invoice bulk delete dialog.
+ */
+function InvoiceBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withInvoiceActions
+  resetInvoicesSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteInvoices, isLoading } =
+    useBulkDeleteInvoices();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteInvoices({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_invoices_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('invoices-table');
+        closeDialog(dialogName);
+        resetInvoicesSelectedRows();
+      })
+      .catch((errors) => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_invoice_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_invoice_singular')}
+        resourcePluralLabel={intl.get('resource_invoice_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withInvoiceActions,
+)(InvoiceBulkDeleteDialog);

packages/webapp/src/containers/Dialogs/ManualJournals/ManualJournalBulkDeleteDialog.tsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteManualJournals } from '@/hooks/query/manualJournals';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withManualJournalsActions from '@/containers/Accounting/JournalsLanding/withManualJournalsActions';
+import { compose } from '@/utils';
+
+function ManualJournalBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withManualJournalsActions
+  setManualJournalsSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteManualJournals, isLoading } =
+    useBulkDeleteManualJournals();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteManualJournals({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_journals_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('manual-journals-table');
+        closeDialog(dialogName);
+        setManualJournalsSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{
+            resourcePlural: intl.get('resource_manual_journal_plural'),
+          }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_manual_journal_singular')}
+        resourcePluralLabel={intl.get('resource_manual_journal_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withManualJournalsActions,
+)(ManualJournalBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/PaymentsReceived/PaymentReceivedBulkDeleteDialog.tsx

@@ -0,0 +1,110 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeletePaymentReceives } from '@/hooks/query/paymentReceives';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withPaymentsReceivedActions from '@/containers/Sales/PaymentsReceived/PaymentsLanding/withPaymentsReceivedActions';
+import { compose } from '@/utils';
+
+function PaymentReceivedBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withPaymentsReceivedActions
+  setPaymentReceivesSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeletePaymentReceives, isLoading } =
+    useBulkDeletePaymentReceives();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeletePaymentReceives({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'the_payments_received_has_been_deleted_successfully',
+          ),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('payments-received-table');
+        closeDialog(dialogName);
+        setPaymentReceivesSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{
+            resourcePlural: intl.get('resource_payment_received_plural'),
+          }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_payment_received_singular')}
+        resourcePluralLabel={intl.get('resource_payment_received_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withPaymentsReceivedActions,
+)(PaymentReceivedBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/Receipts/ReceiptBulkDeleteDialog.tsx

@@ -0,0 +1,106 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteReceipts } from '@/hooks/query/receipts';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withReceiptsActions from '@/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions';
+import { compose } from '@/utils';
+
+function ReceiptBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withReceiptsActions
+  setReceiptsSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteReceipts, isLoading } =
+    useBulkDeleteReceipts();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteReceipts({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_receipts_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('sale-receipts-table');
+        closeDialog(dialogName);
+        setReceiptsSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_receipt_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_receipt_singular')}
+        resourcePluralLabel={intl.get('resource_receipt_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withReceiptsActions,
+)(ReceiptBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/VendorCredits/VendorCreditBulkDeleteDialog.tsx

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React from 'react';
+import { Button, Classes, Dialog, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, AppToaster } from '@/components';
+import intl from 'react-intl-universal';
+import { queryCache } from 'react-query';
+
+import BulkDeleteDialogContent from '@/containers/Dialogs/components/BulkDeleteDialogContent';
+import { useBulkDeleteVendorCredits } from '@/hooks/query/vendorCredit';
+import withDialogRedux from '@/components/DialogReduxConnect';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import withVendorsCreditNotesActions from '@/containers/Purchases/CreditNotes/CreditNotesLanding/withVendorsCreditNotesActions';
+import { compose } from '@/utils';
+
+function VendorCreditBulkDeleteDialog({
+  dialogName,
+  isOpen,
+  payload: {
+    ids = [],
+    deletableCount = 0,
+    undeletableCount = 0,
+    totalSelected = ids.length,
+  } = {},
+
+  // #withVendorsCreditNotesActions
+  setVendorsCreditNoteSelectedRows,
+
+  // #withDialogActions
+  closeDialog,
+}) {
+  const { mutateAsync: bulkDeleteVendorCredits, isLoading } =
+    useBulkDeleteVendorCredits();
+
+  const handleCancel = () => {
+    closeDialog(dialogName);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteVendorCredits({
+      ids,
+      skipUndeletable: true,
+    })
+      .then(() => {
+        AppToaster.show({
+          message: intl.get(
+            'the_vendor_credits_has_been_deleted_successfully',
+          ),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('vendor-credits-table');
+        closeDialog(dialogName);
+        setVendorsCreditNoteSelectedRows([]);
+      })
+      .catch(() => {
+        AppToaster.show({
+          message: intl.get('something_went_wrong'),
+          intent: Intent.DANGER,
+        });
+      });
+  };
+
+  return (
+    <Dialog
+      title={
+        <T
+          id={'bulk_delete_dialog_title'}
+          values={{ resourcePlural: intl.get('resource_vendor_credit_plural') }}
+        />
+      }
+      isOpen={isOpen}
+      onClose={handleCancel}
+      canEscapeKeyClose={!isLoading}
+      canOutsideClickClose={!isLoading}
+    >
+      <BulkDeleteDialogContent
+        totalSelected={totalSelected}
+        deletableCount={deletableCount}
+        undeletableCount={undeletableCount}
+        resourceSingularLabel={intl.get('resource_vendor_credit_singular')}
+        resourcePluralLabel={intl.get('resource_vendor_credit_plural')}
+      />
+
+      <div className={Classes.DIALOG_FOOTER}>
+        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+          <Button onClick={handleCancel} disabled={isLoading}>
+            <T id={'cancel'} />
+          </Button>
+
+          <Button
+            intent={Intent.DANGER}
+            onClick={handleConfirmBulkDelete}
+            loading={isLoading}
+            disabled={deletableCount === 0 || isLoading}
+          >
+            <T id={'delete_count'} values={{ count: deletableCount }} />
+          </Button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+export default compose(
+  withDialogRedux(),
+  withDialogActions,
+  withVendorsCreditNotesActions,
+)(VendorCreditBulkDeleteDialog);
+

packages/webapp/src/containers/Dialogs/components/BulkDeleteDialogContent.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import React from 'react';
+import { Classes, Intent, Tag } from '@blueprintjs/core';
+import { FormattedMessage as T } from '@/components';
+import { x } from '@xstyled/emotion';
+
+interface BulkDeleteDialogContentProps {
+  totalSelected: number;
+  deletableCount: number;
+  undeletableCount: number;
+  resourceSingularLabel: string;
+  resourcePluralLabel: string;
+}
+
+function BulkDeleteDialogContent({
+  totalSelected,
+  deletableCount,
+  undeletableCount,
+  resourceSingularLabel,
+  resourcePluralLabel,
+}: BulkDeleteDialogContentProps) {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      <x.p fontWeight="semibold">
+        <T
+          id={'bulk_delete_selected_summary'}
+          values={{ count: totalSelected, resourcePlural: resourcePluralLabel }}
+        />
+      </x.p>
+
+      <x.div display="flex" alignItems="center" gap={'12px'}>
+        <Tag intent={Intent.DANGER} minimal>
+          {deletableCount}
+        </Tag>
+        <x.div>
+          <T
+            id={'bulk_delete_delete_row_prefix'}
+            values={{ resourceSingular: resourceSingularLabel }}
+          />{' '}
+          <x.span fontWeight="semibold" color="danger">
+            <T id={'bulk_delete_delete_row_status'} />
+          </x.span>
+        </x.div>
+      </x.div>
+
+      <x.div display="flex" alignItems="center" gap={'12px'} mt={'8px'}>
+        <Tag intent={Intent.INFO} minimal>
+          {undeletableCount}
+        </Tag>
+        <x.div>
+          <T
+            id={'bulk_delete_archive_row_prefix'}
+            values={{ resourceSingular: resourceSingularLabel }}
+          />{' '}
+          <x.span fontWeight="semibold" color="info">
+            <T id={'bulk_delete_archive_row_status'} />
+          </x.span>
+        </x.div>
+      </x.div>
+
+      <x.p mt={'12px'}>
+        <T
+          id={'bulk_delete_selected_description'}
+          values={{ resourcePlural: resourcePluralLabel }}
+        />
+      </x.p>
+
+      <x.div
+        pt={'12px'}
+        mt={'16px'}
+        borderTop="1px solid rgba(255, 255, 255, 0.2)"
+      >
+        <x.span fontWeight="bold">
+          <T id={'note'} />
+          {':'}
+        </x.span>
+        <x.p>
+          <T
+            id={'bulk_delete_note_description'}
+            values={{ resourcePlural: resourcePluralLabel }}
+          />
+        </x.p>
+      </x.div>
+    </div>
+  );
+}
+
+export default BulkDeleteDialogContent;
+