feat: bulk transcations delete

packages/webapp/src/containers/Alerts/Accounts/AccountBulkActivateAlert.tsx

@@ -5,7 +5,6 @@ import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { FormattedMessage as T, AppToaster } from '@/components';
 
-import withAccountsActions from '@/containers/Accounts/withAccountsActions';
 import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withAlertActions from '@/containers/Alert/withAlertActions';
 
@@ -19,6 +18,7 @@ function AccountBulkActivateAlert({
   // #withAlertActions
   closeAlert,
 
+  // TODO: Implement bulk activate accounts hook and use it here
   requestBulkActivateAccounts,
 }) {
   const [isLoading, setLoading] = useState(false);
@@ -40,7 +40,7 @@ function AccountBulkActivateAlert({
         });
         queryCache.invalidateQueries('accounts-table');
       })
-      .catch((errors) => {})
+      .catch((errors) => { })
       .finally(() => {
         setLoading(false);
         closeAlert(name);
@@ -67,5 +67,4 @@ function AccountBulkActivateAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions,
 )(AccountBulkActivateAlert);

packages/webapp/src/containers/Alerts/Accounts/AccountBulkDeleteAlert.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState } from 'react';
+import React from 'react';
 import { FormattedMessage as T } from '@/components';
 import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
@@ -7,8 +7,8 @@ import { queryCache } from 'react-query';
 import { AppToaster } from '@/components';
 
 import { handleDeleteErrors } from '@/containers/Accounts/utils';
+import { useBulkDeleteAccounts } from '@/hooks/query/accounts';
 
-import withAccountsActions from '@/containers/Accounts/withAccountsActions';
 import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withAlertActions from '@/containers/Alert/withAlertActions';
 
@@ -27,42 +27,34 @@ function AccountBulkDeleteAlert({
 
   // #withAlertActions
   closeAlert,
-
-  // #withAccountsActions
-  requestDeleteBulkAccounts,
 }) {
-  
-  const [isLoading, setLoading] = useState(false);
-
-  const selectedRowsCount = 0;
+  const { mutateAsync: bulkDeleteAccounts, isLoading } = useBulkDeleteAccounts();
 
   const handleCancel = () => {
     closeAlert(name);
   };
   // Handle confirm accounts bulk delete.
   const handleConfirmBulkDelete = () => {
-    setLoading(true);
-    requestDeleteBulkAccounts(accountsIds)
+    bulkDeleteAccounts(accountsIds)
       .then(() => {
         AppToaster.show({
           message: intl.get('the_accounts_has_been_successfully_deleted'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('accounts-table');
+        closeAlert(name);
       })
       .catch((errors) => {
         handleDeleteErrors(errors);
-      })
-      .finally(() => {
-        setLoading(false);
-        closeAlert(name);
       });
   };
 
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={`${intl.get('delete')} (${selectedRowsCount})`}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: accountsIds?.length || 0 }} />
+      }
       icon="trash"
       intent={Intent.DANGER}
       isOpen={isOpen}
@@ -80,5 +72,4 @@ function AccountBulkDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withAccountsActions,
 )(AccountBulkDeleteAlert);

packages/webapp/src/containers/Alerts/Bills/BillBulkDeleteAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from '@/components';
+
+import { useBulkDeleteBills } from '@/hooks/query/bills';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Bill bulk delete alert.
+ */
+function BillBulkDeleteAlert({
+  name,
+  isOpen,
+  payload: { billsIds },
+  closeAlert,
+}) {
+  const { mutateAsync: bulkDeleteBills, isLoading } = useBulkDeleteBills();
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteBills(billsIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_bills_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('bills-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: billsIds?.length || 0 }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_bills_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(BillBulkDeleteAlert);
+

packages/webapp/src/containers/Alerts/CreditNotes/CreditNoteBulkDeleteAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from '@/components';
+
+import { useBulkDeleteCreditNotes } from '@/hooks/query/creditNote';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Credit note bulk delete alert.
+ */
+function CreditNoteBulkDeleteAlert({
+  name,
+  isOpen,
+  payload: { creditNotesIds },
+  closeAlert,
+}) {
+  const { mutateAsync: bulkDeleteCreditNotes, isLoading } = useBulkDeleteCreditNotes();
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteCreditNotes(creditNotesIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_credit_notes_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('credit-notes-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: creditNotesIds?.length || 0 }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_credit_notes_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(CreditNoteBulkDeleteAlert);
+

packages/webapp/src/containers/Alerts/Estimates/EstimateBulkDeleteAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from '@/components';
+
+import { useBulkDeleteEstimates } from '@/hooks/query/estimates';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Estimate bulk delete alert.
+ */
+function EstimateBulkDeleteAlert({
+  name,
+  isOpen,
+  payload: { estimatesIds },
+  closeAlert,
+}) {
+  const { mutateAsync: bulkDeleteEstimates, isLoading } = useBulkDeleteEstimates();
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteEstimates(estimatesIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_estimates_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('estimates-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: estimatesIds?.length || 0 }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_estimates_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(EstimateBulkDeleteAlert);
+

packages/webapp/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.tsx

@@ -3,8 +3,10 @@ import React from 'react';
 import { FormattedMessage as T } from '@/components';
 import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
 import { AppToaster } from '@/components';
 
+import { useBulkDeleteExpenses } from '@/hooks/query/expenses';
 import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withAlertActions from '@/containers/Alert/withAlertActions';
 
@@ -15,44 +17,43 @@ import { compose } from '@/utils';
  */
 function ExpenseBulkDeleteAlert({
   closeAlert,
-
-  // #withAlertStoreConnect
   name,
-  payload: { expenseId, selectedCount },
+  payload: { expensesIds },
   isOpen,
 }) {
-  // Handle confirm journals bulk delete.
-  const handleConfirmBulkDelete = () => {
-    // requestDeleteBulkExpenses(bulkDelete)
-    //   .then(() => {
-    //     AppToaster.show({
-    //       message: formatMessage(
-    //         { id: 'the_expenses_have_been_deleted_successfully' },
-    //         { count: selectedRowsCount },
-    //       ),
-    //       intent: Intent.SUCCESS,
-    //     });
-    //   })
-    //   .catch((error) => {
-    //   });
+  const { mutateAsync: bulkDeleteExpenses, isLoading } = useBulkDeleteExpenses();
+
+  const handleCancel = () => {
+    closeAlert(name);
   };
 
-  // Handle cancel bulk delete alert.
-  const handleCancelBulkDelete = () => {
-    closeAlert(name);
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteExpenses(expensesIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_expenses_have_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('expenses-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
   };
 
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
       confirmButtonText={
-        <T id={'delete_count'} values={{ count: selectedCount }} />
+        <T id={'delete_count'} values={{ count: expensesIds?.length || 0 }} />
       }
       icon="trash"
       intent={Intent.DANGER}
       isOpen={isOpen}
-      onCancel={handleCancelBulkDelete}
+      onCancel={handleCancel}
       onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
     >
       <p>
         <T id={'once_delete_these_expenses_you_will_not_able_restore_them'} />

packages/webapp/src/containers/Alerts/Invoices/InvoiceBulkDeleteAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from '@/components';
+
+import { useBulkDeleteInvoices } from '@/hooks/query/invoices';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Invoice bulk delete alert.
+ */
+function InvoiceBulkDeleteAlert({
+  name,
+  isOpen,
+  payload: { invoicesIds },
+  closeAlert,
+}) {
+  const { mutateAsync: bulkDeleteInvoices, isLoading } = useBulkDeleteInvoices();
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteInvoices(invoicesIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_invoices_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('invoices-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: invoicesIds?.length || 0 }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_invoices_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(InvoiceBulkDeleteAlert);
+

packages/webapp/src/containers/Alerts/Items/ItemBulkDeleteAlert.tsx

@@ -1,11 +1,11 @@
 // @ts-nocheck
-import React, { useState } from 'react';
-import {AppToaster, FormattedMessage as T } from '@/components';
+import React from 'react';
+import { AppToaster, FormattedMessage as T } from '@/components';
 import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { size } from 'lodash';
 
-import withItemsActions from '@/containers/Items/withItemsActions';
+import { useBulkDeleteItems } from '@/hooks/query/items';
 import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
 import withAlertActions from '@/containers/Alert/withAlertActions';
 
@@ -21,14 +21,10 @@ function ItemBulkDeleteAlert({
   isOpen,
   payload: { itemsIds },
 
-  // #withItemsActions
-  requestDeleteBulkItems,
-
   // #withAlertActions
   closeAlert,
 }) {
-  
-  const [isLoading, setLoading] = useState(false);
+  const { mutateAsync: bulkDeleteItems, isLoading } = useBulkDeleteItems();
 
   // handle cancel item bulk delete alert.
   const handleCancelBulkDelete = () => {
@@ -36,19 +32,15 @@ function ItemBulkDeleteAlert({
   };
   // Handle confirm items bulk delete.
   const handleConfirmBulkDelete = () => {
-    setLoading(true);
-    requestDeleteBulkItems(itemsIds)
+    bulkDeleteItems(itemsIds)
       .then(() => {
         AppToaster.show({
           message: intl.get('the_items_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
-      })
-      .catch((errors) => {})
-      .finally(() => {
-        setLoading(false);
         closeAlert(name);
-      });
+      })
+      .catch((errors) => { });
   };
   return (
     <Alert
@@ -73,5 +65,4 @@ function ItemBulkDeleteAlert({
 export default compose(
   withAlertStoreConnect(),
   withAlertActions,
-  withItemsActions,
 )(ItemBulkDeleteAlert);

packages/webapp/src/containers/Alerts/ManualJournals/JournalBulkDeleteAlert.tsx

@@ -1,43 +1,59 @@
 // @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from '@/components';
 
+import { useBulkDeleteManualJournals } from '@/hooks/query/manualJournals';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 
+import { compose } from '@/utils';
 
-function JournalBulkDeleteAlert({}) {
-    // Handle confirm journals bulk delete.
-    const handleConfirmBulkDelete = useCallback(() => {
-      requestDeleteBulkManualJournals(bulkDelete)
-        .then(() => {
-          setBulkDelete(false);
-          AppToaster.show({
-            message: formatMessage(
-              { id: 'the_journals_has_been_deleted_successfully' },
-              { count: selectedRowsCount },
-            ),
-            intent: Intent.SUCCESS,
-          });
-        })
-        .catch((error) => {
-          setBulkDelete(false);
+/**
+ * Manual journal bulk delete alert.
+ */
+function JournalBulkDeleteAlert({
+  name,
+  isOpen,
+  payload: { journalsIds },
+  closeAlert,
+}) {
+  const { mutateAsync: bulkDeleteManualJournals, isLoading } = useBulkDeleteManualJournals();
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteManualJournals(journalsIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_journals_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
         });
-    }, [
-      requestDeleteBulkManualJournals,
-      bulkDelete,
-      formatMessage,
-      selectedRowsCount,
-    ]);
+        queryCache.invalidateQueries('manual-journals-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
+  };
 
-    
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
       confirmButtonText={
-        <T id={'delete_count'} values={{ count: selectedRowsCount }} />
+        <T id={'delete_count'} values={{ count: journalsIds?.length || 0 }} />
       }
       icon="trash"
       intent={Intent.DANGER}
-      isOpen={bulkDelete}
-      onCancel={handleCancelBulkDelete}
+      isOpen={isOpen}
+      onCancel={handleCancel}
       onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
     >
       <p>
         <T id={'once_delete_these_journals_you_will_not_able_restore_them'} />
@@ -45,3 +61,8 @@ function JournalBulkDeleteAlert({}) {
     </Alert>
   );
 }
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(JournalBulkDeleteAlert);

packages/webapp/src/containers/Alerts/PaymentReceived/PaymentReceivedBulkDeleteAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from '@/components';
+
+import { useBulkDeletePaymentReceives } from '@/hooks/query/paymentReceives';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Payment received bulk delete alert.
+ */
+function PaymentReceivedBulkDeleteAlert({
+  name,
+  isOpen,
+  payload: { paymentsReceivedIds },
+  closeAlert,
+}) {
+  const { mutateAsync: bulkDeletePaymentReceives, isLoading } = useBulkDeletePaymentReceives();
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeletePaymentReceives(paymentsReceivedIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_payments_received_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('payments-received-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: paymentsReceivedIds?.length || 0 }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_payments_received_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(PaymentReceivedBulkDeleteAlert);
+

packages/webapp/src/containers/Alerts/VendorCeditNotes/VendorCreditBulkDeleteAlert.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import { FormattedMessage as T } from '@/components';
+import intl from 'react-intl-universal';
+import { Intent, Alert } from '@blueprintjs/core';
+import { queryCache } from 'react-query';
+import { AppToaster } from '@/components';
+
+import { useBulkDeleteVendorCredits } from '@/hooks/query/vendorCredit';
+import withAlertStoreConnect from '@/containers/Alert/withAlertStoreConnect';
+import withAlertActions from '@/containers/Alert/withAlertActions';
+
+import { compose } from '@/utils';
+
+/**
+ * Vendor credit bulk delete alert.
+ */
+function VendorCreditBulkDeleteAlert({
+  name,
+  isOpen,
+  payload: { vendorCreditsIds },
+  closeAlert,
+}) {
+  const { mutateAsync: bulkDeleteVendorCredits, isLoading } = useBulkDeleteVendorCredits();
+
+  const handleCancel = () => {
+    closeAlert(name);
+  };
+
+  const handleConfirmBulkDelete = () => {
+    bulkDeleteVendorCredits(vendorCreditsIds)
+      .then(() => {
+        AppToaster.show({
+          message: intl.get('the_vendor_credits_has_been_deleted_successfully'),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('vendor-credits-table');
+        closeAlert(name);
+      })
+      .catch((errors) => {
+        // Handle errors
+      });
+  };
+
+  return (
+    <Alert
+      cancelButtonText={<T id={'cancel'} />}
+      confirmButtonText={
+        <T id={'delete_count'} values={{ count: vendorCreditsIds?.length || 0 }} />
+      }
+      icon="trash"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={handleCancel}
+      onConfirm={handleConfirmBulkDelete}
+      loading={isLoading}
+    >
+      <p>
+        <T id={'once_delete_these_vendor_credits_you_will_not_able_restore_them'} />
+      </p>
+    </Alert>
+  );
+}
+
+export default compose(
+  withAlertStoreConnect(),
+  withAlertActions,
+)(VendorCreditBulkDeleteAlert);
+