WIP: Arabic localization.|

2026-02-17 13:20:31 +00:00 · 2021-06-10 12:51:00 +02:00
parent 4fc7c37260
commit 1ea32884c2
465 changed files with 3299 additions and 2109 deletions
--- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js
+++ b/client/src/containers/Sales/Estimate/EstimatesDataTable.js
@@ -10,7 +10,8 @@ import {
  Tag,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import moment from 'moment';

 import { CLASSES } from 'common/classes';
@@ -49,7 +50,7 @@ function EstimatesDataTable({
  onDrawerEstimate,
  onSelectedRowsChange,
 }) {
-  const { formatMessage } = useIntl();
+  
  const isLoaded = useIsValuePassed(estimatesLoading, false);

  const handleEditEstimate = useCallback(
@@ -71,17 +72,17 @@ function EstimatesDataTable({
      <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_estimate' })}
+          text={intl.get('edit_estimate')}
          onClick={handleEditEstimate(estimate)}
        />
        <If condition={!estimate.is_delivered}>
          <MenuItem
-            text={formatMessage({ id: 'mark_as_delivered' })}
+            text={intl.get('mark_as_delivered')}
            onClick={() => onDeliverEstimate(estimate)}
          />
        </If>
@@ -90,7 +91,7 @@ function EstimatesDataTable({
            condition={estimate.is_delivered && estimate.is_approved}
          >
            <MenuItem
-              text={formatMessage({ id: 'mark_as_rejected' })}
+              text={intl.get('mark_as_rejected')}
              onClick={() => onRejectEstimate(estimate)}
            />
          </Choose.When>
@@ -98,35 +99,35 @@ function EstimatesDataTable({
            condition={estimate.is_delivered && estimate.is_rejected}
          >
            <MenuItem
-              text={formatMessage({ id: 'mark_as_approved' })}
+              text={intl.get('mark_as_approved')}
              onClick={() => onApproveEstimate(estimate)}
            />
          </Choose.When>
          <Choose.When condition={estimate.is_delivered}>
            <MenuItem
-              text={formatMessage({ id: 'mark_as_approved' })}
+              text={intl.get('mark_as_approved')}
              onClick={() => onApproveEstimate(estimate)}
            />
            <MenuItem
-              text={formatMessage({ id: 'mark_as_rejected' })}
+              text={intl.get('mark_as_rejected')}
              onClick={() => onRejectEstimate(estimate)}
            />
          </Choose.When>
        </Choose>
        <MenuItem
-          text={formatMessage({ id: 'estimate_paper' })}
+          text={intl.get('estimate_paper')}
          onClick={() => onDrawerEstimate()}
        />

        <MenuItem
-          text={formatMessage({ id: 'delete_estimate' })}
+          text={intl.get('delete_estimate')}
          intent={Intent.DANGER}
          onClick={handleDeleteEstimate(estimate)}
          icon={<Icon icon="trash-16" iconSize={16} />}
        />
      </Menu>
    ),
-    [handleDeleteEstimate, handleEditEstimate, formatMessage],
+    [handleDeleteEstimate, handleEditEstimate],
  );

  const onRowContextMenu = useCallback(
@@ -140,28 +141,28 @@ function EstimatesDataTable({
    () => [
      {
        id: 'estimate_date',
-        Header: formatMessage({ id: 'estimate_date' }),
+        Header: intl.get('estimate_date'),
        accessor: (r) => moment(r.estimate_date).format('YYYY MMM DD'),
        width: 140,
        className: 'estimate_date',
      },
      {
        id: 'customer_id',
-        Header: formatMessage({ id: 'customer_name' }),
+        Header: intl.get('customer_name'),
        accessor: 'customer.display_name',
        width: 140,
        className: 'customer_id',
      },
      {
        id: 'expiration_date',
-        Header: formatMessage({ id: 'expiration_date' }),
+        Header: intl.get('expiration_date'),
        accessor: (r) => moment(r.expiration_date).format('YYYY MMM DD'),
        width: 140,
        className: 'expiration_date',
      },
      {
        id: 'estimate_number',
-        Header: formatMessage({ id: 'estimate_number' }),
+        Header: intl.get('estimate_number'),
        accessor: (row) =>
          row.estimate_number ? `#${row.estimate_number}` : null,
        width: 140,
@@ -169,7 +170,7 @@ function EstimatesDataTable({
      },
      {
        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
        accessor: (r) => <Money amount={r.amount} currency={baseCurrency} />,

        width: 140,
@@ -178,7 +179,7 @@ function EstimatesDataTable({

      {
        id: 'status',
-        Header: formatMessage({ id: 'status' }),
+        Header: intl.get('status'),
        accessor: (row) => statusAccessor(row),
        width: 140,
        className: 'status',
@@ -186,7 +187,7 @@ function EstimatesDataTable({

      {
        id: 'reference',
-        Header: formatMessage({ id: 'reference_no' }),
+        Header: intl.get('reference_no'),
        accessor: 'reference',
        width: 140,
        className: 'reference',
@@ -208,7 +209,7 @@ function EstimatesDataTable({
        disableResizing: true,
      },
    ],
-    [actionMenuList, formatMessage],
+    [actionMenuList],
  );

  const handleFetchData = useCallback(
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.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 { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.js
@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
 import { 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 { omit, sumBy, isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -36,7 +37,6 @@ function EstimateForm({
  estimateIncrementMode,
  baseCurrency,
 }) {
-  const { formatMessage } = useIntl();
  const history = useHistory();
  const {
    estimate,
@@ -72,9 +72,7 @@ function EstimateForm({
  const handleErrors = (errors, { setErrors }) => {
    if (errors.some((e) => e.type === ERROR.ESTIMATE_NUMBER_IS_NOT_UNQIUE)) {
      setErrors({
-        estimate_number: formatMessage({
-          id: 'estimate_number_is_not_unqiue',
-        }),
+        estimate_number: intl.get('estimate_number_is_not_unqiue'),
      });
    }
  };
@@ -93,9 +91,7 @@ function EstimateForm({

    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);
@@ -111,12 +107,10 @@ function EstimateForm({
    };
    const onSuccess = (response) => {
      AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'the_estimate_has_been_edited_successfully'
-              : 'the_estimate_has_been_created_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'the_estimate_has_been_edited_successfully'
+            : 'the_estimate_has_been_created_successfully',
          { number: values.estimate_number },
        ),
        intent: Intent.SUCCESS,
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.schema.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateForm.schema.js
@@ -1,32 +1,32 @@
 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({
  customer_id: Yup.number()
-    .label(formatMessage({ id: 'customer_name_' }))
+    .label(intl.get('customer_name_'))
    .required(),
  estimate_date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'estimate_date_' })),
+    .label(intl.get('estimate_date_')),
  expiration_date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'expiration_date_' })),
+    .label(intl.get('expiration_date_')),
  estimate_number: Yup.string()
    .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'estimate_number_' })),
+    .label(intl.get('estimate_number_')),
  reference: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
  note: Yup.string()
    .trim()
    .min(1)
    .max(DATATYPES_LENGTH.STRING)
-    .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')),
  delivered: Yup.boolean(),
  entries: Yup.array().of(
    Yup.object().shape({
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormFooter.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField } from 'formik';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeader.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';

@@ -28,7 +28,7 @@ function EstimateFormHeader({
    <div className={classNames(CLASSES.PAGE_FORM_HEADER)}>
      <EstimateFormHeaderFields />
      <PageFormBigNumber
-        label={formatMessage({ id: 'amount' })}
+        label={intl.get('amount')}
        amount={totalDueAmount}
        currencyCode={baseCurrency}
      />
--- a/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
+++ b/client/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
@@ -6,7 +6,7 @@ import {
  ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField, ErrorMessage } from 'formik';
 import {
  momentFormatter,
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -12,7 +12,8 @@ import {
 } from '@blueprintjs/core';
 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 { If, DashboardActionViewsList } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -30,7 +31,7 @@ function EstimateActionsBar({
  setEstimatesTableState,
 }) {
  const history = useHistory();
-  const { formatMessage } = useIntl();
+  

  const [filterCount, setFilterCount] = useState(0);

@@ -75,7 +76,7 @@ function EstimateActionsBar({
              filterCount <= 0 ? (
                <T id={'filter'} />
              ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+                `${filterCount} ${intl.get('filters_applied')}`
              )
            }
            icon={<Icon icon={'filter-16'} iconSize={16} />}
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesEmptyStatus.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();
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/components.js
@@ -10,7 +10,8 @@ import {
  Position,
 } from '@blueprintjs/core';
 import { Money, Choose, Icon, If } from 'components';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
 import moment from 'moment';

@@ -59,29 +60,29 @@ export function ActionsMenu({
    onConvert,
  },
 }) {
-  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_estimate' })}
+        text={intl.get('edit_estimate')}
        onClick={safeCallback(onEdit, original)}
      />
      <MenuItem
        icon={<Icon icon="convert_to" />}
-        text={formatMessage({ id: 'convert_to_invoice' })}
+        text={intl.get('convert_to_invoice')}
        onClick={safeCallback(onConvert, original)}
      />
      <If condition={!original.is_delivered}>
        <MenuItem
          icon={<Icon icon={'check'} iconSize={18} />}
-          text={formatMessage({ id: 'mark_as_delivered' })}
+          text={intl.get('mark_as_delivered')}
          onClick={safeCallback(onDeliver, original)}
        />
      </If>
@@ -89,37 +90,37 @@ export function ActionsMenu({
        <Choose.When condition={original.is_delivered && original.is_approved}>
          <MenuItem
            icon={<Icon icon={'close-black'} />}
-            text={formatMessage({ id: 'mark_as_rejected' })}
+            text={intl.get('mark_as_rejected')}
            onClick={safeCallback(onReject, original)}
          />
        </Choose.When>
        <Choose.When condition={original.is_delivered && original.is_rejected}>
          <MenuItem
            icon={<Icon icon={'check'} iconSize={18} />}
-            text={formatMessage({ id: 'mark_as_approved' })}
+            text={intl.get('mark_as_approved')}
            onClick={safeCallback(onApprove, original)}
          />
        </Choose.When>
        <Choose.When condition={original.is_delivered}>
          <MenuItem
            icon={<Icon icon={'check'} iconSize={18} />}
-            text={formatMessage({ id: 'mark_as_approved' })}
+            text={intl.get('mark_as_approved')}
            onClick={safeCallback(onApprove, original)}
          />
          <MenuItem
            icon={<Icon icon={'close-black'} />}
-            text={formatMessage({ id: 'mark_as_rejected' })}
+            text={intl.get('mark_as_rejected')}
            onClick={safeCallback(onReject, original)}
          />
        </Choose.When>
      </Choose>
      <MenuItem
        icon={<Icon icon={'receipt-24'} iconSize={16} />}
-        text={formatMessage({ id: 'estimate_paper' })}
+        text={intl.get('estimate_paper')}
        onClick={safeCallback(onDrawer, original)}
      />
      <MenuItem
-        text={formatMessage({ id: 'delete_estimate' })}
+        text={intl.get('delete_estimate')}
        intent={Intent.DANGER}
        onClick={safeCallback(onDelete, original)}
        icon={<Icon icon="trash-16" iconSize={16} />}
@@ -148,13 +149,13 @@ function ActionsCell(props) {
 }

 export function useEstiamtesTableColumns() {
-  const { formatMessage } = useIntl();
+  

  return React.useMemo(
    () => [
      {
        id: 'estimate_date',
-        Header: formatMessage({ id: 'estimate_date' }),
+        Header: intl.get('estimate_date'),
        accessor: 'estimate_date',
        Cell: DateCell,
        width: 140,
@@ -162,14 +163,14 @@ export function useEstiamtesTableColumns() {
      },
      {
        id: 'customer',
-        Header: formatMessage({ id: 'customer_name' }),
+        Header: intl.get('customer_name'),
        accessor: 'customer.display_name',
        width: 140,
        className: 'customer_id',
      },
      {
        id: 'expiration_date',
-        Header: formatMessage({ id: 'expiration_date' }),
+        Header: intl.get('expiration_date'),
        accessor: 'expiration_date',
        Cell: DateCell,
        width: 140,
@@ -177,7 +178,7 @@ export function useEstiamtesTableColumns() {
      },
      {
        id: 'estimate_number',
-        Header: formatMessage({ id: 'estimate_number' }),
+        Header: intl.get('estimate_number'),
        accessor: (row) =>
          row.estimate_number ? `#${row.estimate_number}` : null,
        width: 140,
@@ -185,26 +186,26 @@ export function useEstiamtesTableColumns() {
      },
      {
        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
        accessor: AmountAccessor,
        width: 140,
        className: 'amount',
      },
      {
        id: 'status',
-        Header: formatMessage({ id: 'status' }),
+        Header: intl.get('status'),
        accessor: (row) => statusAccessor(row),
        width: 140,
        className: 'status',
      },
      {
        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
+        Header: intl.get('reference_no'),
        accessor: 'reference',
        width: 90,
        className: 'reference',
      }
    ],
-    [formatMessage],
+    [],
  );
 }
--- a/client/src/containers/Sales/Invoices/InvoiceDetails/InvoicePaper.js
+++ b/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_'),
    },
  };

--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.js
+++ b/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';
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.js
+++ b/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(
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.schema.js
+++ b/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;
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormFooter.js
+++ b/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';
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeader.js
+++ b/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}
      />
--- a/client/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
+++ b/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';
--- a/client/src/containers/Sales/Invoices/InvoiceForm/utils.js
+++ b/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,
    });
  }
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js
+++ b/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} />}
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesEmptyStatus.js
+++ b/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();
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/components.js
+++ b/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],
+    [],
  );
 }
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFloatingActions.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 { useHistory } from 'react-router-dom';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.js
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Formik, Form } from 'formik';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { omit, sumBy, pick, isEmpty, defaultTo } from 'lodash';
 import { Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
@@ -40,7 +40,6 @@ function PaymentReceiveForm({
  baseCurrency,
 }) {
  const history = useHistory();
-  const { formatMessage } = useIntl();

  // Payment receive form context.
  const {
@@ -77,7 +76,7 @@ function PaymentReceiveForm({
      nextPaymentNumber,
      paymentEntriesEditPage,
      paymentReceiveAutoIncrement,
-      preferredDepositAccount
+      preferredDepositAccount,
    ],
  );

@@ -100,9 +99,7 @@ function PaymentReceiveForm({

    if (totalPaymentAmount <= 0) {
      AppToaster.show({
-        message: formatMessage({
-          id: 'you_cannot_make_payment_with_zero_total_amount',
-        }),
+        message: intl.get('you_cannot_make_payment_with_zero_total_amount'),
        intent: Intent.DANGER,
      });
      setSubmitting(false);
@@ -119,11 +116,11 @@ function PaymentReceiveForm({
    // Handle request response success.
    const onSaved = (response) => {
      AppToaster.show({
-        message: formatMessage({
-          id: paymentReceiveId
+        message: intl.get(
+          paymentReceiveId
            ? 'the_payment_receive_transaction_has_been_edited'
            : 'the_payment_receive_transaction_has_been_created',
-        }),
+        ),
        intent: Intent.SUCCESS,
      });
      setSubmitting(false);
@@ -146,13 +143,13 @@ function PaymentReceiveForm({
      if (getError('PAYMENT_RECEIVE_NO_EXISTS')) {
        setFieldError(
          'payment_receive_no',
-          formatMessage({ id: 'payment_number_is_not_unique' }),
+          intl.get('payment_number_is_not_unique'),
        );
      }
      if (getError('PAYMENT_RECEIVE_NO_REQUIRED')) {
        setFieldError(
          'payment_receive_no',
-          formatMessage({ id: 'payment_receive_number_required' }),
+          intl.get('payment_receive_number_required'),
        );
      }
      setSubmitting(false);
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.schema.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveForm.schema.js
@@ -1,22 +1,22 @@
 import * as Yup from 'yup';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { DATATYPES_LENGTH } from 'common/dataTypes';

 const Schema = Yup.object().shape({
  customer_id: Yup.string()
-    .label(formatMessage({ id: 'customer_name_' }))
+    .label(intl.get('customer_name_'))
    .required(),
  payment_date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'payment_date_' })),
+    .label(intl.get('payment_date_')),
  deposit_account_id: Yup.number()
    .required()
-    .label(formatMessage({ id: 'deposit_account_' })),
+    .label(intl.get('deposit_account_')),
  full_amount: Yup.number().nullable(),
  payment_receive_no: Yup.string()
    .nullable()
    .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'payment_receive_no_' })),
+    .label(intl.get('payment_receive_no_')),
  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING).nullable(),
  // statement: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
  entries: Yup.array().of(
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormFooter.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, TextArea } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField } from 'formik';
 import { Row, Col, Postbox } from 'components';
 import { CLASSES } from 'common/classes';
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveFormHeader.js
@@ -3,7 +3,7 @@ import { sumBy } from 'lodash';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { Money } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { CLASSES } from 'common/classes';
 import PaymentReceiveHeaderFields from './PaymentReceiveHeaderFields';
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
@@ -7,7 +7,7 @@ import {
  Button,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { FastField, Field, useFormikContext, ErrorMessage } from 'formik';

 import { useAutofocus } from 'hooks';
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveItemsTable.js
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { CloudLoadingIndicator } from 'components';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import { CLASSES } from 'common/classes';
 import { usePaymentReceiveInnerContext } from './PaymentReceiveInnerProvider';
--- a/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentReceiveForm/components.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import moment from 'moment';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
+
 import { Money } from 'components';
 import { MoneyFieldCell } from 'components/DataTableCells';
 import { safeSumBy, formattedAmount } from 'utils';
-import { formatMessage } from 'services/intl';

 /**
 * Invoice date cell.
@@ -59,7 +59,7 @@ function MoneyTableCell({ row: { original }, value }) {
 }

 function DateFooterCell() {
-  return formatMessage({id:'total'})
+  return intl.get('total')
 }

 /**
@@ -80,7 +80,7 @@ export const usePaymentReceiveEntriesColumns = () => {
        className: 'index',
      },
      {
-        Header: formatMessage({ id: 'Date' }),
+        Header: intl.get('Date'),
        id: 'invoice_date',
        accessor: 'invoice_date',
        Cell: InvoiceDateCell,
@@ -91,13 +91,13 @@ export const usePaymentReceiveEntriesColumns = () => {
        className: 'date',
      },
      {
-        Header: formatMessage({ id: 'invocie_number' }),
+        Header: intl.get('invocie_number'),
        accessor: InvNumberCellAccessor,
        disableSortBy: true,
        className: 'invoice_number',
      },
      {
-        Header: formatMessage({ id: 'invoice_amount' }),
+        Header: intl.get('invoice_amount'),
        accessor: 'amount',
        Footer: BalanceFooterCell,
        Cell: MoneyTableCell,
@@ -106,7 +106,7 @@ export const usePaymentReceiveEntriesColumns = () => {
        className: 'invoice_amount',
      },
      {
-        Header: formatMessage({ id: 'amount_due' }),
+        Header: intl.get('amount_due'),
        accessor: 'due_amount',
        Footer: DueAmountFooterCell,
        Cell: MoneyTableCell,
@@ -115,7 +115,7 @@ export const usePaymentReceiveEntriesColumns = () => {
        className: 'amount_due',
      },
      {
-        Header: formatMessage({ id: 'payment_amount' }),
+        Header: intl.get('payment_amount'),
        accessor: 'payment_amount',
        Cell: MoneyFieldCell,
        Footer: PaymentAmountFooterCell,
@@ -124,6 +124,6 @@ export const usePaymentReceiveEntriesColumns = () => {
        className: 'payment_amount',
      },
    ],
-    [formatMessage],
+    [],
  );
 };
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js
@@ -13,7 +13,7 @@ import {

 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';

 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveViewTabs.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveViewTabs.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { pick } from 'lodash';

 import { DashboardViewsTabs } from 'components';
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesEmptyStatus.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 PaymentReceivesEmptyStatus() {
  const history = useHistory();
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/components.js
@@ -8,7 +8,8 @@ import {
  MenuDivider,
  Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import { Money, Icon } from 'components';
 import { safeCallback } from 'utils';
@@ -20,27 +21,27 @@ export function ActionsMenu({
  row: { original: paymentReceive },
  payload: { onEdit, onDelete, onDrawer },
 }) {
-  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_payment_receive' })}
+        text={intl.get('edit_payment_receive')}
        onClick={safeCallback(onEdit, paymentReceive)}
      />
      <MenuItem
        icon={<Icon icon={'receipt-24'} iconSize={16} />}
-        text={formatMessage({ id: 'payment_receive_paper' })}
+        text={intl.get('payment_receive_paper')}
        onClick={safeCallback(onDrawer, paymentReceive)}
      />
      <MenuItem
-        text={formatMessage({ id: 'delete_payment_receive' })}
+        text={intl.get('delete_payment_receive')}
        intent={Intent.DANGER}
        onClick={safeCallback(onDelete, paymentReceive)}
        icon={<Icon icon="trash-16" iconSize={16} />}
@@ -81,34 +82,34 @@ export function ActionsCell(props) {
 * Retrieve payment receives columns.
 */
 export function usePaymentReceivesColumns() {
-  const { formatMessage } = useIntl();
+  

  return React.useMemo(
    () => [
      {
        id: 'payment_date',
-        Header: formatMessage({ id: 'payment_date' }),
+        Header: intl.get('payment_date'),
        accessor: PaymentDateAccessor,
        width: 140,
        className: 'payment_date',
      },
      {
        id: 'customer',
-        Header: formatMessage({ id: 'customer_name' }),
+        Header: intl.get('customer_name'),
        accessor: 'customer.display_name',
        width: 160,
        className: 'customer_id',
      },
      {
        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
        accessor: AmountAccessor,
        width: 120,
        className: 'amount',
      },
      {
        id: 'payment_receive_no',
-        Header: formatMessage({ id: 'payment_receive_no' }),
+        Header: intl.get('payment_receive_no'),
        accessor: (row) =>
          row.payment_receive_no ? `#${row.payment_receive_no}` : null,
        width: 140,
@@ -116,19 +117,19 @@ export function usePaymentReceivesColumns() {
      },
      {
        id: 'deposit_account',
-        Header: formatMessage({ id: 'deposit_account' }),
+        Header: intl.get('deposit_account'),
        accessor: 'deposit_account.name',
        width: 140,
        className: 'deposit_account_id',
      },
      {
        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
+        Header: intl.get('reference_no'),
        accessor: 'reference_no',
        width: 140,
        className: 'reference_no',
      }
    ],
-    [formatMessage],
+    [],
  );
 }
--- a/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js
+++ b/client/src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js
@@ -1,20 +1,20 @@
 import React from 'react';
 import { useReceiptDrawerContext } from './ReceiptDrawerProvider';
 import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 export default function ReceiptPaper() {
  const { receipt, entries } = useReceiptDrawerContext();

  const propLabels = {
    labels: {
-      name: formatMessage({ id: 'receipt_' }),
-      billedTo: formatMessage({ id: 'billed_to' }),
-      date: formatMessage({ id: 'receipt_date_' }),
-      refNo: formatMessage({ id: 'receipt_no' }),
-      billedFrom: formatMessage({ id: 'billed_from' }),
-      amount: formatMessage({ id: 'receipt_amount' }),
-      dueDate: formatMessage({ id: 'due_date_' }),
+      name: intl.get('receipt_'),
+      billedTo: intl.get('billed_to'),
+      date: intl.get('receipt_date_'),
+      refNo: intl.get('receipt_no'),
+      billedFrom: intl.get('billed_from'),
+      amount: intl.get('receipt_amount'),
+      dueDate: intl.get('due_date_'),
    },
  };

--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.js
@@ -1,7 +1,7 @@
 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 { omit, sumBy, isEmpty } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -39,7 +39,6 @@ function ReceiptForm({
  preferredDepositAccount,
  baseCurrency,
 }) {
-  const { formatMessage } = useIntl();
  const history = useHistory();

  // Receipt form context.
@@ -78,9 +77,7 @@ function ReceiptForm({
  const handleErrors = (errors, { setErrors }) => {
    if (errors.some((e) => e.type === ERROR.SALE_RECEIPT_NUMBER_NOT_UNIQUE)) {
      setErrors({
-        receipt_number: formatMessage({
-          id: 'sale_receipt_number_not_unique',
-        }),
+        receipt_number: intl.get('sale_receipt_number_not_unique'),
      });
    }
  };
@@ -97,9 +94,7 @@ function ReceiptForm({

    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);
@@ -117,12 +112,10 @@ function ReceiptForm({
    // Handle the request success.
    const onSuccess = (response) => {
      AppToaster.show({
-        message: formatMessage(
-          {
-            id: isNewMode
-              ? 'the_receipt_has_been_created_successfully'
-              : 'the_receipt_has_been_edited_successfully',
-          },
+        message: intl.get(
+          isNewMode
+            ? 'the_receipt_has_been_created_successfully'
+            : 'the_receipt_has_been_edited_successfully',
          { number: values.receipt_number },
        ),
        intent: Intent.SUCCESS,
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.schema.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptForm.schema.js
@@ -1,33 +1,33 @@
 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({
  customer_id: Yup.string()
-    .label(formatMessage({ id: 'customer_name_' }))
+    .label(intl.get('customer_name_'))
    .required(),
  receipt_date: Yup.date()
    .required()
-    .label(formatMessage({ id: 'receipt_date_' })),
+    .label(intl.get('receipt_date_')),
  receipt_number: Yup.string()
    .nullable()
    .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'receipt_no_' })),
+    .label(intl.get('receipt_no_')),
  deposit_account_id: Yup.number()
    .required()
-    .label(formatMessage({ id: 'deposit_account_' })),
+    .label(intl.get('deposit_account_')),
  reference_no: Yup.string().min(1).max(DATATYPES_LENGTH.STRING),
  receipt_message: Yup.string()
    .trim()
    .min(1)
    .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'receipt_message_' })),
+    .label(intl.get('receipt_message_')),
  statement: Yup.string()
    .trim()
    .min(1)
    .max(DATATYPES_LENGTH.TEXT)
-    .label(formatMessage({ id: 'note' })),
+    .label(intl.get('note')),
  closed: Yup.boolean(),
  entries: Yup.array().of(
    Yup.object().shape({
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.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 { useFormikContext } from 'formik';
 import { useHistory } from 'react-router-dom';
 import classNames from 'classnames';
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFooter.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { FormGroup, TextArea } from '@blueprintjs/core';
 import { FastField } from 'formik';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Dragzone, Postbox, Row, Col } from 'components';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.js
@@ -7,7 +7,7 @@ import { CLASSES } from 'common/classes';
 import ReceiptFormHeaderFields from './ReceiptFormHeaderFields';

 import { PageFormBigNumber } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';

 import withSettings from 'containers/Settings/withSettings';
 import { compose } from 'redux';
@@ -35,7 +35,7 @@ function ReceiptFormHeader({
        onReceiptNumberChanged={onReceiptNumberChanged}
      />
      <PageFormBigNumber
-        label={formatMessage({ id: 'due_amount' })}
+        label={intl.get('due_amount')}
        amount={totalDueAmount}
        currencyCode={baseCurrency}
      />
--- a/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
+++ b/client/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
@@ -6,7 +6,7 @@ import {
  ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { FastField, ErrorMessage } from 'formik';
 import { CLASSES } from 'common/classes';
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.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 { If, DashboardActionViewsList } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -31,7 +32,7 @@ function ReceiptActionsBar({
  setReceiptsTableState,
 }) {
  const history = useHistory();
-  const { formatMessage } = useIntl();
+  

  const [filterCount, setFilterCount] = useState(0);

@@ -77,7 +78,7 @@ function ReceiptActionsBar({
              filterCount <= 0 ? (
                <T id={'filter'} />
              ) : (
-                `${filterCount} ${formatMessage({ id: 'filters_applied' })}`
+                `${filterCount} ${intl.get('filters_applied')}`
              )
            }
            icon={<Icon icon={'filter-16'} iconSize={16} />}
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsEmptyStatus.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 ReceiptsEmptyStatus() {
  const history = useHistory();
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/components.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/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 {
  Position,
  Menu,
@@ -18,34 +19,34 @@ export function ActionsMenu({
  payload: { onEdit, onDelete, onClose, onDrawer },
  row: { original: receipt },
 }) {
-  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_receipt' })}
+        text={intl.get('edit_receipt')}
        onClick={safeCallback(onEdit, receipt)}
      />
      <If condition={!receipt.is_closed}>
        <MenuItem
          icon={<Icon icon={'check'} iconSize={18} />}
-          text={formatMessage({ id: 'mark_as_closed' })}
+          text={intl.get('mark_as_closed')}
          onClick={safeCallback(onClose, receipt)}
        />
      </If>
      <MenuItem
        icon={<Icon icon={'receipt-24'} iconSize={16} />}
-        text={formatMessage({ id: 'receipt_paper' })}
+        text={intl.get('receipt_paper')}
        onClick={safeCallback(onDrawer, receipt)}
      />
      <MenuItem
-        text={formatMessage({ id: 'delete_receipt' })}
+        text={intl.get('delete_receipt')}
        intent={Intent.DANGER}
        onClick={safeCallback(onDelete, receipt)}
        icon={<Icon icon="trash-16" iconSize={16} />}
@@ -93,60 +94,60 @@ export function StatusAccessor(receipt) {
 * Retrieve receipts table columns.
 */
 export function useReceiptsTableColumns() {
-  const { formatMessage } = useIntl();
+  

  return React.useMemo(
    () => [
      {
        id: 'receipt_date',
-        Header: formatMessage({ id: 'receipt_date' }),
+        Header: intl.get('receipt_date'),
        accessor: (r) => moment(r.receipt_date).format('YYYY MMM DD'),
        width: 140,
        className: 'receipt_date',
      },
      {
        id: 'customer',
-        Header: formatMessage({ id: 'customer_name' }),
+        Header: intl.get('customer_name'),
        accessor: 'customer.display_name',
        width: 140,
        className: 'customer_id',
      },
      {
        id: 'receipt_number',
-        Header: formatMessage({ id: 'receipt_number' }),
+        Header: intl.get('receipt_number'),
        accessor: 'receipt_number',
        width: 140,
        className: 'receipt_number',
      },
      {
        id: 'deposit_account',
-        Header: formatMessage({ id: 'deposit_account' }),
+        Header: intl.get('deposit_account'),
        accessor: 'deposit_account.name',
        width: 140,
        className: 'deposit_account',
      },
      {
        id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
        accessor: (r) => <Money amount={r.amount} currency={r.currency_code} />,
        width: 140,
        className: 'amount',
      },
      {
        id: 'status',
-        Header: formatMessage({ id: 'status' }),
+        Header: intl.get('status'),
        accessor: StatusAccessor,
        width: 140,
        className: 'status',
      },
      {
        id: 'reference_no',
-        Header: formatMessage({ id: 'reference_no' }),
+        Header: intl.get('reference_no'),
        accessor: 'reference_no',
        width: 140,
        className: 'reference_no',
      },
    ],
-    [formatMessage],
+    [],
  );
 }