WIP: Arabic localization.|

2026-02-17 21:30:31 +00:00 · 2021-06-10 12:51:00 +02:00
parent 4fc7c37260
commit 1ea32884c2
465 changed files with 3299 additions and 2109 deletions
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryActionsBar.js
@@ -9,7 +9,7 @@ import {
  Position,
 } from '@blueprintjs/core';

-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeader.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import moment from 'moment';
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneral.js
@@ -8,7 +8,7 @@ import {
  Position,
  Classes,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { ContactsMultiSelect, Row, Col, FieldHint } from 'components';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
--- a/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryTable.js
@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { DataTable } from 'components';
 import FinancialSheet from 'components/FinancialSheet';

@@ -13,7 +14,7 @@ export default function APAgingSummaryTable({
  //#ownProps
  organizationName,
 }) {
-  const { formatMessage } = useIntl();
+  

  // AP aging summary report content.
  const {
@@ -30,7 +31,7 @@ export default function APAgingSummaryTable({
    <FinancialSheet
      companyName={organizationName}
      name={'payable-aging-summary'}
-      sheetType={formatMessage({ id: 'payable_aging_summary' })}
+      sheetType={intl.get('payable_aging_summary')}
      asDate={new Date()}
      loading={isAPAgingLoading}
    >
--- a/client/src/containers/FinancialStatements/APAgingSummary/components.js
+++ b/client/src/containers/FinancialStatements/APAgingSummary/components.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useAPAgingSummaryContext } from './APAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';

--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import moment from 'moment';
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneral.js
@@ -8,7 +8,7 @@ import {
  Position,
  Classes,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { ContactsMultiSelect, Row, Col, FieldHint } from 'components';
 import { momentFormatter } from 'utils';
--- a/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryTable.js
@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import DataTable from 'components/DataTable';
 import FinancialSheet from 'components/FinancialSheet';

@@ -13,7 +13,7 @@ export default function ReceivableAgingSummaryTable({
  // #ownProps
  organizationName,
 }) {
-  const { formatMessage } = useIntl();
+  

  // AR aging summary report context.
  const { ARAgingSummary, isARAgingLoading } = useARAgingSummaryContext();
@@ -31,7 +31,7 @@ export default function ReceivableAgingSummaryTable({
    <FinancialSheet
      companyName={organizationName}
      name={'receivable-aging-summary'}
-      sheetType={formatMessage({ id: 'receivable_aging_summary' })}
+      sheetType={intl.get('receivable_aging_summary')}
      asDate={new Date()}
      loading={isARAgingLoading}
    >
--- a/client/src/containers/FinancialStatements/ARAgingSummary/components.js
+++ b/client/src/containers/FinancialStatements/ARAgingSummary/components.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import { getColumnWidth } from 'utils';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';

--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import Icon from 'components/Icon';
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
@@ -27,7 +28,7 @@ function BalanceSheetHeader({
  // #withBalanceSheetActions
  toggleBalanceSheetFilterDrawer: toggleFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Filter form initial values.
  const initialValues = {
@@ -42,11 +43,11 @@ function BalanceSheetHeader({
    dateRange: Yup.string().optional(),
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'fromDate' })),
+      .label(intl.get('fromDate')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'toDate' })),
+      .label(intl.get('toDate')),
    accountsFilter: Yup.string(),
    displayColumnsType: Yup.string(),
  });
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';

 import FinancialSheet from 'components/FinancialSheet';
@@ -16,7 +16,7 @@ export default function BalanceSheetTable({
  // #ownProps
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Balance sheet context.
  const {
@@ -27,7 +27,7 @@ export default function BalanceSheetTable({
  const tableColumns = useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
        className: 'account_name',
        textOverview: true,
@@ -36,7 +36,7 @@ export default function BalanceSheetTable({
      ...(query.display_columns_type === 'total'
        ? [
            {
-              Header: formatMessage({ id: 'total' }),
+              Header: intl.get('total'),
              accessor: 'total.formatted_amount',
              Cell: CellTextSpan,
              className: 'total',
@@ -59,7 +59,7 @@ export default function BalanceSheetTable({
          }))
        : []),
    ],
-    [query, columns, tableRows, formatMessage],
+    [query, columns, tableRows],
  );

  // Calculates the default expanded rows of balance sheet table.
@@ -83,7 +83,7 @@ export default function BalanceSheetTable({
    <FinancialSheet
      name="balance-sheet"
      companyName={companyName}
-      sheetType={formatMessage({ id: 'balance_sheet' })}
+      sheetType={intl.get('balance_sheet')}
      fromDate={query.from_date}
      toDate={query.to_date}
      basis={query.basis}
--- a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.js
+++ b/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import { Icon } from 'components';
--- a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
+++ b/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
@@ -27,7 +28,7 @@ function CashFlowStatementHeader({
  //#withCashStatementActions
  toggleCashFlowStatementFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // filter form initial values.
  const initialValues = {
@@ -41,11 +42,11 @@ function CashFlowStatementHeader({
    dateRange: Yup.string().optional(),
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'fromDate' })),
+      .label(intl.get('fromDate')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'toDate' })),
+      .label(intl.get('toDate')),
    displayColumnsType: Yup.string(),
  });

--- a/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js
+++ b/client/src/containers/FinancialStatements/CashFlowStatement/CashFlowStatementTable.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

 import { DataTable } from 'components';
 import FinancialSheet from 'components/FinancialSheet';
@@ -15,7 +15,7 @@ export default function CashFlowStatementTable({
  // #ownProps
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  const {
    cashFlowStatement: { tableRows },
@@ -41,7 +41,7 @@ export default function CashFlowStatementTable({
    <FinancialSheet
      name="cash-flow-statement"
      companyName={companyName}
-      sheetType={formatMessage({ id: 'statement_of_cash_flow' })}
+      sheetType={intl.get('statement_of_cash_flow')}
      loading={isCashFlowLoading}
      fromDate={query.from_date}
      toDate={query.to_date}
--- a/client/src/containers/FinancialStatements/CashFlowStatement/utils.js
+++ b/client/src/containers/FinancialStatements/CashFlowStatement/utils.js
@@ -1,7 +1,7 @@
 import * as R from 'ramda';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { getColumnWidth } from 'utils';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 /**
 * Account name column mapper.
@@ -9,7 +9,7 @@ import { formatMessage } from 'services/intl';
 const accountNameMapper = (column) => ({
  id: column.key,
  key: column.key,
-  Header: formatMessage({ id: 'account_name' }),
+  Header: intl.get('account_name'),
  accessor: 'cells[0].value',
  className: 'account_name',
  textOverview: true,
@@ -36,7 +36,7 @@ const dateRangeMapper = (data, index, column) => ({
 */
 const totalMapper = (data, index, column) => ({
  key: 'total',
-  Header: formatMessage({ id: 'total' }),
+  Header: intl.get('total'),
  accessor: `cells[${index}].value`,
  className: 'total',
  textOverview: true,
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import Icon from 'components/Icon';
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanel.js
@@ -7,7 +7,7 @@ import {
  Classes,
  Checkbox,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { Row, Col, FieldHint } from 'components';
 import {
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryHeader.js
@@ -3,7 +3,8 @@ import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';

 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import withCustomersBalanceSummary from './withCustomersBalanceSummary';
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryTable.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';

 import FinancialSheet from 'components/FinancialSheet';
@@ -15,7 +15,7 @@ export default function CustomersBalanceSummaryTable({
  // #ownProps
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  const {
    isCustomersBalanceLoading,
@@ -32,7 +32,7 @@ export default function CustomersBalanceSummaryTable({
    <FinancialSheet
      name={'customers-balance-summary'}
      companyName={companyName}
-      sheetType={formatMessage({ id: 'customers_balance_summary' })}
+      sheetType={intl.get('customers_balance_summary')}
      asDate={new Date()}
      loading={isCustomersBalanceLoading}
    >
--- a/client/src/containers/FinancialStatements/CustomersBalanceSummary/components.js
+++ b/client/src/containers/FinancialStatements/CustomersBalanceSummary/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -12,25 +12,25 @@ export const useCustomersSummaryColumns = () => {
  return React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'customer_name' }),
+        Header: intl.get('customer_name'),
        accessor: 'cells[0].value',
        className: 'customer_name',
        width: 240,
      },
      {
-        Header: formatMessage({ id: 'total' }),
+        Header: intl.get('total'),
        accessor: 'cells[1].value',
        className: 'total',
        width: 140,
      },
      {
-        Header: formatMessage({ id: 'percentage_of_column' }),
+        Header: intl.get('percentage_of_column'),
        accessor: 'cells[2].value',
        className: 'total',
        width: 140,
      },
    ],
-    [formatMessage],
+    [],
  );
 };

--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import Icon from 'components/Icon';
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
@@ -27,7 +28,7 @@ function CustomersTransactionsHeader({
  //#withCustomersTransactionsActions
  toggleCustomersTransactionsFilterDrawer: toggleFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Filter form initial values.
  const initialValues = {
@@ -40,11 +41,11 @@ function CustomersTransactionsHeader({
  const validationSchema = Yup.object().shape({
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'fromDate' })),
+      .label(intl.get('fromDate')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'toDate' })),
+      .label(intl.get('toDate')),
  });

  // Handle form submit.
--- a/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/CustomersTransactionsTable.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';

 import FinancialSheet from 'components/FinancialSheet';
@@ -16,7 +16,7 @@ export default function CustomersTransactionsTable({
  // #ownProps
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  const {
    customersTransactions: { tableRows },
@@ -38,7 +38,7 @@ export default function CustomersTransactionsTable({
    <FinancialSheet
      name="customer-transactions"
      companyName={companyName}
-      sheetType={formatMessage({ id: 'customers_transactions' })}
+      sheetType={intl.get('customers_transactions')}
      loading={isCustomersTransactionsLoading}
      fromDate={query.from_date}
      toDate={query.to_date}
--- a/client/src/containers/FinancialStatements/CustomersTransactions/components.js
+++ b/client/src/containers/FinancialStatements/CustomersTransactions/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { If } from 'components';
 import { useCustomersTransactionsContext } from './CustomersTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -18,7 +18,7 @@ export const useCustomersTransactionsColumns = () => {
  return React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'customer_name' }),
+        Header: intl.get('customer_name'),
        accessor: ({ cells }) => {
          return (
            <span
@@ -33,26 +33,26 @@ export const useCustomersTransactionsColumns = () => {
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
        accessor: 'cells[1].value',
        className: 'name',
        textOverview: true,
        width: 170,
      },
      {
-        Header: formatMessage({ id: 'reference_type' }),
+        Header: intl.get('reference_type'),
        accessor: 'cells[2].value',
        width: 120,
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'transaction_type' }),
+        Header: intl.get('transaction_type'),
        accessor: 'cells[3].value',
        width: 120,
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'credit' }),
+        Header: intl.get('credit'),
        accessor: 'cells[4].value',
        className: 'credit',
        textOverview: true,
@@ -62,7 +62,7 @@ export const useCustomersTransactionsColumns = () => {
        }),
      },
      {
-        Header: formatMessage({ id: 'debit' }),
+        Header: intl.get('debit'),
        accessor: 'cells[5].value',
        className: 'debit',
        textOverview: true,
@@ -72,7 +72,7 @@ export const useCustomersTransactionsColumns = () => {
        }),
      },
      {
-        Header: formatMessage({ id: 'running_balance' }),
+        Header: intl.get('running_balance'),
        accessor: 'cells[6].value',
        className: 'running_balance',
        textOverview: true,
@@ -82,7 +82,7 @@ export const useCustomersTransactionsColumns = () => {
        }),
      },
    ],
-    [tableRows, formatMessage],
+    [tableRows],
  );
 };

--- a/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
+++ b/client/src/containers/FinancialStatements/FinancialAccountsFilter.js
@@ -6,7 +6,7 @@ import {
  Position,
  FormGroup,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { FastField } from 'formik';

--- a/client/src/containers/FinancialStatements/FinancialStatementDateRange.js
+++ b/client/src/containers/FinancialStatements/FinancialStatementDateRange.js
@@ -5,14 +5,14 @@ import moment from 'moment';
 import { Row, Col, Hint } from 'components';
 import { momentFormatter, parseDateRangeQuery } from 'utils';
 import { DateInput } from '@blueprintjs/datetime';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { dateRangeOptions } from 'containers/FinancialStatements/common';

 /**
 * Financial statement - Date range select.
 */
 export default function FinancialStatementDateRange() {
-  const { formatMessage } = useIntl();
+  

  return (
    <>
@@ -24,7 +24,7 @@ export default function FinancialStatementDateRange() {
              field: { value },
            }) => (
              <FormGroup
-                label={formatMessage({ id: 'report_date_range' })}
+                label={intl.get('report_date_range')}
                labelInfo={<Hint />}
                minimal={true}
                fill={true}
@@ -62,7 +62,7 @@ export default function FinancialStatementDateRange() {
              meta: { error, touched },
            }) => (
              <FormGroup
-                label={formatMessage({ id: 'from_date' })}
+                label={intl.get('from_date')}
                labelInfo={<Hint />}
                fill={true}
                intent={error && Intent.DANGER}
@@ -92,7 +92,7 @@ export default function FinancialStatementDateRange() {
              meta: { error },
            }) => (
              <FormGroup
-                label={formatMessage({ id: 'to_date' })}
+                label={intl.get('to_date')}
                labelInfo={<Hint />}
                fill={true}
                intent={error && Intent.DANGER}
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import Icon from 'components/Icon';
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import GeneralLedgerHeaderGeneralPane from './GeneralLedgerHeaderGeneralPane';
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeaderGeneralPane.js
@@ -3,7 +3,7 @@ import {
  FormGroup,
  Classes,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import { AccountsMultiSelect, Row, Col } from 'components';
--- a/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';

 import { defaultExpanderReducer } from 'utils';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
@@ -15,7 +15,7 @@ import { useGeneralLedgerTableColumns } from './components';
 * General ledger table.
 */
 export default function GeneralLedgerTable({ companyName }) {
-  const { formatMessage } = useIntl();
+  

  // General ledger context.
  const {
@@ -36,7 +36,7 @@ export default function GeneralLedgerTable({ companyName }) {
  return (
    <FinancialSheet
      companyName={companyName}
-      sheetType={formatMessage({ id: 'general_ledger_sheet' })}
+      sheetType={intl.get('general_ledger_sheet')}
      fromDate={query.from_date}
      toDate={query.to_date}
      name="general-ledger"
@@ -45,9 +45,7 @@ export default function GeneralLedgerTable({ companyName }) {
    >
      <DataTable
        className="bigcapital-datatable--financial-report"
-        noResults={formatMessage({
-          id: 'this_report_does_not_contain_any_data_between_date_period',
-        })}
+        noResults={intl.get('this_report_does_not_contain_any_data_between_date_period')}
        columns={columns}
        data={tableRows}
        rowClassNames={rowClassNames}
--- a/client/src/containers/FinancialStatements/GeneralLedger/common.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/common.js
@@ -1,16 +1,14 @@
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 export const filterAccountsOptions = [
  {
    key: 'all-accounts',
-    name: formatMessage({ id: 'all_accounts' }),
-    hint: formatMessage({ id: 'all_accounts_including_with_zero_balance' }),
+    name: intl.get('all_accounts'),
+    hint: intl.get('all_accounts_including_with_zero_balance'),
  },
  {
    key: 'with-transactions',
-    name: formatMessage({ id: 'accounts_with_transactions' }),
-    hint: formatMessage({
-      id: 'include_accounts_once_has_transactions_on_given_date_period',
-    }),
+    name: intl.get('accounts_with_transactions'),
+    hint: intl.get('include_accounts_once_has_transactions_on_given_date_period'),
  },
 ];
--- a/client/src/containers/FinancialStatements/GeneralLedger/components.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
 import { getForceWidth, getColumnWidth } from 'utils';
@@ -10,7 +10,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 * Retrieve the general ledger table columns.
 */
 export function useGeneralLedgerTableColumns() {
-  const { formatMessage } = useIntl();
+  

  // General ledger context.
  const {
@@ -20,7 +20,7 @@ export function useGeneralLedgerTableColumns() {
  return React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'date' }),
+        Header: intl.get('date'),
        accessor: (row) => {
          if (row.rowType === 'ACCOUNT_ROW') {
            return (
@@ -38,33 +38,33 @@ export function useGeneralLedgerTableColumns() {
        width: 120,
      },
      {
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
        accessor: 'name',
        className: 'name',
        textOverview: true,
        // width: 200,
      },
      {
-        Header: formatMessage({ id: 'transaction_type' }),
+        Header: intl.get('transaction_type'),
        accessor: 'reference_type_formatted',
        className: 'transaction_type',
        width: 125,
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'transaction_number' }),
+        Header: intl.get('transaction_number'),
        accessor: 'reference_id',
        className: 'transaction_number',
        width: 100,
      },
      {
-        Header: formatMessage({ id: 'description' }),
+        Header: intl.get('description'),
        accessor: 'note',
        className: 'description',
        // width: 145,
      },
      {
-        Header: formatMessage({ id: 'credit' }),
+        Header: intl.get('credit'),
        accessor: 'formatted_credit',
        className: 'credit',
        width: getColumnWidth(tableRows, 'formatted_credit', {
@@ -74,7 +74,7 @@ export function useGeneralLedgerTableColumns() {
        }),
      },
      {
-        Header: formatMessage({ id: 'debit' }),
+        Header: intl.get('debit'),
        accessor: 'formatted_debit',
        className: 'debit',
        width: getColumnWidth(tableRows, 'formatted_debit', {
@@ -83,7 +83,7 @@ export function useGeneralLedgerTableColumns() {
        }),
      },
      {
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
        accessor: 'formatted_amount',
        className: 'amount',
        width: getColumnWidth(tableRows, 'formatted_amount', {
@@ -92,7 +92,7 @@ export function useGeneralLedgerTableColumns() {
        }),
      },
      {
-        Header: formatMessage({ id: 'running_balance' }),
+        Header: intl.get('running_balance'),
        accessor: 'formatted_running_balance',
        className: 'running_balance',
        width: getColumnWidth(tableRows, 'formatted_running_balance', {
@@ -101,7 +101,7 @@ export function useGeneralLedgerTableColumns() {
        }),
      },
    ],
-    [formatMessage, tableRows],
+    [tableRows],
  );
 }

--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import { Icon } from 'components';
--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsHeader.js
@@ -3,7 +3,8 @@ import * as Yup from 'yup';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';

 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import InventoryItemDetailsHeaderGeneralPanel from './InventoryItemDetailsHeaderGeneralPanel';
@@ -26,7 +27,7 @@ function InventoryItemDetailsHeader({
  //#withInventoryItemDetailsActions
  toggleInventoryItemDetailsFilterDrawer: toggleFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  //Filter form initial values.
  const initialValues = {
@@ -39,11 +40,11 @@ function InventoryItemDetailsHeader({
  const validationSchema = Yup.object().shape({
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'fromDate' })),
+      .label(intl.get('fromDate')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'toDate' })),
+      .label(intl.get('toDate')),
  });
 ;

--- a/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
+++ b/client/src/containers/FinancialStatements/InventoryItemDetails/InventoryItemDetailsTable.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 import classNames from 'classnames';

@@ -38,7 +38,7 @@ export default function InventoryItemDetailsTable({
    <FinancialSheet
      name="inventory-item-details"
      companyName={companyName}
-      sheetType={formatMessage({ id: 'inventory_item_details' })}
+      sheetType={intl.get('inventory_item_details')}
      loading={isInventoryItemDetailsLoading}
      fromDate={query.from_date}
      toDate={query.to_date}
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationActionsBar.js
@@ -9,7 +9,7 @@ import {
  Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { Icon } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeader.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';

@@ -26,7 +27,7 @@ function InventoryValuationHeader({
  // #withInventoryValuationActions
  toggleInventoryValuationFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Form validation schema.
  const validationSchema = Yup.object().shape({
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationHeaderGeneralPanel.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormGroup, Position } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Row, Col, FieldHint } from 'components';
 import {
  momentFormatter,
--- a/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/InventoryValuationTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

 import FinancialSheet from 'components/FinancialSheet';
 import { DataTable } from 'components';
@@ -14,7 +14,7 @@ export default function InventoryValuationTable({
  //#ownProps
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  // inventory valuation context.
  const {
@@ -43,7 +43,7 @@ export default function InventoryValuationTable({
    <FinancialSheet
      companyName={companyName}
      name="inventory-valuation"
-      sheetType={formatMessage({ id: 'inventory_valuation' })}
+      sheetType={intl.get('inventory_valuation')}
      asDate={new Date()}
      loading={isLoading}
    >
--- a/client/src/containers/FinancialStatements/InventoryValuation/components.js
+++ b/client/src/containers/FinancialStatements/InventoryValuation/components.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { getColumnWidth } from 'utils';
 import { If } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
@@ -11,7 +11,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 */

 export const useInventoryValuationTableColumns = () => {
-  const { formatMessage } = useIntl();
+  

  // inventory valuation context
  const {
@@ -21,14 +21,14 @@ export const useInventoryValuationTableColumns = () => {
  return useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'item_name' }),
+        Header: intl.get('item_name'),
        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
        className: 'name',
        width: 240,
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'quantity' }),
+        Header: intl.get('quantity'),
        accessor: 'quantity_formatted',
        Cell: CellTextSpan,
        className: 'quantity_formatted',
@@ -38,7 +38,7 @@ export const useInventoryValuationTableColumns = () => {
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'asset_value' }),
+        Header: intl.get('asset_value'),
        accessor: 'valuation_formatted',
        Cell: CellTextSpan,
        className: 'valuation',
@@ -48,7 +48,7 @@ export const useInventoryValuationTableColumns = () => {
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'average' }),
+        Header: intl.get('average'),
        accessor: 'average_formatted',
        Cell: CellTextSpan,
        className: 'average_formatted',
@@ -58,7 +58,7 @@ export const useInventoryValuationTableColumns = () => {
        textOverview: true,
      },
    ],
-    [tableRows, formatMessage],
+    [tableRows],
  );
 };

--- a/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import classNames from 'classnames';
--- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalHeader.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tab, Tabs, Button, Intent } from '@blueprintjs/core';
 import * as Yup from 'yup';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import JournalSheetHeaderGeneral from './JournalSheetHeaderGeneral';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
--- a/client/src/containers/FinancialStatements/Journal/JournalTable.js
+++ b/client/src/containers/FinancialStatements/Journal/JournalTable.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
@@ -14,7 +14,7 @@ export default function JournalSheetTable({
  onFetchData,
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Journal sheet context.
  const {
@@ -47,7 +47,7 @@ export default function JournalSheetTable({
  return (
    <FinancialSheet
      companyName={companyName}
-      sheetType={formatMessage({ id: 'journal_sheet' })}
+      sheetType={intl.get('journal_sheet')}
      fromDate={query.from_date}
      toDate={query.to_date}
      name="journal"
@@ -60,9 +60,7 @@ export default function JournalSheetTable({
        columns={columns}
        data={tableRows}
        rowClassNames={rowClassNames}
-        noResults={formatMessage({
-          id: 'this_report_does_not_contain_any_data_between_date_period',
-        })}
+        noResults={intl.get('this_report_does_not_contain_any_data_between_date_period')}
        expanded={expandedRows}
        sticky={true}
        TableRowsRenderer={TableVirtualizedListRows}
--- a/client/src/containers/FinancialStatements/Journal/components.js
+++ b/client/src/containers/FinancialStatements/Journal/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import { Button } from '@blueprintjs/core';
 import { Icon, If } from 'components';
@@ -10,58 +10,58 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 * Retrieve the journal table columns.
 */
 export const useJournalTableColumns = () => {
-  const { formatMessage } = useIntl();
+  

  return React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'date' }),
+        Header: intl.get('date'),
        accessor: (row) =>
          row.date ? moment(row.date).format('YYYY MMM DD') : '',
        className: 'date',
        width: 100,
      },
      {
-        Header: formatMessage({ id: 'transaction_type' }),
+        Header: intl.get('transaction_type'),
        accessor: 'reference_type_formatted',
        className: 'reference_type_formatted',
        width: 120,
      },
      {
-        Header: formatMessage({ id: 'num' }),
+        Header: intl.get('num'),
        accessor: 'transaction_number',
        className: 'reference_id',
        width: 70,
      },
      {
-        Header: formatMessage({ id: 'description' }),
+        Header: intl.get('description'),
        accessor: 'note',
        className: 'note',
      },
      {
-        Header: formatMessage({ id: 'acc_code' }),
+        Header: intl.get('acc_code'),
        accessor: 'account_code',
        width: 95,
        className: 'account_code',
      },
      {
-        Header: formatMessage({ id: 'account' }),
+        Header: intl.get('account'),
        accessor: 'account_name',
        className: 'account_name',
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'credit' }),
+        Header: intl.get('credit'),
        accessor: 'formatted_credit',
        className: 'credit',
      },
      {
-        Header: formatMessage({ id: 'debit' }),
+        Header: intl.get('debit'),
        accessor: 'formatted_debit',
        className: 'debit',
      },
    ],
-    [formatMessage],
+    [],
  );
 };

--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
@@ -8,7 +8,7 @@ import {
  Position,
  PopoverInteractionKind,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import Icon from 'components/Icon';
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import * as Yup from 'yup';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';

@@ -24,17 +25,17 @@ function ProfitLossHeader({
  // #withProfitLossActions
  toggleProfitLossFilterDrawer: toggleFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Validation schema.
  const validationSchema = Yup.object().shape({
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'from_date' })),
+      .label(intl.get('from_date')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'to_date' })),
+      .label(intl.get('to_date')),
    accountsFilter: Yup.string(),
    displayColumnsType: Yup.string(),
  });
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
+++ b/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
@@ -1,5 +1,6 @@
 import React, { useMemo, useCallback } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';

 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
@@ -12,7 +13,7 @@ export default function ProfitLossSheetTable({
  // #ownProps
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Profit/Loss sheet context.
  const {
@@ -23,7 +24,7 @@ export default function ProfitLossSheetTable({
  const tableColumns = useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'account' }),
+        Header: intl.get('account'),
        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
        className: 'name',
        textOverview: true,
@@ -32,7 +33,7 @@ export default function ProfitLossSheetTable({
      ...(query.display_columns_type === 'total'
        ? [
            {
-              Header: formatMessage({ id: 'total' }),
+              Header: intl.get('total'),
              Cell: CellTextSpan,
              accessor: 'total.formatted_amount',
              className: 'total',
@@ -59,7 +60,6 @@ export default function ProfitLossSheetTable({
      query.display_columns_type,
      tableRows,
      columns,
-      formatMessage,
    ],
  );

--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsActionsBar.js
@@ -9,7 +9,7 @@ import {
  Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { Icon } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsHeader.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';

@@ -27,17 +28,17 @@ function PurchasesByItemsHeader({
  // #withPurchasesByItems
  togglePurchasesByItemsFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Form validation schema.
  const validationSchema = Yup.object().shape({
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'from_date' })),
+      .label(intl.get('from_date')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'to_date' })),
+      .label(intl.get('to_date')),
  });

  // Initial values.
--- a/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

 import FinancialSheet from 'components/FinancialSheet';
 import { DataTable } from 'components';
@@ -12,7 +12,7 @@ import { usePurchasesByItemsTableColumns } from './components';
 * purchases by items data table.
 */
 export default function PurchasesByItemsTable({ companyName }) {
-  const { formatMessage } = useIntl();
+  

  // Purchases by items context.
  const {
@@ -40,7 +40,7 @@ export default function PurchasesByItemsTable({ companyName }) {
  return (
    <FinancialSheet
      companyName={companyName}
-      sheetType={formatMessage({ id: 'purchases_by_items' })}
+      sheetType={intl.get('purchases_by_items')}
      fromDate={query.from_date}
      toDate={query.to_date}
      name="purchases-by-items"
--- a/client/src/containers/FinancialStatements/PurchasesByItems/components.js
+++ b/client/src/containers/FinancialStatements/PurchasesByItems/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { getColumnWidth } from 'utils';
 import { If, Icon } from 'components';
@@ -11,7 +11,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 * Retrieve purchases by items table columns.
 */
 export const usePurchasesByItemsTableColumns = () => {
-  const { formatMessage } = useIntl();
+  

  // purchases by items context.
  const {
@@ -21,14 +21,14 @@ export const usePurchasesByItemsTableColumns = () => {
  return React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'item_name' }),
+        Header: intl.get('item_name'),
        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
        className: 'name',
        width: 180,
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'quantity_purchased' }),
+        Header: intl.get('quantity_purchased'),
        accessor: 'quantity_purchased_formatted',
        Cell: CellTextSpan,
        className: 'quantity_purchased_formatted',
@@ -38,7 +38,7 @@ export const usePurchasesByItemsTableColumns = () => {
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'purchase_amount' }),
+        Header: intl.get('purchase_amount'),
        accessor: 'purchase_cost_formatted',
        Cell: CellTextSpan,
        className: 'purchase_cost_formatted',
@@ -48,7 +48,7 @@ export const usePurchasesByItemsTableColumns = () => {
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'average_price' }),
+        Header: intl.get('average_price'),
        accessor: 'average_cost_price_formatted',
        Cell: CellTextSpan,
        className: 'average_cost_price_formatted',
@@ -58,7 +58,7 @@ export const usePurchasesByItemsTableColumns = () => {
        textOverview: true,
      },
    ],
-    [tableRows,formatMessage],
+    [tableRows],
  );
 };

--- a/client/src/containers/FinancialStatements/RadiosAccountingBasis.js
+++ b/client/src/containers/FinancialStatements/RadiosAccountingBasis.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { FastField } from 'formik';
 import { handleStringChange } from 'utils';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { RadioGroup, Radio } from '@blueprintjs/core';

 export default function RadiosAccountingBasis(props) {
  const { key = 'basis', ...rest } = props;
-  const { formatMessage } = useIntl();
+  

  return (
    <FastField name={'basis'}>
@@ -16,7 +16,7 @@ export default function RadiosAccountingBasis(props) {
      }) => (
        <RadioGroup
          inline={true}
-          label={formatMessage({ id: 'accounting_basis' })}
+          label={intl.get('accounting_basis')}
          name="basis"
          onChange={handleStringChange((value) => {
            setFieldValue(key, value);
@@ -25,8 +25,8 @@ export default function RadiosAccountingBasis(props) {
          selectedValue={value}
          {...rest}
        >
-          <Radio label={formatMessage({ id: 'cash' })} value="cash" />
-          <Radio label={formatMessage({ id: 'accrual' })} value="accural" />
+          <Radio label={intl.get('cash')} value="cash" />
+          <Radio label={intl.get('accrual')} value="accural" />
        </RadioGroup>
      )}
    </FastField>
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsActionsBar.js
@@ -9,7 +9,7 @@ import {
  Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { Icon } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsHeader.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';

@@ -27,17 +28,17 @@ function SalesByItemsHeader({
  // #withSalesByItemsActions
  toggleSalesByItemsFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Form validation schema.
  const validationSchema = Yup.object().shape({
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'from_date' })),
+      .label(intl.get('from_date')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'to_date' })),
+      .label(intl.get('to_date')),
  });

  // Initial values.
--- a/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/SalesByItemsTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

 import FinancialSheet from 'components/FinancialSheet';
 import { DataTable } from 'components';
@@ -10,7 +10,7 @@ import { useSalesByItemsTableColumns } from './components';
 * Sales by items data table.
 */
 export default function SalesByItemsTable({ companyName }) {
-  const { formatMessage } = useIntl();
+  

  // Sales by items context.
  const {
@@ -38,7 +38,7 @@ export default function SalesByItemsTable({ companyName }) {
  return (
    <FinancialSheet
      companyName={companyName}
-      sheetType={formatMessage({ id: 'sales_by_items' })}
+      sheetType={intl.get('sales_by_items')}
      fromDate={query.from_date}
      toDate={query.to_date}
      name="sales-by-items"
--- a/client/src/containers/FinancialStatements/SalesByItems/components.js
+++ b/client/src/containers/FinancialStatements/SalesByItems/components.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { getColumnWidth } from 'utils';
 import { If, Icon } from 'components';
@@ -11,7 +11,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 * Retrieve sales by items table columns.
 */
 export const useSalesByItemsTableColumns = () => {
-  const { formatMessage } = useIntl();
+  

  //sales by items context.
  const {
@@ -21,14 +21,14 @@ export const useSalesByItemsTableColumns = () => {
  return useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'item_name' }),
+        Header: intl.get('item_name'),
        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
        className: 'name',
        width: 180,
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'sold_quantity' }),
+        Header: intl.get('sold_quantity'),
        accessor: 'quantity_sold_formatted',
        Cell: CellTextSpan,
        className: 'quantity_sold',
@@ -38,7 +38,7 @@ export const useSalesByItemsTableColumns = () => {
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'sold_amount' }),
+        Header: intl.get('sold_amount'),
        accessor: 'sold_cost_formatted',
        Cell: CellTextSpan,
        className: 'sold_cost',
@@ -48,7 +48,7 @@ export const useSalesByItemsTableColumns = () => {
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'average_price' }),
+        Header: intl.get('average_price'),
        accessor: 'average_sell_price_formatted',
        Cell: CellTextSpan,
        className: 'average_sell_price',
@@ -58,7 +58,7 @@ export const useSalesByItemsTableColumns = () => {
        textOverview: true,
      },
    ],
-    [tableRows, formatMessage],
+    [tableRows],
  );
 };

--- a/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
+++ b/client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormGroup } from '@blueprintjs/core';
 import { FastField  } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Row, Col, ListSelect } from 'components';
 import { displayColumnsByOptions } from 'containers/FinancialStatements/common';

--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
@@ -9,7 +9,7 @@ import {
  Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import * as Yup from 'yup';
 import moment from 'moment';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';

@@ -27,17 +28,17 @@ function TrialBalanceSheetHeader({
  // #withTrialBalanceActions
  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Form validation schema.
  const validationSchema = Yup.object().shape({
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'from_date' })),
+      .label(intl.get('from_date')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'to_date' })),
+      .label(intl.get('to_date')),
  });

  // Initial values.
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
@@ -15,7 +15,7 @@ import { useTrialBalanceTableColumns } from './components';
 export default function TrialBalanceSheetTable({
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Trial balance sheet context.
  const {
@@ -43,7 +43,7 @@ export default function TrialBalanceSheetTable({
  return (
    <FinancialSheet
      companyName={companyName}
-      sheetType={formatMessage({ id: 'trial_balance_sheet' })}
+      sheetType={intl.get('trial_balance_sheet')}
      fromDate={query.from_date}
      toDate={query.to_date}
      name="trial-balance"
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/components.js
+++ b/client/src/containers/FinancialStatements/TrialBalanceSheet/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Button } from '@blueprintjs/core';
 import { getColumnWidth } from 'utils';
 import { If, Icon } from 'components';
@@ -11,7 +11,7 @@ import FinancialLoadingBar from '../FinancialLoadingBar';
 * Retrieve trial balance sheet table columns.
 */
 export const useTrialBalanceTableColumns = () => {
-  const { formatMessage } = useIntl();
+  

  // Trial balance sheet context.
  const {
@@ -21,14 +21,14 @@ export const useTrialBalanceTableColumns = () => {
  return React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
        className: 'name',
        width: 180,
        textOverview: true,
      },
      {
-        Header: formatMessage({ id: 'credit' }),
+        Header: intl.get('credit'),
        Cell: CellTextSpan,
        accessor: 'formatted_credit',
        className: 'credit',
@@ -37,13 +37,13 @@ export const useTrialBalanceTableColumns = () => {
        }),
      },
      {
-        Header: formatMessage({ id: 'debit' }),
+        Header: intl.get('debit'),
        Cell: CellTextSpan,
        accessor: 'formatted_debit',
        width: getColumnWidth(tableRows, `debit`, { minWidth: 80 }),
      },
      {
-        Header: formatMessage({ id: 'balance' }),
+        Header: intl.get('balance'),
        Cell: CellTextSpan,
        accessor: 'formatted_balance',
        className: 'balance',
@@ -52,7 +52,7 @@ export const useTrialBalanceTableColumns = () => {
        }),
      },
    ],
-    [tableRows, formatMessage],
+    [tableRows],
  );
 };

--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import { Icon } from 'components';
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeader.js
@@ -3,7 +3,7 @@ import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import withVendorsBalanceSummary from './withVendorsBalanceSummary';
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryHeaderGeneral.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormGroup, Position, Classes, Checkbox } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Row, Col, FieldHint } from 'components';
 import {
  momentFormatter,
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/VendorsBalanceSummaryTable.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { DataTable } from 'components';
 import FinancialSheet from 'components/FinancialSheet';

@@ -13,7 +14,7 @@ export default function VendorsBalanceSummaryTable({
  //#ownProps
  organizationName,
 }) {
-  const { formatMessage } = useIntl();
+  

  const {
    VendorBalanceSummary,
@@ -31,7 +32,7 @@ export default function VendorsBalanceSummaryTable({
    <FinancialSheet
      companyName={organizationName}
      name={'vendors-balance-summary'}
-      sheetType={formatMessage({ id: 'vendors_balance_summary' })}
+      sheetType={intl.get('vendors_balance_summary')}
      asDate={new Date()}
      loading={isVendorsBalanceLoading}
    >
--- a/client/src/containers/FinancialStatements/VendorsBalanceSummary/components.js
+++ b/client/src/containers/FinancialStatements/VendorsBalanceSummary/components.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 import { If } from 'components';
 import { getColumnWidth } from 'utils';
@@ -12,7 +12,7 @@ import { useVendorsBalanceSummaryContext } from './VendorsBalanceSummaryProvider
 export const useVendorsBalanceColumns = () => {
  return useMemo(() => [
    {
-      Header: formatMessage({ id: 'vendor_name' }),
+      Header: intl.get('vendor_name'),
      accessor: 'cells[0].value',
      className: 'customer_name',
      width: 240,
@@ -20,13 +20,13 @@ export const useVendorsBalanceColumns = () => {
      textOverview: true,
    },
    {
-      Header: formatMessage({ id: 'total' }),
+      Header: intl.get('total'),
      accessor: 'cells[1].value',
      className: 'total',
      width: 140,
    },
    {
-      Header: formatMessage({ id: 'percentage_of_column' }),
+      Header: intl.get('percentage_of_column'),
      accessor: 'cells[2].value',
      // className: 'total',
      width: 140,
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js
@@ -8,7 +8,7 @@ import {
  PopoverInteractionKind,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';

 import Icon from 'components/Icon';
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js
@@ -3,7 +3,8 @@ import * as Yup from 'yup';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';

 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import VendorsTransactionsHeaderGeneralPanel from './VendorsTransactionsHeaderGeneralPanel';
@@ -28,7 +29,7 @@ function VendorsTransactionsHeader({
  //#withVendorsTransactionsActions
  toggleVendorsTransactionsFilterDrawer: toggleFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  

  // Filter form initial values.
  const initialValues = {
@@ -41,11 +42,11 @@ function VendorsTransactionsHeader({
  const validationSchema = Yup.object().shape({
    fromDate: Yup.date()
      .required()
-      .label(formatMessage({ id: 'fromDate' })),
+      .label(intl.get('fromDate')),
    toDate: Yup.date()
      .min(Yup.ref('fromDate'))
      .required()
-      .label(formatMessage({ id: 'toDate' })),
+      .label(intl.get('toDate')),
  });

  // Handle form submit.
--- a/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js
@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';

 import FinancialSheet from 'components/FinancialSheet';
@@ -17,7 +17,7 @@ export default function VendorsTransactionsTable({
  // #ownProps
  companyName,
 }) {
-  const { formatMessage } = useIntl();
+  

  const {
    vendorsTransactions: { tableRows },
@@ -39,7 +39,7 @@ export default function VendorsTransactionsTable({
    <FinancialSheet
      name="vendor-transactions"
      companyName={companyName}
-      sheetType={formatMessage({ id: 'vendors_transactions' })}
+      sheetType={intl.get('vendors_transactions')}
      loading={isVendorsTransactionsLoading}
      fromDate={query.from_date}
      toDate={query.to_date}
--- a/client/src/containers/FinancialStatements/VendorsTransactions/components.js
+++ b/client/src/containers/FinancialStatements/VendorsTransactions/components.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { If } from 'components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -17,7 +17,7 @@ export const useVendorsTransactionsColumns = () => {
  return React.useMemo(
    () => [
      {
-        Header: formatMessage({ id: 'vendor_name' }),
+        Header: intl.get('vendor_name'),
        accessor: ({ cells }) => {
          return (
            <span
@@ -33,26 +33,26 @@ export const useVendorsTransactionsColumns = () => {
        // width: 240,
      },
      {
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
        accessor: 'cells[1].value',
        className: 'name',
        textOverview: true,
        width: 170,
      },
      {
-        Header: formatMessage({ id: 'reference_type' }),
+        Header: intl.get('reference_type'),
        accessor: 'cells[2].value',
        textOverview: true,
        width: 120,
      },
      {
-        Header: formatMessage({ id: 'transaction_type' }),
+        Header: intl.get('transaction_type'),
        accessor: 'cells[3].value',
        textOverview: true,
        width: 120,
      },
      {
-        Header: formatMessage({ id: 'credit' }),
+        Header: intl.get('credit'),
        accessor: 'cells[4].value',
        className: 'credit',
        textOverview: true,
@@ -62,7 +62,7 @@ export const useVendorsTransactionsColumns = () => {
        }),
      },
      {
-        Header: formatMessage({ id: 'debit' }),
+        Header: intl.get('debit'),
        accessor: 'cells[5].value',
        className: 'debit',
        textOverview: true,
@@ -72,7 +72,7 @@ export const useVendorsTransactionsColumns = () => {
        }),
      },
      {
-        Header: formatMessage({ id: 'running_balance' }),
+        Header: intl.get('running_balance'),
        accessor: 'cells[6].value',
        className: 'running_balance',
        textOverview: true,
@@ -82,7 +82,7 @@ export const useVendorsTransactionsColumns = () => {
        }),
      },
    ],
-    [tableRows, formatMessage],
+    [tableRows],
  );
 };

--- a/client/src/containers/FinancialStatements/common.js
+++ b/client/src/containers/FinancialStatements/common.js
@@ -1,6 +1,6 @@
 import { omit } from 'lodash';
 import { transfromToSnakeCase, flatObject } from 'utils';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 export const displayColumnsByOptions = [
  { key: 'total', name: 'Total', type: 'total', by: '' },
@@ -23,22 +23,18 @@ export const dateRangeOptions = [
 export const filterAccountsOptions = [
  {
    key: 'all-accounts',
-    name: formatMessage({ id: 'all_accounts' }),
-    hint: formatMessage({ id: 'all_accounts_including_with_zero_balance' }),
+    name: intl.get('all_accounts'),
+    hint: intl.get('all_accounts_including_with_zero_balance'),
  },
  {
    key: 'without-zero-balance',
-    name: formatMessage({ id: 'accounts_without_zero_balance' }),
-    hint: formatMessage({
-      id: 'include_accounts_and_exclude_zero_balance',
-    }),
+    name: intl.get('accounts_without_zero_balance'),
+    hint: intl.get('include_accounts_and_exclude_zero_balance'),
  },
  {
    key: 'with-transactions',
-    name: formatMessage({ id: 'accounts_with_transactions' }),
-    hint: formatMessage({
-      id: 'include_accounts_once_has_transactions_on_given_date_period',
-    }),
+    name: intl.get('accounts_with_transactions'),
+    hint: intl.get('include_accounts_once_has_transactions_on_given_date_period'),
  },
 ];