WIP: Arabic localization.|

client/src/containers/Expenses/ExpenseForm/ExpenseFloatingActions.js

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

client/src/containers/Expenses/ExpenseForm/ExpenseForm.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { defaultTo, sumBy, isEmpty } from 'lodash';
 import { Formik, Form } from 'formik';
 import classNames from 'classnames';
@@ -44,7 +44,6 @@ function ExpenseForm({
   } = useExpenseFormContext();
 
   const isNewMode = !expenseId;
-  const { formatMessage } = useIntl();
 
   // History context.
   const history = useHistory();
@@ -73,9 +72,7 @@ function ExpenseForm({
 
     if (totalAmount <= 0) {
       AppToaster.show({
-        message: formatMessage({
-          id: 'amount_cannot_be_zero_or_empty',
-        }),
+        message: intl.get('amount_cannot_be_zero_or_empty'),
         intent: Intent.DANGER,
       });
       return;
@@ -93,12 +90,10 @@ function ExpenseForm({
     // Handle request success.
     const handleSuccess = (response) => {
       AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'the_expense_has_been_created_successfully'
-              : 'the_expense_has_been_edited_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'the_expense_has_been_created_successfully'
+            : 'the_expense_has_been_edited_successfully',
           { number: values.payment_account_id },
         ),
         intent: Intent.SUCCESS,

client/src/containers/Expenses/ExpenseForm/ExpenseForm.schema.js

@@ -1,27 +1,27 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 import { isBlank } from 'utils';
 
 const Schema = Yup.object().shape({
-  beneficiary: Yup.string().label(formatMessage({ id: 'beneficiary' })),
+  beneficiary: Yup.string().label(intl.get('beneficiary')),
   payment_account_id: Yup.number()
     .required()
-    .label(formatMessage({ id: 'payment_account_' })),
+    .label(intl.get('payment_account_')),
   payment_date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'payment_date_' })),
+    .label(intl.get('payment_date_')),
   reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
   currency_code: Yup.string()
     .nullable()
     .max(3)
-    .label(formatMessage({ id: 'currency_code' })),
+    .label(intl.get('currency_code')),
   description: Yup.string()
     .trim()
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
     .nullable()
-    .label(formatMessage({ id: 'description' })),
+    .label(intl.get('description')),
   publish: Yup.boolean(),
   categories: Yup.array().of(
     Yup.object().shape({

client/src/containers/Expenses/ExpenseForm/ExpenseFormFooter.js

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

client/src/containers/Expenses/ExpenseForm/ExpenseFormHeader.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import { CLASSES } from 'common/classes';
 

client/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js

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

client/src/containers/Expenses/ExpenseForm/components.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button, Tooltip, Intent, Position } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Icon, Hint } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import {
   InputGroupCell,
   MoneyFieldCell,
@@ -61,7 +61,7 @@ function AmountFooterCell({ payload: { currencyCode }, rows }) {
  * Expense amount header cell.
  */
 export function ExpenseAmountHeaderCell({ payload: { currencyCode } }) {
-  return formatMessage({ id: 'amount_currency' }, { currency: currencyCode });
+  return intl.get('amount_currency', { currency: currencyCode });
 }
 
 /**
@@ -107,7 +107,7 @@ export function useExpenseFormTableColumns() {
         className: 'amount',
       },
       {
-        Header: formatMessage({ id: 'description' }),
+        Header: intl.get('description'),
         accessor: 'description',
         Cell: InputGroupCell,
         disableSortBy: true,
@@ -124,6 +124,6 @@ export function useExpenseFormTableColumns() {
         width: 45,
       },
     ],
-    [formatMessage],
+    [],
   );
 }

client/src/containers/Expenses/ExpenseForm/utils.js

@@ -1,6 +1,6 @@
 import { AppToaster } from 'components';
 import moment from 'moment';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { transformToForm, repeatValue } from 'utils';
 
 const ERROR = {
@@ -14,9 +14,7 @@ export const transformErrors = (errors, { setErrors }) => {
   if (hasError(ERROR.EXPENSE_ALREADY_PUBLISHED)) {
     setErrors(
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_expense_is_already_published',
-        }),
+        message: intl.get('the_expense_is_already_published'),
       }),
     );
   }