wip

packages/webapp/src/containers/Accounts/AccountsActionsBar.tsx

@@ -34,6 +34,7 @@ import { useHistory } from 'react-router-dom';
 import { useRefreshAccounts } from '@/hooks/query/accounts';
 import { useAccountsChartContext } from './AccountsChartProvider';
 import { useDownloadExportPdf } from '@/hooks/query/FinancialReports/use-export-pdf';
+import { useBulkDeleteAccountsDialog } from './hooks/use-bulk-delete-accounts-dialog';
 
 import withAccounts from './withAccounts';
 import withAccountsTableActions from './withAccountsTableActions';
@@ -78,9 +79,15 @@ function AccountsActionsBar({
   // Accounts refresh action.
   const { refresh } = useRefreshAccounts();
 
+  // Bulk delete accounts dialog.
+  const {
+    openBulkDeleteDialog,
+    isValidatingBulkDeleteAccounts,
+  } = useBulkDeleteAccountsDialog();
+
   // Handle bulk accounts delete.
   const handleBulkDelete = () => {
-    openAlert('accounts-bulk-delete', { accountsIds: accountsSelectedRows });
+    openBulkDeleteDialog(accountsSelectedRows);
   };
   // Handle bulk accounts activate.
   const handelBulkActivate = () => {
@@ -148,6 +155,7 @@ function AccountsActionsBar({
             text={<T id={'delete'} />}
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
+            disabled={isValidatingBulkDeleteAccounts}
           />
         </NavbarGroup>
       </DashboardActionsBar>

packages/webapp/src/containers/Accounts/AccountsAlerts.tsx

@@ -10,9 +10,6 @@ const AccountInactivateAlert = React.lazy(
 const AccountActivateAlert = React.lazy(
   () => import('@/containers/Alerts/Accounts/AccountActivateAlert'),
 );
-const AccountBulkDeleteAlert = React.lazy(
-  () => import('@/containers/Alerts/Accounts/AccountBulkDeleteAlert'),
-);
 const AccountBulkActivateAlert = React.lazy(
   () => import('@/containers/Alerts/Accounts/AccountBulkActivateAlert'),
 );
@@ -24,7 +21,6 @@ export default [
   { name: 'account-delete', component: AccountDeleteAlert },
   { name: 'account-inactivate', component: AccountInactivateAlert },
   { name: 'account-activate', component: AccountActivateAlert },
-  { name: 'accounts-bulk-delete', component: AccountBulkDeleteAlert },
   { name: 'accounts-bulk-activate', component: AccountBulkActivateAlert },
   { name: 'accounts-bulk-inactivate', component: AccountBulkInactivateAlert },
 ];

packages/webapp/src/containers/Accounts/hooks/use-bulk-delete-accounts-dialog.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { DialogsName } from '@/constants/dialogs';
+import { useValidateBulkDeleteAccounts } from '@/hooks/query/accounts';
+import { useBulkDeleteDialog } from '@/hooks/dialogs/useBulkDeleteDialog';
+
+export const useBulkDeleteAccountsDialog = () => {
+  const validateBulkDeleteMutation = useValidateBulkDeleteAccounts();
+  const {
+    openBulkDeleteDialog,
+    closeBulkDeleteDialog,
+    isValidatingBulkDelete,
+  } = useBulkDeleteDialog(DialogsName.AccountBulkDelete, validateBulkDeleteMutation);
+
+  return {
+    openBulkDeleteDialog,
+    closeBulkDeleteDialog,
+    isValidatingBulkDeleteAccounts: isValidatingBulkDelete,
+  };
+};
+