WIP: Arabic localization.|

client/src/containers/Preferences/Accountant/AccountantForm.js

@@ -10,7 +10,8 @@ import {
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import { AccountsSelectList, FieldRequiredHint } from 'components';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { handleStringChange, inputIntent } from 'utils';
 
 import { useAccountantFormContext } from './AccountantFormProvider';
@@ -21,7 +22,7 @@ import { useAccountantFormContext } from './AccountantFormProvider';
 export default function AccountantForm() {
   const history = useHistory();
 
-  const { formatMessage } = useIntl();
+  
 
   const { isSubmitting } = useFormikContext();
 
@@ -102,8 +103,8 @@ export default function AccountantForm() {
                 setFieldValue('accounting_basis', _value);
               })}
             >
-              <Radio label={formatMessage({ id: 'Cash' })} value="cash" />
-              <Radio label={formatMessage({ id: 'accrual' })} value="accrual" />
+              <Radio label={intl.get('Cash')} value="cash" />
+              <Radio label={intl.get('accrual')} value="accrual" />
             </RadioGroup>
           </FormGroup>
         )}

client/src/containers/Preferences/Accountant/AccountantFormPage.js

@@ -4,7 +4,7 @@ import { pick } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 
 import { AppToaster } from 'components';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
@@ -28,7 +28,7 @@ function AccountantFormPage({
   accountsSettings,
   billPaymentSettings,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   const { saveSettingMutate } = useAccountantFormContext();
 
@@ -44,7 +44,7 @@ function AccountantFormPage({
   };
 
   useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'accountant' }));
+    changePreferencesPageTitle(intl.get('accountant'));
   }, [changePreferencesPageTitle]);
 
   const handleFormSubmit = (values, { setSubmitting }) => {
@@ -53,9 +53,7 @@ function AccountantFormPage({
     setSubmitting(true);
     const onSuccess = () => {
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_accountant_preferences_has_been_saved',
-        }),
+        message: intl.get('the_accountant_preferences_has_been_saved'),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);

client/src/containers/Preferences/Accounts/Accounts.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {Tabs, Tab} from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
 import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
-import { FormattedMessage as T} from 'react-intl';
+import {  FormattedMessage as T } from 'components';
 
 export default function AccountsPreferences() {
   const history = useHistory();

client/src/containers/Preferences/Accounts/AccountsCustomFields.js

@@ -18,7 +18,8 @@ import {connect} from 'react-redux';
 import {
   fetchResourceFields,
 } from 'store/customFields/customFields.actions';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 function AccountsCustomFields({ fetchResourceFields, fields }) {
   const fetchHook = useAsync(async () => {

client/src/containers/Preferences/Currencies/CurrenciesActions.js

@@ -3,7 +3,7 @@ import { Button, Intent } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import { compose } from 'utils';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 function CurrenciesActions({ openDialog }) {
   const handleClickNewCurrency = useCallback(() => {

client/src/containers/Preferences/Currencies/CurrenciesList.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import { CurrenciesProvider } from './CurrenciesProvider';
 import CurrenciesDataTable from './CurrenciesDataTable';
@@ -14,11 +15,11 @@ function CurrenciesList({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
-  }, [changePreferencesPageTitle, formatMessage]);
+    changePreferencesPageTitle(intl.get('currencies'));
+  }, [changePreferencesPageTitle]);
 
   return (
     <CurrenciesProvider>

client/src/containers/Preferences/Currencies/components.js

@@ -7,7 +7,7 @@ import {
   MenuItem,
   Intent,
 } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Icon } from 'components';
 import { safeCallback } from 'utils';
 
@@ -18,17 +18,17 @@ export function ActionMenuList({
   row: { original },
   payload: { onEditCurrency, onDeleteCurrency },
 }) {
-  const { formatMessage } = useIntl();
+  
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_currency' })}
+        text={intl.get('edit_currency')}
         onClick={safeCallback(onEditCurrency, original)}
       />
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
-        text={formatMessage({ id: 'delete_currency' })}
+        text={intl.get('delete_currency')}
         onClick={safeCallback(onDeleteCurrency, original)}
         intent={Intent.DANGER}
       />
@@ -51,17 +51,17 @@ export const ActionsCell = (props) => {
 };
 
 export function useCurrenciesTableColumns() {
-  const { formatMessage } = useIntl();
+  
 
   return useMemo(
     () => [
       {
-        Header: formatMessage({ id: 'currency_name' }),
+        Header: intl.get('currency_name'),
         accessor: 'currency_name',
         width: 150,
       },
       {
-        Header: formatMessage({ id: 'currency_code' }),
+        Header: intl.get('currency_code'),
         accessor: 'currency_code',
         className: 'currency_code',
         width: 120,
@@ -80,6 +80,6 @@ export function useCurrenciesTableColumns() {
         disableResizing: true,
       },
     ],
-    [formatMessage],
+    [],
   );
 }

client/src/containers/Preferences/General/General.schema.js

@@ -1,34 +1,34 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import { get } from 'react-intl-universal';
 
 const Schema = Yup.object().shape({
   name: Yup.string()
     .required()
-    .label(formatMessage({ id: 'organization_name_' })),
+    .label(get({ id: 'organization_name_' })),
   financial_date_start: Yup.date()
     .required()
-    .label(formatMessage({ id: 'date_start_' })),
+    .label(get({ id: 'date_start_' })),
   industry: Yup.string()
     .nullable()
-    .label(formatMessage({ id: 'organization_industry_' })),
+    .label(get({ id: 'organization_industry_' })),
   location: Yup.string()
     .nullable()
-    .label(formatMessage({ id: 'location' })),
+    .label(get({ id: 'location' })),
   base_currency: Yup.string()
     .required()
-    .label(formatMessage({ id: 'base_currency_' })),
+    .label(get({ id: 'base_currency_' })),
   fiscal_year: Yup.string()
     .required()
-    .label(formatMessage({ id: 'fiscal_year_' })),
+    .label(get({ id: 'fiscal_year_' })),
   language: Yup.string()
     .required()
-    .label(formatMessage({ id: 'language' })),
+    .label(get({ id: 'language' })),
   time_zone: Yup.string()
     .required()
-    .label(formatMessage({ id: 'time_zone_' })),
+    .label(get({ id: 'time_zone_' })),
   date_format: Yup.string()
     .required()
-    .label(formatMessage({ id: 'date_format_' })),
+    .label(get({ id: 'date_format_' })),
 });
 
 export const PreferencesGeneralSchema = Schema;

client/src/containers/Preferences/General/GeneralForm.js

@@ -10,7 +10,7 @@ import {
 import classNames from 'classnames';
 import { TimezonePicker } from '@blueprintjs/timezone';
 import { ErrorMessage, FastField } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { DateInput } from '@blueprintjs/datetime';
 import { useHistory } from 'react-router-dom';
 import { ListSelect, FieldRequiredHint } from 'components';
@@ -23,12 +23,13 @@ import {
 import { CLASSES } from 'common/classes';
 import countriesOptions from 'common/countries';
 import currencies from 'common/currencies';
-import fiscalYearOptions from 'common/fiscalYearOptions';
+import { getFiscalYearOptions } from 'common/fiscalYearOptions';
 import languages from 'common/languagesOptions';
 import dateFormatsOptions from 'common/dateFormatsOptions';
 
 export default function PreferencesGeneralForm({}) {
   const history = useHistory();
+  const fiscalYearOptions = getFiscalYearOptions();
 
   const handleCloseClick = () => {
     history.go(-1);

client/src/containers/Preferences/General/GeneralFormPage.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Formik } from 'formik';
 import { mapKeys, snakeCase } from 'lodash';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 
 import { AppToaster } from 'components';
 import GeneralForm from './GeneralForm';
@@ -25,12 +25,12 @@ function GeneralFormPage({
   //# withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { saveSettingMutate } = useGeneralFormContext();
 
   useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'general' }));
-  }, [changePreferencesPageTitle, formatMessage]);
+    changePreferencesPageTitle(intl.get('general'));
+  }, [changePreferencesPageTitle]);
 
   function transformGeneralSettings(data) {
     return mapKeys(data, (value, key) => snakeCase(key));

client/src/containers/Preferences/Item/ItemForm.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { Form, FastField, useFormikContext } from 'formik';
 import { FormGroup, Button, Intent } from '@blueprintjs/core';
 import { AccountsSelectList, FieldRequiredHint } from 'components';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { useHistory } from 'react-router-dom';
 import { inputIntent } from 'utils';
 import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from 'common/accountTypes';

client/src/containers/Preferences/Item/ItemFormPage.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Formik } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { ItemPreferencesSchema } from './Item.schema';
 import ItemForm from './ItemForm';
 
@@ -21,7 +21,7 @@ function ItemFormPage({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { saveSettingMutate } = useItemFormContext();
 
   const initialValues = {
@@ -32,8 +32,8 @@ function ItemFormPage({
   };
 
   useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'items' }));
-  }, [formatMessage, changePreferencesPageTitle]);
+    changePreferencesPageTitle(intl.get('items'));
+  }, [changePreferencesPageTitle]);
 
   // Handle form submit.
   const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
@@ -42,9 +42,7 @@ function ItemFormPage({
 
     const onSuccess = () => {
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_items_preferences_has_been_saved',
-        }),
+        message: intl.get('the_items_preferences_has_been_saved'),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);

client/src/containers/Preferences/Users/Users.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 
 import 'style/pages/Preferences/Users.scss';
@@ -26,8 +26,8 @@ function UsersPreferences({ openDialog }) {
       <div className={classNames(CLASSES.CARD)}>
         <div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
           <Tabs animate={true} onChange={onChangeTabs}>
-            <Tab id="users" title={formatMessage({ id: 'users' })} />
-            <Tab id="roles" title={formatMessage({ id: 'roles' })} />
+            <Tab id="users" title={intl.get('users')} />
+            <Tab id="roles" title={intl.get('roles')} />
           </Tabs>
         </div>
         <PreferencesSubContent preferenceTab="users" />

client/src/containers/Preferences/Users/UsersActions.js

@@ -3,7 +3,7 @@ import {
   Button,
   Intent,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import Icon from 'components/Icon';
 import withDialogActions from 'containers/Dialog/withDialogActions';

client/src/containers/Preferences/Users/UsersList.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 
 import  {UsersListProvider } from './UsersProvider';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -15,11 +15,10 @@ function UsersListPreferences({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { formatMessage } = useIntl();
 
   useEffect(() => {
-    changePreferencesPageTitle(formatMessage({ id: 'users' }));
-  }, [changePreferencesPageTitle, formatMessage]);
+    changePreferencesPageTitle(intl.get('users'));
+  }, [changePreferencesPageTitle]);
 
   return (
     <UsersListProvider>

client/src/containers/Preferences/Users/components.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,
   Button,
@@ -27,27 +28,27 @@ export function ActionsMenu({
   row: { original },
   payload: { onEdit, onInactivate, onActivate, onDelete, onResendInvitation },
 }) {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <Menu>
       <If condition={original.invite_accepted_at}>
         <MenuItem
           icon={<Icon icon="pen-18" />}
-          text={formatMessage({ id: 'edit_user' })}
+          text={intl.get('edit_user')}
           onClick={safeCallback(onEdit, original)}
         />
         <MenuDivider />
 
         {original.active ? (
           <MenuItem
-            text={formatMessage({ id: 'inactivate_user' })}
+            text={intl.get('inactivate_user')}
             onClick={safeCallback(onInactivate, original)}
             icon={<Icon icon="pause-16" iconSize={16} />}
           />
         ) : (
           <MenuItem
-            text={formatMessage({ id: 'activate_user' })}
+            text={intl.get('activate_user')}
             onClick={safeCallback(onActivate, original)}
             icon={<Icon icon="play-16" iconSize={16} />}
           />
@@ -64,7 +65,7 @@ export function ActionsMenu({
 
       <MenuItem
         icon={<Icon icon="trash-16" iconSize={16} />}
-        text={formatMessage({ id: 'delete_user' })}
+        text={intl.get('delete_user')}
         onClick={safeCallback(onDelete, original)}
         intent={Intent.DANGER}
       />
@@ -110,7 +111,7 @@ function FullNameAccessor(user) {
 }
 
 export const useUsersListColumns = () => {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
@@ -122,19 +123,19 @@ export const useUsersListColumns = () => {
       },
       {
         id: 'full_name',
-        Header: formatMessage({ id: 'full_name' }),
+        Header: intl.get('full_name'),
         accessor: FullNameAccessor,
         width: 150,
       },
       {
         id: 'email',
-        Header: formatMessage({ id: 'email' }),
+        Header: intl.get('email'),
         accessor: 'email',
         width: 150,
       },
       {
         id: 'phone_number',
-        Header: formatMessage({ id: 'phone_number' }),
+        Header: intl.get('phone_number'),
         accessor: 'phone_number',
         width: 120,
       },
@@ -154,6 +155,6 @@ export const useUsersListColumns = () => {
         disableResizing: true,
       },
     ],
-    [formatMessage],
+    [],
   );
 };