WIP: Arabic localization.|

client/src/containers/Alerts/AccountActivateAlert.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
-import { AppToaster } from 'components';
+import { AppToaster, FormattedMessage as T } from 'components';
 
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
 import withAlertActions from 'containers/Alert/withAlertActions';
@@ -20,7 +20,7 @@ function AccountActivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: activateAccount,
     isLoading 
@@ -35,9 +35,7 @@ function AccountActivateAlert({
   const handleConfirmAccountActivate = () => {
     activateAccount(accountId).then(() => {
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_account_has_been_successfully_activated',
-        }),
+        message: intl.get('the_account_has_been_successfully_activated'),
         intent: Intent.SUCCESS,
       });
       closeAlert('account-activate');

client/src/containers/Alerts/AccountBulkActivateAlert.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
-import { AppToaster } from 'components';
+import { FormattedMessage as T, AppToaster } from 'components';
 
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';
@@ -20,7 +20,6 @@ function AccountBulkActivateAlert({
 
   requestBulkActivateAccounts,
 }) {
-  const { formatMessage } = useIntl();
   const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
@@ -35,9 +34,7 @@ function AccountBulkActivateAlert({
     requestBulkActivateAccounts(accountsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_accounts_has_been_successfully_activated',
-          }),
+          message: intl.get('the_accounts_has_been_successfully_activated'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('accounts-table');
@@ -52,9 +49,7 @@ function AccountBulkActivateAlert({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={`${formatMessage({
-        id: 'activate',
-      })} (${selectedRowsCount})`}
+      confirmButtonText={`${intl.get('activate')} (${selectedRowsCount})`}
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleClose}

client/src/containers/Alerts/AccountBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -29,7 +30,7 @@ function AccountBulkDeleteAlert({
   // #withAccountsActions
   requestDeleteBulkAccounts,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   const selectedRowsCount = 0;
@@ -43,9 +44,7 @@ function AccountBulkDeleteAlert({
     requestDeleteBulkAccounts(accountsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_accounts_has_been_successfully_deleted',
-          }),
+          message: intl.get('the_accounts_has_been_successfully_deleted'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('accounts-table');
@@ -62,9 +61,7 @@ function AccountBulkDeleteAlert({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={`${formatMessage({
-        id: 'delete',
-      })} (${selectedRowsCount})`}
+      confirmButtonText={`${intl.get('delete')} (${selectedRowsCount})`}
       icon="trash"
       intent={Intent.DANGER}
       isOpen={isOpen}

client/src/containers/Alerts/AccountBulkInactivateAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { AppToaster } from 'components';
@@ -20,7 +21,7 @@ function AccountBulkInactivateAlert({
 
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
   const selectedRowsCount = 0;
 
@@ -34,9 +35,7 @@ function AccountBulkInactivateAlert({
     requestBulkInactiveAccounts(accountsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_accounts_have_been_successfully_inactivated',
-          }),
+          message: intl.get('the_accounts_have_been_successfully_inactivated'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('accounts-table');
@@ -51,9 +50,7 @@ function AccountBulkInactivateAlert({
   return (
     <Alert
       cancelButtonText={<T id={'cancel'} />}
-      confirmButtonText={`${formatMessage({
-        id: 'inactivate',
-      })} (${selectedRowsCount})`}
+      confirmButtonText={`${intl.get('inactivate')} (${selectedRowsCount})`}
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleCancel}

client/src/containers/Alerts/AccountDeleteAlert.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { AppToaster } from 'components';
 
 import { handleDeleteErrors } from 'containers/Accounts/utils';
@@ -28,7 +26,6 @@ function AccountDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
   const { isLoading, mutateAsync: deleteAccount } = useDeleteAccount();
 
   // handle cancel delete account alert.
@@ -40,9 +37,7 @@ function AccountDeleteAlert({
     deleteAccount(accountId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_account_has_been_successfully_deleted',
-          }),
+          message: intl.get('the_account_has_been_successfully_deleted'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/AccountInactivateAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -22,7 +23,7 @@ function AccountInactivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: inactivateAccount,
     isLoading
@@ -35,9 +36,7 @@ function AccountInactivateAlert({
   const handleConfirmAccountActive = () => {
     inactivateAccount(accountId).then(() => {
       AppToaster.show({
-        message: formatMessage({
-          id: 'the_account_has_been_successfully_inactivated',
-        }),
+        message: intl.get('the_account_has_been_successfully_inactivated'),
         intent: Intent.SUCCESS,
       });
     }).catch(() => {

client/src/containers/Alerts/Bills/BillDeleteAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -23,7 +24,7 @@ function BillDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { isLoading, mutateAsync: deleteBillMutate } = useDeleteBill();
 
   // Handle cancel Bill
@@ -36,9 +37,7 @@ function BillDeleteAlert({
     deleteBillMutate(billId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_bill_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_bill_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Bills/BillOpenAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -22,7 +23,7 @@ function BillOpenAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { isLoading, mutateAsync: openBillMutate } = useOpenBill();
 
   // Handle cancel open bill alert.
@@ -35,9 +36,7 @@ function BillOpenAlert({
     openBillMutate(billId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_bill_has_been_opened_successfully',
-          }),
+          message: intl.get('the_bill_has_been_opened_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Currencies/CurrencyDeleteAlert.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { AppToaster } from 'components';
 
 import { useDeleteCurrency } from 'hooks/query';
@@ -27,7 +25,7 @@ function CurrencyDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteCurrency, isLoading } = useDeleteCurrency();
 
   // handle cancel delete currency alert.
@@ -38,9 +36,7 @@ function CurrencyDeleteAlert({
     deleteCurrency(currency_code)
       .then((response) => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_currency_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_currency_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Customers/CustomerBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Customers/utils';
@@ -22,7 +23,7 @@ function CustomerBulkDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   // handle cancel delete  alert.
@@ -38,9 +39,7 @@ function CustomerBulkDeleteAlert({
     requestDeleteBulkCustomers(customersIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_customers_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_customers_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })
@@ -51,7 +50,7 @@ function CustomerBulkDeleteAlert({
         setLoading(false);
         closeAlert(name);
       });
-  }, [requestDeleteBulkCustomers, customersIds, formatMessage]);
+  }, [requestDeleteBulkCustomers, customersIds]);
 
   return (
     <Alert

client/src/containers/Alerts/Customers/CustomerDeleteAlert.js

@@ -1,9 +1,6 @@
 import React, { useCallback } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Customers/utils';
@@ -28,7 +25,7 @@ function CustomerDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteCustomerMutate,
     isLoading
@@ -44,9 +41,7 @@ function CustomerDeleteAlert({
     deleteCustomerMutate(customerId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_customer_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_customer_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })
@@ -56,7 +51,7 @@ function CustomerDeleteAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [deleteCustomerMutate, customerId, closeAlert, name, formatMessage]);
+  }, [deleteCustomerMutate, customerId, closeAlert, name]);
 
   return (
     <Alert

client/src/containers/Alerts/Estimates/EstimateApproveAlert.js

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 
@@ -24,7 +25,7 @@ function EstimateApproveAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deliverEstimateMutate,
     isLoading,
@@ -39,9 +40,7 @@ function EstimateApproveAlert({
     deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_approved_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_approved_successfully'),
           intent: Intent.SUCCESS,
         });
         queryCache.invalidateQueries('estimates-table');
@@ -50,7 +49,7 @@ function EstimateApproveAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [estimateId, deliverEstimateMutate, closeAlert, name, formatMessage]);
+  }, [estimateId, deliverEstimateMutate, closeAlert, name]);
 
   return (
     <Alert

client/src/containers/Alerts/Estimates/EstimateDeleteAlert.js

@@ -1,10 +1,8 @@
 import React, { useCallback } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { useDeleteEstimate } from 'hooks/query';
 
 import { AppToaster } from 'components';
@@ -27,7 +25,7 @@ function EstimateDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteEstimateMutate, isLoading } = useDeleteEstimate();
 
   // handle cancel delete  alert.
@@ -40,9 +38,7 @@ function EstimateDeleteAlert({
     deleteEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Estimates/EstimateDeliveredAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeliverEstimate } from 'hooks/query';
@@ -23,7 +24,7 @@ function EstimateDeliveredAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deliverEstimateMutate, isLoading } = useDeliverEstimate();
 
   // Handle cancel delivered estimate alert.
@@ -36,9 +37,7 @@ function EstimateDeliveredAlert({
     deliverEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_delivered_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_delivered_successfully'),
           intent: Intent.SUCCESS,
         })
       })

client/src/containers/Alerts/Estimates/EstimateRejectAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { AppToaster } from 'components';
@@ -23,7 +24,7 @@ function EstimateRejectAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: rejectEstimateMutate,
     isLoading
@@ -39,9 +40,7 @@ function EstimateRejectAlert({
     rejectEstimateMutate(estimateId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_estimate_has_been_rejected_successfully',
-          }),
+          message: intl.get('the_estimate_has_been_rejected_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/ExchangeRates/ExchangeRateBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { size } from 'lodash';
 import { AppToaster } from 'components';

client/src/containers/Alerts/ExchangeRates/ExchangeRateDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -30,7 +27,7 @@ function ExchangeRateDeleteAlert({
     mutateAsync: deleteExchangeRate,
     isLoading,
   } = useDeleteExchangeRate();
-  const { formatMessage } = useIntl();
+  
 
   // Handle cancel delete exchange rate alert.
   const handleCancelExchangeRateDelete = () => closeAlert(name);
@@ -39,9 +36,7 @@ function ExchangeRateDeleteAlert({
     deleteExchangeRate(exchangeRateId)
       .then((response) => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_exchange_rates_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_exchange_rates_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Expenses/ExpenseBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 

client/src/containers/Alerts/Expenses/ExpenseDeleteAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -20,7 +21,7 @@ function ExpenseDeleteAlert({
   isOpen,
   payload: { expenseId },
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteExpenseMutate,
     isLoading,
@@ -35,8 +36,8 @@ function ExpenseDeleteAlert({
   const handleConfirmExpenseDelete = () => {
     deleteExpenseMutate(expenseId).then(() => {
       AppToaster.show({
-        message: formatMessage(
-          { id: 'the_expense_has_been_deleted_successfully' },
+        message: intl.get(
+          'the_expense_has_been_deleted_successfully',
           { number: expenseId },
         ),
         intent: Intent.SUCCESS,

client/src/containers/Alerts/Expenses/ExpenseDeleteEntriesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/Expenses/ExpensePublishAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -20,7 +21,7 @@ function ExpensePublishAlert({
   payload: { expenseId },
   isOpen,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: publishExpenseMutate, isLoading } = usePublishExpense();
 
   const handleCancelPublishExpense = () => {
@@ -32,9 +33,7 @@ function ExpensePublishAlert({
     publishExpenseMutate(expenseId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_expense_has_been_published',
-          }),
+          message: intl.get('the_expense_has_been_published'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name)

client/src/containers/Alerts/Invoices/InvoiceDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { useDeleteInvoice } from 'hooks/query';
@@ -28,7 +25,7 @@ function InvoiceDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteInvoiceMutate, isLoading } = useDeleteInvoice();
 
   // handle cancel delete invoice alert.
@@ -41,9 +38,7 @@ function InvoiceDeleteAlert({
     deleteInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_invoice_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_invoice_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Invoices/InvoiceDeliverAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeliverInvoice } from 'hooks/query';
@@ -23,7 +24,7 @@ function InvoiceDeliverAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deliverInvoiceMutate,
     isLoading
@@ -39,9 +40,7 @@ function InvoiceDeliverAlert({
     deliverInvoiceMutate(invoiceId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_invoice_has_been_delivered_successfully',
-          }),
+          message: intl.get('the_invoice_has_been_delivered_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/InventoryAdjustmentDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -28,7 +25,7 @@ function InventoryAdjustmentDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteInventoryAdjMutate,
     isLoading
@@ -44,9 +41,7 @@ function InventoryAdjustmentDeleteAlert({
     deleteInventoryAdjMutate(inventoryId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_adjustment_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_adjustment_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemActivateAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -25,7 +26,7 @@ function ItemActivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: activateItem, isLoading }  = useActivateItem();
   
   // Handle activate item alert cancel.
@@ -38,9 +39,7 @@ function ItemActivateAlert({
     activateItem(itemId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_activated_successfully',
-          }),
+          message: intl.get('the_item_has_been_activated_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemBulkDeleteAlert.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { size } from 'lodash';
 import { AppToaster } from 'components';
@@ -26,7 +27,7 @@ function ItemBulkDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   // handle cancel item bulk delete alert.
@@ -39,9 +40,7 @@ function ItemBulkDeleteAlert({
     requestDeleteBulkItems(itemsIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_items_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_items_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemCategoryBulkDeleteAlert.js

@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { size } from 'lodash';
 import { AppToaster } from 'components';
@@ -30,7 +27,7 @@ function ItemCategoryBulkDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [isLoading, setLoading] = useState(false);
 
   // handle cancel bulk delete alert.
@@ -44,9 +41,7 @@ function ItemCategoryBulkDeleteAlert({
     requestDeleteBulkItemCategories(itemCategoriesIds)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_categories_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_item_categories_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemCategoryDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeleteItemCategory } from 'hooks/query';
@@ -27,7 +24,7 @@ function ItemCategoryDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteItemCategory,
     isLoading,
@@ -43,9 +40,7 @@ function ItemCategoryDeleteAlert({
     deleteItemCategory(itemCategoryId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_category_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_item_category_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Items/ItemDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -33,7 +30,7 @@ function ItemDeleteAlert({
   setItemsTableState,
 }) {
   const { mutateAsync: deleteItem, isLoading } = useDeleteItem();
-  const { formatMessage } = useIntl();
+  
 
   // Handle cancel delete item alert.
   const handleCancelItemDelete = () => {
@@ -45,9 +42,7 @@ function ItemDeleteAlert({
     deleteItem(itemId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_item_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         // Reset to page number one.

client/src/containers/Alerts/Items/ItemInactivateAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -23,7 +24,7 @@ function ItemInactivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: inactivateItem, isLoading } = useInactivateItem();
 
   // Handle cancel inactivate alert.
@@ -36,9 +37,7 @@ function ItemInactivateAlert({
     inactivateItem(itemId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_item_has_been_inactivated_successfully',
-          }),
+          message: intl.get('the_item_has_been_inactivated_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/ItemsEntries/ItemsEntriesDeleteAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/ManualJournals/JournalDeleteAlert.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { useDeleteJournal } from 'hooks/query';
 
 import { AppToaster } from 'components';
@@ -23,7 +24,7 @@ function JournalDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteJournalMutate, isLoading } = useDeleteJournal();
 
   // Handle cancel delete manual journal.
@@ -36,8 +37,8 @@ function JournalDeleteAlert({
     deleteJournalMutate(manualJournalId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage(
-            { id: 'the_journal_has_been_deleted_successfully' },
+          message: intl.get(
+            'the_journal_has_been_deleted_successfully',
             { number: journalNumber },
           ),
           intent: Intent.SUCCESS,

client/src/containers/Alerts/ManualJournals/JournalDeleteEntriesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/ManualJournals/JournalPublishAlert.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { usePublishJournal } from 'hooks/query';
 
 import { AppToaster } from 'components';
@@ -23,7 +24,7 @@ function JournalPublishAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: publishJournalMutate, isLoading } = usePublishJournal();
 
   // Handle cancel manual journal alert.
@@ -36,9 +37,7 @@ function JournalPublishAlert({
     publishJournalMutate(manualJournalId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_manual_journal_has_been_published',
-          }),
+          message: intl.get('the_manual_journal_has_been_published'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/PaymentMades/ClearTransactionAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/PaymentMades/ClearningAllLinesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/PaymentMades/PaymentMadeDeleteAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 
@@ -23,7 +24,7 @@ function PaymentMadeDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deletePaymentMadeMutate,
     isLoading,
@@ -37,9 +38,7 @@ function PaymentMadeDeleteAlert({
     deletePaymentMadeMutate(paymentMadeId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_payment_made_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_payment_made_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/PaymentReceives/ClearingAllLinesAlert.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import withAlertActions from 'containers/Alert/withAlertActions';
 import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect';

client/src/containers/Alerts/PaymentReceives/PaymentReceiveDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { useDeletePaymentReceive } from 'hooks/query';
@@ -27,7 +24,7 @@ function PaymentReceiveDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deletePaymentReceiveMutate,
     isLoading,
@@ -43,9 +40,7 @@ function PaymentReceiveDeleteAlert({
     deletePaymentReceiveMutate(paymentReceiveId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_payment_receive_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_payment_receive_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Receipts/ReceiptCloseAlert.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import { Intent, Alert } from '@blueprintjs/core';
 
 import { useCloseReceipt } from 'hooks/query';
@@ -23,7 +24,7 @@ function ReceiptCloseAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: closeReceiptMutate, isLoading } = useCloseReceipt();
 
   // handle cancel delete alert.
@@ -36,9 +37,7 @@ function ReceiptCloseAlert({
     closeReceiptMutate(receiptId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_receipt_has_been_closed_successfully',
-          }),
+          message: intl.get('the_receipt_has_been_closed_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Receipts/ReceiptDeleteAlert.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 
@@ -28,7 +25,7 @@ function NameDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const {
     mutateAsync: deleteReceiptMutate,
     isLoading
@@ -44,9 +41,7 @@ function NameDeleteAlert({
     deleteReceiptMutate(receiptId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_receipt_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_receipt_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })

client/src/containers/Alerts/Users/UserActivateAlert.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 { Alert, Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { useActivateUser } from 'hooks/query';
@@ -23,7 +24,7 @@ function UserActivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   const { mutateAsync: userActivateMutate } = useActivateUser();
 
@@ -31,9 +32,7 @@ function UserActivateAlert({
     userActivateMutate(userId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_user_has_been_activated_successfully',
-          }),
+          message: intl.get('the_user_has_been_activated_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Users/UserDeleteAlert.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Intent, Alert } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 
 import { useDeleteUser } from 'hooks/query';
 import { AppToaster } from 'components';
@@ -24,7 +25,7 @@ function UserDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteUserMutate, isLoading } = useDeleteUser();
 
   const handleCancelUserDelete = () => {
@@ -35,9 +36,7 @@ function UserDeleteAlert({
     deleteUserMutate(userId)
       .then((response) => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_user_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_user_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Users/UserInactivateAlert.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 { Alert, Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import { useInactivateUser } from 'hooks/query';
@@ -23,7 +24,7 @@ function UserInactivateAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   const { mutateAsync: userInactivateMutate } = useInactivateUser();
 
@@ -31,9 +32,7 @@ function UserInactivateAlert({
     userInactivateMutate(userId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_user_has_been_inactivated_successfully',
-          }),
+          message: intl.get('the_user_has_been_inactivated_successfully'),
           intent: Intent.SUCCESS,
         });
         closeAlert(name);

client/src/containers/Alerts/Vendors/VendorDeleteAlert.js

@@ -1,10 +1,8 @@
 import React, { useCallback } from 'react';
-import {
-  FormattedMessage as T,
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
+import intl from 'react-intl-universal';
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
 import { Intent, Alert } from '@blueprintjs/core';
+
 import { AppToaster } from 'components';
 import { transformErrors } from 'containers/Vendors/utils';
 import { useDeleteVendor } from 'hooks/query';
@@ -27,7 +25,7 @@ function VendorDeleteAlert({
   // #withAlertActions
   closeAlert,
 }) {
-  const { formatMessage } = useIntl();
+  
   const { mutateAsync: deleteVendorMutate, isLoading } = useDeleteVendor();
 
   // Handle cancel delete the vendor.
@@ -40,9 +38,7 @@ function VendorDeleteAlert({
     deleteVendorMutate(vendorId)
       .then(() => {
         AppToaster.show({
-          message: formatMessage({
-            id: 'the_vendor_has_been_deleted_successfully',
-          }),
+          message: intl.get('the_vendor_has_been_deleted_successfully'),
           intent: Intent.SUCCESS,
         });
       })
@@ -58,7 +54,7 @@ function VendorDeleteAlert({
       .finally(() => {
         closeAlert(name);
       });
-  }, [deleteVendorMutate, name, closeAlert, vendorId, formatMessage]);
+  }, [deleteVendorMutate, name, closeAlert, vendorId]);
 
   return (
     <Alert