feat: application booting.

2026-02-17 13:20:31 +00:00 · 2021-09-08 16:27:16 +02:00
parent 7b3d310eab
commit 361aab89e6
93 changed files with 961 additions and 723 deletions
--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';

-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';

 import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -91,33 +91,35 @@ function ManualJournalsDataTable({
  }

  return (
-    <DataTable
-      noInitialFetch={true}
-      columns={columns}
-      data={manualJournals}
-      initialState={manualJournalsTableState}
-      manualSortBy={true}
-      selectionColumn={true}
-      expandable={true}
-      sticky={true}
-      loading={isManualJournalsLoading}
-      headerLoading={isManualJournalsLoading}
-      progressBarLoading={isManualJournalsFetching}
-      pagesCount={pagination.pagesCount}
-      pagination={true}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      onFetchData={handleFetchData}
-      payload={{
-        onDelete: handleDeleteJournal,
-        onPublish: handlePublishJournal,
-        onEdit: handleEditJournal,
-        onViewDetails: handleViewDetailJournal,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        noInitialFetch={true}
+        columns={columns}
+        data={manualJournals}
+        initialState={manualJournalsTableState}
+        manualSortBy={true}
+        selectionColumn={true}
+        expandable={true}
+        sticky={true}
+        loading={isManualJournalsLoading}
+        headerLoading={isManualJournalsLoading}
+        progressBarLoading={isManualJournalsFetching}
+        pagesCount={pagination.pagesCount}
+        pagination={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        onFetchData={handleFetchData}
+        payload={{
+          onDelete: handleDeleteJournal,
+          onPublish: handlePublishJournal,
+          onEdit: handleEditJournal,
+          onViewDetails: handleViewDetailJournal,
+        }}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
+++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js
@@ -30,20 +30,19 @@ function ManualJournalsTable({

      <DashboardPageContent>
        <ManualJournalsViewTabs />
-
-        <DashboardContentTable>
-          <ManualJournalsDataTable />
-        </DashboardContentTable>
-
-        <ManualJournalsAlerts />
+        <ManualJournalsDataTable />
      </DashboardPageContent>
+
+      <ManualJournalsAlerts />
    </ManualJournalsListProvider>
  );
 }

 export default compose(
-  withManualJournals(({ manualJournalsTableState, manualJournalTableStateChanged }) => ({
-    journalsTableState: manualJournalsTableState,
-    journalsTableStateChanged: manualJournalTableStateChanged,
-  })),
+  withManualJournals(
+    ({ manualJournalsTableState, manualJournalTableStateChanged }) => ({
+      journalsTableState: manualJournalsTableState,
+      journalsTableStateChanged: manualJournalTableStateChanged,
+    }),
+  ),
 )(ManualJournalsTable);
--- a/client/src/containers/Authentication/AuthenticationBoot.js
+++ b/client/src/containers/Authentication/AuthenticationBoot.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import withDashboardActions from '../../containers/Dashboard/withDashboardActions';
+
+function AuthenticationBootJSX({ setAppIsLoading }) {
+  React.useEffect(() => {
+    setAppIsLoading(false);
+  }, [setAppIsLoading]);
+
+  return null;
+}
+export const AuthenticationBoot = R.compose(withDashboardActions)(
+  AuthenticationBootJSX,
+);
--- a/client/src/containers/Authentication/Login.js
+++ b/client/src/containers/Authentication/Login.js
@@ -20,18 +20,20 @@ export default function Login() {
    loginMutate({
      crediential: values.crediential,
      password: values.password,
-    })
-      .then(() => {
-        setSubmitting(false);
-      })
-      .catch(({ response: { data: { errors } } }) => {
+    }).catch(
+      ({
+        response: {
+          data: { errors },
+        },
+      }) => {
        const toastBuilders = transformLoginErrorsToToasts(errors);

        toastBuilders.forEach((builder) => {
          Toaster.show(builder);
        });
        setSubmitting(false);
-      });
+      },
+    );
  };

  return (
@@ -66,4 +68,4 @@ export default function Login() {
      </div>
    </AuthInsider>
  );
-}
+}
--- a/client/src/containers/Authentication/Register.js
+++ b/client/src/containers/Authentication/Register.js
@@ -1,15 +1,16 @@
-import React, { useMemo  } from 'react';
+import React, { useMemo } from 'react';
 import { Formik } from 'formik';
-import { Link, useHistory } from 'react-router-dom';
-import {
-  Intent,
-} from '@blueprintjs/core';
+import { Link } from 'react-router-dom';
+import { Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';

 import { FormattedMessage as T } from 'components';
 import AppToaster from 'components/AppToaster';
 import AuthInsider from 'containers/Authentication/AuthInsider';
-import { useAuthLogin, useAuthRegister } from '../../hooks/query/authentication';
+import {
+  useAuthLogin,
+  useAuthRegister,
+} from '../../hooks/query/authentication';

 import RegisterForm from './RegisterForm';
 import { RegisterSchema, transformRegisterErrorsToForm } from './utils';
@@ -18,11 +19,9 @@ import { RegisterSchema, transformRegisterErrorsToForm } from './utils';
 * Register form.
 */
 export default function RegisterUserForm() {
-  const history = useHistory();
+  const { mutateAsync: authLoginMutate } = useAuthLogin();
+  const { mutateAsync: authRegisterMutate } = useAuthRegister();

-  const { mutateAsync: authLoginMutate }  = useAuthLogin();
-  const { mutateAsync: authRegisterMutate }  = useAuthRegister();
- 
  const initialValues = useMemo(
    () => ({
      first_name: '',
@@ -41,26 +40,33 @@ export default function RegisterUserForm() {
        authLoginMutate({
          crediential: values.email,
          password: values.password,
-        })
-          .then(() => {
-            history.push('/register/subscription');
-            setSubmitting(false);
-          })
-          .catch(({ response: { data: { errors } } }) => {
+        }).catch(
+          ({
+            response: {
+              data: { errors },
+            },
+          }) => {
            AppToaster.show({
              message: intl.get('something_wentwrong'),
              intent: Intent.SUCCESS,
            });
-          });
+          },
+        );
      })
-      .catch(({ response: { data: { errors } } }) => {
-        const formErrors = transformRegisterErrorsToForm(errors);
+      .catch(
+        ({
+          response: {
+            data: { errors },
+          },
+        }) => {
+          const formErrors = transformRegisterErrorsToForm(errors);

-        setErrors(formErrors);
-        setSubmitting(false);
-      });
+          setErrors(formErrors);
+          setSubmitting(false);
+        },
+      );
  };
- 
+
  return (
    <AuthInsider>
      <div className={'register-form'}>
@@ -83,4 +89,4 @@ export default function RegisterUserForm() {
      </div>
    </AuthInsider>
  );
-}
+}
--- a/client/src/containers/Authentication/withAuthentication.js
+++ b/client/src/containers/Authentication/withAuthentication.js
@@ -1,14 +1,15 @@
-import { isAuthenticated } from 'store/authentication/authentication.reducer'
+import { isAuthenticated } from 'store/authentication/authentication.reducer';
 import { connect } from 'react-redux';

 export default (mapState) => {
  const mapStateToProps = (state, props) => {
    const mapped = {
      isAuthorized: isAuthenticated(state),
-      user: state.authentication.user,
+      authenticatedUserId: state.authentication.userId,
      currentOrganizationId: state.authentication?.organizationId,
+      currentTenantId: state.authentication?.tenantId,
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
  return connect(mapStateToProps);
-};
+};
--- a/client/src/containers/Customers/CustomersLanding/CustomersList.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersList.js
@@ -47,10 +47,7 @@ function CustomersList({

      <DashboardPageContent>
        <CustomersViewsTabs />
-
-        <DashboardContentTable>
-          <CustomersTable />
-        </DashboardContentTable>
+        <CustomersTable />
      </DashboardPageContent>
      <CustomersAlerts />
    </CustomersListProvider>
--- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js
+++ b/client/src/containers/Customers/CustomersLanding/CustomersTable.js
@@ -5,7 +5,7 @@ import CustomersEmptyStatus from './CustomersEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';

 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
@@ -100,37 +100,39 @@ function CustomersTable({
  }

  return (
-    <DataTable
-      noInitialFetch={true}
-      columns={columns}
-      data={customers}
-      initialState={customersTableState}
-      loading={isCustomersLoading}
-      headerLoading={isCustomersLoading}
-      progressBarLoading={isCustomersFetching}
-      onFetchData={handleFetchData}
-      selectionColumn={true}
-      expandable={false}
-      sticky={true}
-      spinnerProps={{ size: 30 }}
-      pagination={true}
-      manualSortBy={true}
-      manualPagination={true}
-      pagesCount={pagination.pagesCount}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      payload={{
-        onDelete: handleCustomerDelete,
-        onEdit: handleCustomerEdit,
-        onDuplicate: handleContactDuplicate,
-        onInactivate: handleInactiveCustomer,
-        onActivate: handleActivateCustomer,
-        onViewDetails: handleViewDetailCustomer,
-      }}
-      ContextMenu={ActionsMenu}
-    />
+    <DashboardContentTable>
+      <DataTable
+        noInitialFetch={true}
+        columns={columns}
+        data={customers}
+        initialState={customersTableState}
+        loading={isCustomersLoading}
+        headerLoading={isCustomersLoading}
+        progressBarLoading={isCustomersFetching}
+        onFetchData={handleFetchData}
+        selectionColumn={true}
+        expandable={false}
+        sticky={true}
+        spinnerProps={{ size: 30 }}
+        pagination={true}
+        manualSortBy={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        payload={{
+          onDelete: handleCustomerDelete,
+          onEdit: handleCustomerEdit,
+          onDuplicate: handleContactDuplicate,
+          onInactivate: handleInactiveCustomer,
+          onActivate: handleActivateCustomer,
+          onViewDetails: handleViewDetailCustomer,
+        }}
+        ContextMenu={ActionsMenu}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Dashboard/withDashboard.js
+++ b/client/src/containers/Dashboard/withDashboard.js
@@ -11,6 +11,8 @@ export default (mapState) => {
      sidebarExpended: state.dashboard.sidebarExpended,
      preferencesPageTitle: state.dashboard.preferencesPageTitle,
      dashboardBackLink: state.dashboard.backLink,
+      appIsLoading: state.dashboard.appIsLoading,
+      appIntlIsLoading: state.dashboard.appIntlIsLoading
    };
    return mapState ? mapState(mapped, state, props) : mapped;
  };
--- a/client/src/containers/Dashboard/withDashboardActions.js
+++ b/client/src/containers/Dashboard/withDashboardActions.js
@@ -2,6 +2,8 @@ import { connect } from 'react-redux';
 import t from 'store/types';
 import {
  toggleExpendSidebar,
+  appIsLoading,
+  appIntlIsLoading
 } from 'store/dashboard/dashboard.actions';

 const mapActionsToProps = (dispatch) => ({
@@ -55,6 +57,8 @@ const mapActionsToProps = (dispatch) => ({
      type: t.SET_DASHBOARD_BACK_LINK,
      payload: { backLink },
    }),
+  setAppIsLoading: (isLoading) => dispatch(appIsLoading(isLoading)),
+  setAppIntlIsLoading: (isLoading) => dispatch(appIntlIsLoading(isLoading)),
 });

 export default connect(null, mapActionsToProps);
--- a/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js
+++ b/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js
@@ -35,8 +35,12 @@ function PaymentViaLicenseDialogContent({
  const handleSubmit = (values, { setSubmitting, setErrors }) => {
    setSubmitting(true);

+    const mutateValues = {
+      plan_slug: `${values.plan_slug}-${values.period}ly`,
+      license_code: values.license_code,
+    };
    // Payment via voucher mutate.
-    paymentViaVoucherMutate({ ...values })
+    paymentViaVoucherMutate({ ...mutateValues })
      .then(() => {
        Toaster.show({
          message: intl.get('payment_via_voucher.success_message'),
--- a/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js
@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { compose } from 'utils';
 import { useExpensesListContext } from './ExpensesListProvider';

+import { DashboardContentTable } from 'components';
 import DataTable from 'components/DataTable';
 import ExpensesEmptyStatus from './ExpensesEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -84,32 +85,34 @@ function ExpensesDataTable({
  }

  return (
-    <DataTable
-      columns={columns}
-      data={expenses}
-      loading={isExpensesLoading}
-      headerLoading={isExpensesLoading}
-      progressBarLoading={isExpensesFetching}
-      selectionColumn={true}
-      noInitialFetch={true}
-      sticky={true}
-      onFetchData={handleFetchData}
-      pagination={true}
-      manualSortBy={true}
-      manualPagination={true}
-      pagesCount={pagination.pagesCount}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onPublish: handlePublishExpense,
-        onDelete: handleDeleteExpense,
-        onEdit: handleEditExpense,
-        onViewDetails: handleViewDetailExpense,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={expenses}
+        loading={isExpensesLoading}
+        headerLoading={isExpensesLoading}
+        progressBarLoading={isExpensesFetching}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        onFetchData={handleFetchData}
+        pagination={true}
+        manualSortBy={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onPublish: handlePublishExpense,
+          onDelete: handleDeleteExpense,
+          onEdit: handleEditExpense,
+          onViewDetails: handleViewDetailExpense,
+        }}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
@@ -47,10 +47,7 @@ function ExpensesList({

      <DashboardPageContent>
        <ExpenseViewTabs />
-
-        <DashboardContentTable>
-          <ExpenseDataTable />
-        </DashboardContentTable>
+        <ExpenseDataTable />
      </DashboardPageContent>

      <ExpensesAlerts />
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummary.js
@@ -12,8 +12,8 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { APAgingSummaryProvider } from './APAgingSummaryProvider';
 import { APAgingSummarySheetLoadingBar } from './components';

-import withSettings from 'containers/Settings/withSettings';
-import withAPAgingSummaryActions from './withAPAgingSummaryActions'
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
+import withAPAgingSummaryActions from './withAPAgingSummaryActions';
 import { compose } from 'utils';

 /**
@@ -51,9 +51,12 @@ function APAgingSummary({
  };

  // Hide the report filter drawer once the page unmount.
-  useEffect(() => () => {
-    toggleDisplayFilterDrawer(false);
-  }, [toggleDisplayFilterDrawer])
+  useEffect(
+    () => () => {
+      toggleDisplayFilterDrawer(false);
+    },
+    [toggleDisplayFilterDrawer],
+  );

  return (
    <APAgingSummaryProvider filter={filter}>
@@ -79,8 +82,8 @@ function APAgingSummary({
 }

 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings?.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization?.name,
  })),
-  withAPAgingSummaryActions  
+  withAPAgingSummaryActions,
 )(APAgingSummary);
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js
@@ -13,7 +13,7 @@ import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
 import { ARAgingSummarySheetLoadingBar } from './components';

 import withARAgingSummaryActions from './withARAgingSummaryActions'
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';

 import { compose } from 'utils';

@@ -77,8 +77,8 @@ function ReceivableAgingSummarySheet({
 }

 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withARAgingSummaryActions
 )(ReceivableAgingSummarySheet);
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
@@ -10,7 +10,7 @@ import { BalanceSheetAlerts, BalanceSheetLoadingBar } from './components';
 import { FinancialStatement } from 'components';

 import withBalanceSheetActions from './withBalanceSheetActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 import { BalanceSheetProvider } from './BalanceSheetProvider';

 import { compose } from 'utils';
@@ -23,7 +23,7 @@ function BalanceSheet({
  organizationName,

  // #withBalanceSheetActions
-  toggleBalanceSheetFilterDrawer
+  toggleBalanceSheetFilterDrawer,
 }) {
  const [filter, setFilter] = useState({
    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -52,9 +52,12 @@ function BalanceSheet({
  };

  // Hides the balance sheet filter drawer once the page unmount.
-  useEffect(() => () => {
-    toggleBalanceSheetFilterDrawer(false);
-  }, [toggleBalanceSheetFilterDrawer])
+  useEffect(
+    () => () => {
+      toggleBalanceSheetFilterDrawer(false);
+    },
+    [toggleBalanceSheetFilterDrawer],
+  );

  return (
    <BalanceSheetProvider filter={filter}>
@@ -81,8 +84,8 @@ function BalanceSheet({
 }

 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withBalanceSheetActions,
 )(BalanceSheet);
--- a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js
+++ b/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatement.js
@@ -9,7 +9,7 @@ import CashFlowStatementHeader from './CashFlowStatementHeader';
 import CashFlowStatementTable from './CashFlowStatementTable';
 import CashFlowStatementActionsBar from './CashFlowStatementActionsBar';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 import withCashFlowStatementActions from './withCashFlowStatementActions';
 import { CashFlowStatementProvider } from './CashFlowStatementProvider';
 import {
@@ -85,8 +85,8 @@ function CashFlowStatement({
 }

 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings?.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withCashFlowStatementActions,
 )(CashFlowStatement);
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummary.js
@@ -13,8 +13,7 @@ import CustomersBalanceSummaryTable from './CustomersBalanceSummaryTable';
 import { CustomersBalanceLoadingBar } from './components';
 import { CustomersBalanceSummaryProvider } from './CustomersBalanceSummaryProvider';
 import withCustomersBalanceSummaryActions from './withCustomersBalanceSummaryActions';
-
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';

 import { compose } from 'redux';

@@ -81,8 +80,8 @@ function CustomersBalanceSummary({
  );
 }
 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withCustomersBalanceSummaryActions,
 )(CustomersBalanceSummary);
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactions.js
@@ -10,7 +10,7 @@ import CustomersTransactionsTable from './CustomersTransactionsTable';
 import CustomersTransactionsActionsBar from './CustomersTransactionsActionsBar';

 import withCustomersTransactionsActions from './withCustomersTransactionsActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 import { CustomersTransactionsLoadingBar } from './components';
 import { CustomersTransactionsProvider } from './CustomersTransactionsProvider';

@@ -81,8 +81,8 @@ function CustomersTransactions({
  );
 }
 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withCustomersTransactionsActions,
 )(CustomersTransactions);
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
@@ -15,7 +15,7 @@ import {
 } from './components';

 import withGeneralLedgerActions from './withGeneralLedgerActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';

 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 import { compose } from 'utils';
@@ -85,7 +85,7 @@ function GeneralLedger({

 export default compose(
  withGeneralLedgerActions,
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
 )(GeneralLedger);
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetails.js
@@ -10,7 +10,7 @@ import InventoryItemDetailsHeader from './InventoryItemDetailsHeader';
 import InventoryItemDetailsTable from './InventoryItemDetailsTable';

 import withInventoryItemDetailsActions from './withInventoryItemDetailsActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 import { InventoryItemDetailsProvider } from './InventoryItemDetailsProvider';
 import {
  InventoryItemDetailsLoadingBar,
@@ -84,8 +84,8 @@ function InventoryItemDetails({
 }

 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings?.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withInventoryItemDetailsActions,
 )(InventoryItemDetails);
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuation.js
@@ -11,7 +11,7 @@ import InventoryValuationTable from './InventoryValuationTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { InventoryValuationLoadingBar } from './components';
 import withInventoryValuationActions from './withInventoryValuationActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';

 import { compose } from 'utils';

@@ -80,7 +80,7 @@ function InventoryValuation({

 export default compose(
  withInventoryValuationActions,
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings?.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
 )(InventoryValuation);
--- a/client/src/containers/FinancialStatements/Journal/Journal.js
+++ b/client/src/containers/FinancialStatements/Journal/Journal.js
@@ -11,7 +11,7 @@ import JournalActionsBar from './JournalActionsBar';
 import { JournalSheetProvider } from './JournalProvider';
 import { JournalSheetLoadingBar, JournalSheetAlerts } from './components';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withJournalActions from './withJournalActions';

@@ -79,7 +79,7 @@ function Journal({
 export default compose(
  withDashboardActions,
  withJournalActions,
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
 )(Journal);
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
@@ -10,7 +10,7 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';

 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withProfitLossActions from './withProfitLossActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';

 import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
 import { ProfitLossSheetProvider } from './ProfitLossProvider';
@@ -91,7 +91,7 @@ function ProfitLossSheet({
 export default compose(
  withDashboardActions,
  withProfitLossActions,
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
 )(ProfitLossSheet);
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js
@@ -11,7 +11,7 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { PurchasesByItemsLoadingBar } from './components';

 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
 import { compose } from 'utils';

 /**
@@ -82,7 +82,7 @@ function PurchasesByItems({

 export default compose(
  withPurchasesByItemsActions,
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
 )(PurchasesByItems);
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItems.js
@@ -13,7 +13,7 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { SalesByItemsLoadingBar } from './components';

 import withSalesByItemsActions from './withSalesByItemsActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';

 import { compose } from 'utils';

@@ -84,7 +84,7 @@ function SalesByItems({

 export default compose(
  withSalesByItemsActions,
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
 )(SalesByItems);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
@@ -15,7 +15,7 @@ import {
 } from './components';

 import withTrialBalanceActions from './withTrialBalanceActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../Organization/withCurrentOrganization';

 import { compose } from 'utils';

@@ -91,7 +91,7 @@ function TrialBalanceSheet({

 export default compose(
  withTrialBalanceActions,
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
 )(TrialBalanceSheet);
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummary.js
@@ -14,7 +14,7 @@ import { VendorsBalanceSummaryProvider } from './VendorsBalanceSummaryProvider';
 import { VendorsSummarySheetLoadingBar } from './components';
 import withVendorsBalanceSummaryActions from './withVendorsBalanceSummaryActions';

-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';

 import { compose } from 'utils';

@@ -82,8 +82,8 @@ function VendorsBalanceSummary({
 }

 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings?.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withVendorsBalanceSummaryActions,
 )(VendorsBalanceSummary);
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactions.js
@@ -10,7 +10,7 @@ import VendorsTransactionsActionsBar from './VendorsTransactionsActionsBar';
 import VendorsTransactionsTable from './VendorsTransactionsTable';

 import withVendorsTransactionsActions from './withVendorsTransactionsActions';
-import withSettings from 'containers/Settings/withSettings';
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';

 import { VendorsTransactionsProvider } from './VendorsTransactionsProvider';
 import { VendorsTransactionsLoadingBar } from './components';
@@ -81,8 +81,8 @@ function VendorsTransactions({
  );
 }
 export default compose(
-  withSettings(({ organizationSettings }) => ({
-    organizationName: organizationSettings.name,
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
  })),
  withVendorsTransactionsActions,
 )(VendorsTransactions);
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/client/src/containers/Items/ItemsDataTable.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { FormattedMessage as T } from 'components';

-import { DataTable } from 'components';
+import { DashboardContentTable, DataTable } from 'components';

 import ItemsEmptyStatus from './ItemsEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -108,41 +108,43 @@ function ItemsDataTable({
  }

  return (
-    <DataTable
-      columns={columns}
-      data={items}
-      initialState={itemsTableState}
-      loading={isItemsLoading}
-      headerLoading={isItemsLoading}
-      progressBarLoading={isItemsFetching}
-      noInitialFetch={true}
-      selectionColumn={true}
-      spinnerProps={{ size: 30 }}
-      expandable={false}
-      sticky={true}
-      rowClassNames={rowClassNames}
-      pagination={true}
-      manualSortBy={true}
-      manualPagination={true}
-      pagesCount={pagination.pagesCount}
-      autoResetSortBy={false}
-      autoResetPage={true}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ItemsActionMenuList}
-      onFetchData={handleFetchData}
-      payload={{
-        onDeleteItem: handleDeleteItem,
-        onEditItem: handleEditItem,
-        onInactivateItem: handleInactiveItem,
-        onActivateItem: handleActivateItem,
-        onMakeAdjustment: handleMakeAdjustment,
-        onDuplicate: handleDuplicate,
-        onViewDetails: handleViewDetailItem,
-      }}
-      noResults={<T id={'there_is_no_items_in_the_table_yet'} />}
-      {...tableProps}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={items}
+        initialState={itemsTableState}
+        loading={isItemsLoading}
+        headerLoading={isItemsLoading}
+        progressBarLoading={isItemsFetching}
+        noInitialFetch={true}
+        selectionColumn={true}
+        spinnerProps={{ size: 30 }}
+        expandable={false}
+        sticky={true}
+        rowClassNames={rowClassNames}
+        pagination={true}
+        manualSortBy={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={true}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ItemsActionMenuList}
+        onFetchData={handleFetchData}
+        payload={{
+          onDeleteItem: handleDeleteItem,
+          onEditItem: handleEditItem,
+          onInactivateItem: handleInactiveItem,
+          onActivateItem: handleActivateItem,
+          onMakeAdjustment: handleMakeAdjustment,
+          onDuplicate: handleDuplicate,
+          onViewDetails: handleViewDetailItem,
+        }}
+        noResults={<T id={'there_is_no_items_in_the_table_yet'} />}
+        {...tableProps}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Items/ItemsEmptyStatus.js
+++ b/client/src/containers/Items/ItemsEmptyStatus.js
@@ -28,7 +28,7 @@ export default function ItemsEmptyStatus() {
          </Button>

          <Button intent={Intent.NONE} large={true}>
-            <T id={'learn_more'}/>
+            <T id={'learn_more'} />
          </Button>
        </>
      }
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -3,7 +3,7 @@ import { compose } from 'utils';

 import 'style/pages/Items/List.scss';

-import { DashboardContentTable, DashboardPageContent } from 'components';
+import { DashboardPageContent } from 'components';

 import ItemsActionsBar from './ItemsActionsBar';
 import ItemsAlerts from './ItemsAlerts';
@@ -43,10 +43,7 @@ function ItemsList({

      <DashboardPageContent>
        <ItemsViewsTabs />
-
-        <DashboardContentTable>
-          <ItemsDataTable />
-        </DashboardContentTable>
+        <ItemsDataTable />
      </DashboardPageContent>

      <ItemsAlerts />
--- a/client/src/containers/Preferences/General/GeneralFormPage.js
+++ b/client/src/containers/Preferences/General/GeneralFormPage.js
@@ -51,6 +51,11 @@ function GeneralFormPage({
        intent: Intent.SUCCESS,
      });
      setSubmitting(false);
+
+      // Reboot the application if the application's language is mutated.
+      if (organization.language !== values.language) {
+        window.location.reload();
+      }
    };
    // Handle request error.
    const onError = (errors) => {
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
@@ -47,10 +47,7 @@ function BillsList({

      <DashboardPageContent>
        <BillsViewsTabs />
-
-        <DashboardContentTable>
-          <BillsTable />
-        </DashboardContentTable>
+        <BillsTable />
      </DashboardPageContent>

      <BillsAlerts />
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js
@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { compose } from 'utils';

 import DataTable from 'components/DataTable';
+import { DashboardContentTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

@@ -92,6 +93,7 @@ function BillsDataTable({
  }

  return (
+    <DashboardContentTable>
    <DataTable
      columns={columns}
      data={bills}
@@ -118,6 +120,7 @@ function BillsDataTable({
        onViewDetails: handleViewDetailBill,
      }}
    />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
@@ -42,10 +42,7 @@ function PaymentMadeList({

      <DashboardPageContent>
        <PaymentMadeViewTabs />
-
-        <DashboardContentTable>
-          <PaymentMadesTable />
-        </DashboardContentTable>
+        <PaymentMadesTable />
      </DashboardPageContent>

      <PaymentMadesAlerts />
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesTable.js
@@ -3,7 +3,8 @@ import { useHistory } from 'react-router-dom';

 import { compose } from 'utils';

-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';
+
 import PaymentMadesEmptyStatus from './PaymentMadesEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
@@ -76,31 +77,33 @@ function PaymentMadesTable({
  }

  return (
-    <DataTable
-      columns={columns}
-      data={paymentMades}
-      initialState={paymentMadesTableState}
-      onFetchData={handleDataTableFetchData}
-      loading={isPaymentsLoading}
-      headerLoading={isPaymentsLoading}
-      progressBarLoading={isPaymentsFetching}
-      manualSortBy={true}
-      selectionColumn={true}
-      noInitialFetch={true}
-      sticky={true}
-      pagination={true}
-      pagesCount={pagination.pagesCount}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onEdit: handleEditPaymentMade,
-        onDelete: handleDeletePaymentMade,
-        onViewDetails: handleViewDetailPaymentMade,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={paymentMades}
+        initialState={paymentMadesTableState}
+        onFetchData={handleDataTableFetchData}
+        loading={isPaymentsLoading}
+        headerLoading={isPaymentsLoading}
+        progressBarLoading={isPaymentsFetching}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditPaymentMade,
+          onDelete: handleDeletePaymentMade,
+          onViewDetails: handleViewDetailPaymentMade,
+        }}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesDataTable.js
@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';

 import { compose } from 'utils';

-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';
 import EstimatesEmptyStatus from './EstimatesEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
@@ -109,35 +109,37 @@ function EstimatesDataTable({
  }

  return (
-    <DataTable
-      columns={columns}
-      data={estimates}
-      loading={isEstimatesLoading}
-      headerLoading={isEstimatesLoading}
-      progressBarLoading={isEstimatesFetching}
-      onFetchData={handleFetchData}
-      noInitialFetch={true}
-      manualSortBy={true}
-      selectionColumn={true}
-      sticky={true}
-      pagination={true}
-      manualPagination={true}
-      pagesCount={pagination.pagesCount}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onApprove: handleApproveEstimate,
-        onEdit: handleEditEstimate,
-        onReject: handleRejectEstimate,
-        onDeliver: handleDeliverEstimate,
-        onDelete: handleDeleteEstimate,
-        onDrawer: handleDrawerEstimate,
-        onConvert: handleConvertToInvoice,
-        onViewDetails: handleViewDetailEstimate,
-        onPrint: handlePrintEstimate,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={estimates}
+        loading={isEstimatesLoading}
+        headerLoading={isEstimatesLoading}
+        progressBarLoading={isEstimatesFetching}
+        onFetchData={handleFetchData}
+        noInitialFetch={true}
+        manualSortBy={true}
+        selectionColumn={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onApprove: handleApproveEstimate,
+          onEdit: handleEditEstimate,
+          onReject: handleRejectEstimate,
+          onDeliver: handleDeliverEstimate,
+          onDelete: handleDeleteEstimate,
+          onDrawer: handleDrawerEstimate,
+          onConvert: handleConvertToInvoice,
+          onViewDetails: handleViewDetailEstimate,
+          onPrint: handlePrintEstimate,
+        }}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
@@ -42,10 +42,7 @@ function EstimatesList({

      <DashboardPageContent>
        <EstimatesViewTabs />
-
-        <DashboardContentTable>
-          <EstimatesDataTable />
-        </DashboardContentTable>
+        <EstimatesDataTable />
      </DashboardPageContent>

      <EstimatesAlerts />
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesDataTable.js
@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import InvoicesEmptyStatus from './InvoicesEmptyStatus';

 import { compose } from 'utils';
-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

@@ -108,37 +108,39 @@ function InvoicesDataTable({
  }

  return (
-    <DataTable
-      columns={columns}
-      data={invoices}
-      initialState={invoicesTableState}
-      loading={isInvoicesLoading}
-      headerLoading={isInvoicesLoading}
-      progressBarLoading={isInvoicesFetching}
-      onFetchData={handleDataTableFetchData}
-      manualSortBy={true}
-      selectionColumn={true}
-      noInitialFetch={true}
-      sticky={true}
-      pagination={true}
-      manualPagination={true}
-      pagesCount={pagination.pagesCount}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onDelete: handleDeleteInvoice,
-        onDeliver: handleDeliverInvoice,
-        onEdit: handleEditInvoice,
-        onDrawer: handleDrawerInvoice,
-        onQuick: handleQuickPaymentReceive,
-        onViewDetails: handleViewDetailInvoice,
-        onPrint: handlePrintInvoice,
-        baseCurrency,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={invoices}
+        initialState={invoicesTableState}
+        loading={isInvoicesLoading}
+        headerLoading={isInvoicesLoading}
+        progressBarLoading={isInvoicesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        manualPagination={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeleteInvoice,
+          onDeliver: handleDeliverInvoice,
+          onEdit: handleEditInvoice,
+          onDrawer: handleDrawerInvoice,
+          onQuick: handleQuickPaymentReceive,
+          onViewDetails: handleViewDetailInvoice,
+          onPrint: handlePrintInvoice,
+          baseCurrency,
+        }}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
@@ -44,10 +44,7 @@ function InvoicesList({

      <DashboardPageContent>
        <InvoiceViewTabs />
-
-        <DashboardContentTable>
-          <InvoicesDataTable />
-        </DashboardContentTable>
+        <InvoicesDataTable />
      </DashboardPageContent>

      <InvoicesAlerts />
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
@@ -42,10 +42,7 @@ function PaymentReceiveList({

      <DashboardPageContent>
        <PaymentReceiveViewTabs />
-
-        <DashboardContentTable>
-          <PaymentReceivesTable />
-        </DashboardContentTable>
+        <PaymentReceivesTable />
      </DashboardPageContent>

      <PaymentReceiveAlerts />
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesTable.js
@@ -3,8 +3,8 @@ import { useHistory } from 'react-router-dom';

 import { compose } from 'utils';

+import { DataTable, DashboardContentTable } from 'components';
 import PaymentReceivesEmptyStatus from './PaymentReceivesEmptyStatus';
-import { DataTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

@@ -85,32 +85,34 @@ function PaymentReceivesDataTable({
  }

  return (
-    <DataTable
-      columns={columns}
-      data={paymentReceives}
-      initialState={paymentReceivesTableState}
-      loading={isPaymentReceivesLoading}
-      headerLoading={isPaymentReceivesLoading}
-      progressBarLoading={isPaymentReceivesFetching}
-      onFetchData={handleDataTableFetchData}
-      manualSortBy={true}
-      selectionColumn={true}
-      noInitialFetch={true}
-      sticky={true}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      pagination={true}
-      pagesCount={pagination.pagesCount}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onDelete: handleDeletePaymentReceive,
-        onEdit: handleEditPaymentReceive,
-        onDrawer: handleDrawerPaymentReceive,
-        onViewDetails: handleViewDetailPaymentReceive,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={paymentReceives}
+        initialState={paymentReceivesTableState}
+        loading={isPaymentReceivesLoading}
+        headerLoading={isPaymentReceivesLoading}
+        progressBarLoading={isPaymentReceivesFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onDelete: handleDeletePaymentReceive,
+          onEdit: handleEditPaymentReceive,
+          onDrawer: handleDrawerPaymentReceive,
+          onViewDetails: handleViewDetailPaymentReceive,
+        }}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
@@ -43,10 +43,7 @@ function ReceiptsList({

        <DashboardPageContent>
          <ReceiptViewTabs />
-
-          <DashboardContentTable>
-            <ReceiptsTable />
-          </DashboardContentTable>
+          <ReceiptsTable />
        </DashboardPageContent>

        <ReceiptsAlerts />
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsTable.js
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';

 import { compose } from 'utils';
-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';

 import ReceiptsEmptyStatus from './ReceiptsEmptyStatus';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
@@ -101,36 +101,38 @@ function ReceiptsDataTable({
  }

  return (
-    <DataTable
-      columns={columns}
-      data={receipts}
-      initialState={receiptTableState}
-      loading={isReceiptsLoading}
-      headerLoading={isReceiptsLoading}
-      progressBarLoading={isReceiptsFetching}
-      onFetchData={handleDataTableFetchData}
-      manualSortBy={true}
-      selectionColumn={true}
-      noInitialFetch={true}
-      sticky={true}
-      pagination={true}
-      pagesCount={pagination.pagesCount}
-      manualPagination={true}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onEdit: handleEditReceipt,
-        onDelete: handleDeleteReceipt,
-        onClose: handleCloseReceipt,
-        onDrawer: handleDrawerReceipt,
-        onViewDetails: handleViewDetailReceipt,
-        onPrint: handlePrintInvoice,
-        baseCurrency,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        columns={columns}
+        data={receipts}
+        initialState={receiptTableState}
+        loading={isReceiptsLoading}
+        headerLoading={isReceiptsLoading}
+        progressBarLoading={isReceiptsFetching}
+        onFetchData={handleDataTableFetchData}
+        manualSortBy={true}
+        selectionColumn={true}
+        noInitialFetch={true}
+        sticky={true}
+        pagination={true}
+        pagesCount={pagination.pagesCount}
+        manualPagination={true}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditReceipt,
+          onDelete: handleDeleteReceipt,
+          onClose: handleCloseReceipt,
+          onDrawer: handleDrawerReceipt,
+          onViewDetails: handleViewDetailReceipt,
+          onPrint: handlePrintInvoice,
+          baseCurrency,
+        }}
+      />
+    </DashboardContentTable>
  );
 }

--- a/client/src/containers/Setup/SetupCongratsPage.js
+++ b/client/src/containers/Setup/SetupCongratsPage.js
@@ -1,6 +1,5 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import { useHistory } from 'react-router-dom';

 import WorkflowIcon from './WorkflowIcon';
 import { FormattedMessage as T } from 'components';
@@ -10,17 +9,16 @@ import { compose } from 'utils';

 import 'style/pages/Setup/Congrats.scss';

-
 /**
 * Setup congrats page.
 */
 function SetupCongratsPage({ setOrganizationSetupCompleted }) {
-  const history = useHistory();
+  const [isReloading, setIsReloading] = React.useState(false);

-  const handleBtnClick = useCallback(() => {
-    setOrganizationSetupCompleted(false);
-    history.push('/homepage');
-  }, [setOrganizationSetupCompleted, history]);
+  const handleBtnClick = () => {
+    setIsReloading(true);
+    window.location.reload();
+  };

  return (
    <div class="setup-congrats">
@@ -37,7 +35,12 @@ function SetupCongratsPage({ setOrganizationSetupCompleted }) {
          <T id={'setup.congrats.description'} />
        </p>

-        <Button intent={Intent.PRIMARY} type="submit" onClick={handleBtnClick}>
+        <Button
+          intent={Intent.PRIMARY}
+          type="submit"
+          loading={isReloading}
+          onClick={handleBtnClick}
+        >
          <T id={'setup.congrats.go_to_dashboard'} />
        </Button>
      </div>
--- a/client/src/containers/Setup/SetupInitializingForm.js
+++ b/client/src/containers/Setup/SetupInitializingForm.js
@@ -20,10 +20,12 @@ function SetupInitializingForm({
 }) {
  const { refetch, isSuccess } = useCurrentOrganization({ enabled: false });

+  // Job done state.
  const [isJobDone, setIsJobDone] = React.useState(false);

  const {
    data: { running, queued, failed, completed },
+    isFetching: isJobFetching,
  } = useJob(organization?.build_job_id, {
    refetchInterval: 2000,
    enabled: !!organization?.build_job_id,
@@ -45,17 +47,15 @@ function SetupInitializingForm({

  return (
    <div class="setup-initializing-form">
-      <ProgressBar intent={Intent.PRIMARY} value={null} />
-
-      <div className={'setup-initializing-form__title'}>
-        {failed ? (
-          <SetupInitializingFailed />
-        ) : running || queued ? (
-          <SetupInitializingRunning />
-        ) : completed ? (
-          <SetupInitializingCompleted />
-        ) : null}
-      </div>
+      {failed ? (
+        <SetupInitializingFailed />
+      ) : running || queued || isJobFetching ? (
+        <SetupInitializingRunning />
+      ) : completed ? (
+        <SetupInitializingCompleted />
+      ) : (
+        <SetupInitializingFailed />
+      )}
    </div>
  );
 }
@@ -68,41 +68,60 @@ export default R.compose(
  withOrganization(({ organization }) => ({ organization })),
 )(SetupInitializingForm);

+/**
+ * State initializing failed state.
+ */
 function SetupInitializingFailed() {
  return (
-    <div class="failed">
-      <h1>
-        <T id={'setup.initializing.something_went_wrong'} />
-      </h1>
-      <p class="paragraph">
-        <T id={'setup.initializing.please_refresh_the_page'} />
-      </p>
+    <div class="setup-initializing__content">
+      <div className={'setup-initializing-form__title'}>
+        <h1>
+          <T id={'setup.initializing.something_went_wrong'} />
+        </h1>
+        <p class="paragraph">
+          <T id={'setup.initializing.please_refresh_the_page'} />
+        </p>
+      </div>
    </div>
  );
 }

+/**
+ * Setup initializing running state.
+ */
 function SetupInitializingRunning() {
  return (
-    <div class="running">
-      <h1>
-        <T id={'setup.initializing.title'} />
-      </h1>
-      <p className={'paragraph'}>
-        <T id={'setup.initializing.description'} />
-      </p>
+    <div class="setup-initializing__content">
+      <ProgressBar intent={Intent.PRIMARY} value={null} />
+
+      <div className={'setup-initializing-form__title'}>
+        <h1>
+          <T id={'setup.initializing.title'} />
+        </h1>
+        <p className={'paragraph'}>
+          <T id={'setup.initializing.description'} />
+        </p>
+      </div>
    </div>
  );
 }

+/**
+ * Setup initializing completed state.
+ */
 function SetupInitializingCompleted() {
  return (
-    <div class="completed">
-      <h1>
-        <T id={'setup.initializing.waiting_to_redirect'} />
-      </h1>
-      <p class="paragraph">
-        <T id={'setup.initializing.refresh_the_page_if_redirect_not_worked'} />
-      </p>
+    <div class="setup-initializing__content">
+      <div className={'setup-initializing-form__title'}>
+        <h1>
+          <T id={'setup.initializing.waiting_to_redirect'} />
+        </h1>
+        <p class="paragraph">
+          <T
+            id={'setup.initializing.refresh_the_page_if_redirect_not_worked'}
+          />
+        </p>
+      </div>
    </div>
  );
 }
--- a/client/src/containers/Setup/SetupOrganizationForm.js
+++ b/client/src/containers/Setup/SetupOrganizationForm.js
@@ -10,6 +10,7 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
+import useAutofocus from 'hooks/useAutofocus'
 import { FormattedMessage as T } from 'components';
 import { getCountries } from 'common/countries';

@@ -29,6 +30,8 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
  const currencies = getAllCurrenciesOptions();
  const countries = getCountries();

+  const accountRef = useAutofocus();
+
  return (
    <Form>
      <h3>
@@ -44,7 +47,11 @@ export default function SetupOrganizationForm({ isSubmitting, values }) {
            intent={inputIntent({ error, touched })}
            helperText={<ErrorMessage name={'name'} />}
          >
-            <InputGroup {...field} intent={inputIntent({ error, touched })} />
+            <InputGroup
+              {...field}
+              intent={inputIntent({ error, touched })}
+              inputRef={accountRef}
+            />
          </FormGroup>
        )}
      </FastField>
--- a/client/src/containers/Setup/SetupOrganizationPage.js
+++ b/client/src/containers/Setup/SetupOrganizationPage.js
@@ -9,7 +9,7 @@ import SetupOrganizationForm from './SetupOrganizationForm';
 import { useOrganizationSetup } from 'hooks/query';
 import withSettingsActions from 'containers/Settings/withSettingsActions';

-import { compose, transfromToSnakeCase } from 'utils';
+import { setCookie, compose, transfromToSnakeCase } from 'utils';
 import { getSetupOrganizationValidation } from './SetupOrganization.schema';

 // Initial values.
@@ -41,6 +41,9 @@ function SetupOrganizationPage({ wizard }) {
    organizationSetupMutate({ ...transfromToSnakeCase(values) })
      .then((response) => {
        setSubmitting(false);
+
+        // Sets locale cookie to next boot cycle.
+        setCookie('locale', values.language);
        wizard.next();
      })
      .catch((erros) => {
--- a/client/src/containers/Setup/SetupSubscription.js
+++ b/client/src/containers/Setup/SetupSubscription.js
@@ -21,12 +21,12 @@ function SetupSubscription({

  // Initial values.
  const initialValues = {
-    plan_slug: 'starter',
+    plan_slug: 'essentials',
    period: 'month',
    license_code: '',
  };
  // Handle form submit.
-  const handleSubmit = () => {};
+  const handleSubmit = (values) => {};

  // Retrieve momerized subscription form schema.
  const SubscriptionFormSchema = React.useMemo(
--- a/client/src/containers/Setup/SetupSubscription/SubscriptionPeriodsSection.js
+++ b/client/src/containers/Setup/SetupSubscription/SubscriptionPeriodsSection.js
@@ -9,6 +9,10 @@ import withPlan from '../../Subscriptions/withPlan';
 const SubscriptionPeriodsEnhanced = R.compose(
  withPlan(({ plan }) => ({ plan })),
 )(({ plan, ...restProps }) => {
+  // Can't continue if the current plan of the form not selected.
+  if (!plan) {
+    return null;
+  }
  return <SubscriptionPeriods periods={plan.periods} {...restProps} />;
 });

--- a/client/src/containers/Subscriptions/BillingForm.js
+++ b/client/src/containers/Subscriptions/BillingForm.js
@@ -42,7 +42,7 @@ function BillingForm({

  // Initial values.
  const initialValues = {
-    plan_slug: 'free',
+    plan_slug: 'essentials',
    period: 'month',
    license_code: '',
  };
--- a/client/src/containers/Subscriptions/BillingPeriodsInput.js
+++ b/client/src/containers/Subscriptions/BillingPeriodsInput.js
@@ -12,6 +12,8 @@ import withPlan from './withPlan';
 const SubscriptionPeriodsEnhanced = R.compose(
  withPlan(({ plan }) => ({ plan })),
 )(({ plan, ...restProps }) => {
+  if (!plan) return null;
+
  return <SubscriptionPeriods periods={plan.periods} {...restProps} />;
 });

--- a/client/src/containers/Vendors/VendorsLanding/VendorsList.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsList.js
@@ -47,13 +47,9 @@ function VendorsList({

      <DashboardPageContent>
        <VendorViewsTabs />
-
-        <DashboardContentTable>
-          <VendorsTable />
-        </DashboardContentTable>
-
-        <VendorsAlerts />
+        <VendorsTable />
      </DashboardPageContent>
+      <VendorsAlerts />
    </VendorsListProvider>
  );
 }
--- a/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsTable.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router';

-import { DataTable } from 'components';
+import { DataTable, DashboardContentTable } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';

@@ -85,7 +85,7 @@ function VendorsTable({
  const handleViewDetailVendor = ({ id }) => {
    openDrawer('contact-detail-drawer', { contactId: id });
  };
-  
+
  // Handle fetch data once the page index, size or sort by of the table change.
  const handleFetchData = React.useCallback(
    ({ pageSize, pageIndex, sortBy }) => {
@@ -104,35 +104,37 @@ function VendorsTable({
  }

  return (
-    <DataTable
-      noInitialFetch={true}
-      columns={columns}
-      data={vendors}
-      initialState={vendorsTableState}
-      loading={isVendorsLoading}
-      headerLoading={isVendorsLoading}
-      progressBarLoading={isVendorsFetching}
-      onFetchData={handleFetchData}
-      selectionColumn={true}
-      expandable={false}
-      sticky={true}
-      pagination={true}
-      manualSortBy={true}
-      pagesCount={pagination.pagesCount}
-      autoResetSortBy={false}
-      autoResetPage={false}
-      TableLoadingRenderer={TableSkeletonRows}
-      TableHeaderSkeletonRenderer={TableSkeletonHeader}
-      ContextMenu={ActionsMenu}
-      payload={{
-        onEdit: handleEditVendor,
-        onDelete: handleDeleteVendor,
-        onDuplicate: handleContactDuplicate,
-        onInactivate: handleInactiveVendor,
-        onActivate: handleActivateVendor,
-        onViewDetails: handleViewDetailVendor,
-      }}
-    />
+    <DashboardContentTable>
+      <DataTable
+        noInitialFetch={true}
+        columns={columns}
+        data={vendors}
+        initialState={vendorsTableState}
+        loading={isVendorsLoading}
+        headerLoading={isVendorsLoading}
+        progressBarLoading={isVendorsFetching}
+        onFetchData={handleFetchData}
+        selectionColumn={true}
+        expandable={false}
+        sticky={true}
+        pagination={true}
+        manualSortBy={true}
+        pagesCount={pagination.pagesCount}
+        autoResetSortBy={false}
+        autoResetPage={false}
+        TableLoadingRenderer={TableSkeletonRows}
+        TableHeaderSkeletonRenderer={TableSkeletonHeader}
+        ContextMenu={ActionsMenu}
+        payload={{
+          onEdit: handleEditVendor,
+          onDelete: handleDeleteVendor,
+          onDuplicate: handleContactDuplicate,
+          onInactivate: handleInactiveVendor,
+          onActivate: handleActivateVendor,
+          onViewDetails: handleViewDetailVendor,
+        }}
+      />
+    </DashboardContentTable>
  );
 }