feat: refactoring alerts.

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 (
+export default [
-    <div>
+  { name: 'journal-delete', component: JournalDeleteAlert },
-      <JournalDeleteAlert name={'journal-delete'} />
+  { name: 'journal-publish', component: JournalPublishAlert },
-      <JournalPublishAlert name={'journal-publish'} />
+];
-    </div>
-  )
-}

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>
   );
 }

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,
+];

src/containers/CashFlow/AccountTransactions/AccountTransactionsAlerts.js

@@ -1,24 +1,15 @@
 import React from 'react';
 
-import AccountDeleteTransactionAlert from '../../Alerts/CashFlow/AccountDeleteTransactionAlert';
+const AccountDeleteTransactionAlert = React.lazy(() =>
-import ReceiptDeleteAlert from '../../Alerts/Receipts/ReceiptDeleteAlert';
+  import('../../Alerts/CashFlow/AccountDeleteTransactionAlert'),
-import JournalDeleteAlert from '../../Alerts/ManualJournals/JournalDeleteAlert';
+);
-import ExpenseDeleteAlert from '../../Alerts/Expenses/ExpenseDeleteAlert';
-import PaymentMadeDeleteAlert from '../../Alerts/PaymentMades/PaymentMadeDeleteAlert';
-import PaymentReceiveDeleteAlert from '../../Alerts/PaymentReceives/PaymentReceiveDeleteAlert';
 
 /**
  * Account transaction alert.
  */
-export default function AccountTransactionsAlerts() {
+export default [
-  return (
+  {
-    <div>
+    name: 'account-transaction-delete',
-      <AccountDeleteTransactionAlert name={'account-transaction-delete'} />
+    component: AccountDeleteTransactionAlert,
-      <ReceiptDeleteAlert name={'receipt-delete'} />
+  },
-      <JournalDeleteAlert name={'journal-delete'} />
+];
-      <ExpenseDeleteAlert name={"expense-delete"} />
-      <PaymentMadeDeleteAlert name={'payment-made-delete'} />
-      <PaymentReceiveDeleteAlert name={'payment-receive-delete'} />
-    </div>
-  );
-}

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>
   );
 }

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';
+const CustomerDeleteAlert = React.lazy(() =>
-import ContactInactivateAlert from '../../containers/Alerts/Contacts/ContactInactivateAlert';
+  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() {
+export default [
-  return (
+  { name: 'customer-delete', component: CustomerDeleteAlert },
-    <div>
+  { name: 'contact-activate', component: ContactActivateAlert },
-      <CustomerDeleteAlert name={'customer-delete'} />
+  { name: 'contact-inactivate', component: ContactInactivateAlert },
-      <ContactActivateAlert name={'contact-activate'} />
+];
-      <ContactInactivateAlert name={'contact-inactivate'} />
-    </div>
-  );
-}

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>
   );
 }

src/containers/ExchangeRates/ExchangeRatesAlerts.js

@@ -1,12 +1,9 @@
 import React from 'react';
 
-import ExchangeRateDeleteAlert from 'containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert';
+const ExchangeRateDeleteAlert = React.lazy(() =>
-// import ExchangeRateBulkDeleteAlert from 'containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert';
+  import('../Alerts/ExchangeRates/ExchangeRateDeleteAlert'),
-
-export default function ExchangeRatesAlerts() {
-  return (
-    <div>
-      <ExchangeRateDeleteAlert name={'exchange-rate-delete'} />
-    </div>
 );
-}
+
+export default [
+  { name: 'exchange-rate-delete', component: ExchangeRateDeleteAlert },
+];

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>
   );
 }

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({}) {
+export default [
-  return (
+  { name: 'expense-delete', component: ExpenseDeleteAlert },
-    <div class="expenses-alerts">
+  { name: 'expense-publish', component: ExpensePublishAlert },
-      <ExpenseDeleteAlert name={'expense-delete'} />
+];
-      <ExpensePublishAlert name={'expense-publish'} />
-    </div>
-  );
-}

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>
   );
 }

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>
   );

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() {
+const InventoryAdjustmentDeleteAlert = React.lazy(() =>
-  return (
+  import('../Alerts/Items/InventoryAdjustmentDeleteAlert'),
-    <div className={'inventory-adjustments-alert'}>
-      <InventoryAdjustmentDeleteAlert name={'inventory-adjustment-delete'} />
-      <InventoryAdjustmentPublishAlert name={'inventory-adjustment-publish'} />
-    </div>
 );
-}
+
+const InventoryAdjustmentPublishAlert = React.lazy(() =>
+  import('../Alerts/Items/InventoryAdjustmentPublishAlert'),
+);
+
+export default [
+  {
+    name: 'inventory-adjustment-delete',
+    component: InventoryAdjustmentDeleteAlert,
+  },
+  {
+    name: 'inventory-adjustment-publish',
+    component: InventoryAdjustmentPublishAlert,
+  },
+];

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';
+const ItemDeleteAlert = React.lazy(() =>
-import ItemActivateAlert from 'containers/Alerts/Items/ItemActivateAlert';
+  import('containers/Alerts/Items/ItemDeleteAlert'),
-import ItemBulkDeleteAlert from 'containers/Alerts/Items/ItemBulkDeleteAlert';
+);
+
+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() {
+export default [
-  return (
+  {
-    <div>
+    name: 'item-delete',
-      <ItemDeleteAlert name={'item-delete'} />
+    component: ItemDeleteAlert,
-      <ItemInactivateAlert name={'item-inactivate'} />
+  },
-      <ItemActivateAlert name={'item-activate'} />
+  {
-      <ItemBulkDeleteAlert name={'items-bulk-delete'} />
+    name: 'item-inactivate',
-    </div>
+    component: ItemInactivateAlert,
-  );
+  },
-}
+  {
+    name: 'item-activate',
+    component: ItemActivateAlert,
+  },
+  {
+    name: 'items-bulk-delete',
+    component: ItemBulkDeleteAlert,
+  },
+];

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>
   );
 }

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>
   );
 }

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() {
+const ItemCategoryDeleteAlert = React.lazy(() =>
-  return (
+  import('../Alerts/Items/ItemCategoryDeleteAlert'),
-    <div class="items-categories-alerts">
-      <ItemCategoryDeleteAlert name={'item-category-delete'} />
-      {/* <ItemCategoryBulkDeleteAlert name={'item-categories-bulk-delete'} /> */}
-    </div>
 );
-}
+
+export default [
+  { name: 'item-category-delete', component: ItemCategoryDeleteAlert },
+];

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() {
+const CurrencyDeleteAlert = React.lazy(() =>
-  return (
+  import('../../Alerts/Currencies/CurrencyDeleteAlert'),
-    <div>
-      <CurrencyDeleteAlert name={'currency-delete'} />
-    </div>
 );
-}
+export default [{ name: 'currency-delete', component: CurrencyDeleteAlert }];

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>
   );
 }

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() {
+const UserDeleteAlert = React.lazy(() =>
-  return (
+  import('../../Alerts/Users/UserDeleteAlert'),
-    <>
-      <UserDeleteAlert name={'user-delete'} />
-      <UserInactivateAlert name={'user-inactivate'} />
-      <UserActivateAlert name={'user-activate'} />
-    </>
 );
-}
+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 },
+];

src/containers/Preferences/Users/UsersList.js

@@ -5,7 +5,6 @@ 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(
+export default compose(withDashboardActions)(UsersListPreferences);
-  withDashboardActions,
-)(UsersListPreferences);

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() {
+const BillOpenAlert = React.lazy(() =>
-  return (
+  import('containers/Alerts/Bills/BillOpenAlert'),
-    <div class="bills-alerts">
-      <BillDeleteAlert name={'bill-delete'} />
-      <BillOpenAlert name={'bill-open'} />
-    </div>
 );
-}
+const BillDeleteAlert = React.lazy(() =>
+  import('containers/Alerts/Bills/BillDeleteAlert'),
+);
+
+export default [
+  { name: 'bill-delete', component: BillDeleteAlert },
+  { name: 'bill-open', component: BillOpenAlert },
+];

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>
   );
 }

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() {
+const PaymentMadeDeleteAlert = React.lazy(() =>
-  return (
+  import('containers/Alerts/PaymentMades/PaymentMadeDeleteAlert'),
-    <div>
-      <PaymentMadeDeleteAlert name={'payment-made-delete'} />
-    </div>
 );
-}
+
+export default [
+  { name: 'payment-made-delete', component: PaymentMadeDeleteAlert },
+];

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';
+const EstimateDeleteAlert = React.lazy(() =>
-import EstimateApproveAlert from 'containers/Alerts/Estimates/EstimateApproveAlert';
+  import('containers/Alerts/Estimates/EstimateDeleteAlert'),
-import EstimateRejectAlert from 'containers/Alerts/Estimates/EstimateRejectAlert';
+);
+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() {
+export default [
-  return (
+  {
-    <div>
+    name: 'estimate-delete',
-      <EstimateDeleteAlert name={'estimate-delete'} />
+    component: EstimateDeleteAlert,
-      <EstimateDeliveredAlert name={'estimate-deliver'} />
+  },
-      <EstimateApproveAlert name={'estimate-Approve'} />
+  {
-      <EstimateRejectAlert name={'estimate-reject'} />
+    name: 'estimate-deliver',
-    </div>
+    component: EstimateDeliveredAlert,
-  );
+  },
-}
+  {
+    name: 'estimate-Approve',
+    component: EstimateApproveAlert,
+  },
+  {
+    name: 'estimate-reject',
+    component: EstimateRejectAlert,
+  },
+];

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>
   );
 }

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() {
+export default [
-  return (
+  { name: 'invoice-delete', component: InvoiceDeleteAlert },
-    <div>
+  { name: 'invoice-deliver', component: InvoiceDeliverAlert },
-      <InvoiceDeleteAlert name={'invoice-delete'} />
+];
-      <InvoiceDeliverAlert name={'invoice-deliver'} />
-    </div>
-  );
-}

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>
   );
 }

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() {
+export default [
-  return (
+  { name: 'payment-receive-delete', component: PaymentReceiveDeleteAlert },
-    <div>
+];
-      <PaymentReceiveDeleteAlert name={'payment-receive-delete'} />
-    </div>
-  );
-}

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>
   );
 }

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() {
+export default [
-  return (
+  { name: 'receipt-delete', component: ReceiptDeleteAlert },
-    <div>
+  { name: 'receipt-close', component: ReceiptCloseAlert },
-      <ReceiptDeleteAlert name={'receipt-delete'} />
+];
-      <ReceiptCloseAlert name={'receipt-close'} />
-    </div>
-  );
-}

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>
   );

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() {
+const VendorDeleteAlert = React.lazy(() =>
-  return (
+  import('../Alerts/Vendors/VendorDeleteAlert'),
-    <div>
-      <VendorDeleteAlert name={'vendor-delete'} />
-      <ContactActivateAlert name={'contact-activate'} />
-      <ContactInactivateAlert name={'contact-inactivate'} />
-    </div>
 );
-}
+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 },
+];

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>
   );
 }