WIP: Arabic localization.|

client/src/containers/Customers/CustomerForm/CustomerAddressTabs.js

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

client/src/containers/Customers/CustomerForm/CustomerAttachmentTabs.js

@@ -6,7 +6,7 @@ import React, {
   useCallback,
 } from 'react';
 import Dragzone from 'components/Dragzone';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 function CustomerAttachmentTabs() {
   return (

client/src/containers/Customers/CustomerForm/CustomerFinancialPanel.js

@@ -11,7 +11,7 @@ import {
   Row,
   Col,
 } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import { useCustomerFormContext } from './CustomerFormProvider';
 

client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js

@@ -9,7 +9,7 @@ import {
   Menu,
   MenuItem,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';

client/src/containers/Customers/CustomerForm/CustomerForm.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 
@@ -75,7 +75,7 @@ function CustomerForm({
 
   // const isNewMode = !customerId;
   const history = useHistory();
-  const { formatMessage } = useIntl();
+  
 
   /**
    * Initial values in create and edit mode.
@@ -98,11 +98,11 @@ function CustomerForm({
 
     const onSuccess = () => {
       AppToaster.show({
-        message: formatMessage({
-          id: isNewMode
+        message: intl.get(
+          isNewMode
             ? 'the_customer_has_been_created_successfully'
             : 'the_item_customer_has_been_edited_successfully',
-        }),
+        ),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);

client/src/containers/Customers/CustomerForm/CustomerForm.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({
   customer_type: Yup.string()
     .required()
     .trim()
-    .label(formatMessage({ id: 'customer_type_' })),
+    .label(intl.get('customer_type_')),
   salutation: Yup.string().trim(),
   first_name: Yup.string().trim(),
   last_name: Yup.string().trim(),
@@ -13,7 +13,7 @@ const Schema = Yup.object().shape({
   display_name: Yup.string()
     .trim()
     .required()
-    .label(formatMessage({ id: 'display_name_' })),
+    .label(intl.get('display_name_')),
 
   email: Yup.string().email().nullable(),
   work_phone: Yup.number(),

client/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 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 { inputIntent } from 'utils';
 
 export default function CustomerFormAfterPrimarySection({}) {
-  const { formatMessage } = useIntl();
+  
   return (
     <div class="customer-form__after-primary-section-content">
       {/*------------ Customer email -----------*/}
@@ -34,7 +35,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={formatMessage({ id: 'work' })}
+                placeholder={intl.get('work')}
                 {...field}
               />
             )}
@@ -44,7 +45,7 @@ export default function CustomerFormAfterPrimarySection({}) {
             {({ field, meta: { error, touched } }) => (
               <InputGroup
                 intent={inputIntent({ error, touched })}
-                placeholder={formatMessage({id:'Mobile'})}
+                placeholder={intl.get('Mobile')}
                 {...field}
               />
             )}

client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js

@@ -2,7 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import {
   Hint,
@@ -20,7 +21,7 @@ import { useAutofocus } from 'hooks';
  */
 export default function CustomerFormPrimarySection({}) {
   const firstNameFieldRef = useAutofocus();
-  const { formatMessage } = useIntl();
+  
   
   return (
     <div className={'customer-form__primary-section-content'}>
@@ -55,7 +56,7 @@ export default function CustomerFormPrimarySection({}) {
           <FastField name={'first_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={formatMessage({ id: 'first_name' })}
+                placeholder={intl.get('first_name')}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--first-name')}
                 inputRef={(ref) => (firstNameFieldRef.current = ref)}
@@ -67,7 +68,7 @@ export default function CustomerFormPrimarySection({}) {
           <FastField name={'last_name'}>
             {({ field, meta: { error, touched } }) => (
               <InputGroup
-                placeholder={formatMessage({ id: 'last_name' })}
+                placeholder={intl.get('last_name')}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--last-name')}
                 {...field}

client/src/containers/Customers/CustomerForm/CustomerNotePanel.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { inputIntent } from 'utils';
 
 export default function CustomerNotePanel({ errors, touched, getFieldProps }) {

client/src/containers/Customers/CustomerForm/CustomerTypeRadioField.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { FastField } from 'formik';
 
 import { handleStringChange, saveInvoke } from 'utils';
@@ -11,7 +12,7 @@ import { handleStringChange, saveInvoke } from 'utils';
  */
 export default function RadioCustomer(props) {
   const { onChange, ...rest } = props;
-  const { formatMessage } = useIntl();
+  
 
   return (
     <FastField name={'customer_type'}>
@@ -29,9 +30,9 @@ export default function RadioCustomer(props) {
             })}
             selectedValue={value}
           >
-            <Radio label={formatMessage({ id: 'business' })} value="business" />
+            <Radio label={intl.get('business')} value="business" />
             <Radio
-              label={formatMessage({ id: 'individual' })}
+              label={intl.get('individual')}
               value="individual"
             />
           </RadioGroup>

client/src/containers/Customers/CustomerForm/CustomersTabs.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 
 import CustomerAddressTabs from './CustomerAddressTabs';
 import CustomerAttachmentTabs from './CustomerAttachmentTabs';
@@ -8,7 +8,7 @@ import CustomerFinancialPanel from './CustomerFinancialPanel';
 import CustomerNotePanel from './CustomerNotePanel';
 
 export default function CustomersTabs() {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <div>
@@ -20,22 +20,22 @@ export default function CustomersTabs() {
       >
         <Tab
           id={'financial'}
-          title={formatMessage({ id: 'financial_details' })}
+          title={intl.get('financial_details')}
           panel={<CustomerFinancialPanel />}
         />
         <Tab
           id={'address'}
-          title={formatMessage({ id: 'address' })}
+          title={intl.get('address')}
           panel={<CustomerAddressTabs />}
         />
         <Tab
           id="notes"
-          title={formatMessage({ id: 'notes' })}
+          title={intl.get('notes')}
           panel={<CustomerNotePanel />}
         />
         <Tab
           id={'attachement'}
-          title={formatMessage({ id: 'attachement' })}
+          title={intl.get('attachement')}
           panel={<CustomerAttachmentTabs />}
         />
       </Tabs>