WIP: Arabic localization.|

client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsActionsBar.js

@@ -8,7 +8,7 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
 import Icon from 'components/Icon';

client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsHeader.js

@@ -3,7 +3,8 @@ import * as Yup from 'yup';
 import moment from 'moment';
 import { Formik, Form } from 'formik';
 import { Tabs, Tab, Button, Intent } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import VendorsTransactionsHeaderGeneralPanel from './VendorsTransactionsHeaderGeneralPanel';
@@ -28,7 +29,7 @@ function VendorsTransactionsHeader({
   //#withVendorsTransactionsActions
   toggleVendorsTransactionsFilterDrawer: toggleFilterDrawer,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   // Filter form initial values.
   const initialValues = {
@@ -41,11 +42,11 @@ function VendorsTransactionsHeader({
   const validationSchema = Yup.object().shape({
     fromDate: Yup.date()
       .required()
-      .label(formatMessage({ id: 'fromDate' })),
+      .label(intl.get('fromDate')),
     toDate: Yup.date()
       .min(Yup.ref('fromDate'))
       .required()
-      .label(formatMessage({ id: 'toDate' })),
+      .label(intl.get('toDate')),
   });
 
   // Handle form submit.

client/src/containers/FinancialStatements/VendorsTransactions/VendorsTransactionsTable.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 
 import FinancialSheet from 'components/FinancialSheet';
@@ -17,7 +17,7 @@ export default function VendorsTransactionsTable({
   // #ownProps
   companyName,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   const {
     vendorsTransactions: { tableRows },
@@ -39,7 +39,7 @@ export default function VendorsTransactionsTable({
     <FinancialSheet
       name="vendor-transactions"
       companyName={companyName}
-      sheetType={formatMessage({ id: 'vendors_transactions' })}
+      sheetType={intl.get('vendors_transactions')}
       loading={isVendorsTransactionsLoading}
       fromDate={query.from_date}
       toDate={query.to_date}

client/src/containers/FinancialStatements/VendorsTransactions/components.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { If } from 'components';
 import { useVendorsTransactionsContext } from './VendorsTransactionsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -17,7 +17,7 @@ export const useVendorsTransactionsColumns = () => {
   return React.useMemo(
     () => [
       {
-        Header: formatMessage({ id: 'vendor_name' }),
+        Header: intl.get('vendor_name'),
         accessor: ({ cells }) => {
           return (
             <span
@@ -33,26 +33,26 @@ export const useVendorsTransactionsColumns = () => {
         // width: 240,
       },
       {
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
         accessor: 'cells[1].value',
         className: 'name',
         textOverview: true,
         width: 170,
       },
       {
-        Header: formatMessage({ id: 'reference_type' }),
+        Header: intl.get('reference_type'),
         accessor: 'cells[2].value',
         textOverview: true,
         width: 120,
       },
       {
-        Header: formatMessage({ id: 'transaction_type' }),
+        Header: intl.get('transaction_type'),
         accessor: 'cells[3].value',
         textOverview: true,
         width: 120,
       },
       {
-        Header: formatMessage({ id: 'credit' }),
+        Header: intl.get('credit'),
         accessor: 'cells[4].value',
         className: 'credit',
         textOverview: true,
@@ -62,7 +62,7 @@ export const useVendorsTransactionsColumns = () => {
         }),
       },
       {
-        Header: formatMessage({ id: 'debit' }),
+        Header: intl.get('debit'),
         accessor: 'cells[5].value',
         className: 'debit',
         textOverview: true,
@@ -72,7 +72,7 @@ export const useVendorsTransactionsColumns = () => {
         }),
       },
       {
-        Header: formatMessage({ id: 'running_balance' }),
+        Header: intl.get('running_balance'),
         accessor: 'cells[6].value',
         className: 'running_balance',
         textOverview: true,
@@ -82,7 +82,7 @@ export const useVendorsTransactionsColumns = () => {
         }),
       },
     ],
-    [tableRows, formatMessage],
+    [tableRows],
   );
 };