WIP: Arabic localization.|

2026-02-18 13:50:31 +00:00 · 2021-06-10 12:51:00 +02:00
parent 4fc7c37260
commit 1ea32884c2
465 changed files with 3299 additions and 2109 deletions
--- a/client/src/containers/Dialogs/AccountDialog/AccountDialogForm.js
+++ b/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)
--- a/client/src/containers/Dialogs/AccountDialog/AccountDialogFormContent.js
+++ b/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,
--- a/client/src/containers/Dialogs/AccountDialog/AccountForm.schema.js
+++ b/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(),
 });
--- a/client/src/containers/Dialogs/AccountDialog/index.js
+++ b/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';
--- a/client/src/containers/Dialogs/AccountDialog/utils.js
+++ b/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;
 };
--- a/client/src/containers/Dialogs/BillNumberDialog/index.js
+++ b/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';
--- a/client/src/containers/Dialogs/ContactDuplicateDialog/ContactDuplicateForm.js
+++ b/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 = {
--- a/client/src/containers/Dialogs/ContactDuplicateDialog/index.js
+++ b/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';
--- a/client/src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.js
+++ b/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,
--- a/client/src/containers/Dialogs/CurrencyFormDialog/CurrencyForm.schema.js
+++ b/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(),
 });

--- a/client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFields.js
+++ b/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';
--- a/client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFooter.js
+++ b/client/src/containers/Dialogs/CurrencyFormDialog/CurrencyFormFooter.js
@@ -3,7 +3,7 @@ import { useFormikContext } from 'formik';
 import { useCurrencyFormContext } from './CurrencyFormProvider';

 import { Button, Classes, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
--- a/client/src/containers/Dialogs/CurrencyFormDialog/index.js
+++ b/client/src/containers/Dialogs/CurrencyFormDialog/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';
--- a/client/src/containers/Dialogs/EstimateNumberDialog/index.js
+++ b/client/src/containers/Dialogs/EstimateNumberDialog/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 { saveInvoke, compose } from 'utils';
--- a/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.js
+++ b/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.js
@@ -2,7 +2,8 @@ import React, { useMemo } from 'react';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
 import moment from 'moment';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { AppToaster } from 'components';
 import {
  CreateExchangeRateFormSchema,
@@ -27,7 +28,6 @@ function ExchangeRateForm({
  // #withDialogActions
  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
  const {
    createExchangeRateMutate,
    editExchangeRateMutate,
@@ -54,9 +54,9 @@ function ExchangeRateForm({
      errors.find((error) => error.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
    ) {
      setErrors({
-        exchange_rate: formatMessage({
-          id: 'there_is_exchange_rate_in_this_date_with_the_same_currency',
-        }),
+        exchange_rate: intl.get(
+          'there_is_exchange_rate_in_this_date_with_the_same_currency',
+        ),
      });
    }
  };
@@ -71,11 +71,11 @@ function ExchangeRateForm({
    };
    const onSuccess = ({ response }) => {
      AppToaster.show({
-        message: formatMessage({
-          id: !isNewMode
+        message: intl.get(
+          !isNewMode
            ? 'the_exchange_rate_has_been_edited_successfully'
            : 'the_exchange_rate_has_been_created_successfully',
-        }),
+        ),
        intent: Intent.SUCCESS,
      });
      afterSubmit(response);
--- a/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.schema.js
+++ b/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateForm.schema.js
@@ -1,17 +1,17 @@
 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({
  exchange_rate: Yup.number()
    .required()
-    .label(formatMessage({ id: 'exchange_rate_' })),
+    .label(intl.get('exchange_rate_')),
  currency_code: Yup.string()
    .max(3)
-    .required(formatMessage({ id: 'currency_code_' })),
+    .required(intl.get('currency_code_')),
  date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'date' })),
+    .label(intl.get('date')),
 });

 export const CreateExchangeRateFormSchema = Schema;
--- a/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFields.js
+++ b/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFields.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Classes, FormGroup, InputGroup, Position } from '@blueprintjs/core';
 import { FastField } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import {
  momentFormatter,
  tansformDateValue,
--- a/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFooter.js
+++ b/client/src/containers/Dialogs/ExchangeRateFormDialog/ExchangeRateFormFooter.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { useFormikContext } from 'formik';

 import { Button, Classes, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useExchangeRateFromContext } from './ExchangeRateFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
--- a/client/src/containers/Dialogs/ExchangeRateFormDialog/index.js
+++ b/client/src/containers/Dialogs/ExchangeRateFormDialog/index.js
@@ -1,5 +1,6 @@
 import React, { lazy } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import {
  Dialog,
  DialogSuspense,
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/DecrementAdjustmentFields.js
@@ -3,7 +3,7 @@ import { Field, ErrorMessage, FastField } from 'formik';
 import { FormGroup, InputGroup } from '@blueprintjs/core';
 import { inputIntent } from 'utils';
 import { Row, Col, MoneyInputGroup } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useAutofocus } from 'hooks';
 import { decrementQuantity } from './utils';
 import { toSafeNumber } from 'utils';
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.js
@@ -4,7 +4,7 @@ import { FormGroup, InputGroup } from '@blueprintjs/core';
 import { useAutofocus } from 'hooks';
 import { Row, Col, MoneyInputGroup } from 'components';
 import { inputIntent, toSafeNumber } from 'utils';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { decrementQuantity, incrementQuantity } from './utils';

 export default function IncrementAdjustmentFields() {
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFloatingActions.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.js
@@ -3,7 +3,7 @@ import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
 import { omit, get } from 'lodash';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';

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

@@ -44,7 +44,7 @@ function InventoryAdjustmentForm({
    createInventoryAdjMutate,
  } = useInventoryAdjContext();

-  const { formatMessage } = useIntl();
+  

  // Initial form values.
  const initialValues = {
@@ -65,9 +65,7 @@ function InventoryAdjustmentForm({
        closeDialog(dialogName);

        AppToaster.show({
-          message: formatMessage({
-            id: 'the_make_adjustment_has_been_created_successfully',
-          }),
+          message: intl.get('the_make_adjustment_has_been_created_successfully'),
          intent: Intent.SUCCESS,
        });
      })
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentForm.schema.js
@@ -1,11 +1,11 @@
 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({
  date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'date' })),
+    .label(intl.get('date')),
  type: Yup.string().required(),
  adjustment_account_id: Yup.string().required(),
  item_id: Yup.number().required(),
@@ -13,10 +13,10 @@ const Schema = Yup.object().shape({
    .required()
    .min(3)
    .max(DATATYPES_LENGTH.TEXT)
-    .label(formatMessage({ id: 'reason' })),
+    .label(intl.get('reason')),
  quantity_on_hand: Yup.number()
    .required()
-    .label(formatMessage({ id: 'qty' })),
+    .label(intl.get('qty')),
  quantity: Yup.number().integer().min(1).required(),
  cost: Yup.number().when(['type'], {
    is: (type) => type === 'increment',
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.js
@@ -8,7 +8,8 @@ import {
  Position,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { DateInput } from '@blueprintjs/datetime';
 import { useAutofocus } from 'hooks';
 import { ListSelect, FieldRequiredHint, Col, Row } from 'components';
@@ -37,7 +38,7 @@ export default function InventoryAdjustmentFormDialogFields() {
  const { accounts } = useInventoryAdjContext();

  // Intl context.
-  const { formatMessage } = useIntl();
+  

  return (
    <div className={Classes.DIALOG_BODY}>
@@ -127,9 +128,7 @@ export default function InventoryAdjustmentFormDialogFields() {
                form.setFieldValue('adjustment_account_id', id)
              }
              inputProps={{
-                placeholder: formatMessage({
-                  id: 'select_adjustment_account',
-                }),
+                placeholder: intl.get('select_adjustment_account'),
              }}
            />
          </FormGroup>
--- a/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/index.js
+++ b/client/src/containers/Dialogs/InventoryAdjustmentFormDialog/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 'redux';
--- a/client/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js
+++ b/client/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.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({
  email: Yup.string()
    .email()
    .required()
-    .label(formatMessage({ id: 'email' })),
+    .label(intl.get('email')),
 });

 export const InviteUserFormSchema = Schema;
--- a/client/src/containers/Dialogs/InviteUserDialog/InviteUserForm.js
+++ b/client/src/containers/Dialogs/InviteUserDialog/InviteUserForm.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { pick, snakeCase } from 'lodash';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { AppToaster } from 'components';

 import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -19,7 +19,7 @@ function InviteUserForm({
  // #withDialogActions
  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
+  

  const {
    dialogName,
@@ -46,9 +46,7 @@ function InviteUserForm({
    };
    const onSuccess = ({ response }) => {
      AppToaster.show({
-        message: formatMessage({
-          id: 'teammate_invited_to_organization_account',
-        }),
+        message: intl.get('teammate_invited_to_organization_account'),
        intent: Intent.SUCCESS,
      });
      afterSubmit(response);
--- a/client/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
+++ b/client/src/containers/Dialogs/InviteUserDialog/InviteUserFormContent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormGroup, InputGroup, Intent, Button } from '@blueprintjs/core';
 import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
--- a/client/src/containers/Dialogs/InviteUserDialog/index.js
+++ b/client/src/containers/Dialogs/InviteUserDialog/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';
--- a/client/src/containers/Dialogs/InviteUserDialog/utils.js
+++ b/client/src/containers/Dialogs/InviteUserDialog/utils.js
@@ -1,13 +1,13 @@
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 export const transformApiErrors = (errors) => {
  const fields = {};

  if (errors.find((error) => error.type === 'EMAIL.ALREADY.INVITED')) {
-    fields.email = formatMessage({ id: 'email_is_already_used' });
+    fields.email = intl.get('email_is_already_used');
  }
  if (errors.find((error) => error.type === 'EMAIL.ALREADY.EXISTS')) {
-    fields.email = formatMessage({ id: 'email_is_already_used' });
+    fields.email = intl.get('email_is_already_used');
  }
  return fields;
 };
--- a/client/src/containers/Dialogs/InvoiceNumberDialog/index.js
+++ b/client/src/containers/Dialogs/InvoiceNumberDialog/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, saveInvoke } from 'utils';
--- a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';

@@ -30,7 +30,7 @@ function ItemCategoryForm({
  // #withDialogActions
  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
+  
  const {
    isNewMode,
    itemCategory,
@@ -53,7 +53,7 @@ function ItemCategoryForm({
  const transformErrors = (errors, { setErrors }) => {
    if (errors.find((error) => error.type === 'CATEGORY_NAME_EXISTS')) {
      setErrors({
-        name: formatMessage({ id: 'category_name_exists' }),
+        name: intl.get('category_name_exists'),
      });
    }
  };
@@ -70,11 +70,11 @@ function ItemCategoryForm({
    // Handle the response success.
    const onSuccess = ({ response }) => {
      AppToaster.show({
-        message: formatMessage({
-          id: isNewMode
+        message: intl.get(
+          isNewMode
            ? 'the_item_category_has_been_created_successfully'
            : 'the_item_category_has_been_edited_successfully',
-        }),
+        ),
        intent: Intent.SUCCESS,
      });
      afterSubmit(response);
--- a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Classes, FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { ErrorMessage, FastField } from 'formik';

 import { useAutofocus } from 'hooks';
--- a/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFooter.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFooter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Classes, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useFormikContext } from 'formik';

 import withDialogActions from 'containers/Dialog/withDialogActions';
--- a/client/src/containers/Dialogs/ItemCategoryDialog/index.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/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';
--- a/client/src/containers/Dialogs/ItemCategoryDialog/itemCategoryForm.schema.js
+++ b/client/src/containers/Dialogs/ItemCategoryDialog/itemCategoryForm.schema.js
@@ -1,12 +1,12 @@
 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({
  name: Yup.string()
    .required()
    .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'category_name_' })),
+    .label(intl.get('category_name_')),
  description: Yup.string().trim().max(DATATYPES_LENGTH.TEXT).nullable(),
 });

--- a/client/src/containers/Dialogs/JournalNumberDialog/index.js
+++ b/client/src/containers/Dialogs/JournalNumberDialog/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 { saveInvoke, compose } from 'utils';
--- a/client/src/containers/Dialogs/PaymentReceiveNumberDialog/index.js
+++ b/client/src/containers/Dialogs/PaymentReceiveNumberDialog/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 { saveInvoke, compose } from 'utils';
--- a/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js
+++ b/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherDialogContent.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Formik } from 'formik';

-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import * as Yup from 'yup';
 import { useHistory } from 'react-router-dom';
 import Toaster from 'components/AppToaster';
@@ -26,7 +26,7 @@ function PaymentViaLicenseDialogContent({
  // #withDialog
  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
+  
  const history = useHistory();

  // Payment via voucher
@@ -80,7 +80,7 @@ function PaymentViaLicenseDialogContent({
      .required()
      .min(10)
      .max(10)
-      .label(formatMessage({ id: 'license_code' })),
+      .label(intl.get('license_code')),
  });

  return (
--- a/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js
+++ b/client/src/containers/Dialogs/PaymentViaVoucherDialog/PaymentViaVoucherForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, FormGroup, InputGroup, Intent } from '@blueprintjs/core';
 import { Form, FastField, ErrorMessage, useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { compose } from 'redux';

 import { CLASSES } from 'common/classes';
--- a/client/src/containers/Dialogs/PaymentViaVoucherDialog/index.js
+++ b/client/src/containers/Dialogs/PaymentViaVoucherDialog/index.js
@@ -1,6 +1,6 @@
 import React, { lazy } from 'react';
 import { Dialog, DialogSuspense } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import withDialogRedux from 'components/DialogReduxConnect';

--- a/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMade.schema.js
+++ b/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMade.schema.js
@@ -1,21 +1,21 @@
 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({
  vendor_id: Yup.string()
-    .label(formatMessage({ id: 'vendor_name_' }))
+    .label(intl.get('vendor_name_'))
    .required(),
  payment_date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'payment_date_' })),
+    .label(intl.get('payment_date_')),
  payment_number: Yup.string()
    .nullable()
    .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'payment_no_' })),
+    .label(intl.get('payment_no_')),
  payment_account_id: Yup.number()
    .required()
-    .label(formatMessage({ id: 'payment_account_' })),
+    .label(intl.get('payment_account_')),
  reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
  // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
  entries: Yup.array().of(
--- a/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFloatingActions.js
+++ b/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFloatingActions.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
--- a/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.js
+++ b/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { pick } from 'lodash';

 import { AppToaster } from 'components';
@@ -20,7 +21,7 @@ function QuickPaymentMadeForm({
  // #withDialogActions
  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
+  
  const {
    bill,
    dialogName,
@@ -51,9 +52,7 @@ function QuickPaymentMadeForm({
    // Handle request response success.
    const onSuccess = () => {
      AppToaster.show({
-        message: formatMessage({
-          id: 'the_payment_made_has_been_created_successfully',
-        }),
+        message: intl.get('the_payment_made_has_been_created_successfully'),
        intent: Intent.SUCCESS,
      });
      closeDialog(dialogName);
--- a/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
+++ b/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
@@ -1,6 +1,7 @@
 import React from 'react';
 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 {
  Classes,
  FormGroup,
@@ -36,7 +37,7 @@ export default function QuickPaymentMadeFormFields() {
  const { accounts } = useQuickPaymentMadeContext();

  // Intl context.
-  const { formatMessage } = useIntl();
+  
  const paymentMadeFieldRef = useAutofocus();

  return (
@@ -161,9 +162,7 @@ export default function QuickPaymentMadeFormFields() {
                    form.setFieldValue('payment_account_id', id)
                  }
                  inputProps={{
-                    placeholder: formatMessage({
-                      id: 'select_account',
-                    }),
+                    placeholder: intl.get('select_account'),
                  }}
                  filterByTypes={[
                    ACCOUNT_TYPE.CASH,
--- a/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/index.js
+++ b/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/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 'redux';
--- a/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js
+++ b/client/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.js
@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 // Default initial values of payment made.
 export const defaultPaymentMade = {
@@ -18,15 +18,13 @@ export const transformErrors = (errors, { setFieldError }) => {
  if (getError('PAYMENT.NUMBER.NOT.UNIQUE')) {
    setFieldError(
      'payment_number',
-      formatMessage({ id: 'payment_number_is_not_unique' }),
+      intl.get('payment_number_is_not_unique'),
    );
  }
  if (getError('INVALID_PAYMENT_AMOUNT')) {
    setFieldError(
      'payment_amount',
-      formatMessage({
-        id: 'the_payment_amount_bigger_than_invoice_due_amount',
-      }),
+      intl.get('the_payment_amount_bigger_than_invoice_due_amount'),
    );
  }
 };
--- a/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceive.schema.js
+++ b/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceive.schema.js
@@ -1,22 +1,22 @@
 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({
  customer_id: Yup.string()
-    .label(formatMessage({ id: 'customer_name_' }))
+    .label(intl.get('customer_name_'))
    .required(),
  payment_receive_no: Yup.string()
    .required()
    .nullable()
    .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'payment_receive_no_' })),
+    .label(intl.get('payment_receive_no_')),
  payment_date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'payment_date_' })),
+    .label(intl.get('payment_date_')),
  deposit_account_id: Yup.number()
    .required()
-    .label(formatMessage({ id: 'deposit_account_' })),
+    .label(intl.get('deposit_account_')),
  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
  // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
  entries: Yup.array().of(
--- a/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFloatingActions.js
+++ b/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFloatingActions.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Intent, Button, Classes } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider';
 import withDialogActions from 'containers/Dialog/withDialogActions';
--- a/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js
+++ b/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { pick, defaultTo, omit } from 'lodash';

 import { AppToaster } from 'components';
@@ -27,7 +27,7 @@ function QuickPaymentReceiveForm({
  paymentReceiveNextNumber,
  preferredDepositAccount
 }) {
-  const { formatMessage } = useIntl();
+  
  const {
    dialogName,
    invoice,
@@ -71,9 +71,7 @@ function QuickPaymentReceiveForm({
    // Handle request response success.
    const onSaved = (response) => {
      AppToaster.show({
-        message: formatMessage({
-          id: 'the_payment_receive_transaction_has_been_created',
-        }),
+        message: intl.get('the_payment_receive_transaction_has_been_created'),
        intent: Intent.SUCCESS,
      });
      closeDialog(dialogName);
--- a/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js
+++ b/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.js
@@ -1,6 +1,7 @@
 import React from 'react';
 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 { useAutofocus } from 'hooks';
 import {
  Classes,
@@ -40,7 +41,7 @@ function QuickPaymentReceiveFormFields({
  const { accounts } = useQuickPaymentReceiveContext();

  // Intl context.
-  const { formatMessage } = useIntl();
+  
  const paymentReceiveFieldRef = useAutofocus();

  return (
@@ -168,9 +169,7 @@ function QuickPaymentReceiveFormFields({
                    form.setFieldValue('deposit_account_id', id)
                  }
                  inputProps={{
-                    placeholder: formatMessage({
-                      id: 'select_account',
-                    }),
+                    placeholder: intl.get('select_account'),
                  }}
                  filterByTypes={[
                    ACCOUNT_TYPE.CASH,
--- a/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/index.js
+++ b/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/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 'redux';
--- a/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.js
+++ b/client/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.js
@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 export const defaultInitialValues = {
  customer_id: '',
@@ -17,21 +17,19 @@ export const transformErrors = (errors, { setFieldError }) => {
  if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
    setFieldError(
      'payment_receive_no',
-      formatMessage({ id: 'payment_number_is_not_unique' }),
+      intl.get('payment_number_is_not_unique'),
    );
  }
  if (getError('PAYMENT_RECEIVE_NO_REQUIRED')) {
    setFieldError(
      'payment_receive_no',
-      formatMessage({ id: 'payment_receive_number_required' }),
+      intl.get('payment_receive_number_required'),
    );
  }
  if (getError('INVALID_PAYMENT_AMOUNT')) {
    setFieldError(
      'payment_amount',
-      formatMessage({
-        id: 'the_payment_amount_bigger_than_invoice_due_amount',
-      }),
+      intl.get('the_payment_amount_bigger_than_invoice_due_amount'),
    );
  }
 };
--- a/client/src/containers/Dialogs/ReceiptNumberDialog/index.js
+++ b/client/src/containers/Dialogs/ReceiptNumberDialog/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, saveInvoke } from 'utils';
--- a/client/src/containers/Dialogs/UserFormDialog/UserForm.js
+++ b/client/src/containers/Dialogs/UserFormDialog/UserForm.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { pick, snakeCase } from 'lodash';
 import { AppToaster } from 'components';

@@ -20,7 +20,7 @@ function UserForm({
  // #withDialogActions
  closeDialog,
 }) {
-  const { formatMessage } = useIntl();
+  

  const {
    dialogName,
@@ -48,9 +48,7 @@ function UserForm({

    const onSuccess = ({ response }) => {
      AppToaster.show({
-        message: formatMessage({
-          id: 'teammate_invited_to_organization_account',
-        }),
+        message: intl.get('teammate_invited_to_organization_account'),
        intent: Intent.SUCCESS,
      });
      afterSubmit(response);
--- a/client/src/containers/Dialogs/UserFormDialog/UserForm.schema.js
+++ b/client/src/containers/Dialogs/UserFormDialog/UserForm.schema.js
@@ -1,21 +1,21 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 const Schema = Yup.object().shape({
  email: Yup.string()
    .email()
    .required()
-    .label(formatMessage({ id: 'email' })),
+    .label(intl.get('email')),
  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_')),
 });

 export const UserFormSchema = Schema;
--- a/client/src/containers/Dialogs/UserFormDialog/UserFormContent.js
+++ b/client/src/containers/Dialogs/UserFormDialog/UserFormContent.js
@@ -7,7 +7,7 @@ import {
  Button,
 } from '@blueprintjs/core';
 import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { inputIntent } from 'utils';
--- a/client/src/containers/Dialogs/UserFormDialog/index.js
+++ b/client/src/containers/Dialogs/UserFormDialog/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';
--- a/client/src/containers/Dialogs/keyboardShortcutsDialog/KeyboardShortcutsFooter.js
+++ b/client/src/containers/Dialogs/keyboardShortcutsDialog/KeyboardShortcutsFooter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
--- a/client/src/containers/Dialogs/keyboardShortcutsDialog/index.js
+++ b/client/src/containers/Dialogs/keyboardShortcutsDialog/index.js
@@ -1,5 +1,6 @@
 import React, { lazy } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Dialog, DialogSuspense } from 'components';
 import withDialogRedux from 'components/DialogReduxConnect';
 import { compose } from 'utils';