WIP: Arabic localization.|

client/config/webpack.config.js

@@ -27,6 +27,8 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const CompressionPlugin = require("compression-webpack-plugin");
 
 const postcssNormalize = require('postcss-normalize');
+const { postcssRTLCSS} = require('postcss-rtlcss');
+
 
 const appPackageJson = require(paths.appPackageJson);
 
@@ -92,6 +94,14 @@ module.exports = function(webpackEnv) {
           // https://github.com/facebook/create-react-app/issues/2677
           ident: 'postcss',
           plugins: () => [
+            // Postcss rtlcss plugin.
+            // require( 'postcss-rtl' )({
+            //   // options here.
+            //   removeComments: false,
+            // }),
+            postcssRTLCSS({
+
+            }),    
             require('postcss-flexbugs-fixes'),
             require('postcss-preset-env')({
               autoprefixer: {
@@ -103,11 +113,6 @@ module.exports = function(webpackEnv) {
             // so that it honors browserslist config in package.json
             // which in turn let's users customize the target behavior as per their needs.
             postcssNormalize(),
-
-            // Postcss rtlcss plugin.
-            require( 'postcss-rtl' )({
-              // options here.
-            }),
           ],
           sourceMap: isEnvProduction && shouldUseSourceMap,
         },
@@ -125,6 +130,10 @@ module.exports = function(webpackEnv) {
           loader: require.resolve(preProcessor),
           options: {
             sourceMap: true,
+            sassOptions: {
+              sourceComments: true,
+              outputStyle: 'expanded'
+            }
           },
         }
       );

client/package.json

@@ -74,6 +74,7 @@
     "react-error-boundary": "^3.0.2",
     "react-hotkeys-hook": "^3.0.3",
     "react-intl": "^3.12.0",
+    "react-intl-universal": "^2.4.7",
     "react-loadable": "^5.5.0",
     "react-query": "^3.6.0",
     "react-redux": "^7.1.3",
@@ -94,6 +95,7 @@
     "redux-thunk": "^2.3.0",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
+    "rtl-detect": "^1.0.3",
     "sass-loader": "8.0.2",
     "semver": "6.3.0",
     "style-loader": "0.23.1",
@@ -137,6 +139,7 @@
     "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
     "compression-webpack-plugin": "^6.1.0",
     "http-proxy-middleware": "^1.0.0",
+    "postcss-rtlcss": "^1.7.2",
     "react-query-devtools": "^2.1.1",
     "redux-devtools": "^3.5.0",
     "typescript": "^4.1.2"

client/src/common/contactsOptions.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 export default [
-  { name: formatMessage({ id: 'customer' }), path: 'customers' },
+  { name: intl.get('customer'), path: 'customers' },
-  { name: formatMessage({ id: 'vendor' }), path: 'vendors' },
+  { name: intl.get('vendor'), path: 'vendors' },
 ];

client/src/common/fiscalYearOptions.js

@@ -1,88 +1,64 @@
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
-export default [
+export const getFiscalYearOptions = () => [
   {
     id: 0,
-    name: `${formatMessage({ id: 'january' })} - ${formatMessage({
+    name: `${intl.get('january')} - ${intl.get('december')}`,
-      id: 'december',
-    })}`,
     value: 'january',
   },
   {
     id: 1,
-    name: `${formatMessage({ id: 'february' })} - ${formatMessage({
+    name: `${intl.get('february')} - ${intl.get('january')}`,
-      id: 'january',
-    })}`,
     value: 'february',
   },
   {
     id: 2,
-    name: `${formatMessage({ id: 'march' })} - ${formatMessage({
+    name: `${intl.get('march')} - ${intl.get('february')}`,
-      id: 'february',
-    })}`,
     value: 'March',
   },
   {
     id: 3,
-    name: `${formatMessage({ id: 'april' })} - ${formatMessage({
+    name: `${intl.get('april')} - ${intl.get('march')}`,
-      id: 'march',
-    })}`,
     value: 'april',
   },
   {
     id: 4,
-    name: `${formatMessage({ id: 'may' })} - ${formatMessage({
+    name: `${intl.get('may')} - ${intl.get('april')}`,
-      id: 'april',
-    })}`,
     value: 'may',
   },
   {
     id: 5,
-    name: `${formatMessage({ id: 'june' })} - ${formatMessage({
+    name: `${intl.get('june')} - ${intl.get('may')}`,
-      id: 'may',
-    })}`,
     value: 'june',
   },
   {
     id: 6,
-    name: `${formatMessage({ id: 'july' })} - ${formatMessage({
+    name: `${intl.get('july')} - ${intl.get('june')}`,
-      id: 'june',
-    })}`,
     value: 'july',
   },
   {
     id: 7,
-    name: `${formatMessage({ id: 'august' })} - ${formatMessage({
+    name: `${intl.get('august')} - ${intl.get('july')}`,
-      id: 'july',
-    })}`,
     value: 'August',
   },
   {
     id: 8,
-    name: `${formatMessage({ id: 'september' })} - ${formatMessage({
+    name: `${intl.get('september')} - ${intl.get('august')}`,
-      id: 'august',
-    })}`,
     value: 'september',
   },
   {
     id: 9,
-    name: `${formatMessage({ id: 'october' })} - ${formatMessage({
+    name: `${intl.get('october')} - ${intl.get('november')}`,
-      id: 'november',
-    })}`,
     value: 'october',
   },
   {
     id: 10,
-    name: `${formatMessage({ id: 'november' })} - ${formatMessage({
+    name: `${intl.get('november')} - ${intl.get('october')}`,
-      id: 'october',
-    })}`,
     value: 'november',
   },
   {
     id: 11,
-    name: `${formatMessage({ id: 'december' })} - ${formatMessage({
+    name: `${intl.get('december')} - ${intl.get('november')}`,
-      id: 'november',
-    })}`,
     value: 'december',
   },
 ]

client/src/common/homepageOptions.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export const accountsReceivable = [
   {
@@ -21,12 +21,12 @@ export const accountsReceivable = [
         link: '/receipts',
       },
       {
-        title: <T id={'Customers'} />,
+        title: <T id={'customers'} />,
         description: <T id={'manage_the_customers_relations_with_customer'} />,
         link: '/customers',
       },
       {
-        title: <T id={'customers_payment'} />,
+        title: <T id={'customers_payments'} />,
         description: (
           <T id={'manage_payment_transactions_from_your_customers'} />
         ),

client/src/common/keyboardShortcutsOptions.js

@@ -1,105 +1,105 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 export default [
   {
     shortcut_key: 'Shift + I',
-    description: formatMessage({ id: 'jump_to_the_invoices' }),
+    description: intl.get('jump_to_the_invoices'),
   },
   {
     shortcut_key: 'Shift + E',
-    description: formatMessage({ id: 'jump_to_the_estimates' }),
+    description: intl.get('jump_to_the_estimates'),
   },
   {
     shortcut_key: 'Shift + R',
-    description: formatMessage({ id: 'jump_to_the_receipts' }),
+    description: intl.get('jump_to_the_receipts'),
   },
   {
     shortcut_key: 'Shift + X',
-    description: formatMessage({ id: 'jump_to_the_expenses' }),
+    description: intl.get('jump_to_the_expenses'),
   },
   {
     shortcut_key: 'Shift + C',
-    description: formatMessage({ id: 'jump_to_the_customers' }),
+    description: intl.get('jump_to_the_customers'),
   },
   {
     shortcut_key: 'Shift + V',
-    description: formatMessage({ id: 'jump_to_the_vendors' }),
+    description: intl.get('jump_to_the_vendors'),
   },
   {
     shortcut_key: 'Shift + A',
-    description: formatMessage({ id: 'jump_to_the_chart_of_accounts' }),
+    description: intl.get('jump_to_the_chart_of_accounts'),
   },
   {
     shortcut_key: 'Shift + B',
-    description: formatMessage({ id: 'jump_to_the_bills' }),
+    description: intl.get('jump_to_the_bills'),
   },
   {
     shortcut_key: 'Shift + M',
-    description: formatMessage({ id: 'jump_to_the_manual_journals' }),
+    description: intl.get('jump_to_the_manual_journals'),
   },
   {
     shortcut_key: 'Shift + W',
-    description: formatMessage({ id: 'jump_to_the_items' }),
+    description: intl.get('jump_to_the_items'),
   },
   {
     shortcut_key: 'Shift + 1',
-    description: formatMessage({ id: 'jump_to_the_balance_sheet' }),
+    description: intl.get('jump_to_the_balance_sheet'),
   },
   {
     shortcut_key: 'Shift + 2',
-    description: formatMessage({ id: 'jump_to_the_profit_loss_sheet' }),
+    description: intl.get('jump_to_the_profit_loss_sheet'),
   },
   {
     shortcut_key: 'Shift + 3',
-    description: formatMessage({ id: 'jump_to_the_journal_sheet' }),
+    description: intl.get('jump_to_the_journal_sheet'),
   },
   {
     shortcut_key: 'Shift + 4',
-    description: formatMessage({ id: 'jump_to_the_general_ledger_sheet' }),
+    description: intl.get('jump_to_the_general_ledger_sheet'),
   },
   {
     shortcut_key: 'Shift + 5',
-    description: formatMessage({ id: 'jump_to_the_trial_balance_sheet' }),
+    description: intl.get('jump_to_the_trial_balance_sheet'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + I ',
-    description: formatMessage({ id: 'create_a_new_invoice' }),
+    description: intl.get('create_a_new_invoice'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + E ',
-    description: formatMessage({ id: 'create_a_new_estimate' }),
+    description: intl.get('create_a_new_estimate'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + R ',
-    description: formatMessage({ id: 'create_a_new_receipt' }),
+    description: intl.get('create_a_new_receipt'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + X ',
-    description: formatMessage({ id: 'create_a_new_expense' }),
+    description: intl.get('create_a_new_expense'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + C ',
-    description: formatMessage({ id: 'create_a_new_customer' }),
+    description: intl.get('create_a_new_customer'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + V ',
-    description: formatMessage({ id: 'create_a_new_vendor' }),
+    description: intl.get('create_a_new_vendor'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + B ',
-    description: formatMessage({ id: 'create_a_new_bill' }),
+    description: intl.get('create_a_new_bill'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + M ',
-    description: formatMessage({ id: 'create_a_new_make_journal' }),
+    description: intl.get('create_a_new_make_journal'),
   },
   {
     shortcut_key: 'Ctrl + Shift  + W ',
-    description: formatMessage({ id: 'create_a_new_item' }),
+    description: intl.get('create_a_new_item'),
   },
   {
     shortcut_key: 'Ctrl + / ',
-    description: formatMessage({ id: 'close_and_open_sidebar' }),
+    description: intl.get('close_and_open_sidebar'),
   },
 ];

client/src/common/quickNewOptions.js

@@ -1,11 +1,10 @@
-import React from 'react';
+import intl from 'react-intl-universal';
-import { formatMessage } from 'services/intl';
 
-export default [
+export const getQuickNewActions = () => [
-  { path: 'invoices/new', name: formatMessage({ id: 'sale_invoice' }) },
+  { path: 'invoices/new', name: intl.get('sale_invoice') },
-  { path: 'bills//new', name: formatMessage({ id: 'purchase_invoice' }) },
+  { path: 'bills//new', name: intl.get('purchase_invoice') },
-  { path: 'make-journal-entry', name: formatMessage({ id: 'manual_journal' }) },
+  { path: 'make-journal-entry', name: intl.get('manual_journal') },
-  { path: 'expenses/new', name: formatMessage({ id: 'expense' }) },
+  { path: 'expenses/new', name: intl.get('expense') },
-  { path: 'customers/new', name: formatMessage({ id: 'customer' }) },
+  { path: 'customers/new', name: intl.get('customer') },
-  { path: 'vendors/new', name: formatMessage({ id: 'vendor' }) },
+  { path: 'vendors/new', name: intl.get('vendor') },
 ];

client/src/components/AccountsMultiSelect.js

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useState } from 'react';
 import { omit } from 'lodash';
 import { MenuItem, Button } from '@blueprintjs/core';
 import MultiSelect from 'components/MultiSelect';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function AccountsMultiSelect({ accounts, onAccountSelected }) {
   const [selectedAccounts, setSelectedAccounts] = useState({});

client/src/components/AccountsSelectList.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { filterAccountsByQuery } from './utils';
 import { CLASSES } from 'common/classes';

client/src/components/AccountsSuggestField.js

@@ -5,7 +5,7 @@ import { Suggest } from '@blueprintjs/select';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { filterAccountsByQuery } from './utils';
 
 /**

client/src/components/App.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { RawIntlProvider } from 'react-intl';
 import { Router, Switch, Route } from 'react-router';
 import { createBrowserHistory } from 'history';
 import { QueryClientProvider, QueryClient } from 'react-query';
@@ -7,47 +6,60 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 
 import 'style/App.scss';
 
+import AppIntlLoader from './AppIntlLoader';
 import PrivateRoute from 'components/Guards/PrivateRoute';
-import Authentication from 'components/Authentication';
-import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
 import GlobalErrors from 'containers/GlobalErrors/GlobalErrors';
-import intl from 'services/intl';
+import DashboardPrivatePages from 'components/Dashboard/PrivatePages';
+import Authentication from 'components/Authentication';
 
+// Query client config.
+const queryConfig = {
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: true,
+      staleTime: 30000,
+    },
+  },
+};
+
+// Global fetch query.
+function GlobalFetchQuery({
+  children
+}) {
+  window.localStorage.setItem('lang', 'en');
+  return children
+}
+
+/**
+ * Core application.
+ */
 function App({ locale }) {
   const history = createBrowserHistory();
 
-  const queryConfig = {
+  // Query client.
-    defaultOptions: {
-      queries: {
-        refetchOnWindowFocus: true,
-        staleTime: 30000,
-      },
-    },
-  };
   const queryClient = new QueryClient(queryConfig);
 
   return (
-    <RawIntlProvider value={intl}>
+    <QueryClientProvider client={queryClient}>
-      <QueryClientProvider client={queryClient}>
+      <GlobalFetchQuery>
-        <div className="App">
+        <AppIntlLoader>
-          <Router history={history}>
+          <div className="App">
-            <Switch>
+            <Router history={history}>
-              <Route path={'/auth'}>
+              <Switch>
-                <Authentication />
+                <Route path={'/auth'} component={Authentication} />
-              </Route>
+                <Route path={'/'}>
+                  <PrivateRoute component={DashboardPrivatePages} />
+                </Route>
+              </Switch>
+            </Router>
 
-              <Route path={'/'}>
+            <GlobalErrors />
-                <PrivateRoute component={DashboardPrivatePages} />
+          </div>
-              </Route>
+        </AppIntlLoader>
-            </Switch>
+      </GlobalFetchQuery>
-          </Router>
 
-          <GlobalErrors />
+      <ReactQueryDevtools initialIsOpen />
-        </div>
+    </QueryClientProvider>
-
-        <ReactQueryDevtools initialIsOpen />
-      </QueryClientProvider>
-    </RawIntlProvider>
   );
 }
 

client/src/components/AppIntlLoader.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { find } from 'lodash';
+import rtlDetect from 'rtl-detect';
+import DashboardLoadingIndicator from 'components/Dashboard/DashboardLoadingIndicator';
+
+const SUPPORTED_LOCALES = [
+  { name: "English", value: "en" },
+  { name: 'العربية', value: 'ar' }
+];
+
+/**
+ * Retrieve the current local.
+ */
+function getCurrentLocal() {
+  let currentLocale = intl.determineLocale({
+    urlLocaleKey: "lang",
+    cookieLocaleKey: "lang",
+    localStorageLocaleKey: "lang",
+  });
+  if (!find(SUPPORTED_LOCALES, { value: currentLocale })) {
+    currentLocale = "en";
+  }
+  return currentLocale;
+}
+
+/**
+ * Loads the localization data of the given locale.
+ */
+function loadLocales(currentLocale) {
+  return import(`../lang/${currentLocale}/index.json`);
+}
+
+/**
+ * Modifies the html document direction to RTl if it was rtl-language.
+ */
+function useDocumentDirectionModifier(locale) {
+  React.useEffect(() => {
+    const isRTL = rtlDetect.isRtlLang(locale);
+
+    if (isRTL) {
+      const htmlDocument = document.querySelector('html');
+      htmlDocument.setAttribute('dir', 'rtl');
+      htmlDocument.setAttribute('lang', locale);
+    }
+  }, []);
+}
+
+/**
+ * Application Intl loader.
+ */
+export default function AppIntlLoader({
+  children
+}) {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const currentLocale = getCurrentLocal();
+
+  // Modifies the html document direction
+  useDocumentDirectionModifier(currentLocale);
+
+  React.useEffect(() => {
+    // Lodas the locales data file.
+    loadLocales(currentLocale).then((results) => {
+      return intl.init({
+        currentLocale,
+        locales: {
+          [currentLocale]: results,
+        },
+      });
+    }).then(() => {
+      setIsLoading(false);
+    });
+  }, [currentLocale, setIsLoading]);
+
+  return (
+    <DashboardLoadingIndicator isLoading={isLoading}>
+      {children}
+    </DashboardLoadingIndicator>
+  ); 
+}

client/src/components/Authentication.js

@@ -3,7 +3,7 @@ import { Redirect, Route, Switch, Link, useLocation } from 'react-router-dom';
 import BodyClassName from 'react-body-classname';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import authenticationRoutes from 'routes/authentication';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import Icon from 'components/Icon';
 import { useIsAuthenticated } from 'hooks/state';
 
@@ -32,6 +32,7 @@ export default function AuthenticationWrapper({ ...rest }) {
             >
               <T id={'go_to_bigcapital_com'} />
             </a>
+
             <div class="authentication-page__form-wrapper">
               <div class="authentication-insider">
                 <div className={'authentication-insider__logo-section'}>

client/src/components/CategoriesSelectList.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { ListSelect } from 'components';
 import { MenuItem } from '@blueprintjs/core';
 import { saveInvoke } from 'utils';

client/src/components/ContactSelecetList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
 import classNames from 'classnames';

client/src/components/ContactsMultiSelect.js

@@ -2,7 +2,7 @@ import React, { useMemo, useCallback, useState } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { omit } from 'lodash';
 import MultiSelect from 'components/MultiSelect';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function ContactsMultiSelect({
   contacts,

client/src/components/ContactsSuggestField.js

@@ -2,16 +2,16 @@ import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { Suggest } from '@blueprintjs/select';
 
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 export default function ContactsSuggestField({
   contactsList,
   initialContactId,
   selectedContactId,
-  defaultTextSelect = formatMessage({id:'select_contact'}),
+  defaultTextSelect = intl.get('select_contact'),
   onContactSelected,
 
   selectedContactType = [],

client/src/components/CurrencySelectList.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import classNames from 'classnames';
 import { MenuItem, Button } from '@blueprintjs/core';

client/src/components/Dashboard/Dashboard.js

@@ -30,7 +30,7 @@ export default function Dashboard() {
         <Route path="/">
           <DashboardSplitPane>
             <Sidebar />
-            <DashboardContent />
+          <DashboardContent />
           </DashboardSplitPane>
         </Route>
       </Switch>

client/src/components/Dashboard/DashboardActionViewsList.js

@@ -9,7 +9,7 @@ import {
   PopoverInteractionKind,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Icon } from 'components';
 
 /**

client/src/components/Dashboard/DashboardBackLink.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
 import { useHistory } from 'react-router-dom';
-import routes from 'routes/dashboard';
+import { getDashboardRoutes } from 'routes/dashboard';
 import { If, Icon } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import { compose } from 'utils';
 
@@ -32,7 +32,7 @@ function DashboardBackLink({ dashboardBackLink, breadcrumbs }) {
 }
 
 export default compose(
-  withBreadcrumbs(routes),
+  withBreadcrumbs([]),
   withDashboard(({ dashboardBackLink }) => ({
     dashboardBackLink,
   })),

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -6,7 +6,7 @@ import {
   Boundary,
 } from '@blueprintjs/core';
 import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
-import routes from 'routes/dashboard';
+import { getDashboardRoutes } from 'routes/dashboard';
 import { useHistory } from 'react-router-dom';
 
 function DashboardBreadcrumbs({ breadcrumbs }){
@@ -31,4 +31,4 @@ function DashboardBreadcrumbs({ breadcrumbs }){
   )
 }
 
-export default withBreadcrumbs(routes)(DashboardBreadcrumbs)
+export default withBreadcrumbs([])(DashboardBreadcrumbs)

client/src/components/Dashboard/DashboardContentRoute.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
-import routes from 'routes/dashboard';
+
+import { getDashboardRoutes } from 'routes/dashboard';
 import DashboardPage from './DashboardPage';
 
 /**
  * Dashboard content route.
  */
 export default function DashboardContentRoute() {
+  const routes = getDashboardRoutes();
+
   return (
     <Route pathname="/">
       <Switch>

client/src/components/Dashboard/DashboardTopbar.js

@@ -9,7 +9,7 @@ import {
   Tooltip,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
 import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';

client/src/components/Dashboard/DashboardViewsTabs.js

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import PropTypes from 'prop-types';
 import { Button, Tabs, Tab, Tooltip, Position } from '@blueprintjs/core';
 import { useHistory } from 'react-router';

client/src/components/Dashboard/GlobalHotkeys.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useHistory } from 'react-router-dom';
-import routes from 'routes/dashboard';
+import { getDashboardRoutes } from 'routes/dashboard';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import { compose } from 'utils';
 
@@ -10,6 +10,7 @@ function GlobalHotkeys({
   toggleSidebarExpend,
 }) {
   const history = useHistory();
+  const routes = getDashboardRoutes();
 
   const globalHotkeys = routes
     .filter(({ hotkey }) => hotkey)

client/src/components/Dashboard/TopbarUser.js

@@ -8,7 +8,7 @@ import {
   Popover,
   Position,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import { firstLettersArgs } from 'utils';
 import { useAuthActions, useAuthUser } from 'hooks/state';

client/src/components/DataTable.js

@@ -10,7 +10,7 @@ import {
   useAsyncDebounce,
 } from 'react-table';
 import { useSticky } from 'react-table-sticky';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 import { useUpdateEffect } from 'hooks';
 import { saveInvoke } from 'utils';
@@ -209,6 +209,6 @@ DataTable.defaultProps = {
   TablePaginationRenderer: TablePagination,
   TableNoResultsRowRenderer: TableNoResultsRow,
 
-  noResults: formatMessage({ id: 'there_is_no_results_in_the_table' }),
+  noResults: '',
   payload: {},
 };

client/src/components/DataTableCells/ItemsListCell.js

@@ -4,7 +4,7 @@ import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
 
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 import { useCellAutoFocus } from 'hooks';
 
@@ -41,7 +41,7 @@ export default function ItemsListCell({
         purchasable={filterPurchasable}
         inputProps={{
           inputRef: (ref) => (fieldRef.current = ref),
-          placeholder: formatMessage({ id: 'enter_an_item' }),
+          placeholder: intl.get('enter_an_item'),
         }}
         openOnKeyDown={true}
         blurOnSelectClose={false}

client/src/components/Datatable/TableCell.js

@@ -46,6 +46,8 @@ export default function TableCell({
     );
   }
 
+  const isRTL = true;
+
   return (
     <div
       {...cell.getCellProps({
@@ -62,7 +64,7 @@ export default function TableCell({
           'cell-inner',
         )}
         style={{
-          paddingLeft:
+          [isRTL ? 'paddingRight' : 'paddingLeft']:
             isExpandColumn && expandable
               ? `${depth * expandColumnSpace}rem`
               : '',

client/src/components/Datatable/TableNoResultsRow.js

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import intl from 'react-intl-universal';
 import TableContext from './TableContext';
 
 /**
@@ -6,12 +7,15 @@ import TableContext from './TableContext';
  */
 export default function TableNoResultsRow() {
   const {
-    props: { noResults }
+    props: { noResults },
   } = useContext(TableContext);
 
+  const noResultText =
+    noResults || intl.get('there_is_no_results_in_the_table');
+
   return (
     <div className={'tr no-results'}>
-      <div class="td">{ noResults }</div>
+      <div class="td">{noResultText}</div>
     </div>
   );
-}
+}

client/src/components/Dragzone.js

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { useDropzone } from 'react-dropzone';
 import classNames from 'classnames';
 import Icon from 'components/Icon';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 // const initialFile: {
 //   file: ?File,
@@ -12,7 +12,7 @@ import { formatMessage } from 'services/intl';
 // };
 
 export default function Dropzone({
-  text = formatMessage({ id: 'drag_drop_files_here_or_click_here' }),
+  text = intl.get('drag_drop_files_here_or_click_here'),
   onDrop,
   initialFiles = [],
   onDeleteFile,

client/src/components/Drawer/DrawerHeaderContent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Classes, Icon, H4, Button } from '@blueprintjs/core';
 
 import withDrawerActions from 'containers/Drawer/withDrawerActions';

client/src/components/DynamicFilter/DynamicFilterCompatatorField.js

@@ -1,17 +1,15 @@
 import React, { useMemo } from 'react';
 import { HTMLSelect, Classes } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
+import intl from 'react-intl-universal';
 import { getConditionTypeCompatators } from './DynamicFilterCompatators';
 
 export default function DynamicFilterCompatatorField({
   dataType,
   ...restProps
 }) {
-  const { formatMessage } = useIntl();
-
   const options = useMemo(
     () => getConditionTypeCompatators(dataType).map(comp => ({
-      value: comp.value, label: formatMessage({ id: comp.label_id }),
+      value: comp.value, label: intl.get(comp.label_id),
     })),
     [dataType]
   );

client/src/components/DynamicFilter/DynamicFilterValueField.js

@@ -10,7 +10,8 @@ import { connect } from 'react-redux';
 import { useQuery } from 'react-query';
 import { DateInput } from '@blueprintjs/datetime';
 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 { debounce } from 'lodash';
 import moment from 'moment';
 
@@ -45,7 +46,7 @@ function DynamicFilterValueField({
   onChange,
   inputDebounceWait = 250,
 }) {
-  const { formatMessage } = useIntl();
+  
   const [localValue, setLocalValue] = useState();
 
   // Makes `localValue` controlled mode from `value`.
@@ -185,7 +186,7 @@ function DynamicFilterValueField({
 
         <Choose.Otherwise>
           <InputGroup
-            placeholder={formatMessage({ id: 'value' })}
+            placeholder={intl.get('value')}
             onChange={handleInputChange}
             value={localValue}
           />

client/src/components/FilterDropdown.js

@@ -12,7 +12,8 @@ import { isEqual, last } from 'lodash';
 import { usePrevious } from 'react-use';
 import Icon from 'components/Icon';
 import { checkRequiredProperties, uniqueMultiProps } from 'utils';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { FormattedMessage as T } from 'components';
+import intl from 'react-intl-universal';
 import {
   DynamicFilterValueField,
   DynamicFilterCompatatorField,
@@ -41,7 +42,7 @@ export default function FilterDropdown({
   initialCondition,
   initialConditions,
 }) {
-  const { formatMessage } = useIntl();
+  
 
   // Fields key -> metadata table.
   const fieldsKeyMapped = useMemo(() =>
@@ -51,10 +52,10 @@ export default function FilterDropdown({
   // Conditions options.
   const conditionalsOptions = useMemo(
     () => [
-      { value: '&&', label: formatMessage({ id: 'and' }) },
+      { value: '&&', label: intl.get('and') },
-      { value: '||', label: formatMessage({ id: 'or' }) },
+      { value: '||', label: intl.get('or') },
     ],
-    [formatMessage],
+    [],
   );
   // Resources fileds options for fields options.
   const resourceFieldsOptions = useMemo(
@@ -91,7 +92,7 @@ export default function FilterDropdown({
     if (values.conditions.length >= 12) {
       limitToast = Toaster.show(
         {
-          message: formatMessage({ id: 'you_reached_conditions_limit' }),
+          message: intl.get('you_reached_conditions_limit'),
           intent: Intent.WARNING,
         },
         limitToast,
@@ -102,7 +103,7 @@ export default function FilterDropdown({
         defaultFilterCondition
       ]);
     }
-  }, [values, setFieldValue, formatMessage, defaultFilterCondition]);
+  }, [values, setFieldValue, defaultFilterCondition]);
 
   // Filtered conditions that filters conditions that don't contain atleast 
   // on required fields or fileds keys that not exists. 

client/src/components/FinancialSheet.js

@@ -1,7 +1,8 @@
 import React, { useMemo, useCallback } from 'react';
 import moment from 'moment';
 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 'style/pages/FinancialStatements/FinancialSheet.scss';
 
@@ -23,7 +24,7 @@ export default function FinancialSheet({
   fullWidth = false,
   currentDate = true,
 }) {
-  const { formatMessage } = useIntl();
+  
   const format = 'DD MMMM YYYY';
   const formattedFromDate = useMemo(() => moment(fromDate).format(format), [
     fromDate,
@@ -38,10 +39,10 @@ export default function FinancialSheet({
   const nameModifer = name ? `financial-sheet--${name}` : '';
   const methodsLabels = useMemo(
     () => ({
-      cash: formatMessage({ id: 'cash' }),
+      cash: intl.get('cash'),
-      accrual: formatMessage({ id: 'accrual' }),
+      accrual: intl.get('accrual'),
     }),
-    [formatMessage],
+    [],
   );
   const getBasisLabel = useCallback((b) => methodsLabels[b], [methodsLabels]);
   const basisLabel = useMemo(() => getBasisLabel(basis), [

client/src/components/FormattedMessage.js

@@ -0,0 +1,9 @@
+import intl from 'react-intl-universal';
+
+export function FormattedMessage({ id }) {
+  return intl.get(id);
+}
+
+export function FormattedHTMLMessage({ ...args }) {
+  return intl.formatHTMLMessage({ ...args })
+}

client/src/components/ItemsSuggestField.js

@@ -5,7 +5,7 @@ import { CLASSES } from 'common/classes';
 
 import { Suggest } from '@blueprintjs/select';
 
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default function ItemsSuggestField({
   items,

client/src/components/ListSelect.js

@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { Button, MenuItem } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from './FormattedMessage';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
 

client/src/components/NumberFormatDropdown/NumberFormatFields.js

@@ -3,7 +3,7 @@ import { FastField, ErrorMessage } from 'formik';
 import { FormGroup, Checkbox, Switch } from '@blueprintjs/core';
 import { CLASSES } from 'common/classes';
 import { ListSelect } from 'components';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { inputIntent } from 'utils';
 import {
   moneyFormat,

client/src/components/NumberFormatDropdown/NumberFormatFooter.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { useFormikContext } from 'formik';
 import { Button, Classes, Intent } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 /**
  * Number format footer.

client/src/components/Pagination.js

@@ -1,7 +1,7 @@
 import React, { useReducer, useEffect } from 'react';
 import classNames from 'classnames';
 import { Button, ButtonGroup, Intent, HTMLSelect } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import PropTypes from 'prop-types';
 import { range } from 'lodash';
 import { Icon } from 'components';

client/src/components/PaymentReceiveListField.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import ListSelect from 'components/ListSelect';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 function PaymentReceiveListField({
   invoices,

client/src/components/Preferences/PreferencesSidebar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { useHistory, useLocation } from 'react-router-dom';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import preferencesMenu from 'config/preferencesMenu';
 import PreferencesSidebarContainer from './PreferencesSidebarContainer';
 

client/src/components/SalutationList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 import { ListSelect } from 'components';
 
@@ -15,7 +15,7 @@ export default function SalutationList({ ...restProps }) {
       items={items}
       selectedItemProp={'key'}
       textProp={'label'}
-      defaultText={formatMessage({ id: 'salutation' })}
+      defaultText={intl.get('salutation')}
       filterable={false}
       {...restProps}
     />

client/src/components/index.js

@@ -3,6 +3,7 @@ import Money from './Money';
 import Icon from './Icon';
 import Choose from './Utils/Choose';
 import For from './Utils/For';
+import { FormattedMessage, FormattedHTMLMessage } from './FormattedMessage';
 import ListSelect from './ListSelect';
 import FinancialStatement from './FinancialStatement';
 import DynamicFilterValueField from './DynamicFilter/DynamicFilterValueField';
@@ -58,14 +59,19 @@ import MaterialProgressBar from './MaterialProgressBar';
 
 const Hint = FieldHint;
 
+const T = FormattedMessage;
+
 export {
   If,
   For,
-  Money,
+  Choose,
   Icon,
+  FormattedMessage,
+  FormattedHTMLMessage,
+  T,
+  Money,
   ListSelect,
   FinancialStatement,
-  Choose,
   DynamicFilterValueField,
   DynamicFilterCompatatorField,
   MODIFIER,

client/src/config/financialReportsMenu.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export const financialReportMenus = [
   {
@@ -66,7 +66,7 @@ export const SalesAndPurchasesReportMenus = [
         desc: (
           <T
             id={
-              'shows_the_average_age_of_unresolved_issues_for_a_project_or_filter'
+              'summarize_the_business_s_purchase_items_quantity_cost_and_average'
             }
           />
         ),
@@ -107,7 +107,9 @@ export const SalesAndPurchasesReportMenus = [
       },
       {
         title: <T id={'vendors_balance_summary'} />,
-        desc: 'summerize_the_total_amount_your_business_owes_each_vendor',
+        desc: (
+          <T id={'summerize_the_total_amount_your_business_owes_each_vendor'} />
+        ),
         link: '/financial-reports/vendors-balance-summary',
       },
       {

client/src/config/preferencesMenu.js

@@ -1,5 +1,5 @@
 import React  from 'react'
-import { FormattedMessage as T} from 'react-intl';
+import {  FormattedMessage as T } from 'components';
 
 export default [
   {

client/src/config/sidebarMenu.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 export default [
   {
@@ -16,7 +16,7 @@ export default [
     text: <T id={'items'} />,
     children: [
       {
-        text: <T id={'items_list'} />,
+        text: <T id={'items'} />,
         href: '/items',
       },
       {
@@ -67,7 +67,7 @@ export default [
         newTabHref: '/bills/new',
       },
       {
-        text: <T id={'payment_made'} />,
+        text: <T id={'payment_mades'} />,
         href: '/payment-mades',
         newTabHref: '/payment-mades/new',
       },

client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js

@@ -12,7 +12,7 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 
 import { useManualJournalsContext } from './ManualJournalsListProvider';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

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

client/src/containers/Accounting/JournalsLanding/components.js

@@ -11,11 +11,11 @@ import {
   MenuDivider,
   Popover,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import moment from 'moment';
 import { Choose, Money, If, Icon } from 'components';
 import { safeCallback } from 'utils';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 
 /**
  * Amount accessor.
@@ -155,24 +155,24 @@ export const ActionsMenu = ({
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <If condition={!original.is_published}>
         <MenuItem
           icon={<Icon icon="arrow-to-top" />}
-          text={formatMessage({ id: 'publish_journal' })}
+          text={intl.get('publish_journal')}
           onClick={safeCallback(onPublish, original)}
         />
       </If>
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_journal' })}
+        text={intl.get('edit_journal')}
         onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
-        text={formatMessage({ id: 'delete_journal' })}
+        text={intl.get('delete_journal')}
         icon={<Icon icon="trash-16" iconSize={16} />}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}

client/src/containers/Accounting/JournalsLanding/utils.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import moment from 'moment';
 import {
   NoteAccessor,
@@ -16,42 +16,42 @@ export const useManualJournalsColumns = () => {
     () => [
       {
         id: 'date',
-        Header: formatMessage({ id: 'date' }),
+        Header: intl.get('date'),
         accessor: DateAccessor,
         width: 115,
         className: 'date',
       },
       {
         id: 'amount',
-        Header: formatMessage({ id: 'amount' }),
+        Header: intl.get('amount'),
         accessor: AmountAccessor,
         className: 'amount',
         width: 115,
       },
       {
         id: 'journal_number',
-        Header: formatMessage({ id: 'journal_no' }),
+        Header: intl.get('journal_no'),
         accessor: (row) => `#${row.journal_number}`,
         className: 'journal_number',
         width: 100,
       },
       {
         id: 'journal_type',
-        Header: formatMessage({ id: 'journal_type' }),
+        Header: intl.get('journal_type'),
         accessor: 'journal_type',
         width: 110,
         className: 'journal_type',
       },
       {
         id: 'status',
-        Header: formatMessage({ id: 'publish' }),
+        Header: intl.get('publish'),
         accessor: (row) => StatusAccessor(row),
         width: 95,
         className: 'status',
       },
       {
         id: 'note',
-        Header: formatMessage({ id: 'note' }),
+        Header: intl.get('note'),
         accessor: NoteAccessor,
         disableSortBy: true,
         width: 85,
@@ -59,7 +59,7 @@ export const useManualJournalsColumns = () => {
       },
       {
         id: 'created_at',
-        Header: formatMessage({ id: 'created_at' }),
+        Header: intl.get('created_at'),
         accessor: (r) => moment(r.created_at).format('YYYY MMM DD'),
         width: 125,
         className: 'created_at',

client/src/containers/Accounting/MakeJournal/MakeJournalEntries.schema.js

@@ -1,5 +1,5 @@
 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({
@@ -7,15 +7,15 @@ const Schema = Yup.object().shape({
     .required()
     .min(1)
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'journal_number_' })),
+    .label(intl.get('journal_number_')),
   journal_type: Yup.string()
     .required()
     .min(1)
     .max(DATATYPES_LENGTH.STRING)
-    .label(formatMessage({ id: 'journal_type' })),
+    .label(intl.get('journal_type')),
   date: Yup.date()
     .required()
-    .label(formatMessage({ id: 'date' })),
+    .label(intl.get('date')),
   currency_code: Yup.string().max(3),
   publish: Yup.boolean(),
   reference: Yup.string().nullable().min(1).max(DATATYPES_LENGTH.STRING),

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesFooter.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 { CLASSES } from 'common/classes';
 import classNames from 'classnames';

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesForm.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 { defaultTo, isEmpty, omit } from 'lodash';
 import classNames from 'classnames';
 import { useHistory } from 'react-router-dom';
@@ -48,7 +48,6 @@ function MakeJournalEntriesForm({
     submitPayload,
   } = useMakeJournalFormContext();
 
-  const { formatMessage } = useIntl();
   const history = useHistory();
 
   // New journal number.
@@ -92,18 +91,14 @@ function MakeJournalEntriesForm({
     // Validate the total credit should be eqials total debit.
     if (totalCredit !== totalDebit) {
       AppToaster.show({
-        message: formatMessage({
+        message: intl.get('should_total_of_credit_and_debit_be_equal'),
-          id: 'should_total_of_credit_and_debit_be_equal',
-        }),
         intent: Intent.DANGER,
       });
       setSubmitting(false);
       return;
     } else if (totalCredit === 0 || totalDebit === 0) {
       AppToaster.show({
-        message: formatMessage({
+        message: intl.get('amount_cannot_be_zero_or_empty'),
-          id: 'amount_cannot_be_zero_or_empty',
-        }),
         intent: Intent.DANGER,
       });
       setSubmitting(false);
@@ -131,12 +126,10 @@ function MakeJournalEntriesForm({
     // Handle the request success.
     const handleSuccess = (errors) => {
       AppToaster.show({
-        message: formatMessage(
+        message: intl.get(
-          {
+          isNewMode
-            id: isNewMode
+            ? 'the_journal_has_been_created_successfully'
-              ? 'the_journal_has_been_created_successfully'
+            : 'the_journal_has_been_edited_successfully',
-              : 'the_journal_has_been_edited_successfully',
-          },
           { number: values.journal_number },
         ),
         intent: Intent.SUCCESS,

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useFormikContext } from 'formik';
 import { CLASSES } from 'common/classes';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import MakeJournalEntriesHeaderFields from './MakeJournalEntriesHeaderFields';
 import { PageFormBigNumber } from 'components';
 import { safeSumBy } from 'utils';

client/src/containers/Accounting/MakeJournal/MakeJournalEntriesHeaderFields.js

@@ -7,7 +7,7 @@ import {
 } from '@blueprintjs/core';
 import { FastField, ErrorMessage } from 'formik';
 import { DateInput } from '@blueprintjs/datetime';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import classNames from 'classnames';
 
 import { CLASSES } from 'common/classes';

client/src/containers/Accounting/MakeJournal/MakeJournalFormFloatingActions.js

@@ -11,7 +11,7 @@ import {
 } from '@blueprintjs/core';
 import { useFormikContext } from 'formik';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { CLASSES } from 'common/classes';
 import { Icon, If } from 'components';
 import { useHistory } from 'react-router-dom';

client/src/containers/Accounting/MakeJournal/MakeJournalFormFooter.js

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

client/src/containers/Accounting/MakeJournal/components.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Intent, Position, Button, Tooltip } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { Icon, Money, Hint } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -30,14 +30,14 @@ export function ContactHeaderCell() {
  * Credit header cell.
  */
 export function CreditHeaderCell({ payload: { currencyCode } }) {
-  return formatMessage({ id: 'credit_currency' }, { currency: currencyCode });
+  return intl.get('credit_currency', { currency: currencyCode });
 }
 
 /**
  * debit header cell.
  */
 export function DebitHeaderCell({ payload: { currencyCode } }) {
-  return formatMessage({ id: 'debit_currency' }, { currency: currencyCode });
+  return intl.get('debit_currency', { currency: currencyCode });
 }
 
 /**
@@ -46,7 +46,7 @@ export function DebitHeaderCell({ payload: { currencyCode } }) {
 function AccountFooterCell({ payload: { currencyCode } }) {
   return (
     <span>
-      {formatMessage({ id: 'total_currency' }, { currency: currencyCode })}
+      {intl.get('total_currency', { currency: currencyCode })}
     </span>
   );
 }
@@ -120,7 +120,7 @@ export const useJournalTableEntriesColumns = () => {
         sticky: 'left',
       },
       {
-        Header: formatMessage({ id: 'account' }),
+        Header: intl.get('account'),
         id: 'account_id',
         accessor: 'account_id',
         Cell: AccountsListFieldCell,
@@ -157,7 +157,7 @@ export const useJournalTableEntriesColumns = () => {
         width: 120,
       },
       {
-        Header: formatMessage({ id: 'note' }),
+        Header: intl.get('note'),
         accessor: 'note',
         Cell: InputGroupCell,
         disableSortBy: true,
@@ -174,6 +174,6 @@ export const useJournalTableEntriesColumns = () => {
         width: 45,
       },
     ],
-    [formatMessage],
+    [],
   );
 };

client/src/containers/Accounting/MakeJournal/utils.js

@@ -10,7 +10,7 @@ import {
   transformToForm,
 } from 'utils';
 import { AppToaster } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { useFormikContext } from 'formik';
 
 const ERROR = {
@@ -118,23 +118,19 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
 
   if ((error = getError(ERROR.RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS))) {
     toastMessages.push(
-      formatMessage({
+      intl.get('should_select_customers_with_entries_have_receivable_account'),
-        id: 'should_select_customers_with_entries_have_receivable_account',
-      }),
     );
     setEntriesErrors(error.indexes, 'contact_id', 'error');
   }
   if ((error = getError(ERROR.ENTRIES_SHOULD_ASSIGN_WITH_CONTACT))) {
     if (error.meta.find(meta => meta.contact_type === 'customer')) {
       toastMessages.push(
-        formatMessage({
+        intl.get('receivable_accounts_should_assign_with_customers'),
-          id: 'receivable_accounts_should_assign_with_customers',
-        }),
       );
     }
     if (error.meta.find(meta => meta.contact_type === 'vendor')) {
       toastMessages.push(
-        formatMessage({ id: 'payable_accounts_should_assign_with_vendors' }),
+        intl.get('payable_accounts_should_assign_with_vendors'),
       );
     }
     const indexes = error.meta.map((meta => meta.indexes)).flat();
@@ -144,9 +140,7 @@ export const transformErrors = (resErrors, { setErrors, errors }) => {
     newErrors = setWith(
       newErrors,
       'journal_number',
-      formatMessage({
+      intl.get('journal_number_is_already_used'),
-        id: 'journal_number_is_already_used',
-      }),
     );
   }
   setErrors({ ...newErrors });

client/src/containers/Accounts/AccountsActionsBar.js

@@ -12,7 +12,7 @@ import {
   Intent,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
-import { FormattedMessage as T } from 'react-intl';
+import { FormattedMessage as T } from 'components';
 import { If, DashboardActionViewsList } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';

client/src/containers/Accounts/components.js

@@ -10,9 +10,8 @@ import {
   Popover,
   Button,
 } from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
 import { Icon, Money, If } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { safeCallback } from 'utils';
 
 /**
@@ -34,37 +33,37 @@ export function ActionsMenu({
     <Menu>
       <MenuItem
         icon={<Icon icon="reader-18" />}
-        text={formatMessage({ id: 'view_details' })}
+        text={intl.get('view_details')}
         onClick={safeCallback(onViewDetails, original)}
       />
       <MenuDivider />
       <MenuItem
         icon={<Icon icon="pen-18" />}
-        text={formatMessage({ id: 'edit_account' })}
+        text={intl.get('edit_account')}
         onClick={safeCallback(onEdit, original)}
       />
       <MenuItem
         icon={<Icon icon="plus" />}
-        text={formatMessage({ id: 'new_child_account' })}
+        text={intl.get('new_child_account')}
         onClick={safeCallback(onNewChild, original)}
       />
       <MenuDivider />
       <If condition={original.active}>
         <MenuItem
-          text={formatMessage({ id: 'inactivate_account' })}
+          text={intl.get('inactivate_account')}
           icon={<Icon icon="pause-16" iconSize={16} />}
           onClick={safeCallback(onInactivate, original)}
         />
       </If>
       <If condition={!original.active}>
         <MenuItem
-          text={formatMessage({ id: 'activate_account' })}
+          text={intl.get('activate_account')}
           icon={<Icon icon="play-16" iconSize={16} />}
           onClick={safeCallback(onActivate, original)}
         />
       </If>
       <MenuItem
-        text={formatMessage({ id: 'delete_account' })}
+        text={intl.get('delete_account')}
         icon={<Icon icon="trash-16" iconSize={16} />}
         intent={Intent.DANGER}
         onClick={safeCallback(onDelete, original)}
@@ -77,7 +76,6 @@ export function ActionsMenu({
  * Normal cell.
  */
 export function NormalCell({ cell: { value } }) {
-  const { formatMessage } = useIntl();
   const arrowDirection = value === 'credit' ? 'down' : 'up';
 
   // Can't continue if the value is not `credit` or `debit`.
@@ -87,7 +85,7 @@ export function NormalCell({ cell: { value } }) {
   return (
     <Tooltip
       className={Classes.TOOLTIP_INDICATOR}
-      content={formatMessage({ id: value })}
+      content={intl.get(value)}
       position={Position.RIGHT}
       hoverOpenDelay={100}
     >

client/src/containers/Accounts/utils.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Intent, Tag } from '@blueprintjs/core';
 import { If, AppToaster } from 'components';
-import { formatMessage } from 'services/intl';
+import intl from 'react-intl-universal';
 import { NormalCell, BalanceCell } from './components';
 import { isBlank, compose } from 'utils';
 
@@ -25,17 +25,13 @@ export const accountNameAccessor = (account) => {
 export const handleDeleteErrors = (errors) => {
   if (errors.find((e) => e.type === 'ACCOUNT.PREDEFINED')) {
     AppToaster.show({
-      message: formatMessage({
+      message: intl.get('you_could_not_delete_predefined_accounts'),
-        id: 'you_could_not_delete_predefined_accounts',
-      }),
       intent: Intent.DANGER,
     });
   }
   if (errors.find((e) => e.type === 'ACCOUNT.HAS.ASSOCIATED.TRANSACTIONS')) {
     AppToaster.show({
-      message: formatMessage({
+      message: intl.get('cannot_delete_account_has_associated_transactions'),
-        id: 'cannot_delete_account_has_associated_transactions',
-      }),
       intent: Intent.DANGER,
     });
   }
@@ -56,28 +52,28 @@ export const useAccountsTableColumns = () => {
     () => [
       {
         id: 'name',
-        Header: formatMessage({ id: 'account_name' }),
+        Header: intl.get('account_name'),
         accessor: 'name',
         className: 'account_name',
         width: 200,
       },
       {
         id: 'code',
-        Header: formatMessage({ id: 'code' }),
+        Header: intl.get('code'),
         accessor: AccountCodeAccessor,
         className: 'code',
         width: 80,
       },
       {
         id: 'type',
-        Header: formatMessage({ id: 'type' }),
+        Header: intl.get('type'),
         accessor: 'account_type_label',
         className: 'type',
         width: 140,
       },
       {
         id: 'normal',
-        Header: formatMessage({ id: 'normal' }),
+        Header: intl.get('account_normal'),
         Cell: NormalCell,
         accessor: 'account_normal',
         className: 'normal',
@@ -85,13 +81,13 @@ export const useAccountsTableColumns = () => {
       },
       {
         id: 'currency',
-        Header: formatMessage({ id: 'currency' }),
+        Header: intl.get('currency'),
         accessor: 'currency_code',
         width: 75,
       },
       {
         id: 'balance',
-        Header: formatMessage({ id: 'balance' }),
+        Header: intl.get('balance'),
         accessor: 'amount',
         Cell: BalanceCell,
         width: 150,

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({
+        message: intl.get('the_account_has_been_successfully_activated'),
-          id: '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({
+          message: intl.get('the_accounts_has_been_successfully_activated'),
-            id: '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({
+      confirmButtonText={`${intl.get('activate')} (${selectedRowsCount})`}
-        id: '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({
+          message: intl.get('the_accounts_has_been_successfully_deleted'),
-            id: '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({
+      confirmButtonText={`${intl.get('delete')} (${selectedRowsCount})`}
-        id: '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({
+          message: intl.get('the_accounts_have_been_successfully_inactivated'),
-            id: '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({
+      confirmButtonText={`${intl.get('inactivate')} (${selectedRowsCount})`}
-        id: 'inactivate',
-      })} (${selectedRowsCount})`}
       intent={Intent.WARNING}
       isOpen={isOpen}
       onCancel={handleCancel}

client/src/containers/Alerts/AccountDeleteAlert.js

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_account_has_been_successfully_deleted'),
-            id: '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({
+        message: intl.get('the_account_has_been_successfully_inactivated'),
-          id: '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({
+          message: intl.get('the_bill_has_been_deleted_successfully'),
-            id: '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({
+          message: intl.get('the_bill_has_been_opened_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_currency_has_been_deleted_successfully'),
-            id: '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({
+          message: intl.get('the_customers_has_been_deleted_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_customer_has_been_deleted_successfully'),
-            id: '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({
+          message: intl.get('the_estimate_has_been_approved_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_estimate_has_been_deleted_successfully'),
-            id: '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({
+          message: intl.get('the_estimate_has_been_delivered_successfully'),
-            id: '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({
+          message: intl.get('the_estimate_has_been_rejected_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_exchange_rates_has_been_deleted_successfully'),
-            id: '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(
+        message: intl.get(
-          { id: 'the_expense_has_been_deleted_successfully' },
+          '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({
+          message: intl.get('the_expense_has_been_published'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_invoice_has_been_deleted_successfully'),
-            id: '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({
+          message: intl.get('the_invoice_has_been_delivered_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_adjustment_has_been_deleted_successfully'),
-            id: '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({
+          message: intl.get('the_item_has_been_activated_successfully'),
-            id: '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({
+          message: intl.get('the_items_has_been_deleted_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_item_categories_has_been_deleted_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_item_category_has_been_deleted_successfully'),
-            id: '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 {
+import intl from 'react-intl-universal';
-  FormattedMessage as T,
+import {  FormattedMessage as T, FormattedHTMLMessage } from 'components';
-  FormattedHTMLMessage,
-  useIntl,
-} from 'react-intl';
 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({
+          message: intl.get('the_item_has_been_deleted_successfully'),
-            id: '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({
+          message: intl.get('the_item_has_been_inactivated_successfully'),
-            id: '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(
+          message: intl.get(
-            { id: 'the_journal_has_been_deleted_successfully' },
+            '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({
+          message: intl.get('the_manual_journal_has_been_published'),
-            id: 'the_manual_journal_has_been_published',
-          }),
           intent: Intent.SUCCESS,
         });
       })