WIP: Arabic localization.|

client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -12,7 +12,7 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function ManualJournalsEmptyStatus() {
   const history = useHistory();

client/src/containers/Accounting/JournalsLanding/components.js

@@ -11,11 +11,11 @@ import {
   MenuDivider,
   Popover,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import moment from 'moment';
 import { Choose, Money, If, Icon } from 'components';
 import { safeCallback } from 'utils';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 /**
  * Amount accessor.
@@ -155,24 +155,24 @@ export const ActionsMenu = ({
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <If condition={!original.is_published}>
         <MenuItem
           icon={<Icon icon="arrow-to-top" />}
-          text={formatMessage({ id: 'publish_journal' })}
+          text={intl.get('publish_journal')}
           onClick={safeCallback(onPublish, original)}
         />
       </If>
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_journal' })}
+        text={intl.get('edit_journal')}
         onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
-        text={formatMessage({ id: 'delete_journal' })}
+        text={intl.get('delete_journal')}
         icon={<Icon icon="trash-16" iconSize={16} />}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}

client/src/containers/Accounting/JournalsLanding/utils.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import {
   NoteAccessor,
@@ -16,42 +16,42 @@ export const useManualJournalsColumns = () => {
     () => [
       {
         id: 'date',
-        Header: formatMessage({ id: 'date' }),
+        Header: intl.get('date'),
         accessor: DateAccessor,
         width: 115,
         className: 'date',
       },
       {
         id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
         accessor: AmountAccessor,
         className: 'amount',
         width: 115,
       },
       {
         id: 'journal_number',
-        Header: formatMessage({ id: 'journal_no' }),
+        Header: intl.get('journal_no'),
         accessor: (row) => `#${row.journal_number}`,
         className: 'journal_number',
         width: 100,
       },
       {
         id: 'journal_type',
-        Header: formatMessage({ id: 'journal_type' }),
+        Header: intl.get('journal_type'),
         accessor: 'journal_type',
         width: 110,
         className: 'journal_type',
       },
       {
         id: 'status',
-        Header: formatMessage({ id: 'publish' }),
+        Header: intl.get('publish'),
         accessor: (row) => StatusAccessor(row),
         width: 95,
         className: 'status',
       },
       {
         id: 'note',
-        Header: formatMessage({ id: 'note' }),
+        Header: intl.get('note'),
         accessor: NoteAccessor,
         disableSortBy: true,
         width: 85,
@@ -59,7 +59,7 @@ export const useManualJournalsColumns = () => {
       },
       {
         id: 'created_at',
-        Header: formatMessage({ id: 'created_at' }),
+        Header: intl.get('created_at'),
         accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
         width: 125,
         className: 'created_at',

client/src/containers/Accounting/MakeJournal/MakeJournalEntries.schema.js

@@ -1,5 +1,5 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
@@ -7,15 +7,15 @@ const Schema = Yup.object().shape({
     .required()
     .min(1)
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'journal_number_' })),
+    .label(intl.get('journal_number_')),
   journal_type: Yup.string()
     .required()
     .min(1)
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'journal_type' })),
+    .label(intl.get('journal_type')),
   date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'date' })),
+    .label(intl.get('date')),
   currency_code: Yup.string().max(3),
   publish: Yup.boolean(),
   reference: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.js

@@ -9,7 +9,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useFormikContext } from 'formik';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { defaultTo, isEmpty, omit } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -48,7 +48,6 @@ function MakeJournalEntriesForm({
     submitPayload,
   } = useMakeJournalFormContext();
 
-  const { formatMessage } = useIntl();
   const history = useHistory();
 
   // New journal number.
@@ -92,18 +91,14 @@ function MakeJournalEntriesForm({
     // Validate the total credit should be eqials total debit.
     if (totalCredit !== totalDebit) {
       AppToaster.show({
-        message: formatMessage({
-          id: 'should_total_of_credit_and_debit_be_equal',
-        }),
+        message: intl.get('should_total_of_credit_and_debit_be_equal'),
         intent: Intent.DANGER,
       });
       setSubmitting(false);
       return;
     } else if (totalCredit === 0 || totalDebit === 0) {
       AppToaster.show({
-        message: formatMessage({
-          id: 'amount_cannot_be_zero_or_empty',
-        }),
+        message: intl.get('amount_cannot_be_zero_or_empty'),
         intent: Intent.DANGER,
       });
       setSubmitting(false);
@@ -131,12 +126,10 @@ function MakeJournalEntriesForm({
     // Handle the request success.
     const handleSuccess = (errors) => {
       AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'the_journal_has_been_created_successfully'
-              : 'the_journal_has_been_edited_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'the_journal_has_been_created_successfully'
+            : 'the_journal_has_been_edited_successfully',
           { number: values.journal_number },
         ),
         intent: Intent.SUCCESS,

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import { CLASSES } from 'common/classes';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
 import { PageFormBigNumber } from 'components';
 import { safeSumBy } from 'utils';

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js

@@ -7,7 +7,7 @@ import {
 } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';

client/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js

@@ -11,7 +11,7 @@ import {
 } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import { Icon, If } from 'components';
 import { useHistory } from 'react-router-dom';

client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js

@@ -3,7 +3,7 @@ import { FastField } from 'formik';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Postbox, ErrorMessage, Row, Col } from 'components';
 import Dragzone from 'components/Dragzone';
 import { inputIntent } from 'utils';

client/src/containers/Accounting/MakeJournal/components.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Intent, Position, Button, Tooltip } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Icon, Money, Hint } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -30,14 +30,14 @@ export function ContactHeaderCell() {
  * Credit header cell.
  */
 export function CreditHeaderCell({ payload: { currencyCode } }) {
-  return formatMessage({ id: 'credit_currency' }, { currency: currencyCode });
+  return intl.get('credit_currency', { currency: currencyCode });
 }
 
 /**
  * debit header cell.
  */
 export function DebitHeaderCell({ payload: { currencyCode } }) {
-  return formatMessage({ id: 'debit_currency' }, { currency: currencyCode });
+  return intl.get('debit_currency', { currency: currencyCode });
 }
 
 /**
@@ -46,7 +46,7 @@ export function DebitHeaderCell({ payload: { currencyCode } }) {
 function AccountFooterCell({ payload: { currencyCode } }) {
   return (
     <span>
-      {formatMessage({ id: 'total_currency' }, { currency: currencyCode })}
+      {intl.get('total_currency', { currency: currencyCode })}
     </span>
   );
 }
@@ -120,7 +120,7 @@ export const useJournalTableEntriesColumns = () => {
         sticky: 'left',
       },
       {
-        Header: formatMessage({ id: 'account' }),
+        Header: intl.get('account'),
         id: 'account_id',
         accessor: 'account_id',
         Cell: AccountsListFieldCell,
@@ -157,7 +157,7 @@ export const useJournalTableEntriesColumns = () => {
         width: 120,
       },
       {
-        Header: formatMessage({ id: 'note' }),
+        Header: intl.get('note'),
         accessor: 'note',
         Cell: InputGroupCell,
         disableSortBy: true,
@@ -174,6 +174,6 @@ export const useJournalTableEntriesColumns = () => {
         width: 45,
       },
     ],
-    [formatMessage],
+    [],
   );
 };

client/src/containers/Accounting/MakeJournal/utils.js

@@ -10,7 +10,7 @@ import {
   transformToForm,
 } from 'utils';
 import { AppToaster } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { useFormikContext } from 'formik';
 
 const ERROR = {
@@ -118,23 +118,19 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
 
   if ((error = getError(ERROR.RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS))) {
     toastMessages.push(
-      formatMessage({
-        id: 'should_select_customers_with_entries_have_receivable_account',
-      }),
+      intl.get('should_select_customers_with_entries_have_receivable_account'),
     );
     setEntriesErrors(error.indexes, 'contact_id', 'error');
   }
   if ((error = getError(ERROR.ENTRIES_SHOULD_ASSIGN_WITH_CONTACT))) {
     if (error.meta.find(meta => meta.contact_type === 'customer')) {
       toastMessages.push(
-        formatMessage({
-          id: 'receivable_accounts_should_assign_with_customers',
-        }),
+        intl.get('receivable_accounts_should_assign_with_customers'),
       );
     }
     if (error.meta.find(meta => meta.contact_type === 'vendor')) {
       toastMessages.push(
-        formatMessage({ id: 'payable_accounts_should_assign_with_vendors' }),
+        intl.get('payable_accounts_should_assign_with_vendors'),
       );
     }
     const indexes = error.meta.map((meta => meta.indexes)).flat();
@@ -144,9 +140,7 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
     newErrors = setWith(
       newErrors,
       'journal_number',
-      formatMessage({
-        id: 'journal_number_is_already_used',
-      }),
+      intl.get('journal_number_is_already_used'),
     );
   }
   setErrors({ ...newErrors });

client/src/containers/Accounts/AccountsActionsBar.js

@@ -12,7 +12,7 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { If, DashboardActionViewsList } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

client/src/containers/Accounts/components.js

@@ -10,9 +10,8 @@ import {
   Popover,
   Button,
 } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
 import { Icon, Money, If } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
 
 /**
@@ -34,37 +33,37 @@ export function ActionsMenu({
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_account' })}
+        text={intl.get('edit_account')}
         onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
         icon={<Icon icon="plus" />}
-        text={formatMessage({ id: 'new_child_account' })}
+        text={intl.get('new_child_account')}
         onClick={safeCallback(onNewChild, original)}
       />
       <MenuDivider />
       <If condition={original.active}>
         <MenuItem
-          text={formatMessage({ id: 'inactivate_account' })}
+          text={intl.get('inactivate_account')}
           icon={<Icon icon="pause-16" iconSize={16} />}
           onClick={safeCallback(onInactivate, original)}
         />
       </If>
       <If condition={!original.active}>
         <MenuItem
-          text={formatMessage({ id: 'activate_account' })}
+          text={intl.get('activate_account')}
           icon={<Icon icon="play-16" iconSize={16} />}
           onClick={safeCallback(onActivate, original)}
         />
       </If>
       <MenuItem
-        text={formatMessage({ id: 'delete_account' })}
+        text={intl.get('delete_account')}
         icon={<Icon icon="trash-16" iconSize={16} />}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
@@ -77,7 +76,6 @@ export function ActionsMenu({
  * Normal cell.
  */
 export function NormalCell({ cell: { value } }) {
-  const { formatMessage } = useIntl();
   const arrowDirection = value === 'credit' ? 'down' : 'up';
 
   // Can't continue if the value is not `credit` or `debit`.
@@ -87,7 +85,7 @@ export function NormalCell({ cell: { value } }) {
   return (
     <Tooltip
       className={Classes.TOOLTIP_INDICATOR}
-      content={formatMessage({ id: value })}
+      content={intl.get(value)}
       position={Position.RIGHT}
       hoverOpenDelay={100}
     >

client/src/containers/Accounts/utils.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Intent, Tag } from '@blueprintjs/core';
 import { If, AppToaster } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { NormalCell, BalanceCell } from './components';
 import { isBlank, compose } from 'utils';
 
@@ -25,17 +25,13 @@ export const accountNameAccessor = (account) => {
 export const handleDeleteErrors = (errors) => {
   if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'you_could_not_delete_predefined_accounts',
-      }),
+      message: intl.get('you_could_not_delete_predefined_accounts'),
       intent: Intent.DANGER,
     });
   }
   if (errors.find((e) => e.type === 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS')) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'cannot_delete_account_has_associated_transactions',
-      }),
+      message: intl.get('cannot_delete_account_has_associated_transactions'),
       intent: Intent.DANGER,
     });
   }
@@ -56,28 +52,28 @@ export const useAccountsTableColumns = () => {
     () => [
       {
         id: 'name',
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
         accessor: 'name',
         className: 'account_name',
         width: 200,
       },
       {
         id: 'code',
-        Header: formatMessage({ id: 'code' }),
+        Header: intl.get('code'),
         accessor: AccountCodeAccessor,
         className: 'code',
         width: 80,
       },
       {
         id: 'type',
-        Header: formatMessage({ id: 'type' }),
+        Header: intl.get('type'),
         accessor: 'account_type_label',
         className: 'type',
         width: 140,
       },
       {
         id: 'normal',
-        Header: formatMessage({ id: 'normal' }),
+        Header: intl.get('account_normal'),
         Cell: NormalCell,
         accessor: 'account_normal',
         className: 'normal',
@@ -85,13 +81,13 @@ export const useAccountsTableColumns = () => {
       },
       {
         id: 'currency',
-        Header: formatMessage({ id: 'currency' }),
+        Header: intl.get('currency'),
         accessor: 'currency_code',
         width: 75,
       },
       {
         id: 'balance',
-        Header: formatMessage({ id: 'balance' }),
+        Header: intl.get('balance'),
         accessor: 'amount',
         Cell: BalanceCell,
         width: 150,

client/src/containers/Alerts/AccountActivateAlert.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
+import { AppToaster, FormattedMessage as T } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -20,7 +20,7 @@ function AccountActivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: activateAccount,
     isLoading 
@@ -35,9 +35,7 @@ function AccountActivateAlert({
   const handleConfirmAccountActivate = () => {
     activateAccount(accountId).then(() => {
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_account_has_been_successfully_activated',
-        }),
+        message: intl.get('the_account_has_been_successfully_activated'),
         intent: Intent.SUCCESS,
       });
       closeAlert('account-activate');

client/src/containers/Alerts/AccountBulkActivateAlert.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
-import { AppToaster } from 'components';
+import { FormattedMessage as T, AppToaster } from 'components';
 
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
@@ -20,7 +20,6 @@ function AccountBulkActivateAlert({
 
   requestBulkActivateAccounts,
 }) {
-  const { formatMessage } = useIntl();
   const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
@@ -35,9 +34,7 @@ function AccountBulkActivateAlert({
     requestBulkActivateAccounts(accountsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_accounts_has_been_successfully_activated',
-          }),
+          message: intl.get('the_accounts_has_been_successfully_activated'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('accounts-table');
@@ -52,9 +49,7 @@ function AccountBulkActivateAlert({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={`${formatMessage({
-        id: 'activate',
-      })} (${selectedRowsCount})`}
+      confirmButtonText={`${intl.get('activate')} (${selectedRowsCount})`}
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleClose}

client/src/containers/Alerts/AccountBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -29,7 +30,7 @@ function AccountBulkDeleteAlert({
   // #withAccountsActions
   requestDeleteBulkAccounts,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   const selectedRowsCount = 0;
@@ -43,9 +44,7 @@ function AccountBulkDeleteAlert({
     requestDeleteBulkAccounts(accountsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_accounts_has_been_successfully_deleted',
-          }),
+          message: intl.get('the_accounts_has_been_successfully_deleted'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('accounts-table');
@@ -62,9 +61,7 @@ function AccountBulkDeleteAlert({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={`${formatMessage({
-        id: 'delete',
-      })} (${selectedRowsCount})`}
+      confirmButtonText={`${intl.get('delete')} (${selectedRowsCount})`}
       icon="trash"
       intent={Intent.DANGER}
       isOpen={isOpen}

client/src/containers/Alerts/AccountBulkInactivateAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -20,7 +21,7 @@ function AccountBulkInactivateAlert({
 
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
@@ -34,9 +35,7 @@ function AccountBulkInactivateAlert({
     requestBulkInactiveAccounts(accountsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_accounts_have_been_successfully_inactivated',
-          }),
+          message: intl.get('the_accounts_have_been_successfully_inactivated'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('accounts-table');
@@ -51,9 +50,7 @@ function AccountBulkInactivateAlert({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={`${formatMessage({
-        id: 'inactivate',
-      })} (${selectedRowsCount})`}
+      confirmButtonText={`${intl.get('inactivate')} (${selectedRowsCount})`}
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleCancel}

client/src/containers/Alerts/AccountDeleteAlert.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { AppToaster } from 'components';
 
 import { handleDeleteErrors } from 'containers/Accounts/utils';
@@ -28,7 +26,6 @@ function AccountDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
   const { isLoading, mutateAsync: deleteAccount } = useDeleteAccount();
 
   // handle cancel delete account alert.
@@ -40,9 +37,7 @@ function AccountDeleteAlert({
     deleteAccount(accountId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_account_has_been_successfully_deleted',
-          }),
+          message: intl.get('the_account_has_been_successfully_deleted'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/AccountInactivateAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -22,7 +23,7 @@ function AccountInactivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: inactivateAccount,
     isLoading
@@ -35,9 +36,7 @@ function AccountInactivateAlert({
   const handleConfirmAccountActive = () => {
     inactivateAccount(accountId).then(() => {
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_account_has_been_successfully_inactivated',
-        }),
+        message: intl.get('the_account_has_been_successfully_inactivated'),
         intent: Intent.SUCCESS,
       });
     }).catch(() => {

client/src/containers/Alerts/Bills/BillDeleteAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -23,7 +24,7 @@ function BillDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { isLoading, mutateAsync: deleteBillMutate } = useDeleteBill();
 
   // Handle cancel Bill
@@ -36,9 +37,7 @@ function BillDeleteAlert({
     deleteBillMutate(billId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_bill_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_bill_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Bills/BillOpenAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -22,7 +23,7 @@ function BillOpenAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { isLoading, mutateAsync: openBillMutate } = useOpenBill();
 
   // Handle cancel open bill alert.
@@ -35,9 +36,7 @@ function BillOpenAlert({
     openBillMutate(billId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_bill_has_been_opened_successfully',
-          }),
+          message: intl.get('the_bill_has_been_opened_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Currencies/CurrencyDeleteAlert.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { AppToaster } from 'components';
 
 import { useDeleteCurrency } from 'hooks/query';
@@ -27,7 +25,7 @@ function CurrencyDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteCurrency, isLoading } = useDeleteCurrency();
 
   // handle cancel delete currency alert.
@@ -38,9 +36,7 @@ function CurrencyDeleteAlert({
     deleteCurrency(currency_code)
       .then((response) => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_currency_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_currency_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Customers/utils';
@@ -22,7 +23,7 @@ function CustomerBulkDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete  alert.
@@ -38,9 +39,7 @@ function CustomerBulkDeleteAlert({
     requestDeleteBulkCustomers(customersIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_customers_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_customers_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })
@@ -51,7 +50,7 @@ function CustomerBulkDeleteAlert({
         setLoading(false);
         closeAlert(name);
       });
-  }, [requestDeleteBulkCustomers, customersIds, formatMessage]);
+  }, [requestDeleteBulkCustomers, customersIds]);
 
   return (
     <Alert

client/src/containers/Alerts/Customers/CustomerDeleteAlert.js

@@ -1,9 +1,6 @@
 import React, { useCallback } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Customers/utils';
@@ -28,7 +25,7 @@ function CustomerDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteCustomerMutate,
     isLoading
@@ -44,9 +41,7 @@ function CustomerDeleteAlert({
     deleteCustomerMutate(customerId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_customer_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_customer_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })
@@ -56,7 +51,7 @@ function CustomerDeleteAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [deleteCustomerMutate, customerId, closeAlert, name, formatMessage]);
+  }, [deleteCustomerMutate, customerId, closeAlert, name]);
 
   return (
     <Alert

client/src/containers/Alerts/Estimates/EstimateApproveAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 
@@ -24,7 +25,7 @@ function EstimateApproveAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deliverEstimateMutate,
     isLoading,
@@ -39,9 +40,7 @@ function EstimateApproveAlert({
     deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_approved_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_approved_successfully'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('estimates-table');
@@ -50,7 +49,7 @@ function EstimateApproveAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [estimateId, deliverEstimateMutate, closeAlert, name, formatMessage]);
+  }, [estimateId, deliverEstimateMutate, closeAlert, name]);
 
   return (
     <Alert

client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js

@@ -1,10 +1,8 @@
 import React, { useCallback } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { useDeleteEstimate } from 'hooks/query';
 
 import { AppToaster } from 'components';
@@ -27,7 +25,7 @@ function EstimateDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteEstimateMutate, isLoading } = useDeleteEstimate();
 
   // handle cancel delete  alert.
@@ -40,9 +38,7 @@ function EstimateDeleteAlert({
     deleteEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.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 { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeliverEstimate } from 'hooks/query';
@@ -23,7 +24,7 @@ function EstimateDeliveredAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deliverEstimateMutate, isLoading } = useDeliverEstimate();
 
   // Handle cancel delivered estimate alert.
@@ -36,9 +37,7 @@ function EstimateDeliveredAlert({
     deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_delivered_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_delivered_successfully'),
           intent: Intent.SUCCESS,
         })
       })

client/src/containers/Alerts/Estimates/EstimateRejectAlert.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 { Intent, Alert } from '@blueprintjs/core';
 
 import { AppToaster } from 'components';
@@ -23,7 +24,7 @@ function EstimateRejectAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: rejectEstimateMutate,
     isLoading
@@ -39,9 +40,7 @@ function EstimateRejectAlert({
     rejectEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_rejected_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_rejected_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { size } from 'lodash';
 import { AppToaster } from 'components';

client/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -30,7 +27,7 @@ function ExchangeRateDeleteAlert({
     mutateAsync: deleteExchangeRate,
     isLoading,
   } = useDeleteExchangeRate();
-  const { formatMessage } = useIntl();
+  
 
   // Handle cancel delete exchange rate alert.
   const handleCancelExchangeRateDelete = () => closeAlert(name);
@@ -39,9 +36,7 @@ function ExchangeRateDeleteAlert({
     deleteExchangeRate(exchangeRateId)
       .then((response) => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_exchange_rates_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_exchange_rates_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 

client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -20,7 +21,7 @@ function ExpenseDeleteAlert({
   isOpen,
   payload: { expenseId },
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteExpenseMutate,
     isLoading,
@@ -35,8 +36,8 @@ function ExpenseDeleteAlert({
   const handleConfirmExpenseDelete = () => {
     deleteExpenseMutate(expenseId).then(() => {
       AppToaster.show({
-        message: formatMessage(
-          { id: 'the_expense_has_been_deleted_successfully' },
+        message: intl.get(
+          'the_expense_has_been_deleted_successfully',
           { number: expenseId },
         ),
         intent: Intent.SUCCESS,

client/src/containers/Alerts/Expenses/ExpenseDeleteEntriesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/Expenses/ExpensePublishAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -20,7 +21,7 @@ function ExpensePublishAlert({
   payload: { expenseId },
   isOpen,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: publishExpenseMutate, isLoading } = usePublishExpense();
 
   const handleCancelPublishExpense = () => {
@@ -32,9 +33,7 @@ function ExpensePublishAlert({
     publishExpenseMutate(expenseId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_expense_has_been_published',
-          }),
+          message: intl.get('the_expense_has_been_published'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name)

client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { useDeleteInvoice } from 'hooks/query';
@@ -28,7 +25,7 @@ function InvoiceDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteInvoiceMutate, isLoading } = useDeleteInvoice();
 
   // handle cancel delete invoice alert.
@@ -41,9 +38,7 @@ function InvoiceDeleteAlert({
     deleteInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_invoice_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_invoice_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.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 { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeliverInvoice } from 'hooks/query';
@@ -23,7 +24,7 @@ function InvoiceDeliverAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deliverInvoiceMutate,
     isLoading
@@ -39,9 +40,7 @@ function InvoiceDeliverAlert({
     deliverInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_invoice_has_been_delivered_successfully',
-          }),
+          message: intl.get('the_invoice_has_been_delivered_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -28,7 +25,7 @@ function InventoryAdjustmentDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteInventoryAdjMutate,
     isLoading
@@ -44,9 +41,7 @@ function InventoryAdjustmentDeleteAlert({
     deleteInventoryAdjMutate(inventoryId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_adjustment_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_adjustment_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemActivateAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -25,7 +26,7 @@ function ItemActivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: activateItem, isLoading }  = useActivateItem();
   
   // Handle activate item alert cancel.
@@ -38,9 +39,7 @@ function ItemActivateAlert({
     activateItem(itemId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_activated_successfully',
-          }),
+          message: intl.get('the_item_has_been_activated_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { size } from 'lodash';
 import { AppToaster } from 'components';
@@ -26,7 +27,7 @@ function ItemBulkDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   // handle cancel item bulk delete alert.
@@ -39,9 +40,7 @@ function ItemBulkDeleteAlert({
     requestDeleteBulkItems(itemsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_items_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_items_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js

@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { size } from 'lodash';
 import { AppToaster } from 'components';
@@ -30,7 +27,7 @@ function ItemCategoryBulkDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   // handle cancel bulk delete alert.
@@ -44,9 +41,7 @@ function ItemCategoryBulkDeleteAlert({
     requestDeleteBulkItemCategories(itemCategoriesIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_categories_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_item_categories_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeleteItemCategory } from 'hooks/query';
@@ -27,7 +24,7 @@ function ItemCategoryDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteItemCategory,
     isLoading,
@@ -43,9 +40,7 @@ function ItemCategoryDeleteAlert({
     deleteItemCategory(itemCategoryId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_category_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_item_category_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -33,7 +30,7 @@ function ItemDeleteAlert({
   setItemsTableState,
 }) {
   const { mutateAsync: deleteItem, isLoading } = useDeleteItem();
-  const { formatMessage } = useIntl();
+  
 
   // Handle cancel delete item alert.
   const handleCancelItemDelete = () => {
@@ -45,9 +42,7 @@ function ItemDeleteAlert({
     deleteItem(itemId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_item_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         // Reset to page number one.

client/src/containers/Alerts/Items/ItemInactivateAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -23,7 +24,7 @@ function ItemInactivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: inactivateItem, isLoading } = useInactivateItem();
 
   // Handle cancel inactivate alert.
@@ -36,9 +37,7 @@ function ItemInactivateAlert({
     inactivateItem(itemId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_inactivated_successfully',
-          }),
+          message: intl.get('the_item_has_been_inactivated_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { useDeleteJournal } from 'hooks/query';
 
 import { AppToaster } from 'components';
@@ -23,7 +24,7 @@ function JournalDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteJournalMutate, isLoading } = useDeleteJournal();
 
   // Handle cancel delete manual journal.
@@ -36,8 +37,8 @@ function JournalDeleteAlert({
     deleteJournalMutate(manualJournalId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage(
-            { id: 'the_journal_has_been_deleted_successfully' },
+          message: intl.get(
+            'the_journal_has_been_deleted_successfully',
             { number: journalNumber },
           ),
           intent: Intent.SUCCESS,

client/src/containers/Alerts/ManualJournals/JournalDeleteEntriesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { usePublishJournal } from 'hooks/query';
 
 import { AppToaster } from 'components';
@@ -23,7 +24,7 @@ function JournalPublishAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: publishJournalMutate, isLoading } = usePublishJournal();
 
   // Handle cancel manual journal alert.
@@ -36,9 +37,7 @@ function JournalPublishAlert({
     publishJournalMutate(manualJournalId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_manual_journal_has_been_published',
-          }),
+          message: intl.get('the_manual_journal_has_been_published'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/PaymentMades/ClearTransactionAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.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 { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -23,7 +24,7 @@ function PaymentMadeDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deletePaymentMadeMutate,
     isLoading,
@@ -37,9 +38,7 @@ function PaymentMadeDeleteAlert({
     deletePaymentMadeMutate(paymentMadeId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_payment_made_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_payment_made_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeletePaymentReceive } from 'hooks/query';
@@ -27,7 +24,7 @@ function PaymentReceiveDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deletePaymentReceiveMutate,
     isLoading,
@@ -43,9 +40,7 @@ function PaymentReceiveDeleteAlert({
     deletePaymentReceiveMutate(paymentReceiveId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_payment_receive_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_payment_receive_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Receipts/ReceiptCloseAlert.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 { Intent, Alert } from '@blueprintjs/core';
 
 import { useCloseReceipt } from 'hooks/query';
@@ -23,7 +24,7 @@ function ReceiptCloseAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: closeReceiptMutate, isLoading } = useCloseReceipt();
 
   // handle cancel delete alert.
@@ -36,9 +37,7 @@ function ReceiptCloseAlert({
     closeReceiptMutate(receiptId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_receipt_has_been_closed_successfully',
-          }),
+          message: intl.get('the_receipt_has_been_closed_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 
@@ -28,7 +25,7 @@ function NameDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteReceiptMutate,
     isLoading
@@ -44,9 +41,7 @@ function NameDeleteAlert({
     deleteReceiptMutate(receiptId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_receipt_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_receipt_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Users/UserActivateAlert.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 { Alert, Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { useActivateUser } from 'hooks/query';
@@ -23,7 +24,7 @@ function UserActivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   const { mutateAsync: userActivateMutate } = useActivateUser();
 
@@ -31,9 +32,7 @@ function UserActivateAlert({
     userActivateMutate(userId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_user_has_been_activated_successfully',
-          }),
+          message: intl.get('the_user_has_been_activated_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Users/UserDeleteAlert.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import { useDeleteUser } from 'hooks/query';
 import { AppToaster } from 'components';
@@ -24,7 +25,7 @@ function UserDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteUserMutate, isLoading } = useDeleteUser();
 
   const handleCancelUserDelete = () => {
@@ -35,9 +36,7 @@ function UserDeleteAlert({
     deleteUserMutate(userId)
       .then((response) => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_user_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_user_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Users/UserInactivateAlert.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 { Alert, Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { useInactivateUser } from 'hooks/query';
@@ -23,7 +24,7 @@ function UserInactivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   const { mutateAsync: userInactivateMutate } = useInactivateUser();
 
@@ -31,9 +32,7 @@ function UserInactivateAlert({
     userInactivateMutate(userId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_user_has_been_inactivated_successfully',
-          }),
+          message: intl.get('the_user_has_been_inactivated_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Vendors/VendorDeleteAlert.js

@@ -1,10 +1,8 @@
 import React, { useCallback } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Vendors/utils';
 import { useDeleteVendor } from 'hooks/query';
@@ -27,7 +25,7 @@ function VendorDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteVendorMutate, isLoading } = useDeleteVendor();
 
   // Handle cancel delete the vendor.
@@ -40,9 +38,7 @@ function VendorDeleteAlert({
     deleteVendorMutate(vendorId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_vendor_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_vendor_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })
@@ -58,7 +54,7 @@ function VendorDeleteAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [deleteVendorMutate, name, closeAlert, vendorId, formatMessage]);
+  }, [deleteVendorMutate, name, closeAlert, vendorId]);
 
   return (
     <Alert

client/src/containers/Authentication/AuthInsider.js

@@ -11,7 +11,6 @@ export default function AuthInsider({
 }) {
   return (
     <div class="authentication-insider__content">
-      
       <div class="authentication-insider__form">
         { children }
       </div>

client/src/containers/Authentication/InviteAcceptForm.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { Intent, Position } from '@blueprintjs/core';
 import { Formik } from 'formik';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { isEmpty } from 'lodash';
 
 import { useInviteAcceptContext } from './InviteAcceptProvider';
@@ -12,7 +13,7 @@ import InviteAcceptFormContent from './InviteAcceptFormContent';
 
 export default function InviteAcceptForm() {
   const history = useHistory();
-  const { formatMessage } = useIntl();
+  
 
   // Invite accept context.
   const {
@@ -53,7 +54,7 @@ export default function InviteAcceptForm() {
         }) => {
           if (errors.find((e) => e.type === 'INVITE.TOKEN.NOT.FOUND')) {
             AppToaster.show({
-              message: formatMessage({ id: 'an_unexpected_error_occurred' }),
+              message: intl.get('an_unexpected_error_occurred'),
               intent: Intent.DANGER,
               position: Position.BOTTOM,
             });

client/src/containers/Authentication/InviteAcceptFormContent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
 import { Form, ErrorMessage, FastField, useFormikContext } from 'formik';
 import { Link } from 'react-router-dom';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { inputIntent } from 'utils';
 import { Col, Row } from 'components';
 import { useInviteAcceptContext } from './InviteAcceptProvider';

client/src/containers/Authentication/Login.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Formik } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import Toaster from 'components/AppToaster';
 import AuthInsider from 'containers/Authentication/AuthInsider';

client/src/containers/Authentication/LoginForm.js

@@ -7,7 +7,7 @@ import {
   Checkbox,
 } from '@blueprintjs/core';
 import { Form, ErrorMessage, Field } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { T } from 'components';
 import { inputIntent } from 'utils';
 import { PasswordRevealer } from './components';
 

client/src/containers/Authentication/Register.js

@@ -4,8 +4,9 @@ import { Link, useHistory } from 'react-router-dom';
 import {
   Intent,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+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';
@@ -17,7 +18,6 @@ import { RegisterSchema, transformRegisterErrorsToForm } from './utils';
  * Register form.
  */
 export default function RegisterUserForm() {
-  const { formatMessage } = useIntl();
   const history = useHistory();
 
   const { mutateAsync: authLoginMutate }  = useAuthLogin();
@@ -48,7 +48,7 @@ export default function RegisterUserForm() {
           })
           .catch(({ response: { data: { errors } } }) => {
             AppToaster.show({
-              message: formatMessage({ id: 'something_wentwrong' }),
+              message: intl.get('something_wentwrong'),
               intent: Intent.SUCCESS,
             });
           });

client/src/containers/Authentication/RegisterForm.js

@@ -7,7 +7,7 @@ import {
   Spinner,
 } from '@blueprintjs/core';
 import { ErrorMessage, Field, Form } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Link } from 'react-router-dom';
 import { Row, Col, If } from 'components';
 import { PasswordRevealer } from './components';

client/src/containers/Authentication/ResetPassword.js

@@ -5,7 +5,8 @@ import {
   Position,
 } from '@blueprintjs/core';
 import { Link, useParams, useHistory } from 'react-router-dom';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import { useAuthResetPassword } from 'hooks/query';
 
@@ -18,7 +19,7 @@ import { ResetPasswordSchema } from './utils';
  * Reset password page.
  */
 export default function ResetPassword() {
-  const { formatMessage } = useIntl();
+  
   const { token } = useParams();
   const history = useHistory();
 
@@ -39,7 +40,7 @@ export default function ResetPassword() {
     authResetPasswordMutate([token, values])
       .then((response) => {
         AppToaster.show({
-          message: formatMessage('password_successfully_updated'),
+          message: intl.get('password_successfully_updated'),
           intent: Intent.DANGER,
           position: Position.BOTTOM,
         });
@@ -49,7 +50,7 @@ export default function ResetPassword() {
       .catch(({ response: { data: { errors } } }) => {
         if (errors.find((e) => e.type === 'TOKEN_INVALID')) {
           AppToaster.show({
-            message: formatMessage({ id: 'an_unexpected_error_occurred' }),
+            message: intl.get('an_unexpected_error_occurred'),
             intent: Intent.DANGER,
             position: Position.BOTTOM,
           });

client/src/containers/Authentication/ResetPasswordForm.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
 import { Form, ErrorMessage, FastField } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { inputIntent } from 'utils';
 
 /**

client/src/containers/Authentication/SendResetPassword.js

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
 import { Formik } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
 
+import { FormattedMessage as T } from 'components';
 import { useAuthSendResetPassword } from 'hooks/query';
 import Toaster from 'components/AppToaster';
 import SendResetPasswordForm from './SendResetPasswordForm';
@@ -16,7 +17,6 @@ import AuthInsider from 'containers/Authentication/AuthInsider';
  * Send reset password page.
  */
 export default function SendResetPassword({ requestSendResetPassword }) {
-  const { formatMessage } = useIntl();
   const history = useHistory();
 
   const { mutateAsync: sendResetPasswordMutate } = useAuthSendResetPassword();
@@ -34,9 +34,7 @@ export default function SendResetPassword({ requestSendResetPassword }) {
     sendResetPasswordMutate({ email: values.crediential })
       .then((response) => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'check_your_email_for_a_link_to_reset',
-          }),
+          message: intl.get('check_your_email_for_a_link_to_reset'),
           intent: Intent.SUCCESS,
         });
         history.push('/auth/login');

client/src/containers/Authentication/SendResetPasswordForm.js

@@ -6,7 +6,7 @@ import {
   FormGroup,
 } from '@blueprintjs/core';
 import { Form, ErrorMessage, FastField } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { inputIntent } from 'utils';
 
 /**

client/src/containers/Authentication/components.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import ContentLoader from 'react-content-loader';
 import { If, Icon } from 'components';
 import { saveInvoke } from 'utils';

client/src/containers/Authentication/utils.js

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { Intent } from '@blueprintjs/core';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 export const LOGIN_ERRORS = {
   INVALID_DETAILS: 'INVALID_DETAILS',
@@ -13,48 +13,47 @@ const REGISTER_ERRORS = {
   EMAIL_EXISTS: 'EMAIL.EXISTS',
 };
 
-
 export const LoginSchema = Yup.object().shape({
   crediential: Yup.string()
     .required()
     .email()
-    .label(formatMessage({ id: 'email' })),
+    .label(intl.get('email')),
   password: Yup.string()
     .required()
     .min(4)
-    .label(formatMessage({ id: 'password' })),
+    .label(intl.get('password')),
 });
 
 export const RegisterSchema = Yup.object().shape({
   first_name: Yup.string()
     .required()
-    .label(formatMessage({ id: 'first_name_' })),
+    .label(intl.get('first_name_')),
   last_name: Yup.string()
     .required()
-    .label(formatMessage({ id: 'last_name_' })),
+    .label(intl.get('last_name_')),
   email: Yup.string()
     .email()
     .required()
-    .label(formatMessage({ id: 'email' })),
+    .label(intl.get('email')),
   phone_number: Yup.string()
     .matches()
     .required()
-    .label(formatMessage({ id: 'phone_number_' })),
+    .label(intl.get('phone_number_')),
   password: Yup.string()
     .min(4)
     .required()
-    .label(formatMessage({ id: 'password' })),
+    .label(intl.get('password')),
 });
 
 export const ResetPasswordSchema = Yup.object().shape({
   password: Yup.string()
     .min(4)
     .required()
-    .label(formatMessage({ id: 'password' })),
+    .label(intl.get('password')),
   confirm_password: Yup.string()
     .oneOf([Yup.ref('password'), null])
     .required()
-    .label(formatMessage({ id: 'confirm_password' })),
+    .label(intl.get('confirm_password')),
 });
 
 // Validation schema.
@@ -62,24 +61,24 @@ export const SendResetPasswordSchema = Yup.object().shape({
   crediential: Yup.string()
     .required()
     .email()
-    .label(formatMessage({ id: 'email' })),
+    .label(intl.get('email')),
 });
 
 export const InviteAcceptSchema = Yup.object().shape({
   first_name: Yup.string()
     .required()
-    .label(formatMessage({ id: 'first_name_' })),
+    .label(intl.get('first_name_')),
   last_name: Yup.string()
     .required()
-    .label(formatMessage({ id: 'last_name_' })),
+    .label(intl.get('last_name_')),
   phone_number: Yup.string()
     .matches()
     .required()
-    .label(formatMessage({ id: 'phone_number' })),
+    .label(intl.get('phone_number')),
   password: Yup.string()
     .min(4)
     .required()
-    .label(formatMessage({ id: 'password' })),
+    .label(intl.get('password')),
 });
 
 export const transformSendResetPassErrorsToToasts = (errors) => {
@@ -87,9 +86,7 @@ export const transformSendResetPassErrorsToToasts = (errors) => {
 
   if (errors.find((e) => e.type === 'EMAIL.NOT.REGISTERED')) {
     toastBuilders.push({
-      message: formatMessage({
-        id: 'we_couldn_t_find_your_account_with_that_email',
-      }),
+      message: intl.get('we_couldn_t_find_your_account_with_that_email'),
       intent: Intent.DANGER,
     });
   }
@@ -101,17 +98,13 @@ export const transformLoginErrorsToToasts = (errors) => {
 
   if (errors.find((e) => e.type === LOGIN_ERRORS.INVALID_DETAILS)) {
     toastBuilders.push({
-      message: formatMessage({
-        id: 'email_and_password_entered_did_not_match',
-      }),
+      message: intl.get('email_and_password_entered_did_not_match'),
       intent: Intent.DANGER,
     });
   }
   if (errors.find((e) => e.type === LOGIN_ERRORS.USER_INACTIVE)) {
     toastBuilders.push({
-      message: formatMessage({
-        id: 'the_user_has_been_suspended_from_admin',
-      }),
+      message: intl.get('the_user_has_been_suspended_from_admin'),
       intent: Intent.DANGER,
     });
   }
@@ -119,9 +112,7 @@ export const transformLoginErrorsToToasts = (errors) => {
     errors.find((e) => e.type === LOGIN_ERRORS.LOGIN_TO_MANY_ATTEMPTS)
   ) {
     toastBuilders.push({
-      message: formatMessage({
-        id: 'your_account_has_been_locked',
-      }),
+      message: intl.get('your_account_has_been_locked'),
       intent: Intent.DANGER,
     });
   }
@@ -132,14 +123,10 @@ export const transformRegisterErrorsToForm = (errors) => {
   const formErrors = {};
 
   if (errors.some((e) => e.type === REGISTER_ERRORS.PHONE_NUMBER_EXISTS)) {
-    formErrors.phone_number = formatMessage({
-      id: 'the_phone_number_already_used_in_another_account',
-    });
+    formErrors.phone_number = intl.get('the_phone_number_already_used_in_another_account');
   }
   if (errors.some((e) => e.type === REGISTER_ERRORS.EMAIL_EXISTS)) {
-    formErrors.email = formatMessage({
-      id: 'the_email_already_used_in_another_account',
-    });
+    formErrors.email = intl.get('the_email_already_used_in_another_account');
   }
   return formErrors;
 }

client/src/containers/Customers/CustomerForm/CustomerAddressTabs.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
 import { Row, Col } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField, ErrorMessage } from 'formik';
 import { inputIntent } from 'utils';
 

client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js

@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from 'react';
 import Dragzone from 'components/Dragzone';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 function CustomerAttachmentTabs() {
   return (

client/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js

@@ -11,7 +11,7 @@ import {
   Row,
   Col,
 } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import { useCustomerFormContext } from './CustomerFormProvider';
 

client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js

@@ -9,7 +9,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';

client/src/containers/Customers/CustomerForm/CustomerForm.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
@@ -75,7 +75,7 @@ function CustomerForm({
 
   // const isNewMode = !customerId;
   const history = useHistory();
-  const { formatMessage } = useIntl();
+  
 
   /**
    * Initial values in create and edit mode.
@@ -98,11 +98,11 @@ function CustomerForm({
 
     const onSuccess = () => {
       AppToaster.show({
-        message: formatMessage({
-          id: isNewMode
+        message: intl.get(
+          isNewMode
             ? 'the_customer_has_been_created_successfully'
             : 'the_item_customer_has_been_edited_successfully',
-        }),
+        ),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);

client/src/containers/Customers/CustomerForm/CustomerForm.schema.js

@@ -1,11 +1,11 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
   customer_type: Yup.string()
     .required()
     .trim()
-    .label(formatMessage({ id: 'customer_type_' })),
+    .label(intl.get('customer_type_')),
   salutation: Yup.string().trim(),
   first_name: Yup.string().trim(),
   last_name: Yup.string().trim(),
@@ -13,7 +13,7 @@ const Schema = Yup.object().shape({
   display_name: Yup.string()
     .trim()
     .required()
-    .label(formatMessage({ id: 'display_name_' })),
+    .label(intl.get('display_name_')),
 
   email: Yup.string().email().nullable(),
   work_phone: Yup.number(),

client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { inputIntent } from 'utils';
 
 export default function CustomerFormAfterPrimarySection({}) {
-  const { formatMessage } = useIntl();
+  
   return (
     <div class="customer-form__after-primary-section-content">
       {/*------------ Customer email -----------*/}
@@ -34,7 +35,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={formatMessage({ id: 'work' })}
+                placeholder={intl.get('work')}
                 {...field}
               />
             )}
@@ -44,7 +45,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={formatMessage({id:'Mobile'})}
+                placeholder={intl.get('Mobile')}
                 {...field}
               />
             )}

client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js

@@ -2,7 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import {
   Hint,
@@ -20,7 +21,7 @@ import { useAutofocus } from 'hooks';
  */
 export default function CustomerFormPrimarySection({}) {
   const firstNameFieldRef = useAutofocus();
-  const { formatMessage } = useIntl();
+  
   
   return (
     <div className={'customer-form__primary-section-content'}>
@@ -55,7 +56,7 @@ export default function CustomerFormPrimarySection({}) {
           <FastField name={'first_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={formatMessage({ id: 'first_name' })}
+                placeholder={intl.get('first_name')}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--first-name')}
                 inputRef={(ref) => (firstNameFieldRef.current = ref)}
@@ -67,7 +68,7 @@ export default function CustomerFormPrimarySection({}) {
           <FastField name={'last_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={formatMessage({ id: 'last_name' })}
+                placeholder={intl.get('last_name')}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--last-name')}
                 {...field}

client/src/containers/Customers/CustomerForm/CustomerNotePanel.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { inputIntent } from 'utils';
 
 export default function CustomerNotePanel({ errors, touched, getFieldProps }) {

client/src/containers/Customers/CustomerForm/CustomerTypeRadioField.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { FastField } from 'formik';
 
 import { handleStringChange, saveInvoke } from 'utils';
@@ -11,7 +12,7 @@ import { handleStringChange, saveInvoke } from 'utils';
  */
 export default function RadioCustomer(props) {
   const { onChange, ...rest } = props;
-  const { formatMessage } = useIntl();
+  
 
   return (
     <FastField name={'customer_type'}>
@@ -29,9 +30,9 @@ export default function RadioCustomer(props) {
             })}
             selectedValue={value}
           >
-            <Radio label={formatMessage({ id: 'business' })} value="business" />
+            <Radio label={intl.get('business')} value="business" />
             <Radio
-              label={formatMessage({ id: 'individual' })}
+              label={intl.get('individual')}
               value="individual"
             />
           </RadioGroup>

client/src/containers/Customers/CustomerForm/CustomersTabs.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 
 import CustomerAddressTabs from './CustomerAddressTabs';
 import CustomerAttachmentTabs from './CustomerAttachmentTabs';
@@ -8,7 +8,7 @@ import CustomerFinancialPanel from './CustomerFinancialPanel';
 import CustomerNotePanel from './CustomerNotePanel';
 
 export default function CustomersTabs() {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <div>
@@ -20,22 +20,22 @@ export default function CustomersTabs() {
       >
         <Tab
           id={'financial'}
-          title={formatMessage({ id: 'financial_details' })}
+          title={intl.get('financial_details')}
           panel={<CustomerFinancialPanel />}
         />
         <Tab
           id={'address'}
-          title={formatMessage({ id: 'address' })}
+          title={intl.get('address')}
           panel={<CustomerAddressTabs />}
         />
         <Tab
           id="notes"
-          title={formatMessage({ id: 'notes' })}
+          title={intl.get('notes')}
           panel={<CustomerNotePanel />}
         />
         <Tab
           id={'attachement'}
-          title={formatMessage({ id: 'attachement' })}
+          title={intl.get('attachement')}
           panel={<CustomerAttachmentTabs />}
         />
       </Tabs>

client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -9,7 +9,8 @@ import {
   Position,
   PopoverInteractionKind,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
@@ -41,7 +42,7 @@ function CustomerActionsBar({
   const history = useHistory();
   
   // React intl
-  const { formatMessage } = useIntl();
+  
 
   // Customers list context.
   const { customersViews } = useCustomersListContext();
@@ -85,7 +86,7 @@ function CustomerActionsBar({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={`${formatMessage({ id: 'filters_applied' })}`}
+            text={`${intl.get('filters_applied')}`}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>

client/src/containers/Customers/CustomersLanding/CustomersEmptyStatus.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { EmptyStatus } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function CustomersEmptyStatus() {
   const history = useHistory();

client/src/containers/Customers/CustomersLanding/components.js

@@ -11,7 +11,7 @@ import {
 import { Icon, Money } from 'components';
 import { safeCallback } from 'utils';
 import { firstLettersArgs } from 'utils';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 
 /**
  * Actions menu.
@@ -20,28 +20,28 @@ export function ActionsMenu({
   row: { original },
   payload: { onEdit, onDelete, onDuplicate },
 }) {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_customer' })}
+        text={intl.get('edit_customer')}
         onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
         icon={<Icon icon="duplicate-16" />}
-        text={formatMessage({ id: 'duplicate' })}
+        text={intl.get('duplicate')}
         onClick={safeCallback(onDuplicate, original)}
       />
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
-        text={formatMessage({ id: 'delete_customer' })}
+        text={intl.get('delete_customer')}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
       />
@@ -74,7 +74,7 @@ export function BalanceAccessor(row) {
  * Retrieve customers table columns.
  */
 export function useCustomersTableColumns() {
-  const { formatMessage } = useIntl();
+  
 
   return useMemo(
     () => [
@@ -89,33 +89,33 @@ export function useCustomersTableColumns() {
       },
       {
         id: 'display_name',
-        Header: formatMessage({ id: 'display_name' }),
+        Header: intl.get('display_name'),
         accessor: 'display_name',
         className: 'display_name',
         width: 150,
       },
       {
         id: 'company_name',
-        Header: formatMessage({ id: 'company_name' }),
+        Header: intl.get('company_name'),
         accessor: 'company_name',
         className: 'company_name',
         width: 150,
       },
       {
         id: 'work_phone',
-        Header: formatMessage({ id: 'work_phone' }),
+        Header: intl.get('work_phone'),
         accessor: PhoneNumberAccessor,
         className: 'phone_number',
         width: 100,
       },
       {
         id: 'balance',
-        Header: formatMessage({ id: 'receivable_balance' }),
+        Header: intl.get('receivable_balance'),
         accessor: BalanceAccessor,
         className: 'receivable_balance',
         width: 100,
       },
     ],
-    [formatMessage],
+    [],
   );
 }

client/src/containers/Customers/utils.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 export const transformErrors = (errors) => {
   if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'customer_has_sales_invoices',
-      }),
+      message: intl.get('customer_has_sales_invoices'),
       intent: Intent.DANGER,
     });
   }
@@ -16,18 +14,13 @@ export const transformErrors = (errors) => {
     errors.find((error) => error.type === 'SOME.CUSTOMERS.HAVE.SALES_INVOICES')
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'some_customers_have_sales_invoices',
-      }),
+      message: intl.get('some_customers_have_sales_invoices'),
       intent: Intent.DANGER,
     });
   }
   if (errors.find((error) => error.type === 'CUSTOMER_HAS_TRANSACTIONS')) {
     AppToaster.show({
-      message: formatMessage({
-        id:
-          'this_customer_cannot_be_deleted_as_it_is_associated_with_transactions',
-      }),
+      message: intl.get('this_customer_cannot_be_deleted_as_it_is_associated_with_transactions'),
       intent: Intent.DANGER,
     });
   }

client/src/containers/Dialogs/AccountDialog/AccountDialogForm.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { omit } from 'lodash';
 import { AppToaster } from 'components';
 
@@ -35,8 +35,6 @@ function AccountFormDialogContent({
   // #withDialogActions
   closeDialog,
 }) {
-  const { formatMessage } = useIntl();
-
   // Account form context.
   const {
     editAccountMutate,
@@ -48,7 +46,7 @@ function AccountFormDialogContent({
     parentAccountId,
     accountType,
     isNewMode,
-    dialogName
+    dialogName,
   } = useAccountDialogContext();
 
   // Form validation schema in create and edit mode.
@@ -68,15 +66,13 @@ function AccountFormDialogContent({
       closeDialog(dialogName);
 
       AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'service_has_been_created_successfully'
-              : 'service_has_been_edited_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'service_has_been_created_successfully'
+            : 'service_has_been_edited_successfully',
           {
             name: toastAccountName,
-            service: formatMessage({ id: 'account' }),
+            service: intl.get('account'),
           },
         ),
         intent: Intent.SUCCESS,
@@ -95,7 +91,9 @@ function AccountFormDialogContent({
       setSubmitting(false);
     };
     if (accountId) {
-      editAccountMutate([accountId, form]).then(handleSuccess).catch(handleError);
+      editAccountMutate([accountId, form])
+        .then(handleSuccess)
+        .catch(handleError);
     } else {
       createAccountMutate({ ...form })
         .then(handleSuccess)

client/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, FastField, Field, ErrorMessage, useFormikContext } from 'formik';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import {
   Button,
   Classes,

client/src/containers/Dialogs/AccountDialog/AccountForm.schema.js

@@ -1,5 +1,5 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
@@ -7,11 +7,11 @@ const Schema = Yup.object().shape({
     .required()
     .min(3)
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'account_name_' })),
+    .label(intl.get('account_name_')),
   code: Yup.string().nullable().min(3).max(6),
   account_type: Yup.string()
     .required()
-    .label(formatMessage({ id: 'account_type' })),
+    .label(intl.get('account_type')),
   description: Yup.string().min(3).max(DATATYPES_LENGTH.TEXT).nullable().trim(),
   parent_account_id: Yup.number().nullable(),
 });

client/src/containers/Dialogs/AccountDialog/index.js

@@ -1,5 +1,5 @@
 import React, { lazy } from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';

client/src/containers/Dialogs/AccountDialog/utils.js

@@ -1,12 +1,12 @@
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 export const transformApiErrors = (errors) => {
   const fields = {};
   if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
-    fields.code = formatMessage({ id: 'account_code_is_not_unique' });
+    fields.code = intl.get('account_code_is_not_unique');
   }
   if (errors.find((e) => e.type === 'ACCOUNT.NAME.NOT.UNIQUE')) {
-    fields.name = formatMessage({ id: 'account_name_is_already_used' });
+    fields.name = intl.get('account_name_is_already_used');
   }
   return fields;
 };

client/src/containers/Dialogs/BillNumberDialog/index.js

@@ -1,5 +1,5 @@
 import React, { lazy } from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';

client/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { Formik, Form, Field, ErrorMessage } from 'formik';
 import { inputIntent } from 'utils';
 import { ListSelect, FieldRequiredHint } from 'components';
 import { Button, FormGroup, Intent, Classes } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useHistory } from 'react-router-dom';
 import { useContactDuplicateFromContext } from './ContactDuplicateProvider';
 
@@ -25,7 +25,7 @@ function ContactDuplicateForm({
   const validationSchema = Yup.object().shape({
     contact_type: Yup.string()
       .required()
-      .label(formatMessage({ id: 'contact_type_' })),
+      .label(intl.get('contact_type_')),
   });
 
   const initialValues = {

client/src/containers/Dialogs/ContactDuplicateDialog/index.js

@@ -1,5 +1,5 @@
 import React, { lazy } from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';

client/src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.js

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { AppToaster } from 'components';
 import CurrencyFormContent from './CurrencyFormContent';
 
@@ -27,8 +28,6 @@ function CurrencyForm({
   // #withDialogActions
   closeDialog,
 }) {
-  const { formatMessage } = useIntl();
-
   const {
     createCurrencyMutate,
     editCurrencyMutate,
@@ -62,18 +61,22 @@ function CurrencyForm({
     // Handle the request success.
     const onSuccess = ({ response }) => {
       AppToaster.show({
-        message: formatMessage({
-          id: isEditMode
+        message: intl.get(
+          isEditMode
             ? 'the_currency_has_been_edited_successfully'
             : 'the_currency_has_been_created_successfully',
-        }),
+        ),
         intent: Intent.SUCCESS,
       });
       afterSubmit(response);
     };
     // Handle the response error.
-    const onError = ({ response: { data: { errors } } }) => {
-      if (errors.find(e => e.type === 'CURRENCY_CODE_EXISTS')) {
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      if (errors.find((e) => e.type === 'CURRENCY_CODE_EXISTS')) {
         AppToaster.show({
           message: 'The given currency code is already exists.',
           intent: Intent.DANGER,

client/src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.schema.js

@@ -1,15 +1,15 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
   currency_name: Yup.string()
     .required()
-    .label(formatMessage({ id: 'currency_name_' })),
+    .label(intl.get('currency_name_')),
   currency_code: Yup.string()
     .max(4)
     .required()
-    .label(formatMessage({ id: 'currency_code_' })),
+    .label(intl.get('currency_code_')),
   currency_sign: Yup.string().required(),
 });
 

client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Classes, FormGroup, InputGroup } from '@blueprintjs/core';
 import { FastField } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';