WIP: Arabic localization.|

client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js

@@ -1,20 +1,20 @@
 import React from 'react';
 import { useInvoiceDrawerContext } from './InvoiceDrawerProvider';
 import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 export default function InvoicePaper() {
   const { invoice, entries } = useInvoiceDrawerContext();
 
   const propLabels = {
     labels: {
-      name: formatMessage({ id: 'invoice' }),
-      billedTo: formatMessage({ id: 'billed_to' }),
-      date: formatMessage({ id: 'invoice_date_' }),
-      refNo: formatMessage({ id: 'invoice_no__' }),
-      billedFrom: formatMessage({ id: 'billed_from' }),
-      amount: formatMessage({ id: 'invoice_amount' }),
-      dueDate: formatMessage({ id: 'due_date_' }),
+      name: intl.get('invoice'),
+      billedTo: intl.get('billed_to'),
+      date: intl.get('invoice_date_'),
+      refNo: intl.get('invoice_no__'),
+      billedFrom: intl.get('billed_from'),
+      amount: intl.get('invoice_amount'),
+      dueDate: intl.get('due_date_'),
     },
   };
 

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.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';
 import classNames from 'classnames';

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js

@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { sumBy, omit, isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
 import { CLASSES } from 'common/classes';
 import {
-  CreateInvoiceFormSchema,
-  EditInvoiceFormSchema,
+  getCreateInvoiceFormSchema,
+  getEditInvoiceFormSchema,
 } from './InvoiceForm.schema';
 
 import InvoiceFormHeader from './InvoiceFormHeader';
@@ -36,7 +36,6 @@ function InvoiceForm({
   invoiceIncrementMode,
   baseCurrency,
 }) {
-  const { formatMessage } = useIntl();
   const history = useHistory();
 
   // Invoice form context.
@@ -85,7 +84,7 @@ function InvoiceForm({
     // Throw danger toaster in case total quantity equals zero.
     if (totalQuantity === 0) {
       AppToaster.show({
-        message: formatMessage({ id: 'quantity_cannot_be_zero_or_empty' }),
+        message: intl.get('quantity_cannot_be_zero_or_empty'),
         intent: Intent.DANGER,
       });
       setSubmitting(false);
@@ -103,12 +102,10 @@ function InvoiceForm({
     // Handle the request success.
     const onSuccess = () => {
       AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'the_invoice_has_been_created_successfully'
-              : 'the_invoice_has_been_edited_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'the_invoice_has_been_created_successfully'
+            : 'the_invoice_has_been_edited_successfully',
           { number: values.invoice_no },
         ),
         intent: Intent.SUCCESS,
@@ -141,6 +138,9 @@ function InvoiceForm({
     }
   };
 
+  const CreateInvoiceFormSchema = getCreateInvoiceFormSchema();
+  const EditInvoiceFormSchema = getEditInvoiceFormSchema();
+
   return (
     <div
       className={classNames(

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.js

@@ -1,21 +1,21 @@
 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({
+const getSchema = () => Yup.object().shape({
   customer_id: Yup.string()
-    .label(formatMessage({ id: 'customer_name_' }))
+    .label(intl.get('customer_name_'))
     .required(),
   invoice_date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'invoice_date_' })),
+    .label(intl.get('invoice_date_')),
   due_date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'due_date_' })),
+    .label(intl.get('due_date_')),
   invoice_no: Yup.string()
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'invoice_no_' })),
+    .label(intl.get('invoice_no_')),
   reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
   delivered: Yup.boolean(),
   from_estimate_id: Yup.string(),
@@ -23,12 +23,12 @@ const Schema = Yup.object().shape({
     .trim()
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
-    .label(formatMessage({ id: 'note' })),
+    .label(intl.get('note')),
   terms_conditions: Yup.string()
     .trim()
     .min(1)
     .max(DATATYPES_LENGTH.TEXT)
-    .label(formatMessage({ id: 'note' })),
+    .label(intl.get('note')),
   entries: Yup.array().of(
     Yup.object().shape({
       quantity: Yup.number()
@@ -51,5 +51,5 @@ const Schema = Yup.object().shape({
   ),
 });
 
-export const CreateInvoiceFormSchema = Schema;
-export const EditInvoiceFormSchema = Schema;
+export const getCreateInvoiceFormSchema = getSchema;
+export const getEditInvoiceFormSchema = getSchema;

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.js

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

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 import { CLASSES } from 'common/classes';
 import InvoiceFormHeaderFields from './InvoiceFormHeaderFields';
@@ -31,7 +31,7 @@ function InvoiceFormHeader({
     <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
       <InvoiceFormHeaderFields />
       <PageFormBigNumber
-        label={formatMessage({ id: 'due_amount' })}
+        label={intl.get('due_amount')}
         amount={totalDueAmount}
         currencyCode={baseCurrency}
       />

client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js

@@ -7,7 +7,7 @@ import {
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FastField, Field, ErrorMessage } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { momentFormatter, compose, tansformDateValue } from 'utils';
 import classNames from 'classnames';
 import { useObserveInvoiceNoSettings } from './utils';

client/src/containers/Sales/Invoices/InvoiceForm/utils.js

@@ -12,7 +12,7 @@ import { useFormikContext } from 'formik';
 import { Intent } from '@blueprintjs/core';
 
 import { orderingLinesIndexes } from 'utils';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { ERROR } from 'common/errors';
 import { AppToaster } from 'components';
 
@@ -66,7 +66,7 @@ export function transformToEditForm(invoice) {
 export const transformErrors = (errors, { setErrors }) => {
   if (errors.some((e) => e.type === ERROR.SALE_INVOICE_NUMBER_IS_EXISTS)) {
     setErrors({
-      invoice_no: formatMessage({ id: 'sale_invoice_number_is_exists' }),
+      invoice_no: intl.get('sale_invoice_number_is_exists'),
     });
   }
   if (
@@ -76,9 +76,7 @@ export const transformErrors = (errors, { setErrors }) => {
     )
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'sale_estimate_is_already_converted_to_invoice',
-      }),
+      message: intl.get('sale_estimate_is_already_converted_to_invoice'),
       intent: Intent.DANGER,
     });
   }

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js

@@ -13,7 +13,8 @@ import {
 
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-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';
 
@@ -32,7 +33,7 @@ function InvoiceActionsBar({
   setInvoicesTableState,
 }) {
   const history = useHistory();
-  const { formatMessage } = useIntl();
+  
 
   const [filterCount, setFilterCount] = useState(0);
 
@@ -76,7 +77,7 @@ function InvoiceActionsBar({
               filterCount <= 0 ? (
                 <T id={'filter'} />
               ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+                `${filterCount} ${intl.get('filters_applied')}`
               )
             }
             icon={<Icon icon={'filter-16'} iconSize={16} />}

client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.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 EstimatesEmptyStatus() {
   const history = useHistory();

client/src/containers/Sales/Invoices/InvoicesLanding/components.js

@@ -10,11 +10,12 @@ import {
   Position,
   Button,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
+
+import { FormattedMessage as T } from 'components';
 import moment from 'moment';
 import { Choose, If, Icon } from 'components';
 import { Money, AppToaster } from 'components';
-import { formatMessage } from 'services/intl';
 import { safeCallback, calculateStatus } from 'utils';
 
 export const statusAccessor = (row) => {
@@ -83,9 +84,7 @@ export const handleDeleteErrors = (errors) => {
     )
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'the_invoice_cannot_be_deleted',
-      }),
+      message: intl.get('the_invoice_cannot_be_deleted'),
       intent: Intent.DANGER,
     });
   }
@@ -95,9 +94,7 @@ export const handleDeleteErrors = (errors) => {
     )
   ) {
     AppToaster.show({
-      message: formatMessage({
-        id: 'the_payment_amount_that_received',
-      }),
+      message: intl.get('the_payment_amount_that_received'),
       intent: Intent.DANGER,
     });
   }
@@ -107,41 +104,41 @@ export function ActionsMenu({
   payload: { onEdit, onDeliver, onDelete, onDrawer, onQuick },
   row: { original },
 }) {
-  const { formatMessage } = useIntl();
+  
 
   return (
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_invoice' })}
+        text={intl.get('edit_invoice')}
         onClick={safeCallback(onEdit, original)}
       />
       <If condition={!original.is_delivered}>
         <MenuItem
           icon={<Icon icon="send" iconSize={16} />}
-          text={formatMessage({ id: 'mark_as_delivered' })}
+          text={intl.get('mark_as_delivered')}
           onClick={safeCallback(onDeliver, original)}
         />
       </If>
       <If condition={original.is_delivered && !original.is_fully_paid}>
         <MenuItem
           icon={<Icon icon="quick-payment-16" iconSize={16} />}
-          text={formatMessage({ id: 'add_payment' })}
+          text={intl.get('add_payment')}
           onClick={safeCallback(onQuick, original)}
         />
       </If>
       <MenuItem
         icon={<Icon icon={'receipt-24'} iconSize={16} />}
-        text={formatMessage({ id: 'invoice_paper' })}
+        text={intl.get('invoice_paper')}
         onClick={safeCallback(onDrawer, original)}
       />
       <MenuItem
-        text={formatMessage({ id: 'delete_invoice' })}
+        text={intl.get('delete_invoice')}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
         icon={<Icon icon="trash-16" iconSize={16} />}
@@ -165,20 +162,20 @@ function ActionsCell(props) {
  * Retrieve invoices table columns.
  */
 export function useInvoicesTableColumns() {
-  const { formatMessage } = useIntl();
+  
 
   return React.useMemo(
     () => [
       {
         id: 'invoice_date',
-        Header: formatMessage({ id: 'invoice_date' }),
+        Header: intl.get('invoice_date'),
         accessor: (r) => moment(r.invoice_date).format('YYYY MMM DD'),
         width: 110,
         className: 'invoice_date',
       },
       {
         id: 'customer',
-        Header: formatMessage({ id: 'customer_name' }),
+        Header: intl.get('customer_name'),
         accessor: 'customer.display_name',
         width: 180,
         className: 'customer_id',
@@ -186,14 +183,14 @@ export function useInvoicesTableColumns() {
 
       {
         id: 'invoice_no',
-        Header: formatMessage({ id: 'invoice_no__' }),
+        Header: intl.get('invoice_no__'),
         accessor: 'invoice_no',
         width: 100,
         className: 'invoice_no',
       },
       {
         id: 'balance',
-        Header: formatMessage({ id: 'balance' }),
+        Header: intl.get('balance'),
         accessor: (r) => (
           <Money amount={r.balance} currency={r.currency_code} />
         ),
@@ -202,26 +199,26 @@ export function useInvoicesTableColumns() {
       },
       {
         id: 'status',
-        Header: formatMessage({ id: 'status' }),
+        Header: intl.get('status'),
         accessor: (row) => statusAccessor(row),
         width: 160,
         className: 'status',
       },
       {
         id: 'due_date',
-        Header: formatMessage({ id: 'due_date' }),
+        Header: intl.get('due_date'),
         accessor: (r) => moment(r.due_date).format('YYYY MMM DD'),
         width: 110,
         className: 'due_date',
       },
       {
         id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
+        Header: intl.get('reference_no'),
         accessor: 'reference_no',
         width: 90,
         className: 'reference_no',
       },
     ],
-    [formatMessage],
+    [],
   );
 }