From ea466404ec3c28effd442f0855fa8e878f4e093c Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sun, 31 Oct 2021 13:13:38 +0200
Subject: [PATCH] feat: refactoring alerts.

---
 .../JournalsLanding/ManualJournalsAlerts.js   | 22 +++++----
 .../JournalsLanding/ManualJournalsList.js     |  2 -
 src/containers/AlertsContainer/registered.js  | 38 ++++++++++++++-
 .../AccountTransactionsAlerts.js              | 27 ++++-------
 .../AccountTransactionsList.js                |  2 -
 src/containers/Customers/CustomersAlerts.js   | 27 ++++++-----
 .../CustomersLanding/CustomersList.js         |  2 -
 .../ExchangeRates/ExchangeRatesAlerts.js      | 15 +++---
 .../ExchangeRates/ExchangeRatesList.js        |  2 -
 src/containers/Expenses/ExpensesAlerts.js     | 21 ++++----
 .../Expenses/ExpensesLanding/ExpensesList.js  |  3 --
 .../InventoryAdjustmentList.js                |  3 +-
 .../InventoryAdjustmentsAlerts.js             | 28 +++++++----
 src/containers/Items/ItemsAlerts.js           | 48 +++++++++++++------
 src/containers/Items/ItemsList.js             |  2 -
 .../ItemsCategories/ItemCategoriesList.js     |  2 -
 .../ItemsCategories/ItemsCategoriesAlerts.js  | 17 +++----
 .../Currencies/CurrenciesAlerts.js            | 12 ++---
 .../Preferences/Currencies/CurrenciesList.js  |  2 -
 .../Preferences/Users/UsersAlerts.js          | 27 ++++++-----
 src/containers/Preferences/Users/UsersList.js |  9 +---
 .../Bills/BillsLanding/BillsAlerts.js         | 21 ++++----
 .../Purchases/Bills/BillsLanding/BillsList.js |  3 --
 .../PaymentMades/PaymentMadesAlerts.js        | 15 +++---
 .../Sales/Estimates/EstimatesAlerts.js        | 45 +++++++++++------
 .../EstimatesLanding/EstimatesList.js         |  2 -
 .../Sales/Invoices/InvoicesAlerts.js          | 21 ++++----
 .../Invoices/InvoicesLanding/InvoicesList.js  |  3 --
 .../PaymentReceives/PaymentReceiveAlerts.js   | 15 +++---
 .../PaymentsLanding/PaymentReceivesList.js    |  3 --
 .../Sales/Receipts/ReceiptsAlerts.js          | 21 ++++----
 .../Receipts/ReceiptsLanding/ReceiptsList.js  |  2 -
 src/containers/Vendors/VendorsAlerts.js       | 27 ++++++-----
 .../Vendors/VendorsLanding/VendorsList.js     |  2 -
 34 files changed, 264 insertions(+), 227 deletions(-)

diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js b/src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js
index 7e2a69653..44e5e9baa 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js
@@ -1,15 +1,17 @@
 import React from 'react';
-import JournalDeleteAlert from 'containers/Alerts/ManualJournals/JournalDeleteAlert';
-import JournalPublishAlert from 'containers/Alerts/ManualJournals/JournalPublishAlert';
+
+const JournalDeleteAlert = React.lazy(() =>
+  import('../../Alerts/ManualJournals/JournalDeleteAlert'),
+);
+const JournalPublishAlert = React.lazy(() =>
+  import('../../Alerts/ManualJournals/JournalPublishAlert'),
+);
 
 /**
  * Manual journals alerts.
  */
-export default function ManualJournalsAlerts() {
-  return (
-    <div>
-      <JournalDeleteAlert name={'journal-delete'} />
-      <JournalPublishAlert name={'journal-publish'} />
-    </div>
-  )
-}
\ No newline at end of file
+
+export default [
+  { name: 'journal-delete', component: JournalDeleteAlert },
+  { name: 'journal-publish', component: JournalPublishAlert },
+];
diff --git a/src/containers/Accounting/JournalsLanding/ManualJournalsList.js b/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
index c1e6020cc..f8ec03ff4 100644
--- a/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
+++ b/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
@@ -5,7 +5,6 @@ import 'style/pages/ManualJournal/List.scss';
 import { DashboardContentTable, DashboardPageContent } from 'components';
 
 import { ManualJournalsListProvider } from './ManualJournalsListProvider';
-import ManualJournalsAlerts from './ManualJournalsAlerts';
 import ManualJournalsViewTabs from './ManualJournalsViewTabs';
 import ManualJournalsDataTable from './ManualJournalsDataTable';
 import ManualJournalsActionsBar from './ManualJournalActionsBar';
@@ -33,7 +32,6 @@ function ManualJournalsTable({
         <ManualJournalsDataTable />
       </DashboardPageContent>
 
-      <ManualJournalsAlerts />
     </ManualJournalsListProvider>
   );
 }
diff --git a/src/containers/AlertsContainer/registered.js b/src/containers/AlertsContainer/registered.js
index 5fb789c4b..898c583d3 100644
--- a/src/containers/AlertsContainer/registered.js
+++ b/src/containers/AlertsContainer/registered.js
@@ -1,3 +1,39 @@
 import AccountsAlerts from '../Accounts/AccountsAlerts';
+import ItemsAlerts from '../Items/ItemsAlerts';
+import ItemsCategoriesAlerts from '../ItemsCategories/ItemsCategoriesAlerts';
+import InventoryAdjustmentsAlerts from '../InventoryAdjustments/InventoryAdjustmentsAlerts';
+import EstimatesAlerts from '../Sales/Estimates/EstimatesAlerts';
+import InvoicesAlerts from '../Sales/Invoices/InvoicesAlerts';
+import ReceiptsAlerts from '../Sales/Receipts/ReceiptsAlerts';
+import PaymentReceiveAlerts from '../Sales/PaymentReceives/PaymentReceiveAlerts';
+import BillsAlerts from '../Purchases/Bills/BillsLanding/BillsAlerts';
+import PaymentMadesAlerts from '../Purchases/PaymentMades/PaymentMadesAlerts';
+import CustomersAlerts from '../Customers/CustomersAlerts';
+import VendorsAlerts from '../Vendors/VendorsAlerts';
+import ManualJournalsAlerts from '../Accounting/JournalsLanding/ManualJournalsAlerts';
+import ExchangeRatesAlerts from '../ExchangeRates/ExchangeRatesAlerts';
+import ExpensesAlerts from '../Expenses/ExpensesAlerts';
+import AccountTransactionsAlerts from '../CashFlow/AccountTransactions/AccountTransactionsAlerts';
+import UsersAlerts from '../Preferences/Users/UsersAlerts';
+import CurrenciesAlerts from '../Preferences/Currencies/CurrenciesAlerts';
 
-export default [...AccountsAlerts];
+export default [
+  ...AccountsAlerts,
+  ...ItemsAlerts,
+  ...ItemsCategoriesAlerts,
+  ...InventoryAdjustmentsAlerts,
+  ...EstimatesAlerts,
+  ...InvoicesAlerts,
+  ...ReceiptsAlerts,
+  ...PaymentReceiveAlerts,
+  ...BillsAlerts,
+  ...PaymentMadesAlerts,
+  ...CustomersAlerts,
+  ...VendorsAlerts,
+  ...ManualJournalsAlerts,
+  ...ExchangeRatesAlerts,
+  ...ExpensesAlerts,
+  ...AccountTransactionsAlerts,
+  ...UsersAlerts,
+  ...CurrenciesAlerts,
+];
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js
index ead7b4a41..fe31304ea 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js
@@ -1,24 +1,15 @@
 import React from 'react';
 
-import AccountDeleteTransactionAlert from '../../Alerts/CashFlow/AccountDeleteTransactionAlert';
-import ReceiptDeleteAlert from '../../Alerts/Receipts/ReceiptDeleteAlert';
-import JournalDeleteAlert from '../../Alerts/ManualJournals/JournalDeleteAlert';
-import ExpenseDeleteAlert from '../../Alerts/Expenses/ExpenseDeleteAlert';
-import PaymentMadeDeleteAlert from '../../Alerts/PaymentMades/PaymentMadeDeleteAlert';
-import PaymentReceiveDeleteAlert from '../../Alerts/PaymentReceives/PaymentReceiveDeleteAlert';
+const AccountDeleteTransactionAlert = React.lazy(() =>
+  import('../../Alerts/CashFlow/AccountDeleteTransactionAlert'),
+);
 
 /**
  * Account transaction alert.
  */
-export default function AccountTransactionsAlerts() {
-  return (
-    <div>
-      <AccountDeleteTransactionAlert name={'account-transaction-delete'} />
-      <ReceiptDeleteAlert name={'receipt-delete'} />
-      <JournalDeleteAlert name={'journal-delete'} />
-      <ExpenseDeleteAlert name={"expense-delete"} />
-      <PaymentMadeDeleteAlert name={'payment-made-delete'} />
-      <PaymentReceiveDeleteAlert name={'payment-receive-delete'} />
-    </div>
-  );
-}
+export default [
+  {
+    name: 'account-transaction-delete',
+    component: AccountDeleteTransactionAlert,
+  },
+];
diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js
index 1c7d9ce79..58b342f70 100644
--- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js
+++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js
@@ -9,7 +9,6 @@ import { AccountTransactionsProvider } from './AccountTransactionsProvider';
 import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
 import AccountTransactionsDataTable from './AccountTransactionsDataTable';
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
-import AccountTransactionsAlerts from './AccountTransactionsAlerts';
 import { AccountTransactionsProgressBar } from './components';
 
 /**
@@ -27,7 +26,6 @@ function AccountTransactionsList() {
           <AccountTransactionsDataTable />
         </CashflowTransactionsTableCard>
       </DashboardPageContent>
-      <AccountTransactionsAlerts />
     </AccountTransactionsProvider>
   );
 }
diff --git a/src/containers/Customers/CustomersAlerts.js b/src/containers/Customers/CustomersAlerts.js
index 16737b94d..a7bab20eb 100644
--- a/src/containers/Customers/CustomersAlerts.js
+++ b/src/containers/Customers/CustomersAlerts.js
@@ -1,17 +1,20 @@
 import React from 'react';
-import CustomerDeleteAlert from 'containers/Alerts/Customers/CustomerDeleteAlert';
-import ContactActivateAlert from '../../containers/Alerts/Contacts/ContactActivateAlert';
-import ContactInactivateAlert from '../../containers/Alerts/Contacts/ContactInactivateAlert';
+
+const CustomerDeleteAlert = React.lazy(() =>
+  import('../Alerts/Customers/CustomerDeleteAlert'),
+);
+const ContactActivateAlert = React.lazy(() =>
+  import('../Alerts/Contacts/ContactActivateAlert'),
+);
+const ContactInactivateAlert = React.lazy(() =>
+  import('../Alerts/Contacts/ContactInactivateAlert'),
+);
 
 /**
  * Customers alert.
  */
-export default function ItemsAlerts() {
-  return (
-    <div>
-      <CustomerDeleteAlert name={'customer-delete'} />
-      <ContactActivateAlert name={'contact-activate'} />
-      <ContactInactivateAlert name={'contact-inactivate'} />
-    </div>
-  );
-}
+export default [
+  { name: 'customer-delete', component: CustomerDeleteAlert },
+  { name: 'contact-activate', component: ContactActivateAlert },
+  { name: 'contact-inactivate', component: ContactInactivateAlert },
+];
diff --git a/src/containers/Customers/CustomersLanding/CustomersList.js b/src/containers/Customers/CustomersLanding/CustomersList.js
index 9bef377ba..988ed491e 100644
--- a/src/containers/Customers/CustomersLanding/CustomersList.js
+++ b/src/containers/Customers/CustomersLanding/CustomersList.js
@@ -7,7 +7,6 @@ import { DashboardPageContent } from 'components';
 import CustomersActionsBar from './CustomersActionsBar';
 import CustomersViewsTabs from './CustomersViewsTabs';
 import CustomersTable from './CustomersTable';
-import CustomersAlerts from 'containers/Customers/CustomersAlerts';
 import { CustomersListProvider } from './CustomersListProvider';
 
 import withCustomers from './withCustomers';
@@ -45,7 +44,6 @@ function CustomersList({
         <CustomersViewsTabs />
         <CustomersTable />
       </DashboardPageContent>
-      <CustomersAlerts />
     </CustomersListProvider>
   );
 }
diff --git a/src/containers/ExchangeRates/ExchangeRatesAlerts.js b/src/containers/ExchangeRates/ExchangeRatesAlerts.js
index 3e9dd83cf..788fc10ce 100644
--- a/src/containers/ExchangeRates/ExchangeRatesAlerts.js
+++ b/src/containers/ExchangeRates/ExchangeRatesAlerts.js
@@ -1,12 +1,9 @@
 import React from 'react';
 
-import ExchangeRateDeleteAlert from 'containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert';
-// import ExchangeRateBulkDeleteAlert from 'containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert';
+const ExchangeRateDeleteAlert = React.lazy(() =>
+  import('../Alerts/ExchangeRates/ExchangeRateDeleteAlert'),
+);
 
-export default function ExchangeRatesAlerts() {
-  return (
-    <div>
-      <ExchangeRateDeleteAlert name={'exchange-rate-delete'} />
-    </div>
-  );
-}
+export default [
+  { name: 'exchange-rate-delete', component: ExchangeRateDeleteAlert },
+];
diff --git a/src/containers/ExchangeRates/ExchangeRatesList.js b/src/containers/ExchangeRates/ExchangeRatesList.js
index 97e10d70b..b260af6eb 100644
--- a/src/containers/ExchangeRates/ExchangeRatesList.js
+++ b/src/containers/ExchangeRates/ExchangeRatesList.js
@@ -7,7 +7,6 @@ import ExchangeRateTable from './ExchangeRateTable';
 import ExchangeRateActionsBar from './ExchangeRateActionsBar';
 
 import { ExchangeRatesProvider } from './ExchangeRatesProvider';
-import ExchangeRatesAlerts from './ExchangeRatesAlerts';
 import withExchangeRates from './withExchangeRates';
 import { transformTableStateToQuery } from 'utils';
 
@@ -29,7 +28,6 @@ function ExchangeRatesList({
           <ExchangeRateTable />
         </DashboardContentTable>
       </DashboardPageContent>
-      <ExchangeRatesAlerts />
     </ExchangeRatesProvider>
   );
 }
diff --git a/src/containers/Expenses/ExpensesAlerts.js b/src/containers/Expenses/ExpensesAlerts.js
index 75a72f0ad..44af53544 100644
--- a/src/containers/Expenses/ExpensesAlerts.js
+++ b/src/containers/Expenses/ExpensesAlerts.js
@@ -1,15 +1,16 @@
 import React from 'react';
-import ExpenseDeleteAlert from 'containers/Alerts/Expenses/ExpenseDeleteAlert';
-import ExpensePublishAlert from 'containers/Alerts/Expenses/ExpensePublishAlert';
+
+const ExpenseDeleteAlert = React.lazy(() =>
+  import('../Alerts/Expenses/ExpenseDeleteAlert'),
+);
+const ExpensePublishAlert = React.lazy(() =>
+  import('../Alerts/Expenses/ExpensePublishAlert'),
+);
 
 /**
  * Accounts alert.
  */
-export default function ExpensesAlerts({}) {
-  return (
-    <div class="expenses-alerts">
-      <ExpenseDeleteAlert name={'expense-delete'} />
-      <ExpensePublishAlert name={'expense-publish'} />
-    </div>
-  );
-}
+export default [
+  { name: 'expense-delete', component: ExpenseDeleteAlert },
+  { name: 'expense-publish', component: ExpensePublishAlert },
+];
diff --git a/src/containers/Expenses/ExpensesLanding/ExpensesList.js b/src/containers/Expenses/ExpensesLanding/ExpensesList.js
index 188057ea9..493ef3e52 100644
--- a/src/containers/Expenses/ExpensesLanding/ExpensesList.js
+++ b/src/containers/Expenses/ExpensesLanding/ExpensesList.js
@@ -7,7 +7,6 @@ import { DashboardContentTable, DashboardPageContent } from 'components';
 import ExpenseActionsBar from './ExpenseActionsBar';
 import ExpenseViewTabs from './ExpenseViewTabs';
 import ExpenseDataTable from './ExpenseDataTable';
-import ExpensesAlerts from '../ExpensesAlerts';
 
 import withExpenses from './withExpenses';
 import withExpensesActions from './withExpensesActions';
@@ -45,8 +44,6 @@ function ExpensesList({
         <ExpenseViewTabs />
         <ExpenseDataTable />
       </DashboardPageContent>
-
-      <ExpensesAlerts />
     </ExpensesListProvider>
   );
 }
diff --git a/src/containers/InventoryAdjustments/InventoryAdjustmentList.js b/src/containers/InventoryAdjustments/InventoryAdjustmentList.js
index f6b130455..dddb4e756 100644
--- a/src/containers/InventoryAdjustments/InventoryAdjustmentList.js
+++ b/src/containers/InventoryAdjustments/InventoryAdjustmentList.js
@@ -3,7 +3,6 @@ import React from 'react';
 import 'style/pages/InventoryAdjustments/List.scss';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
-import InventoryAdjustmentsAlerts from './InventoryAdjustmentsAlerts';
 
 import { InventoryAdjustmentsProvider } from './InventoryAdjustmentsProvider';
 import InventoryAdjustmentTable from './InventoryAdjustmentTable';
@@ -28,7 +27,7 @@ function InventoryAdjustmentList({
           <InventoryAdjustmentTable />
         </DashboardContentTable>
 
-        <InventoryAdjustmentsAlerts />
+
       </DashboardPageContent>
     </InventoryAdjustmentsProvider>
   );
diff --git a/src/containers/InventoryAdjustments/InventoryAdjustmentsAlerts.js b/src/containers/InventoryAdjustments/InventoryAdjustmentsAlerts.js
index cacdd8b36..a08a130e4 100644
--- a/src/containers/InventoryAdjustments/InventoryAdjustmentsAlerts.js
+++ b/src/containers/InventoryAdjustments/InventoryAdjustmentsAlerts.js
@@ -1,12 +1,20 @@
 import React from 'react';
-import InventoryAdjustmentDeleteAlert from 'containers/Alerts/Items/InventoryAdjustmentDeleteAlert';
-import InventoryAdjustmentPublishAlert from 'containers/Alerts/Items/InventoryAdjustmentPublishAlert';
 
-export default function InventoryAdjustmentsAlerts() {
-  return (
-    <div className={'inventory-adjustments-alert'}>
-      <InventoryAdjustmentDeleteAlert name={'inventory-adjustment-delete'} />
-      <InventoryAdjustmentPublishAlert name={'inventory-adjustment-publish'} />
-    </div>
-  );
-}
+const InventoryAdjustmentDeleteAlert = React.lazy(() =>
+  import('../Alerts/Items/InventoryAdjustmentDeleteAlert'),
+);
+
+const InventoryAdjustmentPublishAlert = React.lazy(() =>
+  import('../Alerts/Items/InventoryAdjustmentPublishAlert'),
+);
+
+export default [
+  {
+    name: 'inventory-adjustment-delete',
+    component: InventoryAdjustmentDeleteAlert,
+  },
+  {
+    name: 'inventory-adjustment-publish',
+    component: InventoryAdjustmentPublishAlert,
+  },
+];
diff --git a/src/containers/Items/ItemsAlerts.js b/src/containers/Items/ItemsAlerts.js
index 605718621..6918fe4a2 100644
--- a/src/containers/Items/ItemsAlerts.js
+++ b/src/containers/Items/ItemsAlerts.js
@@ -1,19 +1,39 @@
 import React from 'react';
-import ItemDeleteAlert from 'containers/Alerts/Items/ItemDeleteAlert';
-import ItemInactivateAlert from 'containers/Alerts/Items/ItemInactivateAlert';
-import ItemActivateAlert from 'containers/Alerts/Items/ItemActivateAlert';
-import ItemBulkDeleteAlert from 'containers/Alerts/Items/ItemBulkDeleteAlert';
+
+const ItemDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemDeleteAlert'),
+);
+
+const ItemInactivateAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemInactivateAlert'),
+);
+
+const ItemActivateAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemActivateAlert'),
+);
+
+const ItemBulkDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Items/ItemBulkDeleteAlert'),
+);
 
 /**
  * Items alert.
  */
-export default function ItemsAlerts() {
-  return (
-    <div>
-      <ItemDeleteAlert name={'item-delete'} />
-      <ItemInactivateAlert name={'item-inactivate'} />
-      <ItemActivateAlert name={'item-activate'} />
-      <ItemBulkDeleteAlert name={'items-bulk-delete'} />
-    </div>
-  );
-}
+export default [
+  {
+    name: 'item-delete',
+    component: ItemDeleteAlert,
+  },
+  {
+    name: 'item-inactivate',
+    component: ItemInactivateAlert,
+  },
+  {
+    name: 'item-activate',
+    component: ItemActivateAlert,
+  },
+  {
+    name: 'items-bulk-delete',
+    component: ItemBulkDeleteAlert,
+  },
+];
diff --git a/src/containers/Items/ItemsList.js b/src/containers/Items/ItemsList.js
index 6af0dddfb..7cb848ac2 100644
--- a/src/containers/Items/ItemsList.js
+++ b/src/containers/Items/ItemsList.js
@@ -6,7 +6,6 @@ import 'style/pages/Items/List.scss';
 import { DashboardPageContent } from 'components';
 
 import ItemsActionsBar from './ItemsActionsBar';
-import ItemsAlerts from './ItemsAlerts';
 import ItemsViewsTabs from './ItemsViewsTabs';
 import ItemsDataTable from './ItemsDataTable';
 
@@ -46,7 +45,6 @@ function ItemsList({
         <ItemsDataTable />
       </DashboardPageContent>
 
-      <ItemsAlerts />
     </ItemsListProvider>
   );
 }
diff --git a/src/containers/ItemsCategories/ItemCategoriesList.js b/src/containers/ItemsCategories/ItemCategoriesList.js
index 630a94b0c..05ac4f501 100644
--- a/src/containers/ItemsCategories/ItemCategoriesList.js
+++ b/src/containers/ItemsCategories/ItemCategoriesList.js
@@ -5,7 +5,6 @@ import 'style/pages/ItemsCategories/List.scss';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
 
-import ItemsCategoriesAlerts from './ItemsCategoriesAlerts';
 import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
 import { ItemsCategoriesProvider } from './ItemsCategoriesProvider';
 import ItemCategoriesTable from './ItemCategoriesTable';
@@ -28,7 +27,6 @@ function ItemCategoryList({
           <ItemCategoriesTable />
         </DashboardContentTable>
       </DashboardPageContent>
-      <ItemsCategoriesAlerts />
     </ItemsCategoriesProvider>
   );
 }
diff --git a/src/containers/ItemsCategories/ItemsCategoriesAlerts.js b/src/containers/ItemsCategories/ItemsCategoriesAlerts.js
index f322195fe..dc14c4118 100644
--- a/src/containers/ItemsCategories/ItemsCategoriesAlerts.js
+++ b/src/containers/ItemsCategories/ItemsCategoriesAlerts.js
@@ -1,12 +1,9 @@
 import React from 'react';
-import ItemCategoryDeleteAlert from 'containers/Alerts/Items/ItemCategoryDeleteAlert';
-// import ItemCategoryBulkDeleteAlert from 'containers/Alerts/Items/ItemCategoryBulkDeleteAlert';
 
-export default function ItemsCategoriesAlerts() {
-  return (
-    <div class="items-categories-alerts">
-      <ItemCategoryDeleteAlert name={'item-category-delete'} />
-      {/* <ItemCategoryBulkDeleteAlert name={'item-categories-bulk-delete'} /> */}
-    </div>
-  );
-}
+const ItemCategoryDeleteAlert = React.lazy(() =>
+  import('../Alerts/Items/ItemCategoryDeleteAlert'),
+);
+
+export default [
+  { name: 'item-category-delete', component: ItemCategoryDeleteAlert },
+];
diff --git a/src/containers/Preferences/Currencies/CurrenciesAlerts.js b/src/containers/Preferences/Currencies/CurrenciesAlerts.js
index 8fa73e47f..23cb1dbfe 100644
--- a/src/containers/Preferences/Currencies/CurrenciesAlerts.js
+++ b/src/containers/Preferences/Currencies/CurrenciesAlerts.js
@@ -1,10 +1,6 @@
 import React from 'react';
-import CurrencyDeleteAlert from 'containers/Alerts/Currencies/CurrencyDeleteAlert';
 
-export default function CurrenciesAlerts() {
-  return (
-    <div>
-      <CurrencyDeleteAlert name={'currency-delete'} />
-    </div>
-  );
-}
+const CurrencyDeleteAlert = React.lazy(() =>
+  import('../../Alerts/Currencies/CurrencyDeleteAlert'),
+);
+export default [{ name: 'currency-delete', component: CurrencyDeleteAlert }];
diff --git a/src/containers/Preferences/Currencies/CurrenciesList.js b/src/containers/Preferences/Currencies/CurrenciesList.js
index d6a9c820a..0310d0c16 100644
--- a/src/containers/Preferences/Currencies/CurrenciesList.js
+++ b/src/containers/Preferences/Currencies/CurrenciesList.js
@@ -5,7 +5,6 @@ import intl from 'react-intl-universal';
 
 import { CurrenciesProvider } from './CurrenciesProvider';
 import CurrenciesDataTable from './CurrenciesDataTable';
-import CurrenciesAlerts from './CurrenciesAlerts';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
@@ -22,7 +21,6 @@ function CurrenciesList({
   return (
     <CurrenciesProvider>
       <CurrenciesDataTable />
-      <CurrenciesAlerts />
     </CurrenciesProvider>
   );
 }
diff --git a/src/containers/Preferences/Users/UsersAlerts.js b/src/containers/Preferences/Users/UsersAlerts.js
index 689004d2e..76df5215d 100644
--- a/src/containers/Preferences/Users/UsersAlerts.js
+++ b/src/containers/Preferences/Users/UsersAlerts.js
@@ -1,14 +1,17 @@
 import React from 'react';
-import UserDeleteAlert from 'containers/Alerts/Users/UserDeleteAlert';
-import UserInactivateAlert from 'containers/Alerts/Users/UserInactivateAlert';
-import UserActivateAlert from 'containers/Alerts/Users/UserActivateAlert';
 
-export default function UsersAlerts() {
-  return (
-    <>
-      <UserDeleteAlert name={'user-delete'} />
-      <UserInactivateAlert name={'user-inactivate'} />
-      <UserActivateAlert name={'user-activate'} />
-    </>
-  );
-}
+const UserDeleteAlert = React.lazy(() =>
+  import('../../Alerts/Users/UserDeleteAlert'),
+);
+const UserActivateAlert = React.lazy(() =>
+  import('../../Alerts/Users/UserActivateAlert'),
+);
+const UserInactivateAlert = React.lazy(() =>
+  import('../../Alerts/Users/UserInactivateAlert'),
+);
+
+export default [
+  { name: 'user-delete', component: UserDeleteAlert },
+  { name: 'user-activate', component: UserActivateAlert },
+  { name: 'user-inactivate', component: UserInactivateAlert },
+];
diff --git a/src/containers/Preferences/Users/UsersList.js b/src/containers/Preferences/Users/UsersList.js
index 986022925..856c030c2 100644
--- a/src/containers/Preferences/Users/UsersList.js
+++ b/src/containers/Preferences/Users/UsersList.js
@@ -1,11 +1,10 @@
 import React, { useEffect } from 'react';
 import intl from 'react-intl-universal';
 
-import  {UsersListProvider } from './UsersProvider';
+import { UsersListProvider } from './UsersProvider';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import UsersDataTable from './UsersDataTable';
-import UsersAlerts from './UsersAlerts';
 import { compose } from 'utils';
 
 /**
@@ -15,7 +14,6 @@ function UsersListPreferences({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-
   useEffect(() => {
     changePreferencesPageTitle(intl.get('users'));
   }, [changePreferencesPageTitle]);
@@ -23,11 +21,8 @@ function UsersListPreferences({
   return (
     <UsersListProvider>
       <UsersDataTable />
-      <UsersAlerts />
     </UsersListProvider>
   );
 }
 
-export default compose(
-  withDashboardActions,
-)(UsersListPreferences);
+export default compose(withDashboardActions)(UsersListPreferences);
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js b/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
index cb5f4c0b5..698277a17 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsAlerts.js
@@ -1,12 +1,13 @@
 import React from 'react';
-import BillOpenAlert from 'containers/Alerts/Bills/BillOpenAlert';
-import BillDeleteAlert from 'containers/Alerts/Bills/BillDeleteAlert';
 
-export default function BillsAlerts() {
-  return (
-    <div class="bills-alerts">
-      <BillDeleteAlert name={'bill-delete'} />
-      <BillOpenAlert name={'bill-open'} />
-    </div>
-  );
-}
+const BillOpenAlert = React.lazy(() =>
+  import('containers/Alerts/Bills/BillOpenAlert'),
+);
+const BillDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Bills/BillDeleteAlert'),
+);
+
+export default [
+  { name: 'bill-delete', component: BillDeleteAlert },
+  { name: 'bill-open', component: BillOpenAlert },
+];
diff --git a/src/containers/Purchases/Bills/BillsLanding/BillsList.js b/src/containers/Purchases/Bills/BillsLanding/BillsList.js
index d32a214f3..8ffe17274 100644
--- a/src/containers/Purchases/Bills/BillsLanding/BillsList.js
+++ b/src/containers/Purchases/Bills/BillsLanding/BillsList.js
@@ -6,7 +6,6 @@ import 'style/pages/Bills/List.scss';
 import { BillsListProvider } from './BillsListProvider';
 
 import BillsActionsBar from './BillsActionsBar';
-import BillsAlerts from './BillsAlerts';
 import BillsViewsTabs from './BillsViewsTabs';
 import BillsTable from './BillsTable';
 
@@ -45,8 +44,6 @@ function BillsList({
         <BillsViewsTabs />
         <BillsTable />
       </DashboardPageContent>
-
-      <BillsAlerts />
     </BillsListProvider>
   );
 }
diff --git a/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js b/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js
index f21004284..42eb7dbcf 100644
--- a/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js
+++ b/src/containers/Purchases/PaymentMades/PaymentMadesAlerts.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PaymentMadeDeleteAlert from 'containers/Alerts/PaymentMades/PaymentMadeDeleteAlert';
 
-export default function PaymentMadesAlerts() {
-  return (
-    <div>
-      <PaymentMadeDeleteAlert name={'payment-made-delete'} />
-    </div>
-  );
-}
+const PaymentMadeDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/PaymentMades/PaymentMadeDeleteAlert'),
+);
+
+export default [
+  { name: 'payment-made-delete', component: PaymentMadeDeleteAlert },
+];
diff --git a/src/containers/Sales/Estimates/EstimatesAlerts.js b/src/containers/Sales/Estimates/EstimatesAlerts.js
index ec27875f9..0cbc8b98e 100644
--- a/src/containers/Sales/Estimates/EstimatesAlerts.js
+++ b/src/containers/Sales/Estimates/EstimatesAlerts.js
@@ -1,19 +1,36 @@
 import React from 'react';
-import EstimateDeleteAlert from 'containers/Alerts/Estimates/EstimateDeleteAlert';
-import EstimateDeliveredAlert from 'containers/Alerts/Estimates/EstimateDeliveredAlert';
-import EstimateApproveAlert from 'containers/Alerts/Estimates/EstimateApproveAlert';
-import EstimateRejectAlert from 'containers/Alerts/Estimates/EstimateRejectAlert';
+
+const EstimateDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Estimates/EstimateDeleteAlert'),
+);
+const EstimateDeliveredAlert = React.lazy(() =>
+  import('containers/Alerts/Estimates/EstimateDeliveredAlert'),
+);
+const EstimateApproveAlert = React.lazy(() =>
+  import('containers/Alerts/Estimates/EstimateApproveAlert'),
+);
+const EstimateRejectAlert = React.lazy(() =>
+  import('containers/Alerts/Estimates/EstimateRejectAlert'),
+);
 
 /**
  * Estimates alert.
  */
-export default function EstimatesAlerts() {
-  return (
-    <div>
-      <EstimateDeleteAlert name={'estimate-delete'} />
-      <EstimateDeliveredAlert name={'estimate-deliver'} />
-      <EstimateApproveAlert name={'estimate-Approve'} />
-      <EstimateRejectAlert name={'estimate-reject'} />
-    </div>
-  );
-}
+export default [
+  {
+    name: 'estimate-delete',
+    component: EstimateDeleteAlert,
+  },
+  {
+    name: 'estimate-deliver',
+    component: EstimateDeliveredAlert,
+  },
+  {
+    name: 'estimate-Approve',
+    component: EstimateApproveAlert,
+  },
+  {
+    name: 'estimate-reject',
+    component: EstimateRejectAlert,
+  },
+];
diff --git a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
index 7b32bd85f..ac6561444 100644
--- a/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
+++ b/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
@@ -4,7 +4,6 @@ import { DashboardContentTable, DashboardPageContent } from 'components';
 import 'style/pages/SaleEstimate/List.scss';
 
 import EstimatesActionsBar from './EstimatesActionsBar';
-import EstimatesAlerts from '../EstimatesAlerts';
 import EstimatesViewTabs from './EstimatesViewTabs';
 import EstimatesDataTable from './EstimatesDataTable';
 
@@ -45,7 +44,6 @@ function EstimatesList({
         <EstimatesDataTable />
       </DashboardPageContent>
 
-      <EstimatesAlerts />
     </EstimatesListProvider>
   );
 }
diff --git a/src/containers/Sales/Invoices/InvoicesAlerts.js b/src/containers/Sales/Invoices/InvoicesAlerts.js
index 024b4a819..7325876da 100644
--- a/src/containers/Sales/Invoices/InvoicesAlerts.js
+++ b/src/containers/Sales/Invoices/InvoicesAlerts.js
@@ -1,15 +1,16 @@
 import React from 'react';
-import InvoiceDeleteAlert from 'containers/Alerts/Invoices/InvoiceDeleteAlert';
-import InvoiceDeliverAlert from 'containers/Alerts/Invoices/InvoiceDeliverAlert';
+
+const InvoiceDeleteAlert = React.lazy(() =>
+  import('../../Alerts/Invoices/InvoiceDeleteAlert'),
+);
+const InvoiceDeliverAlert = React.lazy(() =>
+  import('../../Alerts/Invoices/InvoiceDeliverAlert'),
+);
 
 /**
  * Invoices alert.
  */
-export default function ItemsAlerts() {
-  return (
-    <div>
-      <InvoiceDeleteAlert name={'invoice-delete'} />
-      <InvoiceDeliverAlert name={'invoice-deliver'} />
-    </div>
-  );
-}
+export default [
+  { name: 'invoice-delete', component: InvoiceDeleteAlert },
+  { name: 'invoice-deliver', component: InvoiceDeliverAlert },
+];
diff --git a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
index 1af3314a3..d2d81d2d5 100644
--- a/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
+++ b/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
@@ -8,7 +8,6 @@ import { InvoicesListProvider } from './InvoicesListProvider';
 
 import InvoiceViewTabs from './InvoiceViewTabs';
 import InvoicesDataTable from './InvoicesDataTable';
-import InvoicesAlerts from '../InvoicesAlerts';
 
 import withInvoices from './withInvoices';
 import withInvoiceActions from './withInvoiceActions';
@@ -46,8 +45,6 @@ function InvoicesList({
         <InvoiceViewTabs />
         <InvoicesDataTable />
       </DashboardPageContent>
-
-      <InvoicesAlerts />
     </InvoicesListProvider>
   );
 }
diff --git a/src/containers/Sales/PaymentReceives/PaymentReceiveAlerts.js b/src/containers/Sales/PaymentReceives/PaymentReceiveAlerts.js
index 0d0bb0e1b..0c86a9bb5 100644
--- a/src/containers/Sales/PaymentReceives/PaymentReceiveAlerts.js
+++ b/src/containers/Sales/PaymentReceives/PaymentReceiveAlerts.js
@@ -1,13 +1,12 @@
 import React from 'react';
-import PaymentReceiveDeleteAlert from 'containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert';
+
+const PaymentReceiveDeleteAlert = React.lazy(() =>
+  import('../../Alerts/PaymentReceives/PaymentReceiveDeleteAlert'),
+);
 
 /**
  * PaymentReceives alert.
  */
-export default function EstimatesAlerts() {
-  return (
-    <div>
-      <PaymentReceiveDeleteAlert name={'payment-receive-delete'} />
-    </div>
-  );
-}
+export default [
+  { name: 'payment-receive-delete', component: PaymentReceiveDeleteAlert },
+];
diff --git a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
index 352a8ef9c..876f964d9 100644
--- a/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
+++ b/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
@@ -4,7 +4,6 @@ import 'style/pages/PaymentReceive/List.scss';
 
 import { DashboardContentTable, DashboardPageContent } from 'components';
 import PaymentReceiveActionsBar from './PaymentReceiveActionsBar';
-import PaymentReceiveAlerts from '../PaymentReceiveAlerts';
 import { PaymentReceivesListProvider } from './PaymentReceiptsListProvider';
 import PaymentReceiveViewTabs from './PaymentReceiveViewTabs';
 import PaymentReceivesTable from './PaymentReceivesTable';
@@ -44,8 +43,6 @@ function PaymentReceiveList({
         <PaymentReceiveViewTabs />
         <PaymentReceivesTable />
       </DashboardPageContent>
-
-      <PaymentReceiveAlerts />
     </PaymentReceivesListProvider>
   );
 }
diff --git a/src/containers/Sales/Receipts/ReceiptsAlerts.js b/src/containers/Sales/Receipts/ReceiptsAlerts.js
index a5e98e5e6..b71ba333b 100644
--- a/src/containers/Sales/Receipts/ReceiptsAlerts.js
+++ b/src/containers/Sales/Receipts/ReceiptsAlerts.js
@@ -1,15 +1,16 @@
 import React from 'react';
-import ReceiptDeleteAlert from 'containers/Alerts/Receipts/ReceiptDeleteAlert';
-import ReceiptCloseAlert from 'containers/Alerts/Receipts/ReceiptCloseAlert';
+
+const ReceiptDeleteAlert = React.lazy(() =>
+  import('../../Alerts/Receipts/ReceiptDeleteAlert'),
+);
+const ReceiptCloseAlert = React.lazy(() =>
+  import('../../Alerts/Receipts/ReceiptCloseAlert'),
+);
 
 /**
  * Receipts alerts.
  */
-export default function ReceiptsAlerts() {
-  return (
-    <div>
-      <ReceiptDeleteAlert name={'receipt-delete'} />
-      <ReceiptCloseAlert name={'receipt-close'} />
-    </div>
-  );
-}
+export default [
+  { name: 'receipt-delete', component: ReceiptDeleteAlert },
+  { name: 'receipt-close', component: ReceiptCloseAlert },
+];
diff --git a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
index 65fcf60c6..a2b218e86 100644
--- a/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
+++ b/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
@@ -5,7 +5,6 @@ import 'style/pages/SaleReceipt/List.scss';
 
 import ReceiptActionsBar from './ReceiptActionsBar';
 import ReceiptViewTabs from './ReceiptViewTabs';
-import ReceiptsAlerts from '../ReceiptsAlerts';
 import ReceiptsTable from './ReceiptsTable';
 
 import withReceipts from './withReceipts';
@@ -46,7 +45,6 @@ function ReceiptsList({
           <ReceiptsTable />
         </DashboardPageContent>
 
-        <ReceiptsAlerts />
       </DashboardPageContent>
     </ReceiptsListProvider>
   );
diff --git a/src/containers/Vendors/VendorsAlerts.js b/src/containers/Vendors/VendorsAlerts.js
index 91cf41e2b..8c845e725 100644
--- a/src/containers/Vendors/VendorsAlerts.js
+++ b/src/containers/Vendors/VendorsAlerts.js
@@ -1,14 +1,17 @@
 import React from 'react';
-import VendorDeleteAlert from 'containers/Alerts/Vendors/VendorDeleteAlert';
-import ContactActivateAlert from '../../containers/Alerts/Contacts/ContactActivateAlert';
-import ContactInactivateAlert from '../../containers/Alerts/Contacts/ContactInactivateAlert';
 
-export default function VendorsAlerts() {
-  return (
-    <div>
-      <VendorDeleteAlert name={'vendor-delete'} />
-      <ContactActivateAlert name={'contact-activate'} />
-      <ContactInactivateAlert name={'contact-inactivate'} />
-    </div>
-  );
-}
+const VendorDeleteAlert = React.lazy(() =>
+  import('../Alerts/Vendors/VendorDeleteAlert'),
+);
+const ContactActivateAlert = React.lazy(() =>
+  import('../Alerts/Contacts/ContactActivateAlert'),
+);
+const ContactInactivateAlert = React.lazy(() =>
+  import('../Alerts/Contacts/ContactInactivateAlert'),
+);
+
+export default [
+  { name: 'vendor-delete', component: VendorDeleteAlert },
+  { name: 'contact-activate', component: ContactActivateAlert },
+  { name: 'contact-inactivate', component: ContactInactivateAlert },
+];
diff --git a/src/containers/Vendors/VendorsLanding/VendorsList.js b/src/containers/Vendors/VendorsLanding/VendorsList.js
index c7566249a..4b8e08e7d 100644
--- a/src/containers/Vendors/VendorsLanding/VendorsList.js
+++ b/src/containers/Vendors/VendorsLanding/VendorsList.js
@@ -7,7 +7,6 @@ import { DashboardContentTable, DashboardPageContent } from 'components';
 import { VendorsListProvider } from './VendorsListProvider';
 import VendorActionsBar from './VendorActionsBar';
 import VendorViewsTabs from './VendorViewsTabs';
-import VendorsAlerts from '../VendorsAlerts';
 import VendorsTable from './VendorsTable';
 
 import withVendors from './withVendors';
@@ -45,7 +44,6 @@ function VendorsList({
         <VendorViewsTabs />
         <VendorsTable />
       </DashboardPageContent>
-      <VendorsAlerts />
     </VendorsListProvider>
   );
 }