WIP: Arabic localization.|

client/src/containers/Items/ItemForm.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { defaultTo } from 'lodash';
 
@@ -66,8 +66,6 @@ function ItemForm({
   // History context.
   const history = useHistory();
 
-  const { formatMessage } = useIntl();
-
   /**
    * Initial values in create and edit mode.
    */
@@ -105,13 +103,11 @@ function ItemForm({
     const fields = {};
 
     if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
-      fields.name = formatMessage({ id: 'the_name_used_before' });
+      fields.name = intl.get('the_name_used_before');
     }
     if (errors.find((e) => e.type === 'INVENTORY_ACCOUNT_CANNOT_MODIFIED')) {
       AppToaster.show({
-        message: formatMessage({
-          id: 'cannot_change_item_inventory_account',
-        }),
+        message: intl.get('cannot_change_item_inventory_account'),
         intent: Intent.DANGER,
       });
     }
@@ -128,12 +124,10 @@ function ItemForm({
 
     const onSuccess = (response) => {
       AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'the_item_has_been_created_successfully'
-              : 'the_item_has_been_edited_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'the_item_has_been_created_successfully'
+            : 'the_item_has_been_edited_successfully',
           {
             number: itemId,
           },

client/src/containers/Items/ItemForm.schema.js

@@ -1,6 +1,6 @@
 import * as Yup from 'yup';
 import { defaultTo } from 'lodash';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';
 
 const Schema = Yup.object().shape({
@@ -9,13 +9,13 @@ const Schema = Yup.object().shape({
     .required()
     .min(0)
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'item_name_' })),
+    .label(intl.get('item_name_')),
   type: Yup.string()
     .trim()
     .required()
     .min(0)
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'item_type_' })),
+    .label(intl.get('item_type_')),
   code: Yup.string().trim().min(0).max(DATATYPES_LENGTH.STRING),
   cost_price: Yup.number()
     .min(0)
@@ -24,7 +24,7 @@ const Schema = Yup.object().shape({
       is: true,
       then: Yup.number()
         .required()
-        .label(formatMessage({ id: 'cost_price_' })),
+        .label(intl.get('cost_price_')),
       otherwise: Yup.number().nullable(true),
     }),
   sell_price: Yup.number()
@@ -34,7 +34,7 @@ const Schema = Yup.object().shape({
       is: true,
       then: Yup.number()
         .required()
-        .label(formatMessage({ id: 'sell_price_' })),
+        .label(intl.get('sell_price_')),
       otherwise: Yup.number().nullable(true),
     }),
   cost_account_id: Yup.number()
@@ -43,21 +43,21 @@ const Schema = Yup.object().shape({
       then: Yup.number().required(),
       otherwise: Yup.number().nullable(true),
     })
-    .label(formatMessage({ id: 'cost_account_id' })),
+    .label(intl.get('cost_account_id')),
   sell_account_id: Yup.number()
     .when(['sellable'], {
       is: true,
       then: Yup.number().required(),
       otherwise: Yup.number().nullable(),
     })
-    .label(formatMessage({ id: 'sell_account_id' })),
+    .label(intl.get('sell_account_id')),
   inventory_account_id: Yup.number()
     .when(['type'], {
       is: (value) => value === 'inventory',
       then: Yup.number().required(),
       otherwise: Yup.number().nullable(),
     })
-    .label(formatMessage({ id: 'inventory_account' })),
+    .label(intl.get('inventory_account')),
   category_id: Yup.number().positive().nullable(),
   stock: Yup.string() || Yup.boolean(),
   sellable: Yup.boolean().required(),

client/src/containers/Items/ItemFormBody.js

@@ -15,7 +15,7 @@ import {
   Hint,
   InputPrependText,
 } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
 import { useItemFormContext } from './ItemFormProvider';

client/src/containers/Items/ItemFormFloatingActions.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { useHistory } from 'react-router-dom';
 import classNames from 'classnames';
 import { FastField, useFormikContext } from 'formik';

client/src/containers/Items/ItemFormInventorySection.js

@@ -3,7 +3,7 @@ import { FastField, ErrorMessage } from 'formik';
 import { FormGroup } from '@blueprintjs/core';
 import { AccountsSelectList, Col, Row } from 'components';
 import { CLASSES } from 'common/classes';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
 import withSettings from 'containers/Settings/withSettings';

client/src/containers/Items/ItemFormPrimarySection.js

@@ -7,7 +7,7 @@ import {
   Radio,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { ErrorMessage, FastField } from 'formik';
 import {
   CategoriesSelectList,

client/src/containers/Items/ItemFormProvider.js

@@ -1,5 +1,5 @@
 import React, { useEffect, createContext, useState } from 'react';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { useLocation, useParams } from 'react-router-dom';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import {
@@ -66,7 +66,7 @@ function ItemFormProvider({ itemId, ...props }) {
   };
 
   // Format message intl.
-  const { formatMessage } = useIntl();
+  
 
   // Change page title dispatcher.
   const changePageTitle = useDashboardPageTitle();
@@ -74,9 +74,9 @@ function ItemFormProvider({ itemId, ...props }) {
   // Changes the page title in new and edit mode.
   useEffect(() => {
     isNewMode
-      ? changePageTitle(formatMessage({ id: 'new_item' }))
-      : changePageTitle(formatMessage({ id: 'edit_item_details' }));
-  }, [changePageTitle, isNewMode, formatMessage]);
+      ? changePageTitle(intl.get('new_item'))
+      : changePageTitle(intl.get('edit_item_details'));
+  }, [changePageTitle, isNewMode]);
 
   return (
     <DashboardInsider

client/src/containers/Items/ItemsActionsBar.js

@@ -11,7 +11,8 @@ import {
   Classes,
   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 DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import { If, DashboardActionViewsList } from 'components';
@@ -41,7 +42,7 @@ function ItemsActionsBar({
   const { itemsViews } = useItemsListContext();
 
   // React intl.
-  const { formatMessage } = useIntl();
+  
 
   // History context.
   const history = useHistory();
@@ -86,7 +87,7 @@ function ItemsActionsBar({
         >
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text={`${formatMessage({ id: 'filter' })}`}
+            text={`${intl.get('filter')}`}
             icon={<Icon icon="filter-16" iconSize={16} />}
           />
         </Popover>

client/src/containers/Items/ItemsEmptyStatus.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 ItemsEmptyStatus() {
   const history = useHistory();

client/src/containers/Items/ItemsFooter.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Button } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function ItemFloatingFooter({
   formik: { isSubmitting },

client/src/containers/Items/components.js

@@ -9,8 +9,8 @@ import {
   Button,
   Popover,
 } from '@blueprintjs/core';
-import { useIntl, FormattedMessage as T } from 'react-intl';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T } from 'components';
 import { isNumber } from 'lodash';
 import { Icon, Money, If } from 'components';
 import { isBlank, safeCallback } from 'utils';
@@ -33,7 +33,7 @@ export const PublishAccessor = (r) => {
 export const TypeAccessor = (row) => {
   return row.type ? (
     <Tag minimal={true} round={true} intent={Intent.NONE}>
-      {formatMessage({ id: row.type })}
+      {intl.get(row.type)}
     </Tag>
   ) : (
     ''
@@ -43,7 +43,7 @@ export const TypeAccessor = (row) => {
 export const ItemCodeAccessor = (row) =>
   row.type ? (
     <Tag minimal={true} round={true} intent={Intent.NONE}>
-      {formatMessage({ id: row.type })}
+      {intl.get(row.type)}
     </Tag>
   ) : (
     ''
@@ -66,7 +66,7 @@ export const SellPriceCell = ({ cell: { value } }) => {
 export const ItemTypeAccessor = (row) => {
   return row.type ? (
     <Tag minimal={true} round={true} intent={Intent.NONE}>
-      {formatMessage({ id: row.type })}
+      {intl.get(row.type)}
     </Tag>
   ) : null;
 };
@@ -82,7 +82,7 @@ export function ItemsActionMenuList({
     onDuplicate,
   },
 }) {
-  const { formatMessage } = useIntl();
+  
   return (
     <Menu>
       <MenuItem
@@ -92,37 +92,37 @@ export function ItemsActionMenuList({
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_item' })}
+        text={intl.get('edit_item')}
         onClick={safeCallback(onEditItem, original)}
       />
       <MenuItem
         icon={<Icon icon="duplicate-16" />}
-        text={formatMessage({ id: 'duplicate' })}
+        text={intl.get('duplicate')}
         onClick={safeCallback(onDuplicate, original)}
       />
       <If condition={original.active}>
         <MenuItem
-          text={formatMessage({ id: 'inactivate_item' })}
+          text={intl.get('inactivate_item')}
           icon={<Icon icon="pause-16" iconSize={16} />}
           onClick={safeCallback(onInactivateItem, original)}
         />
       </If>
       <If condition={!original.active}>
         <MenuItem
-          text={formatMessage({ id: 'activate_item' })}
+          text={intl.get('activate_item')}
           icon={<Icon icon="play-16" iconSize={16} />}
           onClick={safeCallback(onActivateItem, original)}
         />
       </If>
       <If condition={original.type === 'inventory'}>
         <MenuItem
-          text={formatMessage({ id: 'make_adjustment' })}
+          text={intl.get('make_adjustment')}
           icon={<Icon icon={'swap-vert'} iconSize={16} />}
           onClick={safeCallback(onMakeAdjustment, original)}
         />
       </If>
       <MenuItem
-        text={formatMessage({ id: 'delete_item' })}
+        text={intl.get('delete_item')}
         icon={<Icon icon="trash-16" iconSize={16} />}
         onClick={safeCallback(onDeleteItem, original)}
         intent={Intent.DANGER}
@@ -146,60 +146,60 @@ export const ItemsActionsTableCell = (props) => {
  * Retrieve all items table columns.
  */
 export const useItemsTableColumns = () => {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
       {
         id: 'name',
-        Header: formatMessage({ id: 'item_name' }),
+        Header: intl.get('item_name'),
         accessor: 'name',
         className: 'name',
         width: 180,
       },
       {
         id: 'code',
-        Header: formatMessage({ id: 'item_code' }),
+        Header: intl.get('item_code'),
         accessor: 'code',
         className: 'code',
         width: 120,
       },
       {
         id: 'type',
-        Header: formatMessage({ id: 'item_type' }),
+        Header: intl.get('item_type'),
         accessor: ItemTypeAccessor,
         className: 'item_type',
         width: 120,
       },
       {
         id: 'category',
-        Header: formatMessage({ id: 'category' }),
+        Header: intl.get('category'),
         accessor: 'category.name',
         className: 'category',
         width: 150,
       },
       {
         id: 'sell_price',
-        Header: formatMessage({ id: 'sell_price' }),
+        Header: intl.get('sell_price'),
         accessor: 'sell_price_formatted',
         className: 'sell-price',
         width: 150,
       },
       {
         id: 'cost_price',
-        Header: formatMessage({ id: 'cost_price' }),
+        Header: intl.get('cost_price'),
         accessor: 'cost_price_formatted',
         className: 'cost-price',
         width: 150,
       },
       {
         id: 'quantity_on_hand',
-        Header: formatMessage({ id: 'quantity_on_hand' }),
+        Header: intl.get('quantity_on_hand'),
         accessor: 'quantity_on_hand',
         Cell: QuantityOnHandCell,
         width: 140,
       },
     ],
-    [formatMessage],
+    [],
   );
 };

client/src/containers/Items/utils.js

@@ -1,12 +1,12 @@
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
 export const transitionItemTypeKeyToLabel = (itemTypeKey) => {
   const table = {
-    service: formatMessage({ id: 'service' }),
-    inventory: formatMessage({ id: 'inventory' }),
-    'non-inventory': formatMessage({ id: 'non_inventory' }),
+    service: intl.get('service'),
+    inventory: intl.get('inventory'),
+    'non-inventory': intl.get('non_inventory'),
   };
   return typeof table[itemTypeKey] === 'string' ? table[itemTypeKey] : '';
 };
@@ -17,9 +17,7 @@ export const handleDeleteErrors = (errors) => {
     errors.find((error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'the_item_has_associated_transactions',
-      }),
+      message: intl.get('the_item_has_associated_transactions'),
       intent: Intent.DANGER,
     });
   }
@@ -30,10 +28,7 @@ export const handleDeleteErrors = (errors) => {
     )
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id:
-          'you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions',
-      }),
+      message: intl.get('you_could_not_delete_item_that_has_associated_inventory_adjustments_transacions'),
       intent: Intent.DANGER,
     });
   }
@@ -43,10 +38,7 @@ export const handleDeleteErrors = (errors) => {
     )
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id:
-          'cannot_change_item_type_to_inventory_with_item_has_associated_transactions',
-      }),
+      message: intl.get('cannot_change_item_type_to_inventory_with_item_has_associated_transactions'),
       intent: Intent.DANGER,
     });
   }